/* ==========================================================================
   Task Money — Neon
   --------------------------------------------------------------------------
   One coat of neon over every page that goes through layouts/app.blade.php:
   the marketing site, sign in, sign up, password reset, the dashboard, plans,
   games and the rest.

   It is loaded last on purpose. The base theme sets most of its rules with
   !important, so the only way to sit on top of it without editing a dozen
   templates is to load after it and match that weight where it collides.
   Everything that is NOT a collision is written at normal weight.

   Two rules held the design back from being garish:

     1. Neon is an EDGE, not a fill. Surfaces stay near-black; the colour
        lives in 1px borders, thin gradients and soft outer glow. Filling
        panels with saturated colour is what makes neon look cheap, and it
        destroys text contrast.

     2. Two accents, not six. Emerald and cyan are already the brand; violet
        is the third, used sparingly for highlights. Every additional hue
        makes the page read as decoration rather than product.

   Body text is left at full contrast throughout — glow is applied to
   headings, borders and controls, never to paragraphs.
   ========================================================================== */

:root {
    /* Surfaces, darkened so the glow has something to read against. */
    --neon-void: #04060d;
    --neon-deep: #070b16;
    --neon-surface: rgba(17, 24, 42, 0.72);
    --neon-surface-solid: #111827;

    /* The two brand accents and the one highlight. */
    --neon-emerald: #10d9a0;
    --neon-cyan: #38bdf8;
    --neon-violet: #8b5cf6;
    --neon-gold: #fbbf24;
    --neon-rose: #fb7185;

    /* Edges and glow, as reusable strengths. */
    --neon-edge: rgba(56, 189, 248, 0.22);
    --neon-edge-strong: rgba(56, 189, 248, 0.55);
    --neon-glow-sm: 0 0 12px rgba(56, 189, 248, 0.25);
    --neon-glow-md: 0 0 22px rgba(56, 189, 248, 0.30);
    --neon-glow-emerald: 0 0 24px rgba(16, 217, 160, 0.35);

    --neon-radius: 16px;
}

/* --------------------------------------------------------------------------
   The backdrop

   Three fixed layers behind everything: a deep vertical wash, two slow
   aurora blooms, and a fine grid that gives the depth a sense of scale.
   They are on ::before/::after of <html> and a fixed div-free ::after of
   <body>, so no template needs an extra element and nothing can scroll
   them out of place.
   -------------------------------------------------------------------------- */
html {
    background: var(--neon-void) !important;
}

body {
    position: relative;
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.13) 0%, transparent 300px),
        radial-gradient(120% 340px at 50% 0%, rgba(16, 217, 160, 0.20), transparent 70%),
        radial-gradient(1100px 700px at 50% -8%, rgba(56, 189, 248, 0.16), transparent 62%),
        radial-gradient(900px 640px at 100% 100%, rgba(139, 92, 246, 0.18), transparent 64%),
        radial-gradient(760px 520px at 0% 72%, rgba(16, 217, 160, 0.12), transparent 66%),
        linear-gradient(180deg, var(--neon-deep) 0%, var(--neon-void) 55%, #03050a 100%) !important;
    background-attachment: fixed !important;
}

/* Aurora. Kept at low opacity and a very slow cycle: a background that
   demands attention is a background that gets in the way. */
body::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 18% 12%, rgba(16, 217, 160, 0.30), transparent 60%),
        radial-gradient(34vmax 34vmax at 86% 26%, rgba(56, 189, 248, 0.30), transparent 62%),
        radial-gradient(30vmax 30vmax at 50% 92%, rgba(139, 92, 246, 0.26), transparent 64%);
    filter: blur(28px);
    animation: neonDrift 34s ease-in-out infinite alternate;
}

/* The grid. Two 1px gradients, masked so it fades out before the edges and
   never draws a hard line across a heading. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.10) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

@keyframes neonDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* The game canvas draws its own world; a grid behind it is noise. */
body.gamePlayPage::after { opacity: 0.25; }

/* The full-height shells paint themselves solid.

   Each of these is a wrapper that fills the viewport with --tm-bg, which
   sits over the body and hides every layer above: the aurora was rendering
   perfectly and nobody could see any of it. They keep their layout and give
   up only the fill, so the backdrop shows through the whole page. */
.auth-page-wrapper,
.dashboard,
.dashboard__inner,
.dashboard__right,
.dashboard-body,
.main-wrapper,
.page-wrapper,
.cmn-section {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
/* Headings inherit black.

   The base theme was built light and never re-coloured its headings, so on
   this dark build every h1-h6 that does not set its own colour computes to
   rgb(0,0,0). The worst case is the marketing hero: "The Smart Platform to
   ... Daily" is the first line on the site and it was black on near-black.

   Set at normal weight so any heading that DOES choose a colour -- the
   gradient spans, the coloured section labels -- still wins. */
h1, h2, h3, h4, h5, h6 {
    color: #f1f6ff;
}

h1, h2, h3, .section-title, .auth-title {
    letter-spacing: -0.01em;
}

/* The hero is the one heading big enough to carry a gradient without the
   text turning to mush. */
.hero-title {
    background: linear-gradient(100deg, #ffffff 0%, #dbeafe 45%, #a5f3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
}
/* The span inside it keeps its own emerald-to-cyan gradient; a clipped
   background on the parent would otherwise swallow it. */
.hero-title .text-gradient {
    background: linear-gradient(120deg, var(--neon-emerald) 0%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(16, 217, 160, 0.45));
}

.section-title,
.auth-title {
    text-shadow: 0 0 26px rgba(56, 189, 248, 0.30);
}

/* A hairline under section headings, bright in the middle and gone at the
   ends, so a full-width rule does not cut the page in half. */
.section-header { position: relative; }
.section-header::after {
    content: "";
    display: block;
    height: 1px;
    margin: 14px auto 0;
    max-width: 260px;
    background: linear-gradient(90deg, transparent, var(--neon-edge-strong), transparent);
}

a { transition: color 0.18s ease, text-shadow 0.18s ease; }
a:hover { text-shadow: 0 0 14px rgba(56, 189, 248, 0.55); }

/* --------------------------------------------------------------------------
   Surfaces

   One treatment, applied to every kind of panel the templates use. The
   ::before is the lit top edge — a 1px gradient that reads as a light
   source rather than a border.
   -------------------------------------------------------------------------- */
.card,
.auth-card,
.feature-card,
.game-preview-card,
.dashboard-wallet-chip,
.neon-panel {
    position: relative;
    background: var(--neon-surface) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: var(--neon-radius) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 18px 44px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.card::before,
.auth-card::before,
.feature-card::before,
.game-preview-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-edge-strong), transparent);
    pointer-events: none;
}

.feature-card:hover,
.game-preview-card:hover,
.card:hover {
    border-color: var(--neon-edge-strong) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(56, 189, 248, 0.16),
        0 22px 54px rgba(0, 0, 0, 0.6),
        var(--neon-glow-md) !important;
    transform: translateY(-2px);
}

/* Bootstrap paints these solid; without this the glass is filled in. */
.card-body,
.card-header,
.card-footer {
    background: transparent !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.auth-input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    background: rgba(8, 12, 22, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: #e8eefc !important;
    border-radius: 12px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control:focus,
.form-select:focus,
.auth-input:focus,
input:focus,
textarea:focus,
select:focus {
    background: rgba(10, 16, 28, 0.95) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14), var(--neon-glow-sm) !important;
    outline: none !important;
}

/* The wrapper carries the focus ring on the auth screens, because the input
   there sits inside a bordered shell with an icon. */
.auth-input-wrap {
    border-radius: 12px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-input-wrap:focus-within {
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14), var(--neon-glow-sm) !important;
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--neon-cyan) !important; }

::placeholder { color: rgba(148, 163, 184, 0.65) !important; }

/* Chrome paints autofilled fields a solid pale yellow, which on a dark form
   looks like a rendering fault. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e8eefc !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(10, 16, 28, 0.98) inset !important;
    caret-color: #e8eefc;
    transition: background-color 9999s ease-out;
}

/* --------------------------------------------------------------------------
   Buttons

   The sweep on :hover is a single translated gradient rather than an
   animation, so it costs nothing when nobody is hovering.
   -------------------------------------------------------------------------- */
.btn,
.btn-auth-primary {
    position: relative;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.16s ease, box-shadow 0.22s ease, filter 0.22s ease;
    overflow: hidden;
}

.btn::after,
.btn-auth-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22), transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.btn:hover::after,
.btn-auth-primary:hover::after { transform: translateX(120%); }

.btn:active,
.btn-auth-primary:active { transform: scale(0.985); }

.btn-primary,
.btn-success,
.btn-auth-primary {
    background: linear-gradient(120deg, var(--neon-emerald), #0ea5e9) !important;
    border: 0 !important;
    color: #04121a !important;
    box-shadow: 0 10px 28px rgba(16, 217, 160, 0.28), var(--neon-glow-emerald) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-auth-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 36px rgba(16, 217, 160, 0.38), 0 0 34px rgba(16, 217, 160, 0.5) !important;
}

.btn-info { background: linear-gradient(120deg, var(--neon-cyan), var(--neon-violet)) !important; border: 0 !important; color: #05101c !important; }
.btn-warning { background: linear-gradient(120deg, var(--neon-gold), #f97316) !important; border: 0 !important; color: #1a1002 !important; }
.btn-danger { background: linear-gradient(120deg, var(--neon-rose), #e11d48) !important; border: 0 !important; color: #fff !important; }

/* The quiet buttons: an outline that lights up rather than a filled block. */
.btn-dark,
.btn-secondary,
.btn-outline-primary,
.btn-outline-light {
    background: rgba(148, 163, 184, 0.07) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #dbe6f5 !important;
    box-shadow: none !important;
}
.btn-dark:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover {
    border-color: var(--neon-edge-strong) !important;
    color: #fff !important;
    box-shadow: var(--neon-glow-sm) !important;
}

/* --------------------------------------------------------------------------
   Sign in / sign up / reset
   -------------------------------------------------------------------------- */
.auth-page-wrapper { position: relative; z-index: 1; }

.auth-card {
    border-radius: 22px !important;
    padding-top: 26px;
}

/* The layout ships two ambient blobs. They were static; giving them the
   drift and a little more reach is what turns the card into a light source
   instead of a rectangle on a dark page. */
.auth-ambient-glow {
    filter: blur(70px) !important;
    opacity: 0.55 !important;
    animation: neonDrift 26s ease-in-out infinite alternate;
}
.auth-glow-1 { background: radial-gradient(circle, rgba(16, 217, 160, 0.55), transparent 62%) !important; }
.auth-glow-2 { background: radial-gradient(circle, rgba(139, 92, 246, 0.50), transparent 62%) !important; animation-delay: -12s; }

.auth-title {
    background: linear-gradient(100deg, #ffffff 10%, var(--neon-cyan) 55%, var(--neon-emerald) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

/* The label row also holds the "Forgot password?" link, so the uppercase
   treatment goes on the label's own text, not on everything inside it. */
.auth-label { color: #9fb0c9 !important; }
.auth-label > span {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
}
.auth-label > a { text-transform: none; }

.auth-link,
.auth-link-strong { color: var(--neon-cyan) !important; }
.auth-link-strong { text-shadow: 0 0 16px rgba(56, 189, 248, 0.45); }

.auth-header__badge {
    border: 1px solid rgba(16, 217, 160, 0.30) !important;
    background: rgba(16, 217, 160, 0.08) !important;
    box-shadow: 0 0 18px rgba(16, 217, 160, 0.18);
}

/* --------------------------------------------------------------------------
   Dashboard chrome
   -------------------------------------------------------------------------- */
.dashboard-wallet-chip { border-radius: 14px !important; }
.dashboard-wallet-chip:hover { border-color: var(--neon-edge-strong) !important; box-shadow: var(--neon-glow-sm) !important; }
.chip-value { text-shadow: 0 0 18px rgba(56, 189, 248, 0.35); }
.chip-icon-box { box-shadow: 0 0 16px rgba(56, 189, 248, 0.25); }

.user-info__button { border-radius: 999px !important; }
.user-info__avatar { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 0 18px rgba(56, 189, 248, 0.35); }

/* Badges.

   The templates write `badge bg-info bg-opacity-20 text-info`: a 20% tint
   behind text of the same hue. Bootstrap 5 ships bg-opacity in 10, 25, 50,
   75 and 100 only -- there is no 20 and no 15 -- so those two classes matched
   nothing, --bs-bg-opacity stayed at 1, and the fill rendered at full
   strength behind text of exactly the same colour. "Zero Fee", "From" and
   "To" on the dashboard were solid coloured pills with nothing readable in
   them.

   Defining the two missing steps fixes every use at once and keeps the
   markup as written. */
.bg-opacity-20 { --bs-bg-opacity: 0.20; }
.bg-opacity-15 { --bs-bg-opacity: 0.15; }

.badge {
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.14);
    letter-spacing: 0.02em;
}

/* A tinted badge now reads as a lit chip: the hue in the border and the
   text, the fill left faint. Brightened because the raw Bootstrap hues are
   mid-tones picked for white backgrounds and sit too dark on this one. */
.badge.bg-info.text-info    { color: #7dd3fc !important; border-color: rgba(56, 189, 248, 0.45) !important; }
.badge.bg-primary.text-primary { color: #93c5fd !important; border-color: rgba(96, 165, 250, 0.45) !important; }
.badge.bg-success.text-success { color: #6ee7b7 !important; border-color: rgba(16, 217, 160, 0.45) !important; }
.badge.bg-warning.text-warning { color: #fcd34d !important; border-color: rgba(251, 191, 36, 0.45) !important; }
.badge.bg-danger.text-danger   { color: #fda4af !important; border-color: rgba(251, 113, 133, 0.45) !important; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.feature-card-icon,
.game-icon-wrap {
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.25);
    border-radius: 14px;
}

.game-tag {
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.18);
}

.feature-card-link { color: var(--neon-cyan) !important; }

/* --------------------------------------------------------------------------
   Alerts

   These render on a white background with the variant's own mid-tone as the
   text: the KYC notice on the dashboard was #0dcaf0 on #ffffff, a contrast
   ratio of 1.96 -- below the 3.0 that counts as legible at any size. A white
   slab is also the single most jarring thing that can appear on a dark page.

   Rebuilt the same way as the badges: faint tinted fill, the hue in the left
   edge and the text, lifted to a brightness that works on this background.
   -------------------------------------------------------------------------- */
.alert {
    background: rgba(148, 163, 184, 0.08) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-left-width: 3px !important;
    border-radius: 12px !important;
    color: #dce6f5 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.alert * { color: inherit !important; }

.alert-info    { border-left-color: var(--neon-cyan) !important;    background: rgba(56, 189, 248, 0.10) !important; }
.alert-primary { border-left-color: #60a5fa !important;             background: rgba(96, 165, 250, 0.10) !important; }
.alert-success { border-left-color: var(--neon-emerald) !important; background: rgba(16, 217, 160, 0.10) !important; }
.alert-warning { border-left-color: var(--neon-gold) !important;    background: rgba(251, 191, 36, 0.10) !important; }
.alert-danger  { border-left-color: var(--neon-rose) !important;    background: rgba(251, 113, 133, 0.10) !important; }
.alert-light   { border-left-color: rgba(148, 163, 184, 0.5) !important; }

/* The bold lead-in ("KYC Required:") keeps the variant's hue; the sentence
   after it stays plain so the whole alert is not tinted text. */
.alert-info strong, .alert-info b       { color: #7dd3fc !important; }
.alert-primary strong, .alert-primary b { color: #93c5fd !important; }
.alert-success strong, .alert-success b { color: #6ee7b7 !important; }
.alert-warning strong, .alert-warning b { color: #fcd34d !important; }
.alert-danger strong, .alert-danger b   { color: #fda4af !important; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
table th {
    border-color: rgba(56, 189, 248, 0.22) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px !important;
}
table tbody tr { transition: background 0.16s ease; }

/* A translucent tint is right for a real table row: it sits on the page's own
   dark background, so the tint layers over it. */
table tbody tr:hover { background: rgba(56, 189, 248, 0.05) !important; }

/* It is wrong once a table collapses into cards. Below its own breakpoint each
   row is drawn as a card with an opaque background of its own, and
   `background:` replaces that rather than layering over it -- so hovering
   stripped the card back to the light surface behind it and the white text on
   it disappeared. In card mode the hover stays opaque and lifts a shade.

   Each class collapses at a different width, which is why these are four
   queries and not one: --md at 768, --lg at 992, --xl at 1200, --xxl at 1400,
   matching main.css. */
.table--responsive--md tbody tr:hover,
.table--responsive--lg tbody tr:hover,
.table--responsive--xl tbody tr:hover,
.table--responsive--xxl tbody tr:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

@media (max-width: 767.98px) {
    .table--responsive--md tbody tr:hover { background: #1a2440 !important; }
}

@media (max-width: 991.98px) {
    .table--responsive--lg tbody tr:hover { background: #1a2440 !important; }
}

@media (max-width: 1199.98px) {
    .table--responsive--xl tbody tr:hover { background: #1a2440 !important; }
}

@media (max-width: 1399.98px) {
    .table--responsive--xxl tbody tr:hover { background: #1a2440 !important; }
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(16, 217, 160, 0.45), rgba(56, 189, 248, 0.45));
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Motion and contrast preferences

   The drifting aurora is the only thing here that moves on its own, and a
   background that moves is exactly what motion sensitivity reacts to.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body::before,
    .auth-ambient-glow { animation: none !important; }
    .btn::after,
    .btn-auth-primary::after { display: none; }
    .card, .feature-card, .game-preview-card { transition: none; }
}

/* Blur is the most expensive thing on this page and the least noticeable on
   a small screen. */
@media (max-width: 575.98px) {
    body::before { filter: blur(20px); }
    /* backdrop-filter is the expensive part, not the alpha: dropping the
       blur but keeping the panel semi-transparent costs nothing and still
       lets the aurora read through the card. */
    .card, .auth-card, .feature-card, .game-preview-card, .dashboard-wallet-chip {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(13, 19, 34, 0.82) !important;
    }
}

/* ==================================================================
   Theme -- the live palette, everywhere

   The earning side ran on teal and amber while Tuka Live ran on pink
   and purple, on a different background, so the two halves read as
   two products. This block brings this side onto Tuka's palette and
   onto the same ground.

   It sits at the end of the file on purpose: these declarations have
   to win over the :root at the top and over the body rule, and a
   later rule of equal specificity does exactly that. Nothing above
   is deleted, so reverting the scheme is deleting this block.

   Everything is expressed in channel triples, so the gradients and
   glows follow the palette instead of repeating it.
   ================================================================== */

:root {
    /* The three accents, as channels so alpha can be varied freely. */
    --neon-lead-rgb: 255 76 131;      /* #FF4C83  pink, the lead */
    --neon-glow-rgb: 157 78 221;      /* #9D4EDD  purple, edges and glow */
    --neon-warm-rgb: 255 186 39;      /* #FFBA27  amber, value */

    /* The ground, shared with Tuka so neither half looks borrowed. */
    --neon-void: #0A0E14;
    --neon-deep: #10151E;
    --neon-surface: rgba(28, 35, 49, 0.72);
    --neon-surface-solid: #1C2331;

    /* The named accents the rest of the file already asks for.
       Only the values change; every rule using them is untouched. */
    --neon-emerald: rgb(var(--neon-lead-rgb));
    --neon-cyan: rgb(var(--neon-glow-rgb));
    --neon-violet: #C77DFF;
    --neon-gold: rgb(var(--neon-warm-rgb));
    --neon-rose: #FFB4AB;

    /* Edges and glow, now purple. */
    --neon-edge: rgb(var(--neon-glow-rgb) / 0.24);
    --neon-edge-strong: rgb(var(--neon-glow-rgb) / 0.55);
    --neon-glow-sm: 0 0 12px rgb(var(--neon-glow-rgb) / 0.28);
    --neon-glow-md: 0 0 22px rgb(var(--neon-glow-rgb) / 0.34);
    --neon-glow-emerald: 0 0 24px rgb(var(--neon-lead-rgb) / 0.38);

    /* main.css builds its buttons and links from these, as HSL parts.
       They come from color.php, which reads the admin colour setting --
       so this override is what makes the scheme apply without anyone
       touching that setting. Set the admin colours to #FF4C83 and
       #FFBA27 and these six lines can go. */
    --base-h: 342;
    --base-s: 100%;
    --base-l: 65%;

    --accent-h: 41;
    --accent-s: 100%;
    --accent-l: 58%;
}

/* The page wash. Same shape as before -- only the hues move. */
body {
    background:
        linear-gradient(180deg, rgb(var(--neon-lead-rgb) / 0.12) 0%, transparent 300px),
        radial-gradient(120% 340px at 50% 0%, rgb(var(--neon-lead-rgb) / 0.18), transparent 70%),
        radial-gradient(1100px 700px at 50% -8%, rgb(var(--neon-glow-rgb) / 0.16), transparent 62%),
        radial-gradient(900px 640px at 100% 100%, rgb(var(--neon-glow-rgb) / 0.18), transparent 64%),
        radial-gradient(760px 520px at 0% 72%, rgb(var(--neon-lead-rgb) / 0.10), transparent 66%),
        linear-gradient(180deg, var(--neon-deep) 0%, var(--neon-void) 55%, #06080F 100%) !important;
    background-attachment: fixed !important;
}

/* The aurora behind it, retinted to match. */
body::before {
    background:
        radial-gradient(38vmax 38vmax at 18% 12%, rgb(var(--neon-lead-rgb) / 0.26), transparent 60%),
        radial-gradient(34vmax 34vmax at 86% 26%, rgb(var(--neon-glow-rgb) / 0.28), transparent 62%),
        radial-gradient(30vmax 30vmax at 50% 92%, rgb(var(--neon-glow-rgb) / 0.22), transparent 64%);
}