/* ============================================================
   Game Coinz — light storefront theme (pipobazar-style)
   ============================================================ */
:root {
    --bg: #f6f1ee;
    --card: #ffffff;
    --border: #ecdfd8;
    --text: #2b1d18;
    --muted: #7d6b64;
    --primary: #d16a47;
    --primary-dark: #b5502f;
    --primary-soft: #fbeee8;
    --accent: #f59e0b;
    /* White/small text on the old success (#16a34a, 3.30:1) and danger
       (#ef4444, 3.76:1) failed AA on light cards; the darker pair passes. */
    --danger: #dc2626;
    --success: #15803d;
    --radius: 18px;
    --shadow: 0 8px 24px rgba(43, 29, 24, .12);
}

/* Dark theme — toggled via <html data-theme="dark">, persisted in
   localStorage + the gc-theme cookie (see assets/js/theme.js).
   WEBSITE-FIX-001: the old dark card (#211915) sat on a near-identical
   background (#16110e, 1.08:1), so cards and text had almost no separation.
   The card is now lighter, the border much stronger (border vs card
   1.7:1), and muted text is lighter too; all measured pairs are listed in
   the coder report. Brand hues are unchanged. */
:root[data-theme="dark"] {
    --bg: #100d0b;
    --card: #2b211a;
    --border: #5c4636;
    --text: #f5ece6;
    --muted: #c9b8ad;
    --primary: #e07a52;
    --primary-dark: #d16a47;
    --primary-soft: #3a2a1e;
    /* The darker light-theme success/danger fail on dark cards, so dark
       mode gets lighter text tones (9.03:1 and 5.69:1 on the dark card). */
    --success: #4ade80;
    --danger: #f87171;
    --shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .site-header { background: #1d1512; border-bottom-color: #5c4636; }
:root[data-theme="dark"] .site-footer { background: #1d1512; border-top-color: #5c4636; }
:root[data-theme="dark"] .admin-shell::before { background: #1d1512; border-right-color: #5c4636; }
:root[data-theme="dark"] .chart-bar .val { background: #f1e7e1; color: #211915; }
:root[data-theme="dark"] .popup-overlay { background: rgba(0, 0, 0, .65); }
:root[data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .16); color: #86efac; }
:root[data-theme="dark"] .alert-error { background: rgba(239, 68, 68, .16); color: #fca5a5; }
:root[data-theme="dark"] .alert-info { background: rgba(209, 106, 71, .16); color: #f0b9a4; }
:root[data-theme="dark"] .table tr:hover td { background: #2a211c; }
:root[data-theme="dark"] .pill-pending { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .pill-processing { background: rgba(99, 102, 241, .18); color: #a5b4fc; }
:root[data-theme="dark"] .pill-completed { background: rgba(22, 163, 74, .18); color: #86efac; }
:root[data-theme="dark"] .pill-failed { background: rgba(239, 68, 68, .18); color: #fca5a5; }
:root[data-theme="dark"] .pill-refunded { background: rgba(148, 163, 184, .18); color: #cbd5e1; }
:root[data-theme="dark"] .stat-ico.green { background: rgba(22, 163, 74, .18); color: #4ade80; }
:root[data-theme="dark"] .stat-ico.amber { background: rgba(245, 158, 11, .18); color: #fbbf24; }

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.site-header {
    background: #2b1d18;
    border-bottom: 1px solid #4a332b;
    position: sticky; top: 0; z-index: 50;
}
.site-header .brand { color: #fff; }
.nav-wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { font-size: 1.3rem; font-weight: 800; color: var(--text); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.site-footer .brand img { height: 30px; }
.brand-diamond { color: var(--primary); }
.header-search { flex: 1; display: flex; }
.header-search input {
    flex: 1; padding: 9px 14px; border: 1px solid var(--primary);
    border-right: none; border-radius: 6px 0 0 6px; font-size: .95rem; background: var(--card); color: var(--text);
}
.header-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(209, 106, 71, .18); }
.header-search button {
    background: var(--primary); color: #fff; border: 1px solid var(--primary);
    padding: 9px 20px; border-radius: 0 6px 6px 0; font-weight: 600; cursor: pointer;
}
.header-search button:hover { background: var(--primary-dark); }
.main-nav { display: flex; gap: 16px; align-items: center; white-space: nowrap; }
.main-nav a { color: #d9c4ba; font-weight: 600; font-size: .95rem; }
.main-nav a:hover, .main-nav a.active { color: #fff; text-decoration: none; }

/* ---------- Theme toggle ---------- */
/* 44px minimum touch target, with a visible Light/Dark word on wider
   screens (icon-only below 700px, where header space is tight). The
   script keeps aria-pressed / aria-label / the word in sync. */
.theme-toggle {
    min-width: 44px; height: 44px; padding: 0 12px; gap: 6px; border-radius: 999px; flex: none; cursor: pointer;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s;
}
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle-text { font-size: .85rem; font-weight: 700; line-height: 1; }
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: inline; }
.site-header .theme-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.site-header .theme-toggle:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Popup banner ---------- */
.popup-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.popup-overlay[hidden] { display: none; }
.popup-box {
    background: var(--card); border-radius: 12px; max-width: 460px; width: 100%;
    display: flex; flex-direction: column; overflow: hidden; position: relative;
    max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.popup-art {
    width: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary); padding: 18px;
}
.popup-art img { width: auto; max-width: 120px; height: auto; }
.popup-art.has-img { padding: 0; }
.popup-art.has-img img { width: 100%; max-width: none; max-height: 280px; object-fit: cover; display: block; }
.popup-text { padding: 22px 24px 24px; font-size: .98rem; }
.popup-title { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.25; }
.popup-text p { margin: 0 0 14px; }
.popup-text p:last-child { margin-bottom: 0; }
.popup-cta { margin-top: 4px; }
.popup-close {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
    font-size: 1rem; line-height: 1; color: var(--text);
}

/* ---------- Homepage hero (website-fix-001) ---------- */
/* The homepage had no hero at all: the games heading was the first thing
   on the page. This keeps the brand colours and the existing title/subtitle
   copy (from the home_title / home_sub settings, or the old fallback text)
   and adds the two CTAs, both to pages that already exist: #games on this
   page and track.php. The games heading becomes an H2 so the page keeps
   exactly one H1. */
.hero {
    background: linear-gradient(135deg, var(--primary-soft), var(--card));
    border: 1px solid var(--border); border-radius: 16px;
    padding: 36px 28px; margin: 22px 0 4px; text-align: center;
    box-shadow: var(--shadow);
}
.hero-eyebrow {
    color: var(--link, var(--primary)); font-size: .8rem; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px;
}
.hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--text); }
.hero-title span { color: var(--primary); }
.hero-sub { color: var(--muted); max-width: 640px; margin: 12px auto 0; font-size: 1.02rem; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 480px) {
    .hero { padding: 26px 18px; margin-top: 16px; }
    .hero-cta .btn { width: 100%; }
}

/* ---------- Banner carousel ---------- */
/* Round 4.5: structural rules only here (position/layout). All contested
   properties (padding, button size/position/colour, dots, pause) live in
   the single final carousel block at the end of this file. */
.carousel { position: relative; margin: 22px 0; }
.carousel-track { display: flex; transition: transform .45s ease; }
@media (max-width: 700px) {
    /* Stack the search bar onto its own row so brand + nav + theme toggle fit */
    .nav-wrap { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px 12px; }
    .header-search { order: 3; flex-basis: 100%; }
    .main-nav { order: 4; flex-basis: 100%; justify-content: center; gap: 18px; }
    .theme-toggle { order: 2; margin-left: auto; width: 44px; height: 44px; padding: 0; }
}

/* ---------- Section titles ---------- */
.section { padding: 26px 0; }
.section-title { font-size: 1.5rem; font-weight: 800; text-align: center; color: var(--text); }
.section-title span { color: var(--primary); }
.section-sub { color: var(--muted); margin: 6px 0 22px; text-align: center; }

/* ---------- Game grid ---------- */
.grid { display: grid; gap: 16px; }
.grid-games { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.game-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.game-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(30,42,58,.14); text-decoration: none; }
.game-thumb {
    height: 130px; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #64748b, #334155);
}
.game-thumb.ff { background: linear-gradient(135deg, #ea580c, #be123c); }
.game-thumb.pubg { background: linear-gradient(135deg, #d97706, #92400e); }
.game-thumb.ml { background: linear-gradient(135deg, #0369a1, #075985); }
.game-thumb.cod { background: linear-gradient(135deg, #434343, #000000); }
.game-name {
    padding: 10px 12px; text-align: center; font-weight: 600; font-size: .92rem;
    border-top: 1px solid var(--border); color: var(--text); background: var(--card);
}

/* ---------- Step panels (top-up page) ---------- */
.step-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow); }
.step-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.step-badge {
    width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: none;
}
.step-head h2 { font-size: 1.02rem; color: var(--primary); font-weight: 700; }
.step-body { padding: 18px 16px; }

/* ---------- Package cards ---------- */
.pkg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pkg {
    position: relative; border: 1px solid var(--border); border-radius: 6px; background: var(--card);
    padding: 14px 10px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.pkg:hover { border-color: var(--primary); }
.pkg input { position: absolute; opacity: 0; }
.pkg .title { font-weight: 600; font-size: .92rem; color: var(--text); }
.pkg .price { color: var(--primary); font-size: .82rem; margin-top: 4px; font-weight: 600; }
.pkg .bonus { color: var(--success); font-size: .78rem; font-weight: 700; }
.pkg.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.pkg.selected::after {
    content: "✓"; position: absolute; top: -8px; left: -8px; width: 20px; height: 20px;
    background: var(--primary); color: #fff; border-radius: 50%; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
}
.pkg .popular {
    position: absolute; top: -9px; right: 8px; background: var(--accent); color: #fff;
    font-size: .64rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.pkg .oos {
    position: absolute; top: -9px; right: 8px; background: var(--accent); color: #fff;
    font-size: .64rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.pkg.out { opacity: .55; cursor: not-allowed; background: var(--bg); }
.pkg.out .popular { display: none; }

/* ---------- Payment cards ---------- */
.pay-list { display: flex; gap: 14px; flex-wrap: wrap; }
.pay {
    position: relative; width: 150px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card); padding: 14px 10px; text-align: center; cursor: pointer;
}
.pay input { position: absolute; opacity: 0; }
.pay .logo { font-size: 1.5rem; }
.pay .name { font-weight: 700; font-size: .85rem; margin-top: 4px; }
.pay .sub { color: var(--muted); font-size: .75rem; }
.pay.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pay.selected::before {
    content: "✓"; position: absolute; top: 6px; left: 6px; width: 18px; height: 18px;
    background: var(--primary); color: #fff; border-radius: 4px; font-size: .68rem;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; border: none; cursor: pointer;
    background: var(--primary); color: #fff; font-weight: 700; padding: 10px 26px;
    border-radius: 999px; font-size: .95rem; transition: background .12s;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-block { width: 100%; }
.btn-ghost { background: var(--card); color: var(--primary); border: 1px solid var(--primary); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-sm { padding: 6px 16px; font-size: .85rem; }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #15803d; }
.btn-success:hover { background: #166534; }
.action-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; }
.action-row { flex-wrap: wrap; }
.login-note { margin: 12px 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--primary-soft); color: var(--text); font-size: .9rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; color: var(--muted); }
.field label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); font-size: .95rem; }
.field label.check input { width: auto; margin: 0; }
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .95rem;
}
.field textarea { border-radius: 10px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(209, 106, 71, .18);
}
.hint { color: var(--muted); font-size: .8rem; margin-top: 4px; }

/* ---------- Summary / rules ---------- */
[hidden] { display: none !important; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: .95rem; }
.summary-row.total { font-size: 1.15rem; font-weight: 800; border: none; color: var(--primary); }
.rules-list { list-style: none; }
.rules-list li { padding: 6px 0 6px 26px; position: relative; font-size: .92rem; }
.rules-list li::before { content: "✔"; position: absolute; left: 0; color: var(--primary); font-size: .8rem; top: 9px; }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; font-size: .92rem; }
.alert-success { background: #e8f8ee; border: 1px solid var(--success); color: #14532d; }
.alert-error { background: #fdecec; border: 1px solid var(--danger); color: #7f1d1d; }
.alert-info { background: var(--primary-soft); border: 1px solid var(--primary); color: #065f52; }

/* ---------- Status pills ---------- */
.pill { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.pill-pending { background: #fef3c7; color: #92400e; }
.pill-processing { background: #e0e7ff; color: #3730a3; }
.pill-completed { background: #dcfce7; color: #166534; }
.pill-failed { background: #fee2e2; color: #991b1b; }
.pill-refunded { background: #e2e8f0; color: #475569; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--card); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.table tr:hover td { background: #f8fafc; }

/* ---------- Cards (generic, admin + summary) ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.topup-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .topup-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: #2b1d18; color: #e7d7cf; padding: 36px 0 18px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.footer-grid h4 { margin-bottom: 10px; color: #fff; }
.footer-grid a { color: #e7d7cf; }
.footer-grid a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.copyright { text-align: center; font-size: .82rem; margin-top: 26px; padding-top: 16px; border-top: 1px solid #4a332b; color: #c4a99d; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.hidden { display: none; }

/* ============================================================
   Admin shell (Monetra-style sidebar layout)
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; background: var(--bg); position: relative; }
/* Full-height dark gutter so the sidebar column covers the whole page,
   while the nav itself stays sticky inside it. */
.admin-shell::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 232px;
    background: #2b1d18; border-right: 1px solid #4a332b;
}

.admin-sidebar {
    width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
    background: transparent; color: #e7d7cf; display: flex; flex-direction: column;
}
.admin-logo { display: flex; align-items: center; gap: 10px; padding: 20px 18px; color: #fff; font-weight: 800; letter-spacing: .5px; font-size: .95rem; }
.admin-logo img { width: 30px; height: 30px; border-radius: 8px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; flex: 1; }
.admin-nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 10px; color: #c4a99d; font-weight: 600; font-size: .9rem;
    transition: background .15s, color .15s;
}
.admin-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
.admin-nav a:hover { background: #3a2a23; color: #fff; }
.admin-nav a.active { background: var(--primary); color: #fff; }
.admin-side-foot { padding: 12px; border-top: 1px solid #4a332b; display: flex; flex-direction: column; gap: 4px; }
.admin-side-foot a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c4a99d; font-weight: 600; font-size: .88rem; }
.admin-side-foot a svg { width: 20px; height: 20px; flex-shrink: 0; }
.admin-side-foot a:hover { background: #3a2a23; color: #fff; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; padding: 14px 26px;
}
.admin-topbar h1 { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.admin-user { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: var(--text); }
.admin-user .avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
}
.admin-content { padding: 26px; flex: 1; }
.admin-content .section-title { text-align: left; }
.admin-content .section-title::after { display: none; }

/* ---------- Greeting ---------- */
.greeting { margin-bottom: 22px; }
.greeting h2 { font-size: 1.45rem; font-weight: 800; color: var(--text); }
.greeting p { color: var(--muted); font-size: .92rem; margin-top: 4px; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
    display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow);
}
.stat-ico {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary);
}
.stat-ico svg { width: 22px; height: 22px; }
.stat-ico.green { background: #e8f8ee; color: #16a34a; }
.stat-ico.amber { background: #fef3c7; color: #d97706; }
.stat-ico.cocoa { background: var(--primary-soft); color: var(--text); }
.stat-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 4px 0 2px; }
.delta { font-size: .78rem; font-weight: 700; }
.delta.up { color: #15803d; }
.delta.down { color: #dc2626; }
.delta.flat { color: var(--muted); }

/* ---------- Dashboard grid ---------- */
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.dash-grid > * { min-width: 0; }
@media (max-width: 1020px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---------- Revenue chart ---------- */
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); overflow-x: auto; }
.chart-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 2px; }
.chart-card .sub { color: var(--muted); font-size: .84rem; margin-bottom: 18px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.chart-bar {
    width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: var(--border);
    position: relative; transition: background .15s; min-height: 4px;
}
.chart-bar.on { background: var(--primary); }
.chart-col:hover .chart-bar { background: var(--primary-dark); }
.chart-bar .val {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #2b1d18; color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 8px;
    border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.chart-col:hover .chart-bar .val, .chart-bar.on .val { opacity: 1; }
.chart-lab { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }

/* ---------- Quick actions ---------- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qa {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px;
    font-weight: 700; font-size: .82rem; color: var(--text); transition: border-color .15s, transform .15s;
}
.qa:hover { border-color: var(--primary); transform: translateY(-2px); }
.qa .qa-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.qa .qa-ico svg { width: 19px; height: 19px; }

/* ---------- Responsive sidebar ---------- */
@media (max-width: 700px) {
    .admin-sidebar { width: 64px; }
    .admin-shell::before { width: 64px; }
    .admin-logo span, .admin-nav a span, .admin-side-foot a span { display: none; }
    .admin-logo { justify-content: center; padding: 18px 0; }
    .admin-nav a, .admin-side-foot a { justify-content: center; padding: 12px 0; }
    .admin-content { padding: 16px; }
    .qa-grid { grid-template-columns: 1fr; }
}

/* ---------- Customer account: header menu ---------- */
.user-area { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-wrap .theme-toggle { margin-left: 4px; }
.user-menu { position: relative; }
.user-menu summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 700; font-size: .9rem;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.user-menu .uname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.user-menu[open] .chev { transform: rotate(180deg); }
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 80;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 6px;
}
.user-dropdown a, .user-dropdown button {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px;
    background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--primary-soft); text-decoration: none; }
.user-dropdown svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.user-dropdown .bal { margin-left: auto; font-size: .8rem; color: var(--primary); font-weight: 800; }
.user-dropdown form { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
@media (max-width: 640px) { .user-menu .uname { display: none; } .user-area .btn-sm { padding: 6px 12px; } }

/* ---------- Customer account: pages ---------- */
.auth-wrap { max-width: 440px; margin: 28px auto; }
.auth-wrap h1 { font-size: 1.4rem; margin-bottom: 4px; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 16px 0; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 16px; border-radius: 999px; background: #fff; color: #3c4043; border: 1px solid #dadce0; font-weight: 700; }
.btn-google:hover { background: #f7f8f8; text-decoration: none; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); font-weight: 600; }
/* White text on the old primary gradient failed in dark mode (white on
   #e07a52 is 2.97:1). The AA-safe brand pair is used in both themes. */
.balance-card { background: linear-gradient(135deg, var(--accessible-primary), var(--accessible-primary-hover)); color: #fff; border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.balance-card .lbl { opacity: .85; font-weight: 600; font-size: .9rem; }
.balance-card .amt { font-size: 2rem; font-weight: 800; line-height: 1.2; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preset-row button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--primary); background: var(--card); color: var(--primary); font-weight: 700; cursor: pointer; }
.preset-row button:hover { background: var(--primary-soft); }
.amt-plus { color: var(--success); font-weight: 800; }
.amt-minus { color: var(--danger); font-weight: 800; }
.table-wrap { overflow-x: auto; }

/* =====================================================================
   UI/UX + accessibility refinements. Brand colours, logo, fonts and layout
   concept are unchanged: only focus, spacing, states and contrast fixes.
   ===================================================================== */
:root { --link: #b5502f; }                       /* orange link text on light surfaces: 3.58:1 -> 5.06:1 */
:root[data-theme="dark"] { --link: var(--primary); }
a { color: var(--link); }
.btn-ghost { color: var(--link); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.h2-size { font-size: 1.5em; }                   /* keeps the look of headings that became the page's H1 */
main:focus { outline: none; }

/* Skip link + visible keyboard focus everywhere */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; background: #2b1d18; color: #fff; padding: 10px 16px; border-radius: 8px; border: 2px solid var(--primary); font-weight: 700; }
.skip-link:focus { top: 10px; text-decoration: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.header-search input:focus-visible { outline: none; }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--muted); opacity: 1; }

/* Buttons: one height, clear hover / active / disabled */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; line-height: 1.2; transition: background .15s, transform .08s, box-shadow .15s; }
.btn-sm { min-height: 36px; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-light { background: #fff; color: #2b1d18; }
.btn-light:hover { background: #f1e7e1; }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .6; cursor: not-allowed; }

/* Header: aligned heights, clear active/hover states */
.header-search input, .header-search button { min-height: 40px; }
.header-search input { -webkit-appearance: none; appearance: none; }
.header-search button { transition: background .15s; }
.main-nav a { padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.main-nav a:hover { border-bottom-color: rgba(255, 255, 255, .35); }
.main-nav a.active { border-bottom-color: var(--primary); }
.brand img { height: 34px; width: auto; }
.user-area .btn { min-height: 36px; }

/* Hero / carousel (Round 4.5: carousel rules moved to the final block) */
.carousel-cta { align-self: flex-start; margin-top: 18px; }
.carousel :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .55); }

/* Game cards: clearly clickable, equal height, brand-coloured accent */
.game-card { color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.game-card:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(43, 29, 24, .18); }
.game-card:active { transform: translateY(-1px); }
.game-card:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), 0 8px 22px rgba(43, 29, 24, .18); }
.game-thumb { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.game-name { min-height: 3.1em; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.3; }
.game-name::after { content: "→"; content: "→" / ""; color: var(--primary); font-weight: 700; transition: transform .15s; }
.game-card:hover .game-name::after { transform: translateX(3px); }

/* Homepage "how it works" (real steps of the existing order flow) */
.how-steps { list-style: none; counter-reset: how; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; }
.how-steps li { counter-increment: how; position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 16px 58px; }
.how-steps li::before { content: counter(how); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.how-steps strong { display: block; margin-bottom: 2px; }
.how-links { text-align: center; margin-top: 16px; color: var(--muted); }

/* Footer: same content, better rhythm, readable links, comfortable tap targets */
.footer-tag { color: #c4a99d; }
.footer-grid { gap: 28px; }
.footer-grid .footer-title { margin-bottom: 10px; color: #fff; font-size: 1rem; font-weight: 700; }
.footer-grid p { margin-bottom: 6px; }
.footer-grid a { display: inline-block; padding: 2px 0; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s, color .15s; }
.footer-grid a:hover, .footer-grid a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* Phones: header toggle/user area alignment, 2-column game grid, bigger touch targets */
@media (max-width: 700px) {
    .theme-toggle { margin-left: 0; width: 44px; height: 44px; padding: 0; }
    .theme-toggle-text { display: none; }
    .user-area { margin-left: auto; }
    .main-nav a { padding: 10px 4px; }
}
@media (max-width: 480px) {
    .grid-games { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .game-thumb { height: 100px; font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track, .game-card, .game-name::after, .btn, .carousel-btn { transition: none; }
    .game-card:hover, .game-card:active { transform: none; }
}

/* Header wraps from tablet width down, so brand + search + nav + account + theme toggle never overflow */
@media (max-width: 960px) {
    .nav-wrap { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px 12px; }
    .header-search { order: 3; flex-basis: 100%; }
    .main-nav { order: 4; flex-basis: 100%; justify-content: center; gap: 18px; }
    .nav-wrap .theme-toggle { order: 2; margin-left: 0; }
    .user-area { margin-left: auto; }
}
/* Phones: row 1 = logo + theme toggle, row 2 = search, row 3 = navigation + account buttons */
@media (max-width: 480px) {
    .nav-wrap { gap: 8px 12px; }
    .nav-wrap .theme-toggle { margin-left: auto; }
    .main-nav { flex-basis: auto; justify-content: flex-start; gap: 14px; }
    .user-area { order: 4; margin-left: auto; }
    .user-area .btn-sm { padding: 6px 12px; }
}


.footer-tag { margin-top: 10px; }

/* Search bar may shrink inside narrow screens; compact nav + account buttons on phones */
.header-search { min-width: 0; }
.header-search input { min-width: 0; }
@media (max-width: 480px) {
    .main-nav { gap: 12px; }
    .main-nav a { padding: 10px 2px; }
    .user-area { gap: 6px; }
    .user-area .btn-sm { padding: 6px 10px; }
}
@media (max-width: 380px) {
    .main-nav { gap: 8px; }
    .user-area .btn-sm { padding: 6px 9px; }
}

/* Game images (uploaded in Admin -> Games) */
.game-thumb.has-img { background: var(--card); padding: 0; overflow: hidden; }
.game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-head { display: flex; align-items: center; gap: 14px; }
.game-head-img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); flex: none; }

/* Audit remediation: maintain readable contrast for primary text and controls. */
:root:not([data-theme="dark"]) {
    --primary: #b5502f;
}
:root,
:root[data-theme="dark"] {
    --accessible-primary: #b5502f;
    --accessible-primary-hover: #923d24;
}
.header-search button,
.btn:not(.btn-light):not(.btn-ghost):not(.btn-danger):not(.btn-success) {
    background-color: var(--accessible-primary);
    border-color: var(--accessible-primary);
    color: #fff;
}
.header-search button:hover,
.btn:not(.btn-light):not(.btn-ghost):not(.btn-danger):not(.btn-success):hover {
    background-color: var(--accessible-primary-hover);
    border-color: var(--accessible-primary-hover);
    color: #fff;
}
.step-badge,
.pay.selected::before,
.admin-nav a.active,
.admin-user .avatar,
.user-menu .avatar,
.acct-tabs a.active,
.how-steps li::before {
    background-color: var(--accessible-primary);
    border-color: var(--accessible-primary);
    color: #fff;
}



/* ---- Game cards: an uploaded card picture is shown whole (no cropping) ---- */
.game-card .game-thumb.has-img { height: auto; aspect-ratio: 1 / 1; background: #0b1030; }
.game-card .game-thumb.has-img img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 480px) {
    .game-card .game-thumb.has-img { height: auto; }
}

/* ---- Floating live-chat button (links to the chat sub-domain) ---- */
.gc-chat { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gc-chat [hidden] { display: none !important; }
.gc-chat-fab { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 12px 18px; border-radius: 999px; font: inherit; font-weight: 700; color: #fff; background: var(--primary, #0e9f8a); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.gc-chat-fab:hover { filter: brightness(1.08); }
.gc-chat-fab:focus-visible, .gc-chat-go:focus-visible, .gc-chat-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--primary, #0e9f8a); }
.gc-chat-panel { position: relative; width: min(320px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 16px; background: var(--card, #fff); color: var(--text, #111); border: 1px solid var(--border, #ddd); box-shadow: 0 16px 40px rgba(0, 0, 0, .32); }
.gc-chat-title { font-weight: 800; font-size: 1.05rem; margin: 0 28px 6px 0; }
.gc-chat-text { margin: 0 0 14px; color: var(--muted, #666); font-size: .92rem; }
.gc-chat-go { display: block; text-align: center; }
.gc-chat-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #666); font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (max-width: 480px) { .gc-chat-fab span { display: none; } .gc-chat-fab { padding: 14px; } }

/* =====================================================================
   WEBSITE-FIX-001 — mobile responsiveness (360px / 768px / 1024px audit)
   Checked by CSS audit (no device lab was available; see coder report).
   - Cards that contain a wide table scroll horizontally inside the card
     on phones/tablets instead of pushing the page wide. Admin tables
     that already live in .table-wrap are unaffected.
   - No image may force the page wider than the viewport.
   - Long words/URLs in cards and table cells wrap instead of overflowing.
   ===================================================================== */
img { max-width: 100%; }
.card, .vx-card { min-width: 0; overflow-wrap: break-word; }
.table th, .table td { overflow-wrap: break-word; }
@media (max-width: 768px) {
    .card, .vx-card { overflow-x: auto; }
    .card > .table, .vx-card > .table { min-width: 560px; }
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .topup-grid { gap: 16px; }
    .pay-list { gap: 10px; }
    .pay { width: calc(50% - 5px); }
    .summary-row { gap: 12px; }
}
@media (max-width: 360px) {
    .container { padding: 0 12px; }
    .pkg-list { grid-template-columns: 1fr; }
    .pay { width: 100%; }
    .user-dropdown { min-width: 0; width: calc(100vw - 32px); }
}

/* ============================================================
   Round 3 (website-fix-001): bottom bar, running notice, popup
   beauty, bells, live feed, tutorials, auth cards, chat pulse.
   All colours use the GameCoinz variables above (light bg #f6f1ee,
   primary #d16a47, accent #f59e0b; dark bg #100d0b, primary #e07a52)
   — no Talha purple anywhere. Dark theme works through the same
   variables, so every new component reads in both themes.
   ============================================================ */

/* Cancelled order pill (light + dark). */
.pill-cancelled { background: #fce7f3; color: #9d174d; }
:root[data-theme="dark"] .pill-cancelled { background: rgba(244, 114, 182, .18); color: #f9a8d4; }

/* Running notice bar: closable, theme-aware, never a second bar. */
.notice-bar {
    background: var(--primary); color: #fff;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 10px 16px; text-align: center; font-size: .92rem; font-weight: 700;
}
.notice-bar[hidden] { display: none; }
.notice-bar a { color: #fff; text-decoration: underline; }
.notice-bar-close {
    flex: none; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%;
    background: #fff; color: var(--primary); font-size: 1.2rem; line-height: 1;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.notice-bar-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }


/* Homepage popup beauty: white rounded card (already var(--card)),
   image side + text side on desktop, stacked on mobile, big X. */
.popup-box { max-width: 640px; border-radius: 20px; }
.popup-close { width: 40px; height: 40px; font-size: 1.25rem; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
@media (min-width: 700px) {
    .popup-box { flex-direction: row; align-items: stretch; }
    .popup-art { flex: 0 0 45%; }
    .popup-art.has-img img { height: 100%; max-height: none; }
    .popup-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px; }
}
@media (max-width: 699px) {
    .popup-box { max-width: 460px; }
}


/* Client notification bell (header, logged-in only). */
.notif-bell { position: relative; flex: none; }
.notif-bell-btn {
    position: relative; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-bell-btn svg { width: 20px; height: 20px; }
.notif-bell-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.notif-bell-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
    width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
    background: var(--card); color: var(--text); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.3); padding: 12px;
}
.notif-bell-panel[hidden] { display: none; }
.notif-bell-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.notif-bell-action { background: none; border: 0; color: var(--primary); font-weight: 700; cursor: pointer; padding: 4px 2px; font-size: .85rem; }
.notif-bell-list { list-style: none; }
.notif-bell-item { border-top: 1px solid var(--border); padding: 10px 2px; }
.notif-bell-item.is-read { opacity: .65; }
.notif-bell-title { font-weight: 700; font-size: .92rem; }
.notif-bell-body { font-size: .86rem; color: var(--muted); }
.notif-bell-time { font-size: .78rem; }
.notif-bell-empty { padding: 10px 2px; }

/* Admin notification bell (admin header .vx-tools). Same dropdown
   pattern, admin chrome. Does NOT touch webpush/push_subs. */
.vx-bell { position: relative; flex: none; }
.vx-bell-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
    width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
    background: var(--card); color: var(--text); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.3); padding: 12px; text-align: left;
}
.vx-bell-panel[hidden] { display: none; }

/* Live latest-topups feed. */
.live-feed-head { display: flex; align-items: center; gap: 10px; }
.live-feed-head #live-feed-refresh { margin-left: auto; }
.live-feed-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--muted); flex: none; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex: none; }
.live-feed-list { list-style: none; display: grid; gap: 8px; }
.live-feed-item {
    display: flex; flex-direction: row; gap: 12px; align-items: center;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.live-feed-avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.live-feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-feed-player { font-family: ui-monospace, monospace; font-size: .88rem; overflow-wrap: anywhere; }
.live-feed-meta { color: var(--muted); font-size: .88rem; display: block; }
.live-feed-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.live-feed-status { background: var(--primary-soft); color: var(--success); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.live-feed-time { color: var(--muted); font-size: .82rem; }

/* Tutorial page: caption above, responsive 16:9 embed, lazy-loaded. */
.tutorial-list { display: grid; gap: 28px; max-width: 820px; margin: 0 auto; }
.tutorial-item h2 { margin-bottom: 10px; }
.tutorial-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
    overflow: hidden; background: #000; border: 1px solid var(--border);
}
.tutorial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Auth pages: same clean card everywhere; login gets the 2-column
   layout (desktop) with a CSS/SVG illustration, stacking below 700px. */
.auth-card { border-radius: 20px; box-shadow: 0 12px 32px rgba(43, 29, 24, .12); padding: 28px; }
.auth-login { max-width: 920px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }
.auth-hero {
    background: linear-gradient(150deg, var(--primary-soft), var(--card));
    border: 1px solid var(--border); border-radius: 20px; padding: 32px 26px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.auth-eyebrow { color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: 1.5px; }
.auth-hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.15; }
.auth-card-head { text-align: center; margin-bottom: 16px; }
.auth-shield { font-size: 2rem; line-height: 1; }
.auth-card-head h2 { font-size: 1.25rem; margin-top: 4px; }
.auth-sep { text-align: center; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: 1px; margin: 16px 0; }
.field-icon { position: relative; }
.field-icon .field-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 1rem; pointer-events: none;
}
.field-icon input { padding-left: 38px; }
.field-icon input[type="password"], .field-icon input[type="text"] { padding-right: 44px; }
.field-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted);
    cursor: pointer; font-size: 1.05rem; border-radius: 8px;
}
.field-eye:focus-visible, .field-icon input:focus-visible { outline: 3px solid rgba(209, 106, 71, .35); outline-offset: 1px; }
@media (max-width: 700px) {
    .auth-login { grid-template-columns: 1fr; max-width: 440px; }
}

/* Topup package cards: label left, price right in primary colour,
   selected state already clear (border + soft background + check). */
.pkg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; gap: 2px 10px; }
.pkg .title { flex: 1 1 auto; }
.pkg .price { margin-top: 0; font-size: .95rem; font-weight: 800; }
.pkg .bonus { flex-basis: 100%; }

/* Live chat: alive pulse in GameCoinz colours, disabled for
   reduced-motion users. Multiple panel buttons stack with spacing. */
@keyframes gc-chat-pulse {
    0% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(209, 106, 71, .45); }
    70% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 12px rgba(209, 106, 71, 0); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(209, 106, 71, 0); }
}
.gc-chat-fab { animation: gc-chat-pulse 2.4s infinite; }
.gc-chat-panel .gc-chat-go + .gc-chat-go { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
    .gc-chat-fab { animation: none; }
}
.vx-bell summary { position: relative; list-style: none; cursor: pointer; }
.vx-bell summary::-webkit-details-marker { display: none; }

/* Round 4.2: mobile header rows, compact phone homepage top, client bell
   panel fit, and clearer bottom-bar current indicator. All Round 4.2 CSS
   lives in this one block at the end of the file so it wins over earlier
   equal-specificity rules. Theme colours unchanged (existing variables). */

/* Item 1: header row order at <=960px — row 1 = brand + account area
   (bell/avatar, or Login/Sign Up for guests) + theme toggle; row 2 =
   search (full width); row 3 = header nav (701-960px only, see hide
   below). This overrides the <=480px rule that pushed .user-area to
   row 4, so the bell stays in the top-right corner row on phones. */
@media (max-width: 960px) {
    .brand { order: 1; }
    .user-area { order: 2; margin-left: auto; }
    .theme-toggle, .nav-wrap .theme-toggle { order: 3; margin-left: 0; }
    .header-search { order: 4; flex-basis: 100%; }
    .main-nav { order: 5; flex-basis: 100%; }
}

/* Item 1: at <=700px ONLY, hide the header nav — the bottom bar is the
   navigation there. At 701-960px the nav stays as row 3 (above rule),
   because the bottom bar is hidden there. !important wins over the
   earlier display:flex on .main-nav. This block comes after the order
   block above so the hide is not undone. */
@media (max-width: 700px) {
    .main-nav { display: none !important; }
}

/* Item 4: client bell panel fits the phone screen at <=960px.
   Containing-block trace (proven): .notif-bell ancestors are .user-area
   (no position), .nav-wrap (no position, line ~86), .container (no
   position, line ~77), then .site-header (position: sticky, lines
   ~80-84) — so position:static on the bell makes the panel position
   against the sticky header, spanning it with 16px margins both sides.
   Desktop (>960px) keeps right:0 + min(360px, 100vw-32px), untouched. */
@media (max-width: 960px) {
    .notif-bell { position: static; }
    .notif-bell-panel { left: 16px; right: 16px; width: auto; max-width: none; z-index: 80; }
}

/* Item 2: compact homepage top on phones only (<=700px). Desktop
   hero/carousel sizes unchanged. Image slides excluded by :not(.has-img)
   and keep height:auto. This block is later than the <=480px rules, so
   it overrides the <=480px hero padding and the full-width CTA buttons. */
@media (max-width: 700px) {
    .hero { padding: 20px 16px; margin: 12px 0 4px; }
    .hero-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .hero-sub { font-size: 0.95rem; margin-top: 8px; }
    .hero-cta { margin-top: 14px; gap: 10px; }
    .hero-cta .btn { width: auto; flex: 1 1 auto; }
}



/* Round 4.3: client bell failure message, created by bell.js inside
   the panel on first failure. Existing variables only, so it reads in
   both themes. */
.notif-bell-error {
    margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--danger); background: var(--primary-soft);
    color: var(--text); font-size: .9rem; font-weight: 700;
}


/* My Codes page: header row (title left, Redeem right) and disabled
   Redeem state (a span, no href, so it can never submit a form). */
.codes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn-disabled { opacity: .55; cursor: not-allowed; }

/* Rank sections on account.php: header row, big numbers, progress
   bar, stat cards, and the journey list. Text pills only, no rank
   icons, and only neutral progress wording. */
.rank-head { display: flex; align-items: center; gap: 12px; }
.rank-head .avatar { width: 56px; height: 56px; font-size: 1.3rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; }
.rank-big { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.rank-progress { height: 12px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; margin: 8px 0; }
.rank-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.rank-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rank-stat { border: 1px solid var(--border); border-radius: 16px; padding: 16px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); }
.rank-stat-num { display: block; font-weight: 800; font-size: 1.15rem; word-break: break-word; }
.rank-stat .muted { display: block; font-size: .85rem; }
.rank-journey { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rank-journey li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); }
.rank-pill-current { background: var(--primary-soft); color: var(--primary); }
.rank-pill-reached { background: var(--primary-soft); color: var(--text); }
.rank-pill-locked { background: var(--card); color: var(--muted); }
@media (max-width: 700px) {
    .rank-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Round 4.5 final: Talha-style design system in GameCoinz colours
   only (light bg #f6f1ee, primary #d16a47, accent #f59e0b; dark bg
   #100d0b, primary #e07a52). No Talha purple/green, no new
   purple/green hex. White-on-primary contrast limitation unchanged
   (~3.58:1 light / ~2.97:1 dark) — theme colours are not changed.
   Blocks below are in spec order: design system, carousel, notice,
   bottom bar, bell, account tabs. Each is the ONE place for its
   contested properties; earlier competitors were deleted, not
   appended over. No new !important is added here.
   ============================================================ */

/* Round 4.5 final: design system — cards, headings, buttons, rhythm */
.card { border-radius: 18px; padding: 20px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); }
@media (min-width: 701px) { .card { padding: 24px; } }
:root[data-theme="dark"] .card { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.card h2, .section-title { font-weight: 800; line-height: 1.2; }
.section { padding: 28px 0; }
@media (max-width: 700px) { .section { padding: 20px 0; } }
.btn { min-height: 44px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Homepage: hero, game cards, How steps, footer rhythm */
.hero { border-radius: 20px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); padding: 36px 28px; margin: 22px 0 4px; }
:root[data-theme="dark"] .hero { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.hero-eyebrow { font-weight: 800; letter-spacing: 1.5px; }
.hero-title { font-weight: 800; line-height: 1.15; }
.hero-sub { max-width: 640px; }
@media (max-width: 700px) {
    .hero { padding: 20px 16px; margin: 12px 0 4px; }
    .hero-cta { gap: 12px; }
    .hero-cta .btn { flex: 1 1 auto; }
}
@media (max-width: 360px) { .hero-cta { flex-wrap: wrap; } .hero-cta .btn { flex-basis: 100%; } }
.game-card { border-radius: 18px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); }
:root[data-theme="dark"] .game-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.game-name { font-weight: 700; padding: 12px; }
.how-steps li { border-radius: 18px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); padding: 16px; }
:root[data-theme="dark"] .how-steps li { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.how-steps li strong { font-weight: 700; }
.footer-grid { gap: 28px; }
.footer-grid h4, .footer-grid .footer-title { font-weight: 800; }
/* Auth cards (login/register/forgot/2FA): one Talha card everywhere */
.auth-card { border-radius: 20px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); padding: 28px; }
:root[data-theme="dark"] .auth-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (max-width: 700px) { .auth-card { padding: 20px; } .auth-hero { padding: 20px; margin-bottom: 12px; } .auth-login { grid-template-columns: 1fr; max-width: 440px; } }
.auth-card .field input, .auth-card .field select { border-radius: 14px; min-height: 48px; }
.auth-card .btn { min-height: 48px; }
.auth-card-head h2 { font-weight: 800; }
/* My Account: container discipline, profile header, wallet, rank */
.container { padding: 0 16px; }
@media (max-width: 360px) { .container { padding: 0 12px; } }
.topup-grid > *, .card, .rank-stat, .rank-journey li { min-width: 0; }
.card, .rank-stat-num, .rank-journey-text { overflow-wrap: break-word; }
section.card, .topup-grid .card { overflow: visible; }
.rank-head { display: flex; align-items: center; gap: 12px; }
.rank-head .avatar { position: relative; width: 56px; height: 56px; flex: none; }
.rank-head .avatar::after { content: ''; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--card); }
.rank-head > div { flex: 1; min-width: 0; }
.rank-head h2 { white-space: normal; }
section.card .topup-grid .card:first-child .rank-big { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
@media (max-width: 700px) { section.card .topup-grid .card:first-child .rank-big { font-size: 1.5rem; } }
.rank-big { font-size: 1.5rem; font-weight: 800; }
.rank-progress { height: 12px; border-radius: 999px; background: var(--primary-soft); }
.rank-progress-fill { background: var(--primary); }
.rank-stats { gap: 12px; }
.rank-stat { border-radius: 16px; padding: 16px 8px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); }
:root[data-theme="dark"] .rank-stat { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rank-stat-num { display: block; font-size: 1.15rem; font-weight: 800; word-break: break-word; }
.rank-stat .muted { display: block; font-size: .85rem; }
.rank-journey li { border-radius: 16px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); }
:root[data-theme="dark"] .rank-journey li { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rank-journey-text { flex: 1 1 auto; min-width: 0; }
.rank-journey-text strong { display: block; font-weight: 700; }
.rank-journey-text .muted { display: block; }
.rank-journey .pill { flex: none; white-space: nowrap; }
/* My Codes: full container width, centred empty state */
.codes-card { width: 100%; max-width: none; }
.codes-empty, .codes-empty-action { text-align: center; }
/* My Orders / live feed: Talha cards, table scrolls inside .table-wrap */
.card .table-wrap { border-radius: 16px; }
.live-feed { border-radius: 18px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); }
:root[data-theme="dark"] .live-feed { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.live-feed-item { border-radius: 16px; padding: 10px 14px; box-shadow: 0 2px 8px rgba(43, 29, 24, .08); }
:root[data-theme="dark"] .live-feed-item { box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.live-feed-player { font-weight: 700; }
/* Support / chat: card system only, destinations unchanged */
.gc-chat-panel { border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }

/* Round 4.5 final: carousel — ONE winning block per breakpoint.
   Arithmetic at every phone width: side padding 72px = button 32px +
   edge 8px + gap 32px, so text starts 32px clear of the button's inner
   edge and can never sit under prev/next. Bottom padding 40px clears
   the dots (bottom 6px + 24px hit area = top edge 30px from bottom)
   with 10px clearance; pause is kept clear of text by horizontal
   separation (pause left 12px, text starts at 72px), not by bottom
   padding alone. At 320px the text column is narrow and wraps; side
   padding never drops below 72px. */
.carousel { border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); }
:root[data-theme="dark"] .carousel { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.carousel-slide { min-width: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.carousel-slide:not(.has-img) { padding: 40px 72px; min-height: 260px; }
.carousel-slide h2, .carousel-slide .slide-title { font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.carousel-slide .slide-title { font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 12px 0 6px; }
.carousel-slide p { opacity: .92; max-width: 520px; line-height: 1.5; }
.carousel-slide .tag { align-self: flex-start; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); padding: 3px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: 1px; }
.carousel-cta { align-self: flex-start; margin-top: 18px; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: #333; font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-btn:hover { background: #fff; }
.carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; pointer-events: none; }
.carousel-dots button { pointer-events: auto; width: 24px; height: 24px; padding: 7px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, .5); background-clip: content-box; cursor: pointer; }
.carousel-dots button.on { background-color: #fff; background-clip: content-box; }
.carousel-pause { position: absolute; left: 12px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #2b1d18; color: #fff; font-size: .65rem; cursor: pointer; z-index: 2; }
.carousel-pause:hover { background: #000; }
.carousel-slide.has-img { padding: 0; min-height: 0; display: block; background: #050816; }
.carousel-slide.has-img a { display: block; }
.carousel-slide.has-img img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
    .carousel-slide:not(.has-img) { padding: 20px 72px 40px 72px; min-height: 180px; }
    .carousel-slide .slide-title { font-size: clamp(1.25rem, 5vw, 1.6rem); }
    .carousel-btn { width: 32px; height: 32px; font-size: .95rem; }
    .carousel-btn.prev { left: 8px; }
    .carousel-btn.next { right: 8px; }
    .carousel-dots { bottom: 6px; }
    .carousel-pause { left: 12px; bottom: 10px; width: 32px; height: 32px; }
    .carousel-slide.has-img { padding: 0; min-height: 0; display: block; }
}
@media (max-width: 480px) {
    .carousel-slide:not(.has-img) { padding: 20px 72px 40px 72px; min-height: 180px; }
    .carousel-btn { width: 32px; height: 32px; left: 8px; right: 8px; }
    .carousel-btn.prev { left: 8px; }
    .carousel-btn.next { right: 8px; }
    .carousel-dots { bottom: 6px; }
    .carousel-slide.has-img { padding: 0; min-height: 0; display: block; }
}
@media (max-width: 360px) {
    .carousel-slide:not(.has-img) { padding: 20px 72px 40px 72px; min-height: 180px; }
    .carousel-btn { width: 32px; height: 32px; }
    .carousel-btn.prev { left: 8px; }
    .carousel-btn.next { right: 8px; }
    .carousel-dots { bottom: 6px; }
    .carousel-slide.has-img { padding: 0; min-height: 0; display: block; }
}

/* Round 4.5 final: notice — ONE animation rule. The v4.4 bug was
   nowrap on the track but not on each copy, plus an early animation
   rule later blocks could fight. Both are fixed here: nowrap AND
   flex:none on every copy, overflow hidden on the viewport, exactly
   one animation declaration below (reduced-motion block follows
   immediately and is the only override allowed). */
.notice-bar { background: var(--primary); color: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; text-align: center; font-size: .92rem; font-weight: 700; }
.notice-bar[hidden] { display: none; }
.notice-bar a { color: #fff; text-decoration: underline; }
.notice-bar-label { flex: none; white-space: nowrap; font-weight: 800; letter-spacing: .05em; }
.notice-bar-viewport { overflow: hidden; flex: 1; min-width: 0; text-align: left; }
.notice-bar-track { display: inline-flex; white-space: nowrap; animation: gc-notice-scroll 30s linear infinite; }
.notice-bar-copy { white-space: nowrap; flex: none; padding-right: 3rem; }
@keyframes gc-notice-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.notice-bar:hover .notice-bar-track, .notice-bar:focus-within .notice-bar-track { animation-play-state: paused; }
.notice-bar-close { flex: none; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.notice-bar-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.notice-bar-viewport:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .notice-bar-track { animation: none; display: block; white-space: normal; }
    .notice-bar-track .notice-bar-copy + .notice-bar-copy { display: none; }
    .notice-bar-track .notice-bar-copy { white-space: normal; padding-right: 0; }
    .notice-bar-viewport { overflow: visible; }
}

/* Round 4.5 final: bottom bars — ONE winning block. Guest: 4 equal
   buttons, Topup normal (no special Topup CSS anywhere in this
   file). Logged-in: 5 buttons, Add Money ALWAYS primary (this
   overrules the v4.4 shape-only muted centre, per Sayeed's
   "copy everything" correction): a 56px primary-filled circle, white
   icon, raised 16px above the 64px bar. The raised circle sits in
   the 16px gap between the 64px bar and the 80px body padding, so it
   cannot cover footer links or form buttons. Desktop: hidden. */
.bottom-bar { display: none; }
@media (max-width: 700px) {
    body:not(.vx) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .bottom-bar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
        height: 64px; align-items: flex-start;
        background: var(--card); border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgba(0,0,0,.12);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bottom-bar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 52px; color: var(--muted); background: var(--card); font-weight: 700; font-size: .78rem;
        text-align: center; padding: 6px 2px; text-decoration: none; white-space: nowrap;
    }
    .bottom-bar a svg { width: 24px; height: 24px; flex: none; }
    .bottom-bar a:active, .bottom-bar a:focus-visible, .bottom-bar a[aria-current="page"] { color: var(--primary); text-decoration: none; }
    .bottom-bar a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .bottom-bar a[aria-current="page"] { color: var(--primary); font-weight: 800; background: var(--primary-soft); position: relative; }
    .bottom-bar a[aria-current="page"]:not(.bottom-bar-addmoney)::before {
        content: ''; position: absolute; top: 0; left: 50%;
        transform: translateX(-50%); width: 24px; height: 3px;
        border-radius: 999px; background: var(--primary);
    }
    .bottom-bar-loggedin a { font-size: .72rem; }
    .bottom-bar-loggedin a span { white-space: nowrap; }
    .bottom-bar-loggedin a.bottom-bar-addmoney { background: var(--card); color: var(--muted); }
    .bottom-bar-loggedin a.bottom-bar-addmoney svg {
        width: 56px; height: 56px; padding: 14px; box-sizing: border-box;
        border: 2px solid var(--card); border-radius: 50%;
        background: var(--primary); color: #fff; margin-top: -16px;
        box-shadow: 0 8px 24px rgba(43, 29, 24, .12);
    }
    .bottom-bar-loggedin a.bottom-bar-addmoney[aria-current="page"] { background: var(--card); }
    .bottom-bar-loggedin a.bottom-bar-addmoney[aria-current="page"] span { font-weight: 800; color: var(--primary); }
    .gc-chat { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Round 4.5 final: bell — styling only (endpoint + JS contract unchanged).
   Desktop: absolute panel below the button row. <=960px: the bell is
   position static so the panel positions against the sticky header
   (.user-area, .nav-wrap, .container unpositioned), 16px margins. */
.notif-bell { position: relative; flex: none; }
.notif-bell-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
    width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
    background: var(--card); color: var(--text); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: 0 8px 24px rgba(43, 29, 24, .12); padding: 12px;
}
:root[data-theme="dark"] .notif-bell-panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.notif-bell-panel[hidden] { display: none; }
.notif-bell-action { background: none; border: 0; color: var(--primary); font-weight: 700; cursor: pointer; padding: 6px 12px; font-size: .85rem; border-radius: 999px; }
.notif-bell-error { margin: 0 0 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--danger); background: var(--primary-soft); color: var(--text); font-size: .9rem; font-weight: 700; }
@media (max-width: 960px) {
    .notif-bell { position: static; }
    .notif-bell-panel { left: 16px; right: 16px; width: auto; max-width: none; z-index: 80; }
}

/* Round 4.5 final: account tabs — ONE scrollable row, never two rows.
   No tab removed, order unchanged (profile, orders, wallet, codes,
   support, + conditional wishlist/phone from account_nav.php). */
.acct-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; margin: 18px 0 16px; padding-bottom: 2px; }
.acct-tabs a { flex: none; white-space: nowrap; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; font-size: .9rem; }
.acct-tabs a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.acct-tabs a:hover { text-decoration: none; border-color: var(--primary); }