/* GM-TOKENS-V1 — The GlobalMatch
   Uma paleta so, lida da home (index.html), para todos os satelites.
   Regra: nenhuma pagina define cor propria fora deste arquivo, salvo
   as cores clinicas de monitor (tracados), que ficam na propria pagina.

   Tema: html[data-theme="light"|"dark"]. O gm_shell.js grava o atributo
   (e espelha em body.light / body.dark para paginas antigas).
   Padrao: CLARO.
*/
:root{
  /* marca — bandeira: azul-marinho, branco, vermelho */
  --gm-navy:#0a3161;
  --gm-red:#b31942;

  /* superficie */
  --gm-bg:#fafbfc;
  --gm-panel:#ffffff;
  --gm-panel-2:#f3f6f9;
  --gm-line:#e6ebef;
  --gm-line-2:#cfd8e0;

  /* texto */
  --gm-ink:#1a222b;
  --gm-ink-2:#5b6a77;
  --gm-ink-3:#6f7f8c;      /* era #93a1ad na home: escurecido para 4,5:1 */

  /* destaque */
  --gm-accent:#0a3161;
  --gm-accent-soft:#eef2f8;
  --gm-accent-ink:#ffffff;

  /* estados clinicos / de resposta (fora do tracado) */
  --gm-ok:#1f7a4d;
  --gm-ok-soft:#e6f3ec;
  --gm-warn:#8a5a00;
  --gm-warn-soft:#fbf1dc;
  --gm-bad:#b31942;
  --gm-bad-soft:#f9e8ec;

  /* tipografia */
  --gm-font:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --gm-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* forma */
  --gm-r-sm:6px;
  --gm-r:9px;
  --gm-r-lg:14px;
  --gm-shadow:0 6px 18px rgba(10,20,30,.08);
  --gm-ease:cubic-bezier(.22,.61,.36,1);

  /* casca */
  --gm-shell-h:56px;

  /* GM-EDGE-V1: faixa de 4px na borda esquerda dos cards e painéis (padrão desde out 2026) */
  --gm-edge:4px solid var(--gm-accent);
}
html[data-theme="dark"]{
  --gm-bg:#0a1020;
  --gm-panel:#111a2c;
  --gm-panel-2:#16233a;
  --gm-line:#1e2a41;
  --gm-line-2:#2e3f5d;

  --gm-ink:#f1f5fa;
  --gm-ink-2:#bccbde;
  --gm-ink-3:#9fb0c6;

  --gm-accent:#8fb6ef;
  --gm-accent-soft:#16233a;
  --gm-accent-ink:#0a1020;
  --gm-red:#e2647c;

  --gm-ok:#5fcf93;
  --gm-ok-soft:#12302a;
  --gm-warn:#e2b45a;
  --gm-warn-soft:#332a14;
  --gm-bad:#e2647c;
  --gm-bad-soft:#3a1b24;

  --gm-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ---------- casca comum (cabecalho) ---------- */
html.gm-shelled body{padding-top:var(--gm-shell-h)}
#gm-shell{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--gm-shell-h);
  display:flex;align-items:center;gap:14px;padding:0 18px;
  background:var(--gm-panel);color:var(--gm-ink);
  border-bottom:1px solid var(--gm-line-2);
  font-family:var(--gm-font);font-size:14px;line-height:1;
}
#gm-shell a{color:inherit;text-decoration:none}
#gm-shell .gm-home{display:flex;align-items:center;gap:10px;flex:none}
#gm-shell .gm-coin{width:41px;height:41px;border-radius:50%;display:block}
#gm-shell .gm-brand{font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--gm-ink)}
#gm-shell .gm-brand b{font-weight:700;color:var(--gm-accent)}
#gm-shell .gm-sep{width:1px;height:22px;background:var(--gm-line-2);flex:none}
#gm-shell .gm-tool{display:flex;flex-direction:column;gap:3px;min-width:0}
#gm-shell .gm-tool .gm-name{font-weight:700;font-size:15px;color:var(--gm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gm-shell .gm-tool .gm-kicker{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gm-ink-3);font-weight:600}
#gm-shell .gm-slot{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
#gm-shell .gm-actions{display:flex;align-items:center;gap:8px;flex:none}
#gm-shell .gm-btn{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 11px;border-radius:var(--gm-r);
  border:1px solid var(--gm-line-2);background:var(--gm-panel);color:var(--gm-ink);
  font:600 12.5px/1 var(--gm-font);white-space:nowrap;
}
#gm-shell .gm-btn:hover{border-color:var(--gm-accent);color:var(--gm-accent)}
#gm-shell .gm-btn:focus-visible{outline:2px solid var(--gm-accent);outline-offset:1px}
#gm-shell .gm-btn.gm-icon{width:32px;padding:0;justify-content:center}
#gm-shell .gm-theme-img{width:22px;height:22px;display:block;border-radius:50%;object-fit:cover;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
#gm-shell #themeBtn:hover .gm-theme-img{transform:rotate(15deg) scale(1.08);transition:transform .25s}
#gm-shell .gm-btn svg{width:16px;height:16px;display:block}
#gm-shell .gm-btn.gm-primary{background:var(--gm-accent);border-color:var(--gm-accent);color:var(--gm-accent-ink)}
#gm-shell .gm-btn.gm-primary:hover{filter:brightness(1.08);color:var(--gm-accent-ink)}

/* os botoes compartilhados ja existentes (idioma e How to use) herdam o mesmo porte */
#gm-shell #gm-langsw .cur,#gm-shell #gm-howto-btn{
  height:32px!important;border-radius:var(--gm-r)!important;
  border:1px solid var(--gm-line-2)!important;background:var(--gm-panel)!important;
  color:var(--gm-ink)!important;font:600 12.5px/1 var(--gm-font)!important;opacity:1!important;
}
#gm-shell #gm-langsw .cur:hover,#gm-shell #gm-howto-btn:hover{border-color:var(--gm-accent)!important;color:var(--gm-accent)!important;background:var(--gm-panel)!important}

/* o conteudo que a pagina move para o slot (placar, contador) */
#gm-shell .gm-slot .gm-stat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1}
#gm-shell .gm-slot .gm-stat b{font:700 16px/1 var(--gm-mono);color:var(--gm-ink);font-variant-numeric:tabular-nums}
#gm-shell .gm-slot .gm-stat span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gm-ink-3);font-weight:600}

@media (max-width:760px){
  #gm-shell{padding:0 12px;gap:10px}
  #gm-shell .gm-brand{display:none}
  #gm-shell .gm-sep{display:none}
  #gm-shell .gm-tool{flex:1 1 auto}
  #gm-shell .gm-tool .gm-kicker{display:none}
  #gm-shell .gm-tool .gm-name{font-size:14px}
  /* o slot (placar, "loading…") encolhe antes do nome e nunca invade os botoes */
  #gm-shell .gm-slot{flex:0 1 auto;max-width:28%;overflow:hidden;gap:8px;margin-left:0}
  #gm-shell .gm-actions{gap:6px}
  #gm-shell .gm-btn span{display:none}
  #gm-shell .gm-btn:not(.gm-icon){padding:0 8px}
  #gm-shell #gm-pad-btn .dot,#gm-shell #gm-voice-btn .dot{display:none}
}
@media (max-width:480px){
  #gm-shell{gap:8px}
  #gm-shell .gm-coin{width:30px;height:30px}
  #gm-shell .gm-slot{display:none}
  /* a seta de ajustes da voz some: no celular, segurar o botao de voz abre os ajustes */
  #gm-shell #gm-voice-cfg{display:none!important}
  #gm-shell #gm-voice-btn{margin-right:0}
}

/* ---------- portao de login (GM-GATE-V1) ----------
   O portao (#gm-gate) e' o mesmo HTML/JS em todas as paginas, cada uma com
   seu <style> escuro e botao turquesa. Aqui ele ganha a cara da casa, nos
   dois temas, sem tocar nas paginas: "html #gm-gate" vence "#gm-gate" por
   especificidade, e o <style> de cada pagina vira so um fallback. */
html #gm-gate{
  background:var(--gm-bg);color:var(--gm-ink);
  font-family:var(--gm-font);padding:16px;
}
html #gm-gate .gm-card{
  max-width:400px;padding:34px 30px 26px;
  background:var(--gm-panel);border:1px solid var(--gm-line-2);
  border-radius:var(--gm-r-lg);box-shadow:var(--gm-shadow);
}
html #gm-gate .gm-brand{
  font-family:var(--gm-font);font-weight:700;font-size:15px;letter-spacing:.01em;
  color:var(--gm-ink);margin-bottom:6px;
}
html #gm-gate .gm-brand::before{
  content:"";display:block;width:67px;height:67px;margin:0 auto 14px;border-radius:50%;
  background:url(../assets/logo-coin.png) center/cover no-repeat;
}
html #gm-gate .gm-sub{font-size:14px;color:var(--gm-ink-2);margin-bottom:22px}
html #gm-gate input{
  height:44px;padding:0 14px;border:1px solid var(--gm-line-2);border-radius:var(--gm-r);
  background:var(--gm-panel-2);color:var(--gm-ink);font:500 14.5px/1 var(--gm-font);
}
html #gm-gate input::placeholder{color:var(--gm-ink-3)}
html #gm-gate input:focus{outline:none;border-color:var(--gm-accent);box-shadow:0 0 0 3px var(--gm-accent-soft)}
html #gm-gate button{
  height:44px;padding:0 14px;border:1px solid var(--gm-accent);border-radius:var(--gm-r);
  background:var(--gm-accent);color:var(--gm-accent-ink);
  font:700 13.5px/1 var(--gm-font);letter-spacing:.06em;
}
html #gm-gate button:hover:not(:disabled){filter:brightness(1.08)}
html #gm-gate button:focus-visible{outline:2px solid var(--gm-accent);outline-offset:2px}
html #gm-gate #gmCodeRow{margin-top:6px}
html #gm-gate .gm-msg{font-size:13px;color:var(--gm-ink-2)}
html #gm-gate .gm-msg.ok{color:var(--gm-ok)}
html #gm-gate .gm-msg.err{color:var(--gm-bad)}
/* o JS do portao escreve o link "See plans" com cor fixa (turquesa) */
html #gm-gate .gm-msg a{color:var(--gm-accent)!important;font-weight:700}
html #gm-gate .gm-fine{font-size:11.5px;color:var(--gm-ink-3);margin-top:18px}

/* GM-EDGE-V1 — classe utilitária para qualquer card novo */
.gm-edge{border-left:var(--gm-edge)}