/* Reset, tipografía base, cabecera de escenario, barra de pestañas y contenedor. */
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:14px;
  line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.015em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent-line); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.wrap{max-width:1440px; margin:0 auto; padding:0 20px 72px}

.stage{background:linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color:var(--on-brand); border-bottom:2px solid var(--accent-line)}
.stage-in{max-width:1440px; margin:0 auto; padding:20px 20px 16px; display:flex; gap:24px;
  align-items:flex-start; flex-wrap:wrap; justify-content:space-between}
.mark{display:flex; gap:13px; align-items:center; min-width:0}
.beam{height:44px; width:auto; flex:none; display:block; object-fit:contain}
.brandtxt h1{font-size:clamp(19px,2.4vw,25px); line-height:1.12; color:var(--on-brand)}
.brandtxt p{margin:3px 0 0; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-brand-2); font-weight:600}
.stage-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.gauge{display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:8px 14px 8px 10px}
.gauge .g-l{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--on-brand-2); font-weight:600}
.gauge .g-v{font-family:var(--disp); font-size:19px; font-weight:700; line-height:1.15; color:var(--on-brand);
  font-variant-numeric:tabular-nums}

.sbtn{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--on-brand);
  padding:8px 13px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; transition:background .15s, border-color .15s}
.sbtn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3)}

#saveState{font-size:11.5px; color:var(--on-brand-2); display:flex; align-items:center; gap:6px; font-weight:500}
#saveState .dot{width:7px; height:7px; border-radius:50%; background:var(--on-brand-2); flex:none}
#saveState.ok .dot{background:#6FD79B}
#saveState.dirty .dot{background:#D9B54A}
#saveState.err .dot{background:#F08078}

.tabbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.tabbar-in{max-width:1440px; margin:0 auto; padding:0 20px; display:flex; gap:2px; overflow-x:auto}
.tab{appearance:none; background:none; border:0; border-bottom:2.5px solid transparent; padding:13px 15px 11px;
  cursor:pointer; font-family:var(--disp); font-weight:600; font-size:14px; color:var(--fg-2); white-space:nowrap;
  display:flex; align-items:center; gap:8px}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--accent-line)}
.tab .cnt{font-family:var(--mono); font-size:11px; background:var(--surface-3); color:var(--fg-2);
  padding:1px 6px; border-radius:20px; font-weight:500}
.tab[aria-selected="true"] .cnt{background:var(--accent-soft); color:var(--accent-ink)}

.view{display:none; padding-top:22px}
.view.on{display:block}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }