/* ===== Base Typography ===== */
        body,
        * {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-synthesis: none;
        }

        code,
        pre,
        .mono {
            font-family: 'Courier New', Courier, monospace;
        }

/* ===== Main Styling & Components ===== */
        /* Lucide icons sizing */
        [data-lucide] {
            display: inline-flex;
            vertical-align: middle;
            flex-shrink: 0;
        }

        :root {
            --bg-page: #000000;
            --bg-header: rgba(0, 0, 0, 0.97);
            --bg-card: #0a0a0a;
            --bg-card-hover: #141414;
            --bg-input: #1a1a1a;
            --text-primary: #c4d0df;
            --text-secondary: #5e7080;
            --text-heading: #eef3fa;
            --border-color: rgba(247, 147, 26, 0.1);
            --border-hover: rgba(247, 147, 26, 0.28);
            --shadow: 0 4px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(247, 147, 26, 0.04);
            --gold: #f7931a;
            --green: #0ecb81;
            --red: #f6465d;
            --blue: #3b9eff;
            --header-text: #eef3fa;
            --theme-icon-dark: block;
            --theme-icon-light: none;
        }

        body.light-mode {
            --bg-page: #ffffff;
            --bg-header: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #ffffff;
            --bg-input: #ffffff;
            --text-primary: #222222;
            --text-secondary: #666666;
            --text-heading: #111111;
            --header-text: #111111;
            --border-color: #e0e0e0;
            --border-hover: #cccccc;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --gold: #c2700f;
            --theme-icon-dark: none;
            --theme-icon-light: block;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(247, 147, 26, 0.25);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(247, 147, 26, 0.45);
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(247, 147, 26, 0.25) rgba(255, 255, 255, 0.03);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg-page);
            min-height: 100vh;
            padding: 16px;
            color: var(--text-primary);
            transition: background 0.3s ease, color 0.3s ease;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: -20%;
            left: -10%;
            width: 50vw;
            height: 50vw;
            background: radial-gradient(circle, rgba(247, 147, 26, 0.06) 0%, transparent 65%);
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: fixed;
            bottom: -20%;
            right: -10%;
            width: 45vw;
            height: 45vw;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.05) 0%, transparent 65%);
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* Header - Glassmorphism */
        .header {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            margin-bottom: 14px;
            padding: 0 10px;
            height: 46px;
            background: rgba(8, 8, 8, 0.92);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
            transition: background 0.3s ease, border-color 0.3s ease;
        }

        /* Header Logo (original Treasury gold icon) */
        .header-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            cursor: pointer;
        }

        /* Header title text (replaces search bar) */
        .header-title-text {
            font-size: 0.85em;
            font-weight: 700;
            color: #e7e9ea;
            letter-spacing: -0.01em;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.light-mode .header-title-text {
            color: #111827;
        }

        /* Nav icon buttons */
        .nav-icon-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: transparent;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            color: #9ca3af;
            transition: background 0.15s, color 0.15s;
            flex-shrink: 0;
            font-family: inherit;
        }

        .nav-icon-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #e7e9ea;
        }

        /* Nav menu dropdown */
        .nav-menu-dropdown {
            position: fixed;
            background: #101010;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            z-index: 99999;
            min-width: 190px;
            overflow: hidden;
            display: none;
        }

        .nav-menu-dropdown.active {
            display: block;
        }

        .nav-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            color: #d1d5db;
            font-size: 0.83em;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            font-family: inherit;
            transition: background 0.12s;
            white-space: nowrap;
        }

        .nav-menu-item:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #e7e9ea;
        }

        .nav-menu-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.07);
            margin: 3px 0;
        }

        /* Install App: menonjol + kedip agar ternotice */
        .install-nav {
            color: #4ade80 !important;
            font-weight: 700;
        }

        .install-nav i {
            color: #4ade80;
        }

        .install-blink {
            animation: installBlink 1.3s ease-in-out infinite;
        }

        @keyframes installBlink {

            0%,
            100% {
                background: rgba(34, 197, 94, 0.10);
            }

            50% {
                background: rgba(34, 197, 94, 0.30);
            }
        }

        body.light-mode .install-nav {
            color: #15803d !important;
        }

        body.light-mode .install-nav i {
            color: #15803d;
        }

        body.light-mode .install-blink {
            animation: installBlinkLight 1.3s ease-in-out infinite;
        }

        @keyframes installBlinkLight {

            0%,
            100% {
                background: rgba(34, 197, 94, 0.12);
            }

            50% {
                background: rgba(34, 197, 94, 0.30);
            }
        }

        /* ── Onboarding tour (pengenalan untuk user baru) ── */
        .tour-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: none;
        }

        .tour-overlay.active {
            display: block;
        }

        .tour-spot {
            position: absolute;
            border-radius: 12px;
            pointer-events: none;
            box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.9), 0 0 0 9999px rgba(0, 0, 0, 0.72);
            transition: all 0.28s cubic-bezier(.4, .0, .2, 1);
        }

        .tour-tip {
            position: fixed;
            z-index: 100001;
            width: min(300px, calc(100vw - 32px));
            background: #121212;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 2px solid #f7931a;
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
            transition: top 0.28s ease, left 0.28s ease;
        }

        .tour-tip-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.98em;
            font-weight: 700;
            color: #f7931a;
            margin-bottom: 7px;
        }

        .tour-tip-body {
            font-size: 0.82em;
            color: #d1d5db;
            line-height: 1.55;
        }

        .tour-tip-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 14px;
            gap: 10px;
        }

        .tour-step-count {
            font-size: 0.72em;
            color: #8b949e;
            font-weight: 600;
        }

        .tour-btns {
            display: flex;
            gap: 8px;
        }

        .tour-skip {
            background: none;
            border: none;
            color: #8b949e;
            font-size: 0.78em;
            cursor: pointer;
            padding: 7px 8px;
            font-family: inherit;
        }

        .tour-skip:hover {
            color: #e7e9ea;
        }

        .tour-next {
            background: #f7931a;
            border: none;
            color: #0a0e13;
            font-size: 0.8em;
            font-weight: 700;
            cursor: pointer;
            padding: 7px 16px;
            border-radius: 8px;
            font-family: inherit;
        }

        .tour-next:hover {
            background: #ffa733;
        }

        body.light-mode .tour-tip {
            background: #fff;
            border-color: #e5e7eb;
            border-top-color: #f7931a;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
        }

        body.light-mode .tour-tip-body {
            color: #374151;
        }

        body.light-mode .tour-next {
            color: #fff;
        }

        .nav-menu-logout {
            color: #f87171;
        }

        .nav-menu-logout:hover {
            background: rgba(239, 68, 68, 0.1) !important;
            color: #f87171 !important;
        }

        .chart-title-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        /* Sound Toggle (now a nav-menu-item) */
        #soundToggle svg {
            color: #4ade80;
        }

        #soundToggle.partial svg {
            color: #fbbf24;
        }

        #soundToggle.off svg {
            color: #f87171;
        }

        /* Sound Panel */
        .sound-panel {
            position: fixed;
            z-index: 9999;
            background: #121212;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            width: 248px;
            overflow: hidden;
        }

        .sound-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            font-size: 0.78em;
            font-weight: 700;
            color: #9ca3af;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .sound-panel-close {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            padding: 2px 7px;
            border-radius: 5px;
            font-size: 1em;
            line-height: 1;
            transition: color 0.15s, background 0.15s;
        }

        .sound-panel-close:hover {
            color: #e7e9ea;
            background: rgba(255, 255, 255, 0.07);
        }

        /* Tombol kembali di sub-panel: area sentuh lebih besar & gampang diklik */
        .sound-panel-back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            margin: -4px 4px -4px -6px;
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            border-radius: 7px;
            flex-shrink: 0;
            transition: color 0.15s, background 0.15s;
        }

        .sound-panel-back:hover,
        .sound-panel-back:active {
            color: #e7e9ea;
            background: rgba(255, 255, 255, 0.1);
        }

        .sound-row {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 11px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            transition: background 0.15s;
            cursor: default;
        }

        .sound-row:last-of-type {
            border-bottom: none;
        }

        .sound-row:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .sound-row-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .sound-row-label {
            flex: 1;
            font-size: 0.82em;
            color: #d1d5db;
            font-weight: 500;
            line-height: 1.3;
        }

        .sound-row-sub {
            font-size: 0.78em;
            color: #6b7280;
            display: block;
            margin-top: 1px;
        }

        .sound-sw {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 21px;
            flex-shrink: 0;
        }

        .sound-sw input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .sound-sw-track {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 21px;
            cursor: pointer;
            transition: background 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .sound-sw-track::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            left: 2px;
            top: 2px;
            background: #6b7280;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .sound-sw input:checked+.sound-sw-track {
            background: rgba(74, 222, 128, 0.3);
            border-color: rgba(74, 222, 128, 0.4);
        }

        .sound-sw input:checked+.sound-sw-track::before {
            transform: translateX(17px);
            background: #4ade80;
        }

        .sound-panel-footer {
            display: flex;
            gap: 8px;
            padding: 11px 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }

        .sound-panel-btn {
            flex: 1;
            padding: 7px 8px;
            border-radius: 7px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.05);
            color: #9ca3af;
            font-size: 0.75em;
            cursor: pointer;
            transition: all 0.15s;
            font-weight: 500;
        }

        .sound-panel-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e7e9ea;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-left: auto;
        }

        /* Stat Items — Glassmorphism */
        .stat-item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            column-gap: 5px;
            row-gap: 0;
            padding: 5px 9px;
            background: #0d0d0d;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-top: 2px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .stat-item:hover {
            background: #111e33;
            transform: translateY(-1px);
        }

        /* === Feedback klik ringan (tap mobile & klik desktop) + cursor pointer === */
        button,
        [onclick],
        a[href],
        label[for],
        select {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        button,
        [onclick] {
            transition: transform 0.12s ease;
        }

        button:active,
        [onclick]:active {
            transform: scale(0.93);
        }

        /* Elemen besar/kartu yang bisa diklik: efek tekan lebih halus */
        .stat-item[onclick]:active,
        .promo-card:active,
        .news-card:active,
        .nav-menu-item:active,
        .page-btn:active {
            transform: scale(0.97);
        }

        @media (hover: none) {

            /* Di layar sentuh: cursor tidak relevan, biarkan efek tekan saja */
            button,
            [onclick] {
                cursor: default;
            }
        }

        .stat-item .stat-label {
            flex: 0 0 100%;
            font-size: 0.58em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: #9ca3af;
            line-height: 1.5;
        }

        .stat-item .stat-value {
            flex: 0 1 auto;
            font-size: 0.88em;
            font-weight: 700;
            color: #f0f6ff;
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
            line-height: 1.3;
        }

        .rp-prefix {
            font-size: 0.55em;
            font-weight: 500;
            opacity: 0.7;
        }

        .stat-item .stat-value.green {
            color: #4ade80;
        }

        .stat-item .stat-value.blue {
            color: #60a5fa;
        }

        .stat-item .stat-change {
            flex: 0 0 auto;
            font-size: 0.62em;
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 700;
            letter-spacing: 0.2px;
            white-space: nowrap;
            min-height: 1.45em;
            display: inline-flex;
            align-items: center;
        }

        /* Badge kosong (belum ada perubahan, mis. USD/IDR diam) jangan dirender —
       di light mode background putihnya kelihatan seperti kapsul kosong */
        .stat-item .stat-change:empty {
            display: none !important;
        }

        /* Dorong badge +/- ke kanan agar mepet ke tepi kotak, bukan ke font harga */
        #buyCard .stat-change,
        #sellCard .stat-change,
        #usdIdrCard .stat-change {
            margin-left: auto;
        }

        .stat-item .stat-change.up {
            color: #4ade80;
            background: rgba(74, 222, 128, 0.13);
        }

        .stat-item .stat-change.down {
            color: #f87171;
            background: rgba(248, 113, 113, 0.13);
        }

        .stat-item.price-up {
            border-top-color: #4ade80;
            box-shadow: 0 0 16px rgba(74, 222, 128, 0.08), 0 2px 12px rgba(0, 0, 0, 0.2);
        }

        .stat-item.price-up .stat-value {
            color: #4ade80;
        }

        .stat-item.price-down {
            border-top-color: #f87171;
            box-shadow: 0 0 16px rgba(248, 113, 113, 0.08), 0 2px 12px rgba(0, 0, 0, 0.2);
        }

        .stat-item.price-down .stat-value {
            color: #f87171;
        }

        /* ── Skeleton loading ──────────────────────────────────────── */
        .stat-val-skeleton {
            display: inline-block !important;
            min-width: 82px;
            height: 0.95em;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.06) 75%);
            background-size: 200% 100%;
            animation: skelShimmer 1.4s infinite linear;
            border-radius: 6px;
            vertical-align: middle;
        }

        @keyframes skelShimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* ── Price flip animation ──────────────────────────────────── */
        @keyframes flipOutUp {
            0% {
                opacity: 1;
                transform: translateY(0)
            }

            100% {
                opacity: 0;
                transform: translateY(-9px)
            }
        }

        @keyframes flipOutDown {
            0% {
                opacity: 1;
                transform: translateY(0)
            }

            100% {
                opacity: 0;
                transform: translateY(9px)
            }
        }

        @keyframes flipIn {
            0% {
                opacity: 0;
                transform: translateY(9px)
            }

            100% {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .flip-out-up {
            animation: flipOutUp 0.16s ease forwards;
            display: inline-block;
        }

        .flip-out-down {
            animation: flipOutDown 0.16s ease forwards;
            display: inline-block;
        }

        .flip-in {
            animation: flipIn 0.18s ease forwards;
            display: inline-block;
        }

        /* ── Per-card accent colors ────────────────────────────────── */
        #buyCard .stat-label {
            color: #4ade80 !important;
            opacity: 1 !important;
        }

        #sellCard .stat-label {
            color: #60a5fa !important;
            opacity: 1 !important;
        }

        #usdIdrCard .stat-label {
            color: #a78bfa !important;
            opacity: 1 !important;
        }

        #promoLimitCard .stat-label {
            color: #f7931a !important;
            opacity: 1 !important;
        }

        #lowestOnCard .stat-label {
            color: #34d399 !important;
            opacity: 1 !important;
        }

        #markupCard .stat-label {
            color: #fbbf24 !important;
            opacity: 1 !important;
        }

        #buyCard {
            border-top-color: #4ade80 !important;
            border-left: none !important;
        }

        #sellCard {
            border-top-color: #60a5fa !important;
            border-left: none !important;
        }

        #usdIdrCard {
            border-top-color: #a78bfa !important;
            border-left: none !important;
        }

        #promoLimitCard {
            border-top-color: #f7931a !important;
            border-left: none !important;
        }

        /* Titik ON: border hijau penuh + latar tipis agar serasi dengan kartu lain yang punya glow */
        #lowestOnCard {
            border-color: rgba(52, 211, 153, 0.45) !important;
            border-top-color: #34d399 !important;
            border-left: none !important;
            background: rgba(52, 211, 153, 0.06);
            box-shadow: 0 0 10px rgba(52, 211, 153, 0.12), 0 2px 8px rgba(0, 0, 0, 0.18);
        }

        #markupCard {
            border-top-color: #fbbf24 !important;
            border-left: none !important;
        }

        .stat-item.invest {
            border-left: 2px solid rgba(247, 147, 26, 0.6);
            background: rgba(247, 147, 26, 0.05);
        }

        .stat-item.invest .stat-label {
            color: #f7931a;
        }

        /* Invest Stats Row - horizontal pill per nominal */
        .invest-stats {
            display: flex;
            flex-wrap: wrap;
            overflow: visible;
            gap: 6px;
            padding: 4px 16px 8px 16px;
            justify-content: center;
            align-items: center;
            scrollbar-width: none;
        }

        .invest-stats::-webkit-scrollbar {
            display: none;
        }

        #investStatsList {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            justify-content: center;
        }

        .invest-stats .stat-item {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            flex: 0 0 auto;
            text-align: left;
            background: linear-gradient(135deg, rgba(247, 147, 26, 0.1) 0%, rgba(247, 147, 26, 0.04) 100%);
            border: 1px solid rgba(247, 147, 26, 0.22);
            border-top: 1px solid rgba(247, 147, 26, 0.4);
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(247, 147, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
            transform: none !important;
        }

        .invest-stats .stat-item:hover {
            background: linear-gradient(135deg, rgba(247, 147, 26, 0.16) 0%, rgba(247, 147, 26, 0.08) 100%);
            border-color: rgba(247, 147, 26, 0.38);
            box-shadow: 0 3px 10px rgba(247, 147, 26, 0.15);
            transform: none !important;
        }

        /* Reset base overrides yang merusak horizontal layout pill invest */
        .invest-stats .stat-item .stat-label {
            flex: 0 0 auto;
            font-size: 0.75em;
            min-width: 28px;
            color: #f7931a;
        }

        .invest-stats .stat-item .stat-value {
            flex: 0 0 auto;
            font-size: 0.85em;
        }

        .invest-stats .stat-item .stat-change {
            flex: 0 0 auto;
            font-size: 0.8em;
            padding: 2px 6px;
            min-height: auto;
            display: inline;
        }

        /* History Font Settings Button - hanya mobile */
        #historyFontSettingsBtn {
            display: none;
        }

        /* Nominal Settings Button - tampil di semua mode */
        .nominal-settings-btn {
            display: flex;
            /* Visible on all modes */
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(247, 147, 26, 0.15);
            border: 1px solid rgba(247, 147, 26, 0.3);
            border-radius: 8px;
            color: #f7931a;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .nominal-settings-btn:hover {
            background: rgba(247, 147, 26, 0.25);
        }

        /* Nominal Settings Modal */
        .nominal-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .nominal-modal-overlay.active {
            display: flex;
        }

        .display-settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .display-settings-overlay.active {
            display: flex;
        }

        .display-settings-modal {
            background: rgba(10, 10, 10, 0.92);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            max-width: 380px;
            width: 100%;
            max-height: 86vh;
            overflow-y: auto;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .display-settings-modal>h3 {
            color: #f7931a;
            font-size: 1em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 18px 20px 14px;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 1;
            background: rgba(10, 10, 10, 0.95);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .display-settings-close {
            margin-left: auto;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #8b949e;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .display-settings-close:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #e7e9ea;
        }

        body.light-mode .display-settings-modal {
            background: #fff;
            border-color: #e0e0e0;
            border-top-color: rgba(247, 147, 26, 0.6);
        }

        body.light-mode .display-settings-modal>h3 {
            background: #fff;
            border-bottom-color: #eee;
        }

        body.light-mode .display-settings-close {
            background: #f3f4f6;
            border-color: #e0e0e0;
            color: #6b7280;
        }

        body.light-mode .display-settings-close:hover {
            background: #e5e7eb;
            color: #1f2937;
        }

        .nominal-modal {
            background: rgba(10, 10, 10, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            padding: 20px;
            max-width: 320px;
            width: 90%;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .nominal-modal h3 {
            color: #f7931a;
            font-size: 1em;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nominal-modal-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .nominal-modal-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .nominal-modal-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .nominal-modal-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #f7931a;
        }

        .nominal-modal-item label {
            flex: 1;
            cursor: pointer;
            color: #e7e9ea;
            font-size: 0.9em;
        }

        .nominal-modal-item .nominal-discount {
            color: #6b7280;
            font-size: 0.75em;
        }

        .nominal-modal-actions {
            display: flex;
            gap: 10px;
        }

        .nominal-modal-actions button {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .nominal-modal-actions .btn-cancel {
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            color: #8b949e;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .nominal-modal-actions .btn-cancel:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e7e9ea;
        }

        .nominal-modal-actions .btn-save {
            background: rgba(247, 147, 26, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(247, 147, 26, 0.4);
            border-top: 1px solid rgba(247, 147, 26, 0.6);
            color: #f7931a;
            box-shadow: 0 4px 14px rgba(247, 147, 26, 0.15), inset 0 1px 0 rgba(247, 147, 26, 0.2);
        }

        .nominal-modal-actions .btn-save:hover {
            background: rgba(247, 147, 26, 0.3);
            box-shadow: 0 0 18px rgba(247, 147, 26, 0.25);
        }

        /* User hidden nominal */
        .stat-item.invest.user-hidden {
            display: none !important;
        }

        /* Chart Section */
        .chart-section {
            background: #0d0d0d;
            border-radius: 4px 4px 0 0;
            border: 1px solid rgba(255, 255, 255, 0.07);
            margin-bottom: 20px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }

        /* Glow effect — border berwarna saat perubahan, tetap sampai harga berubah lagi */
        .glow-up {
            border-color: rgba(0, 200, 83, 0.6) !important;
            box-shadow: 0 0 0 1px rgba(0, 200, 83, 0.3), 0 24px 64px rgba(0, 0, 0, 0.45) !important;
            animation: glowBlinkUp 0.6s ease-in-out 8;
        }

        .glow-down {
            border-color: rgba(255, 82, 82, 0.6) !important;
            box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.3), 0 24px 64px rgba(0, 0, 0, 0.45) !important;
            animation: glowBlinkDown 0.6s ease-in-out 8;
        }

        @keyframes glowBlinkUp {

            0%,
            100% {
                box-shadow: 0 0 0 1px rgba(0, 200, 83, 0.2), 0 0 20px rgba(0, 200, 83, 0.3), 0 24px 64px rgba(0, 0, 0, 0.45);
            }

            50% {
                box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.5), 0 0 50px rgba(0, 200, 83, 0.5), 0 0 100px rgba(0, 200, 83, 0.2), 0 24px 64px rgba(0, 0, 0, 0.45);
            }
        }

        @keyframes glowBlinkDown {

            0%,
            100% {
                box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.2), 0 0 20px rgba(255, 82, 82, 0.3), 0 24px 64px rgba(0, 0, 0, 0.45);
            }

            50% {
                box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.5), 0 0 50px rgba(255, 82, 82, 0.5), 0 0 100px rgba(255, 82, 82, 0.2), 0 24px 64px rgba(0, 0, 0, 0.45);
            }
        }

        .chart-header {
            padding: 14px 18px;
            background: #0a0a0a;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 4px 4px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            transition: background 0.3s ease;
        }

        .chart-section::before {
            content: '';
            position: absolute;
            top: -40px;
            left: 15%;
            width: 300px;
            height: 220px;
            background: radial-gradient(ellipse, rgba(247, 147, 26, 0.1) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .chart-section::after {
            content: '';
            position: absolute;
            top: -30px;
            right: 10%;
            width: 200px;
            height: 180px;
            background: radial-gradient(ellipse, rgba(96, 165, 250, 0.07) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .chart-title {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            justify-content: center;
        }

        .chart-header h2 {
            font-size: 1.2em;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
            letter-spacing: -0.02em;
        }

        /* Live dot pulse */
        .live-dot {
            position: absolute;
            top: -2px;
            right: -3px;
            width: 8px;
            height: 8px;
            background: #22c55e;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
            animation: livePulse 1.8s ease-in-out infinite;
        }

        .live-dot.reconnecting {
            background: #f59e0b;
            box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
            animation: livePulseAmber 1.8s ease-in-out infinite;
        }

        @keyframes livePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
            }

            70% {
                box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            }
        }

        @keyframes livePulseAmber {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
            }

            70% {
                box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
            }
        }

        body.light-mode .live-dot {
            border: 1.5px solid #fff;
        }

        .chart-header .live-badge {
            background: rgba(34, 197, 94, 0.12);
            backdrop-filter: blur(10px);
            color: #4ade80;
            font-size: 0.7em;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-top: 1px solid rgba(34, 197, 94, 0.5);
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(34, 197, 94, 0.15);
            animation: pulse 2s infinite;
        }

        .calc-btn-header {
            background: linear-gradient(135deg, #f7931a 0%, #e8850a 100%);
            color: #fff;
            font-size: 0.7em;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 10px rgba(247, 147, 26, 0.3);
            transition: all 0.2s ease;
        }

        .calc-btn-header:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(247, 147, 26, 0.4);
        }

        .calc-btn-header svg {
            width: 12px;
            height: 12px;
        }

        /* Promo Status Badge */
        .promo-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.6px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #888;
            margin-left: 8px;
        }

        /* ON: hijau mengkilap (gradasi + highlight atas) dengan kedip glow rapi */
        .promo-status-badge.on {
            background: linear-gradient(180deg, #00e676 0%, #00c853 48%, #00993f 100%);
            border: 1px solid rgba(0, 230, 118, 0.9);
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0, 80, 30, 0.55);
            box-shadow: 0 0 14px rgba(0, 230, 118, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
            animation: promoBlinkOn 1.6s ease-in-out infinite;
        }

        /* OFF: merah mengkilap dengan kedip glow rapi */
        .promo-status-badge.off {
            background: linear-gradient(180deg, #ff6b6b 0%, #f43b3b 48%, #c62828 100%);
            border: 1px solid rgba(255, 107, 107, 0.9);
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(100, 10, 10, 0.55);
            box-shadow: 0 0 14px rgba(244, 59, 59, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
            animation: promoBlinkOff 1.6s ease-in-out infinite;
        }

        .promo-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #888;
        }

        .promo-status-badge.on .promo-dot,
        .promo-status-badge.off .promo-dot {
            background: radial-gradient(circle at 35% 30%, #ffffff 0%, rgba(255, 255, 255, 0.85) 35%, rgba(255, 255, 255, 0.45) 100%);
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
            animation: promoPulse 1s ease-in-out infinite;
        }

        @keyframes promoPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.35);
                opacity: 0.65;
            }
        }

        @keyframes promoBlinkOn {

            0%,
            100% {
                box-shadow: 0 0 8px rgba(0, 230, 118, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
                filter: brightness(1);
            }

            50% {
                box-shadow: 0 0 22px rgba(0, 230, 118, 0.85), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
                filter: brightness(1.18);
            }
        }

        @keyframes promoBlinkOff {

            0%,
            100% {
                box-shadow: 0 0 8px rgba(244, 59, 59, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
                filter: brightness(1);
            }

            50% {
                box-shadow: 0 0 22px rgba(244, 59, 59, 0.85), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
                filter: brightness(1.18);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        @keyframes badgePulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }

            50% {
                transform: scale(1.2);
                box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
            }
        }

        #chatUnreadBadge.pulse {
            animation: badgePulse 1s ease-in-out infinite;
        }

        @keyframes promoBlink {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.8);
                background: linear-gradient(135deg, rgba(14, 203, 129, 0.25), rgba(14, 203, 129, 0.1));
            }

            50% {
                box-shadow: 0 0 0 6px rgba(14, 203, 129, 0);
                background: linear-gradient(135deg, rgba(14, 203, 129, 0.55), rgba(14, 203, 129, 0.35));
            }
        }

        @keyframes promoBadgePop {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.25);
            }
        }

        .indicator-btn.promo.has-new {
            animation: promoBlink 0.8s ease-in-out infinite !important;
            border-color: rgba(14, 203, 129, 0.8) !important;
        }

        .indicator-btn.promo.has-new #promoBadge {
            animation: promoBadgePop 0.8s ease-in-out infinite;
        }

        body.light-mode .indicator-btn.promo.has-new {
            animation: promoBlinkLight 0.8s ease-in-out infinite !important;
        }

        .promo-nav.has-new {
            animation: promoNavBlink 0.8s ease-in-out infinite !important;
        }

        .promo-nav.has-new #promoBadge {
            animation: promoBadgePop 0.8s ease-in-out infinite;
        }

        @keyframes promoNavBlink {

            0%,
            100% {
                background: rgba(14, 203, 129, 0.08);
                box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.6);
            }

            50% {
                background: rgba(14, 203, 129, 0.22);
                box-shadow: 0 0 0 5px rgba(14, 203, 129, 0);
            }
        }

        @keyframes promoBlinkLight {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
                background: #d1fae5;
            }

            50% {
                box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
                background: #a7f3d0;
            }
        }

        .chart-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: stretch;
            /* semua kartu sebaris sama tinggi walau badge perubahan beda ukuran */
            justify-content: center;
        }

        .chart-stats>.stat-item {
            align-content: center;
        }

        /* Titik ON: label satu baris agar tinggi kotak sama dgn kartu lain */
        #lowestOnCard .stat-label {
            white-space: nowrap;
        }

        /* Desktop: semua kartu (Beli/Jual/USD-IDR/Titik ON) seragam lebarnya */
        @media (min-width: 769px) {
            .chart-stats>.stat-item {
                flex: 1 1 0;
                min-width: 0;
                max-width: 250px;
            }
        }

        .daily-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            justify-content: center;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.15);
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .daily-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(12, 12, 12, 0.8);
            border-radius: 10px;
            font-size: 0.85em;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .daily-item .daily-label {
            color: #8b949e;
            text-transform: uppercase;
            font-size: 0.75em;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .daily-item .daily-value {
            color: #ffffff;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
        }

        .daily-item.clock-item {
            flex-direction: column;
            gap: 4px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(247, 147, 26, 0.1), rgba(247, 147, 26, 0.05));
            border: 1px solid rgba(247, 147, 26, 0.2);
            border-radius: 12px;
        }

        /* Limit/Markup/Spread - kolom badge di kanan jam (in-flow, tidak absolute
       agar tidak terpotong di layar sempit dan tidak menyisakan ruang kosong di desktop) */
        .limit-markup-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            justify-content: center;
            flex: 0 0 auto;
        }

        /* === Overlay badges - shared base === */
        .limit-label,
        .markup-overlay,
        .spread-overlay,
        .price-high-overlay,
        .price-low-overlay {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;
            font-size: 0.78em;
            font-weight: 600;
            padding: 5px 9px;
            border-radius: 4px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            line-height: 1;
        }

        /* LIMIT badge */
        .limit-label {
            background: rgba(247, 147, 26, 0.1);
            border: 1px solid rgba(247, 147, 26, 0.28);
            border-left: 2px solid #f7931a;
            color: #f7931a;
        }

        .limit-label .limit-text {
            font-size: 0.75em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.45);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .limit-label .limit-eq {
            display: none;
        }

        .limit-label #promoLimitValue {
            font-size: 1em;
            color: #f7931a;
            font-weight: 700;
        }

        /* MARKUP badge */
        .markup-overlay {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.28);
            border-left: 2px solid #fbbf24;
            color: #fbbf24;
        }

        .markup-overlay>svg {
            display: none;
        }

        .markup-overlay-text {
            font-size: 0.75em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.45);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        /* SPREAD badge */
        .spread-overlay {
            background: rgba(74, 222, 128, 0.09);
            border: 1px solid rgba(74, 222, 128, 0.28);
            border-left: 2px solid #4ade80;
            color: #4ade80;
        }

        .spread-overlay-text {
            font-size: 0.75em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.45);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        /* Tertinggi/Terendah - kolom badge di kiri jam (in-flow), rata kanan menempel jam */
        .price-highlow-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-end;
            justify-content: center;
            flex: 0 0 auto;
        }

        .price-high-overlay {
            background: rgba(74, 222, 128, 0.09);
            border: 1px solid rgba(74, 222, 128, 0.28);
            border-left: 2px solid #4ade80;
            color: #4ade80;
        }

        .price-low-overlay {
            background: rgba(248, 113, 113, 0.09);
            border: 1px solid rgba(248, 113, 113, 0.28);
            border-left: 2px solid #f87171;
            color: #f87171;
        }

        .price-highlow-text {
            font-size: 0.75em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.45);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        /* Label badge sejajar dengan nilai dalam 1 baris (row) — tanpa jarak bawah */
        .limit-label .limit-text,
        .markup-overlay-text,
        .spread-overlay-text,
        .price-highlow-text {
            margin-bottom: 0;
        }

        @media (max-width: 768px) {

            .limit-label,
            .markup-overlay,
            .spread-overlay,
            .price-high-overlay,
            .price-low-overlay {
                font-size: 0.65em;
                padding: 3px 7px;
            }

            .limit-label .limit-text,
            .markup-overlay-text,
            .spread-overlay-text,
            .price-highlow-text {
                display: none;
            }

            .markup-overlay>svg {
                display: none;
            }
        }

        @media (max-width: 480px) {

            .limit-label,
            .markup-overlay,
            .spread-overlay,
            .price-high-overlay,
            .price-low-overlay {
                font-size: 0.58em;
                padding: 3px 6px;
            }
        }

        /* Info Row - Clock & User Phone */
        .chart-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 3px solid rgba(255, 255, 255, 0.18);
            border-radius: 4px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .clock-info {
            flex-direction: column;
            align-items: center;
            gap: 2px;
            text-align: center;
        }

        .info-time {
            font-size: 1.25em;
            font-weight: 700;
            color: #e6edf3;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 1px;
            text-align: center;
            display: block;
            text-shadow: none;
        }

        /* Jam: bedakan warna jam / menit / detik agar jelas */
        .clk-h {
            color: #e6edf3;
        }

        .clk-m {
            color: #f7931a;
        }

        .clk-s {
            color: #22c55e;
            display: inline-block;
            transition: color 0.2s ease;
        }

        .clk-s.clk-s-alert {
            color: #ef4444 !important;
            animation: clkSPulse 1s ease-in-out infinite;
        }

        @keyframes clkSPulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.45;
            }
        }

        /* Goyang layar (pengganti getar untuk iPhone/desktop) */
        body.is-shaking {
            overflow-x: hidden;
        }

        /* Goyang layar halus (smooth) — bukan getar kasar */
        .screen-shake {
            animation: screenShake 0.6s ease-in-out;
        }

        @keyframes screenShake {

            0%,
            100% {
                transform: translateX(0);
            }

            20% {
                transform: translateX(-1.5px);
            }

            40% {
                transform: translateX(1.5px);
            }

            60% {
                transform: translateX(-1px);
            }

            80% {
                transform: translateX(0.6px);
            }
        }

        .screen-shake-strong {
            animation: screenShakeStrong 0.72s ease-in-out;
        }

        @keyframes screenShakeStrong {

            0%,
            100% {
                transform: translateX(0);
            }

            15% {
                transform: translateX(-2.5px);
            }

            35% {
                transform: translateX(2.5px);
            }

            55% {
                transform: translateX(-1.6px);
            }

            75% {
                transform: translateX(1px);
            }

            90% {
                transform: translateX(-0.5px);
            }
        }

        .clk-sep {
            color: rgba(255, 255, 255, 0.35);
            margin: 0 1px;
            animation: clkBlink 1s steps(1, end) infinite;
        }

        @keyframes clkBlink {

            0%,
            50% {
                opacity: 1;
            }

            51%,
            100% {
                opacity: 0.3;
            }
        }

        /* Animasi gerak saat detik berganti */
        .clk-tick {
            animation: clkTick 0.4s ease;
        }

        @keyframes clkTick {
            0% {
                transform: translateY(-3px) scale(1.18);
                opacity: 0.45;
            }

            60% {
                transform: translateY(0) scale(1.05);
                opacity: 1;
            }

            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .info-date {
            font-size: 0.85em;
            color: #c9d1d9;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .info-date-day {
                display: none;
            }
        }

        .user-info-display {
            background: rgba(255, 255, 255, 0.05);
            padding: 8px 14px;
            border-radius: 8px;
        }

        .info-label {
            font-size: 0.8em;
            color: #8b949e;
        }

        .info-value {
            font-size: 0.95em;
            font-weight: 600;
            color: #4ade80;
            font-family: 'JetBrains Mono', monospace;
        }

        .clock-time {
            font-size: 1.3em;
            font-weight: 600;
            color: #f7931a;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 1px;
        }

        .clock-date {
            font-size: 0.8em;
            color: #8b949e;
        }

        .trend-icon-up {
            color: #4ade80;
            font-size: 1.2em;
        }

        .trend-icon-down {
            color: #f87171;
            font-size: 1.2em;
        }

        .daily-item .daily-value.high {
            color: #4ade80;
        }

        .daily-item .daily-value.low {
            color: #f87171;
        }

        .daily-item.sound-toggle {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .daily-item.sound-toggle:hover {
            background: rgba(247, 147, 26, 0.15);
            border-color: rgba(247, 147, 26, 0.3);
        }

        /* Notification Banner */
        #notifContainer {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 0;
        }

        #notifContainer:not(:empty) {
            margin-bottom: 14px;
        }

        .notif-banner {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            animation: slideDown 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .notif-banner.promo {
            border-color: rgba(247, 147, 26, 0.25);
            border-top-color: rgba(247, 147, 26, 0.45);
            background: rgba(247, 147, 26, 0.06);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(247, 147, 26, 0.06), inset 0 1px 0 rgba(247, 147, 26, 0.1);
        }

        .notif-banner.warning {
            border-color: rgba(251, 191, 36, 0.25);
            border-top-color: rgba(251, 191, 36, 0.45);
            background: rgba(251, 191, 36, 0.06);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(251, 191, 36, 0.06), inset 0 1px 0 rgba(251, 191, 36, 0.1);
        }

        .notif-banner.urgent {
            border-color: rgba(248, 113, 113, 0.25);
            border-top-color: rgba(248, 113, 113, 0.45);
            background: rgba(248, 113, 113, 0.06);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(248, 113, 113, 0.08), inset 0 1px 0 rgba(248, 113, 113, 0.1);
        }

        .notif-banner.info {
            border-color: rgba(96, 165, 250, 0.25);
            border-top-color: rgba(96, 165, 250, 0.45);
            background: rgba(96, 165, 250, 0.06);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(96, 165, 250, 0.06), inset 0 1px 0 rgba(96, 165, 250, 0.1);
        }

        .notif-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
        }

        .notif-banner.promo .notif-icon {
            background: linear-gradient(135deg, #f7931a, #e8850f);
        }

        .notif-banner.warning .notif-icon {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
        }

        .notif-banner.urgent .notif-icon {
            background: linear-gradient(135deg, #f87171, #ef4444);
        }

        .notif-banner.info .notif-icon {
            background: linear-gradient(135deg, #60a5fa, #3b82f6);
        }

        .notif-content {
            flex: 1;
            min-width: 0;
        }

        .notif-title {
            font-size: 0.95em;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 4px;
        }

        .notif-message {
            font-size: 0.85em;
            color: #8b949e;
            line-height: 1.4;
        }

        .notif-close {
            background: rgba(255, 255, 255, 0.08);
            border: none;
            color: #8b949e;
            font-size: 16px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .notif-close:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .tradingview-widget-container {
            height: 600px;
            position: relative;
            touch-action: none;
        }

        .tradingview-widget-container__widget {
            height: 100% !important;
            touch-action: none;
            overflow: hidden;
        }

        .tradingview-widget-container iframe {
            touch-action: none !important;
        }

        /* Chart Bottom Row - Clock & Buttons */
        .chart-bottom-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 4px;
            width: 100%;
            position: relative;
        }

        .chart-bottom-row .chart-info-row {
            margin-top: 0;
            flex: none;
            min-width: 0;
        }

        @media (max-width: 768px) {

            /* Mobile: rapat dan muat satu baris — badge kiri | jam | badge kanan */
            .chart-bottom-row {
                gap: 8px;
                justify-content: center;
                padding: 0 4px;
            }

            .chart-bottom-row .chart-info-row {
                flex: 0 1 auto;
            }
        }

        .all-btns-row {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .header-btns-row {
            display: none;
        }

        .indicator-btn {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            color: #c4d0df;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 0.7em;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: all 0.25s ease;
        }

        .indicator-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.22);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .indicator-btn.guide {
            background: rgba(247, 147, 26, 0.1);
            border-color: rgba(247, 147, 26, 0.3);
            border-top-color: rgba(247, 147, 26, 0.5);
            color: #f7931a;
            box-shadow: 0 4px 12px rgba(247, 147, 26, 0.1), inset 0 1px 0 rgba(247, 147, 26, 0.15);
        }

        .indicator-btn.guide:hover {
            background: rgba(247, 147, 26, 0.18);
            box-shadow: 0 0 16px rgba(247, 147, 26, 0.25), inset 0 1px 0 rgba(247, 147, 26, 0.2);
        }

        .indicator-btn.chat {
            background: rgba(167, 139, 250, 0.1);
            border-color: rgba(167, 139, 250, 0.3);
            border-top-color: rgba(167, 139, 250, 0.5);
            color: #a78bfa;
            box-shadow: 0 4px 12px rgba(167, 139, 250, 0.1), inset 0 1px 0 rgba(167, 139, 250, 0.15);
        }

        .indicator-btn.chat:hover {
            background: rgba(167, 139, 250, 0.18);
            box-shadow: 0 0 16px rgba(167, 139, 250, 0.25), inset 0 1px 0 rgba(167, 139, 250, 0.2);
        }

        .chat-bubble {
            padding: 7px 11px;
            border-radius: 12px;
            font-size: 0.8em;
            max-width: 85%;
            word-break: break-word;
        }

        .chat-bubble.mine {
            background: rgba(59, 158, 255, 0.18);
            border: 1px solid rgba(59, 158, 255, 0.25);
            align-self: flex-end;
        }

        .chat-bubble.others {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            align-self: flex-start;
        }

        .chat-animal {
            font-size: 0.75em;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .chat-animal.mine {
            color: #3b9eff;
            text-align: right;
        }

        .chat-animal.others {
            color: #f7931a;
        }

        .chat-time {
            font-size: 0.68em;
            color: #6b7280;
            margin-top: 2px;
            text-align: right;
        }

        .indicator-btn.settings {
            background: rgba(59, 158, 255, 0.1);
            border-color: rgba(59, 158, 255, 0.3);
            border-top-color: rgba(59, 158, 255, 0.5);
            color: #60a5fa;
            box-shadow: 0 4px 12px rgba(59, 158, 255, 0.1), inset 0 1px 0 rgba(59, 158, 255, 0.15);
        }

        .indicator-btn.settings:hover {
            background: rgba(59, 158, 255, 0.18);
            box-shadow: 0 0 16px rgba(59, 158, 255, 0.25), inset 0 1px 0 rgba(59, 158, 255, 0.2);
        }

        .indicator-btn.calc {
            background: rgba(247, 147, 26, 0.1);
            border-color: rgba(247, 147, 26, 0.3);
            border-top-color: rgba(247, 147, 26, 0.5);
            color: #f7931a;
            box-shadow: 0 4px 12px rgba(247, 147, 26, 0.1), inset 0 1px 0 rgba(247, 147, 26, 0.15);
        }

        .indicator-btn.calc:hover {
            background: rgba(247, 147, 26, 0.18);
            box-shadow: 0 0 16px rgba(247, 147, 26, 0.25), inset 0 1px 0 rgba(247, 147, 26, 0.2);
        }

        .indicator-btn.promo {
            background: rgba(14, 203, 129, 0.1);
            border-color: rgba(14, 203, 129, 0.3);
            border-top-color: rgba(14, 203, 129, 0.5);
            color: #0ecb81;
            box-shadow: 0 4px 12px rgba(14, 203, 129, 0.1), inset 0 1px 0 rgba(14, 203, 129, 0.15);
        }

        .indicator-btn.promo:hover {
            background: rgba(14, 203, 129, 0.18);
            box-shadow: 0 0 16px rgba(14, 203, 129, 0.25), inset 0 1px 0 rgba(14, 203, 129, 0.2);
        }

        .indicator-btn.news {
            background: rgba(245, 158, 11, 0.1);
            border-color: rgba(245, 158, 11, 0.3);
            border-top-color: rgba(245, 158, 11, 0.5);
            color: #fbbf24;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1), inset 0 1px 0 rgba(245, 158, 11, 0.15);
        }

        .indicator-btn.news:hover {
            background: rgba(245, 158, 11, 0.18);
            box-shadow: 0 0 16px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(245, 158, 11, 0.2);
        }

        /* History table: kolom non-esensial disembunyikan di mobile — bisa diaktifkan
       lewat Setting > Kolom Riwayat (class hist-col-* di body) */
        .col-spread,
        .col-usdidr,
        .col-markup {}

        @media (max-width: 600px) {
            body:not(.hist-col-spread) .col-spread {
                display: none !important;
            }

            body:not(.hist-col-usdidr) .col-usdidr {
                display: none !important;
            }

            body:not(.hist-col-status) .col-markup {
                display: none !important;
            }
        }

        /* Menu Kolom Riwayat hanya relevan di mobile */
        @media (min-width: 769px) {
            #histColsRow {
                display: none !important;
            }
        }

        /* Promo Suggestions Modal */
        .promo-suggestions-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .promo-suggestions-overlay.active {
            display: flex;
        }

        .promo-suggestions-modal {
            background: rgba(10, 10, 10, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 20px;
            padding: 20px;
            width: 92%;
            max-width: 480px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .promo-suggestions-modal h3 {
            margin: 0 0 14px 0;
            font-size: 1em;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .promo-card {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 14px;
            padding: 12px 14px;
            margin-bottom: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: background 0.2s;
        }

        .promo-card:hover {
            background: rgba(255, 255, 255, 0.07);
        }

        .promo-card-code {
            font-size: 0.75em;
            font-weight: 800;
            color: #22c55e;
            letter-spacing: 0.05em;
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: 6px;
            padding: 2px 8px;
            display: inline-block;
            margin-bottom: 6px;
        }

        .promo-card-name {
            font-size: 0.8em;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px;
        }

        .promo-card-desc {
            font-size: 0.72em;
            color: #9ca3af;
            margin-bottom: 6px;
        }

        .promo-card-meta {
            display: flex;
            gap: 10px;
            font-size: 0.68em;
            color: #6b7280;
        }

        .promo-card-meta span {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .promo-copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.35);
            color: #22c55e;
            border-radius: 7px;
            padding: 4px 10px;
            font-size: 0.7em;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }

        .promo-copy-btn:hover {
            background: rgba(34, 197, 94, 0.2);
        }

        .promo-copy-btn.copied {
            background: rgba(34, 197, 94, 0.85);
            color: #fff;
            border-color: rgba(34, 197, 94, 0.9);
        }

        body.light-mode .promo-copy-btn {
            background: #dcfce7;
            border-color: #86efac;
            color: #15803d;
        }

        body.light-mode .promo-copy-btn.copied {
            background: #22c55e;
            color: #fff;
            border-color: #16a34a;
        }

        .promo-empty {
            text-align: center;
            color: #6b7280;
            font-size: 0.82em;
            padding: 20px 0;
        }

        .promo-modal-close {
            float: right;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #8b949e;
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .promo-modal-close:hover {
            background: rgba(255, 77, 77, 0.15);
            color: #ff4d4d;
            border-color: rgba(255, 77, 77, 0.3);
            box-shadow: 0 0 12px rgba(255, 77, 77, 0.2);
        }

        .promo-last-update {
            font-size: 0.65em;
            color: #6b7280;
            margin-top: 10px;
            text-align: center;
        }

        /* News XAU/USD Modal */
        .news-card {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 14px;
            padding: 10px 14px;
            margin-bottom: 8px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: background 0.2s;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .news-card.impact-high {
            border-left: 3px solid rgba(239, 68, 68, 0.8);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), -2px 0 12px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .news-card.impact-medium {
            border-left: 3px solid rgba(247, 147, 26, 0.8);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), -2px 0 12px rgba(247, 147, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .news-card.impact-low {
            border-left: 3px solid rgba(107, 114, 128, 0.6);
        }

        .news-card.past {
            background: rgba(255, 255, 255, 0.02);
            opacity: 0.45;
        }

        .news-card.past .news-title {
            color: #9ca3af;
        }

        .news-card.upcoming {
            background: rgba(14, 203, 129, 0.06);
            border-color: rgba(14, 203, 129, 0.2);
            border-top-color: rgba(14, 203, 129, 0.35);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 16px rgba(14, 203, 129, 0.06), inset 0 1px 0 rgba(14, 203, 129, 0.08);
        }

        .news-countdown {
            background: rgba(14, 203, 129, 0.15);
            color: #0ecb81;
            border-radius: 4px;
            padding: 1px 6px;
            font-size: 0.85em;
            font-weight: 600;
            white-space: nowrap;
        }

        .news-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 3px;
        }

        .news-title {
            font-size: 0.82em;
            font-weight: 700;
            color: #fff;
        }

        .news-pred {
            font-size: 0.72em;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .news-pred.pred-up {
            background: rgba(14, 203, 129, 0.18);
            color: #0ecb81;
            border: 1px solid rgba(14, 203, 129, 0.3);
        }

        .news-pred.pred-down {
            background: rgba(246, 70, 93, 0.15);
            color: #f6465d;
            border: 1px solid rgba(246, 70, 93, 0.25);
        }

        .news-bulls {
            font-size: 1em;
            min-width: 44px;
            text-align: center;
            line-height: 1;
            padding-top: 2px;
        }

        .news-body {
            flex: 1;
        }

        .news-title {
            font-size: 0.82em;
            font-weight: 700;
            color: #fff;
        }

        .news-meta {
            font-size: 0.7em;
            color: #9ca3af;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .news-meta span {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .news-values {
            font-size: 0.7em;
            color: #9ca3af;
            margin-top: 4px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .news-values .actual {
            color: #22c55e;
            font-weight: 700;
        }

        .news-section-label {
            font-size: 0.7em;
            font-weight: 700;
            color: #fbbf24;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin: 12px 0 6px;
        }

        .news-empty {
            text-align: center;
            color: #6b7280;
            font-size: 0.85em;
            padding: 20px;
        }

        .news-past-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            margin-top: 12px;
            padding: 7px 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px dashed rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            color: #8b949e;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }

        .news-past-toggle:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #d1d4dc;
        }

        body.light-mode .news-past-toggle {
            background: #f9fafb;
            border-color: #d1d5db;
            color: #6b7280;
        }

        body.light-mode .news-past-toggle:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .news-filter-row {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .news-filter-btn {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            color: #9ca3af;
            border-radius: 8px;
            padding: 4px 10px;
            font-size: 0.72em;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .news-filter-btn:hover {
            background: rgba(255, 255, 255, 0.09);
            color: #d1d4dc;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
        }

        .news-filter-btn.active {
            background: rgba(247, 147, 26, 0.1);
            border-color: rgba(247, 147, 26, 0.3);
            border-top-color: rgba(247, 147, 26, 0.5);
            color: #f7931a;
            box-shadow: 0 0 12px rgba(247, 147, 26, 0.12), inset 0 1px 0 rgba(247, 147, 26, 0.1);
        }

        /* Indicator Settings Modal */
        .indicator-settings-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .indicator-settings-overlay.active {
            display: flex;
        }

        .indicator-settings-modal {
            background: rgba(10, 10, 10, 0.88);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border-radius: 20px;
            border: 1px solid rgba(247, 147, 26, 0.2);
            border-top: 1px solid rgba(247, 147, 26, 0.4);
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.05), inset 0 1px 0 rgba(247, 147, 26, 0.12);
        }

        .indicator-settings-header {
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background: rgba(10, 10, 10, 0.92);
            backdrop-filter: blur(20px);
            border-radius: 20px 20px 0 0;
        }

        .indicator-settings-header h3 {
            color: #f7931a;
            font-size: 1.1em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .indicator-settings-body {
            padding: 20px 24px;
        }

        .indicator-settings-body p.hint {
            color: #8b949e;
            font-size: 0.8em;
            margin-bottom: 16px;
        }

        .indicator-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .indicator-item {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.25s;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .indicator-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.09);
        }

        .indicator-item.active {
            border-color: rgba(34, 197, 94, 0.35);
            border-top-color: rgba(34, 197, 94, 0.55);
            background: rgba(34, 197, 94, 0.07);
            box-shadow: 0 0 16px rgba(34, 197, 94, 0.1), inset 0 1px 0 rgba(34, 197, 94, 0.1);
        }

        .indicator-item-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .indicator-item-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
        }

        .indicator-item-details h5 {
            color: #e7e9ea;
            font-size: 0.9em;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .indicator-item-details span {
            color: #8b949e;
            font-size: 0.75em;
        }

        .ind-rec-badge {
            font-size: 0.62em;
            font-weight: 700;
            color: #f7931a;
            background: rgba(247, 147, 26, 0.12);
            border: 1px solid rgba(247, 147, 26, 0.3);
            border-radius: 5px;
            padding: 2px 6px;
            margin-left: 7px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            vertical-align: 1px;
            white-space: nowrap;
        }

        body.light-mode .ind-rec-badge {
            background: #fff7ed;
            border-color: #fdba74;
            color: #c2700f;
        }

        .indicator-toggle {
            position: relative;
            width: 44px;
            height: 24px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .indicator-toggle.active {
            background: rgba(34, 197, 94, 0.8);
            border-color: rgba(34, 197, 94, 0.6);
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .indicator-toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .indicator-toggle.active::after {
            left: 22px;
        }

        .indicator-settings-footer {
            padding: 16px 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .indicator-settings-footer button {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.85em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .indicator-settings-footer .cancel-btn {
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            color: #8b949e;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .indicator-settings-footer .cancel-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e7e9ea;
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
        }

        .indicator-settings-footer .apply-btn {
            background: rgba(247, 147, 26, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(247, 147, 26, 0.35);
            border-top: 1px solid rgba(247, 147, 26, 0.55);
            color: #f7931a;
            box-shadow: 0 4px 14px rgba(247, 147, 26, 0.15), inset 0 1px 0 rgba(247, 147, 26, 0.15);
        }

        .indicator-settings-footer .apply-btn:hover {
            background: rgba(247, 147, 26, 0.25);
            box-shadow: 0 0 18px rgba(247, 147, 26, 0.25), inset 0 1px 0 rgba(247, 147, 26, 0.2);
        }

        /* Indicator Guide Modal */
        .indicator-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-y: auto;
        }

        .indicator-modal-overlay.active {
            display: flex;
        }

        .indicator-modal {
            background: rgba(10, 10, 10, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 20px;
            border: 1px solid rgba(247, 147, 26, 0.2);
            border-top: 1px solid rgba(247, 147, 26, 0.4);
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.05), inset 0 1px 0 rgba(247, 147, 26, 0.12);
        }

        .indicator-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background: rgba(10, 10, 10, 0.9);
            backdrop-filter: blur(20px);
            border-radius: 20px 20px 0 0;
        }

        .indicator-modal-header h3 {
            color: #f7931a;
            font-size: 1.1em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .indicator-modal-close {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #8b949e;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2em;
            transition: all 0.2s;
        }

        .indicator-modal-close:hover {
            background: rgba(255, 77, 77, 0.2);
            color: #ff4d4d;
        }

        .indicator-modal-body {
            padding: 20px 24px;
        }

        .indicator-section {
            margin-bottom: 24px;
        }

        .indicator-section:last-child {
            margin-bottom: 0;
        }

        .indicator-section h4 {
            color: #ffffff;
            font-size: 0.95em;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .indicator-section h4 .badge {
            font-size: 0.7em;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: 500;
        }

        .indicator-section h4 .badge.ma {
            background: rgba(33, 150, 243, 0.2);
            color: #2196F3;
        }

        .indicator-section h4 .badge.ema {
            background: rgba(0, 188, 212, 0.2);
            color: #00BCD4;
        }

        .indicator-section h4 .badge.bb {
            background: rgba(156, 39, 176, 0.2);
            color: #9C27B0;
        }

        .indicator-section h4 .badge.vwap {
            background: rgba(255, 152, 0, 0.2);
            color: #FF9800;
        }

        .indicator-section h4 .badge.rsi {
            background: rgba(233, 30, 99, 0.2);
            color: #E91E63;
        }

        .indicator-section h4 .badge.macd {
            background: rgba(76, 175, 80, 0.2);
            color: #4CAF50;
        }

        .indicator-section h4 .badge.stoch {
            background: rgba(255, 87, 34, 0.2);
            color: #FF5722;
        }

        .indicator-section h4 .badge.atr {
            background: rgba(121, 85, 72, 0.2);
            color: #8D6E63;
        }

        .indicator-section h4 .badge.vol {
            background: rgba(96, 125, 139, 0.2);
            color: #78909C;
        }

        .indicator-section h4 .badge.ichimoku {
            background: rgba(103, 58, 183, 0.2);
            color: #7C4DFF;
        }

        .no-indicator-msg {
            text-align: center;
            padding: 40px 20px;
            color: #8b949e;
        }

        .no-indicator-msg svg {
            width: 48px;
            height: 48px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .no-indicator-msg p {
            font-size: 0.9em;
        }

        /* Gold Calculator Button */
        .calc-gold-btn {
            background: linear-gradient(135deg, #f7931a 0%, #e8850a 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 0.75em;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 12px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(247, 147, 26, 0.3);
            vertical-align: middle;
        }

        .calc-gold-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(247, 147, 26, 0.4);
        }

        /* Gold Calculator Modal */
        .calc-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .calc-modal-overlay.active {
            display: flex;
        }

        .calc-modal {
            background: rgba(10, 10, 10, 0.88);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            border-radius: 24px;
            border: 1px solid rgba(247, 147, 26, 0.2);
            border-top: 1px solid rgba(247, 147, 26, 0.45);
            max-width: 420px;
            width: 100%;
            box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06), inset 0 1px 0 rgba(247, 147, 26, 0.15);
            overflow: hidden;
        }

        .calc-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(247, 147, 26, 0.07);
        }

        .calc-modal-header h3 {
            color: #f7931a;
            font-size: 1.1em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .calc-modal-body {
            padding: 24px;
        }

        .calc-input-group {
            margin-bottom: 20px;
        }

        .calc-input-group label {
            display: block;
            color: #8b949e;
            font-size: 0.85em;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .calc-input-group input,
        .calc-input-group select {
            width: 100%;
            padding: 14px 16px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
            color: #e7e9ea;
            font-size: 1em;
            transition: all 0.25s;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .calc-input-group input:focus,
        .calc-input-group select:focus {
            outline: none;
            border-color: rgba(247, 147, 26, 0.5);
            border-top-color: rgba(247, 147, 26, 0.7);
            background: rgba(247, 147, 26, 0.07);
            box-shadow: 0 0 16px rgba(247, 147, 26, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .calc-input-group input::placeholder {
            color: #6e7681;
        }

        .calc-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }

        .calc-tab {
            flex: 1;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(8px);
            color: #8b949e;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            transition: all 0.25s;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .calc-tab:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #c4d0df;
        }

        .calc-tab.active {
            background: rgba(247, 147, 26, 0.12);
            border-color: rgba(247, 147, 26, 0.35);
            border-top-color: rgba(247, 147, 26, 0.55);
            color: #f7931a;
            box-shadow: 0 0 14px rgba(247, 147, 26, 0.15), inset 0 1px 0 rgba(247, 147, 26, 0.15);
        }

        .calc-result {
            background: rgba(34, 197, 94, 0.07);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(34, 197, 94, 0.25);
            border-top: 1px solid rgba(34, 197, 94, 0.45);
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.08), inset 0 1px 0 rgba(34, 197, 94, 0.12);
        }

        .calc-result-label {
            color: #8b949e;
            font-size: 0.8em;
            margin-bottom: 6px;
        }

        .calc-result-value {
            color: #22c55e;
            font-size: 1.5em;
            font-weight: 700;
        }

        .calc-result-sub {
            color: #8b949e;
            font-size: 0.8em;
            margin-top: 8px;
        }

        .calc-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #f7931a 0%, #e8850a 100%);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            margin-top: 16px;
            transition: all 0.2s;
        }

        .calc-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(247, 147, 26, 0.4);
        }

        .calc-current-price {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .calc-current-price span:first-child {
            color: #8b949e;
            font-size: 0.85em;
        }

        .calc-current-price span:last-child {
            color: #f7931a;
            font-weight: 600;
        }

        .calc-price-toggle {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .calc-price-option {
            flex: 1;
            background: rgba(255, 255, 255, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .calc-price-option:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .calc-price-option.active {
            border-color: #f7931a;
            background: rgba(247, 147, 26, 0.1);
        }

        .calc-price-option .price-label {
            display: block;
            color: #8b949e;
            font-size: 0.75em;
            margin-bottom: 4px;
        }

        .calc-price-option.active .price-label {
            color: #f7931a;
        }

        .calc-price-option .price-value {
            display: block;
            color: #e7e9ea;
            font-size: 1em;
            font-weight: 700;
        }

        .calc-price-option.active .price-value {
            color: #f7931a;
        }

        /* ============================================================ */
        /* Price Lock Feature (Simulasi Kunci Harga) */
        /* ============================================================ */
        #priceLockModal {
            display: none;
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 999999;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }

        .price-lock-box {
            background: linear-gradient(145deg, #161c28, #0e121a);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            width: 100%;
            max-width: 580px;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 60px rgba(0,0,0,0.85);
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        body.light-mode #priceLockModal {
            background: rgba(15, 23, 42, 0.5);
        }

        body.light-mode .price-lock-box {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #0f172a;
            box-shadow: 0 25px 60px rgba(0,0,0,0.2);
        }

        body.light-mode #priceLockDashboardView {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(245, 158, 11, 0.5) !important;
            color: #0f172a !important;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
        }

        body.light-mode #priceLockModal input,
        body.light-mode #priceLockModal select {
            background: #f8fafc !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }

        /* ===== Fitur Tombol & Modal Donasi QRIS ===== */
        .donate-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            margin-right: 4px;
            border-radius: 9999px;
            background: rgba(16, 185, 129, 0.12);
            border: 1.5px solid rgba(52, 211, 153, 0.7);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
            color: #34d399;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.6px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
        }

        .donate-btn:hover {
            background: rgba(16, 185, 129, 0.22);
            border-color: #34d399;
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
            transform: translateY(-1px);
            color: #a7f3d0;
        }

        .donate-btn:active {
            transform: translateY(0);
        }

        .donate-heart-icon {
            color: #34d399;
            transition: transform 0.2s ease;
        }

        .donate-btn:hover .donate-heart-icon {
            animation: donate-heart-beat 0.8s infinite;
        }

        @keyframes donate-heart-beat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.22); }
        }

        body.light-mode .donate-btn {
            background: rgba(16, 185, 129, 0.12);
            border-color: #059669;
            color: #047857;
            box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
        }

        body.light-mode .donate-btn:hover {
            background: rgba(16, 185, 129, 0.22);
            color: #065f46;
        }

        #donateModal {
            display: none;
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 999999;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }

        .donate-modal-box {
            background: linear-gradient(155deg, #131b2a, #0b0f17);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            width: 100%;
            max-width: 440px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
            color: #fff;
            overflow: hidden;
            position: relative;
            animation: donateModalFadeIn 0.25s ease-out;
        }

        @keyframes donateModalFadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        body.light-mode #donateModal {
            background: rgba(15, 23, 42, 0.5);
        }

        body.light-mode .donate-modal-box {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #0f172a;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
        }

        .donate-qris-card {
            background: #ffffff;
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
            color: #1e293b;
        }

        .donate-qris-img {
            width: 220px;
            height: 220px;
            object-fit: contain;
            margin: 6px auto;
            display: block;
            border-radius: 8px;
        }

        .indicator-desc {
            color: #8b949e;
            font-size: 0.85em;
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .indicator-signals {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            padding: 12px;
        }

        .signal-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .signal-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .signal-item:first-child {
            padding-top: 0;
        }

        .signal-icon {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75em;
            flex-shrink: 0;
        }

        .signal-icon.buy {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }

        .signal-icon.sell {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .signal-icon.info {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
        }

        .signal-icon.warn {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
        }

        .signal-text {
            flex: 1;
        }

        .signal-text strong {
            color: #e7e9ea;
            font-size: 0.85em;
        }

        .signal-text p {
            color: #8b949e;
            font-size: 0.8em;
            margin-top: 2px;
        }

        /* History Table */
        .history-table-wrap {
            overflow-x: auto;
        }

        .history-section {
            background: #0d0d0d;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
            transition: border-color 0.3s ease;
        }

        .history-header {
            padding: 14px 20px;
            background: #0a0a0a;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-header h2 {
            font-size: 0.88em;
            font-weight: 700;
            color: #e7e9ea;
            letter-spacing: -0.01em;
        }

        .history-header .count {
            font-size: 0.7em;
            color: #6b7280;
            font-weight: 500;
        }

        .history-table {
            width: 100%;
            border-collapse: collapse;
        }

        .history-table th {
            text-align: left;
            padding: 8px 8px;
            font-size: 0.72em;
            color: #ffffff;
            opacity: 0.6;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: rgba(255, 255, 255, 0.04);
            font-weight: 600;
            white-space: nowrap;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .history-table td {
            padding: 9px 8px;
            font-size: 0.85em;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text-heading);
            white-space: nowrap;
            font-family: 'JetBrains Mono', monospace;
            vertical-align: top;
        }

        .history-table tr:last-child td {
            border-bottom: none;
        }

        .history-table tr:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        .history-table .price-up {
            color: #4ade80;
            font-weight: 600;
        }

        .history-table .price-down {
            color: #f87171;
            font-weight: 600;
        }

        .history-table .time-col {
            color: var(--text-heading);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
            text-align: left;
        }

        .history-time {
            display: block;
        }

        .history-date {
            display: block;
            font-size: 0.72em;
            color: var(--text-primary);
            text-align: left;
            margin-top: 2px;
            white-space: nowrap;
        }

        .col-markup {
            text-align: left;
            white-space: nowrap;
        }

        .markup-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 0.72em;
            font-weight: 600;
            padding: 1px 5px;
            border-radius: 4px;
            white-space: nowrap;
        }

        .markup-normal {
            background: rgba(34, 197, 94, 0.08);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.25);
            border-top-color: rgba(34, 197, 94, 0.4);
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.1);
            backdrop-filter: blur(8px);
        }

        .markup-abnormal {
            background: rgba(245, 158, 11, 0.08);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-top-color: rgba(245, 158, 11, 0.4);
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
            backdrop-filter: blur(8px);
        }

        .history-table th.th-nominal {
            text-align: right;
        }

        .history-table td.td-nominal {
            text-align: right;
            vertical-align: top;
        }

        .history-table td.td-nominal .nom-gram {
            display: block;
            color: var(--text-primary);
            font-size: 0.8em;
        }

        .history-table td.td-nominal br {
            display: none;
        }

        .history-table td.td-nominal small {
            display: block;
        }

        .history-table .no-data {
            text-align: center;
            color: #8b949e;
            padding: 50px 20px;
            font-size: 0.95em;
        }

        .history-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            background: #0a0a0a;
        }

        .page-btn {
            background: rgba(255, 255, 255, 0.04);
            color: #d1d5db;
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 8px 18px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            font-family: inherit;
        }

        .page-btn:hover:not(:disabled) {
            background: rgba(247, 147, 26, 0.1);
            border-color: rgba(247, 147, 26, 0.35);
            color: #f7931a;
        }

        .page-btn:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }

        .page-info {
            color: #6b7280;
            font-size: 0.85em;
            font-weight: 500;
        }

        /* Animations - color based on price direction */
        .price-card.updated-up {
            animation: highlight-up 0.8s ease-out 1;
        }

        .price-card.updated-up .value {
            animation: value-up 0.8s ease-out 1;
        }

        .price-card.updated-down {
            animation: highlight-down 0.8s ease-out 1;
        }

        .price-card.updated-down .value {
            animation: value-down 0.8s ease-out 1;
        }

        .updated {
            animation: highlight 0.3s ease-out 1;
        }

        @keyframes highlight-up {

            0%,
            30% {
                background: linear-gradient(145deg, rgba(74, 222, 128, 0.25), rgba(74, 222, 128, 0.1));
                box-shadow: 0 0 30px rgba(74, 222, 128, 0.25);
            }

            100% {
                background: rgba(20, 26, 34, 0.6);
                box-shadow: none;
            }
        }

        @keyframes highlight-down {

            0%,
            30% {
                background: linear-gradient(145deg, rgba(248, 113, 113, 0.25), rgba(248, 113, 113, 0.1));
                box-shadow: 0 0 30px rgba(248, 113, 113, 0.25);
            }

            100% {
                background: rgba(20, 26, 34, 0.6);
                box-shadow: none;
            }
        }

        @keyframes highlight {
            0% {
                background: rgba(247, 147, 26, 0.25);
            }

            100% {
                background: transparent;
            }
        }

        @keyframes rowBlink {

            0%,
            100% {
                background: transparent;
            }

            20% {
                background: rgba(247, 147, 26, 0.22);
                box-shadow: inset 0 0 0 1px rgba(247, 147, 26, 0.35);
            }

            50% {
                background: rgba(247, 147, 26, 0.08);
            }

            70% {
                background: rgba(247, 147, 26, 0.18);
                box-shadow: inset 0 0 0 1px rgba(247, 147, 26, 0.28);
            }
        }

        .history-new-row {
            animation: rowBlink 0.7s ease-in-out 4;
        }

        /* Responsive - Tablet */
        @media (max-width: 768px) {
            body {
                padding: 12px;
            }

            .container {
                max-width: 100%;
            }

            /* nominal-settings-btn already visible from base style */
            .header {
                height: 42px;
                padding: 0 8px;
                gap: 6px;
                margin-bottom: 10px;
                border-radius: 4px;
            }

            .header-search-wrap {
                max-width: 110px;
                padding: 4px 8px;
                font-size: 0.75em;
            }

            .nav-icon-btn {
                width: 28px;
                height: 28px;
            }

            .header-logo {
                width: 28px;
                height: 28px;
                border-radius: 6px;
            }

            .chart-section {
                margin-bottom: 16px;
                border-radius: 4px 4px 0 0;
            }

            .chart-header {
                padding: 10px 14px;
                gap: 6px;
                border-radius: 4px 4px 0 0;
            }

            .chart-stats {
                gap: 6px;
            }

            .chart-info-row {
                padding: 8px 12px;
                margin-top: 8px;
                border-radius: 4px;
            }

            .info-time {
                font-size: 1.2em;
            }

            .info-date {
                font-size: 0.75em;
            }

            .stat-item {
                padding: 8px 12px;
                border-radius: 4px;
                column-gap: 7px;
                row-gap: 1px;
            }

            .stat-item .stat-label {
                font-size: 0.58em;
            }

            .stat-item .stat-value {
                font-size: 0.95em;
            }

            .stat-item .stat-change {
                font-size: 0.62em;
                padding: 1px 6px;
            }

            /* Mobile: kartu seragam — 2 per baris, lebar sama */
            .chart-stats>.stat-item {
                flex: 1 1 calc(50% - 6px);
                width: auto;
                min-width: 0;
            }

            .tradingview-widget-container {
                height: 400px;
            }

            .history-section {
                border-radius: 4px;
            }

            .history-header {
                padding: 12px 16px;
            }

            .history-table th {
                padding: 8px;
                font-size: 0.68em;
            }

            .history-table td {
                padding: 10px 8px;
                font-size: 0.82em;
            }

            .history-pagination {
                padding: 12px;
                gap: 10px;
            }

            .page-btn {
                padding: 7px 14px;
                font-size: 0.82em;
            }
        }

        /* Responsive - Mobile */
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .header {
                height: 40px;
                padding: 0 6px;
                gap: 5px;
                margin-bottom: 10px;
                border-radius: 4px;
            }

            .header-search-wrap {
                max-width: 90px;
                padding: 4px 7px;
            }

            .nav-icon-btn {
                width: 26px;
                height: 26px;
            }

            .header-logo {
                width: 26px;
                height: 26px;
            }

            .stat-item.clock-item {
                min-width: 110px;
            }

            .stat-item.clock-item .clock-time {
                font-size: 0.95em;
            }

            .stat-item.clock-item .clock-date {
                font-size: 0.6em;
            }

            .chart-section {
                margin-bottom: 14px;
                border-radius: 12px;
            }

            .chart-info-row {
                padding: 6px 10px;
                margin-top: 6px;
                border-radius: 8px;
            }

            .info-time {
                font-size: 1.1em;
            }

            .info-date {
                font-size: 0.7em;
            }

            .chart-header {
                padding: 10px 12px;
                gap: 6px;
                border-radius: 12px 12px 0 0;
            }

            .chart-title {
                gap: 8px;
            }

            .chart-header h2 {
                font-size: 0.9em;
            }

            .live-badge {
                font-size: 0.6em;
                padding: 3px 8px;
            }

            /* Mobile: grid 2 kolom untuk stat cards */
            .chart-stats {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5px;
                padding: 0 8px;
            }

            .chart-stats>.stat-item:not(.invest) {
                padding: 4px 8px;
                border-radius: 7px;
                min-width: 0;
                overflow: hidden;
                column-gap: 5px;
                row-gap: 0;
            }

            .chart-stats>.stat-item:not(.invest) .stat-label {
                font-size: 0.5em;
                flex: 0 0 100%;
            }

            .chart-stats>.stat-item:not(.invest) .stat-value {
                font-size: 0.72em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .chart-stats>.stat-item:not(.invest) .stat-change {
                font-size: 0.52em;
                padding: 1px 4px;
                min-height: 1.3em;
            }

            #buyCard .stat-value,
            #sellCard .stat-value {
                white-space: nowrap;
                overflow: hidden;
            }

            /* Titik ON: sembunyikan teks "harga beli" di mobile agar nilai (Rp ...) tampil penuh */
            #lowestOnCard .stat-change {
                display: none;
            }

            #lowestOnCard .stat-value {
                flex: 1;
                text-align: center;
                overflow: visible;
            }

            /* Center badge when alone in last row of 2-col grid (set via JS) */
            .chart-stats>.stat-item.stat-alone {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc(50% - 2px);
            }

            .tradingview-widget-container {
                height: 350px;
            }

            /* Mobile: invest stats wrap */
            .invest-stats {
                overflow-x: hidden;
                align-items: flex-start;
                padding: 4px 12px 8px;
                gap: 6px;
            }

            #investStatsList {
                flex: 1;
                display: grid;
                gap: 5px;
                min-width: 0;
            }

            /* 1 nominal → tunggal, di tengah */
            #investStatsList.nom-1 {
                grid-template-columns: 1fr;
                justify-items: center;
            }

            /* 1 nominal: chip menyesuaikan lebar konten & di tengah (hindari +Rp terpotong) */
            #investStatsList.nom-1 .stat-item.invest {
                width: auto;
                max-width: 100%;
                justify-content: center;
                gap: 6px;
            }

            /* 2 nominal → kiri-kanan, berapa pun nominalnya */
            #investStatsList.nom-2 {
                grid-template-columns: 1fr 1fr;
            }

            /* >2 nominal → grid 2 kolom, item ganjil terakhir penuh & di tengah */
            #investStatsList.nom-many {
                grid-template-columns: 1fr 1fr;
            }

            #investStatsList.nom-many .stat-item.invest:last-child:nth-child(odd) {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc(50% - 2.5px);
            }

            .invest-stats .stat-item.invest {
                flex: unset;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: 4px 6px;
                gap: 2px;
                min-width: 0;
                overflow: visible;
            }

            .invest-stats .stat-item.invest .stat-label {
                font-size: 0.5em;
                font-weight: 700;
                color: #f7931a;
                flex-shrink: 0;
            }

            /* Gram tampil penuh (tanpa ellipsis), font dikecilkan agar muat bersama +Rp */
            .invest-stats .stat-item.invest .stat-value {
                font-size: 0.5em;
                font-weight: 600;
                color: #eef3fa;
                white-space: nowrap;
                overflow: visible;
                flex: 0 1 auto;
                text-align: center;
            }

            /* +Rp tampil penuh */
            .invest-stats .stat-item.invest .stat-change {
                font-size: 0.5em;
                padding: 1px 3px;
                align-self: center;
                margin-top: 0;
                flex-shrink: 0;
                white-space: nowrap;
            }

            .nominal-settings-btn {
                width: 26px;
                height: 26px;
                border-radius: 6px;
            }

            #historyFontSettingsBtn {
                display: flex;
            }

            .nominal-settings-btn svg {
                width: 12px;
                height: 12px;
            }

            /* Responsive buttons */
            .chart-bottom-row {
                flex-direction: row;
                gap: 6px;
                margin-top: 4px;
                align-items: center;
                justify-content: center;
            }

            .indicator-btn {
                padding: 3px 8px;
                font-size: 0.58em;
            }

            .history-section {
                border-radius: 4px;
                margin-top: 0;
            }

            .history-header {
                padding: 10px 14px;
                flex-wrap: wrap;
                gap: 6px;
            }

            .history-header h2 {
                font-size: 0.82em;
            }

            .history-header h2 svg {
                width: 11px;
                height: 11px;
            }

            .history-header>div {
                gap: 6px;
            }

            /* Mobile card layout */
            .history-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .history-table {
                display: block;
                min-width: max-content;
                width: 100%;
            }

            .history-table thead,
            .history-table tbody {
                display: block;
                min-width: max-content;
            }

            .history-table thead tr {
                background: rgba(0, 0, 0, 0.2);
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            }

            body.light-mode .history-table thead tr {
                background: #fff;
                border-bottom: 1px solid #e0e0e0;
            }

            .history-table tr {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0 4px;
                padding: 2px 8px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

            .history-table th {
                display: block;
                border: none;
                padding: 0;
                font-size: 0.55em;
                color: #8b949e;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                font-weight: 600;
                white-space: nowrap;
            }

            .history-table th:first-child {
                width: 72px;
                flex-shrink: 0;
            }

            .history-table th:nth-child(2) {
                min-width: 105px;
                flex: 0 0 auto;
            }

            .history-table th:nth-child(3) {
                min-width: 100px;
                flex: 0 0 auto;
            }

            .history-table th.th-nominal {
                width: 72px;
                flex: 0 0 72px;
                text-align: right;
            }

            body:not(.hist-col-spread) .history-table th.col-spread {
                display: none;
            }

            body:not(.hist-col-usdidr) .history-table th.col-usdidr {
                display: none;
            }

            body:not(.hist-col-status) .history-table th.col-markup {
                display: none;
            }

            .history-table th.col-spread,
            .history-table th.col-usdidr,
            .history-table th.col-markup {
                min-width: 62px;
                flex: 0 0 auto;
            }

            .history-table td {
                display: block;
                border: none;
                padding: 0;
                font-size: 0.65em;
                white-space: nowrap;
            }

            .history-table td.time-col {
                color: #9ca3af;
                font-size: 0.62em;
                width: 72px;
                flex-shrink: 0;
                overflow: hidden;
            }

            .history-table td:nth-child(2) {
                font-weight: 700;
                min-width: 105px;
                flex: 0 0 auto;
            }

            .history-table td:nth-child(3) {
                color: #9ca3af;
                min-width: 100px;
                flex: 0 0 auto;
            }

            .history-table td.td-nominal {
                font-size: 0.62em;
                width: 72px;
                flex: 0 0 72px;
                text-align: right;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                line-height: 1.3;
            }

            .history-table td.td-nominal .nom-gram {
                color: var(--text-primary);
                font-size: 0.9em;
                width: 100%;
                text-align: right;
            }

            .history-table td.td-nominal br {
                display: none;
            }

            .history-table td.td-nominal small {
                display: block;
                width: 100%;
                text-align: right;
            }

            body:not(.hist-col-spread) .history-table td.col-spread {
                display: none;
            }

            body:not(.hist-col-usdidr) .history-table td.col-usdidr {
                display: none;
            }

            body:not(.hist-col-status) .history-table td.col-markup {
                display: none;
            }

            .history-table td.col-spread,
            .history-table td.col-usdidr,
            .history-table td.col-markup {
                min-width: 62px;
                flex: 0 0 auto;
                font-size: 0.62em;
            }

            .history-pagination {
                padding: 10px 12px;
                gap: 8px;
                flex-wrap: wrap;
            }

            .page-btn {
                padding: 7px 12px;
                font-size: 0.8em;
            }

            .page-info {
                font-size: 0.78em;
            }

            /* Chat modal responsive */
            #chatModal .promo-suggestions-modal {
                width: 98%;
                max-width: 100%;
                height: 90vh;
                max-height: 90vh;
                border-radius: 12px;
                padding: 14px;
            }

            #chatModal .promo-suggestions-modal h3 {
                font-size: 0.9em;
                gap: 6px;
            }

            #chatInput {
                font-size: 0.85em;
                padding: 9px 10px;
            }
        }

        /* Extra small screens */
        @media (max-width: 360px) {
            body {
                padding: 8px;
            }

            .header {
                padding: 8px 10px;
                margin-bottom: 8px;
            }

            .header-left h1 {
                font-size: 0.85em;
            }

            .clock {
                font-size: 1.1em;
            }

            .chart-header {
                padding: 10px 12px;
                gap: 8px;
            }

            .chart-header h2 {
                font-size: 0.9em;
            }

            .stat-item {
                padding: 6px 10px;
                gap: 4px;
            }

            .stat-item .stat-label {
                font-size: 0.6em;
            }

            .stat-item .stat-value {
                font-size: 0.85em;
            }

            .stat-item .stat-change {
                font-size: 0.5em;
            }

            .tradingview-widget-container {
                height: 280px;
            }

            .history-table th,
            .history-table td {
                padding: 4px 6px;
            }
        }

        /* Mobile Landscape - kotak Beli/Jual lebih besar */
        @media (orientation: landscape) and (max-height: 500px) {

            #buyCard .stat-label,
            #sellCard .stat-label {
                font-size: 0.82em;
            }

            #buyCard .stat-value:not([style*="font-size"]),
            #sellCard .stat-value:not([style*="font-size"]) {
                font-size: 1.15em;
                white-space: nowrap;
            }

            #buyCard .stat-change:not([style*="font-size"]),
            #sellCard .stat-change:not([style*="font-size"]) {
                font-size: 0.72em;
            }

            .chart-stats>.stat-item:not(.invest) {
                padding: 10px 16px;
                gap: 8px;
                border-radius: 10px;
            }

            .chart-stats>.stat-item:not(.invest) .stat-label {
                font-size: 0.82em;
            }

            .chart-stats>.stat-item:not(.invest) .stat-value:not([style*="font-size"]) {
                font-size: 1.15em;
            }

            .chart-stats>.stat-item:not(.invest) .stat-change:not([style*="font-size"]) {
                font-size: 0.72em;
                padding: 2px 6px;
            }
        }

        /* Transisi smooth saat ganti mode (elemen yang belum punya transition) */
        .chart-info-row,
        .price-high-overlay,
        .price-low-overlay,
        .markup-overlay,
        .spread-overlay,
        .limit-label,
        .promo-status-badge,
        .history-table th,
        .history-table td,
        .history-section,
        .news-card,
        .promo-card,
        .invest-stats .stat-item,
        .info-time,
        .info-date,
        .stat-label,
        .stat-value,
        .stat-change,
        .markup-overlay-text,
        .spread-overlay-text,
        .price-highlow-text,
        .count,
        .page-btn,
        .page-info {
            transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
        }

        /* Matikan glow blob, backdrop-filter, text-shadow, glow animations di light mode */
        body.light-mode::before,
        body.light-mode::after {
            display: none;
        }

        body.light-mode *,
        body.light-mode *::before,
        body.light-mode *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            text-shadow: none !important;
        }

        /* Subtle light shadow untuk container non-glow */
        body.light-mode .chart-section {
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        }

        body.light-mode .header {
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        }

        body.light-mode .stat-item {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .history-section {
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        }

        /* Glow aktif: border warna penuh (merah/hijau) + ring tipis, tanpa dark shadow & animasi */
        body.light-mode .glow-up {
            border-color: #22c55e !important;
            box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.45), 0 1px 6px rgba(0, 0, 0, 0.06) !important;
            animation: none !important;
        }

        body.light-mode .glow-down {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), 0 1px 6px rgba(0, 0, 0, 0.06) !important;
            animation: none !important;
        }

        body.light-mode .updated-up,
        body.light-mode .updated-down,
        body.light-mode .updated {
            box-shadow: none !important;
            animation: none !important;
        }

        body.light-mode .nominal-modal,
        body.light-mode .promo-suggestions-modal,
        body.light-mode .calc-modal,
        body.light-mode .indicator-modal,
        body.light-mode .indicator-settings-modal,
        body.light-mode .confirm-box,
        body.light-mode .toast,
        body.light-mode .notif-banner,
        body.light-mode .sound-panel {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        }

        body.light-mode .indicator-btn {
            box-shadow: none !important;
        }

        body.light-mode .nav-icon-btn {
            color: #6b7280;
        }

        body.light-mode .nav-icon-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #374151;
        }

        body.light-mode .nav-menu-dropdown {
            background: #ffffff;
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        body.light-mode .nav-menu-item {
            color: #374151;
        }

        body.light-mode .nav-menu-item:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #111827;
        }

        body.light-mode .nav-menu-divider {
            background: rgba(0, 0, 0, 0.1);
        }

        body.light-mode .nav-menu-logout {
            color: #dc2626;
        }

        body.light-mode .header-search-wrap {
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.12);
        }

        body.light-mode #soundToggle svg {
            color: #15803d;
        }

        body.light-mode #soundToggle.partial svg {
            color: #b45309;
        }

        body.light-mode #soundToggle.off svg {
            color: #dc2626;
        }

        /* History mode select — dark mode default */
        #historyModeSelect {
            background: #22272e;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 7px;
            padding: 3px 8px;
            color: #e6edf3;
            font-size: 0.75em;
            cursor: pointer;
            outline: none;
            -webkit-appearance: auto;
            appearance: auto;
        }

        #historyModeSelect option {
            background: #22272e;
            color: #e6edf3;
        }

        body.light-mode #historyModeSelect {
            background: #fff !important;
            border-color: #d1d5db !important;
            color: #374151 !important;
        }

        body.light-mode #historyModeSelect option {
            background: #fff !important;
            color: #374151 !important;
        }

        /* Mobile: sembunyikan select, tampilkan badge button */
        #historyModeMobileWrap {
            display: none;
            position: relative;
        }

        #historyModeMobileBtn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            border-radius: 7px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary, #e6edf3);
            font-size: 0.72em;
            cursor: pointer;
            white-space: nowrap;
        }

        body.light-mode #historyModeMobileBtn {
            background: #fff !important;
            border-color: #d1d5db !important;
            color: #374151 !important;
        }

        .hist-mode-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            z-index: 60;
            min-width: 130px;
            background: #1c2128;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }

        .hist-mode-dropdown.open {
            display: block;
        }

        .hist-mode-dropdown button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 12px;
            background: transparent;
            border: none;
            color: #e6edf3;
            font-size: 0.78em;
            cursor: pointer;
            white-space: nowrap;
        }

        .hist-mode-dropdown button:hover,
        .hist-mode-dropdown button.active {
            background: rgba(247, 147, 26, 0.15);
            color: #f7931a;
        }

        body.light-mode .hist-mode-dropdown {
            background: #fff;
            border-color: #d1d5db;
        }

        body.light-mode .hist-mode-dropdown button {
            color: #374151;
        }

        body.light-mode .hist-mode-dropdown button:hover,
        body.light-mode .hist-mode-dropdown button.active {
            background: #fef3c7;
            color: #92400e;
        }

        @media (max-width: 480px) {
            #historyModeSelect {
                display: none !important;
            }

            #historyModeMobileWrap {
                display: inline-block;
            }
        }

        /* Font settings panel — override inline dark styles */
        body.light-mode #historyFontSettingsBtn {
            background: #fff !important;
            border-color: #d1d5db !important;
            color: #374151 !important;
        }

        body.light-mode #historyFontPanel {
            background: #fff !important;
            border-color: #e5e7eb !important;
        }

        body.light-mode #historyFontPanel span[style*="color:#8b949e"] {
            color: #374151 !important;
        }

        body.light-mode #historyFontPanel button[style*="color:#fff"] {
            background: #ffffff !important;
            border-color: #d1d5db !important;
            color: #374151 !important;
        }

        body.light-mode #historyFontPanel button[style*="color:#8b949e"] {
            color: #374151 !important;
        }

        body.light-mode #historyFontPanel span[style*="color:#f7931a"] {
            color: #c2700f !important;
        }

        body.light-mode #historyFontPanel div[style*="border-top:1px solid rgba(255,255,255"] {
            border-top-color: #e5e7eb !important;
        }

        body.light-mode #historyFontPanel button[style*="background:rgba(255,255,255,0.08)"][style*="color:#8b949e"] {
            background: #fff !important;
            border-color: #d1d5db !important;
            color: #374151 !important;
        }

        /* Invest stats boxes — kuning */
        body.light-mode .invest-stats {
            background: transparent;
        }

        body.light-mode .invest-stats .stat-item,
        body.light-mode .invest-stats .stat-item.invest {
            background: #fef3c7 !important;
            border-color: #f59e0b !important;
            border-top-color: #d97706 !important;
            box-shadow: none !important;
        }

        body.light-mode .invest-stats .stat-item:hover {
            background: #fde68a !important;
            border-color: #d97706 !important;
        }

        body.light-mode .invest-stats .stat-item .stat-label,
        body.light-mode .invest-stats .stat-item.invest .stat-label {
            color: #713f12 !important;
            font-weight: 700;
        }

        body.light-mode .invest-stats .stat-item .stat-value,
        body.light-mode .invest-stats .stat-item.invest .stat-value {
            color: #422006 !important;
            font-weight: 600;
        }

        body.light-mode .invest-stats .stat-item .stat-change.up {
            color: #14532d !important;
            background: #dcfce7 !important;
            border-color: #86efac !important;
            font-weight: 700;
        }

        body.light-mode .invest-stats .stat-item .stat-change.down {
            color: #7f1d1d !important;
            background: #fee2e2 !important;
            border-color: #fca5a5 !important;
            font-weight: 700;
        }

        /* ===== LIGHT MODE OVERRIDES ===== */
        body.light-mode .header {
            background: #f8f9fc;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-color: #e0e0e0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        }

        /* Chart section */
        body.light-mode .chart-section {
            background: #ffffff;
            border-color: #e5e7eb;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .chart-header {
            background: #f9fafb;
            border-color: #e5e7eb;
        }

        body.light-mode .history-section {
            background: #ffffff !important;
            border-color: #e5e7eb !important;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        }

        body.light-mode .history-header {
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        body.light-mode .history-header h2 {
            color: #111827 !important;
        }

        body.light-mode .history-header .count {
            color: #6b7280 !important;
        }

        body.light-mode .history-pagination {
            background: #f9fafb;
            border-color: #e5e7eb;
        }

        body.light-mode .page-btn {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
        }

        body.light-mode .page-btn:hover:not(:disabled) {
            background: #fff7ed;
            border-color: #f7931a;
            color: #ea580c;
        }

        body.light-mode .stat-item {
            background: #ffffff;
            border-color: #e5e7eb;
            border-top-width: 2px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .stat-item:hover {
            background: #f9fafb;
        }

        body.light-mode .stat-item .stat-label {
            color: #6b7280;
        }

        body.light-mode .stat-item .stat-value {
            color: #111827;
        }

        body.light-mode .stat-item.price-up .stat-value {
            color: #15803d;
        }

        body.light-mode .stat-item.price-down .stat-value {
            color: #dc2626;
        }

        body.light-mode .stat-item .stat-change.up {
            color: #15803d;
            background: rgba(22, 163, 74, 0.1);
        }

        body.light-mode .stat-item .stat-change.down {
            color: #dc2626;
            background: rgba(239, 68, 68, 0.1);
        }

        body.light-mode .chart-header h2 {
            color: #111;
        }

        body.light-mode .invest-stats {
            background: #fff;
        }

        /* Stat items */
        body.light-mode .stat-item {
            background: #fff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-color: #e0e0e0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .stat-item:hover {
            background: #fff;
            border-color: #bbb;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
        }

        body.light-mode .stat-item .stat-label {
            color: #444;
            opacity: 1;
        }

        body.light-mode .stat-item .stat-value {
            color: #111;
            text-shadow: none;
        }

        body.light-mode .stat-item .stat-value.green {
            color: #1a7a5e;
            text-shadow: none;
        }

        body.light-mode .stat-item .stat-value.blue {
            color: #1d5fa8;
            text-shadow: none;
        }

        body.light-mode .stat-item.price-up {
            border-color: #22c55e;
            border-top-color: #16a34a;
            box-shadow: none;
        }

        body.light-mode .stat-item.price-up .stat-value {
            color: #15803d;
            text-shadow: none;
        }

        body.light-mode .stat-item.price-down {
            border-color: #f87171;
            border-top-color: #dc2626;
            box-shadow: none;
        }

        body.light-mode .stat-item.price-down .stat-value {
            color: #dc2626;
            text-shadow: none;
        }

        body.light-mode .stat-item .stat-change.up {
            color: #15803d;
            background: #dcfce7;
            border-color: #bbf7d0;
        }

        body.light-mode .stat-item .stat-change.down {
            color: #dc2626;
            background: #fee2e2;
            border-color: #fecaca;
        }

        /* Kotak Beli/Jual/USD-IDR — warna solid per kartu (light mode) */
        body.light-mode #buyCard {
            background: #bbf7d0 !important;
            border-color: #22c55e !important;
            border-top-color: #16a34a !important;
        }

        body.light-mode #buyCard .stat-label {
            color: #14532d;
        }

        body.light-mode #buyCard .stat-value,
        body.light-mode #buyCard .stat-value * {
            color: #14532d !important;
        }

        body.light-mode #sellCard {
            background: #bfdbfe !important;
            border-color: #3b82f6 !important;
            border-top-color: #2563eb !important;
        }

        body.light-mode #sellCard .stat-label {
            color: #1e3a8a;
        }

        body.light-mode #sellCard .stat-value,
        body.light-mode #sellCard .stat-value * {
            color: #1e3a8a !important;
        }

        body.light-mode #usdIdrCard {
            background: #ddd6fe !important;
            border-color: #8b5cf6 !important;
            border-top-color: #7c3aed !important;
        }

        body.light-mode #usdIdrCard .stat-label {
            color: #4c1d95;
        }

        body.light-mode #usdIdrCard .stat-value,
        body.light-mode #usdIdrCard .stat-value * {
            color: #4c1d95 !important;
        }

        body.light-mode #lowestOnCard {
            background: #d1fae5 !important;
            border-color: #10b981 !important;
            border-top-color: #059669 !important;
            box-shadow: none !important;
        }

        body.light-mode #lowestOnCard .stat-label {
            color: #065f46 !important;
        }

        body.light-mode #lowestOnCard .stat-value {
            color: #065f46 !important;
        }

        /* Change badge di kotak berwarna — putih agar kontras */
        body.light-mode #buyCard .stat-change,
        body.light-mode #sellCard .stat-change,
        body.light-mode #usdIdrCard .stat-change {
            background: #fff !important;
        }

        body.light-mode #buyCard .stat-change.up,
        body.light-mode #sellCard .stat-change.up,
        body.light-mode #usdIdrCard .stat-change.up {
            color: #15803d !important;
            border-color: #86efac !important;
        }

        body.light-mode #buyCard .stat-change.down,
        body.light-mode #sellCard .stat-change.down,
        body.light-mode #usdIdrCard .stat-change.down {
            color: #b91c1c !important;
            border-color: #fca5a5 !important;
        }

        /* Chart bottom row — clock/date/OFF box netral (dark glass setara di light mode) */
        body.light-mode .chart-info-row {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        body.light-mode .info-time {
            color: #0f172a;
            text-shadow: none;
        }

        body.light-mode .clk-h {
            color: #0f172a;
        }

        body.light-mode .clk-m {
            color: #b45309;
        }

        body.light-mode .clk-s {
            color: #15803d;
        }

        body.light-mode .clk-s.clk-s-alert {
            color: #dc2626 !important;
        }

        body.light-mode .clk-sep {
            color: rgba(15, 23, 42, 0.4);
        }

        body.light-mode .info-date {
            color: #1e293b;
        }

        body.light-mode .price-high-overlay {
            background: #bbf7d0;
            border-color: #22c55e;
            box-shadow: none;
        }

        body.light-mode .price-high-overlay span:last-child {
            color: #14532d;
        }

        body.light-mode .price-low-overlay {
            background: #fecaca;
            border-color: #ef4444;
            box-shadow: none;
        }

        body.light-mode .price-low-overlay span:last-child {
            color: #7f1d1d;
        }

        body.light-mode .price-highlow-text {
            color: #374151;
            font-weight: 600;
        }

        body.light-mode .markup-overlay {
            background: #fed7aa;
            border-color: #f97316;
            box-shadow: none;
        }

        body.light-mode .markup-overlay-text {
            color: #7c2d12;
            font-weight: 600;
        }

        body.light-mode #markupOverlayValue {
            color: #7c2d12;
            font-weight: 700;
        }

        body.light-mode .spread-overlay {
            background: #bbf7d0;
            border-color: #22c55e;
            box-shadow: none;
        }

        body.light-mode .spread-overlay-text {
            color: #14532d;
            font-weight: 600;
        }

        body.light-mode #spreadPercent {
            color: #14532d;
            font-weight: 700;
        }

        /* Badge ON/OFF di light mode tetap glossy — gradasi sama dengan dark mode */
        body.light-mode .promo-status-badge.off {
            box-shadow: 0 0 12px rgba(244, 59, 59, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }

        body.light-mode .promo-status-badge.on {
            box-shadow: 0 0 12px rgba(0, 230, 118, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        body.light-mode .limit-label {
            background: #fed7aa;
            border-color: #f97316;
            box-shadow: none;
        }

        body.light-mode .limit-label .limit-text {
            color: #7c2d12;
            font-weight: 600;
        }

        body.light-mode .limit-label #promoLimitValue {
            color: #7c2d12;
            font-weight: 700;
        }

        /* Stat items — price up/down lebih solid */
        body.light-mode .stat-item.price-up {
            background: #f0fdf4;
            border-color: #16a34a;
            border-top-color: #15803d;
        }

        body.light-mode .stat-item.price-down {
            background: #fef2f2;
            border-color: #dc2626;
            border-top-color: #b91c1c;
        }

        /* Indicator buttons — solid, no dark shadow */
        body.light-mode .indicator-btn {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            transform: none;
        }

        body.light-mode .indicator-btn:hover {
            background: #f5f5f5;
            border-color: #9ca3af;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            transform: translateY(-1px);
        }

        body.light-mode .indicator-btn.promo {
            background: #d1fae5;
            border-color: #10b981;
            border-top-color: #059669;
            color: #065f46;
            box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
        }

        body.light-mode .indicator-btn.promo:hover {
            background: #a7f3d0;
            border-color: #059669;
        }

        body.light-mode .indicator-btn.news {
            background: #fef3c7;
            border-color: #f59e0b;
            border-top-color: #d97706;
            color: #78350f;
            box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);
        }

        body.light-mode .indicator-btn.news:hover {
            background: #fde68a;
            border-color: #d97706;
        }

        body.light-mode .indicator-btn.settings {
            background: #dbeafe;
            border-color: #3b82f6;
            border-top-color: #2563eb;
            color: #1e3a8a;
            box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
        }

        body.light-mode .indicator-btn.settings:hover {
            background: #bfdbfe;
            border-color: #2563eb;
        }

        body.light-mode .indicator-btn.calc {
            background: #ffedd5;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #7c2d12;
            box-shadow: 0 1px 4px rgba(249, 115, 22, 0.2);
        }

        body.light-mode .indicator-btn.calc:hover {
            background: #fed7aa;
            border-color: #ea580c;
        }

        body.light-mode .indicator-btn.guide {
            background: #ffedd5;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #7c2d12;
        }

        body.light-mode .indicator-btn.chat {
            background: #ede9fe;
            border-color: #8b5cf6;
            border-top-color: #7c3aed;
            color: #4c1d95;
        }

        body.light-mode .nominal-settings-btn {
            background: #ffedd5;
            border-color: #f97316;
            color: #7c2d12;
        }

        /* Indicator settings modal — solid */
        body.light-mode .indicator-settings-modal {
            background: #fff;
            border-color: #e0e0e0;
        }

        body.light-mode .indicator-settings-header {
            background: #fff;
            border-color: #e5e7eb;
        }

        body.light-mode .indicator-settings-header h3 {
            color: #111;
        }

        body.light-mode .indicator-settings-body p.hint {
            color: #6b7280;
        }

        body.light-mode .indicator-item {
            background: #fff;
            border-color: #e0e0e0;
            border-top-color: #d1d5db;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .indicator-item:hover {
            background: #fff;
            border-color: #d1d5db;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        body.light-mode .indicator-item.active {
            background: #f0fdf4;
            border-color: #22c55e;
            border-top-color: #16a34a;
            box-shadow: 0 1px 4px rgba(34, 197, 94, 0.15);
        }

        body.light-mode .indicator-item-details h5 {
            color: #111;
        }

        body.light-mode .indicator-item-details span {
            color: #6b7280;
        }

        body.light-mode .indicator-toggle {
            background: #e5e7eb;
            border-color: #d1d5db;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        body.light-mode .indicator-toggle.active {
            background: #22c55e;
            border-color: #16a34a;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
        }

        body.light-mode .indicator-settings-footer {
            border-color: #e5e7eb;
        }

        body.light-mode .indicator-settings-footer .cancel-btn {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
            box-shadow: none;
        }

        body.light-mode .indicator-settings-footer .cancel-btn:hover {
            background: #f5f5f5;
            color: #111;
            box-shadow: none;
        }

        body.light-mode .indicator-settings-footer .apply-btn {
            background: #fff7ed;
            border-color: #f7931a;
            border-top-color: #e8850f;
            color: #c2700f;
            box-shadow: none;
        }

        body.light-mode .indicator-settings-footer .apply-btn:hover {
            background: #ffedd5;
            box-shadow: none;
        }

        body.light-mode .indicator-settings-header h3 {
            color: #c2700f;
        }

        body.light-mode .sound-toggle-header {
            background: #bbf7d0;
            border-color: #22c55e;
            border-top-color: #16a34a;
            box-shadow: 0 2px 6px rgba(22, 163, 74, 0.2);
        }

        body.light-mode .sound-toggle-header svg {
            color: #14532d;
        }

        body.light-mode .sound-toggle-header.partial {
            background: #fef3c7;
            border-color: #f59e0b;
            border-top-color: #d97706;
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
        }

        body.light-mode .sound-toggle-header.partial svg {
            color: #78350f;
        }

        body.light-mode .sound-toggle-header.off {
            background: #fecaca;
            border-color: #ef4444;
            border-top-color: #dc2626;
            box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
        }

        body.light-mode .sound-toggle-header.off svg {
            color: #7f1d1d;
        }

        body.light-mode .theme-toggle-btn {
            background: #fef08a;
            border-color: #facc15;
            border-top-color: #eab308;
            color: #713f12;
            box-shadow: 0 2px 6px rgba(202, 138, 4, 0.25);
        }

        body.light-mode .theme-toggle-btn:hover {
            background: #fde047;
            border-color: #ca8a04;
        }

        body.light-mode .logout-btn {
            background: #fecaca;
            border-color: #ef4444;
            border-top-color: #dc2626;
            color: #7f1d1d;
            box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
        }

        body.light-mode .logout-btn:hover {
            background: #fca5a5;
            border-color: #dc2626;
        }

        body.light-mode .live-badge {
            background: #dcfce7;
            color: #15803d;
            border-color: #86efac;
        }

        body.light-mode .calc-btn-header {
            background: #fef3c7;
            border-color: #fcd34d;
            color: #b45309;
        }

        /* Teks */
        body.light-mode .rp-prefix {
            color: #333;
            opacity: 1;
        }

        /* History section */
        body.light-mode .history-section {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        body.light-mode .history-header {
            border-color: #e0e0e0;
        }

        body.light-mode .history-header h2 {
            color: #111;
        }

        body.light-mode .history-table th {
            background: #fff;
            color: #111;
            border-color: #d1d5db;
            opacity: 1;
        }

        body.light-mode .history-table td {
            color: #111;
            border-color: #e5e7eb;
        }

        body.light-mode .history-table td.time-col,
        body.light-mode .history-table td:nth-child(3) {
            color: #111 !important;
        }

        body.light-mode .history-table tr:hover {
            background: #fff;
        }

        body.light-mode .history-table tr:last-child td {
            border-bottom: none;
        }

        body.light-mode .history-table .time-col {
            color: #111;
        }

        body.light-mode .history-date {
            color: #111;
        }

        body.light-mode .history-table .no-data {
            color: #333;
        }

        /* Warna harga naik/turun lebih solid */
        body.light-mode .history-table .price-up {
            color: #15803d;
            font-weight: 700;
        }

        body.light-mode .history-table .price-down {
            color: #b91c1c;
            font-weight: 700;
        }

        /* Status badge MARKDOWN/MARKUP lebih solid */
        body.light-mode .markup-normal {
            background: #bbf7d0;
            color: #14532d;
            border-color: #22c55e;
            border-top-color: #16a34a;
            box-shadow: none;
        }

        body.light-mode .markup-abnormal {
            background: #fef3c7;
            color: #78350f;
            border-color: #f59e0b;
            border-top-color: #d97706;
            box-shadow: none;
        }

        /* Nominal kolom */
        body.light-mode .history-table td.td-nominal .nom-gram {
            color: #111;
            font-weight: 500;
        }

        body.light-mode .history-table td.td-nominal small {
            font-weight: 600;
        }

        body.light-mode .history-table td.td-nominal small.price-up {
            color: #15803d;
        }

        body.light-mode .history-table td.td-nominal small.price-down {
            color: #b91c1c;
        }

        /* Pagination */
        body.light-mode .history-pagination {
            background: #fff;
            border-color: #e0e0e0;
        }

        body.light-mode .page-btn {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
        }

        body.light-mode .page-btn:hover {
            background: #f5f5f5;
            border-color: #9ca3af;
        }

        body.light-mode .page-btn.active {
            background: #f97316;
            border-color: #f97316;
            color: #fff;
        }

        body.light-mode .page-btn:not(.active) {
            color: #374151 !important;
        }

        body.light-mode .page-info {
            color: #374151 !important;
        }

        body.light-mode #pageJumpInput {
            color: #374151 !important;
            background: #fff !important;
            border-color: #d1d5db !important;
        }

        body.light-mode .count {
            color: #374151;
            font-weight: 600;
        }

        /* Modals */
        /* Nominal modal — solid */
        body.light-mode .nominal-modal {
            background: #fff;
            border-color: #e0e0e0;
        }

        body.light-mode .nominal-modal h3 {
            color: #c2700f;
        }

        body.light-mode .nominal-modal-item {
            background: #fff;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #222;
        }

        body.light-mode .nominal-modal-item:hover {
            background: #fff7ed;
            border-color: #ea580c;
        }

        body.light-mode .nominal-modal-item label {
            color: #111;
            font-weight: 600;
        }

        body.light-mode .nominal-modal-item .nominal-discount {
            color: #c2700f;
            font-weight: 500;
        }

        body.light-mode .nominal-modal-actions .btn-cancel {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
        }

        body.light-mode .nominal-modal-actions .btn-cancel:hover {
            background: #f5f5f5;
            color: #111;
        }

        body.light-mode .nominal-modal-actions .btn-save {
            background: #ffedd5;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #c2700f;
        }

        body.light-mode .nominal-modal-actions .btn-save:hover {
            background: #fed7aa;
        }

        /* Promo modal — solid */
        body.light-mode .promo-suggestions-overlay {
            background: rgba(15, 23, 42, 0.28);
        }

        body.light-mode .promo-suggestions-modal {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        }

        body.light-mode .promo-suggestions-modal h3 {
            color: #111;
        }

        body.light-mode .promo-card {
            background: #ffffff;
            border-color: #e5e7eb;
            border-top-color: #e5e7eb;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .promo-card:hover {
            background: #fafafa;
        }

        body.light-mode .promo-card-code {
            color: #15803d;
            background: #dcfce7;
            border-color: #86efac;
        }

        body.light-mode .promo-card-name {
            color: #111;
        }

        body.light-mode .promo-card-desc {
            color: #374151;
        }

        body.light-mode .promo-card-meta {
            color: #6b7280;
        }

        body.light-mode .promo-empty {
            color: #6b7280;
        }

        /* News modal (Forex Factory) — solid */
        body.light-mode .news-card {
            background: #ffffff;
            border-color: #e5e7eb;
            border-top-color: #e5e7eb;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .news-card.impact-high {
            border-left: 3px solid #ef4444;
            box-shadow: none;
        }

        body.light-mode .news-card.impact-medium {
            border-left: 3px solid #f97316;
            box-shadow: none;
        }

        body.light-mode .news-card.impact-low {
            border-left: 3px solid #9ca3af;
        }

        body.light-mode .news-card.past {
            background: #f3f4f6;
            opacity: 0.6;
        }

        body.light-mode .news-card.past .news-title {
            color: #6b7280;
        }

        body.light-mode .news-card.upcoming {
            background: #f0fdf4;
            border-color: #86efac;
            border-top-color: #4ade80;
            box-shadow: none;
        }

        body.light-mode .news-countdown {
            background: #dcfce7;
            color: #15803d;
        }

        body.light-mode .news-title {
            color: #111;
        }

        body.light-mode .news-meta {
            color: #374151;
        }

        body.light-mode .news-values {
            color: #374151;
        }

        body.light-mode .news-values .actual {
            color: #15803d;
        }

        body.light-mode .news-pred.pred-up {
            background: #dcfce7;
            color: #15803d;
            border-color: #86efac;
        }

        body.light-mode .news-pred.pred-down {
            background: #fee2e2;
            color: #b91c1c;
            border-color: #fca5a5;
        }

        body.light-mode .news-section-label {
            color: #b45309;
        }

        body.light-mode .news-empty {
            color: #6b7280;
        }

        body.light-mode .news-filter-btn {
            background: #f3f4f6;
            border-color: #d1d5db;
            border-top-color: #d1d5db;
            color: #374151;
            box-shadow: none;
        }

        body.light-mode .news-filter-btn:hover {
            background: #e5e7eb;
            color: #111;
            box-shadow: none;
        }

        body.light-mode .news-filter-btn.active {
            background: #ffedd5;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #c2700f;
            box-shadow: none;
        }

        /* Confirm modal (logout) — solid */
        body.light-mode .confirm-modal {
            background: rgba(0, 0, 0, 0.5);
        }

        body.light-mode .confirm-box {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        }

        body.light-mode .confirm-icon {
            background: #fef3c7;
            color: #d97706;
        }

        body.light-mode .confirm-title {
            color: #111;
            font-weight: 700;
        }

        body.light-mode .confirm-message {
            color: #374151;
        }

        body.light-mode .confirm-btn.cancel {
            background: #fff;
            color: #374151;
            border: 1px solid #d1d5db;
            font-weight: 600;
        }

        body.light-mode .confirm-btn.cancel:hover {
            background: #f5f5f5;
            border-color: #9ca3af;
        }

        /* Toast notifications */
        body.light-mode .toast {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        body.light-mode .toast-message {
            color: #222;
        }

        body.light-mode .toast.info .toast-icon {
            background: #dbeafe;
            color: #1d4ed8;
        }

        body.light-mode .toast.success .toast-icon {
            background: #dcfce7;
            color: #15803d;
        }

        body.light-mode .toast.warning .toast-icon {
            background: #fef3c7;
            color: #b45309;
        }

        body.light-mode .toast.danger .toast-icon {
            background: #fee2e2;
            color: #b91c1c;
        }

        /* Notif banner */
        body.light-mode .notif-banner {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            backdrop-filter: none;
        }

        /* Sound panel — solid */
        body.light-mode .sound-panel {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        body.light-mode .sound-panel-header {
            color: #374151;
            border-color: #e0e0e0;
        }

        body.light-mode .sound-panel-close {
            color: #6b7280;
        }

        body.light-mode .sound-panel-close:hover {
            color: #111;
            background: #f5f5f5;
        }

        body.light-mode .sound-row {
            border-color: #e5e7eb;
        }

        body.light-mode .sound-row-label {
            color: #111;
            font-weight: 600;
        }

        body.light-mode .sound-row-sub {
            color: #6b7280;
        }

        body.light-mode .sound-sw-track {
            background: #e5e7eb;
            border-color: #d1d5db;
        }

        body.light-mode .sound-sw input:checked+.sound-sw-track {
            background: #bbf7d0;
            border-color: #22c55e;
        }

        body.light-mode .sound-sw input:checked+.sound-sw-track::before {
            background: #16a34a;
        }

        body.light-mode .sound-panel-footer {
            border-color: #e0e0e0;
            background: #fff;
        }

        body.light-mode .sound-panel-btn {
            background: #fff;
            border-color: #d1d5db;
            color: #374151;
            font-weight: 600;
        }

        body.light-mode .sound-panel-btn:hover {
            background: #f5f5f5;
            border-color: #9ca3af;
            color: #111;
        }

        /* Calc modal */
        body.light-mode .calc-modal {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        }

        body.light-mode .calc-modal-header {
            background: #fff8f0;
            border-color: #e0e0e0;
        }

        body.light-mode .calc-modal-header h3 {
            color: #c2700f;
        }

        body.light-mode .calc-modal-body {
            color: #222;
        }

        body.light-mode .calc-input-group label {
            color: #374151;
        }

        body.light-mode .calc-input-group input,
        body.light-mode .calc-input-group select {
            background: #fff;
            border-color: #d1d5db;
            border-top-color: #d1d5db;
            color: #111;
            box-shadow: none;
        }

        body.light-mode .calc-input-group input:focus,
        body.light-mode .calc-input-group select:focus {
            border-color: #f97316;
            border-top-color: #ea580c;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
        }

        body.light-mode .calc-input-group input::placeholder {
            color: #9ca3af;
        }

        body.light-mode .calc-tab {
            background: #f3f4f6;
            border-color: #d1d5db;
            border-top-color: #d1d5db;
            color: #374151;
            box-shadow: none;
        }

        body.light-mode .calc-tab:hover {
            background: #e5e7eb;
            color: #111;
        }

        body.light-mode .calc-tab.active {
            background: #ffedd5;
            border-color: #f97316;
            border-top-color: #ea580c;
            color: #c2700f;
            box-shadow: none;
        }

        body.light-mode .calc-result {
            background: #f0fdf4;
            border-color: #22c55e;
            border-top-color: #16a34a;
            box-shadow: none;
        }

        body.light-mode .calc-result-label {
            color: #374151;
        }

        body.light-mode .calc-result-value {
            color: #15803d;
        }

        body.light-mode .calc-result-sub {
            color: #374151;
        }

        body.light-mode .calc-current-price {
            background: #f9fafb;
        }

        body.light-mode .calc-current-price span:first-child {
            color: #374151;
        }

        body.light-mode .calc-current-price span:last-child {
            color: #c2700f;
        }

        body.light-mode .calc-price-toggle {}

        body.light-mode .calc-price-option {
            background: #fff;
            border-color: #d1d5db;
        }

        body.light-mode .calc-price-option:hover {
            background: #f9fafb;
        }

        body.light-mode .calc-price-option.active {
            background: #ffedd5;
            border-color: #f97316;
        }

        body.light-mode .calc-price-option .price-label {
            color: #374151;
        }

        body.light-mode .calc-price-option.active .price-label {
            color: #c2700f;
        }

        body.light-mode .calc-price-option .price-value {
            color: #111;
        }

        body.light-mode .calc-price-option.active .price-value {
            color: #c2700f;
        }

        /* Indicator modal */
        body.light-mode .indicator-modal {
            background: #fff;
            border-color: #e0e0e0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        }

        body.light-mode .indicator-modal-header {
            background: #fff;
            border-color: #e0e0e0;
        }

        body.light-mode .indicator-modal-header h3 {
            color: #c2700f;
        }

        /* Professional Toast System */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            background: rgba(20, 26, 34, 0.98);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            animation: slideIn 0.3s ease;
            max-width: 320px;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .toast-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .toast-icon svg {
            width: 18px;
            height: 18px;
        }

        .toast.info .toast-icon {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }

        .toast.success .toast-icon {
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
        }

        .toast.warning .toast-icon {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
        }

        .toast.danger .toast-icon {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
        }

        .toast-message {
            color: #e7e9ea;
            font-size: 0.9em;
            line-height: 1.4;
        }

        /* Confirm Modal */
        .confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .confirm-modal.show {
            display: flex;
        }

        .confirm-box {
            background: linear-gradient(180deg, rgba(25, 32, 42, 0.98) 0%, rgba(18, 24, 32, 0.98) 100%);
            border-radius: 16px;
            padding: 24px;
            width: 90%;
            max-width: 340px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
        }

        .confirm-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .confirm-icon svg {
            width: 28px;
            height: 28px;
        }

        .confirm-title {
            color: #fff;
            font-size: 1.1em;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .confirm-message {
            color: #9ca3af;
            font-size: 0.9em;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .confirm-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .confirm-btn {
            padding: 10px 24px;
            border-radius: 10px;
            font-size: 0.88em;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .confirm-btn.cancel {
            background: rgba(255, 255, 255, 0.08);
            color: #e7e9ea;
        }

        .confirm-btn.cancel:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .confirm-btn.ok {
            background: linear-gradient(135deg, #f7931a 0%, #e8850f 100%);
            color: white;
        }

        .confirm-btn.ok:hover {
            transform: translateY(-1px);
        }