/* Painéis GPF: mesmos tokens do painel MOC. O tema segue o do aparelho. */
:root{
  color-scheme:dark;
  --bg:#0a1620;
  --surface:#101f2c;
  --surface-2:#0c1a25;
  --surface-3:#15293a;
  --border:#1f3a4e;
  --border-strong:#2e4c63;
  --text:#eaf3fa;
  --text-dim:#a9bfd0;
  --text-faint:#86a0b4;
  --blue:#2272c3;
  --blue-hover:#1c62a8;
  --on-blue:#ffffff;
  --sky:#4fc3e8;
  --sky-soft:#12313c;
  --red:#f0585c;
  --red-soft:#3a1a1e;
  --logo-filter:invert(1);

  --radius:8px;
  --radius-sm:6px;
  --mono:'SF Mono', 'IBM Plex Mono', Menlo, ui-monospace, monospace;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --bg:#eef2f7;
    --surface:#ffffff;
    --surface-2:#f4f6fa;
    --surface-3:#e8edf4;
    --border:#d3dbe6;
    --border-strong:#b3c0d0;
    --text:#0f1b2d;
    --text-dim:#3b4659;
    --text-faint:#556074;
    --blue:#1f6fb8;
    --blue-hover:#195d9b;
    --sky:#0a6a8f;
    --sky-soft:#e0f0f6;
    --red:#b8322a;
    --red-soft:#fbe9e7;
    --logo-filter:none;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.45;
  padding:calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
main, .topo{ width:100%; max-width:560px; margin:0 auto; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
/* Toque de app: sem marca azul ao tocar nem seleção de texto nos cabeçalhos e cartões. */
a, button, label{ -webkit-tap-highlight-color:transparent; }
.topo, .titulo-secao, .painel, .opcao{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

.pular{ position:absolute; left:12px; top:-60px; z-index:10; min-height:44px; display:inline-flex; align-items:center; padding:10px 16px; border-radius:var(--radius-sm); background:var(--blue); color:var(--on-blue); font-weight:600; text-decoration:none; }
.pular:focus{ top:12px; }

.topo{ display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.marca{ width:72px; height:auto; filter:var(--logo-filter); }
.topo h1{ font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.2; padding-left:14px; border-left:1px solid var(--border-strong); }
.btn-icone{
  margin-left:auto; flex-shrink:0; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--radius-sm); color:var(--text-dim); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.btn-icone:hover{ background:var(--surface-3); color:var(--text); }
.btn-icone:active{ background:var(--surface-3); }

.instalar{ padding:12px 16px 14px; margin-bottom:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.instalar-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.instalar-botoes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.btn-app{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.logo-android{ color:#3ddc84; }
.instalar .apoio{ margin:10px 0 0; }
.passos{ margin:8px 0 6px; padding-left:20px; font-size:14px; color:var(--text-dim); display:flex; flex-direction:column; gap:4px; }
.passos b{ color:var(--text); font-weight:600; }
.ico-compartilhar{ vertical-align:-3px; color:var(--sky); }
.baixar-titulo{ font-size:15px; font-weight:600; line-height:1.4; letter-spacing:0; }

.titulo-secao{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
h2{ font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
#tela-escolha h2{ margin-bottom:6px; }
.apoio{ font-size:13px; color:var(--text-dim); margin-bottom:18px; }

.lista-paineis{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.painel{
  display:flex; align-items:center; gap:14px; min-height:72px; padding:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); text-decoration:none; -webkit-user-drag:none;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.painel:hover{ background:var(--sky-soft); border-color:var(--sky); }
.painel:active{ background:var(--surface-3); transform:scale(.98); }
.painel-icone{
  flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--sky-soft); color:var(--sky);
}
.painel:hover .painel-icone{ background:var(--surface); }
.painel-texto, .opcao-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.painel-nome{ font-size:15px; font-weight:600; line-height:1.4; }
.painel-resumo{ font-size:13px; color:var(--text-dim); }
.seta{ flex-shrink:0; color:var(--sky); }

fieldset{ border:0; display:flex; flex-direction:column; gap:10px; }
.opcao{
  display:flex; align-items:flex-start; gap:12px; min-height:56px; padding:14px 16px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:background .15s ease, border-color .15s ease;
}
.opcao:hover{ border-color:var(--border-strong); }
.opcao:has(input:checked){ background:var(--sky-soft); border-color:var(--sky); }
.opcao input{ width:22px; height:22px; margin-top:1px; flex-shrink:0; accent-color:var(--blue); cursor:pointer; }

.erro{ margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--red-soft); color:var(--red); font-size:13px; font-weight:600; }
.acoes{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

.btn, .btn-ghost{
  min-height:44px; padding:8px 18px; border-radius:var(--radius-sm); font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.btn{ background:var(--blue); color:var(--on-blue); border:1px solid var(--blue); }
.btn:hover{ background:var(--blue-hover); border-color:var(--blue-hover); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--surface-3); border-color:var(--border-strong); }
.link{
  min-height:44px; padding:0 2px; background:none; border:0; font:inherit; font-size:14px; font-weight:600;
  color:var(--sky); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

@media (max-width: 420px){
  .acoes .btn, .acoes .btn-ghost{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}