:root {
  --bg:#050b18; --text:#e5e9f0; --card:#0f1530; --muted:#a0a8c0;
  --line:#1c2748; --brand:#00bfff; --brand2:#00ffff;
  --popup-text-shadow: none;
}
[data-theme='light'] {
  --bg:#f8fafc; --text:#0f1530; --card:#ffffff; --muted:#555;
  --line:#d0d4e0; --brand:#009dff; --brand2:#00e0ff;
  /* bantu visibilitas teks di light mode */
  --popup-text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 1px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;margin:0;transition:.3s}
.container{max-width:760px;margin:30px auto;padding:0 16px}
.muted{color:var(--muted)}
.hero{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;padding:16px 0;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:900px;margin:0 auto;padding:0 20px}
.hero-icon{width:60px;height:60px;border-radius:50%;box-shadow:0 0 10px rgba(255,255,255,.4)}
.theme-toggle{background:rgba(255,255,255,0.2);border:0;border-radius:50%;color:#fff;font-size:18px;width:36px;height:36px;cursor:pointer}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:22px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.field{margin:18px 0}
label{display:block;margin-bottom:8px;font-weight:600}
input[name=username]{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text)}
button.primary,button.secondary,button.ghost{border:none;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer;transition:.2s}
button.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#000}
button.secondary{background:var(--line);color:var(--text)}
button.ghost{background:transparent;border:1px dashed var(--line);color:var(--text)}
button.danger{background:#e95464;color:#fff;border:0;padding:10px 14px;border-radius:12px;font-weight:700;margin-top:10px}
.hidden{display:none}
.qr-wrapper{display:flex;justify-content:center;margin:10px 0}
#qrcode{width:200px;border-radius:16px;border:3px solid var(--brand2);box-shadow:0 0 15px var(--brand2)}
.toast{position:fixed;bottom:20px;right:20px;background:#e95464;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 16px rgba(0,0,0,.3)}

/* Modal base */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:50;perspective:1100px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,480px);background:var(--card);border-radius:16px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.45);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-body{max-height:60vh;overflow:auto;padding:12px 16px}
.modal-body label{display:block;padding:12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer}
.modal-body label:hover{background:rgba(255,255,255,.08)}
.modal-foot,.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}

/* Futuristic popup — adaptive text + front zoom */
.modal-futuristic{
  background:rgba(5,10,30,.85);
  border:2px solid var(--brand2);
  box-shadow:0 0 25px var(--brand2);
  padding:18px;
  color:var(--text);
  text-shadow: var(--popup-text-shadow);
  animation: popupFront .35s ease;
  transform-origin: center center;
}
.price-detail{margin:10px 0 16px;padding:12px;border:1px dashed var(--brand2);border-radius:10px;background:rgba(0,255,255,.06);color:var(--text);text-shadow:var(--popup-text-shadow)}

/* Animations */
.fade-in{animation:fadeIn .6s ease-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes popupFront{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.82) translateZ(60px);}
  100%{opacity:1; transform: translate(-50%,-50%) scale(1) translateZ(0);}
}