:root{
  --ground:#EEF0F2;
  --surface:#FFFFFF;
  --surface-2:#E4E8EB;
  --ink:#14181D;
  --ink-2:#55606C;
  --ink-3:#7C8792;
  --line:#D2D8DE;
  --line-2:#BFC7CF;
  --accent:#0F4C5C;
  --accent-2:#14657A;
  --accent-soft:#DCE9ED;
  --ok:#136B4A;
  --ok-soft:#DCEDE5;
  --warn:#8F5B00;
  --warn-soft:#F6E9D2;
  --stop:#9C2F2E;
  --stop-soft:#F5DEDD;

  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14171A;
    --surface:#1B1F24;
    --surface-2:#242A30;
    --ink:#E4E8EC;
    --ink-2:#A0AAB4;
    --ink-3:#7D8791;
    --line:#2C333A;
    --line-2:#3A424A;
    --accent:#6FB3C4;
    --accent-2:#8CC6D5;
    --accent-soft:#1B2E35;
    --ok:#5FBF97;
    --ok-soft:#162A22;
    --warn:#D9A24A;
    --warn-soft:#2E2415;
    --stop:#E0827F;
    --stop-soft:#2E1B1B;
  }
}
:root[data-theme="dark"]{
  --ground:#14171A; --surface:#1B1F24; --surface-2:#242A30;
  --ink:#E4E8EC; --ink-2:#A0AAB4; --ink-3:#7D8791;
  --line:#2C333A; --line-2:#3A424A;
  --accent:#6FB3C4; --accent-2:#8CC6D5; --accent-soft:#1B2E35;
  --ok:#5FBF97; --ok-soft:#162A22;
  --warn:#D9A24A; --warn-soft:#2E2415;
  --stop:#E0827F; --stop-soft:#2E1B1B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-ui);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.hidden{display:none !important}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:0 20px;height:52px;
  background:var(--surface);border-bottom:1px solid var(--line-2);
  position:sticky;top:0;z-index:10
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;font-size:.95rem}
.mark{
  width:13px;height:13px;border:2px solid var(--accent);border-radius:2px;
  background:linear-gradient(135deg,var(--accent) 50%,transparent 50%)
}
.topbar-state{display:flex;gap:7px;flex:1;flex-wrap:wrap}
.chip{
  font-size:.72rem;font-weight:500;letter-spacing:.02em;
  padding:3px 9px;border-radius:11px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface-2)
}
.chip-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.chip-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.chip-stop{background:var(--stop-soft);border-color:var(--stop);color:var(--stop)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:calc(100vh - 52px)}
@media(max-width:820px){.shell{grid-template-columns:1fr}}

/* ---------- steps nav ---------- */
.steps{
  border-right:1px solid var(--line-2);padding:16px 0;
  display:flex;flex-direction:column;gap:1px;background:var(--surface)
}
@media(max-width:820px){
  .steps{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-2);padding:8px}
  .steps-foot{display:none}
}
.step-btn{
  display:grid;grid-template-columns:26px 1fr 10px;align-items:center;gap:8px;
  background:none;border:none;border-left:2px solid transparent;
  padding:9px 14px;text-align:left;cursor:pointer;color:var(--ink-2);
  font-size:.86rem;font-weight:500;white-space:nowrap
}
.step-btn em{font-family:var(--f-mono);font-style:normal;font-size:.72rem;color:var(--ink-3)}
.step-btn:hover{color:var(--ink);background:var(--surface-2)}
.step-btn.is-active{color:var(--ink);font-weight:600;border-left-color:var(--accent);background:var(--accent-soft)}
.step-btn.is-active em{color:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block}
.dot.on{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.stop{background:var(--stop)}
.steps-foot{margin-top:auto;padding:14px}
.privacy{font-size:.7rem;color:var(--ink-3);margin:10px 0 0;line-height:1.4}

/* ---------- main ---------- */
.main{padding:26px 30px 64px;max-width:900px}
@media(max-width:820px){.main{padding:20px 16px 48px}}
.panel{display:none}
.panel.is-active{display:block}
h1{font-size:1.55rem;font-weight:700;letter-spacing:-.018em;margin:0 0 8px}
h2{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:32px 0 10px}
.lede{color:var(--ink-2);margin:0 0 22px;max-width:62ch}
.lede-sm{color:var(--ink-2);margin:0 0 10px;font-size:.86rem;max-width:62ch}

/* ---------- fields ---------- */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input[type=number],input[type=date],select,textarea{
  background:var(--surface);border:1px solid var(--line-2);border-radius:3px;
  padding:8px 10px;width:100%;font-size:.9rem
}
textarea{font-family:var(--f-mono);font-size:.8rem;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}

.derived{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding:12px 14px;background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:3px
}
.derived-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.derived code{font-family:var(--f-mono);font-size:.9rem;font-weight:500;flex:1;min-width:150px;word-break:break-all}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line-2);background:var(--surface);border-radius:3px;
  padding:8px 15px;font-size:.85rem;font-weight:600;cursor:pointer
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#0F1417}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
:root[data-theme="dark"] .btn-primary:hover{color:#0F1417}
.btn-sm{padding:5px 10px;font-size:.78rem}
.btn-ghost{background:none}
.link-btn{
  background:none;border:none;padding:0;color:var(--accent);
  font-size:inherit;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px
}
.panel-foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.save-state{font-size:.8rem;color:var(--ok);font-weight:600}

/* ---------- drop zone ---------- */
.drop{
  border:1.5px dashed var(--line-2);border-radius:4px;background:var(--surface);
  padding:30px 20px;text-align:center;transition:border-color .15s,background .15s
}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop p{margin:0}
.drop-sub{margin-top:7px !important;font-size:.85rem;color:var(--ink-2)}

/* ---------- notes ---------- */
.note{
  margin:14px 0 0;padding:11px 14px;border-left:3px solid var(--accent);
  background:var(--accent-soft);font-size:.85rem;color:var(--ink);border-radius:0 3px 3px 0
}
.note:empty{display:none}
.note-plain{border-left-color:var(--line-2);background:var(--surface);color:var(--ink-2)}
.note-warn{border-left-color:var(--warn);background:var(--warn-soft);color:var(--ink)}
.note-stop{border-left-color:var(--stop);background:var(--stop-soft);color:var(--ink)}

/* ---------- stats ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.stat{background:var(--surface);padding:11px 16px;flex:1 1 120px;min-width:110px}
.stat b{
  display:block;font-family:var(--f-mono);font-size:1.15rem;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.2
}
.stat span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.stat.ok b{color:var(--ok)}
.stat.warn b{color:var(--warn)}
.stat.stop b{color:var(--stop)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.82rem}
th{
  text-align:left;padding:8px 12px;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);white-space:nowrap
}
td{padding:7px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
tr:last-child td{border-bottom:none}
td.mono,th.mono{font-family:var(--f-mono);font-size:.76rem;color:var(--ink);word-break:break-all}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tag{
  display:inline-block;font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:9px;
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap
}
.tag-stop{background:var(--stop-soft);color:var(--stop)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.table-cap{padding:7px 12px;font-size:.75rem;color:var(--ink-3);border-top:1px solid var(--line)}

/* ---------- reach ---------- */
.reach-verdict{
  border:1px solid var(--line-2);border-left-width:4px;border-radius:3px;
  background:var(--surface);padding:16px 18px;margin-bottom:16px
}
.reach-verdict .empty{margin:0;color:var(--ink-3);font-size:.88rem}
.reach-verdict.good{border-left-color:var(--ok);background:var(--ok-soft)}
.reach-verdict.low,.reach-verdict.high{border-left-color:var(--warn);background:var(--warn-soft)}
.reach-verdict.critical{border-left-color:var(--stop);background:var(--stop-soft)}
.reach-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.reach-figure{font-family:var(--f-mono);font-size:1.7rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.reach-label{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.reach-verdict p{margin:0;font-size:.88rem;color:var(--ink)}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.calc:empty{display:none}

/* ---------- sizes ---------- */
.sizes{display:flex;flex-wrap:wrap;gap:9px}
.size-btn{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  border:1px solid var(--line-2);background:var(--surface);border-radius:3px;
  padding:8px 12px;cursor:pointer;text-align:left;min-width:112px
}
.size-btn:hover{border-color:var(--accent)}
.size-btn.on{border-color:var(--accent);background:var(--accent-soft)}
.size-btn b{font-family:var(--f-mono);font-size:.82rem;font-weight:500}
.size-btn span{font-size:.68rem;color:var(--ink-3)}
.size-btn .core{color:var(--accent);font-weight:600}

/* ---------- exports ---------- */
.exports{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.export-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);padding:13px 16px
}
.export-row .meta{flex:1;min-width:190px}
.export-row .fname{font-family:var(--f-mono);font-size:.8rem;color:var(--ink);word-break:break-all}
.export-row .desc{font-size:.78rem;color:var(--ink-3);margin-top:2px}
.export-row.off{opacity:.55}

/* ---------- profile editor ---------- */
.prof{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:14px 16px;margin-bottom:12px}
.prof-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.prof-head b{font-size:.95rem}
.prof .field-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.prof input{font-family:var(--f-mono);font-size:.8rem}
.prof-note{font-size:.78rem;color:var(--ink-3);margin:10px 0 0}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}