/* ============================================================================
   LIGHT MODE - "Warm Ivory"
   ----------------------------------------------------------------------------
   Everything here is scoped under  html.light-mode  so the existing dark theme
   is completely untouched. No layout, no logic, no markup changes - colours,
   borders and shadows only. Every measurement (radii, control heights, padding)
   is left to site.css exactly as it is.

   This file MUST be linked AFTER site.css and after @RenderSection("Styles")
   so it wins the cascade against page-level <style> blocks.

   The palette is a warm paper ground carrying the brand gold, with the cool
   charcoal ink the dark theme already uses. Warm ground against cool ink is
   what gives the theme depth - a neutral white ground leaves the gold looking
   orphaned.

   Because ~613 colours in the .cshtml files are written as inline style="..."
   attributes (which normally beat any stylesheet), the middle section re-maps
   those inline colours in place with attribute selectors.
   ========================================================================== */

html.light-mode {
    /* ---- surfaces --------------------------------------------------------
       Three tiers, not one. A single flat white for everything is what made
       the first attempt read as an inversion rather than a theme. */
    --lm-ground:        #f5f1e8;   /* page ground        (was the dark bg image) */
    --lm-chrome:        #f5f1e8;   /* header, sidenav, page wrappers - the design ground, never white */
    --lm-surface:       #ffffff;   /* RAISED cards, modals, dropdowns ONLY        */
    --lm-sunken:        #efe8da;   /* rails, tickers, wells       (was #1c1c1c)  */
    --lm-gold-wash:     #fff6e0;   /* icon pads, gold-tinted panels (was #2d291e)*/
    --lm-gold-row:      #fdf4dd;   /* selected nav row            (was #332f20)  */

    /* ---- lines ----------------------------------------------------------- */
    --lm-line:          #e3dbc9;   /* structural border                         */
    --lm-line-soft:     #efe9dd;   /* divider inside a card                     */
    --lm-line-gold:     #eddcae;   /* border around a gold wash                 */

    /* ---- ink ------------------------------------------------------------- */
    --lm-ink:           #1e222b;   /* primary text      (was white)   14.9:1    */
    --lm-ink-2:         #5d6472;   /* secondary text    (was #ccc)     5.8:1    */
    --lm-ink-3:         #8d93a1;   /* muted/placeholder (was #98a8b5)  3.1:1    */

    /* ---- brand gold ------------------------------------------------------ */
    --lm-gold:          #e8c850;   /* brand gold - BACKGROUND only, unchanged   */
    --lm-gold-hi:       #f6dd8d;   /* top stop of the gold gradient             */
    --lm-gold-soft:     #fff0cc;   /* secondary button fill - already .btn-yellow */
    --lm-gold-deep:     #8a6a08;   /* gold as TEXT (gold on light is 1.6:1)     */
    --lm-gold-line:     #d9b73c;   /* gold border, 2px per .btn-yellow          */
    --lm-on-gold:       #2a2100;   /* text sitting on gold                      */
    --lm-orange-deep:   #a55a00;   /* #fdab2b as TEXT                           */

    /* ---- elevation - tinted warm, never neutral black -------------------- */
    --lm-e1:            0 1px 3px rgba(74, 58, 18, .06);
    --lm-e2:            0 4px 14px rgba(74, 58, 18, .16);
    --lm-e3:            0 10px 30px rgba(74, 58, 18, .20);

    --lm-gold-grad:     linear-gradient(180deg, #f6dd8d 0%, #e8c850 100%);
}

/* ---------------------------------------------------------------- base ---- */
html.light-mode,
html.light-mode body {
    background-color: var(--lm-ground) !important;
    color: var(--lm-ink) !important;
}

/* the dark background artwork is an image, so it has to be switched off */
html.light-mode .main-bg {
    background-image: none !important;
    background-color: var(--lm-ground) !important;
}

html.light-mode .body-container,
html.light-mode .desktop-right,
html.light-mode .main-bottom-container {
    background-color: var(--lm-ground) !important;
}

/* --------------------------------------------------------- containers ---- */
/* Structural chrome gets real elevation. Generic re-mapped panels further
   down get a border and the faintest shadow only, so this stays hierarchy
   rather than noise. */
html.light-mode .layout-header,
html.light-mode .mobile-header,
html.light-mode .desktop-header,
html.light-mode .desktop-header-logged {
    background-color: var(--lm-chrome) !important;
    color: var(--lm-ink) !important;
    border-color: var(--lm-line) !important;
    box-shadow: var(--lm-e1) !important;
}

html.light-mode #bottom-nav,
html.light-mode #bottom-nav > div {
    background-color: var(--lm-chrome) !important;
    background-image: none !important;
    border-top: 1px solid var(--lm-line) !important;
    box-shadow: 0 -2px 10px rgba(74, 58, 18, .07) !important;
}

html.light-mode .sidenav {
    background-color: var(--lm-chrome) !important;
    color: var(--lm-ink) !important;
    border-right: 1px solid var(--lm-line) !important;
}

html.light-mode .desktop-left {
    border-right: 1px solid var(--lm-line) !important;
}

html.light-mode .white-rounded-container,
html.light-mode .card,
html.light-mode .modal-content,
html.light-mode .dropdown-menu {
    background-color: var(--lm-surface) !important;
    color: var(--lm-ink) !important;
    border: 1px solid var(--lm-line) !important;
    box-shadow: var(--lm-e1) !important;
}

html.light-mode .modal-content,
html.light-mode .dropdown-menu {
    box-shadow: var(--lm-e3) !important;
}

html.light-mode .white-rounded-container-header {
    background-color: transparent !important;
    color: var(--lm-ink) !important;
    border-bottom: 1px solid var(--lm-line-soft) !important;
}

/* site.css forces white on the whole modal header (`color: white !important`)
   plus its h5, button and close glyph, so none of it is reachable by the
   inline map - the title and the X vanish once the modal turns light. */
html.light-mode .modal-header,
html.light-mode .modal-title,
html.light-mode .modal-header h5,
html.light-mode .modal-header button,
html.light-mode .modal-header .close,
html.light-mode .modal-body {
    color: var(--lm-ink) !important;
}

/* the category rail is a SUNKEN pill, not another white card */
html.light-mode .category-picker-container {
    background-color: var(--lm-sunken) !important;
    border: 1px solid var(--lm-line) !important;
}

html.light-mode .category-picker.selected {
    background: var(--lm-gold-grad) !important;
    color: var(--lm-on-gold) !important;
    box-shadow: 0 1px 3px rgba(74, 58, 18, .2) !important;
}

/* ---------------------------------------------------------------- text ---- */
html.light-mode .text-white,
html.light-mode .text-light {
    color: var(--lm-ink) !important;
}

html.light-mode .text-muted,
html.light-mode small {
    color: var(--lm-ink-2) !important;
}

html.light-mode a {
    color: var(--lm-gold-deep);
}

html.light-mode a:hover {
    color: #6d5306;
}

/* the brand gold used as TEXT must darken or it disappears on light */
html.light-mode .color-main,
html.light-mode .main-orange,
html.light-mode .primary-text {
    color: var(--lm-gold-deep) !important;
}

/* --------------------------------------------------------------- forms ---- */
html.light-mode .form-control,
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
    background-color: var(--lm-surface) !important;
    color: var(--lm-ink) !important;
    border: 1px solid var(--lm-line) !important;
}

html.light-mode .form-control:focus,
html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    border-color: var(--lm-gold-line) !important;
    box-shadow: 0 0 0 3px rgba(232, 200, 80, .25) !important;
    outline: none !important;
}

html.light-mode .form-control::placeholder {
    color: var(--lm-ink-3) !important;
}

/* -------------------------------------------------------------- tables ---- */
html.light-mode table,
html.light-mode .table {
    color: var(--lm-ink) !important;
    background-color: transparent !important;
}

html.light-mode .table td,
html.light-mode .table th {
    border-color: var(--lm-line-soft) !important;
    color: var(--lm-ink) !important;
}

html.light-mode .table thead th {
    background-color: var(--lm-sunken) !important;
    border-color: var(--lm-line) !important;
}

html.light-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #faf7f0 !important;
}

/* ------------------------------------------------------------- buttons ---- */
/* Gold keeps its colour but gains a gradient - flat gold on a light ground is
   what read as cheap. Heights, radii and border widths stay as site.css sets
   them. */
html.light-mode .btn-primary,
html.light-mode .btn-yellow {
    background: var(--lm-gold-grad) !important;
    color: var(--lm-on-gold) !important;
    border-color: var(--lm-gold-line) !important;
    box-shadow: 0 1px 2px rgba(74, 58, 18, .14) !important;
}

html.light-mode .btn-primary:hover,
html.light-mode .btn-yellow:hover {
    background: linear-gradient(180deg, #eed079 0%, #dcb93f 100%) !important;
    border-color: #c9a63a !important;
}

html.light-mode .btn-black {
    background: var(--lm-surface) !important;
    color: var(--lm-gold-deep) !important;
    border-color: var(--lm-gold) !important;
}

html.light-mode .btn-black:hover {
    background: var(--lm-gold-soft) !important;
    color: var(--lm-on-gold) !important;
}

html.light-mode .btn:disabled,
html.light-mode .btn.disabled {
    background: var(--lm-line-soft) !important;
    border-color: var(--lm-line) !important;
    color: #a8a294 !important;
    box-shadow: none !important;
}

/* ========================================================================= */
/*  INLINE-STYLE RE-MAPPING                                                  */
/*  The markup hard-codes colours in style="..." attributes. These selectors  */
/*  match those attributes and re-map them, so no .cshtml has to be edited.   */
/* ========================================================================= */

/* --- tier 1: panel darks -> warm chrome, NOT white ------------------------
   These hexes sit on page-level wrappers and the header row, not just cards,
   so mapping them to white is what produced a stark white slab. Pure white is
   reserved for the genuinely raised things handled by class above. */
html.light-mode [style*="background-color: #222631"],
html.light-mode [style*="background-color:#222631"],
html.light-mode [style*="background: #222631"],
html.light-mode [style*="background:#222631"],
html.light-mode [style*="background-color: #212632"],
html.light-mode [style*="background-color:#212632"],
html.light-mode [style*="background: #212632"],
html.light-mode [style*="background:#212632"],
html.light-mode [style*="background-color: #1c1c1c"],
html.light-mode [style*="background-color:#1c1c1c"],
html.light-mode [style*="background: #1c1c1c"],
html.light-mode [style*="background:#1c1c1c"],
html.light-mode [style*="background-color: #1e1e1e"],
html.light-mode [style*="background-color:#1e1e1e"],
html.light-mode [style*="background: #1e1e1e"],
html.light-mode [style*="background:#1e1e1e"],
html.light-mode [style*="background-color: #001326"],
html.light-mode [style*="background-color:#001326"],
html.light-mode [style*="background: #001326"],
html.light-mode [style*="background:#001326"] {
    background-color: var(--lm-chrome) !important;
    background-image: none !important;
    color: var(--lm-ink) !important;
}

/* --- tier 2: recessed darks -> sunken ------------------------------------ */
html.light-mode [style*="background-color: #202020"],
html.light-mode [style*="background-color:#202020"],
html.light-mode [style*="background: #202020"],
html.light-mode [style*="background:#202020"],
html.light-mode [style*="background-color: #0f0f0f"],
html.light-mode [style*="background-color:#0f0f0f"],
html.light-mode [style*="background: #0f0f0f"],
html.light-mode [style*="background:#0f0f0f"],
html.light-mode [style*="background-color: #191919"],
html.light-mode [style*="background-color:#191919"],
html.light-mode [style*="background: #191919"],
html.light-mode [style*="background:#191919"],
html.light-mode [style*="background-color: #0a0f15"],
html.light-mode [style*="background-color:#0a0f15"],
html.light-mode [style*="background: #0a0f15"],
html.light-mode [style*="background:#0a0f15"],
html.light-mode [style*="background-color: #070707"],
html.light-mode [style*="background-color:#070707"],
html.light-mode [style*="background: #070707"],
html.light-mode [style*="background:#070707"],
html.light-mode [style*="background-color: #383635"],
html.light-mode [style*="background-color:#383635"],
html.light-mode [style*="background: #383635"],
html.light-mode [style*="background:#383635"],
html.light-mode [style*="background-color: #4b4b4b"],
html.light-mode [style*="background-color:#4b4b4b"],
html.light-mode [style*="background-color: black"],
html.light-mode [style*="background-color:black"],
html.light-mode [style*="background: black"],
html.light-mode [style*="background:black"] {
    background-color: var(--lm-sunken) !important;
    background-image: none !important;
    color: var(--lm-ink) !important;
    border: 1px solid var(--lm-line);
}

/* --- tier 3: gold-tinted darks -> gold wash ------------------------------ */
html.light-mode [style*="background-color: #332f20"],
html.light-mode [style*="background-color:#332f20"],
html.light-mode [style*="background: #332f20"],
html.light-mode [style*="background:#332f20"],
html.light-mode [style*="background-color: #2d291e"],
html.light-mode [style*="background-color:#2d291e"],
html.light-mode [style*="background: #2d291e"],
html.light-mode [style*="background:#2d291e"],
html.light-mode [style*="background-color: #2a271e"],
html.light-mode [style*="background-color:#2a271e"],
html.light-mode [style*="background: #2a271e"],
html.light-mode [style*="background:#2a271e"] {
    background-color: var(--lm-gold-wash) !important;
    background-image: none !important;
    color: var(--lm-ink) !important;
    border: 1px solid var(--lm-line-gold);
}

/* --- white / light text -> ink ------------------------------------------- */
html.light-mode [style*="color: white"],
html.light-mode [style*="color:white"],
html.light-mode [style*="color: #fff"],
html.light-mode [style*="color:#fff"],
html.light-mode [style*="color: #ffffff"],
html.light-mode [style*="color:#ffffff"] {
    color: var(--lm-ink) !important;
}

/* --- gold/amber used as TEXT -> darkened so it stays readable ------------ */
html.light-mode [style*="color: #e8c850"],
html.light-mode [style*="color:#e8c850"],
html.light-mode [style*="color: #e8c751"],
html.light-mode [style*="color:#e8c751"],
html.light-mode [style*="color: #ffe25e"],
html.light-mode [style*="color:#ffe25e"],
html.light-mode [style*="color: #fedd36"],
html.light-mode [style*="color:#fedd36"],
html.light-mode [style*="color: #ffe582"],
html.light-mode [style*="color:#ffe582"],
html.light-mode [style*="color: #ffd507"],
html.light-mode [style*="color:#ffd507"],
html.light-mode [style*="color: #ffd950"],
html.light-mode [style*="color:#ffd950"],
html.light-mode [style*="color: #f3e15b"],
html.light-mode [style*="color:#f3e15b"],
html.light-mode [style*="color: #f8c031"],
html.light-mode [style*="color:#f8c031"] {
    color: var(--lm-gold-deep) !important;
}

html.light-mode [style*="color: #fdab2b"],
html.light-mode [style*="color:#fdab2b"],
html.light-mode [style*="color: #fc970d"],
html.light-mode [style*="color:#fc970d"] {
    color: var(--lm-orange-deep) !important;
}

/* --- gold/amber as BACKGROUND: keep the hue, add depth, darken the text --- */
html.light-mode [style*="background: #e8c850"],
html.light-mode [style*="background:#e8c850"],
html.light-mode [style*="background-color: #e8c850"],
html.light-mode [style*="background-color:#e8c850"],
html.light-mode [style*="background: #fdab2b"],
html.light-mode [style*="background:#fdab2b"],
html.light-mode [style*="background-color: #fdab2b"],
html.light-mode [style*="background-color:#fdab2b"] {
    background-image: var(--lm-gold-grad) !important;
    color: var(--lm-on-gold) !important;
}

/* the logo bubble sits on the gold header - keep it dark for contrast */
html.light-mode [style*="border-radius: 50%"][style*="#222631"] {
    background-color: #222631 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(74, 58, 18, .28) !important;
}

/* ========================================================================= */
/*  CLASS-DEFINED COLOURS                                                    */
/*  Some colours come from site.css / the layout's own <style> block rather   */
/*  than an inline attribute, so the attribute selectors never see them.      */
/* ========================================================================= */

html.light-mode .sidenav,
html.light-mode .sidenav a,
html.light-mode .sidenav a span,
html.light-mode .sidenav-nav-bar,
html.light-mode .sidenav-nav-bar a,
html.light-mode .desktop-header-logged-nav-bar a,
html.light-mode .desktop-header-logged-nav-bar span,
html.light-mode .layout-header a,
html.light-mode .layout-header button,
html.light-mode .menubar li a,
html.light-mode .menubar li.selected a,
html.light-mode .footer-container,
html.light-mode .footer-container a,
html.light-mode .realtime-deposit-bt,
html.light-mode .realtime-deposit-bt div {
    color: var(--lm-ink) !important;
}

html.light-mode .sidenav a:hover {
    background-color: var(--lm-gold-row) !important;
    color: var(--lm-gold-deep) !important;
}

html.light-mode .footer-container,
html.light-mode .menubar,
html.light-mode .menubar2 {
    background-color: var(--lm-sunken) !important;
}

html.light-mode .realtime-deposit-bt,
html.light-mode .realtime-deposit-bt div {
    background-color: var(--lm-sunken) !important;
}

/* the gold "selected" state of the realtime bar keeps its own gradient and
   already carries dark text (#202020) - left alone. */

html.light-mode .footer-border {
    border-color: var(--lm-line) !important;
}

/* the logged-in shortcut bar (Shop / Transfer / Rebate / Recommend / VIP):
   .menu-picker-container is #332f20 and .menu-picker is `color: white
   !important`, both from site.css, so neither is reachable by the inline map */
html.light-mode .menu-picker-container {
    background-color: var(--lm-gold-wash) !important;
    border: 1px solid var(--lm-line-gold) !important;
}

html.light-mode .menu-picker,
html.light-mode .menu-picker div {
    color: var(--lm-ink) !important;
}

/* its collapse tab, inline #746428 */
html.light-mode [style*="background-color: #746428"],
html.light-mode [style*="background-color:#746428"] {
    background-color: var(--lm-gold-wash) !important;
    color: var(--lm-gold-deep) !important;
}

/* dark hairlines written inline */
html.light-mode [style*="solid #464646"],
html.light-mode [style*="solid #333"] {
    border-color: var(--lm-line) !important;
}

/* bottom-nav active item: gold text on a light ground fails contrast */
html.light-mode #menu_home.selected div,
html.light-mode #menu_wallet.selected div,
html.light-mode #menu_program.selected div,
html.light-mode #menu_setting.selected div,
html.light-mode #menu_history.selected div,
html.light-mode #menu_info.selected div {
    color: var(--lm-gold-deep) !important;
}

/* ========================================================================= */
/*  WHITE GLYPH ICONS -> BLACK                                               */
/*  Several icon sets are white PNG glyphs drawn for a dark background, so    */
/*  once their bar turns light they disappear. invert(1) turns a white glyph  */
/*  black and leaves the transparent pixels transparent - no new image files, */
/*  no markup change.                                                         */
/*                                                                            */
/*  Every file below was measured before being listed (average saturation and */
/*  luminance over its opaque pixels). Inverting a COLOUR icon wrecks it -     */
/*  /images/icons/ in particular is a mixed folder, so it is named file by     */
/*  file rather than swept, and /images/category-icon/ holds three colour      */
/*  icons (deposit, withdraw, rebate, all ~0.87 saturation) alongside its      */
/*  white glyphs. Also never inverted: /logo/, /icons-logo/ and /bank_logo/    */
/*  brand marks, and the language flags in /images/side/.                      */
/* ========================================================================= */
html.light-mode img[src*="/bottom-menu-icon/"][src*="-white"],
html.light-mode img[src*="/category-icon/"][src*="-white"],
html.light-mode .sidenav img[src*="/side/"]:not([src*="flag"]),
/* the four white glyphs out of the mixed /images/icons/ folder */
html.light-mode img[src*="/icons/shop.png"],
html.light-mode img[src*="/icons/transfer.png"],
html.light-mode img[src*="/icons/VIP.png"],
html.light-mode img[src*="/icons/rekomen-bonus.png"],
/* "Our Partners": the only two white brand marks in that row (255 and 213 luma) */
html.light-mode img[src*="playtech-white"],
html.light-mode img[src*="pp-white"] {
    filter: invert(1);
}

/* Both rails swap their ACTIVE item to a different PNG with `content: url(...)`
   while the src attribute still says "-white", so the rule above would invert
   an image that is already the right colour.
   Category rail -> "-black.png": already dark on the gold pill, leave it be. */
html.light-mode .category-picker.selected img {
    filter: none !important;
}

/* Bottom nav -> "-yellow.png": darken rather than invert (inverting gold gives
   blue), to match the gold label beside it. */
html.light-mode #bottom-nav .selected img {
    filter: brightness(.62) saturate(1.6);
}

/* ========================================================================= */
/*  INLINE !important GUARDS                                                 */
/*  An inline  !important  declaration outranks every stylesheet, so those    */
/*  few colours cannot be re-mapped. Instead the OTHER half of the pair is    */
/*  adjusted here so the element stays readable. The doubled class raises     */
/*  specificity above class rules such as `.sidenav a`.                       */
/* ========================================================================= */

/* Header "Login" button: its dark background is inline !important and is stuck
   that way, so it becomes the theme's contrast button - white text on #222631. */
html.light-mode.light-mode [style*="background-color: #222631 !important"],
html.light-mode.light-mode [style*="background-color:#222631 !important"],
html.light-mode.light-mode [style*="background-color:#222631!important"] {
    color: #ffffff !important;
    border-color: #222631 !important;
    box-shadow: var(--lm-e1) !important;
}

/* Mirror case - the text is white !important and stuck that way, so the dark
   background is kept rather than lightened. */
html.light-mode.light-mode [style*="#222631"][style*="color:white !important"],
html.light-mode.light-mode [style*="#222631"][style*="color: white !important"],
html.light-mode.light-mode [style*="#222631"][style*="color:white!important"] {
    background-color: #222631 !important;
    background-image: none !important;
    border-color: #222631 !important;
}

/* ========================================================================= */
/*  OPT-OUT: PANELS THAT MUST STAY DARK                                      */
/*  The consecutive check-in reward popups (#consecutive_modal_7, _14, _21…)  */
/*  are gold artwork on black - the voucher images carry their own dark       */
/*  ground, so a light panel around them renders wrong. Re-pointing the       */
/*  tokens on the modal root reverts every var()-driven rule inside it back   */
/*  to the dark values, without unpicking any of them individually.           */
/* ========================================================================= */
html.light-mode [id^="consecutive_modal_"] {
    --lm-ground:        #0a0f15;
    --lm-chrome:        #0a0f15;
    --lm-surface:       #0a0f15;
    --lm-sunken:        #1c1c1c;
    --lm-gold-wash:     #2d291e;
    --lm-gold-row:      #332f20;

    --lm-line:          #e8c850;   /* .modal-content's original gold border */
    --lm-line-soft:     #2a2f3a;
    --lm-line-gold:     #4a3d16;

    --lm-ink:           #ffffff;
    --lm-ink-2:         #cccccc;
    --lm-ink-3:         #98a8b5;

    --lm-gold-deep:     #e8c850;   /* gold reads as gold again on black */
    --lm-orange-deep:   #fdab2b;

    --lm-e1:            none;
    --lm-e2:            none;
    --lm-e3:            none;
}

/* ====================================================== the toggle button == */
.theme-toggle-btn {
    position: fixed;
    /* Sits just under the header bar: the only strip of the right edge that is
       free of controls at every breakpoint (375 / 768 / 1024 / 1280 / 1600). */
    top: 64px;
    right: 6px;
    z-index: 2000;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(34, 38, 49, .75);
    color: #e8c850;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: background .2s ease, color .2s ease;
}

.theme-toggle-btn:hover {
    background: rgba(34, 38, 49, .95);
}

/* Once moved into the header row (.align-middle is display:flex, so it centres
   itself) the button stops floating and sits beside the language flag, sized
   to match it. The fixed rule above is the fallback for layouts with no header. */
.theme-toggle-btn.theme-toggle-inline {
    position: static;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin: 0 6px 0 0;
    background: rgba(255, 255, 255, .13);
    box-shadow: none;
}

.theme-toggle-btn.theme-toggle-inline:hover {
    background: rgba(255, 255, 255, .22);
}

.theme-toggle-btn:focus {
    outline: none;
}

html.light-mode .theme-toggle-btn {
    background: var(--lm-surface) !important;
    color: var(--lm-gold-deep) !important;
    border: 1px solid var(--lm-line) !important;
    box-shadow: var(--lm-e1) !important;
}

html.light-mode .theme-toggle-btn:hover {
    background: var(--lm-gold-wash) !important;
}

html.light-mode .theme-toggle-btn.theme-toggle-inline {
    background: var(--lm-gold-wash) !important;
    border: 1px solid var(--lm-line-gold) !important;
    box-shadow: none !important;
}