@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   SUA LINDA — Design System 2026 (portal.css)
   Camada visual unificada de todo o portal. Carrega depois dos <style>
   embutidos de cada página, então é a fonte única de verdade estética.
   NÃO altera integração nem regra de negócio: só a aparência.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. TOKENS  (mesmos nomes usados pelas páginas → herança aponta p/ cá)
 * ------------------------------------------------------------------ */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --field-0:#05070e; --field-1:#080d18; --field-2:#0c1424;
  --bg0:#05070e; --bg1:#080d18; --bg2:#0c1424;

  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --surface-solid:#0e1626;
  --panel:rgba(10,16,28,.82);
  --panel2:rgba(13,20,34,.96);
  --cardTop:rgba(255,255,255,.045);
  --cardBot:rgba(255,255,255,.012);

  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.06);

  --text:#f3f7ff;
  --muted:#98a6be;

  --green:#22c55e; --green-strong:#16a34a;
  --green-soft:rgba(34,197,94,.14); --green-line:rgba(34,197,94,.42);
  --cta:#16a34a; --cta2:#22c55e;
  --yellow:#f5b400; --yellow-soft:rgba(245,180,0,.14);
  --red:#ef4444;

  --afc:#f8593c; --nfc:#3b82f6; --gold:#ffcc00;
  --ok:#22c55e; --danger:#ff4d4f;

  --btnSecondaryBg:rgba(255,255,255,.05);
  --btnSecondaryStroke:rgba(255,255,255,.14);
  --btnSecondaryText:#f3f7ff;
  --pillBg:rgba(15,23,42,.55);
  --pillLinkBg:rgba(255,255,255,.035);
  --pillLinkStroke:rgba(255,255,255,.08);

  --heroOverlayA:rgba(4,7,16,.30);
  --heroOverlayB:rgba(4,7,16,.78);
  --marqueeBg:rgba(4,7,16,.42);

  --playoff-afc:var(--afc); --playoff-nfc:var(--nfc); --playoff-gold:var(--gold);
  --playoff-green:var(--green); --playoff-red:var(--danger);
  --playoff-panel:rgba(255,255,255,.05); --playoff-stroke:rgba(255,255,255,.11);
  --playoff-muted:rgba(243,247,255,.66);

  --portal-green:var(--green); --portal-green-dark:var(--green-strong);
  --portal-yellow:var(--yellow); --portal-bg:var(--field-0);
  --portal-surface:var(--surface-solid); --portal-surface-soft:var(--surface-2);
  --portal-text:var(--text); --portal-muted:var(--muted); --portal-border:var(--stroke);

  --radius:16px; --radius-lg:22px; --radius-sm:11px; --portal-radius:14px;
  --btn-radius:13px 13px 13px 3px;      /* assinatura: cantos opostos */
  --control-h:46px; --portal-control-height:46px;

  --shadow:0 22px 50px rgba(0,0,0,.45);
  --shadow-sm:0 10px 24px rgba(0,0,0,.30);
  --shadow-green:0 14px 34px rgba(34,197,94,.22);
  --ring:0 0 0 3px rgba(34,197,94,.34);

  --gutter:clamp(14px, 4vw, 28px);
  --stack:clamp(16px, 3.4vw, 26px);
  --page-w:1180px;
  --field-line:linear-gradient(90deg, transparent, var(--green-line), var(--yellow), transparent);

  --navH:74px; --logoH:46px; --logoH-mobile:38px;
}

html[data-theme="light"] {
  color-scheme: light;
  --field-0:#eef2fb; --field-1:#f3f6ff; --field-2:#e9eefc;
  --bg0:#eef2fb; --bg1:#f3f6ff; --bg2:#e9eefc;
  --surface:rgba(255,255,255,.86); --surface-2:rgba(255,255,255,.96); --surface-solid:#ffffff;
  --panel:rgba(255,255,255,.80); --panel2:rgba(255,255,255,.94);
  --cardTop:rgba(255,255,255,.96); --cardBot:rgba(248,250,255,.92);
  --stroke:rgba(15,23,42,.12); --stroke2:rgba(15,23,42,.08);
  --text:#0b1220; --muted:#516177;
  --green-soft:rgba(22,163,74,.12);
  --btnSecondaryBg:rgba(2,6,23,.04); --btnSecondaryStroke:rgba(2,6,23,.14); --btnSecondaryText:#0b1220;
  --pillBg:rgba(255,255,255,.82); --pillLinkBg:rgba(2,6,23,.03); --pillLinkStroke:rgba(2,6,23,.10);
  --heroOverlayA:rgba(255,255,255,.30); --heroOverlayB:rgba(11,18,32,.55); --marqueeBg:rgba(255,255,255,.80);
  --playoff-panel:rgba(2,6,23,.04); --playoff-stroke:rgba(2,6,23,.10); --playoff-muted:rgba(15,23,42,.62);
  --shadow:0 20px 44px rgba(2,6,23,.14); --shadow-sm:0 10px 22px rgba(2,6,23,.10);
}

/* ------------------------------------------------------------------ *
 * 2. BASE / TIPOGRAFIA
 * ------------------------------------------------------------------ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100%;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 560px at 50% -10%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(900px 460px at 12% 2%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(820px 520px at 96% 8%, rgba(245,180,0,.08), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 46%, var(--bg2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
}
h1,h2,h3,h4,.section-title,.panel-title,.playoff-hero h1,.card-title{
  font-family:"Archivo","Inter",system-ui,sans-serif; letter-spacing:-.01em; line-height:1.08;
}
h1{ font-weight:900; font-size:clamp(28px, 5.4vw, 46px); }
h2{ font-weight:800; font-size:clamp(20px, 3.2vw, 27px); }
h3{ font-weight:800; font-size:clamp(17px, 2.4vw, 20px); }
a{ color:inherit; }
img{ max-width:100%; }
::selection{ background:rgba(34,197,94,.30); color:#fff; }

*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }

button, input, select, textarea{ font:inherit; color:inherit; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }

@keyframes sl-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------------ *
 * 3. LAYOUT
 * ------------------------------------------------------------------ */
.container, main.container{
  width:min(var(--page-w), 100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding-block:clamp(18px, 3vw, 30px);
  display:flex; flex-direction:column; gap:var(--stack);
}
.card, .panel{
  position:relative; padding:clamp(16px, 3vw, 26px);
  border:1px solid var(--stroke); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--cardTop), var(--cardBot)), var(--surface);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.section-title, .panel-title{
  display:flex; align-items:center; gap:11px; margin:0 0 clamp(12px,2vw,18px);
  text-transform:uppercase; letter-spacing:.04em; font-size:clamp(15px,2.4vw,19px);
}
.section-title .dot, .panel-kicker{
  display:inline-block; width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg, var(--green), var(--green-strong));
  box-shadow:0 0 0 4px var(--green-soft);
}
.card-subtitle,.panel-sub{ color:var(--muted); font-weight:600; }

/* ------------------------------------------------------------------ *
 * 4. BOTÕES — assinatura assimétrica, padronizada em TODO o portal
 * ------------------------------------------------------------------ */
/* Especificidade de classe (não :where) para vencer os <style> das páginas pela ordem de carregamento */
.btn, .btn-primary, .btn-secondary, .btn-green, .btn-gray, .btn-yellow,
.btn-red, .primary, .secondary, .cta, .nav-cta, .primary-button,
.portal-primary, .portal-secondary, .ui-btn, .whats,
.playoff-admin-button, .playoff-link-button, .header-link, .header-button,
#btn-sair, [data-portal-button]{
  --_bg:var(--btnSecondaryBg); --_bd:var(--btnSecondaryStroke); --_fg:var(--btnSecondaryText);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--control-h); padding:11px 18px;
  border:1px solid var(--_bd); border-radius:var(--btn-radius) !important;   /* assinatura assimétrica garantida */
  background:var(--_bg); color:var(--_fg);
  font-family:"Archivo","Inter",sans-serif; font-weight:800; font-size:14px; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; white-space:nowrap; box-sizing:border-box; max-width:100%; line-height:1.1;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]),
.nav-cta:hover,.cta:hover,.primary:hover,.secondary:hover,.portal-primary:hover,.portal-secondary:hover,
.ui-btn:hover,.whats:hover,.playoff-admin-button:hover:not(:disabled),.btn-primary:hover,.btn-secondary:hover,
.btn-green:hover,.btn-gray:hover,.btn-yellow:hover,.btn-red:hover,.primary-button:hover,[data-portal-button]:hover{
  transform:translateY(-2px); filter:brightness(1.05); box-shadow:var(--shadow-sm);
}
.btn:active,.nav-cta:active,.cta:active,.primary:active,.secondary:active,.portal-primary:active,
.portal-secondary:active,.ui-btn:active,.whats:active,.playoff-admin-button:active,.primary-button:active,[data-portal-button]:active{ transform:translateY(0); }
button:disabled,.btn:disabled,.nav-cta:disabled,.primary:disabled,.secondary:disabled,.cta:disabled,.primary-button:disabled,.portal-primary:disabled,
button[aria-disabled="true"],.btn[aria-disabled="true"],.primary[aria-disabled="true"],.playoff-admin-button[aria-disabled="true"]{ cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; }

/* Variante primária (verde) */
.btn.primary,.btn-primary,.primary-button,.btn-green,.portal-primary,.nav-cta,.cta,.whats,.playoff-admin-button,
a.primary,.actions a.primary,.drawer nav a.cta{
  --_bg:linear-gradient(180deg, var(--green), var(--green-strong)); --_bd:rgba(34,197,94,.55); --_fg:#04140b;
}
.btn.primary:hover,.btn-primary:hover,.primary-button:hover,.btn-green:hover,.nav-cta:hover,.cta:hover,.whats:hover,.playoff-admin-button:hover:not(:disabled){ box-shadow:var(--shadow-green); }

/* Variante amarela / vermelha / secundária */
.btn-yellow{ --_bg:linear-gradient(180deg, var(--yellow), #d99a00); --_bd:rgba(245,180,0,.55); --_fg:#1a1200; }
.btn-red{ --_bg:linear-gradient(180deg, #ff6a6a, #e11d1d); --_bd:rgba(255,77,79,.5); --_fg:#210404; }
.btn.secondary,.btn-secondary,.btn-gray,.portal-secondary,.ui-btn,.header-link,.header-button,#btn-sair,.playoff-link-button{
  --_bg:var(--btnSecondaryBg); --_bd:var(--btnSecondaryStroke); --_fg:var(--btnSecondaryText);
}
.btn-row,.hero-actions,.cta-row,.actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ------------------------------------------------------------------ *
 * 5. NAVBAR PÚBLICA + SHELL AUTENTICADO
 * ------------------------------------------------------------------ */
.navbar-fixed{
  position:fixed; inset:0 0 auto 0; z-index:9999; min-height:var(--navH);
  display:flex; align-items:center;
  background:linear-gradient(180deg, var(--panel), rgba(5,7,14,.55));
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}
body:has(.navbar-fixed){ padding-top:var(--navH); }
.navbar-inner{
  width:min(var(--page-w), 100% - 28px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; position:relative;
}
.navbar-inner:after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:var(--field-line); opacity:.9; }
.brand a{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand img{ height:var(--logoH); width:auto; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.brand .brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand .brand-name b{ font-family:"Archivo",sans-serif; font-weight:900; font-size:15px; letter-spacing:.02em; }
.brand .brand-name small{ color:var(--muted); font-weight:600; font-size:12px; }

.nav-desktop, .portal-shell-nav{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px; border:1px solid var(--stroke); border-radius:999px; background:var(--pillBg);
}
.nav-desktop a, .portal-shell-nav a{
  display:inline-flex; align-items:center; min-height:38px; padding:8px 13px;
  border:1px solid transparent; border-radius:999px; color:var(--text); text-decoration:none;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.01em; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-desktop a:hover, .portal-shell-nav a:hover, .nav-desktop a.active, .portal-shell-nav a.active{
  border-color:var(--green-line); background:var(--green-soft); transform:translateY(-1px);
}
.portal-shell-header{
  position:sticky; top:0; z-index:100; min-height:66px; display:flex; align-items:center; gap:16px;
  padding:10px max(16px, calc((100vw - var(--page-w)) / 2));
  background:linear-gradient(180deg, var(--panel), rgba(5,7,14,.6));
  border-bottom:1px solid var(--stroke); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.portal-shell-brand{ display:inline-flex; align-items:center; gap:10px; color:var(--green); text-decoration:none; font-family:"Archivo",sans-serif; font-weight:900; white-space:nowrap; }
.portal-shell-brand img{ height:var(--logoH); width:auto; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.portal-shell-nav{ flex:1; justify-content:center; }
.portal-shell-actions{ display:flex; align-items:center; gap:8px; }

.nav-right{ display:flex; align-items:center; gap:10px; }
.ctrl{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--stroke); border-radius:999px; background:var(--pillLinkBg); }
.select,.icon-btn{
  border:1px solid var(--stroke); background:var(--pillLinkBg); color:var(--text);
  border-radius:999px; padding:0 12px; font-weight:700; font-size:13px; outline:none;
  height:42px; min-height:42px; cursor:pointer;
}
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; }
.icon-btn:hover,.select:hover{ border-color:var(--green-line); }
/* Toolbar da navbar: todos os controles com a MESMA altura e alinhamento */
.navbar-fixed .nav-cta,
.navbar-fixed .select,
.navbar-fixed .icon-btn{ height:42px; min-height:42px; }
.navbar-fixed .nav-cta{ padding:0 16px; }

.nav-mobile{ display:none; }
.burger,.drawer .close{
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--stroke); border-radius:12px; background:var(--pillLinkBg); color:var(--text); cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative; }
.burger span:before,.burger span:after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; }
.burger span:before{ top:-6px; }
.burger span:after{ top:6px; }

/* ------------------------------------------------------------------ *
 * 6. DRAWER (menu lateral mobile)
 * ------------------------------------------------------------------ */
.mobile-overlay{
  position:fixed; inset:0; z-index:9998; background:rgba(3,6,14,.6);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
body.menu-open .mobile-overlay{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; left:0; right:auto; z-index:9999; height:100dvh; width:min(86vw, 340px); padding:18px;
  display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(180deg, var(--panel2), var(--field-1));
  border-right:1px solid var(--stroke); border-left:none;
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.22,.61,.36,1); overflow-y:auto;
}
body.menu-open .drawer{ transform:translateX(0); }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; }
.drawer .brand-text{ font-family:"Archivo",sans-serif; font-weight:900; display:flex; flex-direction:column; }
.drawer .brand-text small{ color:var(--muted); font-weight:600; font-size:12px; }
.drawer-controls{ display:flex; gap:8px; }
.drawer nav{ display:flex; flex-direction:column; gap:9px; }
.drawer nav a{
  display:flex; align-items:center; min-height:46px; padding:10px 14px;
  border:1px solid var(--stroke); border-radius:13px; background:var(--pillLinkBg);
  text-decoration:none; color:var(--text); font-weight:700;
}
.drawer nav a.primary{ border-color:var(--green-line); background:var(--green-soft); }
.drawer nav a.cta{ background:linear-gradient(180deg,var(--green),var(--green-strong)); color:#04140b; border-color:rgba(34,197,94,.5); }
.drawer nav a:hover{ border-color:var(--green-line); }
.drawer .note{ color:var(--muted); font-size:12px; margin-top:4px; }

[data-auth-link]{ display:none !important; }
html.portal-authenticated [data-auth-link]{ display:inline-flex !important; }
html.portal-authenticated .drawer [data-auth-link]{ display:flex !important; }

.portal-auth-loading{
  position:fixed; inset:0; z-index:20000; display:none; place-items:center; padding:24px;
  color:var(--muted); background:var(--field-0); font-weight:700; text-align:center;
}
body.portal-auth-pending .portal-auth-loading{ display:grid; }
body.portal-auth-pending > :not(.portal-auth-loading){ visibility:hidden; }

/* ------------------------------------------------------------------ *
 * 7. FORMULÁRIOS
 * ------------------------------------------------------------------ */
label{ font-weight:600; }
input, select, textarea{
  width:100%; min-height:var(--control-h); padding:11px 13px;
  border:1px solid var(--stroke); border-radius:12px;
  background:color-mix(in srgb, var(--field-0) 55%, transparent); color:var(--text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ background:#fff; }
input::placeholder,textarea::placeholder{ color:color-mix(in srgb, var(--muted) 85%, transparent); }
input:focus,select:focus,textarea:focus{ border-color:var(--green-line); box-shadow:0 0 0 3px var(--green-soft); }
input[type="checkbox"],input[type="radio"]{ width:auto; min-height:0; accent-color:var(--green); }

/* ------------------------------------------------------------------ *
 * 8. TABELAS
 * ------------------------------------------------------------------ */
.table-wrap,.playoff-table-wrap{ width:100%; overflow-x:auto; border-radius:var(--radius-sm); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ padding:11px 13px; text-align:left; border-bottom:1px solid var(--stroke2); }
thead th{
  position:sticky; top:0; background:var(--surface-2);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
tbody tr{ transition:background-color .12s ease; }
tbody tr:hover{ background:rgba(255,255,255,.03); }
tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }

/* ------------------------------------------------------------------ *
 * 9. BADGES / PILLS
 * ------------------------------------------------------------------ */
.badge,.pill,.badge-year{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--stroke); background:var(--surface-2); font-size:12px; font-weight:700; color:var(--text);
}
.badge-year{ color:#fde68a; background:var(--yellow-soft); border-color:rgba(245,180,0,.3); }
.pill.ok{ color:#86efac; background:var(--green-soft); border-color:var(--green-line); }

/* ------------------------------------------------------------------ *
 * 10. HERO (home) — governado pelo CSS próprio da página (index.html),
 *     para não sobrepor o letreiro/ticker nem a estrutura do hero.
 *     (bloco removido de propósito)
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 11. ATALHOS / FOOTER / REGRAS
 * ------------------------------------------------------------------ */
.subpages{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.subpages a{
  display:flex; flex-direction:column; gap:5px; padding:16px 18px;
  border:1px solid var(--stroke); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--text);
  transition:transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.subpages a:hover{ transform:translateY(-3px); border-color:var(--green-line); background:var(--green-soft); }
.subpages a strong{ font-family:"Archivo",sans-serif; font-weight:800; }
.subpages a small{ color:var(--muted); }
.regras{ display:none; margin-top:14px; }
.regras ul{ margin:0; padding-left:20px; display:grid; gap:9px; }
.regras li{ line-height:1.55; }
.regras-hint{ margin-top:8px; color:var(--muted); font-size:12px; }
footer{ text-align:center; color:var(--muted); font-weight:700; padding:22px 0 8px; }

/* ------------------------------------------------------------------ *
 * 12. CALENDÁRIO / MOTOR INTELIGENTE / ANIVERSÁRIOS (admin)
 * ------------------------------------------------------------------ */
.calendar-toolbar,.calendar-config-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; align-items:end; margin:14px 0; }
.calendar-toolbar label,.calendar-config-grid label{ display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.intelligent-round-panel{ margin-top:16px; padding:18px; border:1px solid rgba(245,180,0,.30); border-radius:var(--radius); background:linear-gradient(145deg, rgba(245,180,0,.08), rgba(34,197,94,.05)); }
.intelligent-round-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.intelligent-round-head h3{ color:var(--yellow); margin:0; }
.intelligent-round-head p,.intelligent-round-summary{ margin-top:5px; color:var(--muted); font-size:12px; }
.intelligent-round-metrics{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:9px; margin:14px 0; }
.intelligent-round-metrics > div{ padding:11px; border:1px solid var(--stroke); border-radius:12px; background:rgba(5,8,22,.5); }
.intelligent-round-metrics small{ color:var(--muted); font-size:10px; display:block; }
.intelligent-round-metrics strong{ display:block; margin-top:4px; font-size:14px; }
.calendar-games{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:8px; max-height:460px; overflow:auto; padding-right:4px; }
.calendar-game-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--stroke); border-radius:12px; background:var(--surface); cursor:pointer; }
.calendar-game-row:has(input:checked){ border-color:var(--green-line); background:var(--green-soft); }
.calendar-game-row.is-recommended{ border-color:rgba(245,180,0,.5); }
.calendar-game-row input{ flex:0 0 auto; accent-color:var(--green); }
.calendar-game-insight{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.calendar-game-insight span{ padding:3px 7px; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); background:rgba(5,8,22,.6); font-size:10px; }
.calendar-game-insight .insight-score{ color:var(--yellow); border-color:rgba(245,180,0,.35); }
.calendar-game-insight .insight-underdog{ color:var(--green); border-color:var(--green-line); }
.calendar-round-card{ padding:16px; border:1px solid var(--stroke); border-radius:var(--radius); background:var(--surface); }
.calendar-rounds,.calendar-result-list{ display:grid; gap:10px; }
.birthday-list{ display:grid; gap:9px; margin-top:12px; }
.birthday-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--stroke); border-radius:12px; background:var(--surface); }
.birthday-item span{ margin-top:3px; color:var(--muted); font-size:12px; display:block; }
.birthday-days{ min-width:92px; padding:6px 10px; border-radius:999px; text-align:center; font-size:12px; font-weight:800; color:#fde68a; background:var(--yellow-soft); border:1px solid rgba(245,180,0,.28); }
.birthday-days.today{ color:#86efac; background:var(--green-soft); border-color:var(--green-line); }

/* ------------------------------------------------------------------ *
 * 13. RESPONSIVIDADE — celulares de todos os tamanhos
 * ------------------------------------------------------------------ */
@media (max-width: 980px) and (min-width: 721px){
  .portal-shell-header{ flex-wrap:wrap; gap:10px; }
  .portal-shell-nav{ order:3; width:100%; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .portal-shell-actions{ margin-left:auto; }
}
@media (max-width: 720px){
  /* Navbar pública: hambúrguer à esquerda · marca · "Entrar" à direita.
     Especificidade .navbar-fixed vence o order:1/order:2 embutido das páginas. */
  .nav-desktop{ display:none; }
  .nav-mobile{ display:block; }
  .nav-right .ctrl{ display:none; }
  .navbar-fixed .navbar-inner{ justify-content:flex-start; gap:10px; flex-direction:row; }
  .navbar-fixed .nav-mobile{ order:0; }
  .navbar-fixed .brand{ order:1; margin-right:auto; min-width:0; }
  .navbar-fixed .nav-right{ order:2; }
  /* O logo já mostra "SUA LINDA": remove o texto redundante no mobile */
  .brand .brand-name{ display:none; }

  /* Área autenticada (portal-shell): esconde a nav inline e mostra o hambúrguer */
  .portal-shell-header{ flex-wrap:nowrap; gap:10px; }
  .portal-shell-header .portal-shell-nav{ display:none !important; }
  .portal-shell-brand{ margin-right:auto; }
  .portal-shell-burger{ display:inline-flex; order:-1; }
}
@media (max-width: 640px){
  :root, html[data-theme="dark"], html[data-theme="light"]{ --navH:64px; }
  .navbar-inner{ width:min(var(--page-w), 100% - 22px); }
  .brand img{ height:var(--logoH-mobile); }
  .portal-shell-brand img{ height:var(--logoH-mobile); }
  .brand .brand-name small{ display:none; }
  /* Botões: tamanho natural, centralizados, sem estourar a tela */
  .btn-row,.cta-row,.actions{ width:100%; justify-content:center; }
  .calendar-games{ max-height:none; }
}
@media (max-width: 360px){
  :where(.btn,.nav-cta,.primary,.secondary,.cta){ padding:11px 14px; font-size:13px; }
  .section-title,.panel-title{ font-size:15px; }
}
@media (min-width: 1400px){ :root{ --page-w:1240px; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------------ *
 * 14. HOME — seção "Como funciona" (substitui o carrossel)
 * ------------------------------------------------------------------ */
.highlights{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px;
}
.highlight{
  position:relative; padding:20px; border:1px solid var(--stroke); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--cardTop), var(--cardBot)), var(--surface);
  transition:transform .18s ease, border-color .18s ease;
  overflow:hidden;
}
.highlight::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, var(--green), var(--yellow));
}
.highlight:hover{ transform:translateY(-4px); border-color:var(--green-line); }
.highlight-ico{
  display:inline-grid; place-items:center; width:46px; height:46px; margin-bottom:12px;
  border-radius:13px; font-size:23px; line-height:1;
  background:var(--green-soft); border:1px solid var(--green-line);
}
.highlight h3{ margin:0 0 7px; }
.highlight p{ margin:0; color:var(--muted); font-weight:500; line-height:1.55; }

/* ------------------------------------------------------------------ *
 * 15. Unifica acentos vermelhos legados -> linha de campo (verde/amarelo)
 * ------------------------------------------------------------------ */
.navbar-inner:after,
.drawer:before{ background:var(--field-line) !important; }

/* ------------------------------------------------------------------ *
 * 16. Menu mobile da área autenticada (portal-shell) — injetado por JS
 * ------------------------------------------------------------------ */
.portal-shell-burger{
  display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center;
  border:1px solid var(--stroke); border-radius:12px; background:var(--pillLinkBg); color:var(--text); cursor:pointer;
}
.portal-shell-burger span{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative; }
.portal-shell-burger span:before,.portal-shell-burger span:after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; }
.portal-shell-burger span:before{ top:-6px; }
.portal-shell-burger span:after{ top:6px; }
/* Mostra o hambúrguer no mobile (declarado DEPOIS da base para vencer a cascata) */
@media (max-width: 720px){
  .portal-shell-burger{ display:inline-flex; }
}

.portal-drawer-overlay{
  position:fixed; inset:0; z-index:9998; background:rgba(3,6,14,.6);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
body.portal-drawer-open .portal-drawer-overlay{ opacity:1; visibility:visible; }
.portal-drawer{
  position:fixed; top:0; left:0; right:auto; z-index:9999; height:100dvh; width:min(86vw,320px); padding:18px;
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, var(--panel2), var(--field-1));
  border-right:1px solid var(--stroke);
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.22,.61,.36,1); overflow-y:auto;
}
body.portal-drawer-open .portal-drawer{ transform:translateX(0); }
.portal-drawer-top{ display:flex; align-items:center; justify-content:space-between; }
.portal-drawer-top strong{ font-family:"Archivo",sans-serif; font-weight:900; color:var(--green); }
.portal-drawer-close{ min-width:40px; min-height:40px; border:1px solid var(--stroke); border-radius:10px; background:var(--pillLinkBg); color:var(--text); cursor:pointer; }
.portal-drawer-nav{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.portal-drawer-nav a,.portal-drawer-sair{
  display:flex; align-items:center; min-height:46px; padding:10px 14px; border:1px solid var(--stroke); border-radius:12px;
  background:var(--pillLinkBg); color:var(--text); text-decoration:none; font-weight:700; font-family:"Archivo",sans-serif; cursor:pointer;
}
.portal-drawer-nav a.active{ border-color:var(--green-line); background:var(--green-soft); }
.portal-drawer-nav a:hover,.portal-drawer-sair:hover{ border-color:var(--green-line); }
.portal-drawer-sair{ margin-top:6px; border-color:rgba(255,77,79,.4); color:#ffd5d1; background:rgba(255,77,79,.08); }

/* ------------------------------------------------------------------ *
 * 17. Auto-colapso da navegação (anti-quebra em 2 linhas)
 *     Ativado por JS (body.nav-collapsed) quando os links não cabem
 *     em uma linha — ex.: usuário autenticado com mais itens.
 *     Vale para desktop e tablet; no mobile a media query já cuida.
 * ------------------------------------------------------------------ */
/* Navbar pública */
body.nav-collapsed .navbar-fixed .nav-desktop{ display:none !important; }
body.nav-collapsed .navbar-fixed .nav-mobile{ display:block !important; }
body.nav-collapsed .navbar-fixed .nav-right .ctrl{ display:none; }
body.nav-collapsed .navbar-fixed .navbar-inner{ justify-content:flex-start; gap:10px; }
body.nav-collapsed .navbar-fixed .nav-mobile{ order:0; }
body.nav-collapsed .navbar-fixed .brand{ order:1; margin-right:auto; }
body.nav-collapsed .navbar-fixed .nav-right{ order:2; }
/* Cabeçalho autenticado (portal-shell) */
body.nav-collapsed .portal-shell-nav{ display:none !important; }
body.nav-collapsed .portal-shell-burger{ display:inline-flex; }
body.nav-collapsed .portal-shell-brand{ margin-right:auto; }