:root{
  --bg:#eef3ff;
  --bg2:#f9fbff;
  --card:rgba(255,255,255,.72);
  --text:#10203a;
  --muted:#64748b;
  --line:rgba(15,23,42,.08);
  --primary:#2457ff;
  --primary2:#7b8cff;
  --green:#11b66f;
  --red:#ef4444;
  --gold:#ffbf47;
  --shadow:0 20px 60px rgba(36,87,255,.12);
}

html[data-theme="dark"]{
  --bg:#07111f;
  --bg2:#0c1b2f;
  --card:rgba(13,23,40,.78);
  --text:#f3f7ff;
  --muted:#98a8c7;
  --line:rgba(255,255,255,.08);
  --primary:#7ea5ff;
  --primary2:#9e7bff;
  --green:#22c55e;
  --red:#ff5f6d;
  --gold:#ffd56b;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

/* CORREÇÃO DO MODAL */
[hidden]{
  display:none !important;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  min-height:100vh;
}

a{
  text-decoration:none;
  color:inherit;
}

button,input{
  font:inherit;
}

.bg-orbs:before,
.bg-orbs:after{
  content:"";
  position:fixed;
  inset:auto;
  z-index:-1;
  border-radius:50%;
  filter:blur(45px);
  opacity:.35;
}

.bg-orbs:before{
  width:320px;
  height:320px;
  background:#6f9bff;
  top:40px;
  left:-70px;
}

.bg-orbs:after{
  width:360px;
  height:360px;
  background:#b07dff;
  right:-90px;
  top:180px;
}

.app-shell{
  padding:20px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1100px;
  margin:0 auto 20px;
}

.public-topbar{
  padding-inline:4px;
}

.mobile-app-card{
  max-width:760px;
  margin:0 auto;
  display:grid;
  gap:18px;
}

.glass{
  background:var(--card);
  backdrop-filter:blur(20px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.hero-card,
.form-card,
.vault-card,
.panel-card,
.compact-page{
  border-radius:28px;
  padding:24px;
}

.logo-wrap{
  text-align:center;
}

.site-logo{
  max-width:180px;
  max-height:88px;
  object-fit:contain;
  filter:none;
}

html[data-theme="dark"] .site-logo{
  filter:brightness(1.85) contrast(1.1) saturate(.9);
}

.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--primary);
  text-align:center;
}

.hero-card h1,
.compact-page h1{
  margin:8px 0 8px;
  font-size:clamp(1.8rem,4vw,3rem);
  text-align:center;
}

.hero-subtitle{
  text-align:center;
  line-height:1.6;
  color:var(--muted);
  max-width:620px;
  margin:0 auto 18px;
}

.promotion-display{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.amount-card,
.expiry-card,
.empty-state{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08));
}

.amount-card strong,
.expiry-card strong{
  display:block;
  font-size:clamp(1.5rem,3vw,2.4rem);
  margin-top:8px;
}

.amount-card small,
.expiry-card small,
.empty-state,
.alert,
.muted-block,
.history-item small{
  color:var(--muted);
}

.expiry-progress{
  height:10px;
  background:rgba(127,127,127,.12);
  border-radius:999px;
  margin-top:12px;
  overflow:hidden;
}

.expiry-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--primary));
  box-shadow:0 0 20px rgba(255,191,71,.5);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.section-head.compact{
  align-items:flex-start;
}

.section-head h2,
.section-head h1{
  margin:0;
}

.status-chip,
.badge,
.icon-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:.87rem;
  background:rgba(255,255,255,.18);
}

.badge.green{
  background:rgba(17,182,111,.14);
  color:var(--green);
}

.badge.red{
  background:rgba(239,68,68,.14);
  color:var(--red);
}

.stack-form,
.grid-form{
  display:grid;
  gap:14px;
}

.grid-form{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.full{
  grid-column:1/-1;
}

label span{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}

input{
  width:100%;
  padding:15px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.38);
  color:var(--text);
  outline:none;
  text-transform:uppercase;
}

input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(36,87,255,.12);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn{
  border:none;
  border-radius:16px;
  padding:14px 18px;
  font-weight:700;
  cursor:pointer;
  transition:.2s transform,.2s opacity;
}

.primary-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
}

.ghost-btn,
.icon-btn,
.icon-pill{
  background:rgba(255,255,255,.22);
  border:1px solid var(--line);
  color:var(--text);
}

.danger-btn{
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;
}

.primary-btn:hover,
.ghost-btn:hover,
.danger-btn:hover,
.icon-btn:hover{
  transform:translateY(-1px);
}

.share-box{
  margin-top:16px;
  padding:16px;
  border-radius:20px;
  border:1px dashed var(--line);
}

.copy-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.copy-line strong{
  font-size:1.1rem;
  letter-spacing:.12em;
}

.vault-card{
  overflow:hidden;
}

.vault-visual{
  position:relative;
  height:250px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:radial-gradient(circle at top,rgba(126,165,255,.2),transparent 60%);
}

.gear{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:50%;
  border:12px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 10px rgba(36,87,255,.12);
}

.gear:before,
.gear:after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:10px dashed rgba(255,191,71,.55);
}

.gear-a{
  left:18%;
  top:32%;
  animation:spin 10s linear infinite;
}

.gear-b{
  right:18%;
  top:18%;
  transform:scale(.82);
  animation:spin-rev 8s linear infinite;
}

.vault-door{
  width:min(300px,78vw);
  height:210px;
  border-radius:28px;
  background:linear-gradient(180deg,#b2c2df,#6d85ac);
  position:relative;
  box-shadow:
    inset 0 10px 24px rgba(255,255,255,.35),
    inset 0 -12px 28px rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.18);
  border:6px solid rgba(255,255,255,.2);
}

html[data-theme="dark"] .vault-door{
  background:linear-gradient(180deg,#52698c,#243856);
}

.vault-rings{
  position:absolute;
  inset:26px;
  border-radius:50%;
  border:10px solid rgba(255,255,255,.34);
  width:150px;
  height:150px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 10px rgba(18,28,45,.15);
}

.vault-rings:before,
.vault-rings:after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.35);
}

.vault-handle{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--gold);
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 0 18px rgba(255,255,255,.2),
    0 0 0 54px transparent;
}

.vault-handle:before,
.vault-handle:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:76px;
  height:10px;
  background:#f8fafc;
  border-radius:999px;
  transform:translate(-50%,-50%);
}

.vault-handle:after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.vault-screen{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  padding:9px 16px;
  border-radius:14px;
  background:#0b1320;
  color:#72f4b8;
  font-family:monospace;
  letter-spacing:.3em;
  font-weight:800;
}

.code-progress{
  text-align:center;
  margin-bottom:14px;
}

.code-slot-group{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}

.code-slot{
  width:46px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:1.35rem;
  background:rgba(255,255,255,.18);
}

.keyboard-layout{
  display:grid;
  gap:14px;
}

.keyboard-group{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.key{
  border:none;
  padding:16px 0;
  border-radius:18px;
  font-weight:800;
  font-size:1.05rem;
  color:#fff;
  cursor:pointer;
  transition:.2s;
}

.key-alpha{
  background:linear-gradient(135deg,#16a34a,#22c55e);
}

.key-num{
  background:linear-gradient(135deg,#ef4444,#fb7185);
}

.key.ready{
  filter:saturate(1);
}

.key.blocked,
.key:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.vault-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr;
  gap:10px;
  margin-top:14px;
}

/* MODAL CORRIGIDO */
.modal{
  position:fixed;
  inset:0;
  background:rgba(5,10,20,.58);
  place-items:center;
  padding:22px;
  z-index:50;
}

.modal:not([hidden]){
  display:grid;
}

.modal-card{
  max-width:460px;
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  padding:24px;
  position:relative;
  box-shadow:var(--shadow);
}

.modal-close{
  position:absolute;
  right:14px;
  top:12px;
  background:none;
  border:none;
  color:var(--text);
  font-size:1.8rem;
  cursor:pointer;
}

.result-box{
  text-align:center;
  padding:18px 6px;
}

.success-box h3{
  color:var(--green);
}

.error-box h3{
  color:var(--red);
}

.site-footer{
  max-width:900px;
  margin:24px auto 4px;
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
  padding:0 12px;
}

.alert{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid var(--line);
}

.alert.success{
  background:rgba(17,182,111,.12);
}

.alert.error{
  background:rgba(239,68,68,.12);
}

.admin-page .admin-wrap{
  max-width:1100px;
  margin:0 auto;
}

.admin-topbar{
  padding:16px 20px;
  border-radius:24px;
}

.brand-line{
  display:flex;
  gap:14px;
  align-items:center;
}

.admin-logo{
  max-width:84px;
}

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

.tab-nav{
  display:flex;
  gap:10px;
  margin:18px 0;
}

.tab-link{
  padding:12px 18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.18);
}

.tab-link.active{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  border-color:transparent;
}

.list-cards{
  display:grid;
  gap:14px;
}

.promo-item,
.participant-card,
.history-item,
.log-row{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  background:rgba(255,255,255,.16);
}

.promo-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.promo-grid,
.participant-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
  color:var(--muted);
}

.inline-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.accordion{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px 14px;
  background:rgba(255,255,255,.1);
}

.accordion summary{
  cursor:pointer;
  font-weight:700;
  padding:8px 0;
}

.log-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:10px;
}

.participant-card{
  margin-top:10px;
}

.history-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.history-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.history-meta{
  display:grid;
  gap:6px;
  text-align:right;
}

.profile-summary{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  margin-top:18px;
}

.success-text{
  color:var(--green);
}

.muted-text{
  color:var(--muted);
}

.confetti{
  position:fixed;
  top:-14px;
  width:10px;
  height:18px;
  background:linear-gradient(180deg,var(--gold),var(--primary));
  opacity:.9;
  animation:fall 2.2s linear forwards;
  z-index:80;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

@keyframes spin-rev{
  to{transform:rotate(-360deg) scale(.82)}
}

@keyframes fall{
  to{
    transform:translateY(110vh) rotate(680deg);
    opacity:0;
  }
}

@media (max-width:800px){
  .promotion-display,
  .grid-form,
  .promo-grid,
  .participant-metrics,
  .history-item{
    grid-template-columns:1fr;
  }

  .vault-actions{
    grid-template-columns:1fr;
  }

  .hero-card,
  .form-card,
  .vault-card,
  .panel-card,
  .compact-page{
    padding:18px;
  }

  .topbar,
  .promo-head,
  .log-row{
    flex-direction:column;
    align-items:stretch;
  }

  .keyboard-group{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .code-slot{
    width:42px;
    height:52px;
  }
}