/* ===================================================================
   LUCKYPASS — Sistema de promoções "compre e concorra"
   Design tokens + componentes. Mobile-only, tema premium/K-pop.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- paleta COU KR Store ---
     Roxo escuro:  #1E1576  (fundo principal)
     Roxo médio:   #2D1F9E  (surfaces)
     Roxo claro:   #3D2CA8  (cards, itens)
     Verde limão:  #8DC63F  (CTA primário, ações)
     Verde escuro: #6AAB2E  (hover/sombra verde)
     Branco:       #FFFFFF  (texto principal)
     Off-white:    #E8E4F8  (texto dimmed)
     Cinza roxo:   #7B6DB0  (texto faint)
  */

  /* --- cor --- */
  --bg:           #100c69;
  --bg-soft:      #0D0A40;
  --surface:      #1E1576;
  --surface-2:    #2D1F9E;
  --surface-3:    #3D2CA8;
  --border:       rgba(255,255,255,0.12);
  --border-soft:  rgba(255,255,255,0.06);


  --text:         #FFFFFF;
  --text-dim:     #E8E4F8;
  --text-faint:   #9B8FCC;

  /* Verde limão = ação primária (botão "Veja nossos produtos", "Fazer parte") */
  --primary:      #8DC63F;
  --primary-2:    #AADD55;
  /* Roxo médio para acento secundário */
  --pink:         #B07CFF;
  /* Dourado mantido só para tickets vencedores */
  --gold:         #F2C572;
  --blue:         #5B8DEF;

  --success:      #8DC63F;
  --success-bg:   rgba(141,198,63,0.15);
  --warning:      #F2B705;
  --warning-bg:   rgba(242,183,5,0.14);
  --danger:       #FF5C7A;
  --danger-bg:    rgba(255,92,122,0.14);

  /* Gradiente hero: roxo COU → verde limão */
  --grad-hero:    linear-gradient(135deg,#2ca841 0%, #1f9e3b 55%, #0c6d2c 100%);
  --grad-gold:    linear-gradient(135deg,#8DC63F 0%, #6AAB2E 100%);
  --grad-card:    linear-gradient(160deg, rgba(61,44,168,0.5), rgba(141,198,63,0.08));

  /* --- type --- */
  --f-display: 'Unbounded', sans-serif;
  --f-body: 'Plus Jakarta Sans', sans-serif;
  --f-mono: 'Space Mono', monospace;

  /* --- layout --- */
  --frame-w: 412px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 30px;
  --topbar-h: 58px;
  --nav-h: 74px;
  --safe-b: 14px;
  
}

*{box-sizing:border-box;}
html{
  height:100%;
  /* position:fixed no html = trava bounce scroll do Safari/iOS sem quebrar inputs de arquivo.
     Se colocar position:fixed no body, o evento 'change' do input[type=file] não propaga
     corretamente em mobile e o comprovante "some" após selecionar. */
  position:fixed;
  width:100%;
  overflow:hidden;
}
body{
  height:100%;
  margin:0;
  overflow:hidden; /* impede scroll duplo; sem position:fixed para não travar file inputs */
  font-family:var(--f-body);
  background:var(--bg-soft);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:var(--f-body);}
input,textarea,select{font-family:var(--f-body);}
a{color:inherit; text-decoration:none;}
::selection{background:var(--primary); color:#fff;}

/* esconder scrollbars no shell, manter funcional */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}

/* ===================== SHELL / FRAME ===================== */
.page-bg{
  height:100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(61,44,168,0.45), transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(141,198,63,0.15), transparent 50%),
    var(--bg-soft);
}

/* App preenchendo a tela real, sem moldura de celular (sem notch, sombra ou status bar falsa) */
.app-frame{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Em telas largas (desktop), o conteúdo continua com largura de mobile — apenas
   centralizado por uma linha sutil, sem nenhum "case" de celular ao redor. */
@media (min-width:560px){
  .app-frame{
    max-width:var(--frame-w);
    margin:0 auto;
    border-left:1px solid var(--border-soft);
    border-right:1px solid var(--border-soft);
  }
}

/* ===================== TOPBAR ===================== */
.topbar{
  flex-shrink:0;
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;
  position:relative;
  z-index:30;
}
.topbar-side{display:flex; align-items:center; gap:10px; min-width:40px;}
.topbar-title{
  font-family:var(--f-display); font-weight:700; font-size:17px;
  flex:1; text-align:center; color:var(--text);
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer; flex-shrink:0;
  transition:transform .15s ease, background .15s ease;
}
.icon-btn:active{transform:scale(0.9); background:var(--surface-2);}
.avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--grad-hero);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:14px; font-weight:700; color:#fff;
  flex-shrink:0; cursor:pointer;
  border:2px solid rgba(255,255,255,0.15);
}

/* ===================== SCREEN CONTAINER ===================== */
.screen-container{
  flex:1;
  min-height:0; /* essencial no flexbox: sem isso o item cresce além do .app-frame */
  overflow-y:auto;
  overscroll-behavior:contain; /* impede bounce vazar pro shell */
  -webkit-overflow-scrolling:touch;
  padding:4px 18px calc(var(--nav-h) + 22px);
  position:relative;
  animation:screenIn .28s ease;
}
@keyframes screenIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.screen-container.no-nav-pad{padding-bottom:28px;}

.section-gap{margin-top:26px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.section-head h3{font-size:15px; color:var(--text);}
.section-head .link-sm{font-size:12.5px; color:var(--primary-2); font-weight:700; cursor:pointer;}
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px; display:block;
}

/* ===================== BOTTOM NAV ===================== */
.bottomnav{
  flex-shrink:0;
  display:flex;
  padding:8px 10px calc(var(--safe-b) + env(safe-area-inset-bottom));
  background:rgba(13,10,64,0.92);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--border-soft);
  position:relative; z-index:30;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 2px; border-radius:14px; cursor:pointer; border:none; background:none;
  color:var(--text-faint); transition:color .15s ease, transform .15s ease;
}
.nav-item svg{width:21px; height:21px; transition:transform .15s ease;}
.nav-item span{font-size:10.8px; font-weight:700;}
.nav-item.active{color:var(--text);}
.nav-item.active svg{transform:translateY(-1px); color:var(--primary); filter:drop-shadow(0 0 8px rgba(141,198,63,.70));}
.nav-item:active{transform:scale(0.93);}
.nav-fab-spacer{width:0;}

/* ===================== BOTÕES ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; border-radius:16px; border:none;
  font-family:var(--f-body); font-weight:700; font-size:14.5px;
  cursor:pointer; transition:transform .12s ease, opacity .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(0.97);}
.btn-block{width:100%;}
.btn-auto{width:auto;}
.btn-primary{
  background:var(--grad-hero); color:#fff;
  box-shadow:0 10px 24px -8px rgba(155, 255, 15, 0);
}
.btn-primary:disabled{opacity:.45; box-shadow:none;}
.btn-secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.btn-ghost{background:transparent; color:var(--primary-2); padding:10px;}
.btn-danger{background:var(--danger-bg); color:var(--danger); border:1px solid rgba(255,92,122,.3);}
.btn-success{background:var(--success-bg); color:var(--success); border:1px solid rgba(54,211,153,.3);}
.btn-gold{background:var(--grad-gold); color:#0D2200;}
.btn-sm{padding:9px 14px; font-size:12.5px; border-radius:11px;}
.btn-icon-only{width:46px; padding:0; flex-shrink:0;}

/* ===================== INPUTS ===================== */
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--text-dim);
  margin-bottom:7px; letter-spacing:.01em;
}
.field .hint{font-size:11.5px; color:var(--text-faint); margin-top:6px; display:block;}
.field .error-msg{font-size:11.5px; color:var(--danger); margin-top:6px; display:block; font-weight:600;}
.input, .textarea, .select{
  width:100%; background:var(--surface); border:1.5px solid var(--border);
  color:var(--text); padding:14px 14px; border-radius:13px; font-size:14.5px;
  outline:none; transition:border-color .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder{color:var(--text-faint);}
.input:focus, .textarea:focus, .select:focus{border-color:var(--primary);}
.input.invalid{border-color:var(--danger);}
.textarea{resize:vertical; min-height:90px;}
.input-prefix-wrap{position:relative;}
.input-prefix{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-faint); font-weight:700; font-size:14.5px; pointer-events:none;
}
.input-prefix-wrap .input{padding-left:32px;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:14px;}
.checkbox-row input{margin-top:3px; width:17px; height:17px; accent-color:var(--primary); flex-shrink:0;}
.checkbox-row .ctext{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
.checkbox-row .ctext a{color:var(--primary-2); font-weight:700;}

.select-wrap{position:relative;}
.select{appearance:none; padding-right:36px;}
.select-wrap::after{
  content:'›'; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(90deg);
  color:var(--text-faint); font-size:14px; pointer-events:none;
}

/* upload */
.upload-box{
  border:1.5px dashed var(--border); border-radius:14px; padding:18px;
  display:flex; align-items:center; gap:12px; cursor:pointer; background:var(--surface);
  transition:border-color .15s ease;
}
.upload-box:hover{border-color:var(--primary);}
.upload-box .upload-icon{
  width:42px; height:42px; border-radius:11px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--primary-2);
}
.upload-box .upload-text strong{display:block; font-size:13.5px; color:var(--text);}
.upload-box .upload-text span{font-size:11.5px; color:var(--text-faint);}
.upload-preview{
  width:100%; border-radius:14px; margin-top:10px; max-height:160px; object-fit:cover;
  border:1px solid var(--border); display:block;
}

/* ===================== CARDS ===================== */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:18px;
}
.card-flat{background:var(--surface); border-radius:var(--radius-m); padding:14px;}

/* hero da promoção */
.promo-hero{
  position:relative; border-radius:var(--radius-xl); overflow:hidden; padding:22px;
  background:var(--grad-hero); min-height:230px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 18px 40px -14px rgba(61,44,168,0.65);
}
.promo-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% -10%, rgba(255,255,255,0.35), transparent 55%);
}
.promo-hero::after{
  content:''; position:absolute; right:-30px; bottom:-40px; width:160px; height:160px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.promo-hero-top{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start;}
/* Overlay sobre a capa — garante legibilidade do texto sobre qualquer foto */
.promo-hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(10,8,60,0.72) 0%, rgba(10,8,60,0.50) 50%, rgba(10,8,60,0.35) 100%);
}
.promo-chip{
  background:rgba(0,0,0,0.28); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:6px 11px; border-radius:20px; text-transform:uppercase; backdrop-filter:blur(4px);
  display:flex; align-items:center; gap:5px;
}
.promo-chip.live span{width:6px; height:6px; border-radius:50%; background:#7CFFB2; box-shadow:0 0 8px #7CFFB2; display:inline-block; animation:pulseDot 1.6s infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.promo-hero h2{position:relative; z-index:2; color:#fff; font-size:23px; line-height:1.18; margin-top:16px; max-width:90%;}
.promo-hero .promo-sub{position:relative; z-index:2; color:rgba(255,255,255,0.82); font-size:12.5px; margin-top:8px; font-weight:600;}
.promo-hero-bottom{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-top:18px;}
.promo-hero .countdown{color:#fff; font-size:11.5px; font-weight:700; background:rgba(0,0,0,0.22); padding:8px 12px; border-radius:12px;}
.promo-hero .btn{width:auto;}

.promo-card-mini{
  border-radius:var(--radius-m); padding:14px; background:var(--surface); border:1px solid var(--border);
  display:flex; gap:12px; align-items:center; cursor:pointer;
}
.promo-thumb{
  width:54px; height:54px; border-radius:13px; background:var(--grad-hero); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
  overflow:hidden;
}
.promo-thumb-img{ background:none; }
.promo-thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:13px; }
.promo-card-mini .pm-title{font-size:13.5px; font-weight:700; color:var(--text);}
.promo-card-mini .pm-sub{font-size:11.5px; color:var(--text-faint); margin-top:3px;}

/* quick actions grid */
.quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.quick-action{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:transform .15s ease, border-color .15s ease;
}
.quick-action:active{transform:scale(0.96);}
.quick-action .qa-icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
}
.quick-action .qa-title{font-size:13px; font-weight:700; color:var(--text);}
.quick-action .qa-sub{font-size:11px; color:var(--text-faint);}

/* ===================== TICKET (componente assinatura) ===================== */
.ticket{
  position:relative;
  background:var(--grad-card);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  display:flex;
  overflow:hidden;
  isolation:isolate;
}
.ticket-main{flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:6px; min-width:0;}
.ticket-stub{
  width:84px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-left:1.5px dashed rgba(255,255,255,0.22); position:relative; padding:10px 6px; text-align:center;
  background:rgba(255,255,255,0.03);
}
.ticket-stub::before, .ticket-stub::after{
  content:''; position:absolute; left:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--bg-soft); z-index:3;
}
.ticket-stub::before{top:-9px;}
.ticket-stub::after{bottom:-9px;}
.ticket-num{font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--text); letter-spacing:.03em;}
.ticket-num-label{font-size:8.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; font-weight:700;}
.ticket-promo-name{font-size:13px; font-weight:700; color:var(--text); line-height:1.3;}
.ticket-meta{font-size:10.5px; color:var(--text-faint); font-weight:600;}
.ticket.winner{border-color:rgba(242,197,114,0.55); box-shadow:0 0 0 1px rgba(242,197,114,.3), 0 14px 30px -10px rgba(242,197,114,0.35);}
.ticket.winner .ticket-num{color:var(--gold);}
.ticket.big{border-radius:24px;}
.ticket.big .ticket-main{padding:24px 18px;}
.ticket.big .ticket-num{font-size:26px;}
.ticket.big .ticket-stub{width:104px;}

/* ===================== BADGES / STATUS ===================== */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:5px 10px; border-radius:20px; letter-spacing:.02em; white-space:nowrap;
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.badge-pendente{background:var(--warning-bg); color:var(--warning);}
.badge-aprovada{background:var(--success-bg); color:var(--success);}
.badge-reprovada{background:var(--danger-bg); color:var(--danger);}
.badge-ativa{background:var(--success-bg); color:var(--success);}
.badge-encerrada{background:rgba(255,255,255,0.08); color:var(--text-faint);}
.badge-rascunho{background:rgba(91,141,239,0.16); color:var(--blue);}
.badge-valido{background:var(--success-bg); color:var(--success);}
.badge-cancelado{background:rgba(255,255,255,0.08); color:var(--text-faint);}

/* ===================== LISTAS / ROWS ===================== */
.list{display:flex; flex-direction:column; gap:10px;}
.row{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:15px; padding:13px 14px; cursor:pointer; transition:border-color .15s ease, transform .12s ease;
}
.row:active{transform:scale(0.985);}
.row-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:16px;
}
.row-body{flex:1; min-width:0;}
.row-title{font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-trail{flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.row-trail .amount{font-family:var(--f-mono); font-size:12.5px; font-weight:700; color:var(--text);}
.chevron{color:var(--text-faint); font-size:16px;}

/* ===================== SEGMENTED CONTROL / FILTROS ===================== */
.segmented{
  display:flex; gap:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:5px; overflow-x:auto;
}
.segmented::-webkit-scrollbar{display:none;}
.seg-item{
  flex:1; text-align:center; padding:9px 10px; border-radius:10px; font-size:12px; font-weight:700;
  color:var(--text-faint); cursor:pointer; white-space:nowrap; transition:all .15s ease; border:none; background:none;
}
.seg-item.active{background:var(--surface-3); color:var(--text);}

.chip-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;}
.chip-row::-webkit-scrollbar{display:none;}
.filter-chip{
  flex-shrink:0; padding:8px 14px; border-radius:20px; font-size:12px; font-weight:700;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
}
.filter-chip.active{background:var(--primary); color:#fff; border-color:transparent;}

/* ===================== DASHBOARD ADMIN ===================== */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:15px;
  display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden;
}
.stat-card .stat-icon{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.stat-card .stat-value{font-family:var(--f-display); font-size:24px; font-weight:700; color:var(--text);}
.stat-card .stat-label{font-size:11.5px; color:var(--text-faint); font-weight:600;}
.stat-card.wide{grid-column:1 / span 2; flex-direction:row; align-items:center; justify-content:space-between;}

/* ===================== MODAL / BOTTOM SHEET ===================== */
.modal-overlay{
  position:absolute; inset:0; background:rgba(3,2,20,0.72); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center; z-index:200; opacity:0;
  transition:opacity .2s ease; pointer-events:none;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-sheet{
  width:100%; max-height:88%; background:var(--bg); border-radius:26px 26px 0 0;
  border-top:1px solid var(--border); padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
  overflow-y:auto; box-shadow:0 -20px 60px -10px rgba(0,0,0,.5);
}
.modal-overlay.open .modal-sheet{transform:translateY(0);}
.modal-grabber{width:38px; height:4px; background:var(--border); border-radius:4px; margin:6px auto 16px;}
.modal-title{font-size:18px; margin-bottom:4px;}
.modal-sub{font-size:12.5px; color:var(--text-faint); margin-bottom:18px;}
.modal-actions{display:flex; gap:10px; margin-top:18px;}

/* sheet pequeno central (confirm) */
.confirm-overlay{
  position:absolute; inset:0; background:rgba(3,2,20,0.72); display:flex; align-items:center;
  justify-content:center; z-index:210; padding:30px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.confirm-overlay.open{opacity:1; pointer-events:auto;}
.confirm-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:22px; width:100%;
  text-align:center; transform:scale(.92); transition:transform .2s ease;
}
.confirm-overlay.open .confirm-box{transform:scale(1);}
.confirm-icon{width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:22px;}
.confirm-box h3{font-size:16px; margin-bottom:6px;}
.confirm-box p{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
.confirm-box .modal-actions{margin-top:18px;}

/* ===================== TOAST ===================== */
.toast-root{position:fixed; top:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; z-index:999; pointer-events:none;}
.toast{
  margin-top:16px; padding:13px 18px; border-radius:14px; background:var(--surface-3); border:1px solid var(--border);
  color:var(--text); font-size:13px; font-weight:700; display:flex; align-items:center; gap:10px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5); transform:translateY(-30px); opacity:0;
  transition:all .25s ease; max-width:88%;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast.success{border-color:rgba(54,211,153,.4);}
.toast.error{border-color:rgba(255,92,122,.4);}
.toast .t-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.toast.success .t-dot{background:var(--success);}
.toast.error .t-dot{background:var(--danger);}
.toast.info .t-dot{background:var(--primary-2);}

/* ===================== EMPTY STATE ===================== */
.empty-state{
  text-align:center; padding:50px 20px; color:var(--text-faint);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-state .es-icon{
  width:62px; height:62px; border-radius:50%; background:var(--surface); display:flex; align-items:center;
  justify-content:center; font-size:26px;
}
.empty-state h4{color:var(--text-dim); font-size:14.5px;}
.empty-state p{font-size:12.5px; max-width:240px; line-height:1.5;}

/* ===================== AUTH ===================== */
.auth-wrap{padding-top:18px;}
.auth-logo{
  width:62px; height:62px; border-radius:18px; background:var(--grad-hero); display:flex; align-items:center;
  justify-content:center; font-family:var(--f-display); font-weight:800; color:#fff; font-size:22px; margin-bottom:18px;
  box-shadow:0 14px 30px -10px rgba(61,44,168,.70);
}
.auth-title{font-size:25px; margin-bottom:6px;}
.auth-sub{font-size:13px; color:var(--text-faint); margin-bottom:26px; line-height:1.5;}
.auth-switch{text-align:center; margin-top:20px; font-size:13px; color:var(--text-faint);}
.auth-switch a{color:var(--primary-2); font-weight:800;}
.demo-box{
  margin-top:22px; border:1px dashed var(--border); border-radius:14px; padding:14px; background:var(--surface);
}
.demo-box .dtitle{font-size:11px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}
.demo-row{display:flex; gap:8px;}

/* ===================== PERFIL ===================== */
.profile-head{display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px 0 22px;}
.profile-avatar{
  width:78px; height:78px; border-radius:50%; background:var(--grad-hero); display:flex; align-items:center;
  justify-content:center; font-family:var(--f-display); font-size:26px; font-weight:800; color:#fff; margin-bottom:14px;
  border:3px solid rgba(255,255,255,.12);
}
.profile-head h2{font-size:18px;}
.profile-head p{font-size:12.5px; color:var(--text-faint); margin-top:3px;}
.menu-list .row{cursor:pointer;}

/* ===================== UTIL ===================== */
.flex{display:flex;}
.flex-col{display:flex; flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}
.gap-10{gap:10px;}
.gap-12{gap:12px;}
.muted{color:var(--text-faint);}
.dim{color:var(--text-dim);}
.bold{font-weight:700;}
.center{text-align:center;}
.mt-4{margin-top:4px;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mb-0{margin-bottom:0;}
.w-100{width:100%;}
.divider{height:1px; background:var(--border); margin:18px 0;}
.legal-note{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:12px; padding:12px 14px; font-size:11.5px; color:var(--text-dim); line-height:1.6;
}
.fab{
  position:absolute; right:18px; bottom:calc(var(--nav-h) + 16px); width:54px; height:54px; border-radius:50%;
  background:var(--grad-gold); color:#0D2200; display:flex; align-items:center; justify-content:center; font-size:24px;
  border:none; cursor:pointer; box-shadow:0 14px 30px -8px rgba(141,198,63,.60); z-index:25;
}
.fab:active{transform:scale(0.92);}
.switch{
  position:relative; width:46px; height:26px; border-radius:14px; background:var(--surface-2);
  border:1px solid var(--border); cursor:pointer; flex-shrink:0; transition:background .2s ease;
}
.switch::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--text-faint); transition:all .2s ease;
}
.switch.on{background:var(--success-bg); border-color:rgba(54,211,153,.4);}
.switch.on::after{left:23px; background:var(--success);}

.skeleton{
  background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:12px;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.winner-glow{
  position:relative; padding:30px 20px; border-radius:26px; text-align:center; overflow:hidden;
  background:radial-gradient(circle at 50% 0%, rgba(141,198,63,0.20), transparent 60%), var(--surface);
  border:1px solid rgba(141,198,63,0.25);
}
.winner-glow .wg-icon{font-size:38px; margin-bottom:6px;}
.confetti-row{display:flex; justify-content:center; gap:6px; margin-bottom:10px; font-size:18px;}

/* ===================== MEMÓRIA DA APURAÇÃO ===================== */
.mem-header{ margin-bottom:16px; }
.mem-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; margin-bottom:12px;
}
.mem-card-title{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-faint); margin-bottom:10px;
}
.mem-premios{ display:flex; flex-direction:column; gap:6px; }
.mem-premio{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border-radius:8px; background:var(--surface-2);
}
.mem-premio-destaque{
  background:rgba(242,197,114,.12); border:1px solid rgba(242,197,114,.3);
}
.mem-ordinal{ font-size:11px; color:var(--text-faint); }
.mem-badge-lf{
  display:inline-block; background:var(--gold); color:#1a1100;
  font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px;
  vertical-align:middle; margin-left:4px; text-transform:uppercase;
}
.mem-num-lf{ font-family:var(--f-mono); font-size:17px; font-weight:700; letter-spacing:2px; }
.mem-sub{ font-size:12px; color:var(--text-faint); line-height:1.5; }
.mem-numero-sorteado{
  font-family:var(--f-mono); font-size:32px; font-weight:700;
  letter-spacing:6px; text-align:center; padding:14px;
  background:var(--surface-2); border-radius:10px; margin:8px 0;
  color:var(--gold);
}
.mem-alert{
  border-radius:8px; padding:9px 12px; font-size:12.5px; line-height:1.4;
}
.mem-alert-ok{ background:var(--success-bg); color:var(--success); border:1px solid rgba(54,211,153,.25); }
.mem-alert-warn{ background:rgba(251,191,36,.1); color:#d97706; border:1px solid rgba(251,191,36,.3); }
.mem-alert-info{ background:rgba(99,102,241,.08); color:var(--accent); border:1px solid rgba(99,102,241,.2); }
.mem-table{
  width:100%; border-collapse:collapse; margin-top:4px;
}
.mem-table th{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-faint); padding:6px 8px; text-align:left;
  border-bottom:1px solid var(--border);
}
.mem-table td{ padding:7px 8px; border-bottom:1px solid var(--border); font-size:13px; }
.mem-table tr:last-child td{ border-bottom:none; }
.mem-row-winner td{ background:rgba(242,197,114,.1); font-weight:700; color:var(--gold); }
.mem-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px;
}
.mem-row:last-child{ border-bottom:none; }
.mem-row span{ color:var(--text-faint); }
.mem-row strong{ text-align:right; max-width:60%; }
.mem-result-card{
  background:rgba(54,211,153,.07); border:2px solid var(--success);
  border-radius:16px; padding:18px 16px; margin:12px 0;
}
.mem-result-card.mem-result-none{
  background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.5);
}
.mem-result-title{
  font-size:13px; font-weight:700; text-align:center;
  letter-spacing:.3px; margin-bottom:12px; color:var(--success);
}
.mem-result-none .mem-result-title{ color:#d97706; }
.mem-result-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.mem-result-row:last-child{ border-bottom:none; }
.mem-result-row span{ color:var(--text-faint); font-size:11px; }
.mem-result-row strong{ font-family:var(--f-mono); }
.mem-result-sep{ text-align:center; color:var(--text-faint); font-size:18px; padding:2px 0; }
.mem-integridade{
  font-size:11.5px; color:var(--text-faint); line-height:1.6;
  border-top:2px solid var(--border); border-radius:10px;
  background:var(--surface-2);
}