*{box-sizing:border-box}
:root{
  --bg:#0b0d12;--panel:#0f1320;--muted:#9aa3b2;--text:#f2f5f9;
  --accent:#7ab3ff;--locked:#556081;--available:#37d99e;--active:#ffd166;--line:#9aa3b2;
  --chip:#0d1426;--chip-border:#2a3550;
}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial}
header.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #181e2c;background:#0a0e1a;position:sticky;top:0;z-index:10}
header .controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
header input[type=number]{width:84px;background:#0c1222;border:1px solid #1e2740;color:var(--text);padding:6px 8px;border-radius:10px}
header button{background:#0c1222;border:1px solid #1e2740;color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
header button:hover{border-color:var(--accent)}
.pill{background:var(--chip);border:1px solid var(--chip-border);padding:6px 10px;border-radius:999px}

.app-main{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 64px)}
.sidebar{border-right:1px solid #181e2c;padding:12px;display:flex;flex-direction:column;gap:12px;background:#090e1a}
.panel{background:var(--panel);border:1px solid #131a2b;border-radius:14px;padding:12px}
.panel h2{margin:0 0 8px 0;font-size:16px}
.canvas-wrap{position:relative;overflow:hidden}
.canvas-toolbar{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;z-index:5}
.canvas-toolbar button{background:#0c1222;border:1px solid #1e2740;color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer}
#graph{width:100%;height:calc(100vh - 64px);background:radial-gradient(1100px 700px at 45% 20%, #12182a 0%, #0b0d12 70%);user-select:none}

/* Nós + labels */
.node{cursor:grab}
.node.dragging{cursor:grabbing}
.node circle{stroke-width:2.25px;fill:#0e1731;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.node text{font-size:12.5px;pointer-events:none;dominant-baseline:central;fill:#e8eefc}
.label-bg{fill:rgba(8,12,26,.9);stroke:#2b3958;stroke-width:1.1px;rx:10;ry:10}

/* Ligações */
.link{fill:none;stroke:var(--line);stroke-width:1.5px;opacity:0.9}
.link.available{stroke-dasharray:4 4;opacity:1}

/* Tooltip */
.tooltip{position:absolute;left:0;top:0;pointer-events:none;background:#0a0f1f;border:1px solid #1c2742;padding:10px 12px;border-radius:12px;min-width:240px;max-width:360px;box-shadow:0 12px 36px rgba(0,0,0,.5);display:none}
.tooltip h3{margin:0 0 6px 0;font-size:14px}
.tooltip p{margin:4px 0;color:var(--muted)}
.tag{display:inline-block;padding:2px 6px;border-radius:999px;border:1px solid #2d3a5a;margin-right:6px;color:#b3c7ff;background:#0d1426}
hr.sep{border:0;border-top:1px solid #1a2236;margin:8px 0}

/* título + subtítulo */
.title-wrap{display:flex;flex-direction:column}
.title-wrap h1{margin:0 0 2px 0}
.subtitle{font-size:12px;color:var(--muted);line-height:1}

/* (opcional) ligeiro ganho de legibilidade de labels longas */
.node text{font-size:12.5px;letter-spacing:.1px}
.label-bg{opacity:.95}

.saved-builds{
  position: fixed;
  right: 16px;          
  left: auto;          
  bottom: 16px;
  background: rgba(10,16,28,.7);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(4px);
}

.saved-builds .row{ display:flex; gap:8px; margin:6px 0; }
.saved-builds input, .saved-builds select{
  background:#0f172a; color:#e2e8f0; border:1px solid #1f2a44;
  border-radius:8px; padding:6px 8px; min-width:220px;
}
.saved-builds button{ border-radius:8px; padding:6px 10px; }
.saved-builds .danger{ background:#3b0f14; border:1px solid #7f1d1d; color:#fca5a5; }

.saved-builds{ right:16px; left:auto; bottom:16px; }
/* o canvas pode crescer e não deve cortar nada */
.app-main { align-items: stretch; }
.canvas-root { overflow: visible; }
.canvas-root svg { display: block; width: 100%; }


/* ===== Página sem rolagem global ===== */
html, body{
  height: 100%;
  overflow: hidden;      /* só a coluna esquerda rola */
}

/* ===== Área do app: ocupa a viewport - header (64px é o seu header atual) ===== */
.app-main{
  display: grid;
  grid-template-columns: 340px 1fr;  /* coluna fixa + resto */
  height: calc(100vh - 64px);        /* era min-height -> agora altura exata */
  overflow: hidden;                  /* nada vaza para criar “faixa” */
}

/* ===== Sidebar com largura travada e scroll próprio ===== */
.sidebar{
  border-right: 1px solid #181e2c;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #090e1a;

  width: 340px;                      /* fixa mesmo se o conteúdo crescer */
  min-width: 340px;
  max-width: 340px;
  height: 100%;
  overflow: auto;                    /* rolagem só aqui */
  box-sizing: border-box;
}

/* ===== Canvas ocupa todo o resto, sem sobras à direita nem corte embaixo ===== */
.canvas-wrap{
  position: relative;
  overflow: hidden;
  height: 100%;                      /* acompanha a altura do .app-main */
  padding: 0;                        /* garante zero “respiro” lateral */
  box-sizing: border-box;
}

/* Se o seu SVG/contêiner é #graph, ele precisa preencher 100% da area */
#graph{
  width: 100%;
  height: 100%;                      /* em vez de calc(100vh - 64px) */
  background: radial-gradient(1100px 700px at 45% 20%, #12182a 0%, #0b0d12 70%);
  user-select: none;
  display: block;
}

/* (Limpeza) você tem declarações duplicadas; pode remover estas pois não usa .canvas-root: */
.canvas-root { overflow: visible; }
.canvas-root svg { display: block; width: 100%; }

/* Painel de saves já ok; só remova a LINHA DUPLICADA repetindo .saved-builds */
/* —— 1) desliga scroll global —— */
html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;                /* só a sidebar rola */
}

/* —— 2) app ocupa a viewport menos o header —— */
:root{ --header-h: 64px; }         /* ajuste se seu header mudar */
.app-main{
  display: grid;
  grid-template-columns: 340px 1fr;/* sidebar fixa + resto */
  height: calc(100vh - var(--header-h));
  width: 100%;
  overflow: hidden;                /* nada “vaza” p/ criar faixa */
  align-items: stretch;
}

/* —— 3) sidebar de largura fixa + scroll próprio —— */
.sidebar{
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  height: 100%;
  overflow: auto;                  /* rolagem só aqui */
  box-sizing: border-box;          /* evita “engordar” por padding/borda */
}

/* —— 4) canvas ocupa 100% do resto —— */
.canvas-wrap{
  position: relative;
  height: 100%;
  min-width: 0;                    /* importantíssimo p/ grid/flex */
  overflow: hidden;                /* nada cria scroll aqui */
  padding: 0;
  box-sizing: border-box;
}

/* —— 5) o SVG preenche a área (sem calc duplicado) —— */
#graph{
  width: 100%;
  height: 100% !important;         /* mata height antigos tipo calc(100vh-64px) */
  display: block;
}

/* LIMPEZA: pode remover regras antigas que citam .canvas-root,
   min-height em .app-main, ou height duplicado em #graph */
:root{ --sidebar-w: 340px; }           /* largura padrão da sidebar */

.app-main{
  display: grid;
  grid-template-columns: auto 1fr;     /* 1ª coluna acompanha a largura da sidebar */
  height: calc(100vh - 64px);
  width: 100%;
  overflow: hidden;
  align-items: stretch;
}

/* sidebar usa a variável; anima ao colapsar */
.sidebar{
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  transition: width .25s ease, min-width .25s ease, max-width .25s ease, padding .25s ease, border-right .25s ease;
}

/* canvas ocupa todo o resto */
.canvas-wrap{ height:100%; min-width:0; overflow:hidden; padding:0; }
#graph{ width:100%; height:100% !important; display:block; }

/* estado colapsado: sidebar some (0px) e some o padding/borda */
.app-main.sidebar-collapsed{ --sidebar-w: 0px; }
.app-main.sidebar-collapsed .sidebar{
  padding: 0;
  border-right: 0;
}
/* largura padrão da sidebar */
:root{ --sidebar-w: 340px; }

/* AQUI é o pulo do gato: a 1ª coluna usa a variável */
.app-main{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr; /* <- era 340px 1fr ou auto 1fr */
  height: calc(100vh - 64px);
  width: 100%;
  overflow: hidden;
  align-items: stretch;
}

/* sidebar segue a variável e transiciona */
.sidebar{
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  transition: width .25s, min-width .25s, max-width .25s, padding .25s, border-right .25s;
}

/* estado COLAPSADO: zera a coluna e esconde o conteúdo visualmente */
.app-main.sidebar-collapsed{ --sidebar-w: 0px; }
.app-main.sidebar-collapsed .sidebar{
  padding: 0;
  border-right: 0;
  overflow: hidden;        /* evita scrollbar aparecendo */
  pointer-events: none;    /* não captura cliques quando oculta */
}
/* ===== Revelar/ocultar nós conforme estado ===== */
.node { 
  cursor: grab; 
  transition: opacity .25s ease, filter .25s ease; 
}

/* ativo = 100% visível */
.node.active { opacity: 1; }

/* comprável (todos requisitos ok) */
.node.available { opacity: .95; }

/* indisponível (não pode aprender ainda) */
.node.unavailable { opacity: .28; }
.node.unavailable circle { fill:#0b1226; stroke: var(--locked); }
.node.unavailable .label-bg { fill: rgba(8,12,26,.55); stroke:#1a243a; }
.node.unavailable text { fill: rgba(232,238,252,.55); }

/* links também “somem” quando o destino não é comprável */
.link.locked { opacity:.25; stroke-dasharray: 3 6; }
/* aresta para destino já comprado: visível e linha contínua */
.link.active{
  opacity: .95;
  stroke-dasharray: none;
}
.node image.node-icon{
  pointer-events: none;
  opacity: .95;
  filter: saturate(92%);
}
.node.available image.node-icon{ opacity: .9; }
.node.unavailable image.node-icon{
  opacity: .28;
  filter: saturate(55%);
}
.node .node-icon { opacity: .95; }
.node.unavailable .node-icon { opacity: .25; filter: grayscale(60%); }

.link.locked    { opacity: .25; stroke-dasharray: 4 4; }
.link.available { opacity: .9; }

.node .node-icon { opacity: .7; transition: opacity .2s, filter .2s; }
.node.unavailable .node-icon { opacity: .12; filter: grayscale(100%); }
.node.available   .node-icon { opacity: .6;  filter: grayscale(40%);  }
.node.active      .node-icon { opacity: 1;   filter: none;           }