.planner-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.class-select { display: flex; flex-wrap: wrap; gap: 8px; }
.class-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  border: 1px solid var(--border-steel-light); background: var(--bg-panel); color: var(--text-secondary);
  font-weight: 700; font-size: 0.85rem; cursor: pointer; min-height: 44px;
}
.class-chip .swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); flex-shrink: 0; }
.class-chip .chip-portrait { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.class-chip[aria-pressed="true"] { color: var(--void); background: var(--chip-color, var(--gold)); border-color: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 6px 18px -6px var(--chip-color, var(--gold)); }
.class-chip:hover { border-color: var(--chip-color, var(--gold-dim)); }

.planner-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.planner-summary {
  position: sticky; top: 86px; z-index: 20; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--bg-panel-raised); border: 1px solid var(--border-steel-light); border-radius: var(--radius);
  padding: 14px 20px; margin-bottom: 24px;
}
.planner-summary .points-total { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.3rem; }
.planner-summary .points-total span { color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-body); }
.summary-trees { display: flex; gap: 14px; flex-wrap: wrap; margin-right: auto; }
.summary-trees div { font-size: 0.82rem; color: var(--text-secondary); }
.summary-trees strong { color: var(--text-primary); }


.tree-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tree-panel { background: var(--bg-panel); border: 1px solid var(--border-steel); border-radius: var(--radius); overflow: hidden; }
.tree-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-steel); background: var(--bg-panel-raised); }
.tree-panel-head h3 { margin: 0; font-size: 1rem; }
.tree-points { font-weight: 700; color: var(--gold-bright); font-size: 0.9rem; }
.tree-reset { background: none; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; text-decoration: underline; padding: 6px; min-height: 32px; }
.tree-reset:hover { color: var(--gold-bright); }

.tree-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px; }
.talent-node {
  position: relative; aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--border-steel-light);
  background: var(--bg-panel-raised); display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px; min-height: 56px; color: var(--text-secondary); font-size: 0.68rem; text-align: center; gap: 2px;
}
.talent-node .ranks { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; letter-spacing: 0.02em; }
.talent-node.empty { border-style: dashed; cursor: default; opacity: 0.35; }
.talent-node.locked { opacity: 0.4; cursor: not-allowed; }
.talent-node.available:hover { border-color: var(--gold-dim); background: var(--bg-panel-hover); }
.talent-node.ranked { border-color: var(--gold); background: rgba(201,169,98,0.14); color: var(--text-primary); }
.talent-node.ranked .ranks { color: var(--gold-bright); }
.talent-node.maxed { box-shadow: var(--glow-gold); }
.talent-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.node-minus {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 0.85rem; line-height: 20px; text-align: center;
  font-weight: 700; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.node-minus:hover { filter: brightness(1.15); }

.talent-tooltip-portal {
  position: fixed; pointer-events: none; z-index: 10000;
  width: min(320px, calc(100vw - 24px));
  background: var(--navy); border: 1px solid var(--border-steel-light); border-radius: var(--radius-sm);
  padding: 12px; text-align: left; box-shadow: var(--shadow-panel); font-size: 0.78rem; color: var(--text-secondary);
  white-space: normal; overflow-wrap: break-word;
}
.talent-tooltip-portal[hidden] { display: none; }
.talent-tooltip-portal strong { display: block; color: var(--gold-bright); font-size: 0.85rem; margin-bottom: 4px; }
.talent-tooltip-portal .tt-rank { font-size: 0.72rem; font-weight: 700; color: var(--gold-bright); margin-bottom: 6px; }
.talent-tooltip-portal .tt-req { margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); }
.talent-tooltip-portal .tt-status { display: block; margin-top: 8px; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); }


/* Forever confirmed-changes panel (prose, not fake nodes) */
.forever-notes { margin-top: 28px; background: var(--bg-panel); border: 1px solid var(--cyan-dim); border-radius: var(--radius); padding: 22px; }
.forever-notes h3 { color: var(--cyan); margin-bottom: 14px; }

/* Mobile planner layout */
.mobile-tree-tabs { display: none; gap: 8px; margin-bottom: 16px; }
.mobile-tree-tabs button { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-steel-light); background: var(--bg-panel); color: var(--text-secondary); font-weight: 700; font-size: 0.85rem; min-height: 44px; }
.mobile-tree-tabs button[aria-selected="true"] { background: var(--gold); color: var(--void); border-color: var(--gold); }

@media (max-width: 860px) {
  .planner-summary { position: static; }
  .tree-columns { grid-template-columns: 1fr; }
  .tree-panel { display: none; }
  .tree-panel.active-mobile { display: block; }
  .mobile-tree-tabs { display: flex; }
  .tree-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Beta trees, larger text, tool-first layout */
.planner-shell { padding: 28px 0 48px; }
.tree-panel-head h2 { margin: 0; font-size: 1.1rem; }
.tree-head-right { display: flex; align-items: center; gap: 10px; }
.level-req { font-size: 0.9rem; color: var(--text-secondary); }
.planner-status { min-height: 1.6em; font-size: 0.95rem; color: var(--text-secondary); margin: -12px 0 14px; }
.planner-status.error { color: var(--danger); }
.planner-foot { margin-top: 22px; font-size: 0.92rem; color: var(--text-muted); }
.talent-node { aspect-ratio: auto; min-height: 76px; font-size: 0.78rem; line-height: 1.22; padding: 6px 4px; }
.talent-node .node-name { display: block; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
.talent-node.locked { opacity: 0.6; }
.talent-node .ranks { font-size: 0.74rem; }
.talent-node.single { border-radius: 50% / 38%; }
.talent-node.has-prereq::before { content: ""; position: absolute; top: -9px; left: 50%; width: 2px; height: 8px; background: var(--border-steel-light); }
.talent-node.has-prereq.ranked::before, .talent-node.has-prereq.available::before { background: var(--gold-dim); }
.talent-node.future { opacity: 0.55; border-style: dotted; }
.talent-node.future .node-name { color: var(--text-muted); font-size: 0.72rem; }
.talent-tooltip-portal { font-size: 0.88rem; width: min(340px, calc(100vw - 24px)); }
.talent-tooltip-portal p { margin: 0; color: var(--text-secondary); font-size: 0.88rem; }
.talent-tooltip-portal strong { font-size: 0.95rem; }
.talent-tooltip-portal .tt-rank, .talent-tooltip-portal .tt-req { font-size: 0.8rem; }
.talent-tooltip-portal .tt-status { font-size: 0.72rem; }
.forever-notes h2 { color: var(--cyan); font-size: 1.2rem; margin-bottom: 12px; }
.legacy-summary { position: static; }
@media (max-width: 860px) {
  .talent-node { min-height: 70px; font-size: 0.74rem; }
}