:root{
    --bg:#0b1020;
    --card:#111a33;
    --text:#e7ecff;
    --muted:#aab3da;
    --line:rgba(255,255,255,.10);
    --shadow: 0 12px 40px rgba(0,0,0,.35);
    --primary: #6ee7ff;
    --primary2:#7c4dff;
    --ok:#34d399;
    --warn:#fbbf24;
  }
  
  :root.light{
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#0c1533;
    --muted:#5d6786;
    --line:rgba(0,0,0,.10);
    --shadow: 0 12px 30px rgba(0,0,0,.10);
    --primary:#0ea5e9;
    --primary2:#7c3aed;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
      radial-gradient(1000px 600px at 10% 0%, rgba(124,77,255,.28), transparent 55%),
      radial-gradient(900px 550px at 90% 10%, rgba(110,231,255,.24), transparent 55%),
      var(--bg);
    color:var(--text);
  }
  
  .wrap{max-width:1100px;margin:0 auto;padding:18px}
  .header{display:flex;align-items:center;justify-content:space-between}
  .brand{display:flex;gap:12px;align-items:center}
  .logo{
    width:44px;height:44px;border-radius:14px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    box-shadow:var(--shadow);
  }
  .name{font-weight:800;font-size:18px;letter-spacing:.2px}
  .tag{color:var(--muted);font-size:13px;margin-top:2px}
  
  .grid{
    display:grid;
    grid-template-columns: 1.35fr .65fr;
    gap:16px;
  }
  @media (max-width: 920px){
    .grid{grid-template-columns:1fr}
  }
  
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:18px;
    backdrop-filter: blur(8px);
  }
  :root.light .card{background:var(--card)}
  
  .hero h1{margin:0 0 10px;font-size:28px}
  .muted{color:var(--muted)}
  .lead{color:var(--muted);line-height:1.6;margin:0 0 14px}
  
  .stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:14px 0 6px;
  }
  @media (max-width: 520px){ .stats{grid-template-columns:1fr} }
  .stat{
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    background:rgba(255,255,255,.04);
  }
  :root.light .stat{background:#f6f7fb}
  .label{font-size:12px;color:var(--muted)}
  .value{font-weight:800;font-size:18px;margin-top:4px}
  
  .progress{margin-top:14px}
  .bar{
    width:100%;height:12px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    overflow:hidden;
  }
  .fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    transition:width .35s ease;
  }
  .progressRow{display:flex;justify-content:space-between;margin-top:8px}
  .fineprint{margin-top:6px;font-size:12px;color:var(--muted)}
  
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  
  .btn{
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:10px 12px;
    border-radius:14px;
    cursor:pointer;
    font-weight:700;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn.primary{
    border:none;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#081028;
  }
  .btn.ghost{background:transparent}
  
  .side h2{margin:0 0 10px;font-size:16px}
  .list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  .item{
    display:flex;justify-content:space-between;gap:10px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.04);
  }
  :root.light .item{background:#f6f7fb}
  .item b{font-weight:800}
  .divider{height:1px;background:var(--line);margin:14px 0}
  
  .packs{display:grid;gap:10px}
  .pack{
    text-align:left;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    padding:12px;
    border-radius:14px;
    cursor:pointer;
    font-weight:800;
  }
  .pack:hover{transform:translateY(-1px)}
  :root.light .pack{background:#f6f7fb}
  
  .timeline h2{margin:0 0 12px;font-size:16px}
  .steps{display:grid;gap:12px}
  .step{display:flex;gap:12px;align-items:flex-start}
  .dot{
    width:30px;height:30px;border-radius:12px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    font-weight:900;
  }
  .st{font-weight:800}
  .sd{margin-top:2px;font-size:13px}
  
  .footer{padding-bottom:30px}
  
  .toast{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-width:min(520px,92vw);
  }
  .toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(-2px);
  }
  

.qr-box{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.qr-img{
  width:240px;
  max-width:90%;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  padding:12px;
  box-shadow:var(--shadow);
  margin: 16px 0;
}

.modal .qr-img{
  width:280px;
}

/* Modal */
.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
}

.modal.show{
  display:flex;
}

.modal-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  cursor:pointer;
}

.modal-content{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  max-width:min(420px,90vw);
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  text-align:center;
  animation:modalSlideIn .3s ease;
}

@keyframes modalSlideIn{
  from{
    opacity:0;
    transform:translateY(-20px) scale(.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .2s ease;
}

.modal-close:hover{
  background:rgba(255,255,255,.15);
  transform:rotate(90deg);
}