:root {
  --bg: #0f1220;
  --panel: #171b2e;
  --panel-2: #1f2540;
  --text: #e8eaf2;
  --muted: #9aa3c0;
  --brand: #6c8cff;
  --brand-2: #8a6cff;
  --ok: #35c48a;
  --err: #ff6b6b;
  --border: #2a3150;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #23294a 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; font-size: 20px; color: var(--text); text-decoration: none; letter-spacing: .2px; }
.nav nav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-weight: 600; }
.nav nav a:hover { color: var(--text); }

.container { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; }

.btn {
  display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer;
  font-size: 15px;
}
.btn:hover { background: #5a7bff; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.big { padding: 14px 26px; font-size: 16px; }
.btn.disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

.hero { text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; }
.lead { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 auto 26px; }
.cta { display: flex; gap: 12px; justify-content: center; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.card h3 { margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0; }

.how { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.how h2 { margin-top: 0; }
.how ol { color: var(--muted); line-height: 1.8; margin: 0; padding-left: 20px; }

.auth { max-width: 400px; margin: 20px auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.auth h1 { margin-top: 0; }
.auth form { display: flex; flex-direction: column; gap: 14px; }
.auth label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.auth input {
  padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 15px;
}
.muted { color: var(--muted); }
.error { background: rgba(255,107,107,.12); color: var(--err); padding: 10px 12px; border-radius: 10px; }

.dash h1 { margin-bottom: 20px; }
.balance { display: flex; align-items: center; justify-content: space-between; }
.balance-actions { display: flex; gap: 10px; }
.big-number { font-size: 32px; font-weight: 800; }

.flash { background: rgba(53,196,138,.14); color: var(--ok); padding: 10px 12px; border-radius: 10px; }
.methods { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.methods legend { padding: 0 6px; color: var(--muted); font-size: 13px; }
.radio { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 600; margin: 6px 0; }
.radio input { width: auto; }

.orders { width: 100%; border-collapse: collapse; margin-top: 8px; }
.orders th, .orders td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.orders th { color: var(--muted); font-weight: 600; }
.orders .fname { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders .reports a:not(.btn) { color: var(--brand); text-decoration: none; margin-right: 12px; font-weight: 600; }
.orders .reports a.btn { color: #fff; margin: 2px 6px 2px 0; }
.orders .reports a.btn:hover { color: #fff; }
.status { text-transform: capitalize; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.status.processing { color: #ffd479; }
.status.completed { color: var(--ok); }
.status.failed, .status.cancelled { color: var(--err); }

.subnav { margin: -8px 0 20px; }
.subnav a { color: var(--brand); text-decoration: none; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { text-align: center; }
.dash form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.dash form input, .dash form select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 15px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.inline-form label { margin-bottom: 0; }
.inline-form input { max-width: 160px; }
.btn.small { padding: 8px 12px; font-size: 13px; }
.user-row { margin-bottom: 10px; }
.user-id { flex-basis: 100%; font-weight: 700; }

.orders .fname a { color: var(--text); text-decoration: none; }
.orders .fname a:hover { color: var(--brand); }
.score { font-weight: 700; }
.score.na { color: var(--muted); font-weight: 400; }
.score.low { color: var(--ok); }
.score.mid { color: #ffd479; }
.score.high { color: var(--err); }

.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 6px; }
.badge { border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex;
  flex-direction: column; gap: 10px; align-items: flex-start; background: var(--panel); }
.badge-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.badge-score { font-size: 44px; font-weight: 800; line-height: 1; }
.badge.band-low { border-color: rgba(53,196,138,.5); }
.badge.band-mid { border-color: rgba(255,212,121,.5); }
.badge.band-high { border-color: rgba(255,107,107,.5); }
.band-low .badge-score { color: var(--ok); }
.band-mid .badge-score { color: #ffd479; }
.band-high .badge-score { color: var(--err); }
.band-na .badge-score { color: var(--muted); }
@media (max-width: 600px) { .badges { grid-template-columns: 1fr; } }

.footer { text-align: center; color: var(--muted); padding: 30px; border-top: 1px solid var(--border); font-size: 14px; }

@media (max-width: 720px) {
  .features { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .balance { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================== light theme ============================== */
[data-theme="light"] {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #eef1f8;
  --text: #16203a;
  --muted: #5c6685;
  --border: #e3e8f2;
}
[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 70% -10%, #e9eefc 0%, var(--bg) 60%);
}
[data-theme="light"] .btn.ghost { color: var(--text); }
[data-theme="light"] .card,
[data-theme="light"] .statcard { box-shadow: 0 1px 3px rgba(20,30,60,.06); }

/* ============================== theme toggle ============================= */
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 9px; margin-left: 16px; cursor: pointer; font-size: 15px;
}
.theme-toggle:hover { border-color: var(--brand); }

/* ============================== whatsapp ================================= */
.whatsapp {
  position: fixed; right: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff; border-radius: 999px;
  padding: 11px 18px 11px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  z-index: 60; text-decoration: none; font-weight: 700; font-size: 15px;
}
.whatsapp .wa-label { white-space: nowrap; }
.whatsapp:hover { filter: brightness(1.05); color: #fff; }

/* ============================== landing extras ========================== */
.eyebrow { color: var(--brand); font-weight: 700; letter-spacing: 2px; font-size: 13px; margin: 0 0 6px; }
.testimonials { margin: 44px 0; }
.testimonials h2 { text-align: center; margin-bottom: 20px; }
.section-h { margin: 30px 0 14px; }

/* ============================== admin shell ============================= */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 140px); }
.sidebar {
  border-right: 1px solid var(--border); padding: 22px 14px; background: var(--panel);
}
.side-title { font-weight: 800; letter-spacing: .3px; padding: 0 10px 12px; }
.side-group { color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; padding: 16px 10px 6px; }
.sidebar a {
  display: block; padding: 9px 10px; border-radius: 8px; color: var(--muted);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.sidebar a:hover { background: var(--panel-2); color: var(--text); }
.sidebar a.on { background: var(--brand); color: #fff; }
.admin-main { padding: 30px 34px 70px; max-width: 1100px; }
.admin-main h1 { margin-top: 0; }

/* ============================== stat cards ============================== */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
.statgrid.four { grid-template-columns: repeat(4, 1fr); }
.statgrid.two { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.statcard {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.statlabel { color: var(--muted); font-size: 13px; }
.statnum { font-size: 30px; font-weight: 800; line-height: 1.1; }
.statsub { color: var(--muted); font-size: 12px; }
.statcard.blue   .statnum { color: #6c8cff; }
.statcard.green  .statnum { color: #35c48a; }
.statcard.purple .statnum { color: #a879ff; }
.statcard.amber  .statnum { color: #e8a33d; }
.statcard.red    .statnum { color: #ff6b6b; }
.statcard.teal   .statnum { color: #2fb6c4; }
.statcard.blue   { border-top: 3px solid #6c8cff; }
.statcard.green  { border-top: 3px solid #35c48a; }
.statcard.purple { border-top: 3px solid #a879ff; }
.statcard.amber  { border-top: 3px solid #e8a33d; }
.statcard.red    { border-top: 3px solid #ff6b6b; }
.statcard.teal   { border-top: 3px solid #2fb6c4; }

/* ============================== tables / search ======================== */
.tablewrap { overflow-x: auto; }
.searchbar { display: flex; gap: 10px; margin: 8px 0 16px; flex-wrap: wrap; }
.searchbar input[type="search"] {
  flex: 1; min-width: 220px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 14px;
}

/* ============================== package admin ========================== */
.pkg-list { display: flex; flex-direction: column; gap: 8px; }
.pkg-head, .pkg-row { display: flex; gap: 10px; align-items: center; }
.pkg-head { color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; padding: 0 4px; }
.pkg-head span, .pkg-form > * { flex: 1; }
.pkg-head span:last-child { flex: 0 0 150px; }
.pkg-form { display: flex; gap: 10px; flex: 1; }
.pkg-form input, .pkg-form select, .rowform select, .rowform input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 14px; width: 100%;
}
.pkg-row { border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.staff-head { padding: 0 4px; }
.staff-head span, .staff-row > span { flex: 1; }
.rowform { display: flex; gap: 8px; flex: 1; }
.rolecount { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; font-weight: 700; margin-left: 6px; }

/* ============================== package buy cards ====================== */
.pkgcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 8px 0 10px; }
.pkgcard {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 8px;
}
.pkgcard-slots { font-size: 34px; font-weight: 800; color: var(--brand); line-height: 1; }
.pkgcard-name { font-weight: 700; }
.pkgcard-price { color: var(--muted); font-size: 15px; margin-bottom: 6px; }
.pkgcard form { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.pkgcard input {
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 13px; text-align: center;
}

/* ============================== downloads ============================== */
.downloads { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }

/* ============================== anonymous link page ==================== */
.linkhero { background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #fff; border-radius: 16px; padding: 26px 24px; margin-bottom: 18px; }
.linkhero h1 { margin: 0 0 6px; color: #fff; }
.linkhero p { margin: 0; color: rgba(255,255,255,.9); }
.remaining-card { border-left: 4px solid var(--brand); }
.remaining-card .big-number { color: var(--brand); }
.link-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 0; }

/* ============================== spinners ============================== */
.spinner { width: 44px; height: 44px; margin: 18px auto; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--brand); animation: spin 0.9s linear infinite; }
.spinner-sm { display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%;
  animation: spin 0.9s linear infinite; margin-left: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== notices / forms ======================== */
.notice { border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: var(--panel);
  border: 1px solid var(--border); border-left-width: 4px; }
.notice strong { display: block; margin-bottom: 2px; }
.notice-info { border-left-color: var(--brand); }
.notice-success { border-left-color: var(--ok); }
.notice-warning { border-left-color: #e8a33d; }
.rowactions { display: flex; gap: 6px; flex-wrap: wrap; }

textarea { font-family: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 15px; width: 100%; resize: vertical; }
.card form > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.card form > label input,
.card form > label textarea,
.card form > label select { width: 100%; margin-top: 6px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 15px; }

/* ============================== google sign-in ========================= */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #fff; color: #3c4043; border: 1px solid #dadce0;
  border-radius: 10px; padding: 12px 16px; font-weight: 600; font-size: 15px;
  text-decoration: none; margin-bottom: 6px;
}
.google-btn:hover { background: #f7f8fa; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted);
  font-size: 13px; margin: 12px 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 820px) {
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 4px; }
  .side-title, .side-group { flex-basis: 100%; padding-top: 8px; }
  .admin-main { padding: 24px 18px 60px; }
  .statgrid, .statgrid.four, .statgrid.two { grid-template-columns: 1fr 1fr; }
  .pkg-form, .rowform { flex-wrap: wrap; }
}