/* SIGNAL HUB COMPATIBILITY SKIN ---------------------------------- */

:root {
    --background-color: #000000;
    --surface-color: rgba(20, 20, 20, 0.94);
    --elevated-color: rgba(38, 38, 38, 0.96);
    --text-color: #f1f5f9;
    --text-muted-color: #94a3b8;
    --primary-color: #f3d36b;
    --primary-hover: #ffe58a;
    --accent-color: #38bdf8;
    --accent-hover: #7dd3fc;
    --element-color-primary: rgba(68, 68, 68, 0.92);
    --element-color-secondary: rgba(18, 18, 18, 0.94);
    --button-bg: rgba(45, 56, 73, 0.95);
    --button-hover: rgba(84, 101, 124, 0.95);
    --button-text: #ffffff;
    --signalhub-layout-background: linear-gradient( 90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.06) ), url('/Images/TechStyle/TechBackground2k.webp');
    --signal-detail-frame-image: url('/Images/TechStyle/SignalDetailFrame_Main.webp');
}

html.light-mode {
    --background-color: #f7f3eb;
    --surface-color: rgba(255, 252, 246, 0.94);
    --elevated-color: rgba(235, 224, 207, 0.96);
    --text-color: #302a25;
    --text-muted-color: #786d62;
    --primary-color: #9a6b28;
    --primary-hover: #bc8735;
    --accent-color: #9b6630;
    --accent-hover: #bd8241;
    --element-color-primary: rgba(235, 226, 214, 0.96);
    --element-color-secondary: rgba(255, 252, 247, 0.96);
    --button-bg: rgba(205, 194, 177, 0.96);
    --button-hover: rgba(185, 168, 145, 0.96);
    --button-text: #2f2924;
    --signalhub-layout-background: linear-gradient( 90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02) ), url('/Images/TechStyle/TechBackgroundLight.webp');
    --signal-detail-frame-image: url('/Images/TechStyle/SignalDetailFrame_Light.webp');
}

body {
    background: #000;
    color: var(--text-color);
}

/* Cards / panels */
.card,
.card-wrapper,
.dashboard-widget,
.learning-section,
.learning-player-panel,
.learning-admin-panel {
    background: linear-gradient(180deg, rgba(34,34,34,0.94), rgba(10,10,10,0.94)) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 0 18px rgba(0,0,0,0.35);
}

.card-header,
.card-footer {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background: linear-gradient(180deg, rgba(84,101,124,0.95), rgba(45,56,73,0.95)) !important;
    color: #eaf6ff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
}

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline-primary:hover,
    .btn-outline-secondary:hover {
        filter: brightness(1.15);
        color: #fff !important;
    }

/* Buttons - light mode */
html.light-mode .btn-primary,
html.light-mode .btn-secondary,
html.light-mode .btn-outline-primary,
html.light-mode .btn-outline-secondary {
    background: linear-gradient( 180deg, rgba(225, 216, 201, 0.98), rgba(196, 181, 159, 0.98) ) !important;
    color: #302a25 !important;
    border-color: rgba(111, 80, 47, 0.24) !important;
}

    html.light-mode .btn-primary:hover,
    html.light-mode .btn-secondary:hover,
    html.light-mode .btn-outline-primary:hover,
    html.light-mode .btn-outline-secondary:hover {
        background: linear-gradient( 180deg, rgba(236, 226, 210, 1), rgba(209, 190, 163, 1) ) !important;
        color: #211c18 !important;
        border-color: rgba(111, 80, 47, 0.38) !important;
    }


.btn-danger {
    background: linear-gradient(180deg, rgba(120,40,40,0.95), rgba(70,20,20,0.95)) !important;
    color: #ffe5e5 !important;
    border: 1px solid rgba(255,120,120,0.45) !important;
}

/* Forms */
input.form-control,
select.form-control,
select.form-select,
textarea.form-control,
.search-box {
    background: rgba(10,10,10,0.82) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

    input.form-control:focus,
    select.form-control:focus,
    select.form-select:focus,
    textarea.form-control:focus,
    .search-box:focus {
        background: rgba(18,18,18,0.96) !important;
        color: var(--text-color) !important;
        border-color: rgba(243,211,107,0.55) !important;
        box-shadow: 0 0 0 0.12rem rgba(243,211,107,0.22) !important;
    }

/* Tables */
table.table {
    background: rgba(10,10,10,0.88) !important;
    color: var(--text-color) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

    table.table thead {
        background: rgba(255,255,255,0.10) !important;
        color: var(--text-color) !important;
    }

    table.table th,
    table.table td {
        border-color: rgba(255,255,255,0.12) !important;
    }

        table.table td:not(.text-success):not(.text-danger):not(.text-warning) {
            color: var(--text-color);
        }

table.table-striped tbody tr:nth-of-type(odd),
table.table-striped tbody tr:nth-of-type(even) {
    background: rgba(255,255,255,0.04) !important;
}

/* Lists */
.list-group-item {
    background: rgba(20,20,20,0.92) !important;
    color: var(--text-color) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

    .list-group-item:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }

/* Modals */
.modal-content:not(.signal-simple-popup):not(.signal-detail-modal-content) {
    background: linear-gradient(180deg, rgba(34,34,34,0.97), rgba(10,10,10,0.98)) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(243,211,107,0.35) !important;
}

.modal-header,
.modal-footer {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.modal-title {
    color: var(--primary-color) !important;
}

/* Dropdowns */
.dropdown-menu {
    background: rgba(18,18,18,0.98) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

.dropdown-item {
    color: var(--text-color) !important;
}

    .dropdown-item:hover {
        background: rgba(255,255,255,0.08) !important;
        color: var(--primary-color) !important;
    }

/* Tabs */
.nav-tabs .nav-link {
    color: var(--text-muted-color) !important;
}

    .nav-tabs .nav-link:hover,
    .nav-tabs .nav-link.active {
        color: var(--primary-color) !important;
    }




/* TEMP ACE DESKTOP DOWNLOAD PAGE ------------------------------- */

.desktop-download-shell {
    max-width: 1450px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.desktop-download-panel {
    padding: 2rem;
    border-radius: 18px;
    background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 32%), linear-gradient(180deg, rgba(18,18,18,0.84), rgba(3,3,3,0.88));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
}

.desktop-download-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
    gap: 2.5rem;
    align-items: start;
}

.desktop-download-main h1 {
    color: var(--text-color);
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: 0.8rem;
}

.desktop-download-main p {
    color: var(--text-muted-color);
    max-width: 760px;
    line-height: 1.55;
}

.desktop-download-main img,
.desktop-download-main .carousel,
.desktop-download-main .carousel-inner {
    max-width: 100%;
    border-radius: 10px;
}

.desktop-download-main img {
    box-shadow: 0 0 24px rgba(0,0,0,0.5);
}

.desktop-download-side {
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.12);
}

    .desktop-download-side h3,
    .desktop-download-side h4 {
        color: #fff;
    }

    .desktop-download-side ul {
        padding-left: 0;
        list-style: none;
        color: rgba(241,245,249,0.75);
    }

    .desktop-download-side li {
        margin-bottom: 0.35rem;
    }

        .desktop-download-side li::before {
            content: "✓";
            color: #f3d36b;
            margin-right: 0.45rem;
        }

    .desktop-download-side .btn,
    .desktop-download-side button,
    .desktop-download-side a.btn {
        margin-top: 1rem;
        width: 100%;
    }

@media (max-width: 900px) {
    .desktop-download-panel {
        padding: 1.25rem;
    }

    .desktop-download-grid {
        grid-template-columns: 1fr;
    }
}

/* ACE Desktop download page - light mode */
html.light-mode .desktop-download-panel {
    background: radial-gradient( circle at 20% 0%, rgba(255,255,255,0.72), transparent 34% ), linear-gradient( 180deg, rgba(255,253,248,0.94), rgba(235,223,205,0.92) );
    border-color: rgba(111,80,47,0.18);
    box-shadow: 0 10px 30px rgba(77,54,29,0.16), inset 0 1px 0 rgba(255,255,255,0.65);
}

html.light-mode .desktop-download-main h1 {
    color: var(--text-color);
}

html.light-mode .desktop-download-main p {
    color: var(--text-muted-color) !important;
}

html.light-mode .desktop-download-side {
    background: rgba(255,252,246,0.72);
    border-color: rgba(111,80,47,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

    html.light-mode .desktop-download-side h3,
    html.light-mode .desktop-download-side h4,
    html.light-mode .desktop-download-side h5,
    html.light-mode .desktop-download-side h6 {
        color: var(--text-color);
    }

    html.light-mode .desktop-download-side ul,
    html.light-mode .desktop-download-side p,
    html.light-mode .desktop-download-side .text-muted {
        color: var(--text-muted-color) !important;
    }

    html.light-mode .desktop-download-side li::before {
        color: #b47a1e;
    }


/* LIGHT MODE OVERRIDES -----------------------------------------------------------------------------------------------------------------------  */
html.light-mode body {
    background: var(--background-color);
    color: var(--text-color);
}

/* Cards / panels */
html.light-mode .card,
html.light-mode .card-wrapper,
html.light-mode .dashboard-widget,
html.light-mode .learning-section,
html.light-mode .learning-player-panel,
html.light-mode .learning-admin-panel {
    background: linear-gradient( 180deg, rgba(255, 253, 248, 0.96), rgba(237, 226, 211, 0.94) ) !important;
    color: var(--text-color) !important;
    border-color: rgba(120, 91, 58, 0.22) !important;
    box-shadow: 0 8px 24px rgba(94, 72, 45, 0.12);
}

html.light-mode .card-header,
html.light-mode .card-footer {
    background: rgba(134, 101, 63, 0.08) !important;
    border-color: rgba(120, 91, 58, 0.16) !important;
}

/* Forms */
html.light-mode input.form-control,
html.light-mode select.form-control,
html.light-mode select.form-select,
html.light-mode textarea.form-control,
html.light-mode .search-box {
    background: rgba(255, 253, 248, 0.92) !important;
    color: var(--text-color) !important;
    border-color: rgba(107, 79, 47, 0.24) !important;
}

    html.light-mode input.form-control:focus,
    html.light-mode select.form-control:focus,
    html.light-mode select.form-select:focus,
    html.light-mode textarea.form-control:focus,
    html.light-mode .search-box:focus {
        background: #fffdf8 !important;
        color: var(--text-color) !important;
        border-color: rgba(166, 112, 44, 0.55) !important;
        box-shadow: 0 0 0 0.12rem rgba(177, 126, 55, 0.16) !important;
    }

/* Tables */
html.light-mode table.table {
    background: rgba(255, 253, 248, 0.92) !important;
    color: var(--text-color) !important;
    border-color: rgba(107, 79, 47, 0.18) !important;
}

    html.light-mode table.table thead {
        background: rgba(180, 151, 111, 0.18) !important;
        color: var(--text-color) !important;
    }

    html.light-mode table.table th,
    html.light-mode table.table td {
        border-color: rgba(107, 79, 47, 0.15) !important;
    }

html.light-mode table.table-striped tbody tr:nth-of-type(odd),
html.light-mode table.table-striped tbody tr:nth-of-type(even) {
    background: rgba(151, 117, 74, 0.045) !important;
}

/* Lists */
html.light-mode .list-group-item {
    background: rgba(255, 253, 248, 0.94) !important;
    color: var(--text-color) !important;
    border-color: rgba(107, 79, 47, 0.16) !important;
}

    html.light-mode .list-group-item:hover {
        background: rgba(188, 154, 109, 0.15) !important;
        color: #2c251f !important;
    }

/* Dropdowns */
html.light-mode .dropdown-menu {
    background: rgba(255, 252, 246, 0.98) !important;
    border-color: rgba(107, 79, 47, 0.18) !important;
}

html.light-mode .dropdown-item {
    color: var(--text-color) !important;
}

    html.light-mode .dropdown-item:hover {
        background: rgba(188, 154, 109, 0.15) !important;
        color: var(--primary-color) !important;
    }

/* blazor-layout */
html.light-mode .signalhub-shell {
    color: #302a25;
}

html.light-mode .signalhub-nav a {
    color: rgba(47, 40, 34, 0.9);
}

    html.light-mode .signalhub-nav a:hover,
    html.light-mode .signalhub-nav a.active {
        color: #9a6b28;
        background: rgba(141, 104, 61, 0.10);
    }

html.light-mode .signalhub-nav-divider {
    border-top-color: rgba(74, 58, 43, 0.20);
}

html.light-mode .signalhub-sidebar-widget-btn,
html.light-mode .signalhub-admin-link,
html.light-mode .signalhub-login-btn,
html.light-mode .signalhub-logout-btn {
    color: rgba(47, 40, 34, 0.92);
    background: rgba(255,255,255,0.34);
    border-color: rgba(74, 58, 43, 0.18);
}


/* sig detail pop up */
html.light-mode .signal-detail-frame {
    color: #302a25;
    animation-name: signalDetailRimPulseLight;
}

@keyframes signalDetailRimPulseLight {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(183,135,67,.22)) drop-shadow(0 8px 28px rgba(93,65,35,.12));
    }

    50% {
        filter: drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 12px rgba(183,135,67,.30)) drop-shadow(0 10px 34px rgba(93,65,35,.16));
    }
}

html.light-mode .signal-hud-subtitle,
html.light-mode .signal-hud-account-meta,
html.light-mode .signal-hud-meta-line,
html.light-mode .signal-hud-follow-meta,
html.light-mode .signal-hud-followers {
    color: rgba(48, 42, 37, 0.68);
}

html.light-mode .signal-hud-server,
html.light-mode .signal-hud-status-main {
    color: #302a25;
}

html.light-mode .signal-detail-content-shell {
    background: rgba(255,255,255,0.34);
    border-color: rgba(105,78,48,0.18);
}

/* CSS pop ups */
html.light-mode .signal-simple-popup {
    color: #302a25;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(190,150,93,.30)) drop-shadow(0 12px 30px rgba(89,62,32,.16));
}

    html.light-mode .signal-simple-popup::before {
        background: linear-gradient( 135deg, #fffdf8 0%, #c9aa7f 14%, #fff8e9 28%, #8f673d 45%, #ead8b7 62%, #af8250 78%, #fffdf8 100% );
        box-shadow: 0 0 10px rgba(255,255,255,0.95), 0 0 24px rgba(181,137,75,0.28), 0 10px 34px rgba(94,65,33,0.18);
    }

    html.light-mode .signal-simple-popup::after {
        border-color: rgba(112,82,48,0.24);
        box-shadow: inset 0 0 18px rgba(255,255,255,0.42), inset 0 0 34px rgba(131,95,53,0.10);
    }

html.light-mode .signal-simple-popup-inner {
    background: radial-gradient( circle at 50% 0%, rgba(255,255,255,0.75), transparent 38% ), linear-gradient( 180deg, rgba(255,253,248,0.98), rgba(233,220,200,0.98) );
    border-color: rgba(111,80,47,0.16);
}

html.light-mode .signal-simple-popup-header {
    border-bottom-color: rgba(111,80,47,0.18);
}

html.light-mode .signal-simple-popup-title {
    color: #9b672d;
    text-shadow: 0 0 6px rgba(197,148,76,.25), 0 0 14px rgba(197,148,76,.12);
}

html.light-mode .signal-simple-popup-footer {
    border-top-color: rgba(111,80,47,0.16);
}

html.light-mode .signal-simple-popup-close {
    color: rgba(48,42,37,0.68);
    background: rgba(255,255,255,0.38);
    border-color: rgba(111,80,47,0.22);
}

    html.light-mode .signal-simple-popup-close:hover {
        color: #302a25;
        border-color: rgba(111,80,47,0.45);
        box-shadow: 0 0 12px rgba(164,117,55,0.18);
    }

/* Bootstrap Modals*/
html.light-mode .modal-content:not(.signal-simple-popup):not(.signal-detail-modal-content) {
    background: linear-gradient( 180deg, rgba(255,253,248,0.98), rgba(235,223,205,0.98) ) !important;
    color: var(--text-color) !important;
    border-color: rgba(157,108,45,0.35) !important;
}

html.light-mode .modal-header,
html.light-mode .modal-footer {
    background: rgba(152,112,63,0.08) !important;
    border-color: rgba(111,80,47,0.16) !important;
}

html.light-mode .modal-title {
    color: var(--primary-color) !important;
}

/* Keep Signal Card internals transparent in Light Mode */
html.light-mode .signal-card-v2 .card,
html.light-mode .signal-card-v2 .card-wrapper,
html.light-mode .signal-card-v2 .card-body,
html.light-mode .signal-card-v2 .card-header,
html.light-mode .signal-card-v2 .card-footer {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Signal detail popup controls - light mode --------------------------------------------------- */

html.light-mode .signal-hud-action-btn {
    background: linear-gradient( 180deg, rgba(225,216,201,0.98), rgba(196,181,159,0.98) );
    color: #302a25;
    border-color: rgba(111,80,47,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 2px 7px rgba(86,59,31,0.12);
}

    html.light-mode .signal-hud-action-btn:hover {
        background: linear-gradient( 180deg, rgba(238,228,212,1), rgba(211,191,164,1) );
        color: #211c18;
        border-color: rgba(111,80,47,0.40);
        filter: none;
    }

    html.light-mode .signal-hud-action-btn.primary {
        border-color: rgba(35,145,91,0.42);
    }

    html.light-mode .signal-hud-action-btn.danger {
        border-color: rgba(190,74,74,0.42);
    }

/* Fullscreen and standard icon buttons */
html.light-mode .signal-hud-icon-btn {
    background: linear-gradient( 180deg, rgba(225,216,201,0.98), rgba(196,181,159,0.98) );
    color: #302a25;
    border-color: rgba(111,80,47,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 2px 7px rgba(86,59,31,0.12);
}

    html.light-mode .signal-hud-icon-btn:hover {
        color: #211c18;
        border-color: rgba(151,102,43,0.42);
        filter: brightness(1.04);
    }

/* Close button */
html.light-mode .signal-hud-close-btn {
    background: linear-gradient( 180deg, rgba(236,207,202,0.98), rgba(196,151,145,0.98) );
    color: #6f2424;
    border-color: rgba(150,65,65,0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 2px 7px rgba(100,42,42,0.12);
}

    html.light-mode .signal-hud-close-btn:hover {
        background: linear-gradient( 180deg, rgba(244,215,210,1), rgba(211,162,155,1) );
        color: #571919;
        border-color: rgba(150,65,65,0.52);
        box-shadow: 0 3px 10px rgba(100,42,42,0.18);
    }

/* Signal detail header, tabs and social controls - light mode */

/* Header identity pill */
html.light-mode .signal-hud-header-pill {
    background: radial-gradient( circle at 25% 0%, rgba(255,255,255,0.82), transparent 42% ), linear-gradient( 180deg, rgba(255,253,248,0.96), rgba(221,205,181,0.92) ) !important;
    border-color: rgba(111,80,47,0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(105,75,43,0.12), 0 5px 15px rgba(82,56,30,0.16) !important;
}

/* Detail navigation tabs */
html.light-mode .signal-detail-tab {
    background: rgba(255,252,246,0.78) !important;
    color: #5d4a38 !important;
    border-color: rgba(111,80,47,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 2px 7px rgba(82,56,30,0.10);
}

    html.light-mode .signal-detail-tab:hover {
        background: rgba(255,253,248,0.96) !important;
        color: #302a25 !important;
        border-color: rgba(151,102,43,0.38) !important;
    }

    html.light-mode .signal-detail-tab.active {
        background: linear-gradient( 180deg, rgba(239,218,176,0.98), rgba(208,176,124,0.96) ) !important;
        color: #302416 !important;
        border-color: rgba(151,102,43,0.45) !important;
    }

/* Social counters and buttons */
html.light-mode .signal-hud-social-pill,
html.light-mode .signal-hud-social-btn {
    background: rgba(255,252,246,0.78) !important;
    color: #5d4a38 !important;
    border-color: rgba(111,80,47,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 2px 7px rgba(82,56,30,0.10);
}

    html.light-mode .signal-hud-social-btn:hover {
        background: rgba(255,253,248,0.96) !important;
        color: #302a25 !important;
        border-color: rgba(151,102,43,0.40) !important;
    }

    html.light-mode .signal-hud-social-btn.active-heart {
        color: #e65378 !important;
    }

    html.light-mode .signal-hud-social-btn.active-star {
        color: #c89116 !important;
    }

/* ==========================================================
   LIGHT MODE
   Use Monitor Only glow for every card type
   Keep original label colours
========================================================== */

/*html.light-mode .signal-card-glow-active,                      */
/*html.light-mode .signal-card-glow-monitor-active,              */
/*html.light-mode .signal-card-glow-vip {                        */
    /* Same glow as Monitor Only */
/*    --signal-card-glow-strong: rgba(194, 167, 111, 0.78);      */
/*    --signal-card-glow-soft: rgba(194, 167, 111, 0.42);        */
/*    --signal-card-glow-faint: rgba(194, 167, 111, 0.20);       */
/*}                                                              */


/* ==========================================================
   MOBILE OFFCANVAS - LIGHT MODE
========================================================== */

html.light-mode .signalhub-mobile-menu {
    background: linear-gradient( 180deg, rgba(255,253,248,.99), rgba(236,224,207,.98) ) !important;
    color: var(--text-color);
}

    html.light-mode .signalhub-mobile-menu .offcanvas-header {
        background: transparent;
        border-bottom: 1px solid rgba(111,80,47,.16);
    }

    html.light-mode .signalhub-mobile-menu .offcanvas-body {
        background: transparent;
    }

    /* top row */

    html.light-mode .signalhub-mobile-menu .signalhub-sidebar-topbar {
        color: var(--text-color);
    }

    /* navigation */

    html.light-mode .signalhub-mobile-menu .signalhub-nav a {
        color: #302a25;
    }

        html.light-mode .signalhub-mobile-menu .signalhub-nav a:hover,
        html.light-mode .signalhub-mobile-menu .signalhub-nav a.active {
            background: rgba(155,102,48,.10);
            color: #9a6b28;
        }

    /* divider */

    html.light-mode .signalhub-mobile-menu .signalhub-nav-divider {
        border-top-color: rgba(111,80,47,.16);
    }

    /* buttons */

    html.light-mode .signalhub-mobile-menu .signalhub-sidebar-widget-btn,
    html.light-mode .signalhub-mobile-menu .signalhub-admin-link,
    html.light-mode .signalhub-mobile-menu .signalhub-login-btn,
    html.light-mode .signalhub-mobile-menu .signalhub-logout-btn {
        background: linear-gradient( 180deg, rgba(255,253,248,.94), rgba(232,219,200,.92) );
        color: #302a25;
        border-color: rgba(111,80,47,.18);
    }

    /* notification + gear */

    html.light-mode .signalhub-mobile-menu .signalhub-notification-btn,
    html.light-mode .signalhub-mobile-menu .signalhub-gear-btn {
        color: #5d4a38;
    }

        html.light-mode .signalhub-mobile-menu .signalhub-notification-btn:hover,
        html.light-mode .signalhub-mobile-menu .signalhub-gear-btn:hover {
            color: #b17a2b;
        }