/* Você no Comando · base visual compartilhada (fontes locais, cores da escola) */
@font-face{ font-family:'Big Shoulders'; font-weight:700; font-display:swap; src:url(fontes/big-shoulders-latin-700-normal.woff2) format('woff2'); }
@font-face{ font-family:'Big Shoulders'; font-weight:800; font-display:swap; src:url(fontes/big-shoulders-latin-800-normal.woff2) format('woff2'); }
@font-face{ font-family:'Big Shoulders'; font-weight:900; font-display:swap; src:url(fontes/big-shoulders-latin-900-normal.woff2) format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-weight:400; font-display:swap; src:url(fontes/atkinson-hyperlegible-next-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-weight:700; font-display:swap; src:url(fontes/atkinson-hyperlegible-next-latin-700-normal.woff2) format('woff2'); }

:root{
  /* Layout: centro de comando noturno. Fundo índigo da logo, ouro para progresso, ciano e coral da escola para ação. */
  --bg:#12163A;
  --panel:#1C2252;
  --panel-2:#252C66;
  --line:#343D7C;
  --ink:#F4F6FF;
  --muted:#B4BADF;
  --gold:#FBC54E;
  --gold-ink:#2A2208;
  --cyan:#2AB8C9;
  --coral:#EB5E5E;
  --green:#85BF4E;
  --indigo:#434B9A;
  --good-bg:#1D3A2A;
  --bad-bg:#46202A;
  --hold-bg:#433716;
  --f-display:'Big Shoulders','Arial Narrow',Impact,sans-serif;
  --f-body:'Atkinson Hyperlegible Next','Segoe UI',Roboto,Arial,sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.5 var(--f-body); }
button{ font-family:inherit; }
[hidden]{ display:none !important; }
.ic{ width:1.2em; height:1.2em; flex:none; vertical-align:-.2em; }
.wrap{ width:100%; max-width:600px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3{ font-family:var(--f-display); letter-spacing:.02em; margin:0; text-wrap:balance; }
h2{ font-size:26px; line-height:1.05; text-transform:uppercase; letter-spacing:.04em; }
.label{ display:block; font:700 11px/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.muted{ color:var(--muted); }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.panel p{ margin:0; }
.btn{ appearance:none; border:0; border-radius:14px; min-height:50px; padding:0 20px; font:800 18px/1 var(--f-display); letter-spacing:.06em; text-transform:uppercase; background:var(--gold); color:var(--gold-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; }
.btn svg{ width:22px; height:22px; flex:none; }
.btn.cyan{ background:var(--cyan); color:#06272B; }
.btn.ghost{ background:transparent; color:var(--ink); border:2px solid var(--line); }
.btn.danger{ background:var(--coral); color:#2B0B0B; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:default; }
.link{ appearance:none; background:none; border:0; padding:0; min-height:44px; color:var(--cyan); font:700 15px/1 var(--f-body); text-decoration:underline; cursor:pointer; }
.btn:focus-visible, .link:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font:700 14px/1.3 var(--f-body); }
.field input{ width:100%; min-height:50px; padding:12px 14px; border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); font:400 18px/1.2 var(--f-body); }
.field input:focus{ outline:none; border-color:var(--gold); }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); font:700 12px/1.5 var(--f-body); color:var(--ink); font-variant-numeric:tabular-nums; }
.tag.gold{ background:var(--gold); color:var(--gold-ink); border-color:var(--gold); }
.aviso{ border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; border:2px solid var(--line); background:var(--panel); }
.aviso.ok{ background:var(--good-bg); border-color:var(--green); }
.aviso.erro{ background:var(--bad-bg); border-color:var(--coral); }
.aviso.bloq{ background:var(--hold-bg); border-color:var(--gold); }
.aviso b{ font:900 24px/1.05 var(--f-display); letter-spacing:.03em; }
.aviso p{ margin:0; font-size:15px; line-height:1.4; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }