/* LOTOMASTER AI PREMIUM — base visual para Cloudflare Pages
   Fase grátis: HTML/CSS/JS puro. Preparado para virar premium depois. */

:root{
  --bg:#050b18;
  --bg2:#071126;
  --panel:#0d1830;
  --panel2:#111c35;
  --line:rgba(246,183,45,.32);
  --line-soft:rgba(148,163,184,.18);
  --gold:#f6b72d;
  --gold2:#f59e0b;
  --blue:#1d5ecb;
  --cyan:#35d7ff;
  --green:#22c55e;
  --red:#ef4444;
  --text:#eef4ff;
  --muted:#9aa8c1;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(circle at 80% 12%, rgba(53,215,255,.16), transparent 30%),
    radial-gradient(circle at 12% 16%, rgba(246,183,45,.12), transparent 28%),
    linear-gradient(135deg,#08142b 0%,#040914 52%,#020610 100%);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button,a,input{font:inherit}

.container{
  width:min(1180px, calc(100vw - 32px));
  margin-inline:auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(4,9,20,.76);
  border-bottom:1px solid rgba(246,183,45,.16);
}

.nav{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.logo-mark{
  width:46px;
  height:46px;
  border-radius:14px;
  background:
    radial-gradient(circle at 70% 28%, rgba(53,215,255,.9), transparent 20%),
    linear-gradient(135deg,#f6b72d,#0e7490 52%,#071126);
  border:1px solid rgba(246,183,45,.48);
  box-shadow:0 0 24px rgba(53,215,255,.18);
  position:relative;
}

.logo-mark::after{
  content:"AI";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:950;
  color:#061126;
  letter-spacing:-1px;
}

.brand strong{
  display:block;
  font-size:17px;
  line-height:1;
  letter-spacing:.3px;
}

.brand span{
  display:block;
  margin-top:3px;
  font-size:12px;
  letter-spacing:4px;
  color:var(--gold);
  font-weight:800;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:22px;
  color:#d6deee;
  font-size:14px;
  font-weight:700;
}

.nav-links a{
  opacity:.9;
  position:relative;
}

.nav-links a:hover,
.nav-links a.active{color:#fff;opacity:1}

.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:3px;
  border-radius:999px;
  background:var(--gold);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 20px;
  border-radius:12px;
  border:1px solid rgba(246,183,45,.45);
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, filter .16s ease, border-color .16s ease;
}

.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(135deg,#ffe08a,#f6b72d 48%,#c98200);
  color:#071126;
  box-shadow:0 16px 35px rgba(246,183,45,.24);
}

.btn-secondary{
  background:rgba(7,17,38,.78);
  color:#fff;
}

.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(148,163,184,.20);
  color:#dce6fb;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(246,183,45,.08);
  color:#fcd978;
  font-weight:900;
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
}

.card{
  background:linear-gradient(180deg,rgba(17,28,53,.84),rgba(5,11,24,.88));
  border:1px solid rgba(246,183,45,.22);
  border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  border-radius:9px;
  color:#061126;
  background:linear-gradient(135deg,#ffe08a,#f6b72d);
  font-weight:950;
}

.footer{
  margin-top:36px;
  border-top:1px solid rgba(246,183,45,.13);
  background:rgba(2,6,16,.54);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:28px;
  padding:34px 0;
  color:#b7c3d9;
}

.footer h4{
  margin:0 0 12px;
  color:#fff;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.footer p,.footer a{
  display:block;
  margin:7px 0;
  font-size:13px;
  color:#9aa8c1;
}

.mobile-menu{
  display:none;
}

@media(max-width:900px){
  .nav{min-height:66px}
  .nav-links,.nav-actions{display:none}
  .mobile-menu{display:inline-flex}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .container{width:min(100vw - 22px, 1180px)}
  .footer-grid{grid-template-columns:1fr}
}


/* =========================
   LOTOMASTER AI V1.1 refinements
   ========================= */
.version-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(53,215,255,.26);
  background:rgba(53,215,255,.07);
  color:#b9efff;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.35px;
  text-transform:uppercase;
}

.glow-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, rgba(246,183,45,.58), rgba(53,215,255,.42), transparent);
  margin:22px 0;
}

.premium-note{
  border:1px solid rgba(246,183,45,.24);
  background:linear-gradient(135deg,rgba(246,183,45,.09),rgba(53,215,255,.05));
  border-radius:18px;
  padding:16px;
  color:#dbe7fa;
}

.premium-note b{color:#fcd978}

@media(max-width:900px){
  .brand{min-width:auto}
  .brand strong{font-size:14px}
  .brand span span{letter-spacing:2px;font-size:10px}
}


/* =========================
   V1.3 — Tipografia e identidade alinhadas ao código principal
   Fonte principal do motor Lotofácil:
   "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
   ========================= */
:root{
  --font-ui:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono:Consolas, "Courier New", monospace;

  /* Paleta herdada do código principal */
  --bg:#071126;
  --bg-2:#0b1733;
  --panel:#111c35;
  --panel-2:#17233e;
  --line:rgba(245,158,11,.35);
  --line-soft:rgba(148,163,184,.16);
  --gold:#f6b72d;
  --gold2:#f59e0b;
  --text:#eef4ff;
  --muted:#9aa8c1;
  --blue:#1d5ecb;
  --green:#03933f;
  --red:#d90429;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

body,
button,
input,
select,
textarea{
  font-family:var(--font-ui)!important;
}

code,
pre,
.kpi strong,
.big-number,
.metric strong,
.kbd{
  font-family:var(--font-mono)!important;
}

body{
  font-weight:500;
  letter-spacing:0;
}

h1,h2,h3,h4,
.brand strong,
.nav-links a,
.btn,
.badge,
.version-chip{
  font-family:var(--font-ui)!important;
  font-weight:700!important;
}

.hero h1{
  font-weight:700!important;
  letter-spacing:-1.6px!important;
}

.big-number{
  font-weight:700!important;
}

.card{
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(24,36,64,.96),rgba(12,22,45,.98))!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
}

.btn{
  border-radius:999px!important;
  font-weight:700!important;
  text-shadow:none!important;
}

.btn-primary{
  background:linear-gradient(135deg,#ffd865,#f59e0b)!important;
  color:#091326!important;
  border:1px solid rgba(255,216,101,.50)!important;
  box-shadow:0 10px 18px rgba(245,158,11,.20)!important;
}

.btn-secondary,
.btn-ghost{
  background:#111c35!important;
  color:#dce6fb!important;
  border:1px solid #2a3a5f!important;
}

.logo-mark{
  border-radius:9px!important;
}

.nav-links{
  font-weight:700!important;
}

.footer{
  background:rgba(4,16,38,.62)!important;
}

/* Harmonização de foco/acessibilidade com o motor principal */
:focus-visible{
  outline:3px solid rgba(255,194,71,.95)!important;
  outline-offset:2px!important;
}


/* V1.5 — Sistema aberto: remove visual de bloqueio, mantém tudo acessível */
.open-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(34,197,94,.32);
  background:rgba(34,197,94,.09);
  color:#86efac;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}