:root{ --red:#ff3300; --cyan:#00ccff; --bg1:#000; --bg2:#220000; --bg3:#001018; }
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#fff}
.bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--bg1),var(--bg2),var(--bg3))}
.card{width:min(420px,92vw);padding:26px;border-radius:22px;background:linear-gradient(180deg,#000814,#0c0c0c,#000814);box-shadow:0 0 20px rgba(255,0,0,.55), inset 0 0 28px rgba(0,204,255,.35);position:relative}
.logo{display:grid;place-items:center;margin-bottom:8px}
.title{text-align:center;margin:4px 0 12px;font-size:26px;color:#fff4e6;text-shadow:0 0 14px var(--red),0 0 24px #ff6600}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px}
.tab{background:#1a1a1a;border:none;color:#fff;padding:10px;border-radius:12px;cursor:pointer}
.tab.active{background:var(--red);box-shadow:0 0 14px var(--red);font-weight:bold}
label{display:block;margin:10px 0 6px;color:#ffcccc;text-shadow:0 0 8px #ff5050}
input{width:100%;padding:12px;border:none;border-radius:12px;background:#0f0f0f;color:#fff;outline:none;box-shadow:inset 0 0 0 1px #222}
.btn{width:100%;padding:12px;margin-top:14px;border:none;border-radius:28px;background:var(--red);color:#fff;font-size:16px;font-weight:bold;cursor:pointer;box-shadow:0 0 12px var(--red)}
.btn:hover{filter:brightness(.95)}
.msg{text-align:center;color:#ffd1d1;min-height:20px;margin-top:8px}

/* main page */
.wrap{max-width:900px;margin:16px auto;text-align:center}
.topbar{display:flex;justify-content:flex-end;padding:10px 12px}
.logout{background:#333;border:none;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.panel{margin:10px auto;padding:22px;width:min(380px,92vw);border-radius:20px;background:linear-gradient(180deg,#000814,#0c0c0c,#000814);box-shadow:0 0 20px var(--red), inset 0 0 28px rgba(0,204,255,.35);position:relative}
.heading{font-size:30px;font-weight:bold;color:#fff4e6;text-shadow:0 0 14px var(--red),0 0 24px #ff6600;margin:8px 0 12px}
.subhead{color:#ffcccc;text-shadow:0 0 8px #ff5050;margin:8px 0}
.btn-inline{padding:12px 26px;margin:8px;border:none;border-radius:30px;background:var(--red);color:#fff;font-weight:bold;cursor:pointer;box-shadow:0 0 14px var(--red);font-size:18px}
.btn-inline:disabled{background:#666;box-shadow:none;cursor:not-allowed}
.result{margin-top:12px;font-size:26px;font-weight:bold;color:#00ffcc;text-shadow:0 0 10px cyan;min-height:28px}
.count{margin-top:6px;font-size:18px;color:yellow;text-shadow:0 0 8px orange;min-height:24px}
.paybtn{width:100%;padding:12px;border:none;border-radius:12px;background:#0a8f08;color:#fff;font-weight:bold;font-size:16px;cursor:pointer;margin-top:10px}
.paybtn.alt{background:#0657b1}
.links{margin-top:18px}
.btn-out{background:#cce6ff;color:#000;border-radius:22px;padding:10px 20px;box-shadow:0 0 10px #99d0ff;border:none;cursor:pointer}
.socials{margin-top:18px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.icon{width:50px;height:50px;display:inline-grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 0 10px #111;cursor:pointer;transition:.2s transform,.2s box-shadow}
.icon:hover{transform:scale(1.12);box-shadow:0 0 16px var(--cyan)}
.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:9999}
.pop{background:#fff;color:#000;width:min(460px,92vw);border-radius:14px;padding:18px 18px 22px;position:relative}
.close{position:absolute;right:10px;top:8px;font-size:22px;cursor:pointer}
.paybtn-small{width:100%;padding:10px;border-radius:10px;background:#0a8f08;color:#fff;border:none}