:root {
  --bg: #0d0f13;
  --panel: #151920;
  --panel2: #1b202a;
  --border: #262d3a;
  --text: #e8ecf2;
  --muted: #8b95a7;
  --accent: #ff7a1a;
  --accent2: #ffb26b;
  --pos: #38d39f;
  --neg: #ff5c6c;
  --enforcer: #ff4d4d;
  --recon: #4da3ff;
  --strategist: #3ed47a;
  --radius: 10px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.4; }
button, select, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: .02em; }
h3 { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .12em; margin-bottom: 10px; }
h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .1em; margin: 14px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0 8px; }

/* header */
header {
  display: flex; align-items: center; gap: 24px; padding: 14px 22px;
  border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #12151b, #0d0f13);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand h1 span { color: var(--accent); }
.brand small { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; white-space: nowrap; }
.brand h1 { white-space: nowrap; }
@media (max-width: 700px) { .brand small { display: none; } header { gap: 12px; padding: 10px 14px; } .tab { padding: 8px 10px; } }
nav { display: flex; gap: 4px; margin-left: auto; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted); padding: 8px 16px;
  border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-color: var(--border); background: var(--panel); }

/* layout */
#view { display: grid; grid-template-columns: 320px 1fr; gap: 18px; padding: 18px 22px; max-width: 1500px; margin: 0 auto; }
@media (max-width: 960px) { #view { grid-template-columns: 1fr; } }
.side { display: flex; flex-direction: column; gap: 14px; }
.main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .grid2 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 8px; }
.callout { background: #22190f; border: 1px solid #4a3417; color: var(--accent2); padding: 10px 14px; border-radius: 8px; }

/* presets */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preset {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.preset:hover { border-color: var(--accent); }
.preset b { font-size: 13px; }
.preset small { color: var(--muted); font-size: 11px; }

/* sliders */
.sliders { display: flex; flex-direction: column; gap: 6px; }
.slider { display: block; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.slider.on { border-color: var(--border); background: var(--panel2); }
.slider-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 2px; }
.slider-head .ico { color: var(--accent); width: 14px; text-align: center; }
.slider-head b { margin-left: auto; color: var(--accent); min-width: 14px; text-align: right; }
.slider input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
select { width: 100%; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 2px; }
.toggle input { accent-color: var(--accent); }

/* top 3 weapons */
.top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wcard {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; text-align: left; align-items: center;
}
.wcard:hover { border-color: var(--accent2); }
.wcard.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wcard .rank { grid-row: 1 / span 2; font-weight: 800; font-size: 20px; color: var(--accent); }
.wcard .wname { font-weight: 700; font-size: 15px; }
.wcard .wcls { grid-column: 2; color: var(--muted); font-size: 12px; }
.wcard .wscore { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 12px; }

/* stage */
.stage { background: radial-gradient(ellipse at 50% 60%, #1d2330 0%, var(--panel) 65%); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.stage-head h2 { font-size: 22px; font-weight: 800; letter-spacing: .04em; }
.stage-actions { display: flex; align-items: center; gap: 8px; }
.btn { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 600; }
.btn:hover { border-color: var(--accent); color: var(--accent2); }
.weapon-svg { width: 100%; height: auto; display: block; }
.gun-body { fill: #3a4252; stroke: #56617a; stroke-width: 1; }
.gun-dark { fill: #262c38; stroke: #3d465a; stroke-width: 1; }
.gun-line { stroke: #56617a; stroke-width: 3; fill: none; }
.gun-att { fill: rgba(255, 122, 26, .55); stroke: var(--accent); stroke-width: 1.2; }
.callout rect { fill: #10131a; stroke: var(--border); }
.callout-slot { fill: var(--muted); font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.callout-name { fill: var(--text); font-size: 12px; font-weight: 600; }
.callout-line { stroke: var(--accent); stroke-width: 1; fill: none; opacity: .7; }
.callout-dot { fill: var(--accent); }

/* build list */
.att-row { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--panel2); overflow: hidden; }
.att-row.open { border-color: var(--accent); }
.att-main { width: 100%; background: transparent; border: 0; text-align: left; padding: 8px 10px; cursor: pointer; display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; }
.att-main:hover { background: #202634; }
.att-slot { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); align-self: center; grid-row: 1 / span 2; }
.att-name { font-weight: 700; font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.att-deltas { display: flex; flex-wrap: wrap; gap: 4px; }
.att-deltas.wrap { margin-top: 4px; }
.chip { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #202634; border: 1px solid var(--border); white-space: nowrap; }
.chip.pos { color: var(--pos); border-color: rgba(56, 211, 159, .35); }
.chip.neg { color: var(--neg); border-color: rgba(255, 92, 108, .35); }
.badge { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; padding: 1px 5px; border-radius: 3px; border: 1px solid; }
.badge.est { color: #c9a24b; border-color: #6b5320; }
.badge.lock { color: var(--accent); border-color: var(--accent); }
.badge.ok { color: var(--pos); border-color: rgba(56, 211, 159, .5); margin-left: 8px; vertical-align: middle; }
.badge.prestige { color: #c9b3ff; border-color: #6a4fbf; background: #1e1733; }
.badge.free { color: var(--pos); border-color: rgba(56, 211, 159, .5); }
.badge.rework { color: var(--accent2); border-color: var(--accent); }
.chip.hid { color: #9fb3d9; border-color: #3a4a6b; border-style: dashed; }
.att-name .ex, .alt-name .ex { font-weight: 400; color: var(--muted); }
.att-name .ex::before, .alt-name .ex::before { content: '· '; }
.heading-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ttk td.good { color: var(--pos); } .ttk td.bad { color: var(--neg); }
.ttk-chart-wrap { margin: 4px 0 8px; }
.ttk-chart { width: 100%; max-width: 560px; height: auto; display: block; }
.ttk-grid { stroke: var(--border); stroke-width: 1; }
.ttk-lbl { fill: var(--muted); font-size: 9px; }
.ttk-base { fill: none; stroke: var(--muted); stroke-width: 2; }
.ttk-built { fill: none; stroke: var(--accent); stroke-width: 2.5; }

/* verified stats */
.stat-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.stat-group h4 { margin-top: 4px; }
.stat-grid { display: flex; flex-direction: column; gap: 2px; }
.stat { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--border); font-size: 13px; }
.stat b { font-variant-numeric: tabular-nums; }
.ttk { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttk th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.ttk td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ttk td small { color: var(--muted); }
.alts { border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 4px; background: #12161d; }
.alt { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.alt:hover { border-color: var(--border); background: var(--panel2); }
.alt.current { border-color: var(--border); }
.alt-name { font-weight: 600; display: flex; gap: 6px; align-items: center; }
.alt-score { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.alt .att-deltas { grid-column: 1 / span 2; }
.skipped { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* analysis */
.radar-wrap { display: flex; flex-direction: column; align-items: center; }
.radar-svg { width: 100%; max-width: 320px; }
.radar-ring { fill: none; stroke: var(--border); }
.radar-axis { stroke: var(--border); }
.radar-label { fill: var(--muted); font-size: 10px; letter-spacing: .04em; }
.radar-base { fill: rgba(139, 149, 167, .18); stroke: var(--muted); stroke-width: 1.2; }
.radar-built { fill: rgba(255, 122, 26, .25); stroke: var(--accent); stroke-width: 2; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.lg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lg.base::before { background: var(--muted); }
.lg.built::before { background: var(--accent); }
.tradeoffs .note { background: var(--panel2); border-left: 3px solid var(--accent); padding: 6px 10px; border-radius: 0 6px 6px 0; margin-bottom: 6px; font-size: 13px; }

/* chips (perks / streaks goals) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; display: flex; gap: 6px; align-items: center; font-size: 13px; }
.gchip.lvl1 { border-color: var(--accent2); color: var(--accent2); }
.gchip.lvl2 { border-color: var(--accent); background: #2a1a0b; color: var(--accent); }
.gchip b { font-size: 11px; }

/* perks */
.perk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .perk-row { grid-template-columns: 1fr; } }
.perk-card { background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--muted); border-radius: var(--radius); padding: 14px; }
.perk-card.enforcer { border-top-color: var(--enforcer); }
.perk-card.recon { border-top-color: var(--recon); }
.perk-card.strategist { border-top-color: var(--strategist); }
.perk-slot { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.perk-card h3 { font-size: 18px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 4px 0 6px; }
.perk-card p { margin: 0 0 8px; color: #c5ccd8; }
.perk-alts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.alt-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.alt-pill.enforcer { color: var(--enforcer); } .alt-pill.recon { color: var(--recon); } .alt-pill.strategist { color: var(--strategist); }
.spec { border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--border); background: var(--panel); }
.spec-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.spec h2 { font-size: 22px; margin: 4px 0 6px; }
.spec p { margin: 0; color: #c5ccd8; }
.spec.enforcer { border-color: var(--enforcer); } .spec.recon { border-color: var(--recon); } .spec.strategist { border-color: var(--strategist); }
.spec.hybrid { border-color: var(--accent); }
.spec.none { border-style: dashed; }
.wild { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wc { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* streaks */
.streak-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.streak-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.streak-card .cost { color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.streak-card h3 { font-size: 18px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 4px 0 8px; }
.costbar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.costbar .fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; }
.streak-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.srow { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; background: var(--panel2); font-size: 13px; }
.srow.picked { border: 1px solid var(--accent); color: var(--accent2); }
.srow.over { opacity: .4; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #111; font-weight: 700; padding: 8px 16px; border-radius: 999px; z-index: 10; }

/* ---------------- mobile / narrow (2026-09-03 pass) ---------------- */
html, body { overflow-x: hidden; }
@media (max-width: 700px) {
  header { flex-wrap: wrap; gap: 8px 12px; }
  .brand h1 { font-size: 16px; letter-spacing: .1em; }
  nav { margin-left: 0; width: 100%; gap: 6px; }
  nav .tab { flex: 1; text-align: center; padding: 8px 6px; font-size: 11px; letter-spacing: .06em; }
  #view { padding: 12px; gap: 12px; }
  .top3 { grid-template-columns: 1fr; }
  .stage { padding: 12px; }
  .stage-head { flex-wrap: wrap; }
  .stage-head h2 { font-size: 19px; }
  .stage-actions { width: 100%; flex-wrap: wrap; }
  .stage-actions .btn { flex: 1 1 auto; }
  .preset-grid { grid-template-columns: 1fr 1fr; }
  .stat-groups { grid-template-columns: 1fr; }
  .att-main { grid-template-columns: 1fr; }
  .ttk { display: block; overflow-x: auto; white-space: nowrap; }
  .ttk-chart { max-width: 100%; }
  .radar-svg { max-width: 260px; }
  .wild, .streak-table { grid-template-columns: 1fr; }
  input[type=range] { width: 100%; }
}
@media (max-width: 420px) {
  .preset-grid { grid-template-columns: 1fr; }
  .brand small { display: none; }
}

/* counter presets */
.preset.counter { border-left: 3px solid #4a3417; }
.preset.counter.active { border-color: var(--accent); border-left-color: var(--accent); }
.callout.counter { color: var(--text); font-size: 13px; line-height: 1.45; }
.callout.counter b { color: var(--accent2); }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }
.linkbtn:hover { color: var(--accent2); }
section.panel p.hint { color: var(--muted); font-size: 12px; margin: -4px 0 8px; }

/* equipment tab */
.perk-card.equip { border-top-color: var(--accent); }
.perk-card.equip .why { color: var(--muted); font-size: 13px; }
.callout.note { background: #151a22; border-color: var(--border); color: var(--muted); font-size: 12px; }
.equip-list h4 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 10px 0 4px; }
.tag.loud { color: var(--neg); border-color: var(--neg); }
.srow[title] { cursor: help; }

/* real weapon art + anchor editor */
.weapon-img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.anchor-dot { fill: rgba(255,122,26,.35); stroke: var(--accent); stroke-width: 1.5; }
.anchor-dot.sel { fill: var(--accent); }
.anchor-lbl { fill: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.anchor-editor { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.anchor-json { width: 100%; min-height: 64px; font: 11px/1.4 ui-monospace, Consolas, monospace; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.gchip.set { border-color: var(--pos); }
.btn.ghost { opacity: .7; }

/* icons from user screenshots */
.perk-card { position: relative; }
.perk-card .perk-icon { position: absolute; top: 10px; right: 10px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.perk-card.has-icon h3, .perk-card.has-icon .perk-slot { padding-right: 76px; }
.alt-pill .pill-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 5px; }
.perk-card .why { color: var(--muted); font-size: 12px; }

/* wildcard icons */
.wc { position: relative; }
.wc .wc-icon { position: absolute; top: 8px; right: 8px; width: 34px; height: 60px; object-fit: contain; }
.wc.has-icon { padding-right: 50px; }
.wc-spec { position: relative; }
.wc-spec .wc-big { position: absolute; top: 12px; right: 16px; width: 70px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.wc-spec h2, .wc-spec p { padding-right: 96px; }
.perk-card .equip-icon { width: 84px; height: 84px; }
.perk-card.equip.has-icon h3, .perk-card.equip.has-icon .perk-slot { padding-right: 96px; }

/* card icon layout fix (2026-09-04): icons float so text wraps around them instead of running underneath */
.perk-card .perk-icon, .perk-card .equip-icon { position: static; float: right; margin: 0 0 10px 14px; }
.perk-card.has-icon h3, .perk-card.has-icon .perk-slot, .perk-card.equip.has-icon h3, .perk-card.equip.has-icon .perk-slot { padding-right: 0; }
.perk-card .tags { margin: 6px 0 0; clear: both; }
.perk-card .perk-alts { margin-top: 10px; row-gap: 6px; clear: both; }
.alt-pill { display: inline-flex; align-items: center; line-height: 1.2; }
.wc.launcher .launcher-img { width: 100%; max-height: 70px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.wc.launcher .why { color: var(--muted); font-size: 12px; }
.wc.special .tags { margin-top: 4px; }
.sp-att { border-top: 1px dotted var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sp-att .att-deltas { gap: 3px; }
.sp-att .why { color: var(--muted); }

/* accounts (Next shell) */
.account { display: flex; gap: 8px; align-items: center; }
.account .btn { padding: 6px 12px; font-size: 12px; }
.auth-wrap { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.auth-wrap.wide { max-width: 720px; }
.auth { display: flex; flex-direction: column; gap: 12px; }
.auth label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.auth input { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; color: var(--text); }
.auth input:focus { outline: none; border-color: var(--accent); }
.auth-err { color: var(--neg); margin: 0; font-size: 13px; }
.auth-wrap a { color: var(--accent2); }
.loadout-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.loadout-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; }
.loadout-list li a { flex: 1; color: var(--text); text-decoration: none; }
@media (max-width: 700px) { .account .btn.ghost { display: none; } }