:root {
  --bg: #090b10;
  --bg-raised: #0f1219;
  --panel: #151922;
  --panel-soft: #1b202a;
  --panel-strong: #0d1016;
  --line: #2a303d;
  --line-bright: #4a5366;
  --text: #f3f5f7;
  --muted: #8892a3;
  --muted-bright: #b8c0cd;
  --accent: #75dec2;
  --accent-dark: #163f3a;
  --amber: #e8bd68;
  --danger: #e16f70;
  --melee: #f18484;
  --range: #f0d66f;
  --magic: #79d9f2;
  --faith: #78d99a;
  --hybrid: #bd83ee;
  --utility: #929aaa;
  --display: 'Bahnschrift SemiCondensed', 'Arial Narrow', sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--body);
  background:
    radial-gradient(circle at 48% -20%, rgba(45, 82, 83, .3), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 6px 6px,
    var(--bg);
}
button, input, select { font: inherit; }
button, input, select, summary { outline-color: var(--accent); }
button { color: inherit; }
a { color: #8edfc9; text-decoration-color: rgba(142,223,201,.38); text-underline-offset: 3px; }
.hidden { display: none !important; }
.type-melee { --type-color: var(--melee); }
.type-range { --type-color: var(--range); }
.type-magic { --type-color: var(--magic); }
.type-faith { --type-color: var(--faith); }
.type-hybrid { --type-color: var(--hybrid); }
.type-utility { --type-color: var(--utility); }
.damage-type, .attribute-type { color: var(--type-color, var(--muted-bright)); font-weight: 700; }

.app-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
}

.game-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(25,30,40,.98), rgba(14,17,23,.985));
  border: 1px solid var(--line-bright);
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
}
.game-panel::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,.025);
  pointer-events: none;
}

.eyebrow, .card-kicker {
  color: var(--accent);
  font-family: var(--display);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.microcopy { color: var(--muted); font-size: .7rem; line-height: 1.45; }

/* Header */
.topbar {
  z-index: 30;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(230px, .7fr) 120px auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.brand-sigil {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: #0d1718;
  border: 1px solid #40736a;
  transform: rotate(45deg);
}
.brand-sigil::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(117,222,194,.3); }
.brand-sigil span { transform: rotate(-45deg); font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; }
.brand-copy { min-width: 0; }
.brand h1 { margin: 3px 0 0; font-family: var(--display); font-size: 1.35rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.brand h1 span { color: var(--muted-bright); font-weight: 500; }
.brand p { margin: 5px 0 0; color: var(--muted); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.loadout-control { min-width: 0; }
.control-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.control-label span { color: var(--muted-bright); font-family: var(--display); font-size: .73rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.control-label small { color: #697383; font-size: .58rem; white-space: nowrap; }
.loadout-strip { display: flex; gap: 5px; }
.loadout-chip {
  width: 35px;
  height: 32px;
  padding: 0;
  color: #aab2bf;
  background: #0c0f15;
  border: 1px solid #353c49;
  font-family: var(--display);
  font-weight: 700;
  cursor: pointer;
}
.loadout-chip:hover { border-color: #667184; color: #fff; }
.loadout-chip.active { color: #07100e; background: var(--accent); border-color: #b9f4e3; box-shadow: 0 0 18px rgba(117,222,194,.18); }
.top-summary { padding-left: 14px; border-left: 1px solid var(--line); }
.top-summary span, .top-summary small { display: block; color: var(--muted); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; }
.top-summary strong { display: block; margin: 2px 0; color: var(--amber); font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.top-actions, .left-actions, .optimizer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.top-actions { justify-content: flex-end; }

.btn, .tab, .filter-pill {
  min-height: 33px;
  padding: 7px 11px;
  color: var(--muted-bright);
  background: #11151c;
  border: 1px solid #333b48;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .035em;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}
.btn:hover, .tab:hover, .filter-pill:hover { color: #fff; border-color: #657083; background: #1a202a; }
.btn:active { transform: translateY(1px); }
.btn.accent { color: #07110e; background: var(--accent); border-color: #a9eedc; }
.btn.accent:hover { background: #94ead3; }
.btn.subtle { background: transparent; }
.btn.danger { color: #e99b9c; background: rgba(119,42,46,.18); border-color: rgba(225,111,112,.38); }
.btn.large { min-height: 40px; padding-inline: 17px; font-size: .83rem; text-transform: uppercase; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn > span { color: var(--accent); font-size: .72rem; }
.icon-btn.accent > span { color: #07110e; }

/* Main workspace */
.workspace {
  display: grid;
  grid-template-columns: 280px minmax(620px, 1fr) 330px;
  gap: 10px;
  min-height: 0;
}
.left-panel, .center-panel, .right-panel { min-width: 0; min-height: 0; }
.left-panel, .right-panel { display: flex; flex-direction: column; }
.center-panel { overflow: hidden; }
.panel-heading {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,255,255,.025), transparent);
}
.panel-heading h2 { margin: 4px 0 0; font-family: var(--display); font-size: 1.18rem; line-height: 1; text-transform: uppercase; }
.status-orb, .pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(117,222,194,.7);
}
.left-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #394250 transparent; }
.slot-section, .weapon-box, .progression-box { padding: 13px 14px 0; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.section-label span { color: #c9d0da; font-family: var(--display); font-size: .75rem; font-weight: 700; letter-spacing: .105em; text-transform: uppercase; }
.section-label small { color: var(--muted); font-size: .62rem; }
.slots { display: grid; gap: 6px; }
.slots.single { grid-template-columns: 1fr; }
.slots.triple { grid-template-columns: repeat(3, 1fr); }
.slots.grid { grid-template-columns: repeat(2, 1fr); }
.progression-box { padding-bottom: 12px; border-bottom: 1px solid var(--line); background: rgba(117,222,194,.025); }
.character-level-field { display: grid; grid-template-columns: minmax(0,1fr) 68px; align-items: center; gap: 8px; margin-bottom: 8px; }
.character-level-field input { min-height: 30px; text-align: center; }
.passive-level-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.passive-level { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 45px; align-items: center; gap: 5px; padding: 5px; background: #0b0f14; border: 1px solid #29313b; border-left: 2px solid var(--type-color); }
.passive-level > span { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 5px; }
.passive-level > span .skill-icon-image { width: 24px; height: 24px; }
.passive-level strong { overflow: hidden; color: var(--type-color); font-family: var(--display); font-size: .61rem; text-overflow: ellipsis; text-transform: uppercase; }
.passive-level input { min-height: 27px; padding: 3px 4px; text-align: center; }
.passive-bonus-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.passive-bonus-summary span { padding: 3px 5px; color: var(--muted); background: #0b0f14; border: 1px solid #252c36; font-size: .53rem; }
.passive-bonus-summary strong { color: var(--accent); }
.slot {
  position: relative;
  min-width: 0;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 5px;
  background: linear-gradient(145deg, #12161d, #0b0e13);
  border: 1px solid #343b47;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.16);
  cursor: default;
}
.slot.filled { cursor: pointer; }
.slot.filled:hover { border-color: #6c788c; background: #171c25; }
.slot.empty::before, .slot.empty::after { content: ''; position: absolute; background: #242b35; }
.slot.empty::before { width: 14px; height: 1px; }
.slot.empty::after { width: 1px; height: 14px; }
.slot-card { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 7px; align-items: center; }
.slot-icon, .tree-skill-icon, .inspector-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--utility);
  background: #080b0f;
  border: 1px solid #3b4350;
  font-family: var(--display);
  font-weight: 700;
  text-shadow: 0 1px #000;
}
.slot-icon { width: 36px; height: 36px; font-size: .69rem; }
.skill-icon-image { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; transform: scale(1.08); }
.icon-fallback { color: currentColor; font-size: .9rem; }
.slot-name { overflow: hidden; color: #eef1f5; font-family: var(--display); font-size: .76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.slot-sub { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .56rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.slot-level-badge, .tree-node-level {
  position: absolute;
  display: grid;
  place-items: center;
  color: #06100c;
  background: var(--accent);
  border: 1px solid #c8f8e9;
  font-family: var(--display);
  font-size: .65rem;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(0,0,0,.5);
}
.slot-level-badge { top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 3px; }
.slots.triple .slot { min-height: 58px; }
.slots.triple .slot-card { display: block; width: 36px; }
.slots.triple .slot-card > div:last-child { display: none; }
.weapon-box { padding-bottom: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.weapon-grid, .damage-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }

label { color: var(--muted-bright); font-size: .7rem; }
.weapon-grid label, .damage-input-grid label, .stats-input-grid label, .form-grid label, .model-inputs label, .data-skill-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .035em;
}
input, select {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--text);
  background: #090c11;
  border: 1px solid #343c49;
}
input:hover, select:hover { border-color: #566174; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(117,222,194,.09); }
input[type='range'] { min-height: 18px; padding: 0; accent-color: var(--accent); border: 0; background: transparent; }
.left-footer { padding: 11px 14px 12px; border-top: 1px solid var(--line); background: rgba(5,7,10,.35); }
.quick-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin-bottom: 8px; }
.summary-card { padding: 7px 8px; background: #0c0f14; border: 1px solid #2c333e; }
.summary-card span { display: block; color: var(--muted); font-family: var(--display); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.summary-card strong { color: var(--amber); font-family: var(--display); font-size: 1rem; }
.build-rule-warning { margin: 0 0 8px; padding: 7px 8px; color: #f0c985; background: rgba(127,84,24,.15); border: 1px solid rgba(232,189,104,.38); font-size: .61rem; line-height: 1.4; }
.left-actions .btn:first-child { flex: 1; }
.note { margin: 7px 0 0; }

/* Tabs and pages */
.tabs {
  min-height: 54px;
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #11151c;
  overflow-x: auto;
}
.tab { position: relative; min-height: 53px; padding: 0 15px; border: 0; border-right: 1px solid #262c36; background: transparent; text-transform: uppercase; }
.tab:first-child { border-left: 1px solid #262c36; }
.tab > span { margin-right: 7px; color: #596373; font-size: .59rem; }
.tab.active { color: #fff; background: linear-gradient(180deg, rgba(117,222,194,.09), transparent); }
.tab.active::after { content: ''; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(117,222,194,.5); }
.tab.active > span { color: var(--accent); }
.tab-page { display: none; height: calc(100% - 54px); min-height: 0; padding: 18px; overflow: auto; scrollbar-width: thin; scrollbar-color: #394250 transparent; }
.tab-page.active { display: block; }
.page-heading, .tree-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-heading h2, .tree-topline h2 { margin: 5px 0 2px; font-family: var(--display); font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
.page-heading p, .tree-topline p { margin: 0; color: var(--muted); font-size: .72rem; }

/* Interactive tree */
.tree-page { position: relative; overflow: auto; }
.tree-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--muted-bright); background: #0d1117; border: 1px solid var(--line); font-family: var(--display); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.tree-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.category-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-pill { min-height: 29px; padding: 5px 10px; color: var(--muted); background: #0d1016; font-size: .68rem; }
.filter-pill.active { color: #07110e; background: var(--accent); border-color: #a9eedc; }
.search-wrap { position: relative; width: 205px; flex: 0 0 auto; }
.search-wrap > span { position: absolute; top: 6px; left: 10px; z-index: 1; color: var(--accent); font-family: var(--display); font-size: 1.15rem; }
.search-wrap input { height: 30px; min-height: 30px; padding: 5px 8px 5px 31px; font-size: .7rem; }
.tree-layout.interactive-only { display: block; }
.tree-reference-card {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 11px;
  background: #0b0e13;
  border: 1px solid #323a46;
  box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 0 35px rgba(0,0,0,.35);
}
.tree-frame-corner { position: absolute; z-index: 10; top: 5px; width: 30px; height: 30px; pointer-events: none; }
.tree-frame-corner::before, .tree-frame-corner::after { content: ''; position: absolute; background: var(--amber); opacity: .65; }
.tree-frame-corner::before { top: 0; width: 30px; height: 1px; }
.tree-frame-corner::after { top: 0; width: 1px; height: 30px; }
.tree-frame-corner.top-left { left: 5px; }
.tree-frame-corner.top-right { right: 5px; transform: scaleX(-1); }
.tree-reference { position: relative; width: 100%; overflow: hidden; isolation: isolate; user-select: none; background: #24262b; border: 1px solid #20252c; }
.tree-reference > #treeImage { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; image-rendering: pixelated; }
.tree-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 35px 5px rgba(3,5,7,.34); }
.tree-hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tree-hotspot {
  position: absolute;
  width: 6.25%;
  min-width: 22px;
  aspect-ratio: 1;
  padding: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 3px;
  outline: none;
  background: transparent;
  transform: translate(-50%,-50%);
  pointer-events: auto;
  cursor: pointer;
}
.tree-hotspot:hover, .tree-hotspot:focus-visible { border-color: #e9fff8; background: rgba(117,222,194,.1); box-shadow: 0 0 0 3px rgba(117,222,194,.38), 0 0 20px rgba(117,222,194,.75); }
.tree-hotspot.selected { border-color: #fff; box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(117,222,194,.92); }
.tree-hotspot.filtered-out { opacity: .16; filter: grayscale(1); }
.tree-hotspot.unmodeled { opacity: .78; }
.tree-hotspot.unmodeled:hover, .tree-hotspot.unmodeled:focus-visible, .tree-hotspot.unmodeled.selected { opacity: 1; }
.tree-node-icon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; pointer-events: none; transform: scale(1.08); }
.tree-node-level { top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 4px; }
.tree-highlight { position: absolute; z-index: 3; width: 6.65%; min-width: 24px; aspect-ratio: 1; height: auto; border: 1px solid #fff; box-shadow: 0 0 0 4px rgba(117,222,194,.6), 0 0 24px rgba(117,222,194,.75); transform: translate(-50%,-50%); pointer-events: none; }
.tree-hover-card {
  position: absolute;
  z-index: 8;
  width: min(280px, 43%);
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  color: var(--muted-bright);
  background: rgba(8,11,15,.97);
  border: 1px solid #586272;
  box-shadow: 0 15px 35px rgba(0,0,0,.55);
  transform: translate(18px,-50%);
  pointer-events: none;
  font-size: .68rem;
  line-height: 1.38;
}
.tree-tooltip-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 9px; padding-bottom: 6px; border-bottom: 1px solid #252d38; }
.tree-tooltip-head > span { min-width: 0; display: grid; gap: 3px; }
.tree-tooltip-icon { width: 42px; height: 42px; display: block; object-fit: cover; image-rendering: pixelated; }
.tree-hover-card strong { color: #fff; font-family: var(--display); font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; }
.tree-hover-card small { color: var(--muted); font-size: .6rem; line-height: 1.3; }
.tree-hover-card span { color: var(--muted-bright); }
.tree-hover-card.edge-right { transform: translate(calc(-100% - 18px),-50%); }
.tree-hover-card.edge-bottom { margin-top: -25px; }
.tree-reference-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px 0; }
.tree-help { min-width: 0; display: grid; gap: 2px; }
.tree-help strong { color: var(--accent); font-family: var(--display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.tree-help span { color: var(--muted); font-size: .63rem; line-height: 1.35; }
.tree-footer-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.tree-footer-actions .btn { min-height: 28px; display: inline-flex; align-items: center; padding: 4px 8px; font-size: .63rem; text-decoration: none; }
.tree-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; padding-top: 12px; color: var(--muted); font-family: var(--display); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tree-legend i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.tree-legend i.melee { color: var(--melee); background: var(--melee); }
.tree-legend i.range { color: var(--range); background: var(--range); }
.tree-legend i.magic { color: var(--magic); background: var(--magic); }
.tree-legend i.faith { color: var(--faith); background: var(--faith); }
.tree-legend i.hybrid { color: var(--hybrid); background: var(--hybrid); }

/* Shared cards, tables, and forms */
.card { padding: 15px; background: rgba(11,14,19,.72); border: 1px solid var(--line); }
.card h3 { margin: 3px 0 5px; font-family: var(--display); font-size: 1.14rem; text-transform: uppercase; }
.card h4 { margin: 17px 0 7px; color: var(--muted-bright); font-family: var(--display); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.card p { margin: 0 0 10px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.subsection-title { margin: 16px 0 8px; padding-top: 12px; color: var(--muted-bright); border-top: 1px solid var(--line); font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.badge.experimental { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 8px; color: var(--amber); background: rgba(153,105,26,.12); border: 1px solid rgba(232,189,104,.42); font-family: var(--display); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.table-shell { overflow: auto; background: #0c0f14; border: 1px solid var(--line); }
.planner-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.planner-table th { position: sticky; top: 0; z-index: 2; padding: 10px; color: #8993a2; background: #141922; font-family: var(--display); font-size: .64rem; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.planner-table td { padding: 10px; color: #c8ced7; border-top: 1px solid #222935; font-size: .7rem; vertical-align: middle; }
.planner-table tr:hover td { background: rgba(255,255,255,.018); }
.planner-table td strong { color: #fff; font-family: var(--display); font-size: .78rem; }
.planner-table input[type='number'] { width: 66px; min-height: 30px; padding: 5px 7px; }
.table-skill { min-width: 145px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; }
.table-skill > span:last-child { min-width: 0; }
.table-skill strong, .table-skill small { display: block; }
.table-skill small { margin-top: 3px; color: var(--muted); font-size: .58rem; line-height: 1.25; }
.table-skill-icon { width: 32px; height: 32px; display: block; overflow: hidden; background: #080b0f; border: 1px solid #3a4350; }
.slot-type { display: inline-flex; padding: 4px 6px; color: var(--muted-bright); background: #11161d; border: 1px solid #303946; font-family: var(--display); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.slot-type.basic { color: var(--amber); border-color: rgba(232,189,104,.42); }
.slot-type.buff { color: var(--faith); border-color: rgba(149,146,255,.42); }
.slot-type.additional { color: var(--accent); border-color: rgba(117,222,194,.35); }
.scaling-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.scaling-pill { padding: 3px 5px; color: #bec6d1; background: #11161d; border: 1px solid color-mix(in srgb, var(--type-color, #303946) 48%, #303946); font-family: var(--display); font-size: .6rem; white-space: nowrap; }
.dps-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.attack-total { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 12px; }
.attack-total > div { padding: 8px; background: #0a0d12; border: 1px solid #252c36; border-top: 2px solid var(--type-color, #252c36); }
.attack-total span { display: block; color: var(--muted); font-family: var(--display); font-size: .56rem; line-height: 1.25; text-transform: uppercase; }
.attack-total strong { color: var(--type-color, var(--amber)); font-family: var(--display); font-size: .95rem; }
.attack-total small { display: block; margin-top: 3px; color: var(--muted); font-size: .55rem; line-height: 1.35; }
.dps-summary-card { background: linear-gradient(145deg, rgba(20,45,42,.45), rgba(10,13,18,.8)); }
.derived-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.derived-stat-grid > div { min-width: 0; padding: 7px; background: #0a0d12; border: 1px solid #252c36; }
.derived-stat-grid span { display: block; min-height: 2.35em; color: var(--muted); font-family: var(--display); font-size: .53rem; line-height: 1.2; text-transform: uppercase; }
.derived-stat-grid strong { color: var(--accent); font-family: var(--display); font-size: .81rem; }
.derived-note { grid-column: 1 / -1; margin: 0 !important; padding: 6px 8px; color: var(--amber) !important; background: rgba(232,189,104,.05); border-left: 2px solid var(--amber); }
.dps-summary-card #dpsSummary { display: grid; gap: 6px; margin-top: 12px; }
.dps-metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: rgba(5,8,11,.48); border: 1px solid rgba(117,222,194,.16); }
.dps-metric span { color: var(--muted); font-size: .67rem; }
.dps-metric strong { color: var(--accent); font-family: var(--display); font-size: 1rem; }
.warning-copy { margin-top: 12px !important; padding-left: 9px; border-left: 2px solid var(--amber); }
.dps-influence-block { margin-top: 14px; padding-top: 1px; border-top: 1px solid rgba(117,222,194,.14); }
.dps-influence-block h4 { margin-top: 12px; }
.dps-table-card { margin-top: 12px; }
.dps-table { min-width: 1120px; }
.hit-profile { display: grid; gap: 2px; min-width: 72px; }
.hit-profile strong { color: var(--amber); font-size: .68rem !important; white-space: nowrap; }
.hit-profile small { color: var(--muted); font-size: .54rem; letter-spacing: .04em; text-transform: uppercase; }
.form-grid, .stats-input-grid, .model-inputs { display: grid; gap: 8px; }
.form-grid.cols-3, .stats-input-grid, .model-inputs { grid-template-columns: repeat(3,minmax(0,1fr)); }
.weight-row { display: grid; gap: 8px; margin: 14px 0; padding: 11px; background: #0b0e13; border: 1px solid var(--line); }
.weight-row label { display: grid; grid-template-columns: 100px minmax(0,1fr) 40px; align-items: center; gap: 8px; }
.weight-row output { color: var(--accent); font-family: var(--display); text-align: right; }
.advanced-box { margin-top: 14px; padding: 10px 11px; background: #0b0e13; border: 1px solid var(--line); }
.advanced-box summary { color: #c6ced8; font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .05em; cursor: pointer; }
.advanced-box[open] summary { margin-bottom: 10px; }
.optimizer-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 12px; }
.optimizer-actions { margin-top: 14px; }
.optimizer-actions .accent { flex: 1; }
.recommended-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.rec-stat, .weapon-recommendation { padding: 9px; background: #0a0d12; border: 1px solid #29313c; }
.rec-stat span { display: block; color: var(--muted); font-family: var(--display); font-size: .6rem; letter-spacing: .08em; }
.rec-stat strong { color: var(--type-color, var(--amber)); font-family: var(--display); font-size: 1.05rem; }
.weapon-recommendation { margin-bottom: 9px; border-color: rgba(117,222,194,.35); }
.weapon-recommendation strong { display: block; margin: 3px 0; color: var(--accent); font-family: var(--display); font-size: 1.15rem; }
.result-metrics, .ratio-bars, .marginal-table, .skill-contribution, .weapon-ranking { display: grid; gap: 5px; margin-top: 7px; }
.metric-row, .ratio-row, .marginal-row, .contrib-row, .weapon-rank-row { display: grid; grid-template-columns: 155px minmax(0,1fr) auto; align-items: center; gap: 8px; color: #b8c0cc; font-size: .65rem; }
.metric-row { grid-template-columns: minmax(0,1fr) auto; padding: 7px 8px; background: #0b0e13; border: 1px solid #232a34; }
.contrib-skill { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 7px; }
.contrib-skill i { width: 26px; height: 26px; display: block; overflow: hidden; border: 1px solid #35404d; }
.contrib-skill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 7px; overflow: hidden; background: #222936; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #3cae91, var(--accent)); }
.ratio-row .bar-fill, .marginal-row .bar-fill { background: var(--type-color, var(--accent)); }
.ratio-row > strong, .marginal-row > strong { color: var(--type-color, var(--text)); }
.weapon-evidence { display: grid; gap: 3px; margin-top: 9px; }
.weapon-evidence > div { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); gap: 6px; padding: 5px 7px; color: var(--muted); background: #10141b; border: 1px solid #212832; font-size: .64rem; }
.weapon-evidence > div:first-child { color: var(--muted-bright); background: #171c25; }
.weapon-evidence span:not(:first-child), .weapon-evidence strong:not(:first-child) { text-align: right; }
.data-grid { display: grid; grid-template-columns: .85fr 1.3fr .7fr; gap: 12px; }
.attribute-formula-card, .progression-model-card { grid-column: 1 / -1; }
.fit-badge { flex: 0 0 auto; padding: 5px 7px; color: var(--accent); background: rgba(117,222,194,.07); border: 1px solid rgba(117,222,194,.3); font-family: var(--display); font-size: .63rem; letter-spacing: .06em; }
.formula-definition { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 9px; padding: 8px 10px; color: var(--muted); background: #0a0d12; border-left: 2px solid var(--amber); font-size: .67rem; }
.formula-definition strong { color: var(--amber); font-family: var(--display); font-size: .85rem; }
.attribute-formula-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.attribute-formula { min-width: 0; display: grid; gap: 6px; padding: 9px 10px; background: #0a0d12; border: 1px solid #29313c; }
.attribute-formula { border-top: 2px solid var(--type-color, #29313c); }
.attribute-formula > span { color: var(--type-color, var(--muted-bright)); font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.attribute-formula code { overflow-wrap: anywhere; color: #d5e2de; font-size: .69rem; line-height: 1.45; white-space: normal; }
.attribute-formula code sub { color: var(--accent); }
.attribute-formula > small { color: var(--muted); font-size: .58rem; }
.progression-formula-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.progression-formula { min-width: 0; display: grid; gap: 6px; padding: 9px 10px; background: #0a0d12; border: 1px solid #29313c; border-top: 2px solid var(--accent); }
.progression-formula.wide { grid-column: 1 / -1; }
.progression-formula > span { color: var(--accent); font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.progression-formula code { overflow-wrap: anywhere; color: #d5e2de; font-size: .69rem; line-height: 1.5; white-space: normal; }
.progression-formula small { color: var(--muted); font-size: .58rem; }
.passive-rules-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.passive-rule { padding: 9px; background: #0a0d12; border: 1px solid #29313c; border-top: 2px solid var(--type-color); }
.passive-rule > span { font-family: var(--display); font-size: .67rem; text-transform: uppercase; }
.passive-rule > strong { display: block; margin-top: 3px; color: var(--muted-bright); font-family: var(--display); font-size: .62rem; }
.passive-rule ul { margin: 7px 0 0; padding-left: 16px; color: var(--muted); font-size: .59rem; line-height: 1.5; }
.weapon-formula { color: var(--type-color, var(--accent)); }
.base-formula { color: #b9c2cf; }
.attribute-analysis-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); gap: 9px; margin-top: 9px; }
.formula-table-shell { margin: 0; }
.formula-table { min-width: 560px; }
.impact-equation { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: baseline; gap: 7px; }
.impact-equation + .impact-equation { margin-top: 6px; padding-top: 6px; border-top: 1px solid #242c37; }
.impact-equation code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: #d8dee6; font-size: .66rem; }
.impact-equation code span:last-child { color: var(--type-color, var(--accent)); font-weight: 700; }
.impact-equation code small { color: var(--muted); font-family: var(--body); font-size: .55rem; }
.impact-equation code b { color: #687384; font-weight: 400; }
.damage-influence-card { padding: 12px; background: #0a0d12; border: 1px solid #29313c; }
.damage-influence-card h4 { margin: 5px 0 4px; color: var(--text); }
.damage-influence-card p { margin-bottom: 8px; }
.damage-influence-chart { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 8px; align-items: start; }
.damage-influence-item { min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.damage-ring { position: relative; width: 78px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--share) * 1%), #222a36 0); box-shadow: 0 0 15px color-mix(in srgb, var(--ring-color) 12%, transparent); }
.damage-ring::before { content: ''; position: absolute; inset: 8px; border-radius: inherit; background: #0c1016; border: 1px solid #303947; }
.damage-ring strong { position: relative; z-index: 1; color: var(--ring-color); font-family: var(--display); font-size: .86rem; }
.damage-influence-item > span { font-family: var(--display); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.damage-influence-item > small { color: var(--muted); font-size: .56rem; }
.damage-influence-chart.compact { margin-top: 8px; }
.damage-influence-chart.compact .damage-ring { width: 68px; }
.damage-influence-chart.compact .damage-ring::before { inset: 7px; }
.damage-influence-chart.is-empty .damage-ring { filter: saturate(.3); opacity: .7; }
.data-skill-list { max-height: 68vh; display: grid; gap: 7px; overflow: auto; }
.data-skill-card { padding: 10px; background: #0b0e13; border: 1px solid #262e39; }
.data-skill-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.data-skill-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.hit-audit { margin: 8px 0; padding: 8px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 10px; background: #080b0f; border: 1px solid #252d38; }
.hit-audit strong { color: var(--amber); font-family: var(--display); font-size: .7rem; }
.hit-audit span { color: var(--muted-bright); font-size: .64rem; }
.hit-audit small { grid-column: 1 / -1; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.sources-card a { display: block; margin: 8px 0; font-size: .72rem; }
.empty-state { padding: 24px 15px; color: var(--muted); background: rgba(4,7,10,.35); border: 1px dashed #343d4a; font-size: .72rem; line-height: 1.55; text-align: center; }

/* Inspector */
.right-panel { overflow: hidden; }
.inspector-heading .key-hint { width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); background: #0c0f14; border: 1px solid #353e4b; font-family: var(--display); font-size: .7rem; }
.inspector { min-height: 0; padding: 14px; display: grid; align-content: start; gap: 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: #394250 transparent; }
.inspector-head { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 11px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inspector-icon { width: 56px; height: 56px; font-size: .9rem; box-shadow: inset 0 0 15px rgba(255,255,255,.035); }
.inspector h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.inspector-meta p { margin: 5px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.35; }
.confidence-tag { display: inline-flex; margin-top: 6px; padding: 3px 5px; color: var(--accent); background: rgba(117,222,194,.07); border: 1px solid rgba(117,222,194,.24); font-family: var(--display); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.inspector-box { padding: 11px; display: grid; gap: 8px; background: #0b0e13; border: 1px solid #282f3a; }
.inspector-box > strong { color: #c7cfd9; font-family: var(--display); font-size: .7rem; letter-spacing: .085em; text-transform: uppercase; }
.level-line { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-bright); font-size: .68rem; }
.level-line strong { color: #fff; font-family: var(--display); }
.level-bar { height: 5px; overflow: hidden; background: #222936; }
.level-bar span { display: block; height: 100%; background: linear-gradient(90deg, #3daa8e, var(--accent)); box-shadow: 0 0 8px rgba(117,222,194,.45); }
.inline-controls { display: grid; grid-template-columns: 1fr; gap: 7px; }
.inline-controls label, .inspector-box > label { display: grid; gap: 5px; }
.slot-rule { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 10px; padding: 8px; background: #080b0f; border: 1px solid #252d38; }
.slot-rule span, .slot-rule small { color: var(--muted); font-size: .6rem; }
.slot-rule strong { color: var(--accent); font-family: var(--display); font-size: .72rem; text-transform: uppercase; }
.slot-rule small { grid-column: 1 / -1; }
.scaling-detail { display: grid; gap: 5px; }
.scaling-detail-row { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #202731; font-size: .65rem; }
.scaling-detail-row:last-child { border-bottom: 0; }
.scaling-detail-row > strong:first-child { color: var(--muted); font-family: var(--display); text-transform: uppercase; }
.scaling-detail-row > strong:last-child { color: var(--type-color, var(--accent)); font-family: var(--display); font-size: .78rem; }
.inspector-note { color: #b7bec9; font-size: .69rem; line-height: 1.55; }
.hit-note { padding-left: 8px; color: var(--muted); border-left: 2px solid #394352; font-size: .62rem; }
.damage-readout { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.damage-readout > div { padding: 8px; background: #080b0f; border: 1px solid #222934; }
.damage-readout span { display: block; color: var(--muted); font-family: var(--display); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.damage-readout strong { color: var(--amber); font-family: var(--display); font-size: .95rem; }

/* Feedback */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 300; padding: 10px 13px; color: #dff8f1; background: #101815; border: 1px solid #4c8a7b; box-shadow: 0 12px 35px rgba(0,0,0,.5); font-family: var(--display); font-size: .75rem; }
.footer { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 11px; color: #697383; font-size: .59rem; letter-spacing: .03em; }
.footer .status-orb { width: 5px; height: 5px; margin-right: 5px; }
.footer strong { color: var(--amber); font-weight: 500; }

@media (max-width: 1500px) {
  .workspace { grid-template-columns: 260px minmax(580px,1fr) 310px; }
  .topbar { grid-template-columns: minmax(280px,1fr) 220px 105px auto; gap: 12px; }
  .top-actions .btn { padding-inline: 8px; }
  .data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .app-shell { display: block; padding: 7px; }
  .topbar { grid-template-columns: 1fr auto; margin-bottom: 8px; }
  .loadout-control { order: 3; }
  .top-summary { display: none; }
  .workspace { grid-template-columns: 220px minmax(0,1fr); }
  .right-panel { grid-column: 1 / -1; margin-top: 8px; }
  .inspector { max-height: 520px; }
  .footer { margin-top: 8px; }
}
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr; }
  .top-actions { justify-content: flex-start; }
  .workspace { display: flex; flex-direction: column; }
  .center-panel { order: 1; }
  .left-panel { order: 2; margin-top: 8px; }
  .right-panel { order: 3; }
  .left-scroll { max-height: none; }
  .slots.grid { grid-template-columns: repeat(3,1fr); }
  .center-panel { min-height: 700px; }
  .tabs { padding: 0; }
  .tab { min-width: 112px; padding-inline: 10px; }
  .tab-page { padding: 13px 10px; }
  .tree-topline, .page-heading, .tree-toolbar, .tree-reference-footer { flex-direction: column; align-items: stretch; }
  .search-wrap { width: 100%; }
  .tree-footer-actions { align-self: flex-start; }
  .tree-hover-card { display: none; }
  .tree-hotspot { width: 7%; }
  .dps-grid, .optimizer-grid { grid-template-columns: 1fr; }
  .attribute-formula-grid, .attribute-analysis-grid, .progression-formula-grid { grid-template-columns: 1fr; }
  .progression-formula.wide { grid-column: auto; }
  .passive-rules-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid.cols-3, .stats-input-grid, .model-inputs { grid-template-columns: repeat(2,1fr); }
  .footer { display: grid; justify-content: stretch; text-align: center; }
}
@media (max-width: 480px) {
  .brand h1 { font-size: 1.1rem; }
  .brand-sigil { width: 43px; height: 43px; }
  .top-actions .btn { flex: 1; justify-content: center; }
  .loadout-strip { justify-content: space-between; }
  .loadout-chip { flex: 1; }
  .slots.grid { grid-template-columns: repeat(2,1fr); }
  .attack-total { grid-template-columns: repeat(2,1fr); }
  .derived-stat-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid.cols-3, .stats-input-grid, .model-inputs { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.status-layout { display:grid; grid-template-columns:minmax(360px,.95fr) minmax(420px,1.05fr); gap:14px; align-items:start; }
.status-input-card,.character-sheet-card { min-width:0; }
.status-matrix { display:grid; gap:6px; }
.status-matrix-row { display:grid; grid-template-columns:minmax(70px,.65fr) 1fr 1fr; gap:8px; align-items:end; padding:7px 8px; border:1px solid var(--line); background:rgba(5,8,13,.45); }
.status-matrix-row>strong { padding-bottom:10px; }
.status-matrix-row label { font-size:10px; color:var(--muted); }
.status-matrix-row input { width:100%; margin-top:4px; }
.character-sheet-section { margin-top:14px; }
.character-sheet-section h4 { margin:0 0 8px; color:var(--text); }
.character-sheet-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.character-sheet-grid>div { display:flex; flex-direction:column; gap:3px; padding:9px; border:1px solid var(--line); background:rgba(5,8,13,.55); }
.character-sheet-grid span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.character-sheet-grid strong { font-size:16px; }
.character-sheet-grid small { font-size:9px; color:var(--muted); }
.dps-results-only { grid-template-columns:1fr; }
@media (max-width:1100px) { .status-layout { grid-template-columns:1fr; } .character-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }