/* AdSense Unfilled Ad Slot Collapse */
ins[data-ad-status="unfilled"], ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ==========================================================
       BYO · Premium Analytics Design System (2026-04-18)
       Shared across the entire app (dashboard, stats, lists)
       ========================================================== */
    :root {
        --byo-slate-50:  #f8fafc;
        --byo-slate-100: #f1f5f9;
        --byo-slate-200: #e2e8f0;
        --byo-slate-300: #cbd5e1;
        --byo-slate-400: #94a3b8;
        --byo-slate-500: #64748b;
        --byo-slate-600: #475569;
        --byo-slate-700: #334155;
        --byo-slate-800: #1e293b;
        --byo-slate-900: #0f172a;

        --byo-indigo-50:  #eef2ff;
        --byo-indigo-100: #e0e7ff;
        --byo-indigo-400: #818cf8;
        --byo-indigo-500: #6366f1;
        --byo-indigo-600: #4f46e5;
        --byo-indigo-700: #4338ca;
        --byo-violet-500: #8b5cf6;
        --byo-violet-600: #7c3aed;
        --byo-emerald-50:  #ecfdf5;
        --byo-emerald-500: #10b981;
        --byo-emerald-600: #059669;
        --byo-rose-50:   #fff1f2;
        --byo-rose-500:  #f43f5e;
        --byo-rose-600:  #e11d48;
        --byo-amber-50:  #fffbeb;
        --byo-amber-500: #f59e0b;
        --byo-amber-600: #d97706;
        --byo-sky-50:    #f0f9ff;
        --byo-sky-500:   #0ea5e9;
        --byo-sky-600:   #0284c7;
        --byo-pink-50:   #fdf2f8;
        --byo-pink-500:  #ec4899;

        --byo-gradient-indigo:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        --byo-gradient-emerald: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        --byo-gradient-rose:    linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
        --byo-gradient-amber:   linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
        --byo-gradient-sky:     linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
        --byo-gradient-hero:    linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #8b5cf6 100%);
        --byo-gradient-hero-emerald: linear-gradient(135deg, #064e3b 0%, #047857 40%, #10b981 100%);
        --byo-gradient-bg:      linear-gradient(180deg, #f8fafc 0%, #eef2ff 40%, #f8fafc 100%);

        --byo-shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
        --byo-shadow-md:   0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
        --byo-shadow-lg:   0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
        --byo-shadow-glow-indigo:  0 10px 30px -8px rgba(99, 102, 241, 0.5);
        --byo-shadow-glow-emerald: 0 10px 30px -8px rgba(16, 185, 129, 0.45);
    }

    /* Page background — very subtle gradient wash */
    .bg-base-1 { background: var(--byo-gradient-bg) !important; }

    /* ==========================================================
       Hero banner
       ========================================================== */
    .byo-hero-banner {
        position: relative;
        border-radius: 20px;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.25rem;
        background: var(--byo-gradient-hero);
        color: #fff;
        box-shadow: var(--byo-shadow-glow-indigo);
        overflow: hidden;
    }
    .byo-hero-banner.byo-hero-banner--emerald {
        background: var(--byo-gradient-hero-emerald);
        box-shadow: var(--byo-shadow-glow-emerald);
    }
    .byo-hero-banner::before {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
                          radial-gradient(circle at 85% 110%, rgba(236,72,153,.25), transparent 45%);
        pointer-events: none;
    }
    .byo-hero-banner > * { position: relative; z-index: 1; }
    .byo-hero-label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; font-weight: 600; }
    .byo-hero-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; margin: 0; color: #fff; }
    .byo-hero-sub   { font-size: .82rem; opacity: .85; margin-top: .2rem; }
    .byo-hero-tag {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .28rem .6rem; border-radius: 999px;
        background: rgba(255,255,255,.14);
        backdrop-filter: blur(8px);
        font-size: .7rem; font-weight: 600; letter-spacing: .02em;
        color: #fff;
        border: 1px solid rgba(255,255,255,.15);
    }
    .byo-hero-tag .byo-online-dot-lg { width: 8px; height: 8px; }
    .byo-hero-btn {
        display: inline-flex; align-items: center; gap: .4rem;
        background: #fff;
        color: var(--byo-indigo-700) !important;
        padding: .45rem .85rem;
        border-radius: 999px;
        font-size: .78rem; font-weight: 700; letter-spacing: .01em;
        border: 0;
        box-shadow: 0 4px 14px -4px rgba(15,23,42,.25);
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .byo-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(15,23,42,.35); text-decoration: none; }
    .byo-hero-btn--ghost {
        background: rgba(255,255,255,.14); color: #fff !important;
        border: 1px solid rgba(255,255,255,.22);
        backdrop-filter: blur(6px);
        box-shadow: none;
    }
    .byo-hero-btn--ghost:hover { background: rgba(255,255,255,.22); }

    /* ==========================================================
       Metric cards
       ========================================================== */
    .byo-mcard {
        position: relative;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--byo-slate-200);
        box-shadow: var(--byo-shadow-sm);
        padding: 1.15rem 1.2rem 1.2rem;
        height: 100%;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        overflow: hidden;
    }
    .byo-mcard::before {
        content: "";
        position: absolute; left: 0; top: 0; bottom: 0;
        width: 5px;
        background: var(--byo-gradient-indigo);
        border-radius: 18px 0 0 18px;
    }
    .byo-mcard:hover { transform: translateY(-3px); box-shadow: var(--byo-shadow-lg); border-color: var(--byo-slate-300); }
    .byo-mcard--indigo::before  { background: var(--byo-gradient-indigo); }
    .byo-mcard--emerald::before { background: var(--byo-gradient-emerald); }
    .byo-mcard--rose::before    { background: var(--byo-gradient-rose); }
    .byo-mcard--amber::before   { background: var(--byo-gradient-amber); }
    .byo-mcard--sky::before     { background: var(--byo-gradient-sky); }

    .byo-mcard-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: .85rem;
    }
    .byo-mcard-label {
        font-size: .675rem; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 700; color: var(--byo-slate-500);
    }
    .byo-mcard-icon {
        width: 38px; height: 38px; border-radius: 11px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--byo-indigo-50);
        color: var(--byo-indigo-600);
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.15);
    }
    .byo-mcard-icon svg { width: 18px; height: 18px; }
    .byo-mcard-icon--emerald { background: var(--byo-emerald-50); color: var(--byo-emerald-600); box-shadow: inset 0 0 0 1px rgba(16,185,129,.18); }
    .byo-mcard-icon--rose    { background: var(--byo-rose-50);    color: var(--byo-rose-600);    box-shadow: inset 0 0 0 1px rgba(244,63,94,.18); }
    .byo-mcard-icon--amber   { background: var(--byo-amber-50);   color: var(--byo-amber-600);   box-shadow: inset 0 0 0 1px rgba(245,158,11,.18); }
    .byo-mcard-icon--sky     { background: var(--byo-sky-50);     color: var(--byo-sky-600);     box-shadow: inset 0 0 0 1px rgba(14,165,233,.18); }

    .byo-mcard-value {
        font-size: 2rem; font-weight: 800; letter-spacing: -.025em;
        color: var(--byo-slate-900); line-height: 1.05;
        font-variant-numeric: tabular-nums;
    }
    .byo-mcard-value .byo-mcard-unit {
        font-size: 1rem; font-weight: 700; color: var(--byo-slate-400); margin-left: .15rem;
    }
    .byo-mcard-foot {
        font-size: .72rem; color: var(--byo-slate-500); margin-top: .25rem;
    }

    /* Pulsing online dot */
    .byo-online-dot,
    .byo-online-dot-lg {
        display: inline-block;
        width: 11px; height: 11px; border-radius: 50%;
        background: var(--byo-emerald-500);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .7);
        animation: byo-pulse 2s infinite;
        flex-shrink: 0;
    }
    .byo-online-dot { width: 9px; height: 9px; margin-right: 6px; vertical-align: middle; }
    .byo-online-dot-lg { margin-right: 8px; vertical-align: middle; }
    @keyframes byo-pulse {
        0%   { box-shadow: 0 0 0 0    rgba(16, 185, 129, .65); }
        70%  { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);   }
        100% { box-shadow: 0 0 0 0    rgba(16, 185, 129, 0);   }
    }

    /* ==========================================================
       Chart / Trend hero card
       ========================================================== */
    .byo-trend-card {
        border: 1px solid var(--byo-slate-200) !important;
        border-radius: 20px !important;
        background: #fff;
        box-shadow: var(--byo-shadow-md) !important;
        overflow: hidden;
    }
    .byo-trend-head {
        background: linear-gradient(180deg, #ffffff 0%, var(--byo-slate-50) 100%);
        border-bottom: 1px solid var(--byo-slate-200);
    }
    .byo-trend-pill {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .35rem .65rem;
        border-radius: 999px;
        background: var(--byo-slate-100);
        color: var(--byo-slate-600);
        font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    }
    .byo-trend-pill .byo-swatch {
        width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
    }
    .byo-trend-pill--visitors .byo-swatch  { background: var(--byo-indigo-500); }
    .byo-trend-pill--pageviews .byo-swatch { background: var(--byo-rose-500); }

    .byo-trend-big {
        font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em;
        color: var(--byo-slate-900); line-height: 1; font-variant-numeric: tabular-nums;
    }
    .byo-trend-cap {
        font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 700; color: var(--byo-slate-500); margin-bottom: .2rem;
    }

    /* Keep pre-existing legend swatches colored correctly for Chart.js */
    #visitors-legend  { background: var(--byo-indigo-500) !important; }
    #pageviews-legend { background: var(--byo-rose-500)   !important; }

    /* ==========================================================
       Section cards (Recent Activity, Top entry/exit, Pages, etc.)
       ========================================================== */
    .byo-section-card {
        border: 1px solid var(--byo-slate-200) !important;
        border-radius: 18px !important;
        background: #fff;
        box-shadow: var(--byo-shadow-sm) !important;
        overflow: hidden;
    }
    .byo-section-head {
        background: linear-gradient(180deg, #ffffff 0%, var(--byo-slate-50) 100%);
        border-bottom: 1px solid var(--byo-slate-200);
        padding: .85rem 1.1rem;
    }
    .byo-section-title {
        font-size: .95rem; font-weight: 700; color: var(--byo-slate-800);
        letter-spacing: -.01em; margin: 0;
        display: inline-flex; align-items: center; gap: .5rem;
    }
    .byo-section-title .byo-dot {
        width: 8px; height: 8px; border-radius: 999px; background: var(--byo-gradient-indigo);
    }
    .byo-section-title.byo-section-title--emerald .byo-dot { background: var(--byo-gradient-emerald); }
    .byo-section-title.byo-section-title--rose    .byo-dot { background: var(--byo-gradient-rose); }
    .byo-section-title.byo-section-title--amber   .byo-dot { background: var(--byo-gradient-amber); }
    .byo-section-title.byo-section-title--sky     .byo-dot { background: var(--byo-gradient-sky); }
    .byo-section-link {
        font-size: .72rem; font-weight: 600; color: var(--byo-indigo-600);
        display: inline-flex; align-items: center; gap: .25rem;
        padding: .3rem .6rem; border-radius: 999px;
        background: var(--byo-indigo-50);
        transition: background .15s;
    }
    .byo-section-link:hover { background: #e0e7ff; color: var(--byo-indigo-700); text-decoration: none; }

    /* ==========================================================
       Recent Visitor Activity row
       ========================================================== */
    .byo-act-row {
        position: relative;
        padding: .9rem 1.1rem .9rem 1.4rem;
        border-bottom: 1px solid var(--byo-slate-100);
        transition: background .15s ease;
    }
    .byo-act-row::before {
        content: "";
        position: absolute; left: 0; top: 10%; bottom: 10%;
        width: 3px; border-radius: 0 3px 3px 0;
        background: var(--byo-slate-300);
    }
    .byo-act-row.byo-is-unique::before { background: var(--byo-gradient-emerald); }
    .byo-act-row.byo-is-expandable { cursor: pointer; }
    .byo-act-row:hover { background: var(--byo-slate-50); }
    .byo-act-row:last-child { border-bottom: 0; }

    .byo-act-badge {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 42px; height: 22px; padding: 0 .45rem;
        border-radius: 999px;
        font-size: .64rem; font-weight: 700; letter-spacing: .06em;
    }
    .byo-act-badge--new {
        background: var(--byo-emerald-50); color: var(--byo-emerald-600);
        box-shadow: inset 0 0 0 1px rgba(16,185,129,.22);
    }
    .byo-act-badge--pv {
        background: var(--byo-slate-100); color: var(--byo-slate-600);
        box-shadow: inset 0 0 0 1px rgba(100,116,139,.18);
    }
    .byo-page-pill {
        display: inline-block;
        font-size: .62rem; font-weight: 700;
        padding: 2px 7px; border-radius: 999px;
        background: var(--byo-indigo-50); color: var(--byo-indigo-600);
        white-space: nowrap; margin-top: 4px;
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.18);
    }

    .byo-act-url {
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, Menlo, monospace;
        font-size: .78rem; font-weight: 600; color: var(--byo-slate-800);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .byo-act-title {
        font-size: .72rem; color: var(--byo-slate-500);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        margin-top: 1px;
    }
    .byo-act-meta {
        font-size: .7rem; color: var(--byo-slate-500);
    }
    .byo-act-meta strong { color: var(--byo-slate-800); font-weight: 600; }

    /* Chip palette */
    .byo-chip, .byo-chip-sm {
        display: inline-flex; align-items: center; gap: .25rem;
        font-size: .64rem; font-weight: 600; letter-spacing: .02em;
        padding: 2px 7px; border-radius: 999px;
        background: var(--byo-slate-100); color: var(--byo-slate-700);
        line-height: 1.3;
    }
    .byo-chip img, .byo-chip-sm img { width: 10px; height: 10px; flex-shrink: 0; }
    .byo-chip--browser { background: var(--byo-indigo-50); color: var(--byo-indigo-700); box-shadow: inset 0 0 0 1px rgba(99,102,241,.14); }
    .byo-chip--os      { background: var(--byo-sky-50);    color: var(--byo-sky-600);    box-shadow: inset 0 0 0 1px rgba(14,165,233,.14); }
    .byo-chip--device  { background: var(--byo-pink-50);   color: var(--byo-pink-500);   box-shadow: inset 0 0 0 1px rgba(236,72,153,.14); }
    .byo-chip--model   { background: var(--byo-amber-50);  color: var(--byo-amber-600);  box-shadow: inset 0 0 0 1px rgba(245,158,11,.14); }
    .byo-chip--screen  { background: var(--byo-slate-100); color: var(--byo-slate-600); font-variant-numeric: tabular-nums; }

    .byo-country-flag { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }
    .byo-act-ts-primary   { font-size: .825rem; font-weight: 700; color: var(--byo-slate-800); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
    .byo-act-ts-secondary { font-size: .7rem; color: var(--byo-slate-500); font-variant-numeric: tabular-nums; }
    .byo-act-ts-rel       { font-size: .66rem; color: var(--byo-slate-400); }

    /* Expandable session path */
    .byo-session-path {
        display: none;
        background: linear-gradient(180deg, var(--byo-indigo-50) 0%, #fff 100%);
        border-top: 1px solid var(--byo-indigo-50);
        border-bottom: 1px solid var(--byo-slate-100);
        padding: .85rem 1.5rem .85rem 4.75rem;
    }
    .byo-session-path.show { display: block; }
    .byo-session-path .byo-step {
        display: flex; align-items: center;
        padding: 3px 0; color: var(--byo-slate-700);
    }
    .byo-session-path .byo-step-idx {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 22px; border-radius: 7px;
        font-size: .7rem; font-weight: 700;
        background: #fff; color: var(--byo-indigo-600);
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.2);
        margin-right: .5rem;
    }
    .byo-session-path .byo-step-arrow { color: var(--byo-indigo-400); margin-right: .5rem; }
    .byo-session-path .byo-step-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: var(--byo-slate-700); }

    /* ==========================================================
       Top entry / exit + ranking list progress bars
       ========================================================== */
    .byo-top-list .list-group-item { border: 0; padding: .45rem 0; }
    .byo-top-url {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .775rem; color: var(--byo-slate-800); font-weight: 600;
    }
    .byo-top-num {
        font-size: .9rem; font-weight: 800; color: var(--byo-slate-900);
        font-variant-numeric: tabular-nums;
    }
    .byo-top-bar {
        height: 6px; border-radius: 999px;
        background: var(--byo-slate-100);
        overflow: hidden; margin-top: .4rem;
    }
    .byo-top-bar-fill {
        height: 100%; border-radius: 999px;
        background: var(--byo-gradient-indigo);
        transition: width .3s ease;
    }
    .byo-top-bar-fill.byo-entry { background: var(--byo-gradient-emerald); }
    .byo-top-bar-fill.byo-exit  { background: var(--byo-gradient-amber); }
    .byo-top-bar-fill.byo-sky   { background: var(--byo-gradient-sky); }
    .byo-top-bar-fill.byo-rose  { background: var(--byo-gradient-rose); }

    /* ==========================================================
       Ranking list row (Pages, Referrers, Countries, etc.)
       ========================================================== */
    .byo-rank-row {
        padding: .7rem 1.1rem;
        border-bottom: 1px solid var(--byo-slate-100);
        transition: background .15s ease;
    }
    .byo-rank-row:hover { background: var(--byo-slate-50); }
    .byo-rank-row:last-child { border-bottom: 0; }
    .byo-rank-row .byo-rank-label {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .78rem; font-weight: 600; color: var(--byo-slate-800);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .byo-rank-row .byo-rank-label--plain {
        font-family: inherit;
        font-size: .85rem; letter-spacing: -.005em;
    }
    .byo-rank-row .byo-rank-count {
        font-size: .9rem; font-weight: 800; color: var(--byo-slate-900);
        font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    }
    .byo-rank-row .byo-rank-pct {
        display: inline-block;
        min-width: 3.2rem; text-align: right;
        font-size: .7rem; font-weight: 700; color: var(--byo-slate-500);
        font-variant-numeric: tabular-nums;
    }
    .byo-rank-bar {
        height: 5px; border-radius: 999px;
        background: var(--byo-slate-100);
        overflow: hidden; margin-top: .45rem;
    }
    .byo-rank-bar-fill {
        height: 100%; border-radius: 999px;
        background: var(--byo-gradient-indigo);
        transition: width .4s ease;
    }
    .byo-rank-row--total { background: var(--byo-slate-50); font-weight: 700; }
    .byo-rank-row--total .byo-rank-label { color: var(--byo-slate-600); }
    .byo-rank-row--head  {
        background: var(--byo-slate-50);
        border-bottom: 1px solid var(--byo-slate-200);
        font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
        font-weight: 700; color: var(--byo-slate-500);
        padding: .55rem 1.1rem;
    }
    .byo-rank-row .byo-rank-open {
        color: var(--byo-slate-400);
        transition: color .15s;
    }
    .byo-rank-row .byo-rank-open:hover { color: var(--byo-indigo-600); }

    /* ==========================================================
       Stats nav tabs (shared/stats/partials/header.blade.php)
       ========================================================== */
    .byo-stats-nav {
        border: 1px solid var(--byo-slate-200) !important;
        border-radius: 16px !important;
        background: #fff;
        box-shadow: var(--byo-shadow-sm) !important;
        padding: 0;
    }
    .byo-stats-nav .nav-link {
        font-size: .83rem; font-weight: 600;
        color: var(--byo-slate-600) !important;
        letter-spacing: -.005em;
        border-radius: 10px;
        margin: .35rem .15rem;
        padding: .55rem .85rem !important;
        transition: background .15s ease, color .15s ease;
    }
    .byo-stats-nav .nav-link:hover {
        background: var(--byo-slate-50);
        color: var(--byo-slate-900) !important;
    }
    .byo-stats-nav .nav-item.active > .nav-link,
    .byo-stats-nav .nav-link.active {
        background: var(--byo-indigo-50);
        color: var(--byo-indigo-700) !important;
    }
    .byo-stats-nav .nav-link svg { flex-shrink: 0; }
    .byo-stats-nav .nav-item.active > .nav-link svg,
    .byo-stats-nav .nav-link.active svg { color: var(--byo-indigo-600); }
    .byo-stats-nav .dropdown-menu {
        border: 1px solid var(--byo-slate-200);
        border-radius: 14px;
        box-shadow: var(--byo-shadow-lg);
        padding: .4rem;
        margin-top: .25rem;
    }
    .byo-stats-nav .dropdown-item {
        border-radius: 9px;
        padding: .45rem .75rem;
        font-size: .82rem;
        font-weight: 500;
        color: var(--byo-slate-700);
    }
    .byo-stats-nav .dropdown-item:hover,
    .byo-stats-nav .dropdown-item:focus {
        background: var(--byo-slate-50);
        color: var(--byo-slate-900);
    }
    .byo-stats-nav .dropdown-item.active {
        background: var(--byo-indigo-50);
        color: var(--byo-indigo-700);
    }
    .byo-stats-nav .dropdown-divider {
        margin: .35rem .25rem;
        border-color: var(--byo-slate-100);
    }
    /* Dotted separator in nav */
    .byo-stats-nav .byo-nav-sep {
        border-left: 1px solid var(--byo-slate-200);
        margin: .85rem 0;
    }
    /* Mobile toggler */
    .byo-stats-nav .navbar-toggler {
        color: var(--byo-slate-700) !important;
    }

    /* ==========================================================
       Stats page header (h1 + date range button)
       ========================================================== */
    .byo-stats-title {
        font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em;
        color: var(--byo-slate-900); margin: 0;
    }
    .byo-stats-fav {
        color: var(--byo-slate-400); margin-left: .5rem;
        cursor: pointer; transition: color .15s;
    }
    .byo-stats-fav--on { color: var(--byo-amber-500); }
    .byo-btn-soft {
        display: inline-flex; align-items: center; gap: .4rem;
        background: #fff;
        border: 1px solid var(--byo-slate-200) !important;
        border-radius: 999px !important;
        padding: .45rem .9rem !important;
        color: var(--byo-slate-700) !important;
        font-size: .8rem; font-weight: 600;
        box-shadow: var(--byo-shadow-sm);
        transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
    }
    .byo-btn-soft:hover {
        border-color: var(--byo-indigo-400) !important;
        color: var(--byo-indigo-700) !important;
        box-shadow: 0 4px 10px -2px rgba(99,102,241,.2);
    }
    .byo-btn-soft svg { color: var(--byo-slate-500); }

    /* ==========================================================
       Dashboard table (websites list)
       ========================================================== */
    .byo-ws-table {
        margin-bottom: 0;
    }
    .byo-ws-table thead th {
        font-size: .65rem; text-transform: uppercase; letter-spacing: .11em;
        font-weight: 700; color: var(--byo-slate-500);
        background: var(--byo-slate-50);
        border-bottom: 1px solid var(--byo-slate-200) !important;
        padding: .7rem 1rem !important;
    }
    .byo-ws-table tbody td {
        padding: .95rem 1rem !important;
        border-top: 1px solid var(--byo-slate-100) !important;
        vertical-align: middle;
    }
    .byo-ws-table tbody tr { transition: background .15s ease; }
    .byo-ws-table tbody tr:hover { background: var(--byo-slate-50); }
    .byo-ws-table .byo-ws-favicon {
        width: 22px; height: 22px; border-radius: 6px;
        background: var(--byo-slate-100);
        padding: 3px; box-shadow: 0 0 0 1px var(--byo-slate-200);
    }
    .byo-ws-table .byo-ws-domain {
        font-size: .88rem; font-weight: 700; color: var(--byo-slate-900);
        letter-spacing: -.005em;
    }
    .byo-ws-table .byo-ws-domain:hover { color: var(--byo-indigo-700); text-decoration: none; }
    .byo-ws-table .byo-ws-num {
        font-variant-numeric: tabular-nums;
        font-size: .9rem; font-weight: 700;
        color: var(--byo-slate-900);
    }
    .byo-ws-table .byo-ws-num--muted { color: var(--byo-slate-500); font-weight: 600; }
    .byo-ws-table tr.byo-ws-total {
        background: linear-gradient(180deg, var(--byo-slate-50) 0%, var(--byo-indigo-50) 100%);
    }
    .byo-ws-table tr.byo-ws-total td {
        border-top: 1px solid var(--byo-slate-200) !important;
        font-weight: 800 !important;
    }
    .byo-ws-favstar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; border-radius: 6px;
        background: #fffbeb; color: var(--byo-amber-500);
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.2);
        margin-left: .45rem;
    }

    /* ==========================================================
       Dashboard hero profile
       ========================================================== */
    .byo-profile-card {
        position: relative;
        background: var(--byo-gradient-hero);
        color: #fff;
        border-radius: 22px;
        padding: 1.6rem 1.8rem;
        overflow: hidden;
        box-shadow: var(--byo-shadow-glow-indigo);
    }
    .byo-profile-card::before {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,.2), transparent 45%),
                          radial-gradient(circle at 85% 110%, rgba(236,72,153,.3), transparent 50%);
        pointer-events: none;
    }
    .byo-profile-card > * { position: relative; z-index: 1; }
    .byo-profile-avatar {
        width: 64px; height: 64px; border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 8px 20px -6px rgba(15,23,42,.4);
    }
    .byo-profile-name {
        font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
        margin: 0; color: #fff;
    }
    .byo-profile-meta {
        font-size: .78rem; font-weight: 500; opacity: .85;
        margin-top: .2rem;
    }

    /* ==========================================================
       Realtime live hero + activity card
       ========================================================== */
    .byo-rt-live {
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .32rem .7rem;
        border-radius: 999px;
        background: rgba(16,185,129,.1);
        color: var(--byo-emerald-600);
        font-size: .7rem; font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        box-shadow: inset 0 0 0 1px rgba(16,185,129,.25);
    }
    .byo-rt-stat {
        display: flex; flex-direction: column;
        padding: 1rem 1.25rem;
    }
    .byo-rt-stat + .byo-rt-stat {
        border-left: 1px solid var(--byo-slate-100);
    }
    @media (max-width: 767.98px) {
        .byo-rt-stat + .byo-rt-stat {
            border-left: 0;
            border-top: 1px solid var(--byo-slate-100);
        }
    }
    .byo-rt-stat-label {
        font-size: .68rem; font-weight: 700; letter-spacing: .14em;
        color: var(--byo-slate-500); text-transform: uppercase;
        display: flex; align-items: center; gap: .4rem;
    }
    .byo-rt-stat-label .byo-swatch {
        width: 10px; height: 10px; border-radius: 3px;
    }
    .byo-rt-stat-value {
        font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em;
        color: var(--byo-slate-900); line-height: 1;
        font-variant-numeric: tabular-nums;
        margin-top: .4rem;
    }
    .byo-rt-stat-growth {
        font-size: .72rem; font-weight: 600; color: var(--byo-slate-500);
        margin-top: .35rem;
    }
    .byo-rt-pause {
        border: 1px solid var(--byo-slate-200) !important;
        background: #fff !important;
        color: var(--byo-slate-700) !important;
        font-size: .78rem; font-weight: 600;
        border-radius: 999px !important;
        padding: .35rem .9rem !important;
        transition: border-color .15s, color .15s, background .15s;
    }
    .byo-rt-pause:hover {
        border-color: var(--byo-indigo-400) !important;
        color: var(--byo-indigo-700) !important;
    }
    .byo-rt-pause.active {
        background: var(--byo-amber-50) !important;
        border-color: var(--byo-amber-500) !important;
        color: var(--byo-amber-600) !important;
    }

    /* ==========================================================
       Small visual helpers
       ========================================================== */
    .byo-badge-soft-success {
        display: inline-flex; align-items: center;
        background: var(--byo-emerald-50); color: var(--byo-emerald-600);
        font-size: .68rem; font-weight: 700; letter-spacing: .02em;
        padding: .15rem .5rem; border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(16,185,129,.18);
    }
    .byo-badge-soft-danger {
        display: inline-flex; align-items: center;
        background: var(--byo-rose-50); color: var(--byo-rose-600);
        font-size: .68rem; font-weight: 700; letter-spacing: .02em;
        padding: .15rem .5rem; border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(244,63,94,.18);
    }

    /* Responsive */
    @media (max-width: 767.98px) {
        .byo-mcard-value { font-size: 1.6rem; }
        .byo-trend-big { font-size: 2rem; }
        .byo-hero-title { font-size: 1.1rem; }
        .byo-profile-name { font-size: 1.2rem; }
        .byo-stats-title { font-size: 1.25rem; }
        .byo-act-row { padding-left: 1.1rem; }
        .byo-rt-stat-value { font-size: 1.8rem; }
    }

    /* ==========================================================
       DARK MODE OVERRIDES
       Applied when <html class="... dark"> is present. Handles
       both the premium byo-* components above AND the baseline
       Bootstrap 4 / app.css surfaces used on marketing pages
       (homepage feature sections, pricing cards, etc.) that were
       hardcoded to light backgrounds.
       ========================================================== */
    html.dark {
        --byo-gradient-bg: linear-gradient(180deg, #0b1120 0%, #0f172a 40%, #0b1120 100%);
        color-scheme: dark;
    }

    /* Page shell */
    html.dark .bg-base-0 { background-color: #0b1120 !important; }
    html.dark .bg-base-1 { background: var(--byo-gradient-bg) !important; }
    html.dark body { color: #e2e8f0; }

    /* Headings default to light on dark backgrounds. Marketing homepage
       feature sections rely on the cascade, so we fix those explicitly. */
    html.dark h1, html.dark h2, html.dark h3, html.dark h4,
    html.dark h5, html.dark h6,
    html.dark .h1, html.dark .h2, html.dark .h3,
    html.dark .h4, html.dark .h5, html.dark .h6,
    html.dark .font-weight-bold,
    html.dark .font-weight-black { color: #f1f5f9; }

    /* Body / muted text — flip light-mode greys to their dark twins */
    html.dark .text-muted { color: #94a3b8 !important; }
    html.dark p, html.dark li, html.dark dt, html.dark dd,
    html.dark small, html.dark .small { color: #cbd5e1; }
    html.dark .lead { color: #e2e8f0; }
    html.dark hr { border-top-color: #1e293b; }

    /* Generic Bootstrap cards / panels on marketing pages */
    html.dark .card,
    html.dark .card-body,
    html.dark .card-header,
    html.dark .card-footer,
    html.dark .list-group,
    html.dark .list-group-item,
    html.dark .modal-content,
    html.dark .dropdown-menu,
    html.dark .popover,
    html.dark .tooltip-inner {
        background-color: #0f172a;
        color: #e2e8f0;
        border-color: #1e293b;
    }
    html.dark .card-header,
    html.dark .card-footer { background-color: #111a2e; }
    html.dark .list-group-item { color: #cbd5e1; }
    html.dark .list-group-item.active {
        background-color: #312e81;
        border-color: #4338ca;
        color: #fff;
    }
    html.dark .list-group-item-action:hover,
    html.dark .list-group-item-action:focus {
        background-color: #1e293b;
        color: #f1f5f9;
    }

    /* Generic tables */
    html.dark table,
    html.dark .table { color: #cbd5e1; }
    html.dark .table thead th,
    html.dark .table tbody td,
    html.dark .table tbody th { border-color: #1e293b; }
    html.dark .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(30, 41, 59, .35);
    }
    html.dark .table-hover tbody tr:hover {
        background-color: #1e293b;
        color: #f1f5f9;
    }

    /* Form controls */
    html.dark .form-control,
    html.dark .custom-select,
    html.dark textarea.form-control,
    html.dark .input-group-text {
        background-color: #0f172a;
        color: #e2e8f0;
        border-color: #1e293b;
    }
    html.dark .form-control::placeholder { color: #64748b; }
    html.dark .form-control:focus,
    html.dark .custom-select:focus {
        background-color: #111a2e;
        color: #f1f5f9;
        border-color: #4f46e5;
        box-shadow: 0 0 0 .2rem rgba(99,102,241,.25);
    }
    html.dark .form-control:disabled,
    html.dark .form-control[readonly] {
        background-color: #111a2e;
        color: #94a3b8;
    }
    html.dark label,
    html.dark .form-group label,
    html.dark .col-form-label { color: #e2e8f0; }
    html.dark .form-text { color: #94a3b8; }

    /* Buttons — light/outline variants need dark-friendly defaults */
    html.dark .btn-light {
        background-color: #1e293b;
        border-color: #334155;
        color: #f1f5f9;
    }
    html.dark .btn-light:hover {
        background-color: #334155;
        border-color: #475569;
        color: #fff;
    }
    html.dark .btn-outline-primary {
        color: #a5b4fc;
        border-color: #4338ca;
    }
    html.dark .btn-outline-primary:hover {
        background-color: #4338ca;
        color: #fff;
    }
    html.dark .btn-outline-secondary {
        color: #cbd5e1;
        border-color: #334155;
    }
    html.dark .btn-outline-secondary:hover {
        background-color: #334155;
        color: #fff;
    }

    /* Navigation / navbar */
    html.dark .navbar,
    html.dark .navbar-light {
        background-color: #0f172a !important;
        border-bottom-color: #1e293b;
    }
    html.dark .navbar-light .navbar-brand,
    html.dark .navbar-light .navbar-nav .nav-link { color: #e2e8f0; }
    html.dark .navbar-light .navbar-nav .nav-link:hover,
    html.dark .navbar-light .navbar-nav .nav-link:focus { color: #a5b4fc; }
    html.dark .navbar-light .navbar-nav .active > .nav-link,
    html.dark .navbar-light .navbar-nav .nav-link.active { color: #818cf8; }
    html.dark .dropdown-item { color: #cbd5e1; }
    html.dark .dropdown-item:hover,
    html.dark .dropdown-item:focus {
        background-color: #1e293b;
        color: #f1f5f9;
    }
    html.dark .dropdown-divider { border-top-color: #1e293b; }

    /* Alerts */
    html.dark .alert { border-color: #1e293b; }
    html.dark .alert-warning {
        background-color: rgba(245, 158, 11, .12);
        color: #fcd34d;
        border-color: rgba(245, 158, 11, .3);
    }
    html.dark .alert-info {
        background-color: rgba(14, 165, 233, .12);
        color: #7dd3fc;
        border-color: rgba(14, 165, 233, .3);
    }
    html.dark .alert-success {
        background-color: rgba(16, 185, 129, .12);
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, .3);
    }
    html.dark .alert-danger {
        background-color: rgba(244, 63, 94, .12);
        color: #fca5a5;
        border-color: rgba(244, 63, 94, .3);
    }

    /* Borders and pagination */
    html.dark .border,
    html.dark .border-top,
    html.dark .border-right,
    html.dark .border-bottom,
    html.dark .border-left { border-color: #1e293b !important; }
    html.dark .page-link {
        background-color: #0f172a;
        border-color: #1e293b;
        color: #cbd5e1;
    }
    html.dark .page-link:hover {
        background-color: #1e293b;
        color: #a5b4fc;
    }
    html.dark .page-item.active .page-link {
        background-color: #4f46e5;
        border-color: #4f46e5;
        color: #fff;
    }
    html.dark .page-item.disabled .page-link {
        background-color: #0b1120;
        color: #64748b;
        border-color: #1e293b;
    }

    /* ==========================================================
       BYO design-system component dark overrides
       ========================================================== */
    html.dark .byo-mcard {
        background: #0f172a;
        border-color: #1e293b;
        box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
    }
    html.dark .byo-mcard:hover {
        border-color: #334155;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.35);
    }
    html.dark .byo-mcard-label { color: #94a3b8; }
    html.dark .byo-mcard-value { color: #f1f5f9; }
    html.dark .byo-mcard-value .byo-mcard-unit { color: #64748b; }
    html.dark .byo-mcard-foot { color: #94a3b8; }
    html.dark .byo-mcard-icon {
        background: rgba(99,102,241,.15);
        color: #a5b4fc;
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
    }
    html.dark .byo-mcard-icon--emerald {
        background: rgba(16,185,129,.15); color: #6ee7b7;
        box-shadow: inset 0 0 0 1px rgba(16,185,129,.3);
    }
    html.dark .byo-mcard-icon--rose {
        background: rgba(244,63,94,.15); color: #fca5a5;
        box-shadow: inset 0 0 0 1px rgba(244,63,94,.3);
    }
    html.dark .byo-mcard-icon--amber {
        background: rgba(245,158,11,.15); color: #fcd34d;
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.3);
    }
    html.dark .byo-mcard-icon--sky {
        background: rgba(14,165,233,.15); color: #7dd3fc;
        box-shadow: inset 0 0 0 1px rgba(14,165,233,.3);
    }

    html.dark .byo-trend-card {
        background: #0f172a;
        border-color: #1e293b !important;
    }
    html.dark .byo-trend-head {
        background: linear-gradient(180deg, #111a2e 0%, #0b1120 100%);
        border-bottom-color: #1e293b;
    }
    html.dark .byo-trend-big { color: #f1f5f9; }
    html.dark .byo-trend-cap { color: #94a3b8; }
    html.dark .byo-trend-pill {
        background: #1e293b;
        color: #cbd5e1;
    }

    html.dark .byo-section-card {
        background: #0f172a;
        border-color: #1e293b !important;
    }
    html.dark .byo-section-head {
        background: linear-gradient(180deg, #111a2e 0%, #0b1120 100%);
        border-bottom-color: #1e293b;
    }
    html.dark .byo-section-title { color: #f1f5f9; }
    html.dark .byo-section-link {
        background: rgba(99,102,241,.15);
        color: #a5b4fc;
    }
    html.dark .byo-section-link:hover {
        background: rgba(99,102,241,.25);
        color: #c7d2fe;
    }

    /* Activity rows */
    html.dark .byo-act-row { border-bottom-color: #1e293b; }
    html.dark .byo-act-row:hover { background: #111a2e; }
    html.dark .byo-act-url { color: #e2e8f0; }
    html.dark .byo-act-title { color: #94a3b8; }
    html.dark .byo-act-meta { color: #94a3b8; }
    html.dark .byo-act-meta strong { color: #f1f5f9; }
    html.dark .byo-act-row::before { background: #334155; }
    html.dark .byo-act-badge--pv {
        background: #1e293b; color: #cbd5e1;
        box-shadow: inset 0 0 0 1px rgba(148,163,184,.25);
    }
    html.dark .byo-act-badge--new {
        background: rgba(16,185,129,.15); color: #6ee7b7;
        box-shadow: inset 0 0 0 1px rgba(16,185,129,.3);
    }
    html.dark .byo-page-pill {
        background: rgba(99,102,241,.15); color: #a5b4fc;
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
    }

    /* Chips — soft tints in dark mode */
    html.dark .byo-chip,
    html.dark .byo-chip-sm {
        background: #1e293b; color: #cbd5e1;
    }
    html.dark .byo-chip--browser {
        background: rgba(99,102,241,.15); color: #a5b4fc;
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.3);
    }
    html.dark .byo-chip--os {
        background: rgba(14,165,233,.15); color: #7dd3fc;
        box-shadow: inset 0 0 0 1px rgba(14,165,233,.3);
    }
    html.dark .byo-chip--device {
        background: rgba(236,72,153,.15); color: #f9a8d4;
        box-shadow: inset 0 0 0 1px rgba(236,72,153,.3);
    }
    html.dark .byo-chip--model {
        background: rgba(245,158,11,.15); color: #fcd34d;
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.3);
    }
    html.dark .byo-chip--screen {
        background: #1e293b; color: #cbd5e1;
    }

    html.dark .byo-act-ts-primary   { color: #f1f5f9; }
    html.dark .byo-act-ts-secondary { color: #94a3b8; }
    html.dark .byo-act-ts-rel       { color: #64748b; }

    /* Session expand block */
    html.dark .byo-session-path {
        background: linear-gradient(180deg, rgba(99,102,241,.08) 0%, #0f172a 100%);
        border-top-color: rgba(99,102,241,.25);
        border-bottom-color: #1e293b;
    }
    html.dark .byo-session-path .byo-step     { color: #cbd5e1; }
    html.dark .byo-session-path .byo-step-url { color: #cbd5e1; }
    html.dark .byo-session-path .byo-step-idx {
        background: #0b1120; color: #a5b4fc;
        box-shadow: inset 0 0 0 1px rgba(99,102,241,.35);
    }

    /* Top list rows */
    html.dark .byo-top-list .list-group-item { background: transparent; color: #cbd5e1; border: 0; }
    html.dark .byo-top-url { color: #e2e8f0; }
    html.dark .byo-top-num { color: #f1f5f9; }
    html.dark .byo-top-bar { background: #1e293b; }

    /* Ranking rows */
    html.dark .byo-rank-row { border-bottom-color: #1e293b; }
    html.dark .byo-rank-row:hover { background: #111a2e; }
    html.dark .byo-rank-row .byo-rank-label { color: #e2e8f0; }
    html.dark .byo-rank-row .byo-rank-count { color: #f1f5f9; }
    html.dark .byo-rank-row .byo-rank-pct   { color: #94a3b8; }
    html.dark .byo-rank-bar { background: #1e293b; }
    html.dark .byo-rank-row--total {
        background: linear-gradient(180deg, #111a2e 0%, rgba(99,102,241,.1) 100%);
    }
    html.dark .byo-rank-row--total .byo-rank-label { color: #cbd5e1; }
    html.dark .byo-rank-row--head {
        background: #111a2e;
        border-bottom-color: #1e293b;
        color: #94a3b8;
    }
    html.dark .byo-rank-row .byo-rank-open { color: #64748b; }
    html.dark .byo-rank-row .byo-rank-open:hover { color: #a5b4fc; }

    /* Stats navigation */
    html.dark .byo-stats-nav {
        background: #0f172a;
        border-color: #1e293b !important;
    }
    html.dark .byo-stats-nav .nav-link { color: #cbd5e1 !important; }
    html.dark .byo-stats-nav .nav-link:hover {
        background: #1e293b;
        color: #f1f5f9 !important;
    }
    html.dark .byo-stats-nav .nav-item.active > .nav-link,
    html.dark .byo-stats-nav .nav-link.active {
        background: rgba(99,102,241,.18);
        color: #c7d2fe !important;
    }
    html.dark .byo-stats-nav .nav-item.active > .nav-link svg,
    html.dark .byo-stats-nav .nav-link.active svg { color: #a5b4fc; }
    html.dark .byo-stats-nav .dropdown-menu {
        background: #0f172a;
        border-color: #1e293b;
    }
    html.dark .byo-stats-nav .dropdown-item { color: #cbd5e1; }
    html.dark .byo-stats-nav .dropdown-item:hover,
    html.dark .byo-stats-nav .dropdown-item:focus {
        background: #1e293b;
        color: #f1f5f9;
    }
    html.dark .byo-stats-nav .dropdown-item.active {
        background: rgba(99,102,241,.18);
        color: #c7d2fe;
    }
    html.dark .byo-stats-nav .dropdown-divider { border-top-color: #1e293b; }
    html.dark .byo-stats-nav .byo-nav-sep     { border-left-color: #1e293b; }
    html.dark .byo-stats-nav .navbar-toggler  { color: #cbd5e1 !important; }

    /* Stats header */
    html.dark .byo-stats-title { color: #f1f5f9; }
    html.dark .byo-stats-fav   { color: #64748b; }
    html.dark .byo-stats-fav--on { color: #fcd34d; }

    /* Soft action button */
    html.dark .byo-btn-soft {
        background: #0f172a;
        border-color: #1e293b !important;
        color: #cbd5e1 !important;
    }
    html.dark .byo-btn-soft:hover {
        border-color: #4f46e5 !important;
        color: #c7d2fe !important;
    }
    html.dark .byo-btn-soft svg { color: #94a3b8; }

    /* Websites table */
    html.dark .byo-ws-table thead th {
        background: #111a2e;
        color: #94a3b8;
        border-bottom-color: #1e293b !important;
    }
    html.dark .byo-ws-table tbody td {
        border-top-color: #1e293b !important;
        color: #e2e8f0;
    }
    html.dark .byo-ws-table tbody tr:hover { background: #111a2e; }
    html.dark .byo-ws-table .byo-ws-favicon {
        background: #1e293b;
        box-shadow: 0 0 0 1px #334155;
    }
    html.dark .byo-ws-table .byo-ws-domain       { color: #f1f5f9; }
    html.dark .byo-ws-table .byo-ws-domain:hover { color: #a5b4fc; }
    html.dark .byo-ws-table .byo-ws-num          { color: #f1f5f9; }
    html.dark .byo-ws-table .byo-ws-num--muted   { color: #94a3b8; }
    html.dark .byo-ws-table tr.byo-ws-total {
        background: linear-gradient(180deg, #111a2e 0%, rgba(99,102,241,.12) 100%);
    }
    html.dark .byo-ws-table tr.byo-ws-total td {
        border-top-color: #1e293b !important;
    }
    html.dark .byo-ws-favstar {
        background: rgba(245,158,11,.12);
        color: #fcd34d;
        box-shadow: inset 0 0 0 1px rgba(245,158,11,.3);
    }

    /* Realtime tile borders */
    html.dark .byo-rt-stat + .byo-rt-stat { border-left-color: #1e293b; }
    @media (max-width: 767.98px) {
        html.dark .byo-rt-stat + .byo-rt-stat {
            border-left: 0;
            border-top-color: #1e293b;
        }
    }
    html.dark .byo-rt-stat-label  { color: #94a3b8; }
    html.dark .byo-rt-stat-value  { color: #f1f5f9; }
    html.dark .byo-rt-stat-growth { color: #94a3b8; }
    html.dark .byo-rt-pause {
        background: #0f172a !important;
        border-color: #1e293b !important;
        color: #cbd5e1 !important;
    }
    html.dark .byo-rt-pause:hover {
        border-color: #4f46e5 !important;
        color: #c7d2fe !important;
    }
    html.dark .byo-rt-pause.active {
        background: rgba(245,158,11,.15) !important;
        border-color: rgba(245,158,11,.5) !important;
        color: #fcd34d !important;
    }

    /* Country flags subtle outline */
    html.dark .byo-country-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

    /* Marketing / homepage — feature sections and pricing */
    html.dark .bg-white,
    html.dark .bg-light {
        background-color: #0f172a !important;
        color: #e2e8f0;
    }
    html.dark .text-dark,
    html.dark .text-body { color: #e2e8f0 !important; }
    html.dark .text-black,
    html.dark .text-black-50 { color: #f1f5f9 !important; }
    html.dark .display-1,
    html.dark .display-2,
    html.dark .display-3,
    html.dark .display-4 { color: #f1f5f9; }

    /* Utility text colors — brighten for dark mode visibility */
    html.dark .text-primary   { color: #818cf8 !important; }
    html.dark .text-success   { color: #34d399 !important; }
    html.dark .text-danger    { color: #fb7185 !important; }
    html.dark .text-warning   { color: #fbbf24 !important; }
    html.dark .text-info      { color: #38bdf8 !important; }
    html.dark .text-secondary { color: #94a3b8 !important; }

    /* Code & pre */
    html.dark code, html.dark kbd, html.dark samp {
        color: #fca5a5;
        background: #1e293b;
    }
    html.dark pre, html.dark pre code {
        background: #0b1120;
        color: #e2e8f0;
        border: 1px solid #1e293b;
    }

    /* Progress bars */
    html.dark .progress { background-color: #1e293b; }

    /* Close buttons */
    html.dark .close { color: #e2e8f0; text-shadow: none; }
    html.dark .close:hover { color: #fff; }

    /* Custom radio / checkbox labels */
    html.dark .custom-control-label { color: #cbd5e1; }
    html.dark .custom-control-label::before {
        background-color: #0f172a;
        border-color: #334155;
    }

    /* Badges (generic Bootstrap) */
    html.dark .badge-light {
        background-color: #1e293b;
        color: #e2e8f0;
    }
    html.dark .badge-secondary {
        background-color: #334155;
        color: #f1f5f9;
    }

    /* Breadcrumbs */
    html.dark .breadcrumb { background-color: #111a2e; }
    html.dark .breadcrumb-item + .breadcrumb-item::before { color: #64748b; }
    html.dark .breadcrumb-item.active { color: #94a3b8; }

    /* Footer panel */
    html.dark footer, html.dark .footer {
        background-color: #0b1120;
        color: #cbd5e1;
        border-top: 1px solid #1e293b;
    }
    html.dark footer a, html.dark .footer a { color: #cbd5e1; }
    html.dark footer a:hover, html.dark .footer a:hover { color: #a5b4fc; }