/* Race Coach PWA - HUD de volante. Tema escuro, glanceavel, retrato/paisagem. */
:root { --bg:#0b0e14; --panel:#161a23; --muted:#8a92a6; --txt:#e8edf6;
        --green:#27c06a; --amber:#e8b300; --red:#ff4d4d;
        --brand:#292C61; --accent:#E42D2F; --gold:#D4AF37; --line:#2a3040;
        --col:760px;
        --font-title:'Montserrat',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt);
  font-family: var(--font-body), -apple-system, system-ui, Roboto, Arial, sans-serif;
  overscroll-behavior:none; user-select:none; -webkit-user-select:none; }
/* Fundo tipo "Recursos Completos" do raceadmin.com.br: XADREZ preenchido de quadrados
   grandes + um brilho radial no canto (revela o xadrez em cima e some pro preto embaixo).
   No app inteiro. As skins clara/LCD do painel tem fundo solido proprio -> cobrem (ok). */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(45deg, rgba(255,255,255,.032) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.032) 75%),
    linear-gradient(45deg, rgba(255,255,255,.032) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.032) 75%);
  background-size: 100% 100%, 46px 46px, 46px 46px;
  background-position: 0 0, 0 0, 23px 23px;
  background-repeat: no-repeat, repeat, repeat;
}
.view { position:fixed; inset:0; display:flex; flex-direction:column; }
.hidden { display:none !important; }

/* ===== App shell (header + footer/abas + menu) ===== */
.apphdr { position:fixed; top:0; left:0; right:0; height:52px; z-index:50; display:flex; align-items:center;
  justify-content:center; background:#10141d; border-bottom:1px solid var(--line); border-top:3px solid var(--accent); }
.hdr-inner { width:100%; max-width:var(--col); display:flex; align-items:center; justify-content:space-between; padding:0 6px; }
.apphdr .hdr-title { font-family:var(--font-title); font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:.5px; }
.hdr-btn { background:none; border:0; color:var(--txt); font-size:26px; line-height:1; width:44px; height:44px; cursor:pointer; }
.hdr-btn:disabled { opacity:0; pointer-events:none; }
.appftr { position:fixed; left:0; right:0; bottom:0; min-height:60px; z-index:50; display:flex; justify-content:center;
  background:#10141d; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.ftr-inner { width:100%; max-width:var(--col); display:flex; }
.appftr .tab { flex:1; background:none; border:0; color:var(--muted); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:11px; font-weight:600; cursor:pointer; font-family:var(--font-body); }
.appftr .tab .tab-ic { font-size:20px; line-height:1; }
.appftr .tab.on { color:var(--accent); }
/* botao de sair do HUD imersivo de volta pro menu */
.hudhome { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#cfd6e4; font-size:2.6vmin;
  font-weight:700; padding:0.5vmin 1.6vmin; border-radius:6px; line-height:1; white-space:nowrap; margin-right:1.4vmin; cursor:pointer; }
.hudhome:active { background:rgba(255,255,255,.16); }
/* entry/pick*: continuam fixed (telas curtas) com scroll interno */
body.chrome #entry, body.chrome #pickSession, body.chrome #pickDriver { padding-top:52px; padding-bottom:60px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* home/perfil/historico/settings: SAEM do position:fixed -> fluxo normal, a PAGINA rola
   (scroll nativo na borda) e o conteudo centraliza sem o shrink do flex. */
body.chrome #home, body.chrome #perfil, body.chrome #historico, body.chrome #settings {
  position:static; display:block; min-height:100vh; padding:52px 0 72px; }
.appbody { padding:16px; display:flex; flex-direction:column; gap:12px; width:100%; max-width:var(--col); margin:0 auto; }
/* ===== Config (cards) ===== */
.cfg { gap:14px; }
.cfg-cards { display:flex; flex-direction:column; gap:14px; }
.cfgsec { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.cfgsec.actions { gap:8px; background:none; border:0; padding:8px 0 0; }
.cfg-h { font-family:var(--font-title); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.6px;
  color:#cfd6e4; padding-left:9px; border-left:3px solid var(--accent); }
.cfg-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cfg-lbl { color:var(--muted); font-size:13px; } .cfg-val { font-weight:700; font-size:14px; word-break:break-all; text-align:right; }
.cfg-field { display:flex; flex-direction:column; gap:6px; }
.cfg-field label { color:var(--muted); font-size:13px; font-weight:600; }
.cfg-field select, .addrow input { width:100%; background:#0e131c; color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:11px 12px; font-size:15px; font-family:var(--font-body); -webkit-appearance:none; appearance:none; }
.cfg-field select { background-image:linear-gradient(45deg,transparent 50%,#8a92a6 50%),linear-gradient(135deg,#8a92a6 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
.cfg-check { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; cursor:pointer; }
.cfg-check input { width:20px; height:20px; }
.cfg-btn { background:#1d2433; color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:13px; font-size:15px; font-weight:700; cursor:pointer; }
.cfg-btn.danger { color:var(--red); border-color:#ff4d4d55; background:#221518; }
.cfg-link { background:none; border:0; color:#7cc0ff; font-size:14px; font-weight:600; text-align:left; padding:8px 2px; cursor:pointer; }
.cfg-link.danger { color:var(--red); }
.cfg-save { width:100%; padding:15px; font-size:16px; font-weight:800; border-radius:12px; }
.home-hi { color:var(--muted); font-size:15px; margin:4px 0 0; }
.home-h1 { font-family:var(--font-title); font-weight:900; font-size:24px; margin:0 0 6px; }
.menu { display:flex; flex-direction:column; gap:10px; }
.mcard { display:flex; align-items:center; gap:14px; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:16px; color:var(--txt); cursor:pointer; }
.mcard.primary { background:#0f2e1c; border-color:#27c06a55; color:var(--txt); }
.mcard .mc-ic { font-size:26px; width:30px; text-align:center; }
.mcard.primary .mc-ic { color:var(--green); }
.mcard .mc-tx { display:flex; flex-direction:column; gap:2px; }
.mcard .mc-t { font-family:var(--font-title); font-weight:800; font-size:16px; }
.mcard .mc-s { color:var(--muted); font-size:12.5px; }
.profcard { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0 4px; }
.prof-avatar { width:96px; height:96px; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-title);
  font-weight:900; font-size:38px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid var(--line); }
.prof-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.prof-avatar.hasimg { background:none; border-color:var(--accent); }
.prof-nome { font-family:var(--font-title); font-weight:800; font-size:20px; text-align:center; }
.prof-sub { color:var(--muted); font-size:13px; }
.panel2 { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.p2-lbl { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.p2-rows { display:flex; flex-direction:column; gap:5px; font-size:14px; }
.p2-rows .r { display:flex; justify-content:space-between; gap:10px; } .p2-rows .r .k { color:var(--muted); }
.p2-rows a { color:#7cc0ff; text-decoration:none; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip2 { background:#1d2433; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-weight:700; font-size:13px; }
.chips .empty { color:var(--muted); font-size:13px; }
.linkbtn { display:block; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:13px; color:#7cc0ff; font-weight:700; text-decoration:none; cursor:pointer; font-size:15px; }
.linkbtn.danger { color:var(--red); }
.scr-h2 { font-family:var(--font-title); font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:.5px; margin:4px 0 2px; }
.tip2 { color:var(--muted); font-size:13px; margin:0 0 4px; }
.list2 { display:flex; flex-direction:column; gap:8px; }
.racecard { display:flex; justify-content:space-between; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px; color:var(--txt); cursor:pointer; text-align:left; width:100%; }
.racecard .rc-main { font-family:var(--font-title); font-weight:700; font-size:15px; }
.racecard .rc-sub { color:var(--muted); font-size:12px; margin-top:3px; }
.racecard .rc-go { color:var(--accent); font-size:22px; padding-left:8px; }
.racerow { display:flex; align-items:stretch; gap:8px; }
.racerow .racecard { flex:1; }
.racedel { flex:0 0 auto; width:54px; background:#221518; border:1px solid #ff4d4d55; color:var(--red);
  border-radius:14px; font-size:18px; cursor:pointer; }
.histclear { width:100%; margin-top:16px; }

/* Login / Cadastro (Settings agora e tela de app - governada pelas regras .appbody/chrome) */
#login, #register { padding:24px 24px 40px; gap:14px; justify-content:safe center;
  overflow-y:auto; -webkit-overflow-scrolling:touch; max-width:520px; margin:0 auto; }
#login h1 { font-size:34px; font-weight:900; letter-spacing:1px; text-align:center; }
#login h1 .tele { color:#f26a21; font-weight:700; }
#settings h2 { font-size:24px; font-weight:800; }
label { color:var(--muted); font-size:14px; font-weight:600; margin-top:8px; }
input[type=email], input[type=password], input[type=text], textarea, select { width:100%;
  background:var(--panel); color:var(--txt); border:1px solid #2a3040; border-radius:10px;
  padding:14px; font-size:17px; }
button { background:#222838; color:var(--txt); border:0; border-radius:12px;
  padding:14px; font-size:16px; font-weight:700; }
button.primary { background:var(--green); color:#06210f; }
button.link { background:transparent; color:var(--muted); }
.hint { color:var(--muted); font-size:13px; }
#curEmail { color:var(--txt); font-size:17px; }

/* Escolha de sessao / piloto / debrief */
#pickSession, #pickDriver { padding:20px; gap:10px; max-width:980px; margin:0 auto; overflow-y:auto; } /* largura cheia: grid usa a paisagem */
#debrief { padding:20px; gap:10px; max-width:560px; margin:0 auto; overflow-y:auto; }
.dbsummary { background:var(--panel); border:1px solid #2a3040; border-radius:12px; padding:14px 16px;
  font-size:16px; line-height:1.5; color:var(--txt); white-space:pre-wrap; }
.dbchartwrap { background:var(--panel); border:1px solid #2a3040; border-radius:12px; padding:8px; }
#dbchart { width:100%; height:150px; display:block; }
.dbsec-best { color:var(--txt); font-size:14px; margin:6px 2px; }
.dbsec-tab { width:100%; border-collapse:collapse; font-size:14px; color:#cfd6e4; }
.dbsec-tab th { color:var(--muted); font-weight:600; text-align:right; padding:4px 6px; }
.dbsec-tab td { text-align:right; padding:4px 6px; border-top:1px solid #222838; }
.dbsec-tab td:first-child, .dbsec-tab th:first-child { text-align:left; color:var(--muted); }
.pickhead { display:flex; align-items:center; justify-content:space-between; }
.list { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin:6px 0; } /* automatico: 1 coluna no retrato, varias na paisagem */
.item { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid #2a3040; border-radius:12px; padding:14px 16px; cursor:pointer; }
.item:active { transform:scale(.99); }
.item.match { border-color:var(--green); background:#10241a; }
.item .it-main { font-size:18px; font-weight:700; }
.item .it-sub { color:var(--muted); font-size:13px; margin-top:2px; }
.item .it-pos { color:var(--muted); font-size:14px; font-weight:700; min-width:38px; text-align:center; }
.badge { font-size:11px; font-weight:800; letter-spacing:1px; padding:4px 9px; border-radius:8px; }
.badge.live { background:var(--green); color:#06210f; }
.badge.old { background:#2a3040; color:#aeb6c6; }
.empty { color:var(--muted); text-align:center; padding:18px; }

/* Chips de apelidos */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:8px; background:#222838; color:var(--txt);
  border-radius:999px; padding:8px 6px 8px 14px; font-size:15px; font-weight:600; }
.chip button { background:#3a3f4b; color:#fff; border:0; border-radius:999px; width:24px; height:24px;
  padding:0; font-size:16px; line-height:1; font-weight:800; }
.addrow { display:flex; gap:8px; align-items:stretch; }
.addrow input { flex:1; }
.addbtn { width:54px; font-size:24px; padding:0; }

/* Marca Race Admin (discreta) */
.loginlogo { height:84px; width:84px; border-radius:16px; align-self:center; margin-bottom:2px; }
.brand { position:absolute; left:50%; top:9px; transform:translateX(-50%);
  height:18px; opacity:.5; pointer-events:none; }

/* HUD */
.topbar { position:relative; display:flex; justify-content:space-between; align-items:center; padding:4px 12px; }
.topleft { display:flex; align-items:center; gap:2.4vmin; }
.clk { color:#e8edf6; font-size:4.6vmin; font-weight:800; letter-spacing:1px; font-variant-numeric:tabular-nums; }
/* hora do dia: ancorada na esquerda, largura fixa (nao dança) */
.wallclk { color:#e8edf6; font-size:4.4vmin; font-weight:900; letter-spacing:.5px; font-variant-numeric:tabular-nums; }
/* relogio da CORRIDA (TEMPO/FALTA): secundario, largura fixa pra nao empurrar */
.clk.race { color:#9aa3b3; font-size:3.4vmin; font-weight:700; letter-spacing:.5px; min-width:10ch; }
.clk.lapt { color:var(--amber); font-size:5.6vmin; min-width:6.5ch; }
.clk.pd { font-size:5.6vmin; font-weight:900; min-width:4.5ch; text-align:center; }
.flagpill { border-radius:10px; padding:6px 14px; font-weight:800; letter-spacing:1px; background:#3a3f4b; min-width:8.5ch; text-align:center; }
#hud[data-skin="light"] .wallclk { color:#1a2030; }
.topright { display:flex; align-items:center; gap:10px; }
.dot { width:12px; height:12px; border-radius:6px; background:var(--amber); }
.ic { background:#1b2130; color:#aeb6c6; font-size:13px; padding:6px 10px; }
.ic.act { font-size:2.6vmin; font-weight:700; padding:1.4vmin 2.4vmin; color:#e8edf6; border-radius:10px; }
.ic.radio { background:#3a2030; color:#ff9aa6; }
.ic.radio.recording { background:var(--red); color:#fff; }

/* Botoes REDONDOS estilo volante de F1 (barra abaixo do topo) */
.bigbtns { display:flex; justify-content:space-between; align-items:center; gap:2vmin; padding:0.4vmin 8vmin 0; } /* 8vmin lateral (dobro): tira os botoes extremos de baixo da borda do case do suporte */
.bigbtn { flex:1 1 0; min-width:0; height:13vmin; border:2px solid rgba(255,255,255,.12);
  border-radius:6.5vmin; font-size:3.2vmin; font-weight:800; letter-spacing:.5px; color:#e8edf6; background:#2a313f;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 1vmin; line-height:1.05;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.4); -webkit-tap-highlight-color:transparent; }
.bigbtn:active { transform:translateY(2px); box-shadow:inset 0 -2px 0 rgba(0,0,0,.4); }
.bigbtn.radio { background:#6a2030; color:#ffd2d8; border-color:#ff4d4d55; }
.bigbtn.radio.recording { background:var(--red); color:#fff; box-shadow:inset 0 -5px 0 rgba(0,0,0,.3), 0 0 14px #ff4d4daa; }
.bigbtn.map { background:#173a57; color:#bfe0ff; border-color:#378add55; }

/* tela de entrada: botoes gigantes Piloto / Espectador */
.bigmode { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; text-align:left;
  border:2px solid rgba(255,255,255,.14); border-radius:16px; padding:22px 20px; margin:8px 0; background:#141a24; color:#e8edf6; }
.bigmode:active { transform:translateY(2px); }
.bigmode .bm-title { font-size:8vmin; font-weight:900; letter-spacing:1px; line-height:1; }
.bigmode .bm-sub { font-size:3.2vmin; opacity:.82; font-weight:500; }
.bigmode.piloto { background:#0f2e1c; border-color:#27c06a66; }
.bigmode.piloto .bm-title { color:#27c06a; }
.bigmode.esp { background:#142436; border-color:#378add66; }
.bigmode.esp .bm-title { color:#7cc0ff; }
.bigmode.gps { background:#2a2410; border-color:#d4af3766; }
.bigmode.gps .bm-title { color:var(--gold); }
/* ===== HUD do Modo GPS (so-GPS, paisagem) ===== */
#gpshud { color:var(--txt); padding:2vmin 3vmin; }
.gtop { display:flex; align-items:center; justify-content:space-between; gap:2vmin; }
.gtop .hudhome { position:static; }
.gtitle { font-family:var(--font-title); font-weight:800; font-size:3vmin; letter-spacing:1px; color:var(--gold); }
/* Botoes GRANDES do Modo GPS (padrao volante, como a tela de corrida): fileira
   cheia, dedo de luva acerta. LINHA verde, FIM vermelho, REC vira indicador. */
.gbtn { flex:1; background:#1b2331; border:1px solid #2c3648; color:#e8edf6;
  font-family:var(--font-title); font-weight:900; font-size:4vmin; letter-spacing:.5px;
  border-radius:2.6vmin; padding:2.6vmin 0; cursor:pointer; }
.gbtn.linha { background:#0f2e1c; border-color:#27c06a66; color:#8ff0b6; }
.gbtn.fim { background:#2e0f0f; border-color:#ff4d4d66; color:#ff9b9b; }
.gtop .grec { align-self:center; }
/* faixa de mensagem do coach/Claude no rodape do Modo GPS (nao tem talkbar aqui) */
.claudemsg { position:fixed; left:0; right:0; bottom:0; z-index:9999; background:rgba(11,14,20,.92); color:#7cc0ff; font-weight:700; font-size:4.2vmin; padding:2vmin 3vmin; text-align:center; }
/* PAINEL DE CARRO (v1.21, desenhado pro celular deitado - S23 Ultra ~915x412):
   grid 3 colunas usando a tela INTEIRA - cronometro | mapa | velocimetro,
   com faixa de setores em chips na base. Fontes em vw/vh (nao vmin) pra
   crescer com a largura. */
.gmain { flex:1; min-height:0; display:grid; grid-template-columns:1fr auto 1fr;
  grid-template-rows:1fr auto auto; gap:1.5vh 2vw; align-items:center;
  justify-items:center; padding:0 1vw; }
.gcol { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6vh; min-width:0; }
.gleft { grid-column:1; grid-row:1; } .gmid { grid-column:2; grid-row:1; } .gright { grid-column:3; grid-row:1; }
.gcur { font-family:var(--font-title); font-weight:900; font-size:min(12vw,26vh); line-height:.95; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gcur.long { font-size:min(8.5vw,19vh); } /* volta acima de 1 min ("1:14.4") nao estoura a coluna */
.gcurlbl { color:var(--muted); font-size:2.6vh; font-weight:700; letter-spacing:2px; }
.gdelta { font-family:var(--font-title); font-weight:900; font-size:min(4.5vw,9vh); line-height:1; }
/* mapinha do tracado GPS na coluna do meio */
.gmapwrap { width:min(30vw,44vh); height:min(30vw,44vh); flex:0 0 auto; background:#0e1420;
  border:1px solid #232c3d; border-radius:2.5vh; padding:1.2vh; box-shadow:inset 0 0 24px #0006; }
.gmapwrap svg { width:100%; height:100%; display:block; }
.gspd { font-family:var(--font-title); font-weight:900; font-size:min(13vw,28vh); line-height:.95; color:#3a8edd; font-variant-numeric:tabular-nums; }
.gspd.long { font-size:min(9vw,20vh); }
.grow { display:flex; gap:3vw; margin-top:.5vh; }
.gcell { display:flex; flex-direction:column; align-items:center; }
.gcell .gval { font-family:var(--font-title); font-weight:900; font-size:min(4.5vw,9vh); line-height:1; font-variant-numeric:tabular-nums; }
.gval.g { color:var(--green); } .gval.b { color:#3a8edd; }
.gcell .glbl { color:var(--muted); font-size:1.9vh; font-weight:700; letter-spacing:1.5px; margin-top:.4vh; }
.gsectors { grid-column:1/4; grid-row:3; display:flex; gap:1.2vw; width:100%; color:#cfd6e4; }
.gsectors span { flex:1; text-align:center; font-family:var(--font-title); font-weight:900;
  font-size:min(3.4vw,6.5vh); padding:1.2vh 0; background:#10151f; border:1px solid #232c3d;
  border-radius:2vh; font-variant-numeric:tabular-nums; }
/* celular em pe (fora do fullscreen travado): empilha em coluna simples */
@media (orientation:portrait) {
  .gmain { display:flex; flex-direction:column; gap:1.2vh; }
  .gcur { font-size:min(20vw,12vh); } .gspd { font-size:min(20vw,12vh); }
  .gmapwrap { width:min(50vw,26vh); height:min(50vw,26vh); }
  .gsectors span { font-size:min(5vw,3vh); }
}
.ghint { text-align:center; color:var(--muted); font-size:2.6vmin; padding:1.2vmin; }
.link.inline { display:inline; padding:0; }
.replaytoggle { display:block; text-align:center; font-size:3vmin; opacity:.65; margin:8px 0; }

/* volume: botoes VOL na fileira dos botoes (mais estreitos) + % no topo a direita */
.bigbtn.vol { flex:0.62; font-size:4vmin; }
.topright { display:flex; align-items:center; gap:2vmin; }
.volpct { font-size:4.2vmin; font-weight:900; color:#cfd6e4; letter-spacing:.5px; }
.clk.wall { color:#cfd6e4; font-weight:900; }
#hud[data-skin="light"] .volpct, #hud[data-skin="light"] .clk.wall { color:#1a2030; }

/* Mic aberto (gravando): veu vermelho translucido por cima da TELA INTEIRA -
   da pra perceber de relance, pilotando, sem ler nada. pointer-events:none =
   nao rouba o toque do push-to-talk (soltar continua funcionando). */
body.miclive::after { content:''; position:fixed; inset:0; z-index:9990; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,45,45,.10) 40%, rgba(255,45,45,.34) 100%); }

.center { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-around;
  align-items:center; padding:4px 8px; border:3px solid transparent; }
.center.rec { border-color:var(--red); background:#1a0e10; }
.center.think { border-color:var(--amber); }

/* HUD em 3 colunas (paisagem): FRENTE | POSICAO | TRAS + faixa embaixo. */
.grid3 { display:flex; width:100%; flex:1; align-items:flex-start; justify-content:space-between; gap:8px; }
.col { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.col.side { flex:1; background:rgba(255,255,255,.03); border-radius:16px; padding:6px 2px; }
.col.core { flex:1.3; }
.lbl { color:var(--muted); font-size:2.6vmin; letter-spacing:2px; }
.nbr { color:#cfd6e4; font-size:2.9vmin; font-weight:700; min-height:3vmin; text-align:center; line-height:1.05; }
.gaprow { display:flex; align-items:center; justify-content:center; gap:6px; }
.arrow { font-size:6.8vmin; font-weight:900; line-height:1; }
.gapval { font-weight:900; font-size:16.5vmin; line-height:1; }
.pacechip { font-size:2.9vmin; font-weight:700; color:#cfd6e4; }
.nbrlast { font-size:2.7vmin; font-weight:700; color:#aeb6c6; min-height:2.9vmin; }
.pos { font-weight:900; line-height:1; font-size:20vmin; }
.lapline { color:#aeb6c6; font-size:3.6vmin; font-weight:600; }
.who { color:var(--muted); font-size:2.8vmin; margin-top:2px; cursor:pointer; }
.who.warn { color:var(--amber); }
.speedo { font-weight:900; color:var(--green); line-height:1; margin-top:1px; }
.speedo #spd { font-size:9.5vmin; }
.speedo small { font-size:3vmin; color:var(--muted); font-weight:700; }
.coretimes { display:flex; gap:14px; font-size:3.4vmin; font-weight:600; color:#cfd6e4; margin-top:1px; }
#mel.fastest { color:var(--green); } /* minha melhor e a melhor de todos */
.botstrip { display:flex; width:100%; justify-content:space-around; gap:10px; font-size:3.2vmin; font-weight:600; color:#cfd6e4; padding:2px 0; }
.botstrip span { white-space:nowrap; }
#teleview { display:flex; flex-direction:column; flex:1; width:100%; justify-content:space-around; }
#mapview { flex:1; min-height:0; width:100%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#mapview.hidden { display:none; }
#trackmap { flex:1; min-width:0; height:100%; }
/* torre de tempos (classificacao) flanqueando o mapa - estilo painel KGV */
.stand { flex:0 0 26%; max-width:26%; height:100%; overflow:hidden; display:flex;
  flex-direction:column; justify-content:center; gap:0.4vmin; padding:0 0.8vmin; }
.stand:empty { display:none; }
.stand .row { display:flex; align-items:center; gap:0.7vmin; white-space:nowrap;
  font-size:2.4vmin; font-weight:700; color:#cfd6e4; line-height:1.1; }
.stand .row.me { color:var(--green); }
.stand .row .p { color:var(--muted); min-width:3vmin; text-align:right; font-weight:800; }
.stand .row .k { color:#e8edf6; min-width:4.6vmin; }
.stand .row .nm { overflow:hidden; text-overflow:ellipsis; flex:1; }
.stand .row .g { color:var(--muted); min-width:5.4vmin; text-align:right; padding-left:0.5vmin; font-weight:700; }
.stand .row .t { min-width:6vmin; text-align:right; padding-left:0.6vmin; color:var(--amber); font-weight:800; }
.stand .row .t.pb { color:var(--green); } /* verde = acabou de fazer a melhor volta normal */

/* ---- skin CLARO ---- */
#hud[data-skin="light"] .stand { background:rgba(255,255,255,.84); border-radius:12px; margin:1vmin 0; }
#hud[data-skin="light"] .stand .row { color:#222838; }
#hud[data-skin="light"] .stand .row .p, #hud[data-skin="light"] .stand .row .g { color:#5a6172; }
#hud[data-skin="light"] .stand .row .k { color:#0b0e14; }
#hud[data-skin="light"] .stand .row .t { color:#9a6b00; }
#hud[data-skin="light"] .stand .row .t.pb, #hud[data-skin="light"] .stand .row.me { color:#1d8e4f; }
#hud[data-skin="light"] .mapinfo { background:rgba(255,255,255,.88); }
#hud[data-skin="light"] .mapinfo .mi-name, #hud[data-skin="light"] .mapinfo .mi-row { color:#222838; }
#hud[data-skin="light"] .trackline { stroke:#9aa3b8; }

/* ---- skin VISOR LCD (retro) ---- */
#hud[data-skin="lcd"] .stand { background:rgba(0,14,7,.55); border:0.5px solid #1d6b3f; border-radius:6px; margin:0.6vmin 0; }
#hud[data-skin="lcd"] .stand .row { font-family:'Consolas','Courier New',monospace; letter-spacing:.5px; color:#36e07a; }
#hud[data-skin="lcd"] .stand .row .p, #hud[data-skin="lcd"] .stand .row .g { color:#1f9e57; }
#hud[data-skin="lcd"] .stand .row .k { color:#7dffb0; }
#hud[data-skin="lcd"] .stand .row .t { color:#aaffcc; }
#hud[data-skin="lcd"] .stand .row .t.pb, #hud[data-skin="lcd"] .stand .row.me { color:#eaff00; }
#hud[data-skin="lcd"] .mapinfo { font-family:'Consolas','Courier New',monospace; color:#36e07a; background:rgba(0,14,7,.62); }
#hud[data-skin="lcd"] .mapinfo .mi-name, #hud[data-skin="lcd"] .mapinfo .mi-row { color:#7dffb0; }
#hud[data-skin="lcd"] .trackline { stroke:#1f7a47; }

/* ---- skin CLARO: painel de dados (HUD) ---- */
#hud[data-skin="light"] { background:#eceef3; }
#hud[data-skin="light"] .clk, #hud[data-skin="light"] .pos, #hud[data-skin="light"] .lapline,
#hud[data-skin="light"] .nbr, #hud[data-skin="light"] .nbrlast, #hud[data-skin="light"] .coretimes,
#hud[data-skin="light"] .botstrip { color:#1a2030; }
#hud[data-skin="light"] .lbl, #hud[data-skin="light"] .who { color:#5a6172; }
#hud[data-skin="light"] .clk.lapt { color:#b5820a; }
#hud[data-skin="light"] .pacechip { color:#3a4150; }
#hud[data-skin="light"] .col.side { background:rgba(0,0,0,.05); }

/* ---- skin VISOR LCD: painel de dados (HUD) ---- */
#hud[data-skin="lcd"] { background:#02100a; }
#hud[data-skin="lcd"] .clk, #hud[data-skin="lcd"] .pos, #hud[data-skin="lcd"] .lapline,
#hud[data-skin="lcd"] .nbr, #hud[data-skin="lcd"] .nbrlast, #hud[data-skin="lcd"] .pacechip,
#hud[data-skin="lcd"] .coretimes, #hud[data-skin="lcd"] .botstrip, #hud[data-skin="lcd"] .lbl,
#hud[data-skin="lcd"] .who, #hud[data-skin="lcd"] .speedo {
  font-family:'Consolas','Courier New',monospace; letter-spacing:.5px; color:#36e07a; }
#hud[data-skin="lcd"] .pos, #hud[data-skin="lcd"] .speedo #spd { color:#7dffb0; }
#hud[data-skin="lcd"] .clk.lapt { color:#eaff00; }
#hud[data-skin="lcd"] .col.side { background:rgba(0,30,15,.32); }
/* fonte 7-segmentos de verdade (visor antigo) nos numeros puros do tema LCD */
@font-face { font-family:'DSEG7'; src:url('DSEG7Classic-Regular.woff2?v=0.62') format('woff2'); font-display:swap; }
#hud[data-skin="lcd"] .gapval, #hud[data-skin="lcd"] .stand .row .t {
  font-family:'DSEG7','Consolas',monospace; letter-spacing:0; }

.mapinfo { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); z-index:3; display:flex;
  flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 12px;
  background:rgba(11,14,20,.6); border-radius:10px; padding:3px 12px; pointer-events:none; max-width:60%; }
.mapinfo .mi-name { font-size:2.4vmin; font-weight:800; color:#e8edf6; }
.mapinfo .mi-row { font-size:2.4vmin; font-weight:700; color:#cfd6e4; }
.trackline { fill:none; stroke:#46506a; stroke-width:5; stroke-dasharray:10 8; stroke-linecap:round; }

.talkbar { min-height:30px; text-align:center; font-size:4vmin; padding:0 12px; }
.talkbar.rec { color:#ff6b6b; font-weight:800; }
.talkbar.think { color:var(--amber); font-weight:800; }

/* fontes maiores (tinha espaco sobrando e nao dava pra ler na pista) - modo COMPLETO */
.coretimes { font-size:4.4vmin; }
.botstrip { font-size:4.2vmin; }
.botstrip.sectors { font-size:4vmin; }
.nbr { font-size:3.8vmin; }
.nbrlast { font-size:3.5vmin; }
.pacechip { font-size:3.6vmin; }
.lbl { font-size:3.3vmin; }
.lapline { font-size:4.3vmin; }

/* #4 modo LIGHT: so o essencial, BEM grande. NADA e removido - so escondido neste
   modo; a Completa mostra tudo. Liga/desliga no CONFIG -> Informacoes. */
#hud[data-info="light"] .botstrip,
#hud[data-info="light"] .pacechip,
#hud[data-info="light"] .nbrlast,
#hud[data-info="light"] .nbr { display:none; }
#hud[data-info="light"] .pos { font-size:26vmin; }
#hud[data-info="light"] .gapval { font-size:17vmin; }
#hud[data-info="light"] .arrow { font-size:8vmin; }
#hud[data-info="light"] .speedo #spd { font-size:13vmin; }
#hud[data-info="light"] .coretimes { font-size:5.6vmin; }
#hud[data-info="light"] .lbl { font-size:3.6vmin; }

/* ===== Desktop: coluna mais larga + cards em 2-3 colunas (no FIM p/ vencer a ordem) ===== */
@media (min-width:880px) {
  :root { --col:1040px; }
  .menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
  .menu .mcard.primary { grid-column:1 / -1; }
  /* Config: masonry so nos cards (.cfg-cards), por altura (sem buraco de linha);
     salvar/acoes ficam full-width abaixo, como filhos flex do .cfg. */
  .cfg-cards { display:block; columns:300px; column-gap:42px; }
  .cfg-cards > .cfgsec { break-inside:avoid; margin:0 0 18px; }
}

/* ===== Aviso de sessao expirada (z-index acima de tudo, ate do HUD) ===== */
.authwarn { position:fixed; top:0; left:0; right:0; z-index:9000; display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--red); color:#fff; cursor:pointer;
  font-family:var(--font-title), system-ui, sans-serif; box-shadow:0 3px 14px rgba(0,0,0,.5);
  padding-top:calc(9px + env(safe-area-inset-top)); }
.authwarn .aw-ic { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; }
.authwarn .aw-txt { flex:1 1 auto; display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.authwarn .aw-txt b { font-size:13px; letter-spacing:.02em; }
.authwarn .aw-txt span { font-size:11px; opacity:.9; }
.authwarn .aw-go { flex:0 0 auto; font-size:12px; font-weight:800; letter-spacing:.06em;
  border:1.5px solid rgba(255,255,255,.85); border-radius:6px; padding:5px 10px; }

/* ===== Modo GPS v1.10: REC, previsto, fantasma, camada de parado ===== */
.grec { font-family:var(--font-title); font-size:2.2vmin; font-weight:800; letter-spacing:1px;
  padding:.5vmin 1.6vmin; border-radius:2vmin; white-space:nowrap; }
.grec.ok { color:var(--green); border:1px solid #27c06a55; }
.grec.warn { color:var(--amber); border:1px solid #e8b30066; }
.grec.bad { color:#fff; background:var(--red); border:1px solid var(--red); }
.gdrow { display:flex; align-items:baseline; gap:2vw; min-height:0; }
.gprev { font-family:var(--font-title); font-weight:900; font-size:min(3vw,6vh); color:#cfd6e4; }
/* fantasma: fita da volta com os dois pontos (voce azul, fantasma roxo) */
.gghost { grid-column:1/4; grid-row:2; width:96%; display:flex; flex-direction:column; align-items:center; gap:1vmin; }
.gfita { position:relative; width:100%; height:1.8vmin; border-radius:1.2vmin;
  background:#1d2330; border:1px solid var(--line); }
.gdot { position:absolute; top:50%; width:3vmin; height:3vmin; border-radius:50%;
  transform:translate(-50%,-50%); transition:left .12s linear; }
.gdot.me { background:#3a8edd; z-index:2; box-shadow:0 0 1.4vmin #3a8edd; }
.gdot.gh { background:#b78cff; opacity:.9; }
.ggap { font-family:var(--font-title); font-weight:800; font-size:3.6vmin; letter-spacing:.5px; }
/* camada de parado: painel denso pro momento em que ha olhos livres */
.gpark { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.4vmin; padding:1vmin; }
.gp-grid { display:grid; grid-template-columns:repeat(3,auto); gap:2vmin 6vmin; }
.gp-grid .gval2 { font-family:var(--font-title); font-weight:900; font-size:6vmin;
  line-height:1; font-variant-numeric:tabular-nums; }
.gp-tab { border-collapse:collapse; font-size:3vmin; font-variant-numeric:tabular-nums; }
.gp-tab th { color:var(--muted); font-size:2.2vmin; font-weight:700; letter-spacing:1px; padding:0 2.6vmin .6vmin; }
.gp-tab td { padding:.3vmin 2.6vmin; text-align:center; }
.gp-tab td.ok { color:var(--green); }
.gp-foot { color:var(--muted); font-size:2.4vmin; }