*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --c-bg: #07080f;
  --c-surface: #0d1018;
  --c-elevated: #131620;
  --c-border: rgba(255,255,255,0.06);
  --c-cyan: #00e5ff;
  --c-purple: #9b5de5;
  --c-pink: #f72585;
  --c-green: #06ffa5;
  --c-orange: #ff6d00;
  --c-red: #ff3b3b;
  --c-text: #dde1f0;
  --c-muted: #4b5270;
  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* GRAIN */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ROUTER */
.page { display:none; min-height:100vh; }
.page.active { display:block; }
.page-enter { animation: pageEnter .45s var(--ease-smooth) both; }
@keyframes pageEnter {
  from { opacity:0; transform:translateY(24px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  background:rgba(7,8,15,0.85);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--c-border);
}
.logo {
  font-family:var(--font-display); font-size:17px; font-weight:900; letter-spacing:3px;
  background:linear-gradient(90deg, var(--c-cyan), var(--c-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; cursor:pointer;
}
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a {
  font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--c-muted); text-decoration:none; transition:color .2s; cursor:pointer;
}
.nav-links a:hover { color:var(--c-cyan); }
.nav-right { display:flex; gap:10px; align-items:center; }

.btn {
  font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border-radius:3px; cursor:pointer; transition:all .2s;
  border:none; outline:none;
}
.btn-ghost {
  padding:7px 18px; background:transparent;
  border:1px solid rgba(0,229,255,0.3); color:var(--c-cyan);
}
.btn-ghost:hover { background:rgba(0,229,255,0.08); border-color:var(--c-cyan); box-shadow:0 0 16px rgba(0,229,255,0.2); }
.btn-primary { padding:7px 20px; background:linear-gradient(135deg, var(--c-cyan), var(--c-purple)); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,229,255,0.35); }

/* USER AVATAR NAV */
.nav-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-purple));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:11px; font-weight:700; color:#000;
  cursor:pointer; border:2px solid rgba(0,229,255,0.4);
  transition:all .2s; position:relative;
}
.nav-avatar:hover { box-shadow:0 0 16px rgba(0,229,255,.4); transform:scale(1.05); }

.nav-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:10px; overflow:hidden; min-width:180px;
  box-shadow:0 16px 48px rgba(0,0,0,.6);
  display:none;
}
.nav-avatar:hover .nav-dropdown,
.nav-avatar.open .nav-dropdown { display:block; }

.dropdown-header {
  padding:14px 16px; border-bottom:1px solid var(--c-border);
  background:linear-gradient(135deg, rgba(0,229,255,.04), transparent);
}
.dropdown-username { font-family:var(--font-ui); font-size:13px; font-weight:800; color:#fff; }
.dropdown-email { font-size:11px; color:var(--c-muted); margin-top:2px; }

.dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; font-family:var(--font-ui); font-size:12px; font-weight:600;
  color:var(--c-text); cursor:pointer; transition:all .15s;
  text-decoration:none;
}
.dropdown-item:hover { background:rgba(0,229,255,.05); color:var(--c-cyan); }
.dropdown-item.danger:hover { background:rgba(255,59,59,.06); color:var(--c-red); }
.dropdown-divider { height:1px; background:var(--c-border); }

/* ═══════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════ */
#page-home { padding-top:60px; }

.hero {
  position:relative; overflow:hidden;
  min-height:calc(100vh - 60px);
  display:flex; align-items:center; padding:0 32px;
}
.hero::before {
  content:''; position:absolute; top:-20%; left:-10%;
  width:70vw; height:70vw; max-width:800px; max-height:800px;
  background:radial-gradient(ellipse at center, rgba(0,229,255,.06) 0%, transparent 65%);
  pointer-events:none; animation:blobFloat 8s ease-in-out infinite;
}
.hero::after {
  content:''; position:absolute; bottom:-20%; right:-10%;
  width:60vw; height:60vw; max-width:700px; max-height:700px;
  background:radial-gradient(ellipse at center, rgba(155,93,229,.07) 0%, transparent 65%);
  pointer-events:none; animation:blobFloat 10s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(2%,3%) scale(1.06);}
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center; width:100%; max-width:1280px; margin:0 auto;
}
.hero-eyebrow {
  font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; color:var(--c-cyan); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before { content:''; width:24px; height:1px; background:var(--c-cyan); }
.hero-title {
  font-family:var(--font-display); font-size:clamp(32px,5vw,60px);
  font-weight:900; line-height:1.05; letter-spacing:-1px; margin-bottom:20px;
}
.hero-title em { font-style:normal; color:var(--c-cyan); }
.hero-title .dim { color:rgba(255,255,255,.18); }
.hero-desc { font-size:15px; line-height:1.8; color:var(--c-muted); max-width:420px; margin-bottom:36px; }
.hero-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.btn-big {
  padding:14px 32px; font-size:13px;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-purple));
  color:#fff; border:none; border-radius:4px;
  font-family:var(--font-ui); font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden; transition:all .3s;
}
.btn-big::after {
  content:''; position:absolute; top:-50%; left:-60%;
  width:40%; height:200%; background:rgba(255,255,255,.15);
  transform:skewX(-20deg); transition:left .5s;
}
.btn-big:hover::after { left:130%; }
.btn-big:hover { box-shadow:0 8px 32px rgba(0,229,255,.4); transform:translateY(-2px); }

.hero-stats {
  display:flex; gap:32px; margin-top:48px;
  padding-top:32px; border-top:1px solid var(--c-border);
}
.stat-n { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--c-cyan); }
.stat-l { font-size:11px; font-weight:500; color:var(--c-muted); text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }

.promo-wrap { display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:2; }
.promo-card {
  border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3;
  cursor:pointer; transition:transform .35s var(--ease-spring), box-shadow .35s;
  border:1px solid rgba(255,255,255,.06);
}
.promo-card:hover { transform:scale(1.03) translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.6); }
.promo-card:first-child { grid-column:1/-1; aspect-ratio:16/7; }
.promo-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-smooth); }
.promo-card:hover .promo-img { transform:scale(1.06); }
.promo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,6,12,.92) 0%, rgba(5,6,12,.2) 60%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
}
.promo-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-ui); font-size:9px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:2px;
  margin-bottom:8px; width:fit-content;
}
.tag-hot  { background:var(--c-pink); color:#fff; }
.tag-new  { background:var(--c-green); color:#000; }
.tag-sale { background:var(--c-orange); color:#fff; }
.promo-card-title { font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:1px; color:#fff; }
.promo-card-sub { font-size:12px; color:rgba(255,255,255,.55); margin-top:3px; }

/* TICKER */
.ticker-bar {
  background:rgba(0,229,255,.04);
  border-top:1px solid rgba(0,229,255,.08); border-bottom:1px solid rgba(0,229,255,.08);
  padding:10px 0; overflow:hidden;
}
.ticker-inner { display:flex; width:max-content; animation:ticker 25s linear infinite; }
.ticker-item {
  display:flex; align-items:center; gap:8px; padding:0 36px; white-space:nowrap;
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--c-muted);
}
.ticker-dot { color:var(--c-cyan); font-size:6px; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* GAMES SECTION */
.games-section { padding:80px 32px; max-width:1280px; margin:0 auto; }
.sec-head { display:flex; align-items:center; gap:20px; margin-bottom:40px; }
.sec-title { font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#fff; white-space:nowrap; }
.sec-line { flex:1; height:1px; background:linear-gradient(90deg, rgba(0,229,255,.25), transparent); }
.sec-count { font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:2px; color:var(--c-cyan); }

.filter-tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.filter-tab {
  padding:7px 18px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:100px; font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--c-muted); cursor:pointer; transition:all .2s;
}
.filter-tab:hover, .filter-tab.active { border-color:var(--c-cyan); color:var(--c-cyan); background:rgba(0,229,255,.06); }

.games-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.game-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:10px; overflow:hidden; cursor:pointer; position:relative;
  transition:all .3s var(--ease-spring);
}
.game-card:hover {
  border-color:rgba(0,229,255,.5); transform:translateY(-6px) scale(1.01);
  box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,229,255,.15);
}
.game-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,229,255,.04), transparent);
  opacity:0; transition:opacity .3s;
}
.game-card:hover::before { opacity:1; }
.game-img-wrap { width:100%; aspect-ratio:16/9; overflow:hidden; position:relative; }
.game-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-smooth); }
.game-card:hover .game-img { transform:scale(1.08); }
.game-logo-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(7,8,15,.45); }
.game-logo { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 2px 12px rgba(0,0,0,.8)); transition:transform .3s var(--ease-spring); }
.game-card:hover .game-logo { transform:scale(1.12); }
.game-badge { position:absolute; top:8px; right:8px; z-index:2; font-family:var(--font-ui); font-size:8px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.game-info { padding:12px 14px 14px; }
.game-name { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:1px; color:#fff; margin-bottom:4px; }
.game-currency { font-size:11px; color:var(--c-muted); font-weight:400; }
.game-arrow { position:absolute; bottom:12px; right:14px; font-size:16px; color:var(--c-cyan); opacity:0; transform:translateX(-6px); transition:all .25s var(--ease-spring); }
.game-card:hover .game-arrow { opacity:1; transform:translateX(0); }

/* ═══════════════════════════════════════
   GAME DETAIL PAGE
═══════════════════════════════════════ */
#page-game { padding-top:60px; }
.game-hero { position:relative; height:360px; overflow:hidden; }
.game-hero-bg { width:100%; height:100%; object-fit:cover; filter:brightness(.35) saturate(1.2); }
.game-hero-gradient {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 30%, var(--c-bg) 100%),
             linear-gradient(to right, rgba(7,8,15,.9) 0%, transparent 60%);
}
.game-hero-content { position:absolute; inset:0; display:flex; align-items:flex-end; padding:40px 48px; max-width:1280px; margin:0 auto; left:0; right:0; }
.back-btn { position:absolute; top:24px; left:48px; display:flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.5); cursor:pointer; transition:color .2s; background:none; border:none; outline:none; }
.back-btn:hover { color:var(--c-cyan); }
.game-hero-logo { width:80px; height:80px; object-fit:contain; border-radius:16px; margin-right:24px; filter:drop-shadow(0 4px 24px rgba(0,0,0,.8)); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 32px rgba(0,0,0,.6); }
.game-hero-name { font-family:var(--font-display); font-size:clamp(22px,4vw,42px); font-weight:900; letter-spacing:-0.5px; color:#fff; }
.game-hero-sub { font-size:14px; color:rgba(255,255,255,.45); margin-top:4px; }
.game-hero-tags { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.game-tag { font-family:var(--font-ui); font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:4px 12px; border-radius:100px; border:1px solid rgba(0,229,255,.3); color:var(--c-cyan); }

.topup-layout { max-width:1280px; margin:0 auto; padding:0 48px 80px; display:grid; grid-template-columns:1fr 380px; gap:40px; }

.step-block { margin-bottom:40px; }
.step-num-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.step-circle { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--c-cyan), var(--c-purple)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.step-label-text { font-family:var(--font-ui); font-size:16px; font-weight:800; letter-spacing:.5px; color:#fff; }

.id-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-muted); }
.field input, .field select {
  padding:13px 16px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:6px; color:var(--c-text); font-family:var(--font-body); font-size:14px; font-weight:500; outline:none; transition:all .2s; -webkit-appearance:none;
}
.field input:focus, .field select:focus { border-color:var(--c-cyan); box-shadow:0 0 0 3px rgba(0,229,255,.08), 0 0 16px rgba(0,229,255,.06); }
.field input::placeholder { color:rgba(255,255,255,.18); }
.field-hint { font-size:11px; color:var(--c-muted); }

.verify-strip { margin-top:12px; padding:12px 16px; background:rgba(6,255,165,.05); border:1px solid rgba(6,255,165,.15); border-radius:6px; display:none; align-items:center; gap:10px; }
.verify-strip.show { display:flex; }
.verify-icon { font-size:18px; }
.verify-name { font-weight:700; font-size:14px; color:var(--c-green); }
.verify-id   { font-size:12px; color:var(--c-muted); }

.nominal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.nom-loading { grid-column:1/-1; text-align:center; padding:30px 10px; color:var(--c-muted, #888); font-size:13px; }
.nom-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:8px; padding:14px 10px; cursor:pointer; text-align:center; position:relative;
  transition:all .25s var(--ease-spring); overflow:hidden;
}
.nom-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--c-cyan), var(--c-purple)); opacity:0; transition:opacity .2s; }
.nom-card:hover { border-color:rgba(0,229,255,.4); transform:translateY(-3px); }
.nom-card.selected { border-color:var(--c-cyan); box-shadow:0 0 0 1px var(--c-cyan), 0 8px 24px rgba(0,229,255,.2); }
.nom-card.selected::after { opacity:.06; }
.nom-val { font-family:var(--font-display); font-size:12px; font-weight:700; color:#fff; margin-bottom:5px; position:relative; z-index:1; }
.nom-price { font-size:11px; color:var(--c-muted); position:relative; z-index:1; }
.nom-bonus { position:absolute; top:0; right:0; background:var(--c-green); color:#000; font-family:var(--font-ui); font-size:8px; font-weight:800; padding:3px 7px; border-radius:0 8px 0 6px; letter-spacing:.5px; }
.nom-popular { position:absolute; top:0; left:0; background:var(--c-pink); color:#fff; font-family:var(--font-ui); font-size:8px; font-weight:800; padding:3px 7px; border-radius:8px 0 6px 0; letter-spacing:.5px; }

.pay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pay-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:8px; padding:16px 12px; cursor:pointer; text-align:center;
  transition:all .25s var(--ease-spring); position:relative; overflow:hidden;
}
.pay-card:hover { border-color:rgba(0,229,255,.3); transform:translateY(-2px); }
.pay-card.selected { border-color:var(--c-purple); box-shadow:0 0 0 1px var(--c-purple), 0 6px 20px rgba(155,93,229,.2); background:rgba(155,93,229,.06); }
.pay-name { font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:1px; }
.pay-fee  { font-size:10px; color:var(--c-muted); margin-top:3px; }

.summary-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; overflow:hidden; position:sticky; top:80px; }
.summary-header { padding:20px 24px; border-bottom:1px solid var(--c-border); background:linear-gradient(135deg, rgba(0,229,255,.04), transparent); }
.summary-title { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:2px; color:var(--c-cyan); }
.summary-body { padding:20px 24px; }
.sum-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px; }
.sum-row:last-child { border-bottom:none; }
.sum-key { color:var(--c-muted); font-weight:400; }
.sum-val { color:var(--c-text); font-weight:600; text-align:right; max-width:60%; font-size:12px; }
.sum-total-row { margin-top:16px; padding:16px; background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.12); border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
.sum-total-key { font-family:var(--font-ui); font-size:12px; font-weight:700; color:#fff; letter-spacing:1px; text-transform:uppercase; }
.sum-total-val { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--c-cyan); }

.pay-btn {
  display:block; width:100%; margin-top:16px; padding:16px;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-purple));
  border:none; border-radius:8px; color:#fff;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer; position:relative; overflow:hidden; transition:all .3s;
}
.pay-btn::after { content:''; position:absolute; top:-50%; left:-60%; width:40%; height:200%; background:rgba(255,255,255,.15); transform:skewX(-20deg); transition:left .5s; }
.pay-btn:hover::after { left:130%; }
.pay-btn:hover { box-shadow:0 8px 32px rgba(0,229,255,.35); transform:translateY(-2px); }
.pay-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }

.ssl-note { margin-top:12px; text-align:center; font-size:11px; color:var(--c-muted); display:flex; align-items:center; justify-content:center; gap:5px; }

/* ═══════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════ */
.modal-bg { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.8); backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; }
.modal-bg.open { display:flex; }
.modal { background:var(--c-surface); border:1px solid var(--c-border); border-top:2px solid var(--c-cyan); border-radius:16px; padding:40px; width:100%; max-width:420px; position:relative; animation:modalIn .35s var(--ease-spring) both; max-height:90vh; overflow-y:auto; }
@keyframes modalIn { from{opacity:0;transform:scale(.93) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);} }
.modal-x { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--c-muted); font-size:20px; cursor:pointer; line-height:1; transition:color .2s; }
.modal-x:hover { color:var(--c-cyan); }
.modal-logo { font-family:var(--font-display); font-size:14px; font-weight:900; letter-spacing:2px; background:linear-gradient(90deg,var(--c-cyan),var(--c-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.modal-title { font-family:var(--font-ui); font-size:22px; font-weight:800; color:#fff; }
.modal-sub { font-size:13px; color:var(--c-muted); margin-bottom:28px; margin-top:4px; }
.modal-tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--c-elevated); border-radius:8px; padding:4px; margin-bottom:24px; gap:4px; }
.modal-tab { padding:9px; background:none; border:none; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--c-muted); cursor:pointer; border-radius:6px; transition:all .2s; }
.modal-tab.on { background:var(--c-cyan); color:#000; }
.modal-form { display:none; }
.modal-form.on { display:block; }
.mfield { margin-bottom:14px; }
.mfield label { display:block; font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-muted); margin-bottom:7px; }
.mfield input {
  width:100%; padding:12px 16px; background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:6px; color:var(--c-text); font-family:var(--font-body); font-size:14px; outline:none; transition:all .2s;
}
.mfield input:focus { border-color:var(--c-cyan); box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.mfield input::placeholder { color:rgba(255,255,255,.18); }
.forgot { text-align:right; font-size:12px; color:var(--c-cyan); cursor:pointer; margin:-4px 0 14px; }
.modal-btn { width:100%; padding:14px; border:none; border-radius:6px; background:linear-gradient(135deg,var(--c-cyan),var(--c-purple)); color:#fff; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.modal-btn:hover { box-shadow:0 6px 24px rgba(0,229,255,.35); transform:translateY(-1px); }
.or-row { display:flex; align-items:center; gap:12px; color:var(--c-muted); font-size:11px; letter-spacing:2px; text-transform:uppercase; margin:18px 0; }
.or-row::before, .or-row::after { content:''; flex:1; height:1px; background:var(--c-border); }
.social-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.social-btn { padding:10px; background:var(--c-elevated); border:1px solid var(--c-border); border-radius:6px; color:var(--c-text); font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.5px; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.social-btn:hover { border-color:var(--c-cyan); color:var(--c-cyan); }

.form-error { font-size:12px; color:var(--c-red); margin-top:6px; display:none; }
.form-error.show { display:block; }

/* ═══════════════════════════════════════
   PROFILE PAGE
═══════════════════════════════════════ */
#page-profile { padding-top:60px; }

.profile-layout {
  max-width:1100px; margin:0 auto; padding:48px 32px;
  display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start;
}

.profile-sidebar {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:14px; overflow:hidden; position:sticky; top:80px;
}
.profile-avatar-area {
  padding:32px; text-align:center;
  background:linear-gradient(135deg, rgba(0,229,255,.04), rgba(155,93,229,.04));
  border-bottom:1px solid var(--c-border);
}
.profile-avatar-big {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-purple));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:28px; font-weight:900; color:#000;
  margin:0 auto 14px; border:3px solid rgba(0,229,255,.3);
}
.profile-username-big { font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:1px; color:#fff; }
.profile-email-small { font-size:12px; color:var(--c-muted); margin-top:4px; }
.profile-join { font-size:11px; color:var(--c-muted); margin-top:8px; }

.profile-menu { padding:8px 0; }
.profile-menu-item {
  display:flex; align-items:center; gap:12px; padding:13px 20px;
  font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.5px;
  color:var(--c-muted); cursor:pointer; transition:all .15s; border:none; background:none; width:100%; text-align:left;
}
.profile-menu-item:hover { color:var(--c-cyan); background:rgba(0,229,255,.04); }
.profile-menu-item.active { color:var(--c-cyan); background:rgba(0,229,255,.06); border-left:2px solid var(--c-cyan); }
.profile-menu-item.danger:hover { color:var(--c-red); background:rgba(255,59,59,.04); }

.profile-content {}
.profile-panel { display:none; }
.profile-panel.active { display:block; animation:pageEnter .35s var(--ease-smooth) both; }

.panel-header { margin-bottom:28px; }
.panel-title { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:2px; color:#fff; margin-bottom:6px; }
.panel-sub { font-size:13px; color:var(--c-muted); }

/* PROFILE INFO PANEL */
.profile-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:12px; padding:28px; margin-bottom:20px;
}
.profile-card-title { font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-cyan); margin-bottom:20px; }

.pfield { margin-bottom:16px; }
.pfield label { display:block; font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-muted); margin-bottom:8px; }
.pfield input {
  width:100%; padding:12px 16px; background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:6px; color:var(--c-text); font-family:var(--font-body); font-size:14px; outline:none; transition:all .2s;
}
.pfield input:focus { border-color:var(--c-cyan); box-shadow:0 0 0 3px rgba(0,229,255,.08); }
.pfield input:disabled { opacity:.5; cursor:not-allowed; }
.pfield input::placeholder { color:rgba(255,255,255,.18); }

.pfield-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.save-btn {
  padding:12px 28px; border:none; border-radius:6px;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-purple));
  color:#fff; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s;
}
.save-btn:hover { box-shadow:0 6px 24px rgba(0,229,255,.35); transform:translateY(-1px); }

/* CHANGE PASSWORD */
.verify-method-tabs { display:flex; gap:8px; margin-bottom:20px; }
.vmethod-tab {
  padding:8px 18px; background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:6px; font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--c-muted); cursor:pointer; transition:all .2s;
}
.vmethod-tab.active { border-color:var(--c-cyan); color:var(--c-cyan); background:rgba(0,229,255,.06); }

.verify-section { display:none; }
.verify-section.active { display:block; }

.otp-row { display:flex; gap:10px; align-items:flex-end; }
.otp-row .pfield { flex:1; }
.otp-send-btn {
  padding:12px 18px; border:1px solid var(--c-cyan); border-radius:6px;
  background:transparent; color:var(--c-cyan); font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:all .2s; white-space:nowrap; margin-bottom:16px;
}
.otp-send-btn:hover { background:rgba(0,229,255,.08); }
.otp-send-btn:disabled { opacity:.4; cursor:not-allowed; }

.pw-strength { height:3px; background:var(--c-border); border-radius:2px; margin-top:6px; overflow:hidden; }
.pw-strength-bar { height:100%; border-radius:2px; transition:all .3s; width:0; }

/* TRANSACTION HISTORY */
.trx-filter { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.trx-filter-btn {
  padding:6px 16px; background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:100px; font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--c-muted); cursor:pointer; transition:all .2s;
}
.trx-filter-btn.active { border-color:var(--c-cyan); color:var(--c-cyan); background:rgba(0,229,255,.06); }

.trx-list { display:flex; flex-direction:column; gap:12px; }
.trx-item {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:10px; padding:18px 20px;
  display:flex; align-items:center; gap:16px;
  transition:border-color .2s;
}
.trx-item:hover { border-color:rgba(0,229,255,.2); }
.trx-game-icon {
  width:48px; height:48px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background:var(--c-elevated);
}
.trx-game-icon img { width:100%; height:100%; object-fit:cover; }
.trx-info { flex:1; }
.trx-game-name { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:1px; color:#fff; margin-bottom:3px; }
.trx-detail { font-size:12px; color:var(--c-muted); }
.trx-order-id { font-family:var(--font-ui); font-size:10px; color:var(--c-muted); letter-spacing:1px; margin-top:4px; }
.trx-right { text-align:right; flex-shrink:0; }
.trx-amount { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--c-cyan); }
.trx-date { font-size:11px; color:var(--c-muted); margin-top:4px; }
.trx-status {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-ui); font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; margin-top:6px;
}
.status-success { background:rgba(6,255,165,.12); color:var(--c-green); border:1px solid rgba(6,255,165,.2); }
.status-pending { background:rgba(255,109,0,.1); color:var(--c-orange); border:1px solid rgba(255,109,0,.2); }
.status-failed  { background:rgba(255,59,59,.1); color:var(--c-red); border:1px solid rgba(255,59,59,.2); }

.trx-empty { text-align:center; padding:60px 20px; }
.trx-empty-icon { font-size:48px; margin-bottom:16px; }
.trx-empty-text { font-family:var(--font-ui); font-size:14px; font-weight:700; color:var(--c-muted); }

/* TOAST */
.toast {
  position:fixed; bottom:32px; right:32px; z-index:1000;
  padding:14px 22px; background:var(--c-elevated); border:1px solid var(--c-cyan); border-radius:8px;
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--c-text);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(0,229,255,.15);
  transform:translateY(80px); opacity:0; transition:all .35s var(--ease-spring); max-width:340px;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.toast-error { border-color:var(--c-red); box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,59,59,.15); }

/* SUCCESS OVERLAY */
.success-overlay {
  position:fixed; inset:0; z-index:900; background:rgba(7,8,15,.95); backdrop-filter:blur(20px);
  display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px;
}
.success-overlay.show { display:flex; }
.success-icon { font-size:72px; margin-bottom:24px; animation:bounceIn .6s var(--ease-spring) both; }
.success-title { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--c-green); margin-bottom:12px; }
.success-sub { font-size:15px; color:var(--c-muted); max-width:400px; line-height:1.7; }
.success-id { font-family:var(--font-display); font-size:12px; color:var(--c-cyan); margin-top:20px; letter-spacing:2px; }
.success-back { margin-top:32px; }
@keyframes bounceIn { from{transform:scale(0);opacity:0;} 70%{transform:scale(1.2);} to{transform:scale(1);opacity:1;} }

/* FOOTER */
footer { border-top:1px solid var(--c-border); padding:56px 32px 32px; }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { font-family:var(--font-display); font-size:17px; font-weight:900; letter-spacing:3px; background:linear-gradient(90deg,var(--c-cyan),var(--c-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:14px; }
.footer-desc { font-size:13px; color:var(--c-muted); line-height:1.8; max-width:260px; }
.footer-col h5 { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { font-size:13px; color:var(--c-muted); text-decoration:none; transition:color .2s; cursor:pointer; }
.footer-col a:hover { color:var(--c-cyan); }
.footer-bottom { max-width:1280px; margin:0 auto; padding-top:24px; border-top:1px solid var(--c-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom p { font-size:12px; color:var(--c-muted); }
.trust-badges { display:flex; gap:10px; }
.trust { padding:4px 12px; border:1px solid var(--c-border); border-radius:3px; font-family:var(--font-ui); font-size:9px; font-weight:700; letter-spacing:1.5px; color:var(--c-muted); }

/* RESPONSIVE */
@media(max-width:900px) {
  .hero-inner, .topup-layout { grid-template-columns:1fr; }
  .summary-col { order:-1; }
  .summary-card { position:static; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .profile-layout { grid-template-columns:1fr; }
  .profile-sidebar { position:static; }
}
@media(max-width:600px) {
  nav { padding:0 16px; }
  .nav-links { display:none; }
  .hero { padding:0 16px; }
  .games-section { padding:60px 16px; }
  .topup-layout { padding:0 16px 60px; }
  .nominal-grid { grid-template-columns:repeat(2,1fr); }
  .pay-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .profile-layout { padding:24px 16px; }
  .pfield-row { grid-template-columns:1fr; }
}

/* =======================================================
   Nexastar — Tambahan Style
   ======================================================= */

/* ── Payment Wait Overlay ── */
.pay-wait-overlay {
  position: fixed; inset: 0; z-index: 910;
  background: rgba(7,8,15,.97); backdrop-filter: blur(20px);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.pay-wait-overlay.show { display: flex; }
.pay-wait-icon { font-size: 64px; margin-bottom: 20px;
  animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.pay-wait-title { font-family: var(--font-display); font-size: 22px;
  font-weight: 900; color: #fff; margin-bottom: 10px; }
.pay-wait-sub { font-size: 14px; color: var(--c-muted);
  max-width: 420px; line-height: 1.7; margin-bottom: 28px; }
.pay-wait-id { font-family: var(--font-display); font-size: 12px;
  color: var(--c-cyan); letter-spacing: 2px; margin-bottom: 8px; }
.pay-wait-amount { font-family: var(--font-display); font-size: 32px;
  font-weight: 900; color: var(--c-green); margin-bottom: 8px; }
.pay-wait-method { font-size: 13px; color: var(--c-muted); margin-bottom: 32px; }
.pay-wait-divider { width: 100%; max-width: 380px; height: 1px;
  background: var(--c-border); margin: 0 auto 28px; }
.pay-wait-steps { max-width: 380px; text-align: left; margin-bottom: 32px; }
.pay-wait-step { display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.step-dot { width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,229,255,.15); border: 1px solid rgba(0,229,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px;
  color: var(--c-cyan); flex-shrink: 0; margin-top: 1px; }
.btn-confirm-pay {
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--c-green), #00c07a);
  border: none; border-radius: 10px; color: #000;
  font-family: var(--font-display); font-size: 13px;
  font-weight: 900; letter-spacing: 2px; cursor: pointer;
  transition: all .3s; margin-bottom: 14px;
}
.btn-confirm-pay:hover {
  box-shadow: 0 8px 32px rgba(6,255,165,.4);
  transform: translateY(-2px);
}
.btn-cancel-pay {
  background: none; border: 1px solid rgba(255,59,59,.3);
  color: var(--c-red); padding: 10px 28px; border-radius: 8px;
  font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all .2s;
}
.btn-cancel-pay:hover { border-color: var(--c-red); background: rgba(255,59,59,.06); }

/* Upload bukti bayar */
.upload-area {
  border: 2px dashed rgba(0,229,255,.25); border-radius: 10px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: all .2s; margin-bottom: 14px; position: relative;
}
.upload-area:hover { border-color: var(--c-cyan); background: rgba(0,229,255,.03); }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 32px; margin-bottom: 8px; }
.upload-label { font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; color: var(--c-muted); }
.upload-preview { max-width: 200px; border-radius: 8px;
  margin-top: 12px; display: none; }

/* Status polling bar */
.status-poll-bar { width: 280px; height: 3px;
  background: rgba(255,255,255,.08); border-radius: 2px;
  margin-top: 20px; overflow: hidden; }
.status-poll-fill { height: 100%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
  border-radius: 2px; animation: pollFill 8s linear infinite; }
@keyframes pollFill { from{width:0%} to{width:100%} }

/* Live notif bar */
.live-notif-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: linear-gradient(90deg, rgba(6,255,165,.9), rgba(0,229,255,.9));
  color: #000; font-family: var(--font-ui); font-size: 12px;
  font-weight: 800; letter-spacing: 1px; padding: 10px 24px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transform: translateY(-100%); transition: transform .4s ease;
}
.live-notif-bar.show { transform: translateY(0); }
.live-notif-bar button {
  background: rgba(0,0,0,.2); border: none; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-size: 11px; font-weight: 800;
}

/* TRX status additional */
.status-menunggu_konfirmasi {
  background: rgba(0,229,255,.1); color: var(--c-cyan);
  border: 1px solid rgba(0,229,255,.2);
}
.status-diproses {
  background: rgba(155,93,229,.1); color: var(--c-purple);
  border: 1px solid rgba(155,93,229,.2);
}
.status-berhasil {
  background: rgba(6,255,165,.12); color: var(--c-green);
  border: 1px solid rgba(6,255,165,.2);
}
.status-gagal {
  background: rgba(255,59,59,.1); color: var(--c-red);
  border: 1px solid rgba(255,59,59,.2);
}

/* Konfirmasi bayar button */
.btn-confirm-small {
  margin-top: 6px; padding: 5px 12px;
  background: rgba(6,255,165,.1); border: 1px solid rgba(6,255,165,.3);
  border-radius: 4px; color: var(--c-green);
  font-size: 10px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700;
  letter-spacing: .5px; transition: all .2s;
}
.btn-confirm-small:hover { background: rgba(6,255,165,.2); }