/* --- CORE THEME: HIGH CONTRAST OLED --- */
:root {
    --accent-gray:  #333;
    --bg-dark: #000;
    --black-charcoal: #101010;
    --black-ink: #070707;
    --black-smoke: #0b0b0b;
    --black-out: #222;
    --black-overlay-30: rgb(0 0 0 / 30%);
    --black-overlay-50: rgb(0 0 0 / 50%);
    --black-overlay-80: rgb(0 0 0 / 80%);
    --black-overlay-90: rgb(0 0 0 / 90%);
    --border-gray: #ccc;
    --bright-gold: #ffd700;
    --bright-red: #ff5252;
    --buy: #5e8d3f;
    --c-aud: #ff80ab;
    --c-cad: #00e5ff;
    --c-chf: #ff9100;
    --c-eur: #448aff;
    --c-gbp: #ff0;
    --c-jpy: #1de9b6;
    --c-nzd: #ea80fc;
    --c-usd: #76ff03;
    --card-bg: #050505;
    --crimson: #f44336;
    --crimson-wash-8: rgb(244 67 54 / 8%);
    --crimson-wash-20: rgb(244 67 54 / 20%);
    --crimson-wash-80: rgb(244 67 54 / 80%);
    --dark-gray: #444;
    --dark-medium-gray: #555;
    --deep-charcoal: #1a1a1a;
    --deep-teal: #00Bfa5;
    --emerald: #00e676;
    --extreme-buy: #00ff40;
    --extreme-sell: #ff0040;
    --fresh-lime: #8bc34a;
    --glow-buy:          0 0 10px rgb(94 141 63 / 40%);
    --glow-extreme-buy:  0 0 10px rgb(0 255 64 / 40%);
    --glow-extreme-sell: 0 0 10px rgb(255 0 64 / 40%);
    --glow-green: 0 0 10px rgb(118 255 3 / 40%);
    --glow-red: 0 0 10px rgb(255 23 68 / 40%);
    --glow-sell:         0 0 10px rgb(184 92 114 / 40%);
    --green-wash-8: rgb(129 199 132 / 8%);
    --glow-strong-sell:  0 0 10px rgb(255 128 171 / 40%);
    --hot-pink: #e91e63;
    --ink-dark: #151515;
    --ink-deep: #1b1b1b;
    --light-gray: #ddd;
    --light-mid-gray: #aaa;
    --medium-gray: #666;
    --midnight: #090909;
    --mid-gray: #777;
    --mint-ice: #ebffd6;
    --near-black: #080808;
    --neon-amber: #ffab40;
    --neon-amber-wash-5: rgb(255 171 64 / 5%);
    --neon-amber-wash-10: rgb(255 171 64 / 10%);
    --neon-amber-wash-15: rgb(255 171 64 / 15%);
    --neon-amber-wash-50: rgb(255 171 64 / 50%);
    --neon-cyan-wash-4: rgb(0 229 255 / 4%);
    --neon-cyan-wash-5: rgb(0 229 255 / 5%);
    --neon-cyan-wash-10: rgb(0 229 255 / 10%);
    --neon-cyan-wash-12: rgb(0 229 255 / 12%);
    --neon-cyan-wash-15: rgb(0 229 255 / 15%);
    --neon-cyan-wash-20: rgb(0 229 255 / 20%);
    --neon-cyan-wash-25: rgb(0 229 255 / 25%);
    --neon-cyan-wash-30: rgb(0 229 255 / 30%);
    --neon-cyan-wash-40: rgb(0 229 255 / 40%);
    --neon-cyan-wash-50: rgb(0 229 255 / 50%);
    --neon-cyan-wash-60: rgb(0 229 255 / 60%);
    --neon-cyan-wash-80: rgb(0 229 255 / 80%);
    --neon-green-wash-20: rgb(0 230 118 / 20%);
    --neon-green-wash-80: rgb(0 230 118 / 80%);
    --neon-lime-wash-3: rgb(118 255 3 / 3%);
    --neon-lime-wash-5: rgb(118 255 3 / 5%);
    --neon-lime-wash-10: rgb(118 255 3 / 10%);
    --neon-lime-wash-15: rgb(118 255 3 / 15%);
    --neon-lime-wash-20: rgb(118 255 3 / 20%);
    --neon-lime-wash-25: rgb(118 255 3 / 25%);
    --neon-lime-wash-30: rgb(118 255 3 / 30%);
    --neon-lime-wash-40: rgb(118 255 3 / 40%);
    --neon-lime-wash-50: rgb(118 255 3 / 50%);
    --neon-lime-wash-80: rgb(118 255 3 / 80%);
    --neon-mint-wash-15: rgb(29 233 182 / 15%);
    --neon-mint-wash-20: rgb(29 233 182 / 20%);
    --neon-mint-wash-30: rgb(29 233 182 / 30%);
    --neon-orange-wash-15: rgb(255 145 0 / 15%);
    --neon-orange-wash-20: rgb(255 145 0 / 20%);
    --neon-orange-wash-30: rgb(255 145 0 / 30%);
    --neon-orange-wash-40: rgb(255 145 0 / 40%);
    --neon-pink-wash-10: rgb(255 128 171 / 10%);
    --neon-pink-wash-15: rgb(255 128 171 / 15%);
    --neon-pink-wash-20: rgb(255 128 171 / 20%);
    --neon-pink-wash-30: rgb(255 128 171 / 30%);
    --neon-purple-wash-20: rgb(234 128 252 / 20%);
    --neon-red: #ff1744;
    --neon-red-wash-3: rgb(255 23 68 / 3%);
    --neon-red-wash-5: rgb(255 23 68 / 5%);
    --neon-red-wash-10: rgb(255 23 68 / 10%);
    --neon-red-wash-20: rgb(255 23 68 / 20%);
    --neon-red-wash-25: rgb(255 23 68 / 25%);
    --neon-red-wash-30: rgb(255 23 68 / 30%);
    --neon-red-wash-40: rgb(255 23 68 / 40%);
    --neon-red-wash-50: rgb(255 23 68 / 50%);
    --neon-red-wash-60: rgb(255 23 68 / 60%);
    --neon-red-wash-80: rgb(255 23 68 / 80%);
    --neon-violet: #d500f9;
    --neon-violet-wash-20: rgb(213 0 249 / 20%);
    --neon-violet-wash-25: rgb(213 0 249 / 25%);
    --neon-violet-wash-60: rgb(213 0 249 / 60%);
    --neon-yellow-wash-15: rgb(255 255 0 / 15%);
    --neon-yellow-wash-20: rgb(255 255 0 / 20%);
    --neon-yellow-wash-30: rgb(255 255 0 / 30%);
    --neon-yellow-wash-60: rgb(255 255 0 / 60%);
    --neutral-gray: #888;
    --neutral-wash-20: rgb(158 158 158 / 20%);
    --olive-wash-15: rgb(94 141 63 / 15%);
    --olive-wash-35: rgb(94 141 63 / 35%);
    --orange: #ff9800;
    --pale-blush: #ffc2cc;
    --pale-green: #a5d6a7;
    --rich-black: #111;
    --rose-wash-15: rgb(184 92 114 / 15%);
    --rose-wash-35: rgb(184 92 114 / 35%);
    --sell: #b85c72;
    --soft-coral: #ffa69e;
    --soft-cyan: #80deea;
    --soft-green: #81c784;
    --soft-lavender: #f6c0fc;
    --soft-lime: #aed581;
    --soft-lilac: #f1a1fc;
    --soft-magenta: #f0a1fc;
    --soft-peach: #ffd19e;
    --soft-pink: #ffa3b3;
    --soft-red: #e57373;
    --soft-rose-red: #ef9a9a;
    --text-dim: #9e9e9e;
    --text-main: #fff;
    --text-readable: #e0e0e0;
    --vivid-lime: #64dd17;
    --vivid-yellow: #ffd600;
    --void: #020202;
    --warm-coral: #ff7961;
    --white-wash-015: rgb(255 255 255 / 1.5%);
    --white-wash-2: rgb(255 255 255 / 2%);
    --white-wash-3: rgb(255 255 255 / 3%);
    --white-wash-5: rgb(255 255 255 / 5%);
    --white-wash-10: rgb(255 255 255 / 10%);
    --white-wash-30: rgb(255 255 255 / 30%);
    --white-wash-40: rgb(255 255 255 / 40%);
}

/* --- CURRENCY TEXT UTILITIES --- */
.text-aud { color: var(--c-aud) !important; } .text-cad { color: var(--c-cad) !important; }
.text-chf { color: var(--c-chf) !important; } .text-eur { color: var(--c-eur) !important; }
.text-gbp { color: var(--c-gbp) !important; } .text-jpy { color: var(--c-jpy) !important; }
.text-nzd { color: var(--c-nzd) !important; } .text-usd { color: var(--c-usd) !important; }

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
}

.session-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.system-btn {
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    color: var(--text-readable);
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.system-btn:hover {
    border-color: var(--c-cad);
    color: var(--c-cad);
    box-shadow: 0 0 10px var(--neon-cyan-wash-20);
}

.sort-group {
    display: flex;
    gap: 5px;
    border: 1px solid var(--accent-gray);
    border-radius: 4px;
    padding: 2px;
}

#filter {
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    width: 200px;
    margin-left: auto;
}

#filter:focus {
    border-color: var(--c-cad);
    outline: none;
}

/* Equalizer */
.strength-panel {
    margin-top: 25px;
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.eq-item {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    height: 24px;
}

.eq-label {
    width: 35px;
    font-size: 13px;
    font-weight: 800;
}

.eq-track {
    flex-grow: 1;
    background: var(--accent-gray);
    height: 6px;
    position: relative;
    border-radius: 2px;
    margin: 0 10px;
}

.eq-center {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--medium-gray);
    z-index: 2;
}

.eq-bar {
    height: 100%;
    position: absolute;
    top: 0;
    transition: width 0.5s;
    border-radius: 2px;
}

.bar-pos {
    left: 50%;
    background: var(--c-usd);
    box-shadow: var(--glow-green);
}

.bar-neg {
    right: 50%;
    background: var(--c-aud);
    box-shadow: var(--glow-red);
}

.eq-val {
    width: 40px;
    text-align: right;
    font-size: 11px;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    color: var(--text-main);
}

/* Filter Chips */
.signal-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.filter-chip {
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    color: var(--text-dim);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    user-select: none;
}

.filter-chip:hover {
    border-color: var(--medium-gray);
    color: var(--text-readable);
}

.filter-chip.active {
    border-color: var(--c-cad);
    color: var(--bg-dark);
    background: var(--c-cad);
    box-shadow: 0 0 10px var(--neon-cyan-wash-30);
}

.filter-chip.special-chip {
    border-color: var(--dark-gray);
    color: var(--text-main);
}

.filter-chip.special-chip.active {
    background: var(--text-main);
    color: var(--bg-dark);
    border-color: var(--text-main);
    box-shadow: 0 0 10px var(--white-wash-30);
}

/* Card Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 20px;
    border: 1px solid var(--accent-gray);
    position: relative;
}

.card::before {
    content: '';
    position: absolute; top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.3s;
}

.card[data-bias="BUY"]::before {
    background: var(--buy);
    box-shadow: var(--glow-buy);
}

.card[data-bias="STRONG BUY"]::before {
    background: var(--c-usd);
    box-shadow: var(--glow-green);
}

.card[data-bias="EXTREME BUY"]::before {
    background: var(--extreme-buy);
    box-shadow: var(--glow-extreme-buy);
}

.card[data-bias="SELL"]::before {
    background: var(--sell);
    box-shadow: var(--glow-sell);
}

.card[data-bias="STRONG SELL"]::before {
    background: var(--c-aud);
    box-shadow: var(--glow-strong-sell);
}

.card[data-bias="EXTREME SELL"]::before {
    background: var(--extreme-sell);
    box-shadow: var(--glow-extreme-sell);
}

/* Card Header Elements */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    transition: opacity 0.2s;
}
.card-header:active { opacity: 0.6; }

/* --- GLOBAL MARKET SHUTDOWN --- */
body.closed-mode .grid-container,
body.closed-mode .strength-panel,
body.closed-mode .session-wrapper,
body.closed-mode #filter,
body.closed-mode .system-btn,
body.closed-mode .sort-group,
body.closed-mode .signal-filters {
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.5s ease, opacity 0.5s ease;
}

#last-updated {
    font-size: 9px;
    color: var(--medium-gray);
    margin-top: 4px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
}

body.closed-mode #last-updated {
    color: var(--c-aud) !important;
    text-shadow: 0 0 15px var(--neon-red-wash-60);
}

.brand-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 2px solid var(--c-usd);
    padding-left: 15px;
    height: 66px;
}

body.closed-mode .brand-text-col { border-left-color: var(--c-aud)  !important; }

.container {
    max-width: 1800px;
    margin: 0 auto;
}

/* --- HEADER --- */
header {
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.logo-img {
    height: 90px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

.session-bar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.session-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--rich-black);
    color: var(--dark-gray);
    border: 1px solid var(--black-out);
    transition: all 0.3s;
    letter-spacing: 1px;
}

/* Session Active States */
#sess-sydney.active {
    color: var(--c-aud);
    border-color: var(--c-aud);
    background: var(--neon-pink-wash-15);
    box-shadow: 0 0 10px var(--neon-pink-wash-20);
}

#sess-tokyo.active {
    color: var(--c-jpy);
    border-color: var(--c-jpy);
    background: var(--neon-mint-wash-15);
    box-shadow: 0 0 10px var(--neon-mint-wash-20);
}

#sess-london.active {
    color: var(--c-gbp);
    border-color: var(--c-gbp);
    background: var(--neon-yellow-wash-15);
    box-shadow: 0 0 10px var(--neon-yellow-wash-20);
}

#sess-ny.active {
    color: var(--c-usd);
    border-color: var(--c-usd);
    background: var(--neon-lime-wash-15);
    box-shadow: 0 0 10px var(--neon-lime-wash-20);
}

.session-badge.holiday-session {
    background: var(--neon-orange-wash-15) !important;
    color: var(--neon-amber) !important;
    border-color: var(--neon-amber) !important;
    box-shadow: 0 0 15px var(--neon-orange-wash-30) !important;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

/* --- HAMBURGER MENU & DROPDOWN --- */
.menu-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.hamburger-btn {
    background: transparent;
    border: 1px solid var(--accent-gray);
    color: var(--text-readable);
    font-size: 18px;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover, .hamburger-btn.active {
    border-color: var(--c-cad);
    color: var(--c-cad);
    box-shadow: 0 0 10px var(--neon-cyan-wash-20);
    background: var(--neon-cyan-wash-5);
}

/* Dropdown Container */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 48px;
    background-color: var(--near-black);
    border: 1px solid var(--accent-gray);
    min-width: 240px;
    box-shadow: 0 10px 30px var(--black-overlay-80);
    border-radius: 6px;
    z-index: 2000;
    padding: 8px 0;
    max-height: calc(100vh - 70px); /* Fits screen minus header height */
    overflow-y: auto;
    overscroll-behavior: contain;   /* Prevents body from scrolling when menu ends */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhone */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-gray) var(--near-black);
}

/* Category Labels (LIVE SYSTEMS, INTELLIGENCE) */
.menu-category {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 900;
    letter-spacing: 1px;
    padding: 12px 16px 6px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Links */
.menu-link {
    color: var(--text-readable);
    padding: 10px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 2px solid transparent;
}

.menu-link:hover {
    background-color: var(--rich-black);
    color: var(--text-main);
    border-left-color: var(--c-cad);
    padding-left: 20px; /* Slide effect */
}

/* Icons inside menu */
.menu-icon {
    font-size: 14px;
    filter: grayscale(1);
    transition: filter 0.2s;
}

.menu-link:hover .menu-icon {
    filter: grayscale(0); /* Reveal color on hover */
}

/* Divider Line */
.menu-divider {
    height: 1px;
    background: var(--black-out);
    margin: 8px 0;
}

/* Scrollbar Styling */
.dropdown-content::-webkit-scrollbar { width: 6px; }
.dropdown-content::-webkit-scrollbar-track { background: var(--near-black); }

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: var(--accent-gray);
    border-radius: 6px;
}

.dropdown-content.show {
    display: block;
    animation: slide-down 0.2s ease-out;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Volume */
.volume-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.8;
}

.vol-label {
    font-size: 9px;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vol-track {
    width: 100px;
    height: 4px;
    background: var(--black-out);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.vol-fill {
    height: 100%;
    width: 0%;
    background: var(--dark-gray);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.vol-low {
    background: var(--c-chf);
    box-shadow: 0 0 6px var(--c-chf);
}

.vol-med {
    background: var(--c-eur);
    box-shadow: 0 0 6px var(--c-eur);
}

.vol-high {
    background: var(--c-usd);
    box-shadow: 0 0 8px var(--c-usd);
}

.vol-peak {
    background: var(--c-cad);
    box-shadow: 0 0 12px var(--c-cad);
}

.vol-state {
    font-size: 9px;
    opacity: 0.8;
}

.vol-label-low,
.vol-state-low { color: var(--c-chf); }

.vol-label-med,
.vol-state-med { color: var(--c-eur); }

.vol-label-high,
.vol-state-high { color: var(--c-usd); }

.vol-label-peak,
.vol-state-peak { color: var(--c-cad); }

/* Controls */
.controls-area {
    flex: 1;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.sort-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sort-btn:hover { color: var(--text-main); }

.sort-btn.active {
    background: var(--accent-gray);
    color: var(--c-cad);
}

.star-icon {
    font-size: 18px;
    color: var(--accent-gray);
    cursor: pointer;
    transition: color 0.2s;
    margin-right: 8px;
}
.star-icon:hover { color: var(--medium-gray); }

.star-icon.active-star {
    color: var(--c-gbp);
    text-shadow: 0 0 8px var(--neon-yellow-wash-60);
}

.pair-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.live-price {
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-readable);
    text-align: right;
}
.live-price-flat { color: var(--text-dim); }
.live-price-pos { color: var(--c-usd); }
.live-price-neg { color: var(--c-aud); }

.live-change {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.live-change-pos {
  color: var(--c-usd);
  background: var(--neon-lime-wash-10);
}

.live-change-neg {
  color: var(--c-aud);
  background: var(--neon-red-wash-10);
}

.freshness-timer {
    font-size: 9px;
    color: var(--medium-gray);
    font-family: 'Roboto Mono', monospace;
    text-align: right;
    margin-top: 2px;
}

/* ATR Bar */
.atr-bar-container {
    width: 100%;
    height: 3px;
    background: var(--black-out);
    margin-top: 10px;
    margin-bottom: 15px;
    border-radius: 2px;
    overflow: hidden;
}

.atr-fill {
    height: 4px;
    border-radius: 4px;
    background: var(--dark-gray);
    transition: width 0.5s;
}
.atr-fill-hot { background: var(--neon-amber); }
.atr-fill-hot-max { background: var(--neon-red); }

/* Gauge Area */
.gauge-area {
    text-align: center;
    margin-bottom: 5px;
    position: relative;
}

.gauge-overlay {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.gauge-score {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
}

.gauge-sub {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.gauge-label-container {
    height: 28px;
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: -5px;
}

.gauge-label {
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    white-space: nowrap;
}
.gauge-neutral .gauge-label { color: var(--text-dim); }
.gauge-buy .gauge-label { color: var(--buy); }
.gauge-strong-buy .gauge-label { color: var(--c-usd); }
.gauge-extreme-buy .gauge-label { color: var(--extreme-buy); }
.gauge-sell .gauge-label { color: var(--sell); }
.gauge-strong-sell .gauge-label { color: var(--c-aud); }
.gauge-extreme-sell .gauge-label { color: var(--extreme-sell); }

.gauge-label-normal {
    font-size: 24px;
    text-shadow: 0 0 10px var(--white-wash-10);
}

.gauge-label-strong {
    font-size: 18px;
    text-shadow: 0 0 10px var(--white-wash-10);
}

.gauge-arc {
  stroke: var(--text-readable);
  filter: drop-shadow(0 0 5px var(--black-overlay-50));
  opacity: 0;
  transition: stroke-dashoffset 1s ease, opacity 0.3s;
}

.gauge-neutral .gauge-arc-left,
.gauge-neutral .gauge-arc-right { stroke: var(--text-dim); }
.gauge-buy .gauge-arc-right { stroke: var(--buy); }
.gauge-strong-buy .gauge-arc-right { stroke: var(--c-usd); }
.gauge-extreme-buy .gauge-arc-right { stroke: var(--extreme-buy); }
.gauge-sell .gauge-arc-left { stroke: var(--sell); }
.gauge-strong-sell .gauge-arc-left { stroke: var(--c-aud); }
.gauge-extreme-sell .gauge-arc-left { stroke: var(--extreme-sell); }
.gauge-arc.is-active { opacity: 1; }

/* Badges */
.badge-slot {
    min-height: 34px; /* Forces the space to stay open even if empty */
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-base {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(4px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.badge-level {
    background: var(--neon-cyan-wash-10);
    border: 1px solid var(--neon-cyan-wash-40);
    color: var(--c-cad);
}

.badge-holiday {
    background: var(--neon-violet-wash-20);
    border:1px solid var(--neon-violet-wash-60);
    color:var(--soft-magenta);
    box-shadow:0 0 10px var(--neon-violet-wash-20);
}

.badge-news-past {
    background: var(--neon-red-wash-20);
    border:1px solid var(--neon-red);
    color:var(--soft-pink);
    animation:pulse-badge 2s infinite;
}

.badge-news-upcoming {
    background: var(--neon-orange-wash-20);
    border:1px solid var(--neon-amber);
    color:var(--soft-peach);
    animation:pulse-badge 2s infinite;
}

.badge-news-speech {
    background: var(--neon-violet-wash-25);
    border: 1px solid var(--neon-violet);
    color: var(--soft-lavender);
    animation: pulse-badge 2s infinite;
}

.badge-low-liq {
    background: var(--white-wash-5);
    border:1px solid var(--text-dim);
    color:var(--text-dim);
}

.badge-quiet {
    background: var(--neon-cyan-wash-5);
    border:1px solid var(--soft-cyan);
    color:var(--soft-cyan);
}
.badge-level-testing {border:1px solid var(--accent-gray); }

.badge-news-imminent {
    background: var(--neon-red-wash-25);
    border: 1px solid var(--neon-red);
    color: var(--pale-blush);
    font-weight: 900;
    animation: pulse-badge 0.8s infinite;
}

.badge-breakout-up {
    background: var(--neon-lime-wash-25);
    border: 1px solid var(--c-usd);
    color: var(--text-main);
    text-shadow: 0 0 5px var(--c-usd);
    animation: pulse-badge 1.5s infinite;
}

.badge-breakout-down {
    background: var(--neon-red-wash-25);
    border: 1px solid var(--c-aud);
    color: var(--text-main);
    text-shadow: 0 0 5px var(--c-aud);
    animation: pulse-badge 1.5s infinite;
}

.badge-retest-sup {
    background: var(--neon-lime-wash-5);
    border: 1px dashed var(--c-usd);
    color: var(--c-usd);
}

.badge-retest-res {
    background: var(--neon-red-wash-5);
    border: 1px dashed var(--c-aud);
    color: var(--c-aud);
}

.badge-test-sup {
    background: var(--neon-lime-wash-10);
    border: 1px solid var(--neon-lime-wash-40);
    color: var(--c-usd);
}

.badge-test-res {
    background: var(--neon-red-wash-10);
    border: 1px solid var(--neon-red-wash-40);
    color: var(--c-aud);
}

.badge-news-bullish {
    background: var(--neon-lime-wash-20);
    border: 1px solid var(--c-usd);
    color: var(--mint-ice);
    box-shadow: 0 0 5px var(--neon-lime-wash-20);
}

.badge-news-bearish {
    background: var(--neon-red-wash-20);
    border: 1px solid var(--c-aud);
    color: var(--soft-coral);
}

.badge-news-mixed {
    background: var(--neon-purple-wash-20);
    border: 1px solid var(--c-nzd);
    color: var(--soft-lilac);
    box-shadow: 0 0 5px var(--neon-purple-wash-20);

}

.badge-news-neutral {
    background: var(--neutral-wash-20);
    border: 1px solid var(--text-dim);
    color: var(--text-readable);
}

/* Levels Row */
.levels-row {
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
    font-size:10px;
    color:var(--text-dim);
    border-top:1px solid var(--black-out);
    padding-top:8px;
}

.level-box {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
}

.level-box:hover {
    background: var(--white-wash-10);
    color: var(--text-main);
}

/* Bars */
.mini-bars {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--accent-gray);
}

.mb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mb-name {
    width: 30px;
    font-size: 10px;
    font-weight: 700;
}

.mb-track {
    flex-grow: 1;
    height: 4px;
    background: var(--accent-gray);
    margin: 0 10px;
}

.mb-fill {
    height: 4px;
    border-radius: 4px;
    transition: width 0.5s;
}
.mb-fill-pos { background: var(--c-usd); }
.mb-fill-neg { background: var(--c-aud); }

.mb-val {
  font-size: 10px;
  font-weight: bold;
  width: 30px;
  text-align: right;
}
.mb-val-pos { color: var(--c-usd); }
.mb-val-neg { color: var(--c-aud); }

/* Bias Grid */
.bias-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bias-box {
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

.bias-title {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.bias-grid-bordered {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--black-out);
}

.signal-arrow {
    font-size: 20px;
    line-height: 1;
    color: var(--accent-gray);
}

.sig-buy {
    color: var(--c-usd);
    text-shadow: var(--glow-green);
}

.sig-sell {
    color: var(--c-aud);
    text-shadow: var(--glow-red);
}

/* Matrix */
.score-matrix {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 15px;
    border-top: 1px solid var(--accent-gray);
    padding-top: 15px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 4px;
}
.score-matrix:hover { background: var(--rich-black); }

.matrix-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-dark);
    border: 1px solid var(--black-out);
    padding: 8px 4px;
    border-radius: 4px;
}

.matrix-label {
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-bottom: 4px;
    font-weight: 700;
}

.matrix-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 700;
}

.m-pos {
    color: var(--c-usd);
    text-shadow: 0 0 5px var(--neon-lime-wash-30);
}

.m-neg {
    color: var(--c-aud);
    text-shadow: 0 0 5px var(--neon-red-wash-30);
}
.m-neu { color: var(--dark-medium-gray); }

/* FOOTER */
footer {
    border-top: 1px solid var(--accent-gray);
    padding-top: 20px;
    padding-left: 20px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
}

/* MODALS */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--black-overlay-90);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 8px;
    color: var(--text-main);
    box-shadow: 0 0 30px var(--white-wash-5);
    max-height: 90vh;
    overflow-y: auto;
}

/* Intel Modal Specifics */
#intel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.intel-summary {
    background: var(--rich-black);
    border-left: 3px solid var(--c-cad);
    padding: 15px;
    margin: 20px 0;
    font-style: italic;
    color: var(--light-gray);
    font-size: 14px;
    line-height: 1.5;
}

.intel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.intel-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--black-out);
    font-size: 13px;
    color: var(--text-readable);
    display: flex;
    justify-content: space-between;
}

.intel-score-val {
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
}

/* Chart Modal */
.chart-modal-wrapper {
    z-index: 10000;
    align-items: center;
    padding: 0;
}

.modal-content.chart-modal-content {
    padding: 0;
    border: 1px solid var(--accent-gray);
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    width: 90%;
    max-width: 900px;
    height: 600px;
    max-height: 90vh;
    overflow: hidden;
}

.chart-header {
    padding: 15px;
    border-bottom:
    1px solid var(--accent-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--rich-black);
}

.chart-header h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text-main);
    letter-spacing: 1px;
}

.close-chart {
    cursor: pointer;
    font-size: 24px;
    color: var(--medium-gray);
    transition: color 0.2s;
}
.close-chart:hover {color: var(--text-main); }

.chart-body {
    flex-grow: 1;
    background: var(--bg-dark);
    position: relative;
}

/* Skeleton & Mobile Styles */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.skeleton {
    background: linear-gradient(90deg, var(--rich-black) 25%, var(--deep-charcoal) 50%, var(--rich-black) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    color: transparent !important;
}

/* --- GUIDE PAGE STYLES --- */
.guide-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.toc {
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.toc h3 {
    margin-top: 0;
    color: var(--c-cad);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
}
.toc li { margin-bottom: 8px; }

.toc a {
    color: var(--text-readable);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}

.broker-visit a {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--c-cad);
    color: var(--c-cad);
    background: var(--neon-cyan-wash-4);
    text-decoration: none;
}
.toc a:hover { color: var(--c-cad); }

h2.section-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-main);
    margin-top: 60px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 15px;
    letter-spacing: -0.5px;
}

h3.sub-title {
    font-size: 18px;
    color: var(--c-cad);
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: 700;
}

.guide-container p {
    color: var(--text-readable);
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}

.feature-box {
    background: var(--midnight);
    border-left: 4px solid var(--accent-gray);
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 4px 4px 0;
}

.feature-box.tip {
    border-color: var(--c-cad);
    background: var(--neon-cyan-wash-5);
}

.feature-box.warning {
    border-color: var(--c-aud);
    background: var(--neon-red-wash-5);
}
.feature-box strong { color: var(--text-main); }

/* ANATOMY GRID */
.anatomy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin: 40px 0;
}

.anatomy-visual {
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 20px;
    background: var(--card-bg);
    position: relative;
}

.anatomy-marker {
    position: absolute;
    background: var(--c-cad);
    color: var(--bg-dark);
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    box-shadow: 0 0 10px var(--neon-cyan-wash-50);
    cursor: help;
}

.anatomy-list ol {
    padding-left: 20px;
    color: var(--text-dim);
}

.anatomy-list li {
    margin-bottom: 15px;
    padding-left: 10px;
}

.anatomy-list strong {
    color: var(--text-main);
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

/* --- PRO FOOTER STYLES --- */
.main-footer {
    margin-top: 80px;
    border-top: 1px solid var(--accent-gray);
    padding-top: 60px;
    background: var(--void);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rich-black);
}

.footer-col h4 {
    color: var(--text-main);
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-brand {
    font-size: 18px;
    margin-bottom: 15px;
}

.footer-brand-forex {
    color:var(--text-main);
    font-weight:900;
    letter-spacing:1px;
}

#footer-brand-vitals {
    color:var(--strongest-color); 
    font-weight:900;
}

.footer-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 300px;
}

.system-status {
    display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
    color: var(--c-usd); background: var(--neon-lime-wash-5);
    padding: 6px 10px; border-radius: 4px; border: 1px solid var(--neon-lime-wash-20);
    margin-top: 15px;
}

.status-dot {
    width: 6px; height: 6px; background-color: var(--c-usd);
    border-radius: 50%; box-shadow: 0 0 5px var(--c-usd);
    animation: pulse-status 2s infinite;
}

/* OK = neon green */
.system-status.status-ok {
    color: var(--c-usd);
    background: var(--neon-lime-wash-5);
    border-color: var(--neon-lime-wash-40);
    box-shadow: 0 0 10px var(--neon-lime-wash-15);
}

.system-status.status-ok .status-dot {
    background-color: var(--c-usd);
    box-shadow: 0 0 6px var(--c-usd);
}

/* Degraded = amber / warning */
.system-status.status-degraded {
    color: var(--neon-amber);
    background: var(--neon-amber-wash-5);
    border-color: var(--neon-amber-wash-50);
    box-shadow: 0 0 10px var(--neon-amber-wash-15);
}

.system-status.status-degraded .status-dot {
    background-color: var(--neon-amber);
    box-shadow: 0 0 6px var(--neon-amber);
}

/* Down = red / error */
.system-status.status-down {
    color: var(--c-aud);
    background: var(--neon-red-wash-5);
    border-color: var(--neon-red-wash-60);
    box-shadow: 0 0 12px var(--neon-red-wash-30);
}

.system-status.status-down .status-dot {
    background-color: var(--c-aud);
    box-shadow: 0 0 8px var(--c-aud);
}

@keyframes pulse-status { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: 12px; }

.footer-links a:hover {
    color: var(--c-cad);
    padding-left: 5px;
}

/* Bottom Area */
.footer-bottom { padding: 30px 0; }

.risk-block {
    font-size: 11px;
    color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}
.risk-block strong { color: var(--medium-gray); }

.copyright-row {
    text-align: center;
    color: var(--accent-gray);
    font-size: 11px;
}

/* --- Contact Form Layout --- */
.contact-form {
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 25px;
    margin-top: 25px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-readable);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group .required {
    color: var(--c-aud);
    margin-left: 4px;
}

/* Inputs & textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-readable);
    font-family: inherit;
    box-sizing: border-box;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--c-cad);
    box-shadow: 0 0 6px var(--neon-cyan-wash-30);
}

/* Alerts (errors / success) */
.alert {
    border-radius: 6px;
    padding: 12px 15px;
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.5;
}

.alert ul {
    list-style: disc;
    margin: 0 0 0 18px;
    padding: 0;
}

.alert.error {
    background: var(--crimson-wash-8);
    border: 1px solid var(--crimson);
    color: var(--warm-coral);
}

.alert.success {
    background: var(--green-wash-8);
    border: 1px solid var(--soft-green);
    color: var(--pale-green);
}

/* Extra info block under the form */
.contact-extra {
    margin-top: 35px;
    border-top: 1px solid var(--accent-gray);
    padding-top: 20px;
    font-size: 13px;
    color: var(--text-dim);
}

.contact-extra ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.contact-extra li {
    margin-bottom: 5px;
}

/* Base link styling in content areas (About, Risk, Guide, etc.) */
.guide-container a:not(.system-btn),
.main-content a:not(.system-btn),
.footer a:not(.system-btn) {
    color: var(--c-cad);
    text-decoration: none;
    border-bottom: 1px dashed var(--neon-cyan-wash-40);
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.broker-visit a:hover {
    background: var(--neon-cyan-wash-12);
}

/* Visited links */
.guide-container a:visited:not(.system-btn),
.main-content a:visited:not(.system-btn),
.footer a:visited:not(.system-btn) {
    color: var(--neon-cyan-wash-80); /* slightly dimmer cyan */
    border-bottom-color: var(--neon-cyan-wash-25);
}

/* Hover state */
.guide-container a:hover:not(.system-btn),
.main-content a:hover:not(.system-btn),
.footer a:hover:not(.system-btn) {
    color: var(--text-main);
    border-bottom-style: solid;
    border-bottom-color: var(--c-cad);
    background-color: var(--neon-cyan-wash-5);
}

/* Active (mouse down / clicking) */
.guide-container a:active:not(.system-btn),
.main-content a:active:not(.system-btn),
.footer a:active:not(.system-btn) {
    color: var(--c-aud);
    border-bottom-color: var(--c-aud);
}

/* Focus (keyboard navigation: Tab key) */
.guide-container a:focus-visible:not(.system-btn),
.main-content a:focus-visible:not(.system-btn),
.footer a:focus-visible:not(.system-btn) {
    outline: 0;
    box-shadow: 0 0 0 2px var(--neon-cyan-wash-60);
    border-radius: 2px;
}

/* Skeleton */
.skeleton-tall { height: 350px; }

/* Intel modal */
.intel-item-empty {
  justify-content: center;
  color: var(--medium-gray);
}
.intel-score-val-pos { color: var(--c-usd); }
.intel-score-val-neg { color: var(--c-aud); }
.intel-score-val-neutral { color: var(--text-main); }
.intel-pair-curr { color: var(--c-cad); }

/* Equalizer value colors */
.eq-val-dim { color: var(--text-dim); }
.eq-val-pos { color: var(--c-usd); }
.eq-val-neg { color: var(--c-aud); }

/* Card header layout */
.card-header-left {
  display: flex;
  align-items: flex-start;
}
.pair-slash { color: var(--medium-gray); }

/* Levels */
.level-label-sup { color: var(--c-usd); }
.level-label-res { color: var(--c-aud); }
.level-value { transition: all 0.2s ease; }

.level-value-support-hot {
  color: var(--c-usd);
  font-weight: 900;
  text-shadow: 0 0 5px var(--c-usd);
}

.level-value-resistance-hot {
  color: var(--c-aud);
  font-weight: 900;
  text-shadow: 0 0 5px var(--c-aud);
}

/* Alert button */
#btn-alert.alerts-on {
  border-color: var(--c-usd);
  color: var(--c-usd);
}

/* --- HEATMAP STYLES --- */
.heatmap-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.heatmap-card {
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

.hm-grid { 
    display: grid; 
    grid-template-columns: 60px repeat(8, 1fr); 
    gap: 2px;
    min-width: 600px; 
}

.hm-header-col {
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 900;
    padding-bottom: 10px;
}

.hm-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 900;
    padding-right: 10px;
}

.hm-cell {
    aspect-ratio: 1.4; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--rich-black);
    border-radius: 2px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    transition: transform 0.2s;
    cursor: default;
    color: var(--medium-gray); 
}

.hm-cell:hover {
    transform: scale(1.1);
    z-index: 2;
    border: 1px solid var(--text-main);
}
.hm-cell.empty { background: transparent; }

.hm-cell.self {
    background: var(--card-bg);
    color: var(--accent-gray);
}

/* Colors */
.bg-buy-1 {
    background: var(--olive-wash-15);
    color: var(--fresh-lime);
}

.bg-buy-2 {
    background: var(--olive-wash-35);
    color: var(--soft-lime);
}

.bg-buy-3 {
    background: var(--neon-lime-wash-50);
    color: var(--text-main);
    text-shadow: 0 0 5px var(--neon-lime-wash-80);
}

.bg-sell-1 {
    background: var(--rose-wash-15);
    color: var(--soft-red);
}

.bg-sell-2 {
    background: var(--rose-wash-35);
    color: var(--soft-rose-red);
}

.bg-sell-3 {
    background: var(--neon-red-wash-50);
    color: var(--text-main);
    text-shadow: 0 0 5px var(--neon-red-wash-80);
}

/* RANKING CARD (Vertical Stack Override) */
.rank-card {
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
}

/* Ensure EQ items stack cleanly */
.rank-card .eq-item { 
    width: 100%; 
    margin-bottom: 12px; 
    padding-bottom: 12px; 
    border-bottom: 1px solid var(--rich-black); 
    display: flex;
    align-items: center;
}

.rank-card .eq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Legend */
.legend {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
    font-size: 10px;
    color: var(--medium-gray);
}

.legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* --- CALCULATOR STYLES --- */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
}

.calc-input-group {
    background: var(--near-black);
    padding: 25px;
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    position: relative;
}

.calc-results {
    background: var(--card-bg);
    padding: 25px;
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    position: relative;
}

.form-label {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-weight: 700;
}

.form-control { 
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    color: var(--text-main);
    padding: 12px;
    border-radius: 4px; 
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    transition: border 0.2s;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--c-cad);
    outline: none;
}

.res-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--black-out);
    padding-bottom: 8px;
    font-size: 13px;
}
.res-row:last-child { border-bottom: none; }
.res-label { color: var(--text-dim); }

.res-val {
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.res-big {
    font-size: 32px;
    color: var(--c-cad);
    font-weight: 900;
    letter-spacing: -1px;
    margin: 5px 0;
}

.visual-track {
    width: 100%;
    height: 6px;
    background: var(--black-out);
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}

.visual-fill {
    height: 100%;
    background: var(--c-usd);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-status {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 10px;
    font-weight: bold;
    color: var(--medium-gray);
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dark-gray);
}

.status-light.live {
    background: var(--c-usd);
    box-shadow: 0 0 5px var(--c-usd);
}

.auto-badge {
    font-size: 9px;
    background: var(--rich-black);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--c-cad);
    display: none;
    margin-left: 5px;
    text-transform: uppercase;
}

/* Result Sections */
.result-section {
    background: var(--rich-black);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid var(--accent-gray);
}

.result-header {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--neutral-gray);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.risk-warn { color: var(--c-aud); }
.risk-safe { color: var(--c-usd); }

/* --- SITEMAP / INDEX PAGE STYLES --- */
.sitemap-header {
    padding: 20px 0 40px;
    border-bottom: 1px solid var(--accent-gray);
    margin-bottom: 30px;
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sitemap-card {
    display: flex;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 6px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect matching your theme */
.sitemap-card:hover {
    border-color: var(--c-cad);
    box-shadow: 0 0 15px var(--neon-cyan-wash-10);
    transform: translateY(-2px);
    background: var(--midnight);
}

.sitemap-title {
    color: var(--text-readable);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.sitemap-card:hover .sitemap-title {
    color: var(--c-cad);
}

.sitemap-icon {
    font-size: 24px;
    margin-right: 15px;
    margin-top: 2px;
    opacity: 0.8;
}

.sitemap-info {
    flex-grow: 1;
}

.sitemap-url {
    color: var(--dark-medium-gray);
    font-size: 10px;
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;      /* Prevent URL from wrapping weirdly */
    overflow: hidden;         /* Cut it off if it's somehow massive */
    text-overflow: ellipsis;  /* Add ... if it's too long */
}

.sitemap-arrow {
    color: var(--text-dim);
    font-size: 18px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s ease;
}

.sitemap-card:hover .sitemap-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--c-cad);
}

.sitemap-desc {
    color: var(--neutral-gray);          /* Muted gray text */
    font-size: 12px;      /* Smaller than title */
    line-height: 1.4;     /* Readable spacing */
    margin-bottom: 8px;   /* Space before the URL */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sitemap-meta-stack {
    display: flex;
    flex-direction: column; /* This forces them onto separate lines */
    gap: 4px;               /* Space between URL and Date */
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--black-out);
}

.sitemap-date {
    font-size: 10px;
    color: var(--c-usd);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    opacity: 0.9;
}

@keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

.margin-danger {
    color: var(--c-aud);
    animation: pulse-red 2s infinite;
}

/* Warning for small lots */
#lot-warning {
    display:none;
    color: var(--c-aud);
    font-size: 11px;
    margin-top: -20px;
    margin-bottom: 20px;
    text-align: center;
    background: var(--neon-pink-wash-10);
    padding: 5px;
    border-radius: 4px;
}

.fv-i1 {
    font-size: 14px;
    margin-top: 18px;
}

.fv-i2 {
    top:15px;
    right: -10px;
}

.fv-i3 {
    top:55px;
    left: 45%;
}

.fv-i4 {
    top:110px;
    left: 10%;
}

.fv-i5 {
    top:180px;
    right:-10px;
}

.fv-i6 {
    top:230px;
    left:-10px;
}

.fv-i7 {
    top:275px;
    right:-10px;
}

.fv-i8 {
    top:305px;
    left:-10px;
}

.fv-i9 {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:15px;
    border-bottom:1px solid var(--black-out);
    padding-bottom:10px;
}

.fv-i10 {
    font-weight:900;
    font-size:16px;
}
.fv-i11 { color:var(--medium-gray); }

.fv-i12 {
    color:var(--bright-gold);
    margin-left:5px;
}
.fv-i13 { text-align:right; }

.fv-i14 {
    font-family:'Roboto Mono', monospace;
    font-size:15px;
    color:var(--text-readable);
}

.fv-i15 {
    font-size:11px;
    color:var(--emerald);
}

.fv-i16 {
    font-size:9px;
    color:var(--medium-gray);
    font-family:'Roboto Mono', monospace;
}

.fv-i17 {
    width:100%;
    height:3px;
    background:var(--black-out);
    margin-bottom:15px;
    border-radius:2px;
    overflow:hidden;
}

.fv-i18 {
    width:80%;
    height:100%;
    background:var(--neon-amber);
}

.fv-i19 {
    text-align:center;
    margin: 20px 0;
}

.fv-i20 {
    font-size:24px;
    font-weight:700;
    color:var(--c-usd);
}

.fv-i21 {
    font-size:14px;
    font-weight:700;
    color:var(--text-main);
}

.fv-i22 {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:15px;
}
.fv-i23 { text-align:center; }

.fv-i24 {
    font-size:9px;
    color:var(--mid-gray);
    margin-bottom:4px;
}

.fv-i25 {
    padding:6px 4px;
    border-radius:4px;
    background:var(--ink-deep);
    font-size:11px;
    font-weight:700;
    color:var(--emerald);
}

.fv-i26 {
    padding:6px 4px;
    border-radius:4px;
    background:var(--ink-deep);
    font-size:11px;
    font-weight:700;
    color:var(--neon-amber);
}

.fv-i27 {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

.fv-i28 {
    font-size:11px;
    color:var(--neutral-gray);
}

.fv-i29 {
    display:flex;
    gap:8px;
    margin-bottom:10px;
}

.fv-i30 {
    flex:1;
    padding:8px;
    background:var(--ink-dark);
    border-radius:4px;
    font-size:11px;
    cursor:pointer;
}

.fv-i31 {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.fv-i32 {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.fv-i33 {
    font-size:11px;
    color:var(--c-eur);
}

.fv-i34 {
    flex:1;
    margin:0 8px;
    height:4px;
    border-radius:4px;
    background:linear-gradient(to right, var(--neon-green-wash-20), var(--neon-green-wash-80));
}

.fv-i35 {
    font-size:10px;
    color:var(--emerald);
}

.fv-i36 {
    font-size:11px;
    color:var(--c-usd);
}

.fv-i37 {
    flex:1;
    margin:0 8px;
    height:4px;
    border-radius:4px;
    background:linear-gradient(to right, var(--crimson-wash-20), var(--crimson-wash-80));
}

.fv-i38 {
    font-size:10px;
    color:var(--bright-red);
}
.fv-i39 { margin-top:10px; }

.fv-i40 {
    display:inline-block;
    padding:4px 8px;
    font-size:10px;
    border-radius:12px;
    border:1px solid var(--neon-amber);
    background:var(--neon-amber-wash-10);
    color:var(--neon-amber);
}

.fv-i41 {
    max-width: 1400px;
    padding-bottom: 80px;
}
.fv-i42 { background:var(--extreme-sell); }
.fv-i43 { background:var(--accent-gray); }
.fv-i44 { background:var(--extreme-buy); }

.fv-i47 {
    border-bottom: 1px solid var(--black-out);
    padding-bottom: 20px;
    display:flex;
    justify-content:space-between;
    align-items:end;
}

.fv-i48 {
    margin: 0;
    color: var(--text-main);
}

.fv-i49 {
    color: var(--text-dim);
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.6;
}

.fv-i50 {
    color:var(--c-usd);
    font-weight:bold;
}

.fv-i51 {
    color:var(--c-aud);
    font-weight:bold;
}

.fv-i52 {
    text-align:right;
    font-size:10px;
    color:var(--medium-gray);
}

.fv-i53 {
    grid-column: 1 / -1;
    text-align:center;
    padding:40px;
    color:var(--dark-gray);
}
.fv-i54 { font-size:10px; }

.fv-i55 {
    margin:0 0 20px;
    color:var(--c-cad);
}

.fv-i56 {
    text-align:center;
    padding:20px;
    color:var(--medium-gray);
    font-size: 12px;
}

.fv-i57 {
    grid-column: 1 / -1;
    text-align:center;
    padding:40px;
    color:var(--c-aud);
}
.fv-i58 { color:var(--accent-gray); }

.fv-i59 {
    margin-top: 20px;
    display:none;
}
.fv-i60 { max-width: 450px; }

.fv-i61 {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}

.fv-i62 {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.fv-i63 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-readable);
    margin-bottom: 8px;
}

.fv-i64 {
    font-size: 13px;
    max-width: 400px;
    margin: 0 auto;
}
.fv-i65 { cursor:pointer; }

.fv-i66 {
    margin-top: 20px;
    font-size: 10px;
    color: var(--medium-gray);
    border-top: 1px solid var(--accent-gray);
    padding-top: 10px;
    text-align: center;
}

.fv-i67 {
    max-width: 1000px;
    padding-bottom: 80px;
}

.fv-i68 {
    width: 100%;
    font-size: 14px;
    padding: 15px;
}
.fv-i69 { border-left-color: var(--c-cad); }

.fv-i70 {
    color:var(--text-readable);
    font-size:11px;
}
.fv-i71 { border-left-color: var(--c-gbp); }
.fv-i72 { margin-bottom: 5px; }
.fv-i73 { margin-bottom: 10px; }

.fv-i74 {
    max-width: 400px;
    text-align: center;
    border-color: var(--c-aud);
    box-shadow: 0 0 20px var(--neon-red-wash-20);
}

.fv-i75 {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black-out);
    padding-bottom: 20px;
}

.fv-i76 {
    color: var(--text-dim);
    font-size: 14px;
    margin-top: 10px;
}

.fv-i77 {
    margin-top:0;
    color:var(--c-cad);
    margin-bottom:20px;
}
.fv-i78 { margin-bottom: 20px; }

.fv-i79 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
    margin-bottom: 20px;
}

.fv-i80 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.fv-i81 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}
.fv-i82 { margin-bottom: 25px; }

.fv-i83 {
    text-transform:none;
    color:var(--medium-gray);
}
.fv-i84 { position: relative; }

.fv-i85 {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--medium-gray);
    font-size: 12px;
}

.fv-i86 {
    opacity: 0.5;
    filter: grayscale(1);
}

.fv-i87 {
    position:absolute;
    top:0;
    left:0;
    width:2px;
    height:100%;
    background:var(--c-cad);
}

.fv-i88 {
    margin-top:0;
    color:var(--text-main);
    margin-bottom:20px;
}

.fv-i89 {
    text-align: center;
    margin-bottom: 15px;
}

.fv-i90 {
    display:none;
    font-size:11px;
    margin-top:8px;
    text-align:right;
}
.fv-i91 { color:var(--c-gbp); }
.fv-i92 { margin-top: 20px; }
.fv-i93 { font-size:11px; }
.fv-i94 { background: var(--accent-gray); }

.fv-i95 {
    display:none;
    color:var(--c-aud);
    font-size:10px;
    text-align:right;
}

.fv-i96 {
    font-size: 40px;
    margin-bottom: 15px;
}

.fv-i97 {
    color: var(--c-aud);
    margin: 0 0 10px;
}

.fv-i98 {
    color: var(--border-gray);
    font-size: 14px;
    margin-bottom: 25px;
}
.fv-i99 { font-weight:bold; }

.fv-i100 {
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.fv-i101 {
    color:var(--text-main);
    font-weight:900;
    letter-spacing:1px;
}

.fv-i102 {
    color:var(--c-usd);
    font-weight:900;
}
.fv-i103 { color:var(--c-cad); }

.fv-s1 {
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* --- BROKERS PAGE CUSTOM STYLES --- */

.brokers-page .section-title {
    margin-bottom: 8px;
}

.brokers-intro p {
    color: var(--text-readable);
    font-size: 15px;
    line-height: 1.6;
}

/* Filter panel */
.broker-filter-box {
    margin: 25px 0 35px;
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 20px;
}

.broker-filter-box p {
    margin-bottom: 10px;
}

.broker-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.broker-filter-grid .form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-weight: 700;
}

.broker-filter-grid input,
.broker-filter-grid select {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--accent-gray);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-readable);
    font-family: inherit;
    box-sizing: border-box;
}

.cb-item input {
    cursor: pointer;
    accent-color: var(--c-cad);
}

.broker-filter-grid input:focus,
.broker-filter-grid select:focus {
    outline: none;
    border-color: var(--c-cad);
    box-shadow: 0 0 6px var(--neon-cyan-wash-30);
}

.broker-filter-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.broker-chip {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border: 1px solid var(--accent-gray);
    background: var(--card-bg);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.broker-chip:hover {
    border-color: var(--c-cad);
    color: var(--text-main);
    background: var(--neon-cyan-wash-5);
}

.broker-chip.active {
    background: var(--c-cad);
    border-color: var(--c-cad);
    color: var(--bg-dark);
    box-shadow: 0 0 10px var(--neon-cyan-wash-40);
}

/* Comparison table */
.broker-table-wrapper {
    margin: 25px 0 30px;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--accent-gray);
    background: var(--card-bg);
}

.broker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 100%;
}

.broker-table th,
.broker-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rich-black);
}

.broker-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.breakdown-table th {
    text-align: left;
    color: var(--text-dim);
    font-weight: normal;
    border-bottom: 1px solid var(--accent-gray);
    padding: 10px 5px;
    font-size: 10px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background: var(--card-bg); /* Covers scrolling content */
    z-index: 2;
}

.corr-table th,
.corr-table td {
    padding: 10px 6px;
    text-align: center;
    border: 1px solid var(--deep-charcoal);
}

.corr-table th {
    background: var(--bg-dark);
    font-weight: 900;
    position: sticky;
    top: 0;
}

.data-table th {
    text-align: right;
    color: var(--medium-gray);
    padding: 10px;
    border-bottom: 1px solid var(--accent-gray);
    font-size: 10px;
}

.data-table td {
    text-align: right;
    padding: 12px 10px;
    border-bottom: 1px solid var(--deep-charcoal);
    color: var(--light-gray);
}

.broker-table th:nth-child(1), 
.broker-table th:nth-child(2) {
    white-space: nowrap;
}

.broker-table thead {
    background: var(--black-smoke);
}

.fib-table tr,
.pivot-table tr {
    border-bottom: 1px solid var(--deep-charcoal);
    transition: background 0.2s;
}

.fib-table tr:hover,
.pivot-table tr:hover { background: var(--near-black); }

.fib-table td,
.pivot-table td { padding: 15px 20px; }

.fib-table tr:last-child,
.pivot-table tr:last-child { border-bottom: none; }

.broker-table tbody tr:nth-child(even) {
    background: var(--black-ink);
}

.broker-table tbody tr:hover {
    background: var(--black-charcoal);
}

.broker-name {
    font-weight: 700;
    color: var(--text-main);
}

.score-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-family: 'Roboto Mono', monospace;
    color: var(--c-cad);
    border: 1px solid var(--neon-cyan-wash-60);
}

/* --- SCORE COLOR VARIANTS --- */

/* Elite (9.0+) - Green Neon */
.score-pill.s-elite {
    color: var(--c-usd);
    border-color: var(--c-usd);
    box-shadow: 0 0 8px var(--neon-lime-wash-20); /* Subtle glow */
}

/* Great (8.0 - 8.9) - Cyan Neon (Your default) */
.score-pill.s-great {
    color: var(--c-cad);
    border-color: var(--c-cad);
}

/* Good (7.0 - 7.9) - Orange/Yellow Neon */
.score-pill.s-good {
    color: var(--c-chf);
    border-color: var(--c-chf);
}

/* Average (< 7.0) - Pink/Red Neon */
.score-pill.s-avg {
    color: var(--c-aud);
    border-color: var(--c-aud);
}

/* --- CARD RATING COLORS --- */

/* Override the default cyan color based on the class added */

.broker-rating span.s-elite {
    color: var(--c-usd) !important;
    text-shadow: 0 0 10px var(--neon-lime-wash-40); /* Neon Green Glow */
}

.broker-rating span.s-great {
    color: var(--c-cad) !important;
}

.broker-rating span.s-good {
    color: var(--c-chf) !important; /* Orange */
    text-shadow: 0 0 10px var(--neon-orange-wash-40);
}

.broker-rating span.s-avg {
    color: var(--c-aud) !important; /* Red/Pink */
    text-shadow: 0 0 10px var(--neon-red-wash-40);
}

/* Cards */
.broker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 15px;
}

.broker-card {
    background: var(--near-black);
    border-radius: 8px;
    border: 1px solid var(--accent-gray);
    padding: 20px 20px 18px;
    position: relative;
}

.broker-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--c-cad);
    opacity: 0.5;
}

.broker-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.broker-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-main);
}

.broker-tagline {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-dim);
}

.broker-rating {
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
}

.broker-rating span {
    font-size: 22px;
    color: var(--c-cad);
    font-weight: 900;
}

.broker-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}

.broker-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--card-bg);
    border: 1px solid var(--black-out);
    color: var(--text-dim);
}

.broker-pill strong {
    color: var(--text-readable);
}

.broker-content p {
    font-size: 14px;
    color: var(--text-readable);
    line-height: 1.6;
    margin-bottom: 8px;
}

.broker-columns {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr;
    gap: 18px;
    margin-top: 12px;
}

.broker-subtitle {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin: 0 0 6px;
}

.broker-columns ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-readable);
}

.broker-columns li {
    margin-bottom: 4px;
}

.broker-promotions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rich-black);
    font-size: 12px;
    color: var(--text-dim);
}

.broker-promotions strong {
    color: var(--text-main);
}

.broker-visit {
    margin-top: 12px;
    text-align: right;
}

/* Helper visibility */
.broker-card[data-visible="false"] {
    display: none;
}

.brokers-empty-state {
    margin-top: 20px;
    text-align: center;
    padding: 25px 15px;
    border-radius: 8px;
    border: 1px dashed var(--accent-gray);
    color: var(--medium-gray);
    font-size: 13px;
    display: none;
}

/* “Best for” hint */
.broker-bestfor {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 5px;
}

/* FAQ section */
.brokers-faq h4 {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 6px;
}

.brokers-faq p {
    font-size: 14px;
    color: var(--text-readable);
}

.broker-table-wrapper::-webkit-scrollbar {
    height: 8px; /* Slim height */
}

.broker-table-wrapper::-webkit-scrollbar-track {
    background: var(--near-black); /* Match page bg */
}

.broker-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-gray); /* Dark Grey handle */
    border-radius: 4px;
}

.broker-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--c-cad); /* Neon Cyan on hover */
    cursor: pointer;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--bg-dark);
    border: 1px solid var(--black-out);
    border-radius: 4px;
    margin-top: 20px;
    overflow: hidden;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.breakdown-toggle {
    display: block;
    max-width: 100%;
    text-align: center;
    padding: 15px;
    background: var(--rich-black);
    color: var(--c-cad);
    border: 1px dashed var(--accent-gray);
    margin-top: 20px;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.2s;
}

.breakdown-toggle:hover {
    background: var(--deep-charcoal);
    color: var(--text-main);
    border-color: var(--c-cad);
}

/* SCROLLABLE WRAPPER FOR TABLE */
.breakdown-wrapper {
    display: none; /* Hidden by default */
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    width: 100%;
    padding-right: 5px; /* Space for scrollbar */
    
    /* Firefox Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-gray) var(--near-black);
}

/* Webkit (Chrome/Safari) Scrollbar */
.breakdown-wrapper::-webkit-scrollbar { width: 6px; }

.breakdown-wrapper::-webkit-scrollbar-track {
    background: var(--near-black);
    border-radius: 3px;
}

.breakdown-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--accent-gray);
    border-radius: 6px;
}
.breakdown-wrapper::-webkit-scrollbar-thumb:hover { background-color: var(--dark-medium-gray); }

.breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
}

.breakdown-table td {
    padding: 8px 5px;
    color: var(--text-readable);
    border-bottom: 1px solid var(--rich-black);
}

.breakdown-table tr:hover td {
    background: var(--near-black);
    color: var(--text-main);
}
.gain-pos { color: var(--c-usd); }

.table-show {
    display: block;
    animation: fade-in 0.3s ease;
}

@keyframes fade-in {
    from {
        opacity:0;
        transform:translateY(-10px);
    }

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

/* Custom Range Slider Styling */
.range-wrap { margin-top: 10px; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--c-cad);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 10px var(--neon-cyan-wash-50);
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--accent-gray);
    border-radius: 2px;
}

/* CONTROL PANEL STYLES */
.control-panel {
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-header {
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--text-main);
    background: var(--rich-black);
    user-select: none;
}
.panel-header:hover { background: var(--deep-charcoal); }

.panel-body {
    padding: 20px;
    border-top: 1px solid var(--black-out);
    display: block;
}

.preset-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sys-btn-small {
    background: var(--black-out);
    border: 1px solid var(--accent-gray);
    color: var(--light-gray);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}

.sys-btn-small:hover {
    background: var(--accent-gray);
    color: var(--text-main);
}

.btn-clear {
    border-color: var(--c-aud);
    color: var(--c-aud);
}

.btn-clear:hover {
    background: var(--c-aud);
    color: var(--text-main);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 20px;
}

.cb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--light-mid-gray);
    cursor: pointer;
}
.cb-item:hover { color: var(--text-main); }

/* MATRIX STYLES */
.matrix-overflow-wrapper {
    overflow-x: auto;
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    background: var(--near-black);
    margin-top: 20px;
    box-shadow: 0 0 20px var(--black-overlay-50);
}

.matrix-overflow-wrapper::-webkit-scrollbar {
    height: 6px; /* Very thin horizontal bar */
}

.matrix-overflow-wrapper::-webkit-scrollbar-track {
    background: transparent; /* Invisible track */
    margin: 0 10px; /* Slight padding from edges */
}

.matrix-overflow-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-gray); /* Subtle grey handle */
    border-radius: 10px; /* Fully rounded pill shape */
}

.matrix-overflow-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--c-cad); /* Glows cyan when you grab it */
}

.corr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
}

.corr-table .row-header {
    background: var(--bg-dark) !important;
    font-weight: 900;
    border-right: 1px solid var(--accent-gray);
    position: sticky;
    left: 0;
    z-index: 5;
}
.corr-table tr:hover td { background-color: var(--white-wash-2); }

/* Correlation Colors */
.c-pos-high {
    color: var(--c-usd);
    background: var(--neon-lime-wash-10);
    font-weight: bold;
}

.c-pos-med {
    color: var(--soft-lime);
    background: var(--neon-lime-wash-3);
}

.c-neg-high {
    color: var(--c-aud);
    background: var(--neon-red-wash-10);
    font-weight: bold;
}

.c-neg-med {
    color: var(--soft-red);
    background: var(--neon-red-wash-3);
}

.c-self {
    color: var(--accent-gray);
    background: var(--card-bg);
}

/* --- MARKET HOURS STYLES --- */
.fv-i104 {
    max-width: 1400px;
    padding-bottom: 80px;
}

.fv-i105 {
    border-bottom: 1px solid var(--black-out);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* Status Header */
.status-row-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--accent-gray);
    border-bottom: none; 
    background: var(--near-black);
    border-radius: 8px 8px 0 0;
}

.status-card {
    padding: 25px 15px;
    text-align: center;
    border-right: 1px solid var(--deep-charcoal);
    position: relative;
    overflow: hidden;
}
.status-card:last-child { border-right: none; }

/* Active State Glows */
.status-card.is-open { background: radial-gradient(circle at center, var(--white-wash-3) 0%, transparent 70%); }

.status-card.is-open::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:currentcolor;
    box-shadow: 0 0 10px currentcolor;
}

/* Status Text Coloring */
.status-card .text-aud { color: var(--c-aud); } .status-card.is-open .text-aud { text-shadow: 0 0 15px var(--c-aud); }
.status-card .text-jpy { color: var(--c-jpy); } .status-card.is-open .text-jpy { text-shadow: 0 0 15px var(--c-jpy); }
.status-card .text-gbp { color: var(--c-gbp); } .status-card.is-open .text-gbp { text-shadow: 0 0 15px var(--c-gbp); }
.status-card .text-usd { color: var(--c-usd); } .status-card.is-open .text-usd { text-shadow: 0 0 15px var(--c-usd); }

.status-name {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.status-state {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-gray);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.status-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: var(--dark-medium-gray);
}

.status-card.is-open .status-state { color: var(--text-main); }

.status-card.is-holiday .status-state {
    color: var(--c-aud);
    animation: pulse-status 2s infinite;
}

/* --- TIMELINE VISUALIZER --- */
.timeline-container {
    position: relative;
    background: var(--void);
    height: 380px;

    /* Overflow handled by media query */
    border: 1px solid var(--accent-gray);
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 0 50px var(--black-overlay-80);
}

/* NEW: Scroll Wrapper for alignment */
.timeline-scroll-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The Grid (Zebra Striping) */
.grid-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    pointer-events: none;
}

.grid-col {
    flex: 1;
    border-right: 1px dashed var(--deep-charcoal);
    height: 100%;
}
.grid-col:nth-child(even) { background: var(--white-wash-015); }

/* Axis Labels */
.axis-labels {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    display: flex;
    height: 35px;
    border-top: 1px solid var(--black-out);
    background: var(--near-black);
    z-index: 5;
}

.axis-label {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--dark-medium-gray);
    line-height: 35px;
    font-family: 'Roboto Mono', monospace;
    border-right: 1px solid var(--deep-charcoal);
}

/* Tracks Container */
.session-tracks {
    position: absolute;
    top: 20px; left: 0; width: 100%; 
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* The "Rail" */
.track-row {
    position: relative;
    height: 50px;
    width: 100%;
    border-top: 1px solid var(--white-wash-3);
    border-bottom: 1px solid var(--white-wash-3);
    background: var(--black-overlay-30);
}

.track-label {
    position: absolute;
    left: 15px; top: -10px;
    font-size: 9px; font-weight: 900; letter-spacing: 1px;
    z-index: 2;
    background: var(--void);
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--black-out);
}

.timeline-bar {
    position: absolute;
    height: 24px;
    top: 13px;
    border-radius: 4px;
    opacity: 0.9;
    border-top: 1px solid var(--white-wash-40);
    border-bottom: 1px solid var(--black-overlay-50);
    box-shadow: 0 4px 10px var(--black-overlay-50);
}

/* Neon Gradients */
.bar-sydney { 
    background: linear-gradient(90deg, var(--c-aud) 0%, var(--hot-pink) 100%); 
    box-shadow: 0 0 15px var(--neon-pink-wash-30);
}

.bar-tokyo  { 
    background: linear-gradient(90deg, var(--c-jpy) 0%, var(--deep-teal) 100%); 
    box-shadow: 0 0 15px var(--neon-mint-wash-30);
}

.bar-london { 
    background: linear-gradient(90deg, var(--c-gbp) 0%, var(--vivid-yellow) 100%); 
    box-shadow: 0 0 15px var(--neon-yellow-wash-30);
    color: var(--bg-dark);
}

.bar-ny     { 
    background: linear-gradient(90deg, var(--c-usd) 0%, var(--vivid-lime) 100%); 
    box-shadow: 0 0 15px var(--neon-lime-wash-30);
    color: var(--bg-dark)0; 
}

/* Current Time Cursor */
.current-time-line {
    position: absolute;
    top: 0; bottom: 37px;
    width: 2px;
    background: var(--c-cad);
    z-index: 10;
    box-shadow: 0 0 15px var(--c-cad);
    pointer-events: none;
}

.time-tag {
    position: absolute;
    top: -30px; left: -35px;
    background: var(--bg-dark);
    color: var(--c-cad);
    border: 1px solid var(--c-cad);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    width: 56px;
    text-align: center;
    box-shadow: 0 0 10px var(--neon-cyan-wash-20);
}

/* BIG SELECTOR */
.big-select-wrapper {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.big-select {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    color: var(--text-main);
    border-radius: 50px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    transition: all 0.2s;
}

.big-select:hover {
    border-color: var(--c-cad);
    box-shadow: 0 0 15px var(--neon-cyan-wash-15);
}

.big-select:focus {
    outline: none;
    border-color: var(--c-cad);
}

.select-arrow {
    position: absolute;
    right: 20px;
    top: 18px;
    color: var(--c-cad);
    pointer-events: none;
    font-size: 12px;
}

/* DATA CARDS ROW */
.data-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.data-card {
    background: var(--near-black);
    border: 1px solid var(--black-out);
    border-radius: 6px;
    padding: 15px;
    text-align: center;
}

.dc-label {
    font-size: 10px;
    color: var(--medium-gray);
    font-weight: 700;
    margin-bottom: 5px;
}

.dc-val {
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
    color: var(--text-main);
    font-weight: 700;
}

/* TABS */
.fib-tabs,
.pivot-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 10px;
    overflow-x: auto;
    justify-content: center;
}

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--medium-gray);
    font-weight: 700;
    font-size: 11px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-main);
    background: var(--rich-black);
}

.tab-btn.active {
    background: var(--neon-cyan-wash-10);
    color: var(--c-cad);
    border-color: var(--neon-cyan-wash-30);
}

/* TABLE */
.fib-table,
.pivot-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

.p-label {
    font-weight: 700;
    color: var(--neutral-gray);
    width: 40%;
    text-align: left;
}

.p-val {
    font-weight: 700;
    color: var(--text-main);
    text-align: right;
}

.lvl-r { color: var(--c-aud); }
.lvl-s { color: var(--c-usd); }

.lvl-p {
    color: var(--c-cad);
    font-weight: 900;
    font-size: 16px;
    text-shadow: 0 0 10px var(--neon-cyan-wash-30);
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* DROPDOWN */
.control-bar {
    background: var(--near-black);
    padding: 15px 20px;
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.pair-dropdown {
    background: var(--bg-dark);
    color: var(--text-main);
    border: 1px solid var(--accent-gray);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

/* CHART CARD */
.chart-card {
    background: var(--near-black);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    padding: 25px;
}

.chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 30px;
}

.s-legend {
    font-size: 11px;
    display: flex;
    gap: 15px;
}

/* BAR CHART AREA */
.bar-chart-container { 
    position: relative; 
    height: 300px; 
    margin: 0 10px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-top: 20px; /* Headroom */
    padding-bottom: 30px; /* Footroom for labels */
}

/* Grid Lines */
.chart-grid-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--black-out);
    border-top: 1px dashed var(--accent-gray);
    z-index: 0;
}

/* Columns */
.chart-col { 
    position: relative; 
    width: 6%; 
    height: 100%; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* Centers bar around the middle if needed, but we use absolute positioning */
}

/* Bars */
.chart-bar { 
    position: absolute; 
    left: 10%; 
    width: 80%; 
    background: var(--dark-medium-gray); 
    transition: height 0.5s ease;
    border-radius: 2px 2px 0 0;
}

/* Positive Bar: Grows UP from 50% */
.s-bar-pos {
    bottom: 50%;
    background: var(--c-usd);
    box-shadow: 0 0 10px var(--neon-lime-wash-20);
}

/* Negative Bar: Grows DOWN from 50% */
.s-bar-neg {
    top: 50%;
    background: var(--c-aud);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 10px var(--neon-red-wash-20);
}

/* Labels */
.month-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: var(--medium-gray);
    font-weight: 700;
}

.val-label { 
    position: absolute; 
    width: 100%; text-align: center; 
    font-size: 10px; color: var(--text-main); font-weight: 700; 
    text-shadow: 0 1px 2px var(--bg-dark);
}

/* Value label positioning */
.lbl-pos {
    bottom: 100%;
    margin-bottom: 5px;
    color: var(--c-usd);
}

.lbl-neg {
    top: 100%;
    margin-top: 5px;
    color: var(--c-aud);
}

/* DATA TABLE */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
}
.data-table tr:last-child td { border-bottom: none; }

.rating-pill { 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 10px; 
    font-weight: bold; 
    background: var(--black-out); 
    color: var(--neutral-gray); 
    white-space: nowrap;
    display: inline-block;
}

.rating-bull {
    background: var(--neon-lime-wash-10);
    color: var(--c-usd);
}

.rating-bear {
    background: var(--neon-red-wash-10);
    color: var(--c-aud);
}

.v-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.v-card {
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 6px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
}

.v-card:hover {
    transform: translateY(-2px);
    border-color: var(--dark-gray);
}

/* Intensity Borders */
.v-card.v-intensity-low { border-left: 3px solid var(--text-dim); }
.v-card.v-intensity-med { border-left: 3px solid var(--c-eur); }

.v-card.v-intensity-high {
    border-left: 3px solid var(--c-usd);
    box-shadow: 0 0 10px var(--neon-lime-wash-10);
}

.v-card.v-intensity-extreme {
    border-left: 3px solid var(--c-cad);
    box-shadow: 0 0 15px var(--neon-cyan-wash-20);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border { 0% { border-left-color: var(--c-cad); } 50% { border-left-color: var(--text-main); } 100% { border-left-color: var(--c-cad); } }

.v-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
    margin-top: 5px;
}

.v-pair {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: 1px;
    line-height: 1;
}

.v-change {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 700;
}
.v-up { color: var(--c-usd); }
.v-down { color: var(--c-aud); }

/* Bar Chart */
.v-track {
    width: 100%;
    height: 6px;
    background: var(--black-out);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}

.v-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.v-fill-low { background: var(--dark-medium-gray); }
.v-fill-med { background: var(--c-eur); }
.v-fill-high { background: var(--c-usd); }
.v-fill-extreme { background: var(--c-cad); }

.v-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'Roboto Mono', monospace;
    margin-top: 5px;
}

/* BADGE FIX: Removed Absolute Positioning to prevent overlap */
.v-badge-container {
    min-height: 20px;
    display: flex;
    margin-bottom: 2px;
}

.v-badge { 
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.v-badge-breakout {
    background: var(--neon-cyan-wash-15);
    color: var(--c-cad);
    border: 1px solid var(--c-cad);
}

.v-badge-quiet {
    background: var(--white-wash-5);
    color: var(--medium-gray);
    border: 1px solid var(--accent-gray);
}

.v-sort-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.v-loading-state {
    text-align: center;
    padding: 60px;
    color: var(--text-dim);
    font-size: 14px;
    letter-spacing: 1px;
}

.v-last-updated-tag {
    font-size: 10px;
    color: var(--dark-gray);
    font-family: 'Roboto Mono', monospace;
    margin-top: 5px;
    text-align: right;
}

.v-pip-val {
    color: var(--text-main);
    font-weight: bold;
}

.brokers-updated {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 20px;
    font-family: 'Roboto Mono', monospace;
}

.brokers-filter {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

#toggle-filters-btn {
    padding: 5px 10px;
    font-size: 10px;
}

.no-top-margin { margin-top:0; }
.pos80-bottom-margin { margin-bottom: 80px; }
.neg10-top-margin { margin-top:-10px; }
.pos10-top-margin { margin-top: 10px; }
.pos15-top-margin { margin-top: 15px; }
.pos20-top-margin { margin-top: 20px; }
.pos25-top-margin { margin-top: 25px; }
.pos30-top-margin { margin-top: 30px; }
.pos60-top-margin { margin-top: 60px; }
.pos80-top-margin { margin-top: 80px; }
.dis-none { display: none; }
.bold-font { font-weight:bold; }
.width-100per { width: 100%; }
.width-200px { width: 200px; }
.max-width-1200px { max-width: 1200px; }
.margin-left-15px { margin-left: 15px; }
.opacity100 { opacity: 1; }
.opacity70 { opacity: 0.7; }
.top0per { top: 0%; }
.top25per { top: 25%; }
.top50per { top: 50%; }
.top75per { top: 75%; }
.top100per { top: 100%; }
.gray-border { border-color: var(--dark-medium-gray); }
.text-align-left { text-align: left; }
.height100 { height: 100%; }

.compund-header {
    text-align: center;
    margin-bottom: 40px;
}

.compund-header h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.compund-header p {
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto;
}

.compund-durations {
    display:flex;
    justify-content:space-between;
    margin-top:5px;
}

h2.compound-quote {
    font-size: 16px;
    color: var(--c-cad);
    margin-top: 5px;
}

.compound-inputs {
    margin-top: 20px;
    border-top: 1px dashed var(--accent-gray);
    padding-top: 20px;
}

.compound-monthly-add {
    color: var(--dark-medium-gray);
    font-size: 10px;
}

#res-end {
    color: var(--c-usd);
    text-shadow: 0 0 15px var(--neon-lime-wash-30);
}

#res-profit {
    color: var(--c-usd);
}

.compound-72 {
    color: var(--text-readable);
    line-height: 1.8;
    margin-top: 15px;
}

.correlation-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.correlation-empty-holder {
    text-align:center;
    padding: 60px;
    border: 1px dashed var(--accent-gray);
    border-radius: 8px;
    color: var(--neutral-gray);
}

.correlation-empty-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.correlation-advanced {
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 0;
}

#empty-msg {
    text-align:center;
    padding:40px;
    color:var(--medium-gray);
}

.seo-text-block {
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 1200px;
}

.seo-text-block h2 {
    color: var(--text-main);
    font-size: 1.4rem;
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.seo-text-block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.seo-text-block-h3 {
    color: var(--c-cad);
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.seo-content-wrapper {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    color: var(--text-muted);
}

.seo-content-wrapper h2 {
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

.seo-content-wrapper-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.seo-title {
    color: var(--c-cad);
    font-size: 1rem;
    margin-bottom: 10px;
}

.seo-text-block-index {
    margin-top: 40px;
    border-top: 1px solid var(--accent-gray);
    padding-top: 20px;
}

.correlation-coefficients {
    margin-top: 40px;
    background: var(--near-black);
    padding: 20px;
    border-left: 4px solid var(--c-cad);
    border-radius: 4px;
}

.correlation-coefficients h3 {
    color: var(--text-main);
    font-size: 1rem;
    margin-top: 0;
}

.correlation-coefficients ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    font-size: 0.95rem;
}
.correlation-coefficients li:not(:last-child) { margin-bottom: 8px; }

.correlation-thead {
    z-index:10;
    left:0;
    position:sticky;
    background:var(--rich-black);
}

.dark-gray-font { color: var(--dark-gray); }

.referred-field {
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.position-size-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.position-size-lots {
    background: var(--white-wash-5);
    padding: 15px;
    border-radius: 5px;
    font-family: monospace;
    margin: 10px 0;
}

.position-size-ul {
    list-style: disc;
    margin-left: 20px;
}

.sitemap-header h2 {
    color: var(--text-main);
    margin-bottom: 15px;
}

.sitemap-header p {
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
    max-width: 800px;
}

.sitemap-header div {
    font-size: 10px;
    color: var(--dark-gray);
    margin-top: 10px;
}

.heatmap-ul {
    list-style: none;
    margin-left: 0;
    margin-top: 10px;
}

.heatmap-ul li:not(:last-child) { margin-bottom: 8px; }

.heatmap-bright-green-text {
    padding:0 4px;
    border-radius:2px;
    color:var(--text-main);
}

.market-hours-note {
    font-size: 0.9em;
    opacity: 0.7;
}

.market-hours-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 40px;
}

.market-hours-ul {
    list-style: none;
    margin-left: 0;
}
.market-hours-ul li:not(:last-child) { margin-bottom: 8px; }

.market-hours-strategy {
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 0;
}

.volatility-container {
    max-width: 1400px;
    padding-bottom: 60px;
}

.volatility-intro-header {
    border-bottom: 1px solid var(--accent-gray);
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 20px;
}

.volatility-intro-header h2 {
    font-size: 20px;
    color: var(--text-main);
    margin: 0 0 5px;
}

.volatility-intro-header p {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0;
    max-width: 600px;
}

.volatility-grid {
    margin-top: 80px;
    border-top: 1px solid var(--accent-gray);
    padding-top: 40px;
}

.volatility-grid .anatomy-visual {
    border: none;
    background: transparent;
    padding: 0;
}
.volatility-grid .sub-title { margin-top:0; }

.volatility-h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

.volatility-strategy {
    margin: 5px 0 0 15px;
    font-size: 13px;
}

.fib-holder,
.pivot-holder {
    text-align: center;
    padding-bottom: 40px;
}

.fib-holder .fv-i48,
.pivot-holder .fv-i48 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.fib-manual-input,
.pivot-manual-input {
    font-size: 11px;
    color: var(--dark-gray);
    text-decoration: none;
    border-bottom: 1px dashed var(--dark-gray);
}

#manual-input-panel {
    display: none;
    margin-bottom: 30px;
    background: var(--near-black);
    padding: 20px;
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
}

.fib-grid,
.pivot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:15px;
}

#loader {
    display: none;
    text-align: center;
    padding: 60px;
    color: var(--c-cad);
}

.fib-loader,
.pivot-loader {
    font-size: 40px;
    animation: spin 1s infinite linear;
}

#loader p {
    margin-top: 15px;
    font-size: 12px;
    letter-spacing: 1px;
}

#empty-state {
    text-align: center;
    padding: 80px 20px;
    border: 1px dashed var(--accent-gray);
    border-radius: 8px;
    margin-bottom: 40px;
}

.fib-waiting-icon,
.pivot-waiting-icon {
    font-size: 48px;
    opacity: 0.2;
    margin-bottom: 20px;
}

.fib-ul,
.pivot-ul {
    list-style: none;
    padding: 0;
    font-size: 0.95rem;
}

.fib-ul li:not(:last-child),
.pivot-ul li:not(:last-child) { margin-bottom: 12px; }

.seasonality-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-gray);
}

#chart-title {
    margin: 0;
    color: var(--text-main);
}

#meta-info {
    font-size: 11px;
    color: var(--medium-gray);
    margin-top: 4px;
}

.seasonality-results-list {
    margin-top: 30px;
    overflow-x: auto;
}

.seasonality-warning {
    color: var(--orange);
}

.seasonality-reliability {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.seasonality-reliability-bar {
    width: 50px;
    height: 4px;
    background: var(--accent-gray);
    border-radius: 2px;
}

@media (width <= 1439px) {
    body { padding: 10px; }
    
    .header-top {
        flex-direction: column;
        gap: 15px;
    }
    
    .brand-wrapper {
        width: 100%;
        justify-content: center;
        flex: auto;
    }
    .logo-img { height: 45px; }

    .brand-text-col {
        text-align: left;
        margin-left: 0;
        height: 40px;
    }
    .brand-text { font-size: 12px; }
    #last-updated { font-size: 8px; }
    
    .session-bar {
        width: 100%;
        flex-wrap: wrap;
        flex: auto;
        gap: 8px;
    }

    .session-badge {
        flex: 1 1 40%;
        text-align: center;
    }
    
    /* --- FIXED CONTROLS AREA --- */
    .controls-area { 
        width: 100%; 
        flex-wrap: wrap; 
        justify-content: center;
        flex: auto; 
        gap: 10px;
    }

    /* Remove the forced flex:1 that was stretching buttons awkwardly */
    .system-btn, .sort-group { 
        flex: 0 1 auto; 
        display: flex; 
        justify-content: center; 
    }

    #filter {
        width: 100%;
        order: 3;
        margin-left: unset;
    }

    /* FORCE MENU TO FAR RIGHT */
    .menu-wrapper {
        margin-left: 0;
    }

    /* Safety for the dropdown on mobile */
    .dropdown-content {
        left: 50%;
        right: auto;
        top: 48px;
        transform: translateX(-50%);
        width: 260px;              /* or keep 240px if you prefer */
        max-width: calc(100vw - 32px); /* keep some padding from the edges */
    }

    .dropdown-content.show {
        animation: none;
    }

    /* --- Existing Styles below --- */
    .strength-panel {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
        height: auto !important;
        overflow-x: visible !important;
        padding: 15px;
        justify-items: stretch;
    }

    .eq-item {
        width: auto;
        margin: 0;
        min-width: 0;
    }

    .grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .signal-filters {
        overflow-x: auto;
        padding-bottom: 5px;
        justify-content: flex-start;
    }
}

@media (width <= 1024px) {
    .heatmap-wrapper { grid-template-columns: 1fr; }
}

/* Mobile Responsiveness */
@media (width <= 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    footer {
        padding-right: 20px;
    }

    .fv-i79 .form-label,
    .fv-i80 .form-label,
    .fv-i81 .form-label {
        display: block;
        min-height: 2.6em;  /* tweak this so it fits your longest 2-line label */
        margin-bottom: 0.25rem;
    }
    .broker-filter-grid { grid-template-columns: 1fr; }
    .broker-columns { grid-template-columns: 1fr; }
}

@media (width <= 768px) {
    .chart-modal-wrapper { align-items: flex-end; }

    .modal-content.chart-modal-content {
        width: 100%;
        max-width: 100%;
        height: 85vh;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }
    .toc ul { columns: 1; }
    .anatomy-grid { grid-template-columns: 1fr; }
    .calc-grid { grid-template-columns: 1fr; }

    /* Hide the table header completely */
    .broker-table thead { display: none; }

    /* Make table rows act like cards */
    .broker-table, .broker-table tbody, .broker-table tr, .broker-table td {
        display: block;
        width: 100%;
    }

    .broker-table tr {
        margin-bottom: 20px;
        border: 1px solid var(--accent-gray);
        border-radius: 8px;
        background: var(--near-black);
        padding: 15px;
    }

    /* Style the cells */
    .broker-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 8px 0;
        border-bottom: 1px solid var(--deep-charcoal);
        font-size: 13px;
    }

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

    /* Inject the label from the data-label attribute */
    .broker-table td::before {
        content: attr(data-label);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--text-dim);
        text-align: left;
        margin-right: 15px;
    }

    /* Make the Broker Name stand out */
    .broker-table td.broker-name {
        font-size: 16px;
        color: var(--c-cad);
        justify-content: center;
        border-bottom: 1px solid var(--c-cad);
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .broker-table td.broker-name::before { display: none; /* Hide the word "Broker" for the title */ }
    .broker-table { min-width: 0 !important; }

    /* FIX: Hide the scrollbar track */
    .broker-table-wrapper {
        overflow-x: visible;
        border: none;
    }

    .status-row-header {
        grid-template-columns: 1fr 1fr;
        border-bottom: none;
    }
    .status-card { border-bottom: 1px solid var(--black-out); }
    
    /* Ensure the container handles the overflow */
    .timeline-container { 
        min-width: 100%; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
    }

    /* Apply the fixed width to the WRAPPER, not the children */
    .timeline-scroll-wrapper { min-width: 800px; /* Forces scroll logic */ }
    
    /* Reset children to just fill the wrapper */
    .grid-background, .session-tracks, .axis-labels { min-width: 100%; }

    .data-cards-row { grid-template-columns: 1fr 1fr; }

    .fib-tabs,
    .pivot-tabs { justify-content: flex-start; }
    .big-select { font-size: 14px; }
}

@media (width <= 600px) { 
    .footer-grid { grid-template-columns: 1fr; } 
    .footer-col { text-align: center; }

    .footer-desc, .system-status {
        margin-left:auto;
        margin-right: auto;
    }

    .broker-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .broker-rating {
        text-align: left;
    }

    .broker-visit {
        text-align: center;
        margin-top: 20px;
    }
    
    .broker-visit a {
        display: block;
        width: 100%;
        padding: 12px 0;
        background: var(--neon-cyan-wash-10);
        font-weight: 700;
        font-size: 14px;
    }

    .rating-pill {
        font-size: 9px;
        padding: 3px 6px;
        letter-spacing: -0.5px;
    }
}

@media (width <= 400px) { .strength-panel { grid-template-columns: 1fr; } }

/* Highlighted Headers (Correlation Matrix) */
.highlight-head, .corr-table .highlight-head {
    background-color: var(--accent-gray) !important;
    color: var(--bg-dark) !important;
    box-shadow: 0 0 15px var(--neon-cyan-wash-40);
    z-index: 20 !important;
    transition: all 0.1s ease;
}