:root{
  --bg:#071c1f;
  --bg2:#0d3035;
  --panel:rgba(24,70,78,.78);
  --text:#f3fbfc;
  --muted:#c0d9de;
  --accent:#8dff17;
  --warning:#d7c659;
  --pending:#ffc85a;
  --confirmed:#7dff9f;
  --danger:#ff9e9e;
  --shadow:0 20px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(circle at top, #2b6d78 0%, var(--bg2) 30%, var(--bg) 100%);
}
a{color:#d9ebff;text-decoration:none}
a:hover{text-decoration:underline}
.auth-body,.dashboard-body{min-height:100vh}
.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.brand-mark{font-weight:800;letter-spacing:.02em;margin-bottom:18px}
.auth-card{
  width:min(100%,460px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:24px;padding:32px;backdrop-filter:blur(16px);box-shadow:var(--shadow)
}
.auth-card h1{margin:0 0 8px;font-size:42px}
.subtext{color:var(--muted);margin:0 0 22px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
label{font-size:14px;color:#e8fbff;margin-bottom:8px;display:block}
input{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  outline:none;background:rgba(6,25,30,.55);color:var(--text);font-size:16px
}
input::placeholder{color:#a9c9cf}
.primary-btn,.ghost-btn,.small-btn{
  border:none;border-radius:14px;padding:14px 16px;font-weight:700;cursor:pointer;transition:.2s transform,.2s opacity
}
.primary-btn{width:100%;background:linear-gradient(90deg,var(--accent),#b4ff5c);color:#123200;margin-top:8px}
.ghost-btn{background:rgba(255,255,255,.08);color:var(--text);border:1px solid rgba(255,255,255,.12)}
.small-btn{background:linear-gradient(90deg,#52d8ff,#8ae9ff);color:#002833;padding:10px 14px}
.primary-btn:hover,.ghost-btn:hover,.small-btn:hover{transform:translateY(-1px);opacity:.96}
.auth-links{margin:16px 0 0;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.divider{opacity:.7}
.message{min-height:20px;margin-top:12px;color:#ffd98a}
.trust-badge{
  margin-top:16px;text-align:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);color:#c8f6ff;font-size:14px
}
.welcome-user{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.topbar-actions{display:flex;align-items:center;gap:12px}
.dashboard-shell{max-width:1280px;margin:0 auto;padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.topbar h1{margin:8px 0 6px;font-size:40px}
.hero-panel{
  display:flex;justify-content:space-between;gap:20px;align-items:stretch;background:var(--panel);
  border:1px solid rgba(129,210,224,.18);border-radius:28px;padding:24px;backdrop-filter:blur(14px);box-shadow:var(--shadow)
}
.pill{
  display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:#a0ff2f1f;
  color:#dcff81;border:1px solid rgba(223,255,129,.25);font-weight:700
}
.hero-panel h2{font-size:34px;margin:14px 0 8px;max-width:680px}
.hero-copy{max-width:760px;color:var(--muted)}
.alert-box{
  width:min(100%,300px);padding:18px;border-radius:20px;background:rgba(215,198,89,.12);
  border:1px solid rgba(215,198,89,.18);color:#fff4b6
}
.demo-notice{
  margin-top:18px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);color:#dff7fb
}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:20px}
.panel{
  background:var(--panel);border:1px solid rgba(129,210,224,.18);border-radius:26px;padding:22px;
  backdrop-filter:blur(12px);box-shadow:var(--shadow)
}
.full-width{grid-column:1 / -1}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:16px}
.panel-head h3{margin:0;font-size:22px}
.table-subtext{margin:6px 0 0;color:var(--muted);font-size:14px}
.verified-badge,.status-live{
  display:inline-flex;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700
}
.verified-badge{background:#55deff21;color:#a7efff;border:1px solid rgba(167,239,255,.22)}
.status-live{background:#93ff2422;color:#dbff9f;border:1px solid rgba(219,255,159,.22)}
.promo-banner{
  background:linear-gradient(135deg,#9bff2d,#4fffcc);color:#06353a;font-weight:800;text-align:center;
  padding:14px 16px;border-radius:14px;margin-bottom:16px;font-size:15px;box-shadow:0 8px 20px rgba(0,0,0,.18)
}
.qr-wrap{
  background:#ffffff;border-radius:22px;padding:18px;display:flex;justify-content:center;align-items:center;
  margin:8px 0 18px;min-height:340px
}
.qr-image{max-width:100%;width:320px;height:auto;display:block}
.wallet-box label{display:block;margin-bottom:10px;color:#cbe8ee}
.wallet-row{
  display:flex;gap:12px;align-items:center;background:rgba(7,28,31,.48);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:14px
}
code{word-break:break-all;color:#f6fdff;flex:1;font-size:15px}
.rules-list{display:flex;flex-direction:column;gap:14px}
.rule-item{
  display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px;border-radius:18px;
  background:rgba(102,194,212,.12);border:1px solid rgba(173,234,246,.12)
}
.rule-item span{color:#dbf0f4}
.rule-item strong{font-size:16px}
.balance-panel{display:flex;flex-direction:column;justify-content:center}
.balance-amount{font-size:46px;font-weight:800;line-height:1.1;margin-top:8px}
.balance-amount small{font-size:18px;opacity:.85;margin-left:6px}
.withdraw-panel{display:flex;flex-direction:column}
.withdraw-message{padding:12px 14px;border-radius:12px;margin-bottom:16px;font-weight:700;font-size:14px}
.withdraw-message.error{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.2);color:#ffd1d1}
.withdraw-message.success{background:rgba(125,255,159,.16);border:1px solid rgba(125,255,159,.2);color:#d3ffe0}
.withdraw-form label{margin-top:10px}
.input-shell{
  background:rgba(6,25,30,.55);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:4px 8px
}
.input-shell input{border:none;background:transparent;padding:14px 8px}
.amount-shell{display:flex;align-items:center;gap:10px}
.amount-suffix{font-weight:700;opacity:.85;padding-right:8px}
.fee-row{
  display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)
}
.withdraw-btn{margin-top:18px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:16px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}
th{color:#d8f2f6;font-size:14px}
.status{
  display:inline-flex;padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px
}
.status.pending{background:rgba(255,200,90,.16);color:#ffe2a4}
.status.confirmed{background:rgba(125,255,159,.16);color:#c7ffd4}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .hero-panel{flex-direction:column}
  .topbar{flex-direction:column}
  .topbar h1{font-size:32px}
  .hero-panel h2{font-size:28px}
  .wallet-row{flex-direction:column;align-items:stretch}
  .topbar-actions{width:100%;justify-content:space-between}
}