:root{
  --bg:#0b0d1a; --bg2:#11142a; --card:rgba(255,255,255,.05); --card-bd:rgba(255,255,255,.09);
  --txt:#e8eaf6; --muted:#9aa0c3; --brand1:#6366f1; --brand2:#8b5cf6; --brand3:#ec4899;
  --azul:#3b82f6; --roxa:#8b5cf6; --rosa:#ec4899; --ok:#22c55e; --shadow:0 20px 60px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --bg:#eef1f9; --bg2:#f7f9ff; --card:rgba(255,255,255,.75); --card-bd:rgba(20,25,60,.08);
  --txt:#1a1f3c; --muted:#5b628a; --shadow:0 20px 50px rgba(60,70,120,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--txt);min-height:100vh;
  background:radial-gradient(1200px 600px at 15% -10%,rgba(99,102,241,.22),transparent 60%),
             radial-gradient(1000px 500px at 100% 0,rgba(236,72,153,.16),transparent 55%),
             linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;transition:background .5s,color .3s;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.glass{background:var(--card);border:1px solid var(--card-bd);border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;
  padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:1px}
.brand img{height:34px;filter:drop-shadow(0 4px 12px rgba(139,92,246,.5))}
.topbar-actions{display:flex;align-items:center;gap:10px}

/* Theme toggle */
.theme-toggle{width:52px;height:30px;border-radius:30px;border:1px solid var(--card-bd);
  background:linear-gradient(90deg,var(--brand1),var(--brand3));position:relative;cursor:pointer;flex:0 0 auto}
.theme-toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:transform .35s cubic-bezier(.68,-0.55,.27,1.55);
  display:grid;place-items:center;font-size:13px}
[data-theme="light"] .theme-toggle .knob{transform:translateX(22px)}

/* Buttons */
.btn{position:relative;border:none;cursor:pointer;font-weight:600;color:#fff;padding:13px 22px;
  border-radius:14px;font-size:15px;overflow:hidden;transition:transform .15s,box-shadow .25s;
  background:linear-gradient(120deg,var(--brand1),var(--brand2),var(--brand3));background-size:200% 100%;
  box-shadow:0 8px 24px rgba(99,102,241,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(139,92,246,.5);background-position:100% 0}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--card-bd);color:var(--txt);box-shadow:none}
.btn.ghost:hover{background:var(--card)}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.4),transparent 40%);opacity:0;transition:opacity .4s}
.btn:hover::after{opacity:1}

/* Color buttons */
.color-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.cbtn{border:none;cursor:pointer;padding:22px 12px;border-radius:16px;font-weight:700;font-size:16px;
  color:#fff;position:relative;overflow:hidden;transition:transform .15s,box-shadow .3s;letter-spacing:.5px}
.cbtn small{display:block;font-weight:500;opacity:.85;font-size:12px;margin-top:4px}
.cbtn.azul{background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 10px 26px rgba(59,130,246,.45)}
.cbtn.roxa{background:linear-gradient(135deg,#7c3aed,#8b5cf6);box-shadow:0 10px 26px rgba(139,92,246,.45)}
.cbtn.rosa{background:linear-gradient(135deg,#db2777,#ec4899);box-shadow:0 10px 26px rgba(236,72,153,.45)}
.cbtn:hover{transform:translateY(-3px) scale(1.02)}
.cbtn:active{transform:scale(.97)}
.cbtn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
  transform:scale(0);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* Grid layout */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{padding:22px}
.card h2{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px}

/* Visor / stat display */
.visor{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.10));border:1px solid var(--card-bd)}
.visor .big{font-size:46px;font-weight:800;background:linear-gradient(120deg,var(--brand1),var(--brand3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.visor .lbl{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:2px;margin-top:8px}
.visor::before{content:"";position:absolute;top:-40%;right:-30%;width:80%;height:180%;
  background:radial-gradient(closest-side,rgba(139,92,246,.18),transparent 70%);
  pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.visor>*{position:relative;z-index:1}

/* Distribution bars */
.dist{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.dist-row{display:flex;align-items:center;gap:12px}
.dist-row .name{width:64px;font-size:13px;font-weight:600;color:var(--muted)}
.bar{flex:1;height:14px;border-radius:10px;background:rgba(127,127,127,.15);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:10px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar.azul>span{background:linear-gradient(90deg,#2563eb,#3b82f6)}
.bar.roxa>span{background:linear-gradient(90deg,#7c3aed,#8b5cf6)}
.bar.rosa>span{background:linear-gradient(90deg,#db2777,#ec4899)}
.dist-row .val{width:48px;text-align:right;font-weight:700;font-size:14px}

/* History chips */
.history{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:11px;
  font-weight:700;color:#fff;animation:pop .3s ease}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.chip.azul{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.chip.roxa{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.chip.rosa{background:linear-gradient(135deg,#db2777,#ec4899)}

/* Insight box (honest) */
.insight{margin-top:6px;padding:18px;border-radius:16px;
  background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(99,102,241,.08));
  border:1px solid var(--card-bd)}
.insight .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--ok);background:rgba(34,197,94,.15);padding:4px 10px;border-radius:20px;margin-bottom:10px}
.insight p{color:var(--txt);line-height:1.6;font-size:14px}
.insight .cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.insight .cmp .col{padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--card-bd)}
.insight .cmp h4{font-size:12px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.mini{font-size:13px;display:flex;justify-content:space-between;padding:3px 0}

/* Auth pages */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:100%;max-width:400px;padding:38px 32px}
.auth-card .logo-c{display:flex;justify-content:center;margin-bottom:8px}
.auth-card .logo-c img{height:48px;filter:drop-shadow(0 6px 18px rgba(139,92,246,.5))}
.auth-card .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--card-bd);
  background:var(--card);color:var(--txt);font-size:15px;transition:border .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.auth-card .btn{width:100%;margin-top:6px}
.auth-alt{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--brand2);font-weight:600}
.alert{padding:12px 15px;border-radius:12px;font-size:14px;margin-bottom:16px}
.alert.err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.25)}
.alert.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.25)}

.disclaimer{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.6;text-align:center;
  padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--card-bd)}
.fade-in{animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.row-actions{display:flex;gap:10px;margin-top:16px}

/* ===== Abas Cor / Valor ===== */
.mode-tabs{display:flex;gap:8px;margin-bottom:14px;background:rgba(127,127,127,.1);padding:5px;border-radius:12px}
.mode-tab{flex:1;border:none;cursor:pointer;padding:10px;border-radius:9px;font-weight:600;font-size:14px;
  color:var(--muted);background:transparent;transition:all .25s}
.mode-tab.active{background:linear-gradient(120deg,var(--brand1),var(--brand2));color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,.35)}
.mode-panel{display:none;animation:fade .35s ease}
.mode-panel.active{display:block}

/* ===== Campo de valor ===== */
.value-input{display:flex;gap:10px}
.value-input input{flex:1;padding:16px 18px;border-radius:14px;border:1px solid var(--card-bd);
  background:var(--card);color:var(--txt);font-size:20px;font-weight:700;text-align:center;letter-spacing:1px;
  transition:border .2s,box-shadow .2s}
.value-input input:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.value-input .btn{white-space:nowrap}
.value-hint{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ===== Estatísticas de valor ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat-box{padding:14px 8px;border-radius:14px;text-align:center;
  background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(236,72,153,.07));border:1px solid var(--card-bd)}
.stat-num{display:block;font-size:22px;font-weight:800;
  background:linear-gradient(120deg,var(--brand1),var(--brand3));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.stat-lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:5px}
@media(max-width:520px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Olhinho de senha ===== */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:46px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;
  font-size:18px;user-select:none;opacity:.75;transition:opacity .2s}
.pw-eye:hover{opacity:1}

/* ===== Lembrar-me ===== */
.remember{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);
  margin:2px 0 16px;cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--brand2);cursor:pointer}

/* ===== Modal premium (substitui alert nativo) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(6,8,20,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:999;
  opacity:0;pointer-events:none;transition:opacity .28s ease}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:440px;margin:20px;padding:30px 28px;border-radius:22px;position:relative;
  background:var(--card);border:1px solid var(--card-bd);box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.96);transition:transform .32s cubic-bezier(.2,.9,.25,1.15)}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
.modal .m-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  font-size:28px;animation:mpop .4s cubic-bezier(.68,-0.55,.27,1.55)}
@keyframes mpop{from{transform:scale(0)}to{transform:scale(1)}}
.modal.err   .m-icon{background:rgba(239,68,68,.15);color:#f87171;box-shadow:0 0 30px rgba(239,68,68,.3)}
.modal.ok    .m-icon{background:rgba(34,197,94,.15);color:#4ade80;box-shadow:0 0 30px rgba(34,197,94,.3)}
.modal.info  .m-icon{background:rgba(99,102,241,.15);color:#818cf8;box-shadow:0 0 30px rgba(99,102,241,.3)}
.modal h3{text-align:center;font-size:20px;margin-bottom:8px;color:var(--txt)}
.modal p.m-msg{text-align:center;color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px}
.modal .m-actions{display:flex;justify-content:center}
.modal .btn{min-width:130px}

/* ===== Visores dos modais de padrão ===== */
.pattern-visors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 4px}
.pv{padding:20px 10px;border-radius:18px;text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--card-bd)}
.pv.azul{background:linear-gradient(150deg,rgba(59,130,246,.18),rgba(59,130,246,.05))}
.pv.roxa{background:linear-gradient(150deg,rgba(139,92,246,.18),rgba(139,92,246,.05))}
.pv.rosa{background:linear-gradient(150deg,rgba(236,72,153,.18),rgba(236,72,153,.05))}
.pv .pv-ring{width:74px;height:74px;margin:0 auto 10px;position:relative}
.pv .pv-ring svg{transform:rotate(-90deg)}
.pv .pv-ring .pv-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800}
.pv.azul .pv-pct{color:#60a5fa}.pv.roxa .pv-pct{color:#a78bfa}.pv.rosa .pv-pct{color:#f472b6}
.pv .pv-name{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.pv .pv-shine{position:absolute;top:-40%;right:-30%;width:90%;height:170%;
  background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 70%);pointer-events:none}
.pv>*{position:relative;z-index:1}

/* ===== Faixa de leitura honesta ===== */
.read-band{margin-top:16px;padding:14px 18px;border-radius:14px;font-size:14px;line-height:1.55;
  display:flex;align-items:center;gap:12px;animation:fade .4s ease}
.read-band .rb-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 6px transparent}}
.read-band.green{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.3);color:#86efac}
.read-band.amber{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.3);color:#fcd34d}
.read-band .rb-dot.green{color:#22c55e;background:#22c55e}
.read-band .rb-dot.amber{color:#fbbf24;background:#fbbf24}
.read-band strong{color:var(--txt)}

/* cartões de números (referência textual, não clicável) */
.col .col-hint{display:none}

/* ===== Cards de visores fixos (Depois / Geral) ===== */
.visor-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:820px){.visor-cards{grid-template-columns:1fr}}
.visor-card h2{display:flex;align-items:center;justify-content:space-between}
.visor-card .live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* usa os mesmos .pv/.pattern-visors já definidos para os modais */
.visor-card .read-band{margin-top:14px}
.visor-card .pv-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:20px}