/* ============================================================
   Brand skin for the member area.

   Every colour in here comes from a token in tokens.css, which is
   compiled per brand from that brand's design-system file. No hex
   literals: a value written here would follow SBO14K onto every
   other brand that ships this codebase.

   Loaded after base.css, so it wins on order rather than on
   !important. Green stays reserved for money-positive states.
   ============================================================ */

/* ---------- Typography ----------
   The one number the whole type scale hangs off. Every font-size in these
   sheets is in rem now, so this is the only place a brand has to say "our
   face runs small" — and theme.typography.baseSize is where it says it.

   That mattered the moment a second brand arrived. A px scale is a scale for
   exactly one typeface: the same 15px is comfortable in Anuphan and cramped in
   a face with a smaller x-height, and the fix used to be 253 edits. Note what
   this does *not* fix — a face whose glyphs are wider still wraps differently,
   and no root size repairs that. This makes the size adjustable, not the
   metrics identical.

   Bootstrap sizes its padding, its gutters and its components in rem as well,
   so moving this moves the layout with the text rather than leaving the text
   to outgrow its boxes. That is the intended behaviour and it is worth knowing
   before turning the knob.

   The fallback is 16px, which is what a browser gives an unstyled document:
   this brand's --base-size is 16px, so today the declaration changes nothing
   at all. It is the handle, not the change. */
html {
    font-size: var(--base-size, 16px);
}

/* sbo14k.com serves Anuphan for both body and headings. The base sheet
   (base.css) points its own font-family declarations at
   var(--font-body), and its scale was divided by
   0.75 — DB Heavent Condensed rendered far smaller per px than Anuphan,
   so the old scale ran hot. This block stays as a safety net over
   Bootstrap's defaults. `i` and ::before are deliberately NOT listed:
   all 180 icons in the views sit on <i>, and they keep their own face.

   `div` is not listed either, and that is load-bearing. A div inherits its
   face from body like everything else, so listing it changed nothing except
   to make the brand face unrefusable — and .crypto-address-text asks for
   monospace on purpose, because a wallet address is read character by
   character. With div in the list the address rendered in Anuphan, where a
   capital I and a lowercase l are the same stroke. Measured: dropping it
   moves exactly one computed value across the 1,973 the gallery renders. */
body,
p,
a,
span,
small,
label,
li,
td,
th,
button,
input,
optgroup,
select,
textarea,
option,
.btn,
input.form-control,
textarea.form-control,
select.form-control,
.custom-select {
    font-family: var(--font-body) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading) !important;
}

/* ---------- Base ---------- */
body {
    background-color: var(--bg) !important;
    background-image: var(--grad-hero);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    /* one notch under sbo14k's 16px --base-size so unstyled text matches
       the rescaled 15px body copy of the dashboard sheet */
    /* font-size: 0.875rem; */
    /* Thai needs headroom for tone marks above and vowels below */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
p,
a,
span,
small,
label,
li,
td,
th,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
}

/* ---------- Animated aurora background ----------
   Fixed layer behind all content; soft brand-coloured orbs drift
   slowly for a living, premium depth. Sits over body's static
   hero gradient so we get base dimension + gentle movement. */
.sbg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.sbg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
    mix-blend-mode: screen;
}
.sbg-orb--blue {
    width: 48vw;
    height: 48vw;
    left: -10vw;
    top: -12vw;
    background: radial-gradient(circle, var(--primary-a65) 0%, transparent 68%);
    animation: sbg-drift-1 24s ease-in-out infinite;
}
/* class name kept (markup depends on it) — now carries the brass accent */
.sbg-orb--green {
    width: 42vw;
    height: 42vw;
    right: -12vw;
    bottom: -14vw;
    background: radial-gradient(
        circle,
        var(--accent-500-a34) 0%,
        transparent 68%
    );
    animation: sbg-drift-2 28s ease-in-out infinite;
}
.sbg-orb--violet {
    width: 36vw;
    height: 36vw;
    left: 42vw;
    top: 32vh;
    background: radial-gradient(
        circle,
        var(--blue-600-a45) 0%,
        transparent 68%
    );
    animation: sbg-drift-3 32s ease-in-out infinite;
}
@keyframes sbg-drift-1 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(7vw, 8vh) scale(1.12);
    }
    66% {
        transform: translate(3vw, -4vh) scale(0.95);
    }
}
@keyframes sbg-drift-2 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-8vw, -6vh) scale(1.1);
    }
    66% {
        transform: translate(-3vw, 5vh) scale(0.96);
    }
}
@keyframes sbg-drift-3 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-10vw, 6vh) scale(1.18);
        opacity: 0.55;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sbg-orb {
        animation: none !important;
    }
}

.text-muted,
.history-link-text,
small.text-muted {
    color: var(--text-dim) !important;
}

hr {
    border-color: var(--border);
}

a:hover {
    color: var(--accent-400);
}

/* ---------- Header / Navbar ----------
   The bar itself is styled further down, under "HEADER — premium sticky bar":
   a translucent scrim over a backdrop blur. A second .navbar rule used to sit
   here painting a flat gradient, at the same specificity and earlier in the
   file, so it never once reached the screen. It cost an afternoon: the scale
   it named was tinted, nothing moved, and the tint looked broken. */

/* top-nav uses gradient-clipped text in the original — reset to clean light/emerald */
.top-nav ul li a,
.top-nav ul li i,
.top-nav ul li p {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-soft) !important;
}
.top-nav ul li:hover a,
.top-nav ul li:hover i,
.top-nav ul li:hover p {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--accent-400);
}

/* ---------- Slide / Hero ---------- */
.slide {
    background: var(--navy-950);
}

/* ---------- Content surface ---------- */
.container.content {
    background-color: var(--card-2);
    background-image:
        radial-gradient(
            90% 55% at 100% 0%,
            var(--primary-a22) 0%,
            transparent 55%
        ),
        radial-gradient(
            85% 55% at 0% 100%,
            var(--accent-500-a12) 0%,
            transparent 55%
        ),
        radial-gradient(
            70% 45% at 50% 0%,
            var(--blue-400-a10) 0%,
            transparent 60%
        ),
        linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border: 1px solid var(--border-strong);
    box-shadow:
        var(--shadow-card),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    color: var(--text);
}

/* ---------- Page title ----------
   Shared header used on tournament / promotion / reward / affiliate
   pages. Was an old bg-nav.jpg strip with grey gradient text. Kept as an
   open section heading — NO box / border / fill (so it never reads like a
   button): just a bright glowing title flanked by tapered gradient rules. */
.row.text-center.page-title {
    position: relative;
    overflow: visible;
    margin: 6px 0 22px;
    padding: 4px 0 14px;
    background: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* soft full-width divider beneath the heading, faded at both ends */
.row.text-center.page-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 78%;
    max-width: 460px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--primary-a30) 30%,
        var(--accent-500-a38) 70%,
        transparent
    );
}
.page-title h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    font-weight: 700;
    /* no tracking: it pulls Thai clusters apart from their tone marks */
    letter-spacing: normal;
    line-height: 1.35;
    /* clean white title with a soft brand glow */
    color: var(--primary-ink);
    -webkit-text-fill-color: var(--primary-ink);
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.35),
        0 2px 22px var(--primary-a45);
}
/* tapered gradient rules flanking the title, brand blue → emerald */
.page-title h3::before,
.page-title h3::after {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    filter: drop-shadow(0 0 5px var(--primary-a50));
}
.page-title h3::before {
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue-500) 70%,
        var(--accent-400)
    );
}
.page-title h3::after {
    background: linear-gradient(
        90deg,
        var(--accent-400),
        var(--blue-500) 30%,
        transparent
    );
}
@media (max-width: 575.98px) {
    .row.text-center.page-title {
        margin: 2px 0 16px !important;
        padding: 2px 0 11px !important;
    }
    .page-title h3 {
        gap: 0;
        letter-spacing: normal;
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
    }
    /* hide the decorative flanking rules on phones — keep just the title */
    .page-title h3::before,
    .page-title h3::after {
        display: none !important;
    }
    .row.text-center.page-title::after {
        width: 88%;
    }
}

/* ---------- Contact list (LINE / Telegram) — phones ----------
   On small screens hide the oversized channel logo and right-size the
   heading + caption so the text breathes and fills the row cleanly. */
@media (max-width: 575.98px) {
    .list-contact-left .icon-history-box {
        display: none !important;
    }
    .list-contact-left {
        width: 56% !important;
    }
    .list-contact-right {
        width: 44% !important;
        padding-left: 6px;
    }
    .list-contact-left h5 {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        margin-top: 3px !important;
    }
    .list-contact-left p.chanel {
        font-size: 0.6875rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }
    /* keep the CTA button readable and contained in the narrow column */
    .list-contact-right .btn-line {
        font-size: 0.75rem !important;
        padding: 7px 8px !important;
        line-height: 1.2 !important;
        white-space: normal;
    }
    .list-contact-right p {
        margin-top: 6px !important;
    }
}

/* Common "white panel" surfaces inside the content area → dark cards */
.card,
.affiliate-box,
.stat-content,
.cards-box,
.modal-content,
.list-group-item,
.tnm-top-reward,
.tnm-current-reward,
.tnm-player {
    background-color: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    color: var(--text);
    box-shadow: var(--shadow-card) !important;
}

.card-header {
    background-color: var(--navy-800);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* ---------- Credit box ---------- */
.credit-box {
    background-color: var(--navy-850);
    background-image:
        radial-gradient(
            130% 130% at 0% 0%,
            var(--primary-a38) 0%,
            transparent 46%
        ),
        radial-gradient(
            130% 130% at 100% 100%,
            var(--accent-500-a20) 0%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            var(--border) 0%,
            var(--bg-elev) 52%,
            var(--navy-800) 100%
        );
    border: 1px solid var(--border-strong);
    box-shadow:
        var(--shadow-card),
        0 0 0 1px var(--primary-a12) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.credit-box small {
    color: var(--text-soft);
}
/* The balance. It is painted as a gradient clipped to its own glyphs, which
   means the only thing separating it from the card is the difference between
   two brand colours — and since the accent is now read from the brand file,
   that difference is whatever the next brand happens to send. A brand whose
   accent sits near its surface colour would ship a dashboard whose headline
   number is not there.

   --figure-ink is the accent while the accent can be read on this card, and
   the body ink the moment it cannot. For SBO14K it compiles to exactly the two
   colours this rule has always used, so nothing here moves today.

   The shadow is the second half of it. Clipped text has no fill of its own to
   fall back on, and the card underneath is a gradient with two radial washes
   over it, so the glyph edges meet a different colour at each corner. A dark
   halo gives them an edge to sit against wherever they land — and black at 45%
   belongs to no brand, so it costs the next one nothing. */
.credit-box p,
.credit-box .amount {
    background: -webkit-linear-gradient(
        180deg,
        var(--figure-ink-lit),
        var(--figure-ink)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* The transfer-wallet chip, which lands in the space the figure above it takes
   back. base.css pulls .credit-box p up with margin-bottom: -34px — a tightening
   from a layout where nothing followed the number — and the chip is a later
   addition that follows it. Measured: the figure's box ended 31px below the top
   of the chip on desktop and 7px below on mobile, where the same rule is -10px
   inside the 575px breakpoint.

   The pull is cancelled here rather than removed there, because it is still
   doing its job for every account that has no transfer wallet to show: take it
   out of base.css and the credit box grows by 34px for all of them. The two
   numbers are the two the pull uses, plus four pixels of air. */
.credit-box .transfer-wallet {
    position: relative;
    margin-top: 38px;
}
@media (max-width: 575px) {
    .credit-box .transfer-wallet {
        margin-top: 14px;
    }
}

/* The refresh icon sits on the same card and is clipped the same way. */
.credit-box .refresh {
    background: -webkit-linear-gradient(
        var(--figure-ink-lit),
        var(--figure-ink)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Buttons ----------
   The brand file states its buttons in full — fill, text, hover fill, hover
   text and radius — under theme.buttons, and publishes them as --theme-btn-*.
   These read those, so a brand that changes its button in its own editor
   changes it here, rather than here staying on a gradient this file rebuilt
   out of the accent ramp and calling it close enough.

   The hover is the part that was not being honoured at all: this brand asks
   for the gradient reversed, and both states were painting the same fill with
   a brightness filter over it. */
.btn-red,
.btn-green {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border-color: transparent;
    border-radius: var(--theme-btn-radius);
    box-shadow: var(--shadow-glow);
}
.btn-red:hover,
.btn-green:hover {
    background: var(--theme-btn-hbg);
    color: var(--theme-btn-htext);
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

/* Withdraw / secondary → ghost on dark */
.btn-silver,
.btn-zinc {
    background: var(--wash-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
}
.btn-silver:hover,
.btn-zinc:hover {
    background: var(--card-hover) !important;
    border-color: var(--blue-400) !important;
    color: var(--primary-ink) !important;
}

/* Gold keeps gold (matches sbogool accent) */
.btn-gold {
    background: var(--grad-gold) !important;
    color: var(--accent-ink) !important;
    border-color: transparent !important;
}
.btn-gold:hover {
    filter: brightness(1.04);
    box-shadow: 0 12px 30px -10px var(--accent-500-a50);
}

/* Blue */
.btn-blue,
.btn-blue:hover {
    background: var(--grad-blue);
    color: var(--primary-ink);
    border-color: transparent;
}
.btn-blue:hover {
    box-shadow: var(--shadow-blue-glow);
}

.btn-outline-red {
    color: var(--accent-400);
    border-color: var(--accent-500);
    background: transparent;
}
.btn-outline-red:hover {
    background: var(--grad-cta);
    color: var(--accent-ink);
    border-color: transparent;
}

/* Bootstrap primary + success (inline magenta in template) + bg-primary */
.btn-primary,
.btn-success {
    /* background: var(--grad-blue) !important; */
    border: 1px solid transparent !important;
    color: var(--primary-ink) !important;
}
/* btn-success had leftover magenta from the base sheet — pull every
   state onto the same blue gradient as btn-primary for consistency */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--grad-blue) !important;
    border-color: transparent !important;
    color: var(--primary-ink) !important;
}
.btn-primary:hover,
.btn-success:hover {
    box-shadow: var(--shadow-blue-glow);
    filter: brightness(1.05);
}
.bg-primary {
    background: var(--grad-blue) !important;
}

/* LINE button — keep brand green but use the same gradient + glow + lift
   treatment as the other CTAs so it reads as part of the set */
.btn-line,
.btn-line:hover,
a.btn-line {
    background: linear-gradient(
        135deg,
        var(--green-500) 0%,
        var(--green-600) 100%
    );
    border: 1px solid transparent;
    color: var(--primary-ink);
    box-shadow: 0 10px 30px -10px var(--green-500-a60);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}
.btn-line:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 38px -8px var(--green-500-a70);
}
.btn-line i,
.btn-line .fa-line {
    color: var(--primary-ink);
}

/* ---------- Navigation (play + tiles) ---------- */
.play-button,
.play-button:hover {
    background: var(--grad-brand);
    color: var(--primary-ink);
    box-shadow: var(--shadow-blue-glow), var(--shadow-glow);
}
.play-button i,
.play-button p {
    color: var(--primary-ink);
}

/* Tile buttons used images (bg-nav.jpg) → dark navy cards */
.btn-dark-tri {
    background: var(--card);
    background-image: none;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-card);
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}
.btn-dark-tri:hover {
    background: var(--card-hover);
    border-color: var(--blue-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow);
}
.btn-dark-tri i,
.btn-dark-tri p,
.btn-dark-tri span {
    color: var(--text);
}
.btn-dark-tri:hover i,
.btn-dark-tri:hover p,
.btn-dark-tri:hover span {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- User info chips ---------- */
section.user-infor a {
    color: var(--text);
}
span.reset-password {
    background: var(--wash-2);
    color: var(--text-soft);
    border: 1px solid var(--border);
}
span.statment-button {
    background: var(--blue-600);
    color: var(--primary-ink);
    border: 1px solid transparent;
}
span.reset-password i,
span.statment-button i {
    color: inherit;
}

/* ---------- Forms ---------- */
input.form-control,
textarea.form-control,
select,
select.form-control,
.custom-select,
.input-group-text {
    background-color: var(--navy-900) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--text-dim);
}
input.form-control:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus,
.custom-select:focus {
    background-color: var(--navy-850) !important;
    border-color: var(--blue-400) !important;
    box-shadow: 0 0 0 3px var(--primary-a22) !important;
    color: var(--text) !important;
}
.input-group-text {
    background-color: var(--navy-800) !important;
}
option {
    background-color: var(--navy-900);
    color: var(--text);
}
label {
    color: var(--text-soft);
}

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.alert-danger {
    background: linear-gradient(
        135deg,
        var(--red-500-a16) 0%,
        var(--red-500-a8) 100%
    );
    border-color: var(--red-500-a40);
    color: var(--text);
}
.alert-danger,
.alert-danger * {
    color: var(--red-100);
}
.alert-warning {
    background: linear-gradient(
        135deg,
        var(--accent-500-a16) 0%,
        var(--accent-500-a8) 100%
    );
    border-color: var(--accent-500-a40);
}
.alert-warning,
.alert-warning * {
    color: var(--gold-400);
}
.alert-success {
    background: linear-gradient(
        135deg,
        var(--green-500-a16) 0%,
        var(--green-500-a8) 100%
    );
    border-color: var(--green-500-a40);
}
.alert-success,
.alert-success * {
    color: var(--green-400);
}
.alert-info {
    background: linear-gradient(
        135deg,
        var(--primary-a16) 0%,
        var(--primary-a8) 100%
    );
    border-color: var(--primary-a40);
}
.alert-info,
.alert-info * {
    color: var(--blue-400);
}

/* ---------- Tables ---------- */
.table,
.table td,
.table th {
    color: var(--text);
    border-color: var(--border) !important;
}
.table thead th {
    border-bottom-color: var(--border-strong) !important;
    color: var(--text-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}
.table-hover tbody tr:hover {
    background-color: var(--card-hover);
    color: var(--primary-ink);
}
tr.reward-table-head,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    background: var(--navy-800);
    background-image: none;
}

/* Reward / tournament value text remained dark on now-dark cards → lighten */
.tnm-top-reward h4,
.tnm-current-reward h4,
.tnm-player h4,
.dashboard-title h4,
.step-label {
    color: var(--text-soft);
}
.tnm-top-reward h3 {
    color: var(--accent-400);
}
.tnm-current-reward h3 {
    color: var(--blue-400);
}
.tnm-player h3 {
    color: var(--green-400);
}

/* ---------- Pagination ---------- */
.page-link {
    background-color: var(--navy-900) !important;
    border-color: var(--border) !important;
    color: var(--blue-400) !important;
}
.page-link:hover {
    background-color: var(--card-hover) !important;
    color: var(--primary-ink) !important;
}
.page-item.active .page-link {
    background-color: var(--blue-600) !important;
    border-color: var(--blue-500) !important;
    color: var(--primary-ink) !important;
}
.page-item.disabled .page-link {
    background-color: var(--navy-950) !important;
    color: var(--text-dim) !important;
}

/* ---------- Badges ---------- */
.badge-warning {
    background-color: var(--gold-500);
    color: var(--accent-ink);
}
.badge-secondary {
    background-color: var(--wash-2);
    color: var(--text-soft);
}

/* ---------- Footer ---------- */
footer {
    color: var(--text-dim);
}
footer.text-muted,
footer.text-muted p {
    color: var(--text-dim) !important;
}
/* Mobile bottom nav — the bar itself is painted further down, under the
   sticky-bar block, with the same scrim-over-blur treatment as the header. A
   flat-gradient twin used to sit here, earlier and at equal specificity, and
   was never once on screen. Both bars had one. */
.site-footer-mobile a,
.site-footer-mobile i {
    color: var(--text-soft);
}
.site-footer-mobile a:hover,
.site-footer-mobile i:hover {
    color: var(--accent-400);
}
a.m-auto.mobile-nav-center {
    color: var(--primary-ink);
}
.fix-nav-bottom-active,
.fix-nav-bottom-active:hover {
    background: var(--grad-cta) !important;
    animation: none !important;
}

/* ---------- Modals / SweetAlert ---------- */
.modal-content {
    background: linear-gradient(
        180deg,
        var(--card) 0%,
        var(--card-2) 100%
    ) !important;
    border: 1px solid var(--border-strong) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}
.modal-backdrop {
    background-color: var(--ink-deep);
}
.close {
    color: var(--text-soft);
    text-shadow: none;
}
.swal2-popup {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong);
}
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--text) !important;
}

/* ---------- Misc surfaces that used the navy bg image ---------- */
.t-countdown li,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    box-shadow: var(--shadow-card);
}

/* ---------- Striped list rows (history / auth lists) ---------- */
.bg-even {
    background-color: var(--wash);
}
.bg-odd {
    background-color: var(--wash-2);
}

/* ---------- Auth (login / register) ---------- */
.btn-auth-register {
    background: var(--grad-cta);
    color: var(--accent-ink);
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}
.btn-auth-register:hover {
    background: var(--grad-cta);
    color: var(--accent-ink);
    border-color: transparent;
    filter: brightness(1.05);
}
.login h4,
.register h4,
.reset-password h4 {
    color: var(--text);
}

/* ============================================================
   HEADER — premium sticky bar
   ============================================================ */
.header {
    position: relative;
    z-index: 300;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 300;
    padding: 6px 0 8px;
    background: linear-gradient(
        180deg,
        var(--scrim-modal) 0%,
        var(--scrim) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.85);
    overflow: visible;
}
/* animated brand-gradient underline (signature blue→emerald sheen) */
.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--blue-500) 25%,
        var(--accent-500) 50%,
        var(--blue-500) 75%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: sbg-sheen 7s linear infinite;
    opacity: 0.9;
}
@keyframes sbg-sheen {
    to {
        background-position: 220% 0;
    }
}

/* radial glow behind centered logo */
.navbar .col-8 {
    position: relative;
}
.navbar .col-8::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, 86%);
    height: 110%;
    pointer-events: none;
    background: radial-gradient(
        closest-side,
        var(--primary-a38),
        var(--accent-500-a12) 55%,
        transparent 75%
    );
    filter: blur(4px);
    z-index: 0;
}
.header-logo {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 16px var(--primary-a45));
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}
.header-logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 8px 22px var(--accent-500-a55));
}

/* top-nav items → glassy pill chips with icon over label */
.top-nav {
    margin-top: 6px;
}
.top-nav ul li a {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 12px;
    border-radius: var(--radius);
    background: var(--wash) !important;
    border: 1px solid var(--border);
    transition:
        transform 0.15s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.top-nav ul li a:hover {
    background: var(--card-hover);
    border-color: var(--blue-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow);
}
.top-nav ul li a:hover i,
.top-nav ul li a:hover p {
    color: var(--accent-400);
}

/* On mobile labels are hidden → render chips as round icon buttons */
@media (max-width: 575px) {
    .top-nav ul li a {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
}

/* ============================================================
   FOOTER — desktop brand block
   ============================================================ */
.site-footer-desktop {
    position: relative;
    margin-top: 36px;
    padding: 30px 0 0px; /* bottom room for the fixed bottom-nav */
    background: linear-gradient(180deg, transparent 0%, var(--navy-900) 70%);
    border-top: 1px solid var(--border);
}
.site-footer-desktop::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue-500),
        var(--accent-500),
        transparent
    );
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.footer-logo {
    max-width: 150px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 16px var(--primary-a45));
    transition: transform 0.25s ease;
}
.footer-logo:hover {
    transform: translateY(-2px) scale(1.03);
}
.footer-tagline {
    color: var(--text-soft);
    font-size: 1.0625rem;
    margin: 0;
}
.footer-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 14px;
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--wash);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.875rem;
    transition:
        transform 0.18s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}
.footer-badge:hover {
    transform: translateY(-2px);
    border-color: var(--blue-400);
    color: var(--text);
    box-shadow: var(--shadow-blue-glow);
}
.footer-badge i {
    color: var(--accent-400);
}
.footer-copy {
    color: var(--text-dim);
    font-size: 0.8125rem;
    margin: 8px 0 0;
    letter-spacing: normal;
}

/* ============================================================
   FOOTER — fixed bottom navigation (glassy)
   ============================================================ */
.site-footer-mobile {
    background: linear-gradient(
        180deg,
        var(--scrim-modal-soft) 0%,
        var(--scrim) 100%
    );
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -14px 38px -10px var(--primary-a38);
}
/* top accent line */
.site-footer-mobile::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--blue-500),
        var(--accent-500),
        var(--blue-500),
        transparent
    );
    background-size: 220% 100%;
    animation: sbg-sheen 7s linear infinite;
}
.site-footer-mobile li {
    position: relative;
    flex: 1;
}
.site-footer-mobile a {
    color: var(--text-soft);
    padding: 6px 0 4px;
    border-radius: var(--radius-sm);
    transition:
        color 0.2s ease,
        transform 0.15s ease;
}
.site-footer-mobile li:not(:nth-child(3)) a:hover {
    color: var(--accent-400);
    transform: translateY(-2px);
}
.site-footer-mobile li:not(:nth-child(3)) a:hover i {
    color: var(--accent-400);
}
/* active route highlight */
.site-footer-mobile a.active,
.site-footer-mobile a.active i {
    color: var(--accent-400);
    text-shadow:
        0 0 8px var(--accent-400-a90),
        0 0 18px var(--accent-400-a55);
}
.site-footer-mobile a.active i {
    filter: drop-shadow(0 0 6px var(--accent-400-a85));
}
.site-footer-mobile i {
    transition: color 0.2s ease;
}

.site-footer-mobile li:nth-child(3) img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   DEPOSIT button — primary money-in action, made to stand out.
   Scoped to the credit box so register/login/fullscreen .btn-red
   elsewhere keep the standard CTA treatment.
   ============================================================ */
.button-box .btn-red,
.deposit-mobile-button a {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--accent-400) 0%,
        var(--accent-500) 50%,
        var(--accent-600) 100%
    );
    color: var(--accent-ink);
    border: 1px solid var(--accent-400-a55);
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow:
        0 12px 30px -8px var(--accent-500-a60),
        0 0 0 1px var(--accent-500-a25) inset;
    animation: sbg-deposit-glow 2.4s ease-in-out infinite;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
    z-index: 0;
}
/* glossy shine sweeping across to catch the eye */
.button-box .btn-red::before,
.deposit-mobile-button a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-20deg);
    animation: sbg-shine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.button-box .btn-red i,
.deposit-mobile-button a i {
    position: relative;
    z-index: 2;
    color: var(--accent-ink);
}
.button-box .btn-red:hover,
.deposit-mobile-button a:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 16px 42px -6px var(--accent-500-a78);
}
@keyframes sbg-deposit-glow {
    0%,
    100% {
        box-shadow:
            0 12px 30px -8px var(--accent-500-a50),
            0 0 0 1px var(--accent-500-a25) inset;
    }
    50% {
        box-shadow:
            0 14px 38px -6px var(--accent-500-a85),
            0 0 0 1px var(--accent-400-a45) inset;
    }
}
@keyframes sbg-shine {
    0% {
        left: -60%;
    }
    55% {
        left: 130%;
    }
    100% {
        left: 130%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .button-box .btn-red,
    .deposit-mobile-button a {
        animation: none;
    }
    .button-box .btn-red::before,
    .deposit-mobile-button a::before {
        display: none;
    }
}

/* ============================================================
   CONTACT — floating LINE / Telegram buttons, bottom right
   ============================================================ */
.contact-float {
    /* design:keep — LINE's and Telegram's own colours, not this brand's. A
       button that opens LINE has to look like LINE on whatever brand ships
       this codebase, so these stay off the palette. Same reasoning as the
       contact page and the KYC card. */
    --channel-line: #06c755;
    --channel-line-dark: #04a548;
    --channel-line-glow: rgba(6, 199, 85, 0.55);
    --channel-line-ring: rgba(6, 199, 85, 0.45);
    --channel-tg: #29a9eb;
    --channel-tg-dark: #1c94d6;
    --channel-tg-glow: rgba(41, 169, 235, 0.55);

    position: fixed;
    right: 12px;
    /* clear of the fixed bottom nav, which is on every page in this layout */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-float__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.375rem;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}
.contact-float__btn:hover,
.contact-float__btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.06);
}
.contact-float__btn--line {
    background: linear-gradient(
        135deg,
        var(--channel-line),
        var(--channel-line-dark)
    );
    box-shadow: 0 10px 26px -10px var(--channel-line-glow);
}
.contact-float__btn--tg {
    background: linear-gradient(
        135deg,
        var(--channel-tg),
        var(--channel-tg-dark)
    );
    box-shadow: 0 10px 26px -10px var(--channel-tg-glow);
}
/* one quiet ring on the first channel, so the stack is noticed once */
.contact-float__btn--line::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: sbg-contact-ring 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes sbg-contact-ring {
    0% {
        box-shadow: 0 0 0 0 var(--channel-line-ring);
    }
    70%,
    100% {
        box-shadow: 0 0 0 14px transparent;
    }
}
/* name of the channel, on hover — pointer devices only */
.contact-float__label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translate(8px, -50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}
@media (hover: hover) {
    .contact-float__btn:hover .contact-float__label,
    .contact-float__btn:focus .contact-float__label {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
@media (min-width: 768px) {
    .contact-float {
        right: 18px;
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }
    .contact-float__btn {
        width: 54px;
        height: 54px;
        font-size: 1.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .contact-float__btn--line::after {
        animation: none;
    }
}

/* Index (SEO) footer text block — readable on dark */
.footer-text {
    margin: 0 auto 14px;
    padding: 16px 18px;
    max-width: 920px;
    border-radius: var(--radius);
    background: var(--wash);
    border: 1px solid var(--border);
}
.footer-text p {
    color: var(--text-dim);
    font-size: 0.75rem;
    line-height: 1.75;
    margin: 0;
}
.footer-text a {
    color: var(--blue-400);
}
.footer-text a:hover {
    color: var(--accent-400);
}
.footer-copyright p {
    color: var(--text-dim);
}

/* History link */
.history-link-text {
    transition: color 0.2s ease;
}
.history-link-text:hover {
    color: var(--accent-400) !important;
}

/* ---------- QR deposit modal ---------- */
/* QR image needs a white field to scan — frame it like a glowing ticket */
.qr-image {
    /* design:keep — this white is a scanner requirement, not a brand choice.
       The quiet zone around a QR code has to stay white or readers start
       failing on it, so this rule does not follow the palette. */
    background: #fff;
    border: 6px solid #fff;
    border-radius: var(--radius);
    box-shadow:
        0 0 0 1px var(--border-strong),
        0 18px 42px -18px rgba(0, 0, 0, 0.85),
        0 0 32px -6px var(--accent-glow);
}

/* Receiver / amount box — replace the dated grey dashed border */
.deposit-box {
    border: 2px dashed var(--blue-300-a40);
    border-radius: var(--radius);
    background: var(--wash);
    color: var(--text);
    box-shadow: var(--shadow-card);
}

/* Quick-amount chips — modern interactive pills */
.badge.pointer:hover,
.badge-secondary.pointer:hover {
    background: var(--grad-blue);
    color: var(--primary-ink);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-glow);
}
#modal-qr .badge {
    font-size: 100%;
}

/* ---------- Solid background utilities on dark ---------- */
.bg-danger {
    background: linear-gradient(
        135deg,
        var(--red-500) 0%,
        var(--red-600) 100%
    ) !important;
}
.bg-warning {
    background: var(--grad-gold) !important;
}
.text-danger {
    color: var(--red-400) !important;
}
.text-success {
    color: var(--green-400) !important;
}