:root {
  --bg: #0a0f1e;
  --bg2: #111827;
  --bg3: #1a2340;
  --accent: #00d4ff;
  --accent2: #7c3aed;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #1e293b;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Navbar ── */
.cb-navbar {
  background: rgba(10,15,30,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.cb-navbar .navbar-brand { color: var(--accent) !important; }
.cb-navbar .nav-link { color: var(--text-muted) !important; transition: color .2s; }
.cb-navbar .nav-link:hover,
.cb-navbar .nav-link.active { color: var(--accent) !important; }

/* ── Buttons ── */
.btn-accent {
  background: linear-gradient(135deg, var(--accent), #0099cc);
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: .45rem 1.1rem;
  transition: transform .15s, box-shadow .15s;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,212,255,.35); color: #000; }

.btn-cb {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem 1.1rem;
  transition: background .2s, border-color .2s;
}
.btn-cb:hover { background: var(--bg2); border-color: var(--accent); color: var(--accent); }

/* ── Cards ── */
.cb-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cb-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 30px rgba(0,212,255,.12); }

.game-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
.game-card .game-icon { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; }
.game-card .game-badge {
  display: inline-block;
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* ── Hero ── */
.cb-hero {
  background: linear-gradient(135deg, var(--bg) 0%, #0d1a3a 60%, var(--bg) 100%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.cb-hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cb-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
.cb-hero .accent { color: var(--accent); }
.cb-hero .lead { color: var(--text-muted); font-size: 1.15rem; }

/* ── Section ── */
.cb-section { padding: 4rem 0; }
.section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
.section-sub { color: var(--text-muted); margin-bottom: 2.5rem; }

/* ── Form ── */
.cb-form { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; }
.cb-form .form-label { color: var(--text-muted); font-size: .9rem; margin-bottom: .35rem; }
.cb-form .form-control,
.cb-form .form-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
}
.cb-form .form-control:focus,
.cb-form .form-select:focus {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(0,212,255,.15);
}
.cb-form .form-control::placeholder { color: #4a5568; }

/* ── Alert ── */
.cb-alert { border-radius: 10px; border: none; }
.cb-alert.success { background: rgba(16,185,129,.15); color: #6ee7b7; border-left: 3px solid var(--success); }
.cb-alert.error   { background: rgba(239,68,68,.12);  color: #fca5a5; border-left: 3px solid var(--danger); }
.cb-alert.info    { background: rgba(0,212,255,.1);   color: #7dd3fc; border-left: 3px solid var(--accent); }

/* ── Table ── */
.cb-table { background: var(--bg2); border-radius: 12px; overflow: hidden; }
.cb-table table { margin-bottom: 0; }
.cb-table thead th { background: var(--bg3); color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; border: none; }
.cb-table tbody td { border-color: var(--border); color: var(--text); vertical-align: middle; }
.cb-table tbody tr:hover td { background: var(--bg3); }

/* ── Badges / Status ── */
.status-active   { color: var(--success); }
.status-expired  { color: var(--danger); }
.status-inactive { color: var(--text-muted); }

/* ── Sub card ── */
.sub-card { border-left: 4px solid var(--accent); }
.sub-card .days-left { font-size: 1.5rem; font-weight: 800; color: var(--accent); }

/* ── Page header ── */
.cb-page-header {
  background: linear-gradient(to right, var(--bg2), var(--bg3));
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
}
.cb-page-header h1 { font-weight: 800; }

/* ── Footer ── */
.cb-footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.footer-link { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--accent); }

/* ── Utility ── */
.text-accent { color: var(--accent) !important; }
.text-muted-cb { color: var(--text-muted) !important; }
.bg-cb2 { background: var(--bg2) !important; }
.bg-cb3 { background: var(--bg3) !important; }
.border-cb { border-color: var(--border) !important; }
.rounded-cb { border-radius: 12px !important; }

/* ── Responsive ── */
.cb-main { flex: 1; }
@media (max-width: 768px) {
  .cb-hero { padding: 3rem 0 2.5rem; }
  .cb-section { padding: 2.5rem 0; }
}