/* style.css */
/* Google Fonts are now loaded via non-blocking <link> tags in index.html */

/*
   ═══ POLICY: When to use `!important` ═════════════════════════════════════
   This file is loaded AFTER tailwind.css, so equal-specificity rules already
   win on source order. !important is only needed when a CSS rule has to beat:
     1. An inline `style="…"` attribute on the element (specificity 1,0,0,0
        — the only thing other than another !important that beats author CSS).
     2. A higher-specificity selector elsewhere in this file or in a child of
        a third-party widget (TradingView injects a few inline styles).
   Most of the !important calls in this file fall under (1): the codebase
   builds DOM via JS template literals that liberally use `style="…"` for
   per-component sizing/coloring. Mobile media queries especially have to
   beat those.
   Common situations where !important is NOT needed (don't add it):
     · Class-on-class wars (use a more specific selector instead)
     · Tailwind utility overrides — see the `body .text-white { … }` block
       below for the specificity-bump pattern
     · Re-declaring a property in a deeper variant of the same selector
       (later in source order with same specificity already wins)
   When you do need !important, leave a one-line comment explaining what
   inline style or higher-specificity rule it's beating, so the next person
   doesn't have to reverse-engineer it.
   ════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   THEME SYSTEM
   Three themes: dark (default) | blue | light
   All page styles should reference CSS variables — never hardcode hex values.

   HOW TO USE IN PAGE FILES:
   ─ Backgrounds:  var(--bg-main)  var(--bg-card)  var(--bg-elevated)  var(--bg-input)
   ─ Borders:      var(--border)   var(--border-strong)
   ─ Text:         var(--text-primary)  var(--text-secondary)  var(--text-muted)
   ─ Accents:      var(--accent)    var(--accent-muted)   var(--gold)
   ─ States:       var(--green)     var(--red)
   ─ Sidebar:      var(--bg-sidebar)
══════════════════════════════════════════════════════════════════════════════ */

/* ─── DARK THEME (default) ────────────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg-main:          #0a0a0a;
    --bg-sidebar:       #111111;
    --bg-card:          #181818;
    --bg-elevated:      #222222;
    --bg-input:         #1a1a1a;

    /* Borders */
    --border:           rgba(255,255,255,0.07);
    --border-strong:    rgba(255,255,255,0.14);

    /* Text */
    --text-primary:     #f0f0f0;
    --text-secondary:   #b0b0b0;
    --text-muted:       #909090;

    /* Accents */
    --accent:           #e5e5e5;
    --accent-muted:     rgba(229,229,229,0.12);
    --gold:             #f2a900;
    --gold-muted:       rgba(242,169,0,0.12);

    /* States */
    --green:            #4ade80;
    --red:              #f87171;

    /* Legacy compat tokens (map to new vars) */
    --bg-main-compat:   #0a0a0a;
    --bg-card-compat:   #181818;
    --accent-primary:   #e5e5e5;
    --accent-gold:      #f2a900;
    --border-soft:      rgba(255,255,255,0.07);
    --text-main:        #f0f0f0;
    --text-muted-compat:#909090;

    /* Mobile tokens */
    --sidebar-width:    220px;
    --hamburger-size:   44px;
    --topbar-height:    56px;
}

/* ─── BLUE THEME ───────────────────────────────────────────────────────────── */
:root.blue-mode {
    --bg-main:          #0b0e14;
    --bg-sidebar:       #11141b;
    --bg-card:          #161b22;
    --bg-elevated:      #1c2128;
    --bg-input:         #161b22;

    --border:           rgba(255,255,255,0.06);
    --border-strong:    rgba(255,255,255,0.12);

    --text-primary:     #e6edf3;
    --text-secondary:   #adbac7;
    --text-muted:       #8b949e;

    --accent:           #3b82f6;
    --accent-muted:     rgba(59,130,246,0.12);
    --gold:             #f2a900;
    --gold-muted:       rgba(242,169,0,0.1);

    --green:            #3fb950;
    --red:              #f85149;

    /* Legacy compat */
    --bg-main-compat:   #0b0e14;
    --bg-card-compat:   #161b22;
    --accent-primary:   #3b82f6;
    --accent-gold:      #f2a900;
    --border-soft:      rgba(255,255,255,0.06);
    --text-main:        #e6edf3;
    --text-muted-compat:#8b949e;
}

/* ─── LIGHT THEME ─────────────────────────────────────────────────────────── */
:root.light-mode {
    --bg-main:          #f5f5f5;
    --bg-sidebar:       #ffffff;
    --bg-card:          #ffffff;
    --bg-elevated:      #f0f0f0;
    --bg-input:         #f8f8f8;

    --border:           rgba(0,0,0,0.09);
    --border-strong:    rgba(0,0,0,0.16);

    --text-primary:     #111111;
    --text-secondary:   #444444;
    --text-muted:       #6b7280;

    --accent:           #2563eb;
    --accent-muted:     rgba(37,99,235,0.1);
    --gold:             #c88b00;
    --gold-muted:       rgba(200,139,0,0.1);

    --green:            #16a34a;
    --red:              #dc2626;

    /* Legacy compat */
    --bg-main-compat:   #f5f5f5;
    --bg-card-compat:   #ffffff;
    --accent-primary:   #2563eb;
    --accent-gold:      #c88b00;
    --border-soft:      rgba(0,0,0,0.09);
    --text-main:        #111111;
    --text-muted-compat:#6b7280;
}

/* ─── SMOOTH THEME TRANSITIONS ────────────────────────────────────────────── */
/* Applied only while the theme class is being swapped (JS adds/removes       */
/* .theme-changing on <html> for ~300ms). Avoids permanently burdening every  */
/* element with transitions and prevents double-timing with component rules.  */
.theme-changing, .theme-changing *, .theme-changing *::before, .theme-changing *::after {
    transition: background-color 0.22s ease, border-color 0.22s ease,
                color 0.18s ease, box-shadow 0.22s ease !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BASE STYLES
══════════════════════════════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    /* Ensure body doesn't clip sticky children */
    overflow-x: hidden;
}

/* ─── PAGE LAYOUT: sticky sidebar requires flex-start alignment ──────────── */
/* The outer flex row wrapping #sidebar-target + main must NOT use
   align-items: stretch (the default), otherwise position:sticky won't work. */
body > div[style*="flex"],
.page-flex-root,
#page-root {
    align-items: flex-start !important;
}

/* ─── HARDCODED COLOR OVERRIDES (all themes) ─────────────────────────────── */
/* Pages use Tailwind classes with hardcoded hex — override to CSS vars here. */
/* These rules used to carry `!important` to beat Tailwind's same-specificity */
/* utility classes. They no longer need it: prefixing with `body` raises      */
/* specificity from (0,1,0) to (0,1,1), so the cascade picks our rules even   */
/* when Tailwind, page CSS, and these rules all target the same property.     */
/* `body` instead of `html` keeps these scoped to the document body, matching */
/* where Tailwind utility classes are actually used. There's no inline-style  */
/* collision in the codebase for any of these properties (verified by grep    */
/* against `class="…tailwind…" style="…color/background…"` pairs).            */

/* ── backgrounds ── */
body .bg-\[\#0d1117\],
body .bg-\[\#0b0e14\],
body .bg-\[\#0a0a0a\]  { background-color: var(--bg-main); }

body .bg-\[\#161b22\],
body .bg-\[\#181818\]  { background-color: var(--bg-card); }

body .bg-\[\#11141b\],
body .bg-\[\#111111\]  { background-color: var(--bg-sidebar); }

body .bg-\[\#1c2128\],
body .bg-\[\#222222\],
body .bg-\[\#21262d\]  { background-color: var(--bg-elevated); }

body .bg-\[\#2d333b\]  { background-color: var(--bg-elevated); }

/* ── borders ── */
body .border-gray-800,
body .border-\[\#30363d\],
body .border-\[\#21262d\] { border-color: var(--border); }

body .divide-gray-800 > * + * { border-color: var(--border); }

/* ── text ── */
body .text-white        { color: var(--text-primary); }
body .text-gray-100     { color: var(--text-primary); }
body .text-gray-200     { color: var(--text-primary); }
body .text-gray-300     { color: var(--text-secondary); }
body .text-gray-400     { color: var(--text-secondary); }
body .text-gray-500     { color: var(--text-secondary); }
body .text-gray-600     { color: var(--text-muted); }
body .text-gray-700     { color: var(--text-muted); }

/* ── hover ── */
body .hover\:bg-\[\#2d333b\]:hover  { background-color: var(--bg-elevated); }
body .hover\:bg-\[\#161b22\]:hover  { background-color: var(--bg-card); }
body .hover\:bg-\[\#0d1117\]:hover  { background-color: var(--bg-main); }
body .hover\:text-gray-400:hover    { color: var(--text-secondary); }
body .hover\:text-\[\#f2a900\]:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════════════════ */

.sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border);
}

.btn-side {
    width: 100%; padding: 6px 10px; margin-bottom: 1px;
    border-radius: 6px; font-size: 11px; font-weight: 700;
    color: var(--text-secondary); transition: all 0.2s ease;
    display: flex; align-items: center; gap: 8px;
}

.btn-side:hover {
    background: var(--accent-muted);
    color: var(--accent);
}

.btn-side.active {
    background: var(--accent-muted);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Home button — inherits all .btn-side styles */
.btn-home-fixed {
    margin-bottom: 4px;
}
.btn-home-fixed.active {
    background: var(--accent-muted);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.btn-home-fixed:hover {
    background: var(--accent-muted);
    color: var(--accent);
}

/* ─── PORTFOLIO HEADER BOX ───────────────────────────────────────────────────── */

.portfolio-header-box {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.portfolio-header-box:hover {
    border-color: rgba(242, 169, 0, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(242, 169, 0, 0.15), 0 4px 16px rgba(0,0,0,0.4);
    transform: translateY(-1px);
}

.portfolio-header-box:active {
    transform: translateY(0);
}

.light-mode .portfolio-header-box:hover {
    border-color: rgba(242, 169, 0, 0.5) !important;
}

/* ─── PORTFOLIO HEADER MINI-BOX (in stats-container) ────────────────────────── */

#pf-header-box {
    min-width: 140px;
    height: 75px;
    background-color: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
    flex-shrink: 0;
}

#pf-header-box:hover {
    border-color: rgba(242, 169, 0, 0.45) !important;
    background-color: var(--bg-elevated);
    transform: translateY(-1px);
}



.nav-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    margin-top: 12px;
    margin-bottom: 2px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.15s ease;
}

.nav-section-header:hover {
    background: var(--accent-muted);
}

.nav-section-header__text {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.nav-section-header:hover .nav-section-header__text {
    color: var(--text-secondary);
}

.nav-section-header__chevron {
    font-size: 8px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.15s ease;
}

.nav-section-header:hover .nav-section-header__chevron {
    color: var(--text-secondary);
}

[id^="sidebar-sortable-"] {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

[id^="sidebar-sortable-"].nav-section--collapsed {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.light-mode .nav-section-header:hover { background: rgba(0,0,0,0.04); }

/* ─── SIDEBAR DRAG-TO-REORDER ────────────────────────────────────────────── */

.drag-handle {
    display: inline-flex;
    align-items: center;
    padding: 0 2px 0 0;
    color: transparent;
    cursor: grab;
    transition: color 0.15s ease;
    font-size: 10px;
    flex-shrink: 0;
}

.btn-side:hover .drag-handle {
    color: var(--text-muted);
}

.drag-handle:active { cursor: grabbing; }

.btn-side--ghost {
    opacity: 0.35;
    background: var(--gold-muted) !important;
    border: 1px dashed rgba(242,169,0,0.3) !important;
    border-radius: 6px;
}

.btn-side--chosen {
    background: var(--accent-muted) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

.btn-side--drag {
    opacity: 0.95;
    background: var(--bg-card) !important;
    border: 1px solid rgba(242,169,0,0.4) !important;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════════════════ */

.bg-card-modern {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.3s ease;
}

.bg-card-modern:hover {
    border-color: var(--border-strong);
}

.font-data { font-family: 'JetBrains Mono', monospace; }

/* ══════════════════════════════════════════════════════════════════════════════
   TOOLTIP
══════════════════════════════════════════════════════════════════════════════ */

#custom-tooltip {
    backdrop-filter: blur(10px);
    background: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    border-left: 3px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

/* Light: stronger shadow */
.light-mode #custom-tooltip {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════════════════════════════ */

.logo-link {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-link:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SKELETON SCREENS
══════════════════════════════════════════════════════════════════════════════ */

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.skel {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-input) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 400px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

.skel-line    { height: 10px; }
.skel-line-sm { height: 8px; }
.skel-line-lg { height: 14px; }
.skel-line-xl { height: 20px; }
.skel-circle  { border-radius: 50%; }

.skel-card {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-elevated) 50%,
        var(--bg-card) 75%
    );
    background-size: 400px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCALE BUTTONS (Language / Currency)
══════════════════════════════════════════════════════════════════════════════ */

.locale-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.locale-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

.locale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.locale-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   THEME PICKER (collapsible)
══════════════════════════════════════════════════════════════════════════════ */

#theme-picker-wrap {
    position: relative;
}

#theme-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
}

#theme-picker-btn:hover {
    background: var(--gold-muted);
    color: var(--gold);
    border-color: rgba(242,169,0,0.3);
}

#theme-picker-btn i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

#theme-picker-btn.open i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Dropdown panel */
#theme-picker-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 200;
    min-width: 120px;
    animation: theme-panel-in 0.15s ease;
}

#theme-picker-panel.visible {
    display: block;
}

@keyframes theme-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.theme-option:hover {
    background: var(--accent-muted);
    color: var(--text-primary);
}

.theme-option.active {
    color: var(--gold);
    background: var(--gold-muted);
}

.theme-option .theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}

/* `.theme-option .theme-dot` (specificity 0,2,0) sets border above; chain */
/* the variant class onto the same scope so the override wins on            */
/* specificity (0,3,0) instead of needing `!important`.                     */
.theme-option .theme-dot.theme-dot--dark  { background: #222222; border-color: #444; }
.theme-option .theme-dot.theme-dot--blue  { background: #3b82f6; }
.theme-option .theme-dot.theme-dot--light { background: #f0f0f0; border-color: #ccc; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — Hamburger Button
══════════════════════════════════════════════════════════════════════════════ */

#sidebar-toggle { display: none; }

.is-mobile #sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: fixed;
    top: calc((var(--topbar-height) - var(--hamburger-size)) / 2);
    left: 12px;
    z-index: 1100;
    width: var(--hamburger-size);
    height: var(--hamburger-size);
    background: var(--bg-card);
    border: 1px solid var(--gold-muted);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.is-mobile #sidebar-toggle:active {
    background: var(--gold-muted);
    border-color: rgba(242,169,0,0.5);
    box-shadow: 0 0 12px rgba(242,169,0,0.15);
}

.ham-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
    transform-origin: center;
}

#sidebar-toggle.is-open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--gold); }
#sidebar-toggle.is-open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#sidebar-toggle.is-open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--gold); }

/* ─── MOBILE — Overlay ─────────────────────────────────────────────────────── */

#sidebar-overlay { display: none; }

.is-mobile #sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.is-mobile #sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — Topbar
══════════════════════════════════════════════════════════════════════════════ */

#mobile-topbar { display: none; }

.is-mobile #mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    z-index: 1090;
    padding: 0 16px 0 68px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#mobile-topbar-brand {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--text-primary);
}

#mobile-topbar-brand span { color: var(--gold); }

#mobile-topbar-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

#mobile-topbar-price-val {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#mobile-topbar-price-chg {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — Sidebar Slide-in
══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    :root {
        --topbar-height: 40px;
        --hamburger-size: 32px;
    }

    .is-mobile #mobile-topbar    { padding: 0 12px 0 52px; }
    #mobile-topbar-brand         { font-size: 14px; }
    #mobile-topbar-price-val     { font-size: 13px; }
    #mobile-topbar-price-chg     { font-size: 9px; }
    .is-mobile #sidebar-toggle   { left: 10px; border-radius: 9px; }
    .ham-line                    { width: 15px; }

    .sidebar {
        position: fixed !important;
        top: 0; left: 0;
        height: 100dvh !important;
        width: min(82vw, 270px) !important;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto !important;
        overflow-x: hidden;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
        display: block !important;
        height: 100dvh !important;
    }

    .sidebar.sidebar-open { transform: translateX(0); }

    .sidebar { padding-top: calc(var(--topbar-height) + 8px) !important; }

    .sidebar > nav {
        flex: none !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
    }

    .sidebar > div.mt-2,
    .sidebar > div.pt-1 { position: static !important; }

    .sidebar > div.pt-1 { padding-bottom: 20px !important; }

    main {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 6px !important;
        padding-top: calc(var(--topbar-height) + 6px) !important;
        overflow-x: hidden !important;
        min-height: 100dvh !important;
        box-sizing: border-box !important;
    }

    /* Stat boxes */
    #market-analysis-header {
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    #stats-container {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        flex-shrink: 1 !important;
        gap: 5px !important;
        justify-content: flex-end !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    #stats-container::-webkit-scrollbar { display: none !important; }

    #btc-price-box {
        width: auto !important; flex-shrink: 0 !important;
        min-width: 120px !important; height: auto !important;
        min-height: 60px !important; padding: 8px 10px !important;
    }

    #btc-price-box span[id="price-box-title"],
    #btc-price-box span.text-\[8px\] { font-size: 9px !important; }
    #btc-price-box #live-btc-price   { font-size: 1.2rem !important; }
    #btc-price-box #live-btc-change  { font-size: 10px !important; }

    #btc-high-box,
    #btc-low-box {
        width: auto !important; flex-shrink: 0 !important;
        min-width: 80px !important; height: auto !important;
        min-height: 60px !important; padding: 8px 8px !important;
    }

    #btc-high-box span.text-\[8px\],
    #btc-low-box span.text-\[8px\]   { font-size: 9px !important; }
    #btc-high-box #btc-high-24h,
    #btc-low-box #btc-low-24h        { font-size: 0.8rem !important; }

    #performance-box {
        min-width: 90px !important; flex-shrink: 0 !important;
        height: auto !important; min-height: 60px !important;
    }

    #performance-box span.text-\[8px\] { font-size: 9px !important; }
    #performance-box span.text-sm      { font-size: 0.85rem !important; }
    #performance-box .perf-tab         { font-size: 8px !important; padding: 4px 5px !important; }

    #halving-timer                { gap: 4px !important; }
    #halving-timer p.text-xs      { font-size: 0.75rem !important; }
    #halving-timer p.text-\[6px\] { font-size: 8px !important; }

    /* Chart */
    #tradingview_chart {
        height: 54vw !important; min-height: 250px !important;
        max-height: 400px !important; width: 100% !important;
        border-radius: 10px !important; overflow: hidden !important;
    }

    #tradingview_chart.mobile-fullpage {
        height: calc(100dvh - var(--topbar-height) - 12px) !important;
        min-height: 0 !important; max-height: none !important;
        overflow-y: auto !important; border-radius: 10px !important;
    }

    #chart-skeleton { min-height: 54vw; }

    /* Calculator */
    .mobile-calc-grid { grid-template-columns: 1fr !important; }

    /* Market News */
    #mn-root > div {
        width: 100% !important; padding: 12px !important; box-sizing: border-box !important;
    }
    #mn-page-title { font-size: 1.4rem !important; line-height: 1.2 !important; }

    #mn-source-tabs {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
        overflow-y: hidden !important; gap: 6px !important; padding-bottom: 6px !important;
        margin-bottom: 8px !important; -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    #mn-source-tabs::-webkit-scrollbar { display: none; }
    #mn-source-tabs button {
        flex-shrink: 0 !important; white-space: nowrap !important;
        padding: 6px 12px !important; font-size: 11px !important;
        border-radius: 20px !important; min-height: 32px !important;
    }

    #mn-category-pills {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
        gap: 6px !important; padding-bottom: 4px !important; margin-bottom: 12px !important;
        -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
        align-items: center !important;
    }
    #mn-category-pills::-webkit-scrollbar { display: none; }
    #mn-category-pills button {
        flex-shrink: 0 !important; white-space: nowrap !important;
        font-size: 11px !important; min-height: 30px !important;
    }
    #mn-category-pills span[style*="margin-left:auto"] {
        flex-shrink: 0 !important; margin-left: 8px !important; font-size: 10px !important;
    }

    #mn-sentiment-box > div {
        flex-direction: column !important; gap: 10px !important;
        padding: 12px 14px !important; border-radius: 12px !important;
    }
    #mn-sentiment-box > div > div:first-child { min-width: 0 !important; width: 100% !important; }
    #mn-sentiment-box > div > div:nth-child(2) {
        width: 100% !important; justify-content: flex-start !important; gap: 24px !important;
    }
    #mn-sentiment-box > div > div:last-child { min-width: 0 !important; width: 100% !important; }

    #mn-layout { flex-direction: column !important; gap: 10px !important; }
    #mn-grid { grid-template-columns: 1fr !important; gap: 8px !important; flex: 1 !important; }

    .mn-card { padding: 14px !important; border-radius: 12px !important; }
    .mn-card h3 { font-size: 13px !important; line-height: 1.5 !important; }
    .mn-card p { font-size: 11px !important; line-height: 1.6 !important; -webkit-line-clamp: 3 !important; }

    #mn-reader { width: 100% !important; flex-shrink: 0 !important; position: static !important; margin-top: 4px !important; }
    #mn-reader > div { border-radius: 14px !important; }
    #mn-reader-body { max-height: 65vh !important; padding: 14px 16px !important; }
    #mn-reader-body h2 { font-size: 14px !important; line-height: 1.5 !important; }
    #mn-reader-body p  { font-size: 12px !important; line-height: 1.85 !important; }

    /* Tooltips */
    #custom-tooltip {
        position: fixed !important; bottom: 16px !important; top: auto !important;
        left: 50% !important; transform: translateX(-50%) !important;
        width: calc(100vw - 24px) !important; max-width: 420px !important;
        max-height: 60vh !important; overflow-y: auto !important;
        font-size: 12px !important; line-height: 1.6 !important; z-index: 2000 !important;
    }

    /* Nav tap targets */
    .btn-side {
        padding: 12px 14px !important; font-size: 12px !important;
        border-radius: 8px !important; min-height: 44px !important;
    }

    /* Whale table */
    .whale-table th:nth-child(4),
    .whale-table td:nth-child(4) { display: none; }
    .whale-table td.whale-amount-cell { display: flex; flex-direction: column; gap: 1px; }
    .whale-amount-btc { font-size: 11px; font-weight: 800; }
    .whale-amount-usd { font-size: 9px; color: var(--text-muted); }

    /* Global text bumps */
    .mobile-label-bump,
    [class*="text-[8px]"] { font-size: 10px !important; }
    [class*="text-[9px]"] { font-size: 11px !important; }

    #index-value { font-size: 2rem !important; }

    /* Misc */
    .bg-card-modern { padding: 10px 12px !important; border-radius: 10px; }
    .bg-card-modern:hover { border-color: var(--border); }
    ::-webkit-scrollbar { width: 2px; }

    /* ──────────────────────────────────────────────────────────────────────
       MOBILE — Tool pages (mempool, dominance, wallet distribution)
       Inline grid/flex layouts in tools/*.js are sized for desktop; these
       rules collapse them into stacked / 2-col layouts that fit a phone.
    ────────────────────────────────────────────────────────────────────── */

    /* BTC Dominance — stack donut+legend above metric cards, give chart a
       fixed height so the whole page can scroll naturally. */
    #dom-wrap     { height: auto !important; overflow: visible !important; }
    #dom-top-row  { flex-direction: column !important; }
    #dom-side     {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }
    #dom-side #dom-donut-wrap { width: 140px !important; height: 140px !important; }
    #dom-side #dom-donut-svg  { width: 140px !important; height: 140px !important; }
    #dom-side #dom-legend     { flex: 1 !important; min-width: 0 !important; }
    #dom-cards { padding: 12px !important; gap: 6px !important; }
    #dom-chart-inner { flex: 0 0 auto !important; height: 320px !important; min-height: 0 !important; }

    /* Mempool — 5 stat cards → 2-col grid; congestion+fees stack; projected
       blocks scroll horizontally with queue/clear info pinned below. */
    #mp-row-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    #mp-row-stats .mp-stat-card { padding: 10px 12px !important; }
    #mp-row-stats .mp-stat-card p[style*="font-size:22px"] { font-size: 17px !important; }

    #mp-row-cong { grid-template-columns: 1fr !important; }

    #mp-blocks-outer { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    #mp-blocks-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    #mp-blocks-scroll::-webkit-scrollbar { display: none !important; }
    #mp-blocks-scroll > div { flex-shrink: 0 !important; }
    #mp-blocks-info {
        flex-direction: row !important;
        gap: 24px !important;
        padding-left: 0 !important;
        padding-top: 8px !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
    }

    /* Wallet Distribution — 4 summary cards → 2-col; supply/insights stack;
       wealth table tightens columns and shrinks address font to fit. */
    #dist-summary { grid-template-columns: repeat(2, 1fr) !important; }
    #dist-summary .text-lg { font-size: 0.95rem !important; }
    #dist-mid     { grid-template-columns: 1fr !important; }
    #dist-table .dist-table-grid {
        grid-template-columns: 24px 70px minmax(0, 1fr) 56px 56px !important;
        gap: 4px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    #dist-table .dist-table-grid > * { min-width: 0 !important; }

    * { max-width: 100%; }
    img, iframe, video { max-width: 100% !important; }
}

/* ─── Very small screens ──────────────────────────────────────────────────── */
@media (max-width: 380px) {
    #btc-price-box,
    #btc-high-box,
    #btc-low-box {
        flex: 1 1 calc(33% - 5px) !important;
        min-width: 0 !important;
    }

    #tradingview_chart {
        height: 68vw !important;
        min-height: 230px !important;
    }

    #mn-root > div { padding: 10px !important; }
}

/* ─── MOBILE: hide sidebar logo ─────────────────────────────────────────── */
.is-mobile .sidebar .logo-link { display: none !important; }
.is-mobile .sidebar > div:first-child { display: none !important; }

#sidebar-target {
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
    /* Sticky sidebar: stays fixed while content scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-mobile #sidebar-target {
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible;
    /* Reset sticky positioning — mobile uses position:fixed on .sidebar */
    position: static !important;
    height: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE / ICON-ONLY MODE
══════════════════════════════════════════════════════════════════════════════ */

/* Collapsed container width */
#sidebar-target.sidebar-collapsed {
    width: 60px !important;
    min-width: 60px !important;
}

/* The aside itself transitions its padding */
.sidebar {
    transition:
        width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    /* Fill the sticky container height */
    height: 100%;
}

/* In collapsed mode the aside stretches to fill the narrow container */
.sidebar-collapsed .sidebar {
    min-width: 61px !important;
    width: 61px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    align-items: center;
    overflow: hidden;
}

/* ── Toggle button ── */
#sidebar-collapse-btn {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    flex-shrink: 0;
}

#sidebar-collapse-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

#sidebar-collapse-btn .collapse-icon {
    font-size: 10px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapsed #sidebar-collapse-btn .collapse-icon {
    transform: rotate(180deg);
}

/* ── Logo hide/show ── */
.sidebar .logo-link {
    transition: opacity 0.2s ease, transform 0.25s ease, max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    display: inline-block;
}

.sidebar-collapsed .sidebar .logo-link {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

/* ── Nav section headers hide ── */
.sidebar-collapsed [id^="section-label-"] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    transition: opacity 0.15s ease, height 0.25s ease;
}

/* ── Button text/label hide ── */
.btn-side .btn-side-label {
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    opacity: 1;
    transition:
        max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.18s ease;
    display: inline-block;
}

.sidebar-collapsed .btn-side .btn-side-label {
    max-width: 0 !important;
    opacity: 0 !important;
}

/* ── Drag handle hide ── */
.btn-side .drag-handle {
    transition: max-width 0.28s ease, opacity 0.18s ease;
    overflow: hidden;
    max-width: 24px;
}

.sidebar-collapsed .btn-side .drag-handle {
    max-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
}

/* ── Btn-side in collapsed mode: center icon ── */
.sidebar-collapsed .btn-side {
    justify-content: center;
    padding: 11px 0 !important;
    width: 44px !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 9px;
    position: relative;
    gap: 0 !important;
    overflow: visible;
}

.sidebar-collapsed .btn-side i:not(.drag-handle i) {
    font-size: 17px;
    transition: font-size 0.2s ease;
}

/* NOTE: CSS ::after tooltip removed — collapsed nav tooltips are now
   rendered via JS using #custom-tooltip on document.body, which sits
   above all stacking contexts. See initCollapsedTooltips() in sidebar-component.js */

/* ── Bottom area hide in collapsed ── */
.sidebar .sidebar-bottom-area {
    max-height: 300px;
    transition: opacity 0.2s ease 0.1s, max-height 0.32s ease;
}

.sidebar-collapsed .sidebar-bottom-area {
    /* Selector specificity (0,2,0) already beats the .sidebar .sidebar-bottom-area
       base rule above and Tailwind's mt-2/pt-2/border-t (all 0,1,0); no
       !important needed. The earlier `!important`s here were defensive but
       redundant. */
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    transition: opacity 0.15s ease, max-height 0.3s ease;
}

/* ── Footer hide in collapsed ── */
.sidebar .sidebar-footer-area {
    transition: opacity 0.2s ease 0.12s, max-height 0.25s ease;
    max-height: 60px;
}

.sidebar-collapsed .sidebar-footer-area {
    /* Same specificity-wins-by-itself reasoning as .sidebar-bottom-area above. */
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.12s ease, max-height 0.25s ease;
}

/* ── Home button in collapsed: identical layout to other btn-side items ── */
.sidebar-collapsed #btn-home {
    width: 44px !important;
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
    padding: 11px 0 !important;
    gap: 0 !important;
    border-radius: 9px;
}

.sidebar-collapsed #btn-home .btn-side-label {
    max-width: 0 !important;
    opacity: 0 !important;
}

/* ── Nav container centering in collapsed ── */
.sidebar-collapsed #sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sortable containers in collapsed ── */
.sidebar-collapsed [id^="sidebar-sortable-"] {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    /* Override the section-collapse animation overflow so nav can scroll */
    overflow: visible !important;
    max-height: none !important;
}

/* Keep user-collapsed sections hidden even in collapsed sidebar */
.sidebar-collapsed [id^="sidebar-sortable-"].nav-section--collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
}

/* Micro icons between sections in collapsed — tiny dividers */
.sidebar-collapsed .sidebar-section-divider {
    width: 28px;
    height: 1px;
    background: var(--border);
    margin: 4px auto;
    opacity: 0.5;
}

/* Active pill in collapsed: gold icon, accent background */
.sidebar-collapsed .btn-side.active {
    background: var(--accent-muted) !important;
    box-shadow: none !important;
}

.sidebar-collapsed .btn-side.active i {
    color: var(--accent) !important;
}

/* Alerts badge visibility in collapsed */
.sidebar-collapsed #alert-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 7px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    line-height: 1;
    /* Override inline margin-left:auto from JS */
    margin-left: 0 !important;
}

/* Alerts badge — normal (expanded) state */
#alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--gold);
    color: #0d1117;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(242,169,0,0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Ensure nav section headers have 0 height with no flicker */
.sidebar-collapsed [id^="section-label-"] {
    height: 0 !important;
    min-height: 0 !important;
}

/* ── Collapsed sidebar scroll arrows (glass) ─────────────────────────── */
#sidebar-nav-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#sidebar-nav-wrapper #sidebar-nav {
    height: 100%;
}

/* Hide scrollbar in collapsed mode — arrows replace it */
.sidebar-collapsed #sidebar-nav {
    scrollbar-width: none;
}
.sidebar-collapsed #sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-scroll-arrow {
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    /* Glass */
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.sidebar-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-scroll-arrow--up {
    top: 0;
    background: linear-gradient(to bottom,
        var(--bg-card) 0%,
        transparent 100%);
    border-radius: 0 0 10px 10px;
}

.sidebar-scroll-arrow--down {
    bottom: 0;
    background: linear-gradient(to top,
        var(--bg-card) 0%,
        transparent 100%);
    border-radius: 10px 10px 0 0;
}

.sidebar-scroll-arrow i {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.7;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.sidebar-scroll-arrow:hover i {
    color: var(--gold);
    opacity: 1;
}

.sidebar-scroll-arrow--up:hover i { transform: translateY(-1px); }
.sidebar-scroll-arrow--down:hover i { transform: translateY(1px); }

/* Active press feedback */
.sidebar-scroll-arrow:active i {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Only show arrows in collapsed mode */
#sidebar-target:not(.sidebar-collapsed) .sidebar-scroll-arrow {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTRAST / LEGIBILITY FIXES
   Addresses WCAG AA failures reported by PageSpeed Insights.
   All --text-muted values have been raised in the theme tokens above;
   these rules patch specific component patterns that need extra specificity.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar section labels (MARKET TOOLS, PERSONAL TOOLS) ── */
/* The span uses inline style color:rgb(75,85,99) via Tailwind text-gray-600.
   Our .text-gray-600 override maps it to --text-muted (now #909090 dark / #8b949e blue). */
.nav-section-header__text {
    color: var(--text-secondary) !important; /* step up from muted for 9px uppercase labels */
}

/* ── Locale labels (Language, Currency) ── */
.locale-label {
    color: var(--text-secondary) !important;
}

/* ── Theme picker button (Dark label) ── */
#theme-picker-btn {
    color: var(--text-secondary) !important;
}

/* ── YEST. / WEEK / MONTH labels in sentiment box ── */
/* These are <p> elements rendered at small sizes on dark nested bg */
.bg-\[\#0d1117\] p,
[style*="bg-[#0d1117]"] p {
    color: var(--text-secondary) !important;
}

/* ── Start page: privacy tagline and count badges ── */
.start-section-count {
    color: var(--text-primary) !important;
}

.start-tips-title {
    color: var(--text-secondary) !important;
}

/* The privacy tagline "Privacy by design…" <p> in the start hero */
main > div > p,
.start-hero p {
    color: var(--text-secondary);
}

/* ── Footer buttons (Contact, Donate) in sidebar ── */
.sidebar-footer-area button {
    color: var(--text-secondary) !important;
}
.sidebar-footer-area button:hover {
    color: var(--text-primary) !important;
}

/* ── Light mode: extra contrast boosts for borderline elements ── */
.light-mode .nav-section-header__text {
    color: var(--text-secondary) !important;
}
.light-mode .locale-label {
    color: var(--text-primary) !important;
}
.light-mode #theme-picker-btn {
    color: var(--text-secondary) !important;
}
.light-mode .sidebar-footer-area button {
    color: var(--text-secondary) !important;
}