/* ==========================================================================
   BOARD DASHBOARD STYLES
   Extracted from board.html inline <style> block + new Phase 1 styles
   ========================================================================== */

#tv-attr-logo,
a#tv-attr-logo,
.chart-fullscreen-overlay #tv-attr-logo,
.tv-lightweight-charts #tv-attr-logo,
a[href*="tradingview.com"][title*="TradingView"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Scroll offset for fixed navbar */
#board_main_page > .grid > section[id$="-section"] {
    scroll-margin-top: calc(var(--navbar-height, 5rem) + 1rem);
}
@media (max-width: 640px) {
    #board_main_page > .grid > section[id$="-section"] {
        scroll-margin-top: calc(var(--shared-mobile-topbar-height, 3rem) + 1rem);
    }
}

/* Global minimum font size: 8px */
main.responsive-zoom text,
main.responsive-zoom .text-\[7px\],
main.responsive-zoom .text-\[6px\] { font-size: 8px !important; }

/* Card header icons */
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.card-icon svg {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================================== */
main.responsive-zoom {
    font-size: 16px;
}
@media (min-width: 1400px) {
    main.responsive-zoom {
        font-size: 17px;
    }
}
@media (min-width: 1600px) {
    main.responsive-zoom {
        font-size: 18px;
    }
}
@media (min-width: 1920px) {
    main.responsive-zoom {
        font-size: 19px;
    }
}
@media (min-width: 2560px) {
    main.responsive-zoom {
        font-size: 20px;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================================================== */
.calendar-events-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

@media (max-width: 839px) {
    .calendar-events-grid {
        grid-template-columns: 1fr;
    }

    .calendar-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .calendar-time-filters {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .calendar-time-filters > button {
        flex: 0 0 auto;
    }

    .metric-section-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .metric-interval-row,
    .metric-filter-row {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .metric-interval-row > button,
    .metric-filter-row > .metric-filter-item {
        flex: 0 0 auto;
    }

    .metric-interval-row::-webkit-scrollbar,
    .metric-filter-row::-webkit-scrollbar {
        height: 6px;
    }

    .metric-interval-row::-webkit-scrollbar-track,
    .metric-filter-row::-webkit-scrollbar-track {
        background: rgba(100, 116, 139, 0.1);
        border-radius: 999px;
    }

    .metric-interval-row::-webkit-scrollbar-thumb,
    .metric-filter-row::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.45));
        border-radius: 999px;
    }
}

/* ==========================================================================
   CALENDAR FILTER STYLES
   ========================================================================== */

/* --- Filter Bar (single compact row) --- */
.cal-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
}
.cal-filter-bar::-webkit-scrollbar { display: none; }

/* Segment = label + chips */
.cal-filter-segment {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cal-filter-seg-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    user-select: none;
}

.cal-filter-chips {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

/* Vertical divider between segments */
.cal-filter-divider {
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* --- Chip base --- */
.cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.34rem 0.72rem;
    border-radius: 0.44rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(156, 163, 175, 0.8);
    transition: all 0.15s ease;
    line-height: 1.5;
}
.cal-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(209, 213, 219, 1);
}

/* Active states per color */
.cal-chip.active                        { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.cal-chip--orange.active                { border-color: rgba(249, 115, 22, 0.4); background: rgba(249, 115, 22, 0.15); color: #fdba74; }
.cal-chip--blue.active                  { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.cal-chip--gray.active                  { border-color: rgba(107, 114, 128, 0.4); background: rgba(107, 114, 128, 0.15); color: #d1d5db; }
.cal-chip--blue.active                { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.15); color: #93c5fd; }

/* Dot indicator inside chip */
.cal-dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* --- Flags --- */
.cal-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 1.78rem;
    border-radius: 0.4rem;
    font-size: 1.12rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.15s ease;
    line-height: 1;
}
.cal-flag[data-currency] {
    font-size: 0;
}
.cal-flag[data-currency]::before {
    content: "";
    width: 1.16rem;
    height: 1.16rem;
    display: block;
    flex-shrink: 0;
    border-radius: 9999px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.20),
        0 2px 5px rgba(0, 0, 0, 0.25);
}
.cal-flag[data-currency="all"]::before {
    content: "🌐";
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1;
}
.cal-flag[data-currency="US"]::before { background-image: url("/api/assets/twemoji/1f1fa-1f1f8.svg"); }
.cal-flag[data-currency="EU"]::before { background-image: url("/api/assets/twemoji/1f1ea-1f1fa.svg"); }
.cal-flag[data-currency="JP"]::before { background-image: url("/api/assets/twemoji/1f1ef-1f1f5.svg"); }
.cal-flag[data-currency="AU"]::before { background-image: url("/api/assets/twemoji/1f1e6-1f1fa.svg"); }
.cal-flag[data-currency="CA"]::before { background-image: url("/api/assets/twemoji/1f1e8-1f1e6.svg"); }
.cal-flag[data-currency="CN"]::before { background-image: url("/api/assets/twemoji/1f1e8-1f1f3.svg"); }
.cal-flag:hover {
    background: rgba(255, 255, 255, 0.07);
}
.cal-flag.active {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.15);
}

.calendar-country-flag-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 9999px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        0 2px 5px rgba(0, 0, 0, 0.24);
}

.calendar-country-flag-icon--title {
    width: 1rem;
    height: 1rem;
}

.calendar-country-flag-stack {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

/* --- Collapsed-filter stacking below desktop --- */
@media (max-width: 1023px) {
    .cal-filter-bar {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
        overflow-x: visible;
        scrollbar-width: auto;
    }
    .cal-filter-divider {
        display: none;
    }
    .cal-filter-segment {
        width: 100%;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .cal-filter-seg-label {
        width: 4.8rem;
        min-width: 4.8rem;
        padding-top: 0.35rem;
    }
    .cal-filter-chips {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }
    .cal-filter-flags {
        gap: 0.3rem;
    }
}

/* ==========================================================================
   CHART & SCROLLBAR
   ========================================================================== */

/* Keep charts at 1:1 scale so cursor and crosshair align */
.chart-no-zoom {
    zoom: 1 !important;
}

#fear-greed-section,
#altcoin-section,
#dominance-section,
#oi-section,
#fr-section,
#ls-section,
#liq-section,
#top-movers-section {
    display: flex;
    flex-direction: column;
}

.board-card-chart-view:not(.hidden) {
    display: flex;
    flex: 1 1 auto;
    min-height: 220px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
}

.board-card-chart-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
}

.board-card-chart-shell {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 14rem;
    contain: layout style;
}

.board-card-chart-shell > .chart-no-zoom {
    width: 100%;
    height: 100%;
}

#liq-chart-view:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
}

#liq-chart-view .board-card-chart-shell {
    flex: 0 0 auto;
    height: clamp(22rem, 52vh, 34rem) !important;
    min-height: 22rem;
}

#liq-chart-container {
    min-height: 0;
}

@media (max-width: 640px) {
    #liq-chart-view .board-card-chart-shell {
        height: clamp(16rem, 55vh, 24rem) !important;
        min-height: 16rem;
    }
}

.custom-scrollbar {
    scrollbar-gutter: stable;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(100, 116, 139, 0.1);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.4));
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.6));
}

/* ==========================================================================
   FADE-UP ENTRANCE ANIMATION
   ========================================================================== */
.fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.fade-up:nth-child(1),
.fade-up:nth-child(2),
.fade-up:nth-child(3),
.fade-up:nth-child(4),
.fade-up:nth-child(5),
.fade-up:nth-child(6),
.fade-up:nth-child(7),
.fade-up:nth-child(8),
.fade-up:nth-child(9),
.fade-up:nth-child(10),
.fade-up:nth-child(11),
.fade-up:nth-child(12) {
    animation-delay: 0s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes metricLoaderSlide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

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

.metric-loader-slide {
    animation: metricLoaderSlide 1.15s ease-in-out infinite;
}

.board-round-loader {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 4px solid rgba(124, 58, 237, 0.15);
    border-top-color: #2563eb;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.15);
    animation: spin 0.9s linear infinite;
}

.board-round-loader-lg {
    width: 3.75rem;
    height: 3.75rem;
    border-width: 4px;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.22);
}

.board-round-loader-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.12);
}

.metric-card-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.5rem;
}

.metric-card-loader.hidden {
    display: none;
}

/* ==========================================================================
   GLASS CARD
   ========================================================================== */
.glass-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    contain: layout style;
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.glass-card > * {
    position: relative;
    z-index: 1;
}

.card-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.card-loading-overlay.hidden {
    display: none;
}

/* Card Hover Lift Effect — disabled for full-width sections */
.glass-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.glass-card.no-hover-lift:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   FULLSCREEN CHART OVERLAY
   ========================================================================== */
.chart-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    animation: fullscreenFadeIn 0.2s ease-out;
}

.chart-fullscreen-overlay.closing {
    animation: fullscreenFadeOut 0.2s ease-out forwards;
}

@keyframes fullscreenFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fullscreenFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.chart-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.chart-fullscreen-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-fullscreen-close {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(100, 116, 139, 0.3);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.chart-fullscreen-close:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.chart-fullscreen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-fullscreen-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.chart-fullscreen-chart {
    flex: 1;
    min-height: 0;
    position: relative;
}

.chart-fullscreen-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   AMBIENT BACKGROUND & MARKET SENTIMENT
   ========================================================================== */
:root {
    --ambient-color-1: #071426;
    --ambient-color-2: #0b2340;
    --ambient-transition: 2s ease-in-out;
}

.board-page body {
    background: linear-gradient(135deg, var(--ambient-color-1) 0%, var(--ambient-color-2) 100%) !important;
    transition: background var(--ambient-transition);
}

/* Global cursor pointer for all interactive elements */
.bento-grid button,
.bento-grid select,
.bento-grid [role="button"],
.bento-grid .altcoin-range-controls button,
.bento-grid .liq-timeframe-btn,
.bento-grid .board-header-select,
.bento-grid .metric-header-filter-select,
#main-navbar button,
#main-navbar select,
#theme-toggle-wrapper {
    cursor: pointer;
}

/* ==========================================================================
   LIVE UPDATE & VALUE CHANGE ANIMATIONS
   ========================================================================== */

/* Live Update Pulse Animation */
@keyframes dataPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0); }
    50% { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.4); }
}

.glass-card.pulse-update {
    animation: dataPulse 0.6s ease-out;
}

/* Value Change Animations */
@keyframes valueChangeUp {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes valueChangeDown {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes valueExitUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes valueExitDown {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
}

.value-morphing {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.value-old {
    position: absolute;
}

.value-exit-up { animation: valueExitUp 0.3s ease-out forwards; }
.value-exit-down { animation: valueExitDown 0.3s ease-out forwards; }
.value-enter-up { animation: valueChangeUp 0.3s ease-out forwards; }
.value-enter-down { animation: valueChangeDown 0.3s ease-out forwards; }

/* Color flash on value change */
@keyframes flashGreen {
    0% { color: #22c55e; text-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
    100% { color: inherit; text-shadow: none; }
}

@keyframes flashRed {
    0% { color: #ef4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
    100% { color: inherit; text-shadow: none; }
}

.flash-green { animation: flashGreen 0.8s ease-out; }
.flash-red { animation: flashRed 0.8s ease-out; }

/* ==========================================================================
   LIVE INDICATOR
   ========================================================================== */
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.live-pulse-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

.live-pulse-dot.disconnected {
    background: #ef4444;
    animation: none;
}

/* ==========================================================================
   SPARKLINE
   ========================================================================== */
.sparkline-container {
    width: 100%;
    height: 28px;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.sparkline-container:hover {
    opacity: 1;
}

.sparkline-container svg {
    display: block;
}

/* ==========================================================================
   CROSS-CARD HIGHLIGHT & MICRO-INTERACTIONS
   ========================================================================== */
.cross-highlight {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    transition: all 0.2s ease;
}

.btn-press {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-press:active {
    transform: scale(0.97);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        rgba(100, 116, 139, 0.1) 25%,
        rgba(100, 116, 139, 0.2) 50%,
        rgba(100, 116, 139, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ==========================================================================
   CORRELATION BADGE
   ========================================================================== */
.correlation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.correlation-badge.bullish {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.correlation-badge.bearish {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.correlation-badge.neutral {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* ==========================================================================
   PERCENTILE BADGE
   ========================================================================== */
.percentile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.percentile-badge.extreme-high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.percentile-badge.extreme-low {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* ==========================================================================
   TOP MOVERS
   ========================================================================== */
.mover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 5px 8px;
    border-radius: 0.375rem;
    background: rgba(100, 116, 139, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.mover-item-top {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.10);
}

.mover-item-low {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.12);
    box-shadow: inset 0 -1px 0 rgba(248, 113, 113, 0.10);
}



.mover-item .symbol {
    font-weight: 700;
    color: #e2e8f0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mover-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.top100-asset-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: max-content;
    justify-self: start;
    height: 0.95rem;
    padding: 0 0.32rem;
    border-radius: 0.2rem;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    color: #cbd5e1;
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.top100-asset-badge-crypto {
    color: #67e8f9;
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.18);
}

.top100-asset-badge-commodity {
    color: #facc15;
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.20);
}

.top100-asset-badge-index {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.20);
}

.top100-asset-badge-equity {
    color: #f9a8d4;
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.20);
}

.top100-asset-badge-macro {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.20);
}

.coin-inline-icon-wrap {
    width: 1rem;
    height: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coin-inline-icon-wrap-sm {
    width: 1.05rem;
    height: 1.05rem;
}

.coin-select-leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.2rem;
    flex-shrink: 0;
}

.coin-inline-icon {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
    display: block;
}

.coin-inline-icon-sm {
    width: 100%;
    height: 100%;
}

.coin-inline-fallback {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.coin-fallback-svg {
    width: 72%;
    height: 72%;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coin-fallback-emoji {
    font-size: 0.72rem;
    line-height: 1;
}

.coin-inline-icon-wrap.coin-inline-icon-failed .coin-inline-icon {
    display: none;
}

.coin-inline-icon-wrap.coin-inline-icon-failed .coin-inline-fallback {
    display: inline-flex;
}

.coin-inline-brand-wrap {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coin-inline-brand-wrap-sm {
    width: 1.05rem;
    height: 1.05rem;
}

.coin-brand-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Exchange letter fallback — colored 1-2 letter badge */
.exchange-letter-fallback {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
}

/* Market type SVG icons (spot / perpetual / inverse) */
.market-type-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.market-type-svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    flex-shrink: 0;
}

.mover-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    min-width: max-content;
}

.mover-val {
    font-weight: 700;
    font-size: 0.72rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.mover-item-top .mover-val {
    color: #a7f3d0;
}

.mover-item-low .mover-val {
    color: #fecaca;
}

.mover-item .change {
    font-weight: 700;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.liq-feed-scroll {
    max-height: 21rem;
    min-height: 14rem;
}

.movers-scroll {
    max-height: 24rem;
    min-height: 17rem;
    padding-right: 0.1rem;
}

.mover-item .change.positive { color: #22c55e; }
.mover-item .change.negative { color: #ef4444; }

/* Rank badge */
.mover-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.12);
    border: 1px solid rgba(100, 116, 139, 0.10);
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.mover-item-top .mover-rank {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.14);
}

.mover-item-low .mover-rank {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.14);
}

/* Background share bar */
.mover-item {
    position: relative;
    overflow: hidden;
}

.mover-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.10) 0%,
        rgba(16, 185, 129, 0.04) 100%);
    border-radius: inherit;
    pointer-events: none;
    transition: width 0.4s ease;
}

.mover-bar-low {
    background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.10) 0%,
    rgba(239, 68, 68, 0.04) 100%);
}

.mover-item .symbol,
.mover-item .change {
    position: relative;
    z-index: 1;
}

.mover-pct {
    font-size: 0.6rem;
    color: #475569;
    font-weight: 600;
}

.mover-item-top .mover-pct {
    color: #86efac;
}

.mover-item-low .mover-pct {
    color: #fca5a5;
}

/* Mobile adjustments for liq summary */
@media (max-width: 640px) {
    .liq-summary-content {
        padding: 0.75rem 0.75rem;
    }
    .liq-summary-value {
        font-size: 0.875rem;
    }
    .liq-summary-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   PULSE WAVEFORM & ORDERBOOK DEPTH
   ========================================================================== */
.pulse-waveform {
    height: 40px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 0;
}

.pulse-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.6));
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.depth-bar {
    height: 20px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.2);
}

.depth-bar .bids {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.6));
    transition: width 0.5s ease;
}

.depth-bar .asks {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(270deg, rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.6));
    transition: width 0.5s ease;
}

/* ==========================================================================
   SMART TOOLTIP
   ========================================================================== */
.smart-tooltip {
    position: fixed;
    z-index: 99999;
    background: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.75rem;
    line-height: 1.6;
    max-width: 300px;
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.1);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ==========================================================================
   INTERVAL INFO TOOLTIP  (round ⓘ button next to countdown)
   ========================================================================== */
.interval-info-btn {
    position: relative;
}

/* Portal tooltip — rendered at document.body level, above everything */
.interval-info-tooltip-portal {
    position: fixed;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 10px 16px;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.1);
    color: #ffffff;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    z-index: 99999;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.interval-info-tooltip-portal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card calculation info button (emoji next to title) */
.card-calc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border: none;
    background: transparent;
    color: #60a5fa;
    font-size: 14px;
    cursor: help;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.2s;
    opacity: 0.7;
}
.card-calc-info-btn:hover {
    transform: scale(1.2);
    opacity: 1;
}

/* Portal tooltip for card calculation info */
.card-calc-tooltip-portal {
    /* position: fixed (statt absolute) — sonst tragen die ans <body>
       angehaengten Tooltip-Portale zur scrollHeight des Dokuments bei und
       erzeugen leeren Scroll-Raum unter dem Bento-Grid. */
    position: fixed;
    white-space: normal;
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 14px 18px;
    border-radius: 12px;
    background: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(59, 130, 246, 0.1);
    color: #ffffff;
    font-weight: 400;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    z-index: 99999;
    width: min(520px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    min-width: 0;
    box-sizing: border-box;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.card-calc-tooltip-portal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Tooltip table classes (.ctt-*) ── */
.ctt-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.ctt-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.ctt-table td {
    padding: 4px 0;
    vertical-align: top;
}
.ctt-label {
    color: #60a5fa;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 12px !important;
}
.ctt-weight {
    color: #e2e8f0;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    padding-right: 12px !important;
    min-width: 2.2rem;
}
.ctt-desc {
    color: #cbd5e1;
    line-height: 1.45;
}
.ctt-sep td {
    padding: 0 !important;
    height: 8px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.18);
}
.ctt-meta-label {
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 12px !important;
    padding-top: 6px !important;
}
.ctt-meta-val {
    color: #94a3b8;
    padding-top: 6px !important;
}
.ctt-meta-src td,
.ctt-meta-plan td {
    padding-top: 6px !important;
}

@media (max-width: 360px) {
    .card-calc-tooltip-portal {
        padding: 12px 14px;
        font-size: 0.68rem;
    }
    .ctt-label,
    .ctt-weight,
    .ctt-meta-label {
        white-space: normal;
        padding-right: 8px !important;
    }
    .ctt-desc,
    .ctt-meta-val {
        overflow-wrap: anywhere;
    }
}

.smart-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.smart-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.smart-tooltip .tooltip-row:last-child {
    margin-bottom: 0;
}

.smart-tooltip .tooltip-label {
    color: #94a3b8;
    font-size: 0.7rem;
}

.smart-tooltip .tooltip-value {
    color: #ffffff;
    font-weight: 600;
}

/* ==========================================================================
   ACTIVITY STATS ROW
   ========================================================================== */
.activity-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.activity-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.activity-stat .stat-icon {
    font-size: 1rem;
}

.activity-stat .stat-value {
    color: white;
    font-weight: 600;
}

.activity-stat .stat-label {
    color: #64748b;
}

.activity-stat .stat-delta {
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: 3px;
}

.activity-stat .stat-delta.up {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.activity-stat .stat-delta.down {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ==========================================================================
   PHASE 1: MARKET PULSE STRIP (NEW)
   ========================================================================== */
#market-pulse-strip {
    position: sticky;
    top: 4rem;
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}

#market-pulse-strip::-webkit-scrollbar {
    display: none;
}

.pulse-kpi {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.375rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s, border-color 0.2s;
}

.pulse-kpi:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
}

.pulse-kpi .kpi-label {
    font-weight: 600;
    color: #e2e8f0;
}

.pulse-kpi .kpi-value {
    font-weight: 700;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}

.pulse-kpi .kpi-change {
    font-size: 0.6875rem;
    font-weight: 600;
}

.pulse-kpi .kpi-change.positive {
    color: #4ade80;
}

.pulse-kpi .kpi-change.negative {
    color: #f87171;
}

.pulse-divider {
    width: 1px;
    height: 1.25rem;
    background: rgba(100, 116, 139, 0.3);
    flex-shrink: 0;
}

/* Responsive: static on very small screens */
@media (max-width: 768px) {
    #market-pulse-strip {
        position: static;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-radius: 0.75rem;
    }
}

/* ==========================================================================
   PHASE 1: SECTION HEADERS (NEW)
   ========================================================================== */
.board-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
    opacity: 0;
    animation: fadeUp 0.5s ease-out forwards;
}

.board-section-header:first-of-type {
    margin-top: 0.25rem;
}

.board-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #475569;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.board-section-label .section-icon {
    font-size: 0.75rem;
}

.board-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(71, 85, 105, 0.4), transparent);
}

/* ==========================================================================
   CARD INTERIORS — Modern Component Styles
   ========================================================================== */

/* ---- Shared card daily-view layout ---- */
.card-daily-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

/* ---- Status badge (FNG classification, Altcoin status) ---- */
.card-status-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.15rem 0.45rem;
    border-radius: 0.15rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(30, 41, 59, 0.35);
    color: #e2e8f0;
    white-space: nowrap;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

/* ---- Prev-day row ---- */
.card-prev-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.65rem;
    opacity: 0.85;
}

/* ---- Compact footer row (badge + vortag inline) ---- */
.card-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    font-size: 0.65rem;
    flex-wrap: wrap;
}

.card-footer-sep {
    color: #334155;
    font-size: 0.5rem;
    line-height: 1;
}

.card-prev-label {
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.card-prev-value {
    color: #94a3b8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Delta badge ---- */
.card-delta-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 0.15rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.card-delta-badge:empty { display: none; }

.card-delta-badge.delta-up {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.card-delta-badge.delta-down {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.card-delta-badge.delta-flat {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

/* ---- Info line (small subtitle text) ---- */
.card-info-line {
    font-size: 0.625rem;
    color: #64748b;
    text-align: center;
    font-weight: 600;
    min-height: 0.875rem;
}

.card-info-line:empty { display: none; }

/* ---- Sparkline area ---- */
.card-sparkline-wrap {
    width: 100%;
    margin-top: 0.1rem;
}

.card-sparkline-label {
    font-size: 0.55rem;
    color: #3f4f63;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.05rem;
}

/* ==== Fear & Greed — compact gauge ==== */
.fng-gauge-wrap {
    width: 100%;
    max-width: 16rem;
}

/* ==== Altcoin — circular ring ==== */
.altcoin-ring-wrap {
    position: relative;
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
}

.altcoin-ring-svg {
    width: 100%;
    height: 100%;
}

.altcoin-ring-label {
    position: absolute;
    bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.altcoin-ring-label-btc {
    left: 0;
    color: #f97316;
}

.altcoin-ring-label-alt {
    right: 0;
    color: #3b82f6;
}

/* ==== Dominance / Flow Mode Toggle ==== */
.dom-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    padding: 2px;
}

.dom-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: none;
    background: transparent;
    color: rgba(148, 163, 184, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dom-mode-pill:hover {
    color: rgba(209, 213, 219, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.dom-mode-pill.active {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.15);
}

/* ==== Top 100 Mode Toggle ==== */
.top100-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    padding: 2px;
}

.top100-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: none;
    background: transparent;
    color: rgba(148, 163, 184, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.top100-mode-pill:hover {
    color: rgba(209, 213, 219, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.top100-mode-pill.active {
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
    box-shadow: 0 0 6px rgba(20, 184, 166, 0.15);
}

/* ==========================================================================
   GLOBAL BOARD CONTROL BAR (Kategorie · Coin · Zeitraum · Ansicht)
   Full-width sticky toolbar that drives every card at once.
   ========================================================================== */
.board-controlbar-shell {
    position: sticky;
    top: var(--navbar-height, 5rem);
    z-index: 30;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1px;
    padding: 0.6rem clamp(0.75rem, 2vw, 1.5rem);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.72) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.board-controlbar {
    width: min(100%, 1400px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
}

.board-ctl-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.board-ctl-group--scope {
    flex: 1 1 auto;
    min-width: 0;
}

.board-ctl-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.board-ctl-divider {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    min-height: 1.7rem;
    background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.22), transparent);
}

/* ---- Kategorie (segmented pills) ---- */
.board-market-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.22rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.7rem;
    background: rgba(2, 6, 23, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow-x: auto;
    scrollbar-width: none;
}

.board-market-scope::-webkit-scrollbar {
    display: none;
}

.board-market-scope-pill {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2rem;
    padding: 0 0.8rem;
    border: none;
    background: transparent;
    border-radius: 0.55rem;
    color: #8ea1bc;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.board-market-scope-pill__icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    opacity: 0.7;
    transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.board-market-scope-pill:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

.board-market-scope-pill:hover .board-market-scope-pill__icon {
    opacity: 1;
}

.board-market-scope-pill:active {
    transform: translateY(0.5px);
}

.board-market-scope-pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, 0.55);
}

.board-market-scope-pill.active {
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.32), rgba(59, 130, 246, 0.24));
    box-shadow:
        inset 0 0 0 1px rgba(94, 234, 212, 0.35),
        0 6px 18px rgba(14, 165, 233, 0.18);
}

.board-market-scope-pill.active .board-market-scope-pill__icon {
    opacity: 1;
    color: #5eead4;
    transform: scale(1.05);
}

/* ---- Coin select ----
   The native <select> is replaced at runtime by the custom-select widget
   (coin icons via data-select-icons="coin"). These rules style (a) the brief
   pre-upgrade native select and (b) the upgraded trigger so it fits the bar. */
.board-ctl-select {
    appearance: none;
    -webkit-appearance: none;
    height: 2rem;
    padding: 0 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(2, 6, 23, 0.4);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.board-ctl-select option {
    background: #0f172a;
    color: #e2e8f0;
}

.board-controlbar .custom-select-trigger {
    height: 2rem;
    min-width: 5.2rem;
    padding: 0 0.6rem;
    gap: 0.4rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(2, 6, 23, 0.4);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.board-controlbar .custom-select-trigger:hover {
    border-color: rgba(94, 234, 212, 0.4);
    background: rgba(15, 23, 42, 0.6);
}

.board-controlbar .custom-select-trigger.is-open,
.board-controlbar .custom-select-trigger:focus-visible {
    outline: none;
    border-color: rgba(94, 234, 212, 0.6);
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.15);
}

.board-controlbar .custom-select-trigger-icon {
    display: inline-flex;
    align-items: center;
    width: 1.05rem;
    height: 1.05rem;
}

/* ---- Segmented controls (Zeitraum / Ansicht) ---- */
.board-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.board-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 1.7rem;
    padding: 0 0.7rem;
    border: none;
    background: transparent;
    border-radius: 0.42rem;
    color: #8ea1bc;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.board-seg-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.18s ease;
}

.board-seg-btn:hover {
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

.board-seg-btn:disabled,
.board-seg-btn.is-disabled {
    color: #52627a;
    cursor: not-allowed;
    opacity: 0.55;
}

.board-seg-btn:disabled:hover,
.board-seg-btn.is-disabled:hover {
    color: #52627a;
    background: transparent;
}

.board-seg-btn.active {
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.32), rgba(59, 130, 246, 0.24));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.3);
}

.board-seg-btn.active svg {
    opacity: 1;
}

.board-seg-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, 0.55);
}

@media (max-width: 860px) {
    .board-ctl-divider {
        display: none;
    }

    .board-ctl-group--scope {
        flex: 1 1 100%;
        order: -1;
    }

    .board-market-scope {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .board-controlbar-shell {
        padding: 0.5rem 0.6rem;
    }

    .board-controlbar {
        gap: 0.4rem 0.5rem;
    }

    .board-ctl-label {
        display: none;
    }

    .board-market-scope-pill {
        height: 1.9rem;
        padding: 0 0.6rem;
        gap: 0.3rem;
        font-size: 0.66rem;
    }

    .board-market-scope-pill__icon {
        width: 0.8rem;
        height: 0.8rem;
    }

    .board-seg-btn {
        height: 1.7rem;
        padding: 0 0.55rem;
        font-size: 0.68rem;
    }

    .board-segmented--view .board-seg-btn span {
        display: none;
    }
}

@media (max-width: 640px) {
    .board-controlbar-shell {
        top: var(--shared-mobile-topbar-height, 3rem);
    }
}

/* --------------------------------------------------------------------------
   Per-card controls now superseded by the global control bar.
   Hidden: timeframe selects, inline interval buttons, daily/chart view toggles.
   Kept:   exchange/stablecoin filters, fullscreen & reset-view helpers,
           dominance mode pills.
   Die Liquidationskarte war hier bis 03.08.2026 ausgenommen -- sie hatte als
   einzige noch einen eigenen Ansichts-Knopf, weil die Leiste oben sie nicht
   mitschaltete. Beides ist behoben, die Ausnahme faellt weg.
   -------------------------------------------------------------------------- */
html.board-page .market-view-toggle-btn,
html.board-page .metric-view-toggle-btn,
html.board-page .market-view-btn,
html.board-page .market-chart-header-select,
html.board-page .market-chart-interval-select,
html.board-page .metric-chart-header-select,
html.board-page .metric-interval-row,
html.board-page #cvd-timeframe-select {
    display: none !important;
}

/* ==== Market Flow Layout ==== */
.flow-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.15rem;
    min-height: 220px;
}

.flow-layout.hidden {
    display: none;
}

/* -- Flow Histogram (left column) -- */
.flow-histo-wrap {
    flex-shrink: 0;
    height: 14rem;
    width: auto;
    aspect-ratio: 130 / 148;
}

.flow-histo-svg {
    width: 100%;
    height: 100%;
}

.flow-histo-svg rect[id^="histo-"] {
    transition: y 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    min-width: 0;
}

.flow-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.flow-net-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* 25.08.2026: Der Overflow-Schutz der Bento-Sektionen (word-break:break-word
   !important) brach Label und Signaltext mitten im Wort ("RISK SIGNA L",
   "Netto-Verkaufsdruc k"). Bevorzugt an Leerzeichen/Bindestrich umbrechen;
   break-word greift nur noch, wenn ein einzelnes Wort nicht passt, und
   hyphens:auto trennt deutsche Einwoerter sauber (html hat lang="de"). */
html.board-page .flow-net-label,
html.board-page .flow-net-value {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

.flow-net-value {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
    transition: color 0.35s ease;
}

.flow-net-value.flow-positive { color: #34d399; }
.flow-net-value.flow-negative { color: #f87171; }
.flow-net-value.flow-neutral  { color: #94a3b8; }

.flow-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.flow-row {
    display: grid;
    grid-template-columns: auto 5rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

/* Cash-Gegenseite (Stables im Coins-Scope): abgesetzte Zeile ohne Balken.
   Der Betrag ist die Gegenbuchung zu BTC+ETH+Other und damit fast immer der
   groesste der Karte — mit Balken wuerde er die Coin-Balken zusammenstauchen. */
.flow-row[data-flow-cash="1"] {
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.flow-row[data-flow-cash="1"] .flow-bar-track {
    visibility: hidden;
}

.flow-row[data-flow-cash="1"] .flow-row-name {
    opacity: 0.75;
}

.flow-row-dot {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 0.1rem;
    flex-shrink: 0;
}

.flow-row-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.flow-bar-track {
    position: relative;
    height: 0.55rem;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 999px;
    overflow: hidden;
}

.flow-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.25);
    z-index: 1;
}

.flow-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    left: 50%;
    right: auto;
    transform-origin: center left;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.35s ease;
    min-width: 0;
}

/* Positive flow (right of center) */
.flow-bar.flow-dir-pos {
    left: 50%;
    right: auto;
    transform: translateX(0);
}

/* Negative flow (left of center) */
.flow-bar.flow-dir-neg {
    left: 50%;
    right: auto;
    transform: translateX(-100%);
}

/* Bar colors per asset */
.flow-bar-btc.flow-dir-pos   { background: linear-gradient(90deg, rgba(245,158,11,0.3), rgba(245,158,11,0.85)); }
.flow-bar-btc.flow-dir-neg   { background: linear-gradient(270deg, rgba(245,158,11,0.3), rgba(245,158,11,0.85)); }
.flow-bar-eth.flow-dir-pos   { background: linear-gradient(90deg, rgba(6,182,212,0.3), rgba(6,182,212,0.85)); }
.flow-bar-eth.flow-dir-neg   { background: linear-gradient(270deg, rgba(6,182,212,0.3), rgba(6,182,212,0.85)); }
.flow-bar-other.flow-dir-pos { background: linear-gradient(90deg, rgba(59, 130, 246,0.3), rgba(59, 130, 246,0.85)); }
.flow-bar-other.flow-dir-neg { background: linear-gradient(270deg, rgba(59, 130, 246,0.3), rgba(59, 130, 246,0.85)); }
.flow-bar-stable.flow-dir-pos{ background: linear-gradient(90deg, rgba(16,185,129,0.3), rgba(16,185,129,0.85)); }
.flow-bar-stable.flow-dir-neg{ background: linear-gradient(270deg, rgba(16,185,129,0.3), rgba(16,185,129,0.85)); }

.flow-row-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 4.5rem;
    text-align: right;
    transition: color 0.35s ease;
}

.flow-val-btc    { color: #fbbf24; }
.flow-val-eth    { color: #22d3ee; }
.flow-val-other  { color: #60a5fa; }
.flow-val-stable { color: #6ee7b7; }

/* ==== Dominance — Donut + Legend layout ==== */
.dominance-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    min-height: 220px;
}

.dominance-layout.hidden {
    display: none;
}

.dominance-donut-wrap {
    flex-shrink: 0;
    height: 14rem;
    width: auto;
    aspect-ratio: 1 / 1;
}

.dominance-donut-svg {
    width: 100%;
    height: 100%;
}

/* Donut segments transitions */
#dom-seg-btc, #dom-seg-eth, #dom-seg-other, #dom-seg-stable {
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.dominance-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
}

.dom-legend-row {
    display: grid;
    grid-template-columns: auto 4.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.dom-legend-dot {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 0.1rem;
    flex-shrink: 0;
}

.dom-legend-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dom-legend-fill {
    --dom-pct: 0%;
    display: block;
    min-width: 0;
    height: 0.55rem;
    border-radius: 999px;
    background-color: rgba(51, 65, 85, 0.6);
    overflow: hidden;
    position: relative;
}

.dom-legend-fill::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--dom-pct);
    border-radius: inherit;
    transition: width 0.6s ease;
}

#mdr-btc-fill::before { background: linear-gradient(90deg, rgba(245, 158, 11, 0.45), rgba(245, 158, 11, 0.95)); }
#mdr-eth-fill::before { background: linear-gradient(90deg, rgba(6, 182, 212, 0.45), rgba(6, 182, 212, 0.95)); }
#mdr-other-fill::before { background: linear-gradient(90deg, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.95)); }
#mdr-stable-fill::before { background: linear-gradient(90deg, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0.95)); }

.dom-legend-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dom-val-btc    { color: #fbbf24; }
.dom-val-eth    { color: #22d3ee; }
.dom-val-other  { color: #60a5fa; }
.dom-val-stable { color: #6ee7b7; }

/* Gesamtsumme ueber der Karte -- nur im Volumenanteil eingeblendet, s.
   _applyDomTotal(). Im Kapitalfluss nennt das Risk-Signal denselben Betrag. */
.dom-total-bar {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.7rem;
    border-radius: 0.5rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.dom-total-bar.hidden {
    display: none;
}

.dom-total-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dom-total-value {
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==== Betraege in der Karte (10.08.2026) ====
   Beide Ansichten zeigten ausschliesslich Prozente. Die Zahlenspalte traegt
   jetzt zwei Zeilen: Anteil oben, absoluter Betrag darunter. Der Betrag kommt
   fertig aus der Quelle (volume_bucket_*_usd / flow_bucket_*_usd) und wird im
   Browser nur formatiert — s. _domUsd() in market-cards.js. */
.dom-legend-figure,
.flow-row-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.15;
    min-width: 0;
}

.dom-legend-usd,
.flow-row-usd {
    font-size: 0.66rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Solange die Quelle keinen Betrag liefert, darf die leere Zeile keine Hoehe
   belegen — sonst sitzt die Prozentzahl sichtbar ausserhalb der Zeilenmitte. */
.dom-legend-usd:empty,
.flow-row-usd:empty {
    display: none;
}

/* Mobile: stack donut + legend vertically */
@media (max-width: 480px) {
    .dominance-layout {
        flex-direction: column;
        align-items: center;
    }
    .dominance-donut-wrap {
        height: 8rem;
        width: auto;
    }
    .dominance-legend {
        width: 100%;
        gap: 0.5rem;
    }
    .flow-layout {
        flex-direction: column;
        align-items: center;
    }
    .flow-histo-wrap {
        height: 8rem;
    }
    .flow-content {
        width: 100%;
    }
}

/* ---- Card header divider ---- */
.bento-grid .metric-section-header {
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0.875rem !important;
}

.bento-fng .metric-section-header       { border-bottom-color: rgba(245, 158,  11, 0.18); }
.bento-altcoin .metric-section-header   { border-bottom-color: rgba(59, 130, 246, 0.18); }
.bento-dominance .metric-section-header { border-bottom-color: rgba(249, 115,  22, 0.18); }
.bento-global .metric-section-header    { border-bottom-color: rgba(  6, 182, 212, 0.18); }
.bento-oi .metric-section-header        { border-bottom-color: rgba( 59, 130, 246, 0.18); }
.bento-fr .metric-section-header        { border-bottom-color: rgba(239,  68,  68, 0.18); }
.bento-ls .metric-section-header        { border-bottom-color: rgba( 16, 185, 129, 0.18); }
.bento-cvd .metric-section-header       { border-bottom-color: rgba( 34, 211, 238, 0.18); }
.bento-liq .metric-section-header       { border-bottom-color: rgba(236,  72, 153, 0.18); }
.bento-movers .metric-section-header    { border-bottom-color: rgba( 20, 184, 166, 0.18); }
.bento-calendar .metric-section-header  { border-bottom-color: rgba( 59, 130, 246, 0.18); }

/* ---- Icon buttons in header (view-toggle, reset, fullscreen) ---- */
.bento-grid .market-view-toggle-btn,
.bento-grid .metric-view-toggle-btn,
.bento-grid .metric-reset-view-btn,
.bento-grid .chart-fullscreen-btn {
    width: 1.625rem;
    height: 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.2rem;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #475569 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    cursor: pointer;
}

.bento-grid .market-view-toggle-btn:hover,
.bento-grid .metric-view-toggle-btn:hover,
.bento-grid .metric-reset-view-btn:hover,
.bento-grid .chart-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #94a3b8 !important;
}

.bento-grid .market-view-toggle-btn.hidden,
.bento-grid .metric-view-toggle-btn.hidden,
.bento-grid .metric-reset-view-btn.hidden,
.bento-grid .chart-fullscreen-btn.hidden {
    display: none !important;
}

/* ---- Flat interval / period tab buttons ---- */
/* Base reset for ALL tab-style buttons inside grid */
.bento-grid .market-chart-interval-btn,
.bento-grid .oi-interval-btn,
.bento-grid .fr-interval-btn,
.bento-grid .ls-interval-btn {
    padding: 0.175rem 0.5rem;
    font-size: 0.6375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 0.125rem !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    position: relative;
    transition: color 0.15s;
    cursor: pointer;
}

.bento-grid .market-chart-interval-btn::after,
.bento-grid .oi-interval-btn::after,
.bento-grid .fr-interval-btn::after,
.bento-grid .ls-interval-btn::after {
    content: '';
    position: absolute;
    left: 0.125rem;
    right: 0.125rem;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s;
}

.bento-grid .market-chart-interval-btn:hover,
.bento-grid .oi-interval-btn:hover,
.bento-grid .fr-interval-btn:hover,
.bento-grid .ls-interval-btn:hover {
    color: #94a3b8 !important;
}

/* Active state: white text + accent underline coloured per card */
.bento-grid .market-chart-interval-btn.bg-blue-600,
.bento-grid .oi-interval-btn.bg-blue-600,
.bento-grid .fr-interval-btn.bg-blue-600,
.bento-grid .ls-interval-btn.bg-blue-600 {
    color: #e2e8f0 !important;
}

.bento-oi .oi-interval-btn.bg-blue-600::after     { background: #3b82f6; }
.bento-fr .fr-interval-btn.bg-blue-600::after     { background: #ef4444; }
.bento-ls .ls-interval-btn.bg-blue-600::after     { background: #10b981; }
.bento-fng .market-chart-interval-btn.bg-blue-600::after { background: #f59e0b; }
.bento-altcoin .market-chart-interval-btn.bg-blue-600::after { background: #3b82f6; }
.bento-dominance .market-chart-interval-btn.bg-blue-600::after { background: #f97316; }
.bento-global .market-chart-interval-btn.bg-blue-600::after { background: #06b6d4; }

/* Altcoin period tabs (7d / 30d / 90d) */
#altcoin-7d, #altcoin-30d, #altcoin-90d {
    padding: 0.175rem 0.5rem !important;
    font-size: 0.6375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 0.125rem !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    position: relative;
    transition: color 0.15s;
}

#altcoin-7d::after, #altcoin-30d::after, #altcoin-90d::after {
    content: '';
    position: absolute;
    left: 0.125rem;
    right: 0.125rem;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s;
}

/* Active altcoin tab — JS sets border-blue-500/40 bg-blue-500/10 text-blue-300 */
#altcoin-7d.text-blue-300,
#altcoin-30d.text-blue-300,
#altcoin-90d.text-blue-300 {
    color: #93c5fd !important;
    background: transparent !important;
}

#altcoin-7d.text-blue-300::after,
#altcoin-30d.text-blue-300::after,
#altcoin-90d.text-blue-300::after {
    background: #3b82f6;
}

#altcoin-7d.altcoin-period-disabled,
#altcoin-30d.altcoin-period-disabled,
#altcoin-90d.altcoin-period-disabled {
    color: #334155 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#altcoin-7d.altcoin-period-disabled::after,
#altcoin-30d.altcoin-period-disabled::after,
#altcoin-90d.altcoin-period-disabled::after {
    background: transparent !important;
}

/* CVD timeframe tabs (15m / 1h / 4h / 1d) */
#cvd-timeframe-controls {
    flex-shrink: 0;
}

#cvd-timeframe-controls .cvd-interval-btn {
    padding: 0.175rem 0.5rem !important;
    font-size: 0.6375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 0.125rem !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    position: relative;
    transition: color 0.15s;
}

#cvd-timeframe-controls .cvd-interval-btn::after {
    content: '';
    position: absolute;
    left: 0.125rem;
    right: 0.125rem;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s;
}

#cvd-timeframe-controls .cvd-interval-btn:hover {
    color: #67e8f9 !important;
}

#cvd-timeframe-controls .cvd-interval-btn.text-cyan-300 {
    color: #67e8f9 !important;
    background: transparent !important;
}

#cvd-timeframe-controls .cvd-interval-btn.text-cyan-300::after {
    background: #22d3ee;
}

#cvd-timeframe-controls .cvd-interval-btn.cvd-period-disabled {
    color: #334155 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#cvd-timeframe-controls .cvd-interval-btn.cvd-period-disabled::after {
    background: transparent !important;
}

.bento-cvd .header-action-group {
    gap: 0.375rem;
}

/* Liquidation timeframe tabs (15m / 4h / 1d) */
#liq-timeframe-controls .liq-timeframe-btn {
    padding: 0.175rem 0.5rem !important;
    font-size: 0.6375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 0.125rem !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    box-shadow: none !important;
    position: relative;
    transition: color 0.15s;
}

#liq-timeframe-controls .liq-timeframe-btn::after {
    content: '';
    position: absolute;
    left: 0.125rem;
    right: 0.125rem;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s;
}

#liq-timeframe-controls .liq-timeframe-btn.text-blue-300 {
    color: #93c5fd !important;
    background: transparent !important;
}

#liq-timeframe-controls .liq-timeframe-btn.text-blue-300::after {
    background: #3b82f6;
}

/* ---- Fear & Greed classification badge ---- */
#fear-greed-classification,
#altcoin-status {
    border-radius: 0.2rem !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    padding: 0.35rem 0.75rem !important;
    line-height: 1.2 !important;
    text-align: center;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

/* Sentinel classes — added by JS or kept as fallback */
#fear-greed-classification.extreme-fear  { color: #f87171; border-color: rgba(239, 68, 68, 0.35) !important; background: rgba(239, 68, 68, 0.07) !important; }
#fear-greed-classification.fear          { color: #fb923c; border-color: rgba(249, 115, 22, 0.30) !important; background: rgba(249, 115, 22, 0.06) !important; }
#fear-greed-classification.neutral       { color: #fbbf24; border-color: rgba(245, 158, 11, 0.30) !important; background: rgba(245, 158, 11, 0.06) !important; }
#fear-greed-classification.greed         { color: #86efac; border-color: rgba(34, 197, 94, 0.28) !important; background: rgba(34, 197, 94, 0.06) !important; }
#fear-greed-classification.extreme-greed { color: #4ade80; border-color: rgba(34, 197, 94, 0.38) !important; background: rgba(34, 197, 94, 0.09) !important; }

/* ---- Previous day comparison rows ---- */
#fng-previous,
#altcoin-previous {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.25rem;
    padding: 0.3rem 0.625rem;
    width: 100%;
    max-width: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
}

#fng-previous .opacity-60,
#altcoin-previous .opacity-60 { color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
#fng-previous-value,
#altcoin-previous-value { color: #94a3b8; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- OI / FR / LS daily view — main value block ---- */
#oi-daily-view,
#fr-daily-view,
#ls-daily-view {
    gap: 0.375rem !important;
}

#oi-daily-value  { font-size: 2.5rem !important; color: #93c5fd !important; font-weight: 800 !important; }
#fr-daily-value  { font-size: 2.5rem !important; color: #93c5fd !important; font-weight: 800 !important; }
#ls-daily-value  { font-size: 2.5rem !important; color: #6ee7b7 !important; font-weight: 800 !important; }

/* High/Low row */
#oi-daily-highlow { gap: 1rem; }
#oi-daily-highlow span { display: flex; gap: 0.25rem; align-items: center; }

/* Funding countdown */
#fr-daily-countdown {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #64748b;
}

/* FR sentiment dot */
#fr-daily-sentiment-dot { flex-shrink: 0; }

/* Long/Short bar container modernization */
.bento-ls #ls-daily-view .w-56.h-2\.5 {
    width: 100% !important;
    max-width: 16rem;
    height: 8px !important;
    border-radius: 4px !important;
    background: rgba(239, 68, 68, 0.25) !important;
}

#ls-daily-bar {
    border-radius: 4px 0 0 4px !important;
}

.bento-ls #ls-daily-view .flex.justify-between.w-56 {
    width: 100% !important;
    max-width: 16rem;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* ---- Global Market rows — icon badge modernization ---- */
.bento-global .w-6.h-6.rounded-md {
    border-radius: 0.2rem !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Dominance bars — rounded ends ---- */
.bento-dominance .w-2\.5.h-2\.5.rounded-full {
    border-radius: 0.15rem !important;
}

/* ---- Liquidation stats boxes ---- */
#liq-section .grid.grid-cols-2 > div {
    border-radius: 0.2rem !important;
}

/* ---- Mover items ---- */
.mover-item {
    border-radius: 0.15rem !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.liq-summary-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.5);
}

.liq-summary-split-bar {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.liq-summary-split-long,
.liq-summary-split-short {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.liq-summary-split-long {
    background: linear-gradient(135deg,
        rgba(6, 95, 70, 0.55) 0%,
        rgba(16, 185, 129, 0.30) 60%,
        rgba(52, 211, 153, 0.18) 100%);
}

.liq-summary-split-short {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.18) 0%,
        rgba(239, 68, 68, 0.30) 40%,
        rgba(185, 28, 28, 0.50) 100%);
}

/* Glowing center divider */
.liq-summary-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--liq-divider-pos, 50%);
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.10),
                0 0 20px 2px rgba(59, 130, 246, 0.12);
    z-index: 2;
    pointer-events: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.liq-summary-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 1rem;
}

.liq-summary-side {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.liq-summary-side-right {
    justify-content: flex-end;
}

.liq-summary-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.liq-summary-icon-long {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.liq-summary-icon-short {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.liq-summary-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 0.125rem;
}

.liq-summary-value {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.liq-summary-value-long {
    color: #6ee7b7;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.liq-summary-value-short {
    color: #fca5a5;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Stats row below the bar */
.liq-stats-row {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.liq-stats-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.10);
}

/* ---- Top 100 Liquidity styles ---- */
.top100-vol-leaders {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.12);
}

.top100-vol-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.top100-vol-value {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #67e8f9;
    letter-spacing: 0.02em;
}

.top100-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.top100-col-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.375rem;
    border-radius: 0.375rem;
}

.top100-col-header-top {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.10);
}

.top100-col-header-low {
    color: #fda4af;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.10);
}

.top100-col-icon {
    font-size: 0.75rem;
}

/* ---- Filter selects ---- */
.exchange-select, .coin-select, .stablecoin-select {
    border-radius: 0.2rem !important;
    font-size: 0.6875rem;
    background: rgba(15, 12, 28, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    color: #94a3b8 !important;
}

.board-header-select {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto !important;
    min-width: 3.8rem;
    max-width: 5rem;
    height: 1.625rem;
    max-height: 1.625rem;
    box-sizing: border-box;
    padding: 0 1.1rem 0 0.4rem !important;
    font-size: 0.625rem !important;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.2rem;
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 0.5rem;
    line-height: 1;
}

.board-header-select:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

.board-header-select:focus,
.board-header-select:active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
    box-shadow: none;
}

.board-header-select option {
    background: #0d0b18;
    color: #cbd5e1;
    padding: 0.25rem 0.5rem;
}

.metric-section-header .board-header-select {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   CUSTOM SELECT — styled dropdown replacing native <select> popups
   ========================================================================== */
.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    height: 1.625rem;
    max-height: 1.625rem;
    box-sizing: border-box;
    padding: 0 0.4rem;
    /* Gleiche Rundung wie das eigene Menue und die Icon-Knoepfe daneben
       (rounded-lg = 0.5rem). Mit 0.2rem war der Ausloeser der einzige
       scharfkantige Baustein in der Kartenkopfzeile. */
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    /* Derselbe Hausmasstab, der auf dem Handy schon gilt (Medienabfrage weiter
       unten): so wirken die Zeitraumwaehler wie Bedienelemente statt wie
       Textfetzen — und das Menue darunter ist nicht mehr doppelt so breit. */
    min-width: 3rem;
    outline: none;
    user-select: none;
    line-height: 1;
}

.custom-select-trigger:hover,
.custom-select-trigger.is-open {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}

.custom-select-trigger.hidden {
    display: none !important;
}

#cvd-section .cvd-timeframe-select.hidden,
#cvd-section .cvd-timeframe-select.hidden + .custom-select-trigger,
#cvd-section .cvd-timeframe-select + .custom-select-trigger.hidden {
    display: none !important;
}

.custom-select-label {
    flex: 1 1 auto;
}

/* Icon in trigger button */
.custom-select-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.1rem;
}

.custom-select-trigger-icon .coin-inline-icon-wrap {
    width: 0.7rem;
    height: 0.7rem;
}

/* Icon in dropdown option */
.custom-select-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.35rem;
}

.custom-select-option-icon .coin-inline-icon-wrap {
    width: 1.05rem;
    height: 1.05rem;
}

.custom-select-option-label {
    flex: 1 1 auto;
}

.custom-select-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.2s;
    width: 0.5rem;
    height: 0.5rem;
}

.custom-select-chevron svg {
    width: 100%;
    height: 100%;
}

.custom-select-trigger.is-open .custom-select-chevron {
    transform: rotate(180deg);
}

/* Panel (portal on body) */
.custom-select-panel {
    position: fixed;
    display: none;
    min-width: 4rem;
    background: rgba(22, 18, 38, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999;
    padding: 0.2rem 0;
    animation: customSelectFadeIn 0.1s ease-out;
}

.custom-select-panel.is-open {
    display: block;
}

@keyframes customSelectFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.custom-select-option {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #cbd5e1;
    transition: background 0.1s;
    user-select: none;
    white-space: nowrap;
}

.custom-select-option:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #f1f5f9;
}

.custom-select-option.is-selected {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.custom-select-option.is-disabled {
    color: #475569;
    cursor: not-allowed;
    opacity: 0.5;
}

.header-action-group {
    align-items: center;
}

.metric-source-desktop-slot {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.metric-header-filters {
    flex-wrap: wrap;
    justify-content: center;
}

.cvd-coin-filters {
    flex-wrap: wrap;
    justify-content: center;
}

.metric-card--source-bottom-left .metric-header-filters {
    width: 100%;
    justify-content: center;
    margin-top: 0.35rem !important;
}

.board-card-chart-view > .metric-header-filters {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-top: 0.25rem;
}

.board-card-chart-view > .metric-header-filters.is-admin-filters::before {
    content: "Admin:";
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0;
}

.metric-card--source-bottom-left .metric-header-filters .metric-header-filter-select + .custom-select-trigger {
    display: inline-flex !important;
}

.market-chart-header-select,
.metric-chart-header-select,
.liq-chart-header-select {
    min-width: 3.8rem;
}

.metric-header-filter-select {
    min-width: 5.5rem;
    max-width: 7rem;
}

@media (min-width: 1024px) {
    .metric-source-desktop-slot.is-active {
        display: inline-flex;
    }

    .metric-source-desktop-slot .metric-header-filter-select,
    .metric-source-desktop-slot .custom-select-trigger {
        max-width: 7rem;
    }
}

@media (max-width: 1023px) {
    .metric-header-filters .metric-header-filter-select,
    .metric-header-filters .metric-header-filter-select + .custom-select-trigger {
        display: none !important;
    }
}

.market-chart-interval-mobile-wrap {
    display: none;
}

.market-chart-interval-select {
    min-width: 3.8rem;
}

.board-card-chart-view .market-chart-interval-mobile-wrap,
.board-card-chart-view .market-chart-interval-row {
    display: none !important;
}

/* Board-wide timeframe controls use dropdowns; tab rows stay as JS fallback only. */
.altcoin-range-controls,
#cvd-timeframe-controls,
#liq-timeframe-controls,
.market-chart-interval-row,
.metric-header-filters .metric-interval-row {
    display: none !important;
}

.altcoin-period-select + .custom-select-trigger,
.cvd-timeframe-select + .custom-select-trigger,
.liq-chart-header-select + .custom-select-trigger {
    display: inline-flex !important;
}

/* ==========================================================================
   COIN COMBOBOX — Searchable dropdown replacing input+select pair
   ========================================================================== */
.coin-combobox {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    z-index: 20;
}

.coin-combobox.hidden {
    display: none !important;
}

.coin-combobox-trigger {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
    height: 1.625rem;
    max-height: 1.625rem;
    box-sizing: border-box;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    min-width: 7.5rem;
    max-width: 11rem;
}

.coin-combobox-trigger .coin-inline-icon-wrap {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

.coin-combobox-trigger:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}

.coin-combobox-trigger:focus-visible {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}

.coin-combobox-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    margin-right: 0.15rem;
}

.coin-combobox-trigger-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.coin-combobox-trigger-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.2s;
}

.coin-combobox[aria-expanded="true"] .coin-combobox-trigger-chevron,
.coin-combobox-trigger[aria-expanded="true"] .coin-combobox-trigger-chevron {
    transform: rotate(180deg);
}

/* --- Panel (dropdown) --- */
.coin-combobox-panel {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 13rem;
    max-width: 18rem;
    background: rgba(22, 18, 38, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 99999;
    animation: coinComboboxFadeIn 0.12s ease-out;
}

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

/* --- Search inside panel --- */
.coin-combobox-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.coin-combobox-search-icon {
    display: inline-flex;
    color: #64748b;
    flex-shrink: 0;
}

.coin-combobox-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 500;
    caret-color: #60a5fa;
}

.coin-combobox-search::placeholder {
    color: #475569;
}

/* --- Options list --- */
.coin-combobox-list {
    max-height: 14rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

.coin-combobox-list::-webkit-scrollbar {
    width: 4px;
}

.coin-combobox-list::-webkit-scrollbar-track {
    background: transparent;
}

.coin-combobox-list::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 2px;
}

/* --- Single option --- */
.coin-combobox-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #cbd5e1;
    transition: background 0.1s;
    user-select: none;
}

.coin-combobox-option:hover,
.coin-combobox-option.is-highlighted {
    background: rgba(59, 130, 246, 0.12);
    color: #f1f5f9;
}

.coin-combobox-option.is-selected {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.coin-combobox-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.coin-combobox-option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coin-combobox-option-check {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #60a5fa;
    width: 0.875rem;
}

/* --- Backdrop (mobile only) --- */
.coin-combobox-backdrop {
    display: none;
}

/* --- Body scroll lock for mobile bottom-sheet --- */
.coin-combobox-body-lock {
    overflow: hidden !important;
}

/* ==========================================================================
   COIN COMBOBOX — Mobile Bottom-Sheet (≤640px)
   ========================================================================== */
@media (max-width: 640px) {
    .coin-combobox-panel {
        position: fixed;
        top: auto !important;
        right: 0 !important;
        bottom: 0;
        left: 0 !important;
        max-width: none;
        min-width: 0;
        max-height: 60vh;
        border-radius: 1rem 1rem 0 0;
        border-bottom: none;
        animation: coinComboboxSlideUp 0.2s ease-out;
        z-index: 99999;
    }

    @keyframes coinComboboxSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .coin-combobox-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99998;
        animation: coinComboboxFadeIn 0.15s ease-out;
    }

    .coin-combobox-search-wrap {
        padding: 0.75rem 1rem;
    }

    .coin-combobox-search {
        font-size: 1rem;
    }

    .coin-combobox-option {
        min-height: 44px;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .coin-combobox-option-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .coin-combobox-list {
        max-height: calc(60vh - 3.5rem);
    }

    .coin-combobox-trigger {
        min-width: 4.1rem;
        max-width: 6rem;
    }
}

/* ==========================================================================
   DASHBOARD GRID — Neon Matrix
   ========================================================================== */

/* Body: layered mesh + ambient sentiment */
.board-page body {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, var(--ambient-color-1) 0%, var(--ambient-color-2) 100%) !important;
    transition: background var(--ambient-transition);
}

/* Remove excess empty space below the dashboard content */
.board-page #page_content_wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.board-page main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.board-page .bento-grid {
    flex: none;
}

.calendar-page-shell {
    width: min(1480px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 40px;
}

.calendar-page .bento-calendar {
    min-height: calc(100vh - var(--navbar-height, 5rem) - 64px);
}

@media (max-width: 768px) {
    .calendar-page-shell {
        width: min(100% - 20px, 1480px);
        padding: 12px 0 28px;
    }
}

/* Grid container: glowing 1px gap dividers */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(59, 130, 246, 0.22);
    border-radius: 0;
    overflow: hidden;
    margin-top: 0;
    border: none;
    animation: gridGlow 5s ease-in-out infinite;
}

@keyframes gridGlow {
    0%, 100% { background: rgba(59, 130, 246, 0.15); }
    50%       { background: rgba(59, 130, 246, 0.22); }
}

.bento-grid > * {
    grid-column: 1 / -1;
}

/* Panel base — deep dark with subtle colored top wash */
.bento-grid > section {
    background: linear-gradient(180deg, rgba(7, 20, 38, 0.98) 0%, rgba(5, 15, 30, 0.98) 100%);
    height: auto;
    position: relative;
}

/* Neutralize the global centering rule (layout.html: section > * { margin: 0 auto })
   which causes flex-column children to shrink to intrinsic width instead of stretching. */
.bento-grid > section > * {
    width: 100%;
}

/* Per-panel radial ambient glow from accent color */
.bento-fng       { background-image: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); }
.bento-altcoin   { background-image: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); }
.bento-dominance,
.bento-global,
.bento-oi,
.bento-fr,
.bento-ls,
.bento-cvd,
.bento-liq,
.bento-movers,
.bento-calendar  { background-image: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); }

/* Glowing 2px accent line at top of each panel */
.bento-grid > section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 5;
    pointer-events: none;
}

.bento-fng::after,
.bento-altcoin::after,
.bento-dominance::after,
.bento-global::after,
.bento-oi::after,
.bento-fr::after,
.bento-ls::after,
.bento-cvd::after,
.bento-liq::after,
.bento-movers::after,
.bento-calendar::after   { background: #2563eb; box-shadow: 0 0 8px 1px rgba(59, 130, 246, 0.28); }

/* Neutralize glass-card inside grid */
.bento-grid .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0 !important;
    box-shadow: none;
    transition: none;
}

.bento-grid .glass-card::before {
    display: none;
}

.bento-grid .glass-card:hover {
    transform: none;
    box-shadow: none;
}

/* Pulse animation */
.bento-grid .glass-card.pulse-update {
    animation: dataPulse 0.6s ease-out;
}

#oi-daily-view,
#fr-daily-view,
#ls-daily-view {
    justify-content: center;
}

.metric-daily-enhanced[data-metric-pending="true"] > * {
    visibility: hidden;
}

/* ==========================================================================
   TYPOGRAPHY & KPI GLOW
   ========================================================================== */

/* Headers: ALL CAPS, tight tracking */
.bento-grid .metric-section-header h2 {
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
}

.bento-grid .metric-section-header h2 span:last-child {
    color: #94a3b8;
}

/* Emoji icons inherit */
.bento-grid .metric-section-header h2 span:first-child {
    font-size: 0.9rem;
    text-transform: none;
}

/* Tabular nums + spacing on all KPI values */
#altcoin-value,
#oi-daily-value,
#fr-daily-value,
#ls-daily-value,
#mdr-btc-value,
#mdr-eth-value,
#mdr-other-value,
#mdr-stable-value,
#global-liquidity,
#global-volume,
#global-coins-count {
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

/* Colored text-shadow glow on primary metric values */
#oi-daily-value  { text-shadow: 0 0 12px rgba( 59, 130, 246, 0.22); }
#fr-daily-value  { text-shadow: 0 0 12px rgba(59, 130, 246, 0.22); }
#ls-daily-value  { text-shadow: 0 0 12px rgba( 16, 185, 129, 0.22); }
#altcoin-value   { text-shadow: 0 0 12px rgba(59, 130, 246, 0.20); }
#global-liquidity { text-shadow: 0 0 10px rgba(  6, 182, 212, 0.20); }
#global-volume    { text-shadow: 0 0 10px rgba( 59, 130, 246, 0.18); }

#oi-daily-view .text-gray-500,
#fr-daily-view .text-gray-500,
#ls-daily-view .text-gray-500,
#global-daily-view .text-gray-400,
#fng-previous,
#altcoin-previous,
#global-update-time,
#liq-section .text-gray-500,
#top-movers-section .text-gray-500 {
    color: #64748b !important;
}

#fear-greed-classification,
#altcoin-status {
    font-weight: 700;
    color: #e2e8f0;
}

/* ==========================================================================
   FEAR & GREED CARD – HORIZONTAL LAYOUT
   ========================================================================== */

/* Daily view: gauge left, history right */
.fng-daily-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
}

.fng-daily-layout.hidden {
    display: none;
}

/* Note: scope-driven dimming for non-crypto categories removed —
   card appearance stays constant across categories (no background shift). */

/* Gauge wrapper – left side */
.fng-gauge-wrap {
    flex: 0 0 auto;
    width: 50%;
    max-width: 19rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Classification badge */
.fng-classification-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #cbd5e1;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    white-space: nowrap;
}

.fng-live-components {
    width: min(100%, 17rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.fng-live-component {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label delta"
        "value value";
    align-items: center;
    gap: 0.05rem 0.2rem;
    padding: 0.25rem 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.45rem;
    background: rgba(15, 23, 42, 0.34);
}

.fng-live-component-label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fng-live-component-value {
    grid-area: value;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.fng-live-component-delta {
    grid-area: delta;
    justify-self: end;
    min-height: 0.7rem;
    color: #94a3b8;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fng-live-component-delta.delta-up { color: #4ade80; }
.fng-live-component-delta.delta-down { color: #f87171; }
.fng-live-component-delta.delta-neutral { color: #94a3b8; }

/* ── History: right column, 4 rows with fill bars ── */
.fng-history-grid {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid rgba(59, 130, 246, 0.12);
    padding-left: 0.75rem;
    align-self: center;
    justify-content: center;
}

.fng-hist-cell {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 2rem auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
}

/* Subtle horizontal divider between rows */
.fng-hist-cell + .fng-hist-cell {
    border-top: 1px solid rgba(100, 116, 139, 0.08);
    border-left: none;
}

.fng-hist-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.fng-hist-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
    line-height: 1;
    text-align: right;
}

/* Fill bar – like dom-legend-fill */
.fng-hist-fill {
    --fng-pct: 0%;
    min-width: 0;
    height: 0.55rem;
    border-radius: 999px;
    background-color: rgba(51, 65, 85, 0.6);
    overflow: hidden;
    position: relative;
}

.fng-hist-fill::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--fng-pct);
    border-radius: inherit;
    transition: width 0.6s ease;
}

.fng-hist-fill.fng-fill-extreme-fear::before  { background: linear-gradient(90deg, rgba(248,113,113,0.4), rgba(248,113,113,0.95)); }
.fng-hist-fill.fng-fill-fear::before          { background: linear-gradient(90deg, rgba(251,146,60,0.4),  rgba(251,146,60,0.95));  }
.fng-hist-fill.fng-fill-neutral::before       { background: linear-gradient(90deg, rgba(251,191,36,0.4),  rgba(251,191,36,0.95));  }
.fng-hist-fill.fng-fill-greed::before         { background: linear-gradient(90deg, rgba(163,230,53,0.4),  rgba(163,230,53,0.95));  }
.fng-hist-fill.fng-fill-extreme-greed::before { background: linear-gradient(90deg, rgba(74,222,128,0.4),  rgba(74,222,128,0.95));  }

/* ==========================================================================
   ALTCOIN INDEX (ACI) DAILY LAYOUT
   ========================================================================== */

.aci-daily-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-height: 220px;
}

.aci-daily-layout.hidden {
    display: none;
}

/* Note: scope-driven dimming for non-crypto categories removed (see above). */

/* Gauge + score – left side */
.aci-gauge-wrap {
    flex: 0 0 auto;
    width: 50%;
    max-width: 19rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

/* History – right side */
.aci-history-grid {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid rgba(59, 130, 246, 0.12);
    padding-left: 0.75rem;
    align-self: center;
    justify-content: center;
}

.aci-hist-cell {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 2rem auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
}

.aci-hist-cell + .aci-hist-cell {
    border-top: 1px solid rgba(100, 116, 139, 0.08);
}

.aci-hist-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.aci-hist-value {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
    line-height: 1;
    text-align: right;
}

.aci-hist-value.aci-val-btc  { color: #fbbf24; }
.aci-hist-value.aci-val-neutral { color: #94a3b8; }
.aci-hist-value.aci-val-alt  { color: #60a5fa; }

/* Delta badges for ACI */
.aci-hist-delta {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    justify-self: start;
}
.aci-hist-delta.delta-up   { color: #4ade80; background: rgba(74,222,128,0.10); }
.aci-hist-delta.delta-down { color: #f87171; background: rgba(248,113,113,0.10); }
.aci-hist-delta.delta-neutral { color: #94a3b8; background: rgba(148,163,184,0.08); }

/* Fill bars for ACI */
.aci-hist-fill {
    --aci-pct: 0%;
    display: block;
    min-width: 0;
    height: 0.55rem;
    border-radius: 999px;
    background-color: rgba(51, 65, 85, 0.6);
    overflow: hidden;
    position: relative;
}

.aci-hist-fill::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--aci-pct);
    border-radius: inherit;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, #f97316 0%, #fb923c 25%, #64748b 50%, #3b82f6 75%, #1d4ed8 100%);
    background-size: var(--aci-bg-size, 100%) 100%;
    background-position: left;
}

/* ACI badge sentinel classes */
.aci-bitcoin-season { color: #fb923c !important; border-color: rgba(249, 115, 22, 0.35) !important; background: rgba(249, 115, 22, 0.08) !important; }
.aci-altcoin-season { color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.35) !important; background: rgba(59, 130, 246, 0.08) !important; }
.aci-neutral-zone   { color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.25) !important; background: rgba(148, 163, 184, 0.05) !important; }
.aci-no-data        { color: #64748b !important; border-color: rgba(100, 116, 139, 0.20) !important; background: transparent !important; }

/* Override status badge size (JS sets full className) */
#altcoin-status,
.aci-status-badge {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 0.2rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    margin-top: 1.5rem;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.fng-hist-delta {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    justify-self: start;
}

.fng-hist-delta.delta-up {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
}

.fng-hist-delta.delta-down {
    color: #f87171;
    background: rgba(248, 113, 113, 0.10);
}

.fng-hist-delta.delta-neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
}

/* Value color classes */
.fng-hist-value.fng-val-extreme-fear  { color: #f87171; }
.fng-hist-value.fng-val-fear          { color: #fb923c; }
.fng-hist-value.fng-val-neutral       { color: #fbbf24; }
.fng-hist-value.fng-val-greed         { color: #a3e635; }
.fng-hist-value.fng-val-extreme-greed { color: #4ade80; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .fng-daily-layout {
        gap: 0;
    }
    .fng-hist-cell {
        grid-template-columns: 5rem 1.75rem auto;
    }
    .fng-hist-value {
        font-size: 0.9rem;
    }
    .fng-hist-label {
        font-size: 0.55rem;
    }
    .fng-classification-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }
    .fng-history-grid {
        padding-left: 0.5rem;
    }
}

/* ==========================================================================
   RESPONSIVE GRID
   ========================================================================== */

/* Mobile compact */
@media (max-width: 640px) {
    .bento-grid > section {
        padding: 0.75rem !important;
    }

    .board-header-select {
        min-width: 3.4rem;
        max-width: 4.5rem;
        height: 1.4rem;
        font-size: 0.6rem !important;
        padding: 0 1.1rem 0 0.35rem !important;
        background-size: 0.5rem;
        background-position: right 0.25rem center;
    }

    #fear-greed-classification,
    #altcoin-status {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
    }

    #oi-daily-value,
    #fr-daily-value,
    #ls-daily-value,
    #altcoin-value {
        font-size: 1.75rem !important;
    }

    .metric-interval-row {
        gap: 0.25rem;
    }

    .metric-interval-row > button {
        padding: 0.125rem 0.375rem;
    }

    .calendar-events-grid {
        gap: 0.5rem;
    }

    .liq-feed-scroll,
    .movers-scroll {
        max-height: 13.5rem;
        min-height: 9.5rem;
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-fng, .bento-altcoin, .bento-dominance, .bento-global,
    .bento-ls, .bento-cvd, .bento-liq, .bento-movers, .bento-calendar {
        grid-column: 1 / -1;
    }
    .bento-oi, .bento-fr, .bento-cvd {
        grid-column: span 1;
    }
}

/* Desktop: 12-column matrix */
@media (min-width: 1200px) {
    .bento-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto minmax(29rem, 1fr);
        min-height: calc(100vh - var(--navbar-height, 5rem));
    }
    /* Row 1: Sentiment */
    .bento-fng        { grid-column: span 4; }
    .bento-altcoin    { grid-column: span 4; }
    .bento-dominance  { grid-column: span 4; }
    /* Row 2: Derivatives */
    .bento-oi         { grid-column: span 3; }
    .bento-fr         { grid-column: span 3; }
    .bento-ls         { grid-column: span 3; }
    .bento-cvd        { grid-column: span 3; }
    /* Row 3: Activity */
    .bento-liq        { grid-column: span 6; }
    .bento-movers     { grid-column: span 6; }
    .bento-liq,
    .bento-movers     {
        min-height: max(29rem, calc(100vh - var(--navbar-height, 5rem)));
        height: 100%;
    }
    /* Row 4: Calendar */
    .bento-calendar   { grid-column: 1 / -1; }

    #liq-daily-view,
    #top-movers-section > .grid {
        flex: 1 1 auto;
        min-height: 0;
    }

    #liq-daily-view,
    .top100-column {
        display: flex;
        flex-direction: column;
    }

    #liq-daily-view.hidden {
        display: none !important;
    }

    .top100-column {
        min-height: 0;
    }

    .liq-feed-scroll,
    .movers-scroll {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }
}

/* ==========================================================================
   BOARD PAGE – GLOBAL OVERFLOW PREVENTION
   Override layout.html's min-width and overflow-x:auto on html/body
   and the navbar's inline min-width.  The board dashboard never
   needs horizontal scrolling, so we lock it for ALL viewport widths.
   ========================================================================== */
html.board-page,
html.board-page body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}
html.board-page body {
    height: auto !important;
    /* Tailwind min-h-screen sets min-height:100vh. We remove that so body
       can collapse to its true content height and the browser's normal
       document scroll (on <html>) handles scrolling. This eliminates the
       empty gradient area the user could scroll into below the bento-grid. */
    min-height: 0 !important;
    /* Let html be the scroll host; body must not be an independent scroll
       container, otherwise content height vs body height creates a dead zone. */
    overflow: visible !important;
    overflow-y: visible !important;
}
/* Background gradient on html so area outside body keeps the dashboard look */
html.board-page {
    /* Keep layout.html's html { height: 100%; overflow-y: auto } intact —
       reverting height:auto which caused chart containers to grow unboundedly
       (bento-grid expanded to ~15000px instead of ~1500px). The empty scroll
       space is fixed by position:fixed on card-calc-tooltip-portal instead. */
    min-height: 100% !important;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 85%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, var(--ambient-color-1, #0b0b18) 0%, var(--ambient-color-2, #0b0b18) 100%);
}
/* Eliminate any residual empty space below the bento-grid */
html.board-page #page_content_wrapper,
html.board-page main#board_main_page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
html.board-page .bento-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
html.board-page #main-navbar,
html.board-page #main-navbar > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}
html.board-page #main-navbar > .nav-shell {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.board-page #main-navbar > .nav-shell {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html.board-page main {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    /* Prevent main from becoming an internal scroll container
       (layout.html sets main { overflow-y: auto } globally,
       which can create a dead scroll zone below the grid) */
    height: auto !important;
    box-sizing: border-box !important;
}
html.board-page main.responsive-zoom,
html.board-page .responsive-zoom {
    overflow-y: visible !important;
}
html.board-page .bento-grid {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}
html.board-page .bento-grid > section {
    max-width: 100% !important;
    overflow-x: clip !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}
html.board-page #page_content_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    html.board-page #board_main_page {
        padding-top: var(--shared-mobile-topbar-height, 3rem) !important;
    }
}

/* ==========================================================================
   SUB-480PX ULTRA-COMPACT MOBILE (small phones like Galaxy S, iPhone SE)
   - Stack card internals vertically
   - Hide redundant fill bars (chart/gauge already visualises data)
   - Tighter spacing and smaller fonts
   ========================================================================== */
@media (max-width: 479px) {

    /* ══════════════════════════════════════════════════════════
       GLOBAL
       ══════════════════════════════════════════════════════════ */

    .bento-grid > section {
        padding: 0.4rem !important;
    }

    /* ── Card headers ── */
    .metric-section-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: flex-start !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    .metric-section-header h2 {
        margin-right: auto !important;
        flex-grow: 1 !important;
        text-align: left !important;
        line-height: 1.1;
    }
    .metric-section-header > .flex {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    /* Interval/filter rows: own line below title */
    .metric-section-header .metric-interval-row,
    .metric-section-header .metric-filter-row {
        order: 99 !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }
    /* The button wrapper that contains interval + action buttons: allow wrapping */
    .metric-section-header > div.flex {
        flex-wrap: wrap !important;
    }
    .metric-section-header > div.flex > .metric-interval-row {
        flex-basis: 100% !important;
        order: 99 !important;
    }
    .metric-section-header h2 {
        font-size: 0.8rem !important;
        flex-shrink: 1;
        min-width: 0;
        letter-spacing: 0.02em;
    }
    .metric-section-header .card-icon svg {
        width: 1rem;
        height: 1rem;
    }
    /* [FIX 1] Hide countdown timers — they waste a full row in column-stacked headers */
    #fng-header-countdown,
    #aci-header-countdown,
    #dom-header-countdown,
    #oi-header-countdown,
    #fr-header-countdown,
    #ls-header-countdown,
    #liq-header-countdown,
    #top100-header-countdown {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════════
       FEAR & GREED
       ══════════════════════════════════════════════════════════ */

    .fng-daily-layout {
        flex-direction: column;
        gap: 0.5rem;
        min-height: auto;
    }
    /* [FIX 2] Full width gauge — uses the available 344px fully, gauge sits flatter */
    .fng-gauge-wrap {
        width: 100%;
        max-width: none;
        gap: 0.15rem;
    }
    #fng-svg {
        display: block;
        margin-top: -0.8rem;
    }
    #fng-score-circle {
        r: 16px;
    }
    #fng-score-text {
        font-size: 13px !important;
        transform: translateY(1px);
        transform-box: fill-box;
        transform-origin: center;
    }
    /* Single grid on parent so columns align across all rows */
    .fng-history-grid {
        border-left: none;
        border-top: 1px solid rgba(59, 130, 246, 0.12);
        padding-left: 0;
        padding-top: 0.3rem;
        width: 100%;
        max-width: none;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) 1.6rem max-content;
        gap: 0.25rem;
        row-gap: 0.15rem;
        align-items: center;
    }
    .fng-hist-fill {
        display: block;
        width: 100%;
        min-width: 0;
        height: 3px;
    }
    .fng-hist-cell {
        display: contents;
    }
    .fng-hist-value {
        font-size: 0.9rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
        min-width: 1.5rem;
    }
    .fng-hist-label {
        font-size: 0.65rem;
        color: #94a3b8;
        text-transform: none;
        letter-spacing: 0;
    }
    .fng-hist-cell .card-delta-badge,
    .fng-hist-delta {
        text-align: right;
        justify-self: end;
    }
    .fng-hist-delta {
        font-size: 0.6rem;
        padding: 0.02rem 0.15rem;
    }
    .fng-hist-delta.delta-neutral,
    .fng-hist-delta:empty {
        text-align: left;
        justify-self: start;
    }
    .fng-classification-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.4rem;
    }
    .fng-live-components {
        width: 100%;
        max-width: 20rem;
        gap: 0.25rem;
        margin-top: 0;
    }
    .fng-live-component {
        padding: 0.22rem 0.28rem;
        border-radius: 0.35rem;
    }
    .fng-live-component-label,
    .fng-live-component-delta {
        font-size: 0.52rem;
    }
    .fng-live-component-value {
        font-size: 0.68rem;
    }

    /* ══════════════════════════════════════════════════════════
       ALTCOIN SEASON INDEX
       ══════════════════════════════════════════════════════════ */

    .aci-daily-layout {
        flex-direction: column;
        gap: 0.5rem;
        min-height: auto;
    }
    /* [FIX 3] Full width gauge bar — horizontal bar should use all 344px */
    .aci-gauge-wrap {
        width: 100%;
        max-width: none;
    }
    /* Single grid on parent so columns align across all rows */
    .aci-history-grid {
        border-left: none;
        border-top: 1px solid rgba(59, 130, 246, 0.12);
        padding-left: 0;
        padding-top: 0.3rem;
        width: 100%;
        max-width: none;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) 1.6rem max-content;
        gap: 0.25rem;
        row-gap: 0.15rem;
        align-items: center;
    }
    .aci-hist-fill {
        display: block;
        width: 100%;
        min-width: 0;
        height: 3px;
    }
    .aci-hist-cell {
        display: contents;
    }
    .aci-hist-value {
        font-size: 0.9rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
        min-width: 1.5rem;
    }
    .aci-hist-label {
        font-size: 0.65rem;
        color: #94a3b8;
        text-transform: none;
        letter-spacing: 0;
    }
    .aci-hist-value.aci-val-btc {
        color: #fbbf24;
    }
    .aci-hist-value.aci-val-alt {
        color: #60a5fa;
    }
    .aci-hist-delta {
        font-size: 0.6rem;
        padding: 0.02rem 0.15rem;
        text-align: right;
        justify-self: end;
    }
    .aci-hist-delta.delta-neutral,
    .aci-hist-delta:empty {
        text-align: left;
        justify-self: start;
    }
    #altcoin-value {
        font-size: 2rem !important;
    }
    #altcoin-status,
    .aci-status-badge {
        margin-top: 0.5rem;
    }
    #altcoin-7d,
    #altcoin-30d,
    #altcoin-90d {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }

    /* ══════════════════════════════════════════════════════════
       MARKET DOMINANCE (Donut view)
       ══════════════════════════════════════════════════════════ */

    /* Hide donut chart on small mobile — bars already show the data */
    .dominance-donut-wrap {
        display: none !important;
    }
    .dominance-layout {
        min-height: auto;
    }
    .dom-legend-fill {
        height: 3px;
    }
    /* Single grid on parent so columns align across all rows */
    .dominance-legend {
        display: grid !important;
        grid-template-columns: auto 3.5rem minmax(0, 1fr) auto auto;
        gap: 0.2rem;
        row-gap: 0.35rem;
        align-items: center;
    }
    .dom-legend-row {
        display: contents;
    }
    .dom-legend-value {
        font-size: 0.9rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    /* Die Zeilen sind hier `display: contents` — die Zahlenspalte ist damit ein
       einzelnes Rasterfeld, in dem Anteil und Betrag untereinander stehen. */
    .dom-legend-figure,
    .flow-row-figure {
        justify-self: end;
    }
    .dom-legend-usd,
    .flow-row-usd {
        font-size: 0.6rem;
    }
    .dom-legend-row .card-delta-badge {
        text-align: right;
        min-width: 2.2rem;
        justify-self: end;
    }
    .dom-legend-name {
        font-size: 0.65rem;
    }
    .dom-mode-toggle {
        gap: 0.15rem;
    }
    .dom-mode-pill {
        padding: 0.2rem;
    }
    .dom-mode-pill svg {
        width: 0.6rem;
        height: 0.6rem;
    }

    /* ══════════════════════════════════════════════════════════
       MARKET FLOW (Histogram view)
       ══════════════════════════════════════════════════════════ */

    /* Hide histogram on small mobile — row bars already show the data */
    .flow-histo-wrap {
        display: none !important;
    }
    .flow-layout {
        min-height: auto;
    }
    /* Row bars — keep visible, enough space */
    .flow-bar-track {
        height: 3px;
    }
    /* Single grid on parent so columns align across all rows */
    .flow-rows {
        display: grid !important;
        grid-template-columns: auto 3.5rem 1fr auto;
        gap: 0.3rem;
        row-gap: 0.6rem;
        align-items: center;
    }
    .flow-row {
        display: contents;
    }
    .flow-row-value {
        min-width: 3.5rem;
        font-size: 0.75rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .flow-row-name {
        font-size: 0.65rem;
    }
    .flow-net-value {
        font-size: 0.85rem;
    }
    .flow-net-label {
        font-size: 0.6rem;
    }

    /* ══════════════════════════════════════════════════════════
       OI / FR / LS DAILY VIEWS
       ══════════════════════════════════════════════════════════ */

    #oi-daily-value,
    #fr-daily-value,
    #ls-daily-value {
        font-size: 1.5rem !important;
    }
    /* [FIX 6] Override Tailwind min-h-[200px] with high-specificity selector */
    .bento-grid .metric-daily-enhanced,
    .bento-grid [class*="min-h-"] {
        min-height: 120px !important;
    }
    .metric-daily-enhanced {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* [FIX 8] Long/Short bar — override Tailwind w-56 (14rem) */
    #ls-daily-view .w-56,
    #ls-daily-view [class*="w-56"] {
        width: 100% !important;
        max-width: 14rem;
    }

    /* OI high/low gap tighter */
    #oi-daily-highlow {
        gap: 0.75rem !important;
    }
    #oi-daily-highlow .text-\[10px\] {
        font-size: 8px !important;
    }

    /* ── Metric interval buttons ── */
    .metric-interval-row > button,
    .oi-interval-btn,
    .fr-interval-btn,
    .ls-interval-btn {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.25rem !important;
    }

    /* ══════════════════════════════════════════════════════════
       LIQUIDATION CARD
       ══════════════════════════════════════════════════════════ */

    /* [FIX 7] High-specificity override for liq summary padding */
    .bento-liq .liq-summary-content,
    #liq-section .liq-summary-content {
        padding: 0.5rem 0.5rem !important;
        gap: 0.5rem;
    }
    .liq-summary-value {
        font-size: 0.75rem !important;
    }
    .liq-summary-label {
        font-size: 0.55rem;
    }
    .liq-summary-icon {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.6rem;
    }
    .liq-stats-row {
        gap: 0.25rem;
    }
    .liq-stats-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.35rem;
    }
    .liq-timeframe-btn {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    /* ══════════════════════════════════════════════════════════
       TOP 100 / MOVERS — stack columns vertically
       ══════════════════════════════════════════════════════════ */

    #top-movers-section .grid-cols-2,
    #top-movers-section .grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }
    .top100-vol-leaders {
        padding: 0.35rem 0.5rem;
        gap: 0.4rem;
    }
    .top100-vol-label {
        font-size: 0.55rem;
    }
    .top100-vol-value {
        font-size: 0.7rem;
    }
    .top100-col-header {
        font-size: 0.65rem;
        padding: 0.3rem 0.5rem;
    }
    #top-movers-section .metric-section-header {
        align-items: flex-start !important;
    }
    #top-movers-section .metric-section-header h2 {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    #top100-mode-toggle {
        margin-left: 0 !important;
        order: 2;
    }
    .mover-item {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        padding: 3px 6px;
    }
    .mover-left {
        width: 100%;
        min-width: 0;
        gap: 0.3rem;
    }
    .mover-right {
        width: auto;
        padding-left: 0;
        justify-content: flex-end;
        gap: 0.3rem;
    }
    .mover-item .symbol {
        font-size: 0.65rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mover-val,
    .mover-item .change {
        font-size: 0.64rem;
    }
    .mover-pct {
        font-size: 0.6rem;
    }
    .mover-rank {
        width: 1.2rem;
        height: 0.9rem;
        font-size: 0.5rem;
    }

    /* ══════════════════════════════════════════════════════════
       CALENDAR
       ══════════════════════════════════════════════════════════ */

    /* [FIX 9] Calendar grid: force single column */
    .bento-calendar .calendar-events-grid,
    .calendar-events-grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .cal-chip {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
        gap: 0.25rem;
    }
    .cal-dot {
        width: 0.35rem;
        height: 0.35rem;
    }
    .cal-filter-seg-label {
        font-size: 0.5rem;
    }
    .cal-filter-bar {
        padding: 0.35rem 0.5rem;
        gap: 0.5rem;
    }
    .cal-flag {
        font-size: 0.85rem;
    }
    .calendar-section-header h3 {
        font-size: 0.7rem;
    }
    .calendar-time-filters button {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.35rem !important;
    }
    .bento-calendar {
        padding: 0.5rem !important;
    }
    /* Shrink all calendar text on mobile */
    .bento-calendar .text-base {
        font-size: 0.75rem !important;
    }
    .bento-calendar .text-sm {
        font-size: 0.65rem !important;
    }
    .bento-calendar .text-xs {
        font-size: 0.55rem !important;
    }
    .bento-calendar .text-lg {
        font-size: 0.85rem !important;
    }
    .bento-calendar h3 {
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
    }
    .bento-calendar .pl-3 {
        padding-left: 0.5rem !important;
    }
    .bento-calendar .mb-3 {
        margin-bottom: 0.35rem !important;
    }
    .bento-calendar .gap-3 {
        gap: 0.35rem !important;
    }
    .bento-calendar .px-3 {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
    .bento-calendar .py-1 {
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
    }
    .bento-calendar .px-2\.5 {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
    .bento-calendar .gap-1\.5 {
        gap: 0.25rem !important;
    }
    .bento-calendar .w-4 {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }

    /* ══════════════════════════════════════════════════════════
       CHART VIEWS (all cards)
       ══════════════════════════════════════════════════════════ */

    .board-card-chart-shell {
        height: 10rem !important;
    }
    .market-chart-interval-btn {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.3rem !important;
    }
    .market-chart-interval-select {
        min-width: 4.5rem !important;
        max-width: 5.25rem !important;
        height: 1.7rem;
        padding-right: 1.5rem !important;
    }

    /* ── Board header selects (coin/exchange dropdowns) ── */
    .board-header-select {
        min-width: 3rem;
        max-width: 4rem;
        height: 1.55rem;
        font-size: 0.55rem !important;
        padding: 0 1rem 0 0.3rem !important;
        background-size: 0.45rem;
        background-position: right 0.2rem center;
        border-radius: 0.35rem;
    }

    .custom-select-trigger {
        height: 1.55rem;
        font-size: 0.55rem !important;
        padding: 0 0.35rem;
        border-radius: 0.35rem;
        min-width: 2.5rem;
    }
    .exchange-select,
    .stablecoin-select {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.3rem !important;
        min-width: 3rem;
        max-width: 4.5rem;
    }

    .metric-header-filter-select {
        min-width: 4rem;
        max-width: 5.5rem;
    }

    /* ── Metric filter row in chart views ── */
    .metric-filter-row {
        gap: 0.5rem !important;
    }
    .metric-filter-row .text-gray-400 {
        font-size: 0.55rem;
    }

    /* ── Scroll areas ── */
    .liq-feed-scroll,
    .movers-scroll {
        max-height: 11rem;
        min-height: 7rem;
    }

    #top-movers-section .movers-scroll {
        overflow: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        padding-right: 0 !important;
    }

    #top-movers-section .top100-column {
        min-height: 0 !important;
        height: auto !important;
    }

    /* ── View toggle / fullscreen / reset buttons ── */
    .market-view-toggle-btn,
    .metric-view-toggle-btn,
    .metric-reset-view-btn,
    .chart-fullscreen-btn {
        padding: 0.15rem !important;
    }
    .chart-fullscreen-btn {
        display: none !important;
    }
    .market-view-toggle-btn svg,
    .metric-view-toggle-btn svg,
    .metric-reset-view-btn svg,
    .chart-fullscreen-btn svg {
        width: 0.7rem;
        height: 0.7rem;
    }
}

/* ==========================================================================
   PHASE 1: COLLAPSIBLE CALENDAR FILTER (NEW)
   ========================================================================== */
.calendar-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(30, 41, 59, 0.4);
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
}

.calendar-filter-toggle.hidden {
    display: none;
}

/* Respect Tailwind lg:hidden — toggle is shown below desktop width */
@media (min-width: 1024px) {
    .calendar-filter-toggle.lg\:hidden {
        display: none !important;
    }

    .calendar-filter-panel.hidden,
    .calendar-filter-panel.lg\:\!flex {
        display: flex !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}

.calendar-filter-toggle:hover {
    background: rgba(30, 41, 59, 0.6);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
}

.calendar-filter-toggle .chevron-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.calendar-filter-toggle.expanded .chevron-icon {
    transform: rotate(180deg);
}

.calendar-filter-panel {
    /* On desktop (md+), panel is always visible via Tailwind md:!block.
       The max-height animation is only used on mobile for the toggle. */
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

/* Below desktop: when hidden class is removed via toggle, animate open */
@media (max-width: 1023px) {
    .calendar-filter-panel {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-bottom: 0;
    }
    .calendar-filter-panel:not(.hidden) {
        max-height: 360px;
        opacity: 1;
        margin-bottom: 1.25rem;
    }
}

.calendar-filter-panel.expanded {
    max-height: 360px;
    opacity: 1;
    margin-bottom: 1.25rem;
}

.calendar-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.calendar-active-tags.hidden {
    display: none;
}

.calendar-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ── Off-screen rendering optimization removed ──────────────────
   This reserved extra intrinsic height on board cards and could
   create blank scroll space below the dashboard. */
.bento-grid > section {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

/* ── Disable SVG glow filters on mobile (save GPU) ───────────── */
@media (max-width: 768px) {
    [filter*="glow"] {
        filter: none !important;
    }
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */

/* ---- Page background ---- */
html.theme-light.board-page body {
    background: #f1f5f9;
}

/* Glass card */
html.theme-light .glass-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.96) 100%);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

html.theme-light .glass-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
}

html.theme-light .glass-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.07);
}

html.theme-light .card-loading-overlay {
    background: rgba(248, 250, 252, 0.85);
}

/* ---- ALL text-white headings ---- */
html.theme-light .metric-section-header h2,
html.theme-light .metric-section-header .text-sm,
html.theme-light .bento-grid .text-white {
    color: #0f172a !important;
}

/* ---- Countdown / meta text (text-gray-500 → readable) ---- */
html.theme-light .bento-grid .text-gray-500,
html.theme-light .bento-grid .text-gray-400 {
    color: #475569 !important;
}

html.theme-light .bento-grid .text-gray-300 {
    color: #334155 !important;
}

/* ---- Metric big values — darken pastels for contrast ---- */
html.theme-light #oi-daily-value { color: #1d4ed8 !important; }
html.theme-light #fr-daily-value { color: #2563eb !important; }
html.theme-light #ls-daily-value { color: #059669 !important; }
html.theme-light #cvd-daily-value { color: #0891b2 !important; }
html.theme-light #altcoin-value  { color: #1e293b !important; text-shadow: none !important; }

/* ---- Daily change / annual / sentiment text ---- */
html.theme-light #oi-daily-change,
html.theme-light #ls-daily-change,
html.theme-light #cvd-daily-change,
html.theme-light #cvd-daily-delta,
html.theme-light #fr-daily-annual { color: #334155 !important; }

html.theme-light #fr-daily-sentiment { color: #1e293b !important; }

/* ---- High/Low labels (text-[10px] uppercase text-gray-500) ---- */
html.theme-light .bento-grid .text-\[10px\] { color: #64748b !important; }

/* ---- Emerald/Red accent values (keep colored but darken) ---- */
html.theme-light #oi-daily-high  { color: #059669 !important; }
html.theme-light #oi-daily-low   { color: #dc2626 !important; }

/* ---- Chart overlay values (text-slate-200) ---- */
html.theme-light .bento-grid .text-slate-200,
html.theme-light .bento-grid .text-slate-300 {
    color: #334155 !important;
}

html.theme-light .bento-grid [id$="-value-overlay"] {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

/* ---- Dividers (bg-slate-700 → light equivalent) ---- */
html.theme-light .bento-grid .bg-slate-700,
html.theme-light .bento-grid .w-px.bg-slate-700 {
    background-color: #cbd5e1 !important;
}

/* ---- Action buttons (toggle, reset, fullscreen) ---- */
html.theme-light .metric-reset-view-btn,
html.theme-light .chart-fullscreen-btn,
html.theme-light .market-view-toggle-btn,
html.theme-light .metric-view-toggle-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #64748b !important;
}

html.theme-light .metric-reset-view-btn:hover,
html.theme-light .chart-fullscreen-btn:hover,
html.theme-light .market-view-toggle-btn:hover,
html.theme-light .metric-view-toggle-btn:hover {
    background: rgba(15, 23, 42, 0.12) !important;
    color: #1e293b !important;
}

/* ---- Interval buttons (bg-slate-700/50 text-gray-300) ---- */
html.theme-light .bento-grid .market-chart-interval-btn,
html.theme-light .bento-grid .oi-interval-btn,
html.theme-light .bento-grid .fr-interval-btn,
html.theme-light .bento-grid .ls-interval-btn {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #475569 !important;
}

html.theme-light .bento-grid .market-chart-interval-btn:hover,
html.theme-light .bento-grid .oi-interval-btn:hover,
html.theme-light .bento-grid .fr-interval-btn:hover,
html.theme-light .bento-grid .ls-interval-btn:hover {
    background: rgba(15, 23, 42, 0.10) !important;
    color: #1e293b !important;
}

html.theme-light .bento-grid .market-chart-interval-btn.bg-blue-600,
html.theme-light .bento-grid .oi-interval-btn.bg-blue-600,
html.theme-light .bento-grid .fr-interval-btn.bg-blue-600,
html.theme-light .bento-grid .ls-interval-btn.bg-blue-600 {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* ---- Metric interval buttons (generic) ---- */
html.theme-light .metric-interval-btn,
html.theme-light .metric-filter-btn {
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .metric-interval-btn:hover,
html.theme-light .metric-filter-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #1e293b;
}

html.theme-light .metric-interval-btn.active,
html.theme-light .metric-filter-btn.active {
    color: #1e293b;
}

/* ---- Header selects ---- */
html.theme-light .market-chart-header-select,
html.theme-light .board-header-select,
html.theme-light .metric-header-filter-select {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

/* ---- Tooltips ---- */
html.theme-light .smart-tooltip,
html.theme-light .interval-info-tooltip-portal,
html.theme-light .card-calc-tooltip-portal {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Inner tooltip text colors for light theme (better readability on white background) */
html.theme-light .card-calc-tooltip-portal .ctt-title { color: #0f172a; }
html.theme-light .card-calc-tooltip-portal .ctt-label { color: #2563eb; }
html.theme-light .card-calc-tooltip-portal .ctt-weight { color: #0f172a; }
html.theme-light .card-calc-tooltip-portal .ctt-desc { color: #334155; }
html.theme-light .card-calc-tooltip-portal .ctt-sep td { border-bottom-color: rgba(124, 58, 237, 0.25); }
html.theme-light .card-calc-tooltip-portal .ctt-meta-label { color: #64748b; }
html.theme-light .card-calc-tooltip-portal .ctt-meta-val { color: #475569; }

/* ---- Calendar dropdown ---- */
html.theme-light .calendar-dropdown-wrapper .calendar-dropdown-inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border-color: rgba(15, 23, 42, 0.1);
}

html.theme-light .calendar-dropdown-option:hover {
    background: rgba(15, 23, 42, 0.04);
}

html.theme-light .calendar-dropdown-option.active,
html.theme-light .calendar-dropdown-option[aria-selected="true"] {
    background: rgba(15, 23, 42, 0.06);
}

html.theme-light .calendar-dropdown-option {
    color: #1e293b;
}

/* ---- Altcoin section ---- */
html.theme-light #altcoin-status {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
}

html.theme-light .altcoin-range-controls button {
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
}

html.theme-light .altcoin-range-controls button:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
}

html.theme-light .altcoin-range-controls button.border-blue-500\/40 {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
}

/* Altcoin gauge SVG adjustments */
html.theme-light #altcoin-gauge-svg rect[fill="#1e293b"] { fill: #e2e8f0; }
html.theme-light #altcoin-gauge-svg rect[stroke="#334155"] { stroke: #cbd5e1; }
html.theme-light #altcoin-gauge-svg line[stroke="#475569"] { stroke: #94a3b8; }
html.theme-light #altcoin-marker polygon[fill="#ffffff"] { fill: #1e293b; }
html.theme-light #altcoin-marker polygon[fill="#cbd5e1"] { fill: #475569; }
html.theme-light #altcoin-marker polygon[stroke="#1e293b"] { stroke: #ffffff; }

html.theme-light #altcoin-previous .opacity-60 { color: #94a3b8; }
html.theme-light #altcoin-previous-value { color: #475569; }

/* ---- ACI sections ---- */
html.theme-light .aci-section {
    background: rgba(255, 255, 255, 0.5);
}

/* ---- FNG section ---- */
html.theme-light .fng-classification-badge {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
}

html.theme-light .fng-live-component {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .fng-live-component-label,
html.theme-light .fng-live-component-delta.delta-neutral {
    color: #64748b;
}

html.theme-light .fng-live-component-value {
    color: #1e293b;
}

html.theme-light .fng-live-component-delta.delta-up { color: #16a34a; }
html.theme-light .fng-live-component-delta.delta-down { color: #dc2626; }

/* FNG gauge SVG */
html.theme-light #fng-score-circle[stroke="#0f172a"] { stroke: #e2e8f0; }
html.theme-light #fng-svg circle[stroke="#1e293b"] { stroke: #cbd5e1; }
html.theme-light #fng-svg circle[fill="#1e293b"] { fill: #94a3b8; }
html.theme-light #fng-pointer { fill: #1e293b !important; }
html.theme-light #fng-ghost-pointer { fill: #64748b !important; }

/* FNG + ACI history labels */
html.theme-light .fng-hist-label,
html.theme-light .aci-hist-label {
    color: #475569 !important;
}

html.theme-light .fng-hist-value,
html.theme-light .aci-hist-value {
    color: #1e293b;
}

/* History fill bar track */
html.theme-light .fng-hist-fill,
html.theme-light .aci-hist-fill {
    background-color: rgba(15, 23, 42, 0.08);
}

/* History grid border */
html.theme-light .fng-history-grid,
html.theme-light .aci-history-grid {
    border-left-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .fng-hist-cell + .fng-hist-cell,
html.theme-light .aci-hist-cell + .aci-hist-cell {
    border-top-color: rgba(15, 23, 42, 0.06);
}

/* FNG hist value colors — keep but improve contrast */
html.theme-light .fng-hist-value.fng-val-extreme-fear  { color: #dc2626 !important; }
html.theme-light .fng-hist-value.fng-val-fear          { color: #ea580c !important; }
html.theme-light .fng-hist-value.fng-val-neutral       { color: #ca8a04 !important; }
html.theme-light .fng-hist-value.fng-val-greed         { color: #65a30d !important; }
html.theme-light .fng-hist-value.fng-val-extreme-greed { color: #16a34a !important; }

/* ACI value colors — darken */
html.theme-light .aci-hist-value.aci-val-btc     { color: #b45309 !important; }
html.theme-light .aci-hist-value.aci-val-neutral  { color: #64748b !important; }
html.theme-light .aci-hist-value.aci-val-alt      { color: #2563eb !important; }

/* Delta badges */
html.theme-light .fng-hist-delta.delta-up,
html.theme-light .aci-hist-delta.delta-up   { color: #16a34a; background: rgba(22,163,74,0.10); }
html.theme-light .fng-hist-delta.delta-down,
html.theme-light .aci-hist-delta.delta-down { color: #dc2626; background: rgba(220,38,38,0.10); }
html.theme-light .fng-hist-delta.delta-neutral,
html.theme-light .aci-hist-delta.delta-neutral { color: #64748b; background: rgba(100,116,139,0.08); }

/* ---- Dominance / Market Flow ---- */
html.theme-light .dominance-panel {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(15, 23, 42, 0.06);
}

html.theme-light .dom-legend-name,
html.theme-light .flow-row-name {
    color: #334155 !important;
}

html.theme-light .dom-legend-fill,
html.theme-light .flow-bar-track {
    background-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .dom-val-btc    { color: #b45309 !important; }
html.theme-light .dom-val-eth    { color: #0891b2 !important; }
html.theme-light .dom-val-other  { color: #2563eb !important; }
html.theme-light .dom-val-stable { color: #059669 !important; }

html.theme-light .flow-val-btc    { color: #b45309 !important; }
html.theme-light .flow-val-eth    { color: #0891b2 !important; }
html.theme-light .flow-val-other  { color: #2563eb !important; }
html.theme-light .flow-val-stable { color: #059669 !important; }

html.theme-light .dom-mode-pill {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .dom-mode-pill:hover {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #1e293b !important;
}

html.theme-light .dom-mode-pill.active {
    background: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

html.theme-light .flow-summary,
html.theme-light .dom-total-bar {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .dom-legend-usd,
html.theme-light .flow-row-usd {
    color: #475569;
}

html.theme-light .dom-total-label {
    color: #475569;
}

html.theme-light .dom-total-value {
    color: #0f172a;
}

html.theme-light .flow-net-label {
    color: #475569;
}

html.theme-light .flow-net-value { color: #334155; }
html.theme-light .flow-net-value.flow-positive { color: #059669; }
html.theme-light .flow-net-value.flow-negative { color: #dc2626; }
html.theme-light .flow-net-value.flow-neutral  { color: #64748b; }

html.theme-light .flow-panel-header,
html.theme-light .flow-panel {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.06);
}

html.theme-light .flow-bar-center {
    background: rgba(15, 23, 42, 0.15);
}

/* Dominance donut center text */
html.theme-light .dominance-donut-svg text {
    fill: #1e293b;
}

/* ---- OI table headers ---- */
html.theme-light .oi-table-header,
html.theme-light .oi-table th {
    background: rgba(248, 250, 252, 0.8);
    color: #475569;
}

/* ---- Scrollbar tracks ---- */
html.theme-light .board-scrollbar::-webkit-scrollbar-track,
html.theme-light .calendar-events-grid::-webkit-scrollbar-track,
html.theme-light .liq-feed-scroll::-webkit-scrollbar-track,
html.theme-light .movers-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.03);
}

html.theme-light .board-scrollbar::-webkit-scrollbar-thumb,
html.theme-light .calendar-events-grid::-webkit-scrollbar-thumb,
html.theme-light .liq-feed-scroll::-webkit-scrollbar-thumb,
html.theme-light .movers-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
}

/* ---- Generic text color overrides ---- */
html.theme-light .metric-value,
html.theme-light .metric-label {
    color: #0f172a;
}

html.theme-light .metric-sublabel,
html.theme-light .metric-meta {
    color: #64748b;
}

/* ---- Liquidation section ---- */
html.theme-light .liq-summary-card {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .liq-summary-label {
    color: rgba(15, 23, 42, 0.55) !important;
}

html.theme-light .liq-summary-value-long {
    color: #059669 !important;
    text-shadow: none;
}

html.theme-light .liq-summary-value-short {
    color: #dc2626 !important;
    text-shadow: none;
}

html.theme-light .liq-summary-divider {
    background: rgba(15, 23, 42, 0.15);
    box-shadow: none;
}

html.theme-light .liq-stats-badge {
    color: #475569;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .liq-timeframe-btn {
    border-color: rgba(15, 23, 42, 0.12) !important;
    background: rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
}

html.theme-light .liq-timeframe-btn:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
}

html.theme-light .liq-timeframe-btn.border-blue-500\/40,
html.theme-light .liq-timeframe-btn[class*="bg-blue-500"] {
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
}

/* Liq feed items — text generated by JS */
html.theme-light #liq-feed .text-white { color: #0f172a !important; }
html.theme-light #liq-feed .text-gray-300,
html.theme-light #liq-feed .text-gray-400,
html.theme-light #liq-feed .text-gray-500 { color: #475569 !important; }
html.theme-light #liq-feed .text-slate-200,
html.theme-light #liq-feed .text-slate-300,
html.theme-light #liq-feed .text-slate-400 { color: #334155 !important; }
html.theme-light #liq-feed .bg-slate-800\/50,
html.theme-light #liq-feed [class*="bg-slate-800"],
html.theme-light #liq-feed [class*="bg-slate-700"] {
    background: rgba(15, 23, 42, 0.04) !important;
}
html.theme-light #liq-feed .border-slate-700,
html.theme-light #liq-feed [class*="border-slate"] {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* ---- Top 100 Liquidity ---- */
html.theme-light .mover-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.06);
}

html.theme-light .mover-item-top {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.10);
}

html.theme-light .mover-item-low {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.10);
    box-shadow: none;
}



html.theme-light .mover-item .symbol {
    color: #0f172a !important;
}

html.theme-light .top100-asset-badge {
    color: #475569;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .top100-asset-badge-crypto {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.10);
    border-color: rgba(14, 165, 233, 0.16);
}

html.theme-light .top100-asset-badge-commodity {
    color: #a16207;
    background: rgba(234, 179, 8, 0.13);
    border-color: rgba(234, 179, 8, 0.22);
}

html.theme-light .top100-asset-badge-index {
    color: #6d28d9;
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.18);
}

html.theme-light .top100-asset-badge-equity {
    color: #be185d;
    background: rgba(236, 72, 153, 0.10);
    border-color: rgba(236, 72, 153, 0.18);
}

html.theme-light .top100-asset-badge-macro {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.18);
}

html.theme-light .mover-item .change.positive { color: #059669 !important; }
html.theme-light .mover-item .change.negative { color: #dc2626 !important; }

html.theme-light .mover-rank {
    color: #475569;
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .mover-item-top .mover-rank {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

html.theme-light .mover-item-low .mover-rank {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
}

html.theme-light .mover-item-top .mover-val { color: #059669 !important; }
html.theme-light .mover-item-low .mover-val { color: #dc2626 !important; }
html.theme-light .mover-item-top .mover-pct { color: #059669 !important; }
html.theme-light .mover-item-low .mover-pct { color: #dc2626 !important; }

html.theme-light .top100-vol-leaders {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.12);
}

html.theme-light .top100-vol-label {
    color: #475569;
}

html.theme-light .top100-vol-value {
    color: #0891b2 !important;
}

html.theme-light .top100-col-header-top {
    color: #059669;
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.10);
}

html.theme-light .top100-col-header-low {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.10);
}

/* ---- Calendar section ---- */
html.theme-light .calendar-event-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.06);
}

html.theme-light .calendar-event-card:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

html.theme-light .calendar-section-header h3 {
    color: #1e293b !important;
}

/* Calendar time filter buttons */
html.theme-light .upcoming-time-filter,
html.theme-light .past-time-filter {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}

html.theme-light .upcoming-time-filter:hover,
html.theme-light .past-time-filter:hover {
    background: rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .upcoming-time-filter.active,
html.theme-light .past-time-filter.active {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #2563eb !important;
}

/* Event count badges */
html.theme-light #upcoming-event-count,
html.theme-light #past-event-count {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #475569 !important;
}

/* Calendar filter chips */
html.theme-light .cal-chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
    color: #475569;
}

html.theme-light .cal-chip:hover {
    background: rgba(15, 23, 42, 0.08);
}

html.theme-light .cal-chip.active {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

html.theme-light .cal-chip--orange.active {
    border-color: rgba(234, 88, 12, 0.35);
    background: rgba(234, 88, 12, 0.08);
    color: #c2410c;
}

html.theme-light .cal-chip--blue.active {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

html.theme-light .cal-chip--gray.active {
    border-color: rgba(100, 116, 139, 0.35);
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
}

html.theme-light .cal-chip--blue.active {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

html.theme-light .cal-filter-seg-label {
    color: #475569;
}

html.theme-light .cal-filter-divider {
    background: rgba(15, 23, 42, 0.08);
}

html.theme-light .cal-filter-bar {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
}

/* Calendar filter toggle */
html.theme-light #calendar-filter-toggle .text-gray-400 {
    color: #475569 !important;
}

/* ---- Fullscreen chart overlay stays dark ---- */
html.theme-light .chart-fullscreen-overlay {
    background: rgba(0, 0, 0, 0.95);
}

/* ---- Loading spinners ---- */
html.theme-light .board-round-loader {
    border-color: rgba(15, 23, 42, 0.08);
    border-top-color: #3b82f6;
}

/* ---- Long/Short bar ---- */
html.theme-light #ls-daily-long-pct { color: #059669 !important; }
html.theme-light #ls-daily-short-pct { color: #dc2626 !important; }

/* ---- Skeleton items ---- */
html.theme-light .mover-item.skeleton {
    background: rgba(15, 23, 42, 0.04) !important;
}

/* ---- ACI badge sentinel overrides for light ---- */
html.theme-light .aci-bitcoin-season { color: #c2410c !important; }
html.theme-light .aci-altcoin-season { color: #2563eb !important; }
html.theme-light .aci-neutral-zone   { color: #475569 !important; }

/* ---- JS-generated bg-slate-* overrides (board.bundle.js) ---- */
html.theme-light .bento-grid .bg-slate-700\/50,
html.theme-light .bento-grid .bg-slate-800\/40,
html.theme-light .bento-grid .bg-slate-800\/60,
html.theme-light .bento-grid .bg-slate-800\/80,
html.theme-light .bento-grid .bg-slate-800,
html.theme-light .bento-grid .bg-slate-700,
html.theme-light .bento-grid .bg-slate-600 {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

html.theme-light .bento-grid .border-slate-600\/40,
html.theme-light .bento-grid .border-slate-600\/50,
html.theme-light .bento-grid .border-slate-600\/70,
html.theme-light .bento-grid .border-slate-700\/40,
html.theme-light .bento-grid .border-slate-700 {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

html.theme-light .bento-grid .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}
html.theme-light .bento-grid .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Hover states for bg-slate buttons */
html.theme-light .bento-grid .hover\:bg-slate-600:hover {
    background-color: rgba(15, 23, 42, 0.10) !important;
}
html.theme-light .bento-grid .hover\:text-white:hover {
    color: #0f172a !important;
}

/* ---- Dom donut center circle ---- */
html.theme-light .dominance-donut-svg circle[fill="#0f172a"],
html.theme-light .dominance-donut-svg circle[fill="#1e293b"] {
    fill: #f1f5f9;
}

/* ---- Risk-on / Risk-off badge text ---- */
html.theme-light .dom-risk-badge {
    color: #1e293b;
}

/* ---- Metric daily enhanced panel ---- */
html.theme-light .metric-daily-enhanced {
    color: #0f172a;
}

/* ==========================================================================
   LIGHT THEME — additional overrides for remaining dark chrome
   ========================================================================== */

/* ---- Mode-toggle containers (Market Flow / Top 100 headers) ---- */
html.theme-light .dom-mode-toggle,
html.theme-light .top100-mode-toggle {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

/* ---- Top 100 mode pills ---- */
html.theme-light .top100-mode-pill {
    background: transparent;
    color: #64748b;
}
html.theme-light .top100-mode-pill:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #1e293b;
}
html.theme-light .top100-mode-pill.active {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    box-shadow: 0 0 6px rgba(20, 184, 166, 0.15);
}

/* ---- Flow summary net label/value ---- */
html.theme-light .flow-row-name { color: #475569; }

/* ---- Flow bar track (background behind % bars) ---- */
html.theme-light .flow-bar-track {
    background: rgba(15, 23, 42, 0.06);
}
html.theme-light .flow-bar-center {
    background: rgba(15, 23, 42, 0.18);
}

/* ---- Fear & Greed / Altcoin gauges: panels & subtitle chips ---- */
html.theme-light .altcoin-season-chip,
html.theme-light .fng-state-chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
    color: #334155;
}

/* ---- Top 100 rank cells ---- */
html.theme-light .top100-rank-number {
    color: #64748b;
}
html.theme-light .top100-symbol-cell {
    color: #0f172a;
}
html.theme-light .top100-value-cell {
    color: #0f172a;
}
html.theme-light .top100-pct-cell {
    color: #64748b;
}
html.theme-light .top100-row {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}
html.theme-light .top100-row:hover {
    background: rgba(15, 23, 42, 0.03);
}

/* ---- Liquidation event rows ---- */
html.theme-light #liq-feed .liq-row,
html.theme-light .liq-event-row {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}
html.theme-light .liq-event-coin { color: #0f172a; }
html.theme-light .liq-event-meta { color: #64748b; }

/* ---- Card info-tooltip trigger ---- */
html.theme-light .info-trigger,
html.theme-light .info-icon {
    color: #94a3b8;
}
html.theme-light .info-trigger:hover,
html.theme-light .info-icon:hover {
    color: #475569;
}

/* ---- Countdown pill background ---- */
html.theme-light .countdown-pill,
html.theme-light .header-countdown-pill {
    background: rgba(15, 23, 42, 0.04);
    color: #64748b;
    border-color: rgba(15, 23, 42, 0.08);
}

/* ---- Alt index subtitle ("Neutral / BTC / ALT") labels ---- */
html.theme-light .altcoin-sub-label,
html.theme-light .altcoin-sub-label.active {
    color: #334155;
}

/* ---- Any remaining dark pill chrome (generic) ---- */
html.theme-light .board-header-select {
    background: rgba(15, 23, 42, 0.04);
    color: #1e293b;
    border-color: rgba(15, 23, 42, 0.10);
}
html.theme-light .board-header-select option {
    background: #ffffff;
    color: #0f172a;
}

/* ---- Event-Kalender chips (fallback for unknown color variants) ---- */
html.theme-light .cal-chip {
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
    border-color: rgba(15, 23, 42, 0.08);
}

/* =========================================================================
   LIGHT THEME — Calendar event cards (class generated by JS: cal-event-card)
   ========================================================================= */

/* Card wrapper — JS uses 'cal-event-card', not 'calendar-event-card' */
html.theme-light .cal-event-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
html.theme-light .cal-event-card:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
}

/* Time badge — past section uses bg-gray-800/50, upcoming uses bg-white/10 */
html.theme-light .cal-event-card [class*="bg-gray-800"] {
    background: rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .bento-grid .bg-white\/10 {
    background: rgba(15, 23, 42, 0.05) !important;
}

/* Badge text — pastels are illegible on white background */
html.theme-light .cal-event-card .text-blue-300   { color: #1d4ed8 !important; }
html.theme-light .cal-event-card .text-sky-300    { color: #0284c7 !important; }
html.theme-light .cal-event-card .text-gray-300   { color: #1e293b !important; }
html.theme-light .cal-event-card .text-gray-400   { color: #334155 !important; }
html.theme-light .cal-event-card .text-gray-500   { color: #475569 !important; }
html.theme-light .cal-event-card .text-blue-300 { color: #2563eb !important; }
html.theme-light .cal-event-card .text-green-300  { color: #15803d !important; }
html.theme-light .cal-event-card .text-red-400    { color: #dc2626 !important; }
html.theme-light .cal-event-card .text-emerald-400 { color: #059669 !important; }
html.theme-light .cal-event-card .text-yellow-400 { color: #ca8a04 !important; }

/* Badge backgrounds — transparent pastels over white need adjustment */
html.theme-light .cal-event-card [class*="bg-blue-500\/"]   { background: rgba(37, 99, 235, 0.08) !important; }
html.theme-light .cal-event-card [class*="bg-sky-500\/"]    { background: rgba(14, 165, 233, 0.08) !important; }
html.theme-light .cal-event-card [class*="bg-gray-500\/"]   { background: rgba(100, 116, 139, 0.06) !important; }
html.theme-light .cal-event-card [class*="bg-blue-500\/"] { background: rgba(59, 130, 246, 0.08) !important; }
html.theme-light .cal-event-card [class*="bg-green-500\/"]  { background: rgba(22, 163, 74, 0.08) !important; }
html.theme-light .cal-event-card [class*="bg-red-500\/"]    { background: rgba(239, 68, 68, 0.08) !important; }
html.theme-light .cal-event-card [class*="bg-orange-500\/"] { background: rgba(234, 88, 12, 0.08) !important; }

/* Stats row border separator */
html.theme-light .cal-event-card .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Section headers (Kommende / Vergangene Termine) */
html.theme-light .calendar-section-header h3 {
    color: #1e293b !important;
}

/* ---- Cal-flag buttons (region filter) ---- */
html.theme-light .cal-flag {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}
html.theme-light .cal-flag:hover {
    background: rgba(15, 23, 42, 0.08) !important;
}
html.theme-light .cal-flag.active {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ---- Calendar timezone badge ---- */
html.theme-light #calendar-timezone-badge {
    background: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
    color: #3730a3 !important;
}

/* =========================================================================
   LIGHT THEME — board card visibility polish
   Cards waren auf #f1f5f9 BG zu wenig abgesetzt: Border @10% und sehr leichter
   Shadow gehen optisch unter. Wir erhöhen Page-BG-Kontrast leicht, stärken
   Border + Shadow, und definieren eine sichtbare Hover-Hebung.
   ========================================================================= */
html.theme-light.board-page body {
    background: #e6ebf2 !important;
}

html.theme-light .glass-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .glass-card:hover {
    border-color: rgba(15, 23, 42, 0.18) !important;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 12px 28px rgba(15, 23, 42, 0.10) !important;
}

/* Stronger separators inside cards (between content rows) */
html.theme-light .bento-grid .border-white\/10,
html.theme-light .bento-grid .border-white\/5,
html.theme-light .bento-grid .border-slate-700\/40,
html.theme-light .bento-grid .border-slate-700\/50,
html.theme-light .bento-grid .border-slate-700\/60 {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* Card header titles – darker for clarity */
html.theme-light .bento-grid .metric-section-header h2,
html.theme-light .bento-grid h2.text-sm,
html.theme-light .bento-grid h3.text-sm {
    color: #0f172a !important;
}

/* Section labels (GESTERN, VORGESTERN, etc.) need real grey, not invisible */
html.theme-light .bento-grid .text-gray-400,
html.theme-light .bento-grid .text-gray-500 {
    color: #64748b !important;
}
html.theme-light .bento-grid .text-gray-300 {
    color: #334155 !important;
}

/* Number values: darken pure-white labels */
html.theme-light .bento-grid .text-white {
    color: #0f172a !important;
}

/* Top-100 cashflow rows: alternating bg + clearer separator */
html.theme-light #cashflow-top-list > *,
html.theme-light #cashflow-low-list > * {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Dedicated fullscreen economic calendar page */
html.calendar-page,
html.calendar-page body {
    height: 100%;
    overflow: hidden;
}

html.calendar-page #page_content_wrapper {
    padding-top: 0 !important;
    height: 100vh;
    overflow: hidden;
}

html.calendar-page #calendar_main_page {
    height: 100vh;
    min-height: 100vh;
    padding-top: calc(var(--navbar-height, 5rem) + 0.35rem) !important;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: #020617;
}

html.calendar-page .calendar-page-shell {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    min-width: 0;
}

html.calendar-page .calendar-fullscreen-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #020617;
    padding: 10px clamp(14px, 1.45vw, 24px) clamp(14px, 1.45vw, 22px) !important;
}

html.calendar-page .calendar-fullscreen-panel::before,
html.calendar-page .calendar-fullscreen-panel::after {
    display: none !important;
}

html.calendar-page .calendar-page-header {
    flex: 0 0 auto;
    min-height: 36px;
    padding-bottom: 8px;
    margin-bottom: 8px !important;
    position: relative;
    justify-content: center !important;
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}

html.calendar-page .calendar-page-title {
    font-size: clamp(1.05rem, 0.8rem + 0.8vw, 1.65rem) !important;
    line-height: 1.15;
    letter-spacing: 0;
    justify-content: center;
    margin: 0 auto;
}

html.calendar-page .calendar-filter-toggle {
    position: absolute;
    right: 0;
    top: 2px;
}

html.calendar-page .calendar-header-controls {
    position: absolute;
    right: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

html.calendar-page .calendar-header-controls .calendar-filter-toggle {
    position: static;
}

html.calendar-page .calendar-page-title .card-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #5eead4 !important;
    background: rgba(13, 148, 136, 0.18);
    border: 1px solid rgba(94, 234, 212, 0.24);
}

html.calendar-page #calendar-timezone-badge {
    margin-left: 0;
    min-width: 142px;
    text-align: center;
    font-size: clamp(0.8rem, 0.72rem + 0.22vw, 0.98rem) !important;
    line-height: 1.1;
    font-weight: 750 !important;
    color: #c7d2fe !important;
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(165, 180, 252, 0.26) !important;
    padding: 0.22rem 0.48rem !important;
}

html.theme-light.calendar-page #calendar-timezone-badge {
    color: #312e81 !important;
    background: rgba(79, 70, 229, 0.12) !important;
    border-color: rgba(79, 70, 229, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html.calendar-page .calendar-page-filter-panel {
    flex: 0 0 auto;
    margin-bottom: 12px !important;
}

html.calendar-page .cal-filter-bar {
    width: 100%;
    border-radius: 8px;
    background: rgba(8, 13, 25, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: none;
    padding: 0.45rem 0.55rem;
}

html.calendar-page .calendar-page-events-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    gap: clamp(12px, 1.5vw, 20px) !important;
}

html.calendar-page .calendar-page-events-grid--single {
    grid-template-columns: minmax(0, 1fr) !important;
}

html.calendar-page .calendar-page-column {
    min-height: 0;
    overflow: visible;
    border-radius: 8px;
    background: rgba(8, 13, 25, 0.66);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 10px;
}

html.calendar-page .calendar-page-column--combined {
    max-width: min(1180px, 100%);
    width: 100%;
    margin: 0 auto;
}

html.calendar-page .calendar-combined-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 750;
}

html.calendar-page .calendar-combined-section-title:not(:first-child) {
    margin-top: 22px;
}

html.calendar-page .calendar-combined-section-title span:last-child {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

html.calendar-page .calendar-section-header {
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 0 9px;
    margin-bottom: 9px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

html.calendar-page .calendar-section-header h2 {
    font-size: 0.95rem !important;
    color: #e2e8f0 !important;
}

html.calendar-page .calendar-time-filters {
    flex-shrink: 0;
}

html.calendar-page .calendar-time-filters button,
html.calendar-page .cal-chip,
html.calendar-page .cal-flag {
    border-radius: 7px !important;
}

html.calendar-page .cal-chip {
    padding: 0.3rem 0.62rem;
}

html.calendar-page .cal-flag {
    width: 1.95rem;
    height: 1.7rem;
}

html.calendar-page .calendar-page-list {
    flex: 0 0 auto;
    min-height: 0 !important;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: auto;
}

html.calendar-page .calendar-page-list::-webkit-scrollbar {
    width: 8px;
}

html.calendar-page .calendar-page-list::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.28);
}

html.calendar-page .calendar-page-list::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.38);
    border-radius: 999px;
}

html.calendar-page .cal-event-card {
    border-radius: 8px !important;
    background-color: rgba(15, 23, 42, 0.72) !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0.85rem 0.95rem !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

html.calendar-page .cal-event-card:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 234, 212, 0.36) !important;
    background-color: rgba(15, 23, 42, 0.84) !important;
}

html.calendar-page .cal-event-card .pl-3 {
    padding-left: 0.85rem !important;
}

html.calendar-page .cal-event-card .top-3.right-3 {
    top: 0.65rem !important;
    right: 0.65rem !important;
    border-radius: 7px !important;
    padding: 0.22rem 0.55rem !important;
}

html.calendar-page .cal-event-card .top-3.right-3 span {
    font-size: 0.72rem !important;
    line-height: 1.2;
}

html.calendar-page .cal-event-card h3,
html.calendar-page .cal-event-card .text-base.font-semibold {
    padding-right: 5.25rem;
    line-height: 1.35;
}

html.calendar-page #calendar-source-attribution {
    flex: 0 0 auto;
    margin-top: 10px !important;
}

html.theme-light.calendar-page #calendar_main_page {
    background: var(--theme-bg, #f1f5f9);
}

html.theme-light.calendar-page .calendar-fullscreen-panel {
    background: var(--theme-bg, #f1f5f9) !important;
    box-shadow: none;
}

html.theme-light.calendar-page .calendar-page-column,
html.theme-light.calendar-page .cal-filter-bar {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

html.theme-light.calendar-page .calendar-combined-section-title {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(15, 23, 42, 0.08);
    color: #334155;
}

html.theme-light.calendar-page .cal-event-card {
    background-color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html.theme-light.calendar-page .cal-event-card:hover {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

@media (max-width: 900px) {
    html.calendar-page,
    html.calendar-page body,
    html.calendar-page #page_content_wrapper,
    html.calendar-page #calendar_main_page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    html.calendar-page #calendar_main_page {
        padding-top: calc(var(--shared-mobile-topbar-height, 3rem) + env(safe-area-inset-top, 0px) + 0.85rem) !important;
    }

    html.calendar-page .calendar-page-shell,
    html.calendar-page .calendar-fullscreen-panel {
        height: auto;
        min-height: calc(100vh - var(--mobile-topbar-height, 56px));
    }

    html.calendar-page .calendar-page-events-grid {
        grid-template-columns: 1fr !important;
        overflow: visible;
    }

    html.calendar-page .calendar-page-column {
        overflow: visible;
    }

    html.calendar-page .calendar-page-list {
        overflow: visible;
        max-height: none;
    }

    html.calendar-page .calendar-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.55rem;
        padding-top: 0.85rem;
        justify-content: stretch !important;
        text-align: left;
    }

    html.calendar-page .calendar-page-title {
        width: 100% !important;
        justify-self: start;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        line-height: 1.28;
        margin: 0;
        padding-right: 0;
    }

    html.calendar-page .calendar-header-controls {
        display: contents;
    }

    html.calendar-page #calendar-timezone-badge {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        align-self: center;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        font-size: 0.68rem !important;
        line-height: 1.15;
        white-space: nowrap;
        padding: 0.18rem 0.38rem !important;
    }

    html.calendar-page .calendar-filter-toggle {
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        max-width: none;
    }

    html.calendar-page .cal-event-card .flex.items-center.justify-between.mb-3 {
        align-items: flex-start;
        gap: 0.55rem;
    }

    html.calendar-page .cal-event-card .pl-3 > .flex.items-center.justify-between.mb-3 > div:first-child {
        min-width: 0;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    html.calendar-page .cal-event-card .pl-3 > .flex.items-center.justify-between.mb-3 > div:first-child > div {
        padding: 0.22rem 0.45rem !important;
        gap: 0.35rem !important;
    }

    html.calendar-page .cal-event-card .pl-3 > .flex.items-center.justify-between.mb-3 > div:first-child span {
        font-size: 0.72rem !important;
        line-height: 1.15;
    }

    html.calendar-page .cal-event-card h3,
    html.calendar-page .cal-event-card .text-base.font-semibold {
        padding-right: 0;
    }
}

@media (max-width: 380px) {
    html.calendar-page .calendar-header-controls {
        gap: 0.45rem;
    }

    html.calendar-page #calendar-timezone-badge {
        font-size: 0.66rem !important;
    }

    html.calendar-page .calendar-filter-toggle {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
    }
}

@media (min-width: 400px) and (max-width: 900px) {
    html.calendar-page .calendar-page-header {
        grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0.42rem;
        row-gap: 0;
    }

    html.calendar-page .calendar-page-title {
        width: auto !important;
        grid-column: 1;
        grid-row: 1;
    }

    html.calendar-page .calendar-header-controls {
        display: contents;
    }

    html.calendar-page #calendar-timezone-badge {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        font-size: 0.66rem !important;
        padding: 0.16rem 0.34rem !important;
    }

    html.calendar-page .calendar-filter-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

/* Calendar page scroll fix: keep fullscreen feel without trapping the page */
html.calendar-page,
html.calendar-page body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html.calendar-page #page_content_wrapper {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

html.calendar-page #calendar_main_page {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

html.calendar-page .calendar-page-shell {
    height: auto !important;
    min-height: calc(100vh - var(--navbar-height, 5rem) - 0.35rem);
    max-width: none;
    margin: 0;
    padding: 0;
}

html.calendar-page .calendar-fullscreen-panel {
    height: auto !important;
    min-height: calc(100vh - var(--navbar-height, 5rem) - 0.35rem);
    overflow: visible !important;
}

html.calendar-page .calendar-page-events-grid {
    min-height: 0;
    align-items: start;
}

html.calendar-page .calendar-page-column {
    overflow: visible !important;
}

html.calendar-page .calendar-page-list {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

@media (max-width: 900px) {
    html.calendar-page .calendar-page-list {
        max-height: none;
        min-height: 0 !important;
    }
}

/* =========================================================================
   LIGHT THEME — Calendar page (calendar.html) polish
   Fixt: Title-text-white in cards, Date-Group-Badge (outside cal-event-card),
   Section-Header h2.text-gray-300, Count-Badge, Holiday-Badge, Country-Badge,
   Timezone-Badge, Source-Attribution.
   ========================================================================= */

/* Page background + main panel */
html.theme-light.calendar-page body {
    background: #f8fafc !important;
    background-image:
        radial-gradient(ellipse 60% 40% at 20% 10%, rgba(59, 130, 246, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 30%, rgba(59, 130, 246, 0.05), transparent 70%) !important;
}
html.theme-light .bento-calendar.calendar-fullscreen-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.94) 100%) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

/* Page title "Wirtschaftskalender" */
html.theme-light .calendar-page-title.text-white,
html.theme-light .calendar-page-title .text-white { color: #0f172a !important; }
html.theme-light .calendar-page-title .card-icon.text-slate-400 { color: #475569 !important; }

/* Section headers "Kommende Termine" / "Vergangene Termine" */
html.theme-light .calendar-section-header h2.text-gray-300,
html.theme-light .calendar-section-header h3.text-gray-300 { color: #0f172a !important; }

/* Date group badge (outside cal-event-card – built in renderDateGroup) */
html.theme-light .bg-blue-500\/15 {
    background: rgba(59, 130, 246, 0.10) !important;
}
html.theme-light .border-blue-500\/30 {
    border-color: rgba(59, 130, 246, 0.40) !important;
}
html.theme-light .calendar-page-list .text-blue-300,
html.theme-light .calendar-page-list .text-blue-400 { color: #2563eb !important; }
html.theme-light .calendar-page-list .shadow-blue-500\/5 {
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.10) !important;
}

/* Count pill ("1" next to date group, "119" next to section header) */
html.theme-light .calendar-page-list .bg-white\/10,
html.theme-light .calendar-section-header .bg-white\/5 {
    background: rgba(15, 23, 42, 0.06) !important;
}
html.theme-light .calendar-page-list .text-gray-300,
html.theme-light .calendar-section-header .text-gray-400 { color: #1e293b !important; }

/* Calendar event card – title text was white-on-white before */
html.theme-light .cal-event-card .text-white { color: #0f172a !important; }
html.theme-light .cal-event-card h3.text-gray-400 { color: #334155 !important; }

/* Time badge (clock icon + time) – "bg-white/10" inside cal-event-card */
html.theme-light .cal-event-card .bg-white\/10 {
    background: rgba(15, 23, 42, 0.06) !important;
}

/* Holiday badge "🏖️ Feiertag" (bg-green-500/25, border-green-400/50, text-green-300) */
html.theme-light .cal-event-card .bg-green-500\/25 {
    background: rgba(16, 185, 129, 0.16) !important;
}
html.theme-light .cal-event-card .border-green-400\/50,
html.theme-light .cal-event-card .border-green-500\/30,
html.theme-light .cal-event-card .border-green-500\/40 {
    border-color: rgba(16, 185, 129, 0.45) !important;
}
html.theme-light .cal-event-card .bg-green-500\/15 {
    background: rgba(16, 185, 129, 0.12) !important;
}
html.theme-light .cal-event-card .text-green-300 { color: #047857 !important; }

/* Country badges (bg-blue-500/15, bg-sky-500/15, bg-gray-500/15 for non-USA/EU) */
html.theme-light .cal-event-card .bg-blue-500\/15 {
    background: rgba(37, 99, 235, 0.12) !important;
}
html.theme-light .cal-event-card .bg-sky-500\/15 {
    background: rgba(14, 165, 233, 0.12) !important;
}
html.theme-light .cal-event-card .bg-gray-500\/15 {
    background: rgba(100, 116, 139, 0.14) !important;
}
html.theme-light .cal-event-card .border-blue-500\/30 { border-color: rgba(37, 99, 235, 0.40) !important; }
html.theme-light .cal-event-card .border-sky-500\/30 { border-color: rgba(14, 165, 233, 0.40) !important; }
html.theme-light .cal-event-card .border-gray-500\/30 { border-color: rgba(100, 116, 139, 0.40) !important; }

/* Currency badge (bg-blue-500/15) */
html.theme-light .cal-event-card .bg-blue-500\/15 {
    background: rgba(59, 130, 246, 0.12) !important;
}
html.theme-light .cal-event-card .border-blue-500\/30 {
    border-color: rgba(59, 130, 246, 0.40) !important;
}

/* Hot-Event badge (bg-red-500/20) + Early-Close (bg-amber-500/20) */
html.theme-light .cal-event-card .bg-red-500\/20 {
    background: rgba(239, 68, 68, 0.14) !important;
}
html.theme-light .cal-event-card .border-red-400\/50 {
    border-color: rgba(239, 68, 68, 0.45) !important;
}
html.theme-light .cal-event-card .text-red-400 { color: #b91c1c !important; }
html.theme-light .cal-event-card .bg-amber-500\/20 {
    background: rgba(245, 158, 11, 0.16) !important;
}
html.theme-light .cal-event-card .border-amber-400\/50 {
    border-color: rgba(245, 158, 11, 0.45) !important;
}
html.theme-light .cal-event-card .text-amber-300 { color: #b45309 !important; }

/* Impact gradients – soften so background stays light */
html.theme-light .cal-event-card.from-orange-500\/20,
html.theme-light .cal-event-card .from-orange-500\/20 { --tw-gradient-from: rgba(249, 115, 22, 0.10) !important; }
html.theme-light .cal-event-card.from-blue-500\/20,
html.theme-light .cal-event-card .from-blue-500\/20 { --tw-gradient-from: rgba(59, 130, 246, 0.08) !important; }
html.theme-light .cal-event-card.from-green-500\/20,
html.theme-light .cal-event-card .from-green-500\/20 { --tw-gradient-from: rgba(16, 185, 129, 0.10) !important; }
html.theme-light .cal-event-card.from-gray-500\/10,
html.theme-light .cal-event-card .from-gray-500\/10 { --tw-gradient-from: rgba(148, 163, 184, 0.10) !important; }

/* Border colors per impact */
html.theme-light .cal-event-card.border-orange-500\/40 { border-color: rgba(249, 115, 22, 0.45) !important; }
html.theme-light .cal-event-card.border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.40) !important; }
html.theme-light .cal-event-card.border-green-500\/40 { border-color: rgba(16, 185, 129, 0.45) !important; }
html.theme-light .cal-event-card.border-gray-500\/20 { border-color: rgba(148, 163, 184, 0.35) !important; }

/* Past section: opacity-60 keeps contrast okay; ensure text stays readable */
html.theme-light .cal-event-card.opacity-60 { opacity: 0.85 !important; }
html.theme-light .cal-event-card.opacity-60 .text-gray-400,
html.theme-light .cal-event-card.opacity-60 .text-gray-500 { color: #64748b !important; }

/* Source attribution */
html.theme-light #calendar-source-attribution { color: #475569 !important; }

/* Mobile topbar title */
html.theme-light .shared-mobile-topbar { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(15, 23, 42, 0.08) !important; }
html.theme-light .shared-mobile-topbar__title { color: #0f172a !important; }
html.theme-light .shared-mobile-topbar__button { color: #0f172a !important; }

@media (max-width: 499px) {
    .metric-section-header,
    .metric-section-header:not(.flex) > .flex {
        display: grid !important;
        grid-template-columns: minmax(0, max-content) minmax(2rem, 1fr) auto;
        align-items: center !important;
        position: relative;
        width: 100%;
        min-height: 1.625rem;
        margin-left: 0 !important;
        column-gap: 0.375rem;
        justify-content: initial !important;
    }

    .metric-section-header {
        padding-top: 0 !important;
        padding-bottom: 0.375rem !important;
        margin-bottom: 0.375rem !important;
    }

    .metric-section-header .metric-header-filters.hidden {
        display: none !important;
    }

    /* Top 100 keeps its mode toggle outside the action group, so it needs a 4th column. */
    .bento-movers .metric-section-header,
    .bento-movers .metric-section-header:not(.flex) > .flex {
        grid-template-columns: minmax(0, max-content) minmax(2rem, 1fr) auto auto;
    }

    .metric-section-header:not(.flex) > .flex {
        grid-column: 1 / -1;
    }

    .metric-section-header h2 {
        position: static;
        transform: none;
        grid-column: 1;
        justify-self: start;
        z-index: 2;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100%;
        overflow: visible;
        white-space: nowrap;
        margin-right: 0 !important;
        text-align: left !important;
    }

    .metric-section-header h2 > span:not(.card-icon):not(.card-calc-info-btn) {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .metric-section-header h2 .card-calc-info-btn {
        display: inline-flex !important;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-left: 0.25rem;
        opacity: 0.85;
    }

    .metric-section-header .header-action-group {
        position: static;
        transform: none;
        grid-column: -2 / -1;
        justify-self: end;
        z-index: 2;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }

    .metric-section-header #top100-mode-toggle {
        grid-column: -3 / -2;
        justify-self: end;
        margin-left: 0 !important;
        z-index: 2;
    }

    .metric-section-header .header-action-group .dom-mode-toggle {
        margin-left: 0 !important;
    }

    #fng-header-countdown,
    #aci-header-countdown,
    #dom-header-countdown,
    #oi-header-countdown,
    #fr-header-countdown,
    #ls-header-countdown,
    #cvd-header-countdown,
    #liq-header-countdown,
    #top100-header-countdown {
        display: inline-flex !important;
        position: static;
        transform: none;
        grid-column: 2;
        justify-self: center;
        z-index: 1;
        align-items: center;
        justify-content: center;
        flex: none !important;
        min-width: 2rem;
        max-width: 4.5rem;
        padding: 0 0.125rem;
        font-size: 0.625rem !important;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    #cvd-timeframe-controls,
    #liq-timeframe-controls,
    .altcoin-range-controls {
        display: none !important;
    }

    .cvd-timeframe-select + .custom-select-trigger.hidden,
    .altcoin-period-select + .custom-select-trigger.hidden,
    .liq-chart-header-select + .custom-select-trigger.hidden {
        display: inline-flex !important;
    }

    .cvd-timeframe-select + .custom-select-trigger,
    .altcoin-period-select + .custom-select-trigger,
    .liq-chart-header-select + .custom-select-trigger,
    .metric-chart-header-select + .custom-select-trigger,
    .market-chart-interval-select + .custom-select-trigger {
        min-width: 3rem;
        max-width: 3.6rem;
        height: 1.5rem;
        padding-inline: 0.25rem;
    }

    .board-card-chart-view .market-chart-interval-mobile-wrap {
        display: flex !important;
        justify-content: flex-end;
    }

    .board-card-chart-view .market-chart-interval-row,
    .metric-header-filters .metric-interval-row {
        display: none !important;
    }

    .bento-cvd .header-action-group,
    .bento-liq .header-action-group,
    .bento-altcoin .header-action-group {
        gap: 0.25rem !important;
    }
}

/* ── Board scope notice ─────────────────────────────────────────────
   Shown only for asset classes without upstream data yet. The state is
   driven by #board_main_page[data-board-scope-available="0"] (set in
   market-cards.js). Crypto/Cross keep data-board-scope-available="1" and
   are completely unaffected by these rules. */
.board-scope-notice { display: none; }
#board_main_page[data-board-scope-available="0"] .board-scope-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 1rem;
    max-width: 560px;
    padding: 0.7rem 1.1rem;
    border-radius: 14px;
    background: rgba(51, 65, 85, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.board-scope-notice__icon { width: 18px; height: 18px; color: #94a3b8; flex: 0 0 auto; }
/* Recede the (empty) placeholder cards so the notice reads as intentional. */
#board_main_page[data-board-scope-available="0"] .bento-grid {
    opacity: 0.45;
    filter: saturate(0.6);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Kapitalfluss error state — shown when the flow source data is inconsistent. */
.flow-net-value.flow-error { color: #f87171; font-weight: 700; font-size: 0.95rem; }
#dominance-flow-view[data-flow-error="1"] .flow-histo-svg,
#dominance-flow-view[data-flow-error="1"] .flow-rows { opacity: 0.4; }

/* Board scope views: crypto (bento grid), assets (non-crypto price list), pending (notice) */
.board-scope-assets { display: none; }
#board_main_page[data-board-scope-view="assets"] .bento-grid { display: none !important; }
#board_main_page[data-board-scope-view="assets"] .board-scope-notice { display: none !important; }
#board_main_page[data-board-scope-view="assets"] .board-scope-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0 1rem;
}
#board_main_page[data-board-scope-view="pending"] .board-scope-notice { display: flex; }
#board_main_page[data-board-scope-view="pending"] .bento-grid { opacity: 0.4; filter: saturate(0.6); pointer-events: none; }
#board_main_page[data-board-scope-view="crypto"] .board-scope-assets { display: none; }
#board_main_page[data-board-scope-view="crypto"] .board-scope-notice { display: none; }
.scope-asset-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; }
.scope-asset-card--empty { opacity: 0.5; }
.scope-asset-name { font-size: 0.85rem; color: #cbd5e1; font-weight: 600; }
.scope-asset-price { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.1; }
.scope-asset-meta { font-size: 0.72rem; color: #94a3b8; }

/* Non-crypto scopes keep the FULL normal board look (cards filled with scope
   data) — neutralize the earlier dim/desaturate/notice overlay. */
#board_main_page[data-board-scope-available="0"] .bento-grid,
#board_main_page[data-board-scope-view="pending"] .bento-grid {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}
#board_main_page[data-board-scope-available="0"] .board-scope-notice,
#board_main_page[data-board-scope-view="pending"] .board-scope-notice { display: none !important; }

/* Global selection model: hide the per-card CVD coin combobox (selection is global). */
#cvd-coin-combobox { display: none !important; }

/* Global selection: hide ALL per-card coin comboboxes (selection is global). */
#oi-coin-combobox, #fr-coin-combobox, #ls-coin-combobox, #liq-coin-combobox { display: none !important; }

/* Global asset dropdown: search field + category group headers */
.custom-select-search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(22, 18, 38, 0.99);
    padding: 0.4rem 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.custom-select-search-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #f1f5f9;
    outline: none;
}
.custom-select-search-input:focus { border-color: rgba(59, 130, 246, 0.6); }
.custom-select-search-input::placeholder { color: #64748b; font-weight: 500; }
.custom-select-group-header {
    padding: 0.35rem 0.65rem 0.2rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #60a5fa;
    user-select: none;
}
.custom-select-empty {
    padding: 0.55rem 0.65rem;
    font-size: 0.6875rem;
    color: #64748b;
}

/* ═══ Hell-Theme: obere Steuerleiste (Control-Bar) — 24.07. nachgezogen ═══ */
html.theme-light .board-controlbar-shell {
    background: linear-gradient(180deg, rgba(248,250,252,0.96) 0%, rgba(248,250,252,0.86) 100%) !important;
    border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}
html.theme-light .board-ctl-label {
    color: #64748b !important;
}
html.theme-light .board-ctl-divider {
    background: linear-gradient(180deg, transparent, rgba(15,23,42,0.14), transparent) !important;
}
html.theme-light .board-market-scope {
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(15,23,42,0.02) !important;
}
html.theme-light .board-market-scope-pill {
    color: #475569 !important;
}
html.theme-light .board-market-scope-pill:hover {
    color: #0f172a !important;
    background: rgba(15,23,42,0.05) !important;
}
html.theme-light .board-market-scope-pill.active {
    color: #0f766e !important;
    background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(59,130,246,0.14)) !important;
    box-shadow: inset 0 0 0 1px rgba(13,148,136,0.30), 0 4px 12px rgba(14,165,233,0.10) !important;
}
html.theme-light .board-market-scope-pill.active .board-market-scope-pill__icon {
    color: #0d9488 !important;
}
html.theme-light .board-ctl-select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,0.12) !important;
}
html.theme-light .board-ctl-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}
html.theme-light .board-controlbar .custom-select-trigger {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,0.12) !important;
}
html.theme-light .board-controlbar .custom-select-trigger:hover {
    background: #f8fafc !important;
    border-color: rgba(13,148,136,0.40) !important;
}
html.theme-light .board-controlbar .custom-select-trigger.is-open,
html.theme-light .board-controlbar .custom-select-trigger:focus-visible {
    border-color: rgba(13,148,136,0.55) !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.15) !important;
}
html.theme-light .board-segmented {
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(15,23,42,0.02) !important;
}
html.theme-light .board-seg-btn {
    color: #475569 !important;
}
html.theme-light .board-seg-btn:hover {
    color: #0f172a !important;
    background: rgba(15,23,42,0.05) !important;
}
html.theme-light .board-seg-btn.active {
    color: #0f766e !important;
    background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(59,130,246,0.14)) !important;
    box-shadow: inset 0 0 0 1px rgba(13,148,136,0.30) !important;
}
html.theme-light .board-seg-btn:disabled,
html.theme-light .board-seg-btn.is-disabled {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* ==========================================================================
   MOBILE 320 px (28.07.2026)
   Alles in EINER Media-Query. Ab 480 px bleibt das Board unveraendert.

   Kernproblem vorher: die Karte "Top 100 Cashflow" hatte eine Mindestbreite
   von 324 px (die Zeile "Rang + Icon + Name + Badge" steht auf nowrap und
   konnte nicht schrumpfen). Weil .bento-grid eine einzige Spalte ist, hat
   diese eine Karte die GESAMTE Spalte auf 339 px aufgezogen - jede Karte war
   damit 19 px breiter als der Bildschirm und wurde von overflow:hidden
   abgeschnitten. Sichtbar war das an abgeschnittenen Werten ("SHORTS
   LIQUIDIERT", "$19,81 Mio", "44.3%", der 1d-Umschalter ...). Die Daten waren
   nicht nur haesslich, sie waren unerreichbar.
   Fix: min-width:0 auf Raster und Rasterkinder, damit die Spalte nie breiter
   werden kann als der Bildschirm; die Namen kuerzen dann mit "...".

   Zweites Problem: um in diese zu breite Spalte zu passen, waren Werte auf
   0,5-0,55rem (8-8,8 px) heruntergeschraubt. Da die Spalte jetzt passt, ist
   das nicht mehr noetig. Untergrenze hier: 11 px.
   AUSNAHME .top100-asset-badge (10,1 px): der Chip steht in derselben Zeile
   wie der Assetname; auf 11 px wuerde er dem Namen die Breite nehmen. Gross-
   buchstaben in Fett tragen die 10,1 px.
   ========================================================================== */
@media (max-width: 479.98px) {

    /* ── 1. Kein Element darf die Rasterspalte aufziehen ─────────────────── */
    .bento-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .bento-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #top-movers-section > .grid,
    #liq-daily-view > .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .top100-column,
    .movers-scroll,
    .mover-item,
    .liq-feed-scroll {
        min-width: 0 !important;
    }
    .mover-left {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    .mover-right {
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    /* ── 2. Schrift wieder lesbar (Untergrenze 11 px) ────────────────────── */
    .mover-item .symbol {
        font-size: 0.72rem !important;
    }
    .mover-val,
    .mover-item .change {
        font-size: 0.7rem !important;
    }
    .mover-pct {
        font-size: 0.69rem !important;
    }
    .mover-rank {
        width: 1.45rem !important;
        height: 1.1rem !important;
        font-size: 0.7rem !important;
    }
    .top100-asset-badge {
        font-size: 0.63rem !important;   /* bewusste Ausnahme, s. Kopf */
        height: 1.05rem !important;
        padding: 0 0.3rem !important;
    }
    .top100-col-header {
        font-size: 0.7rem !important;
    }
    .top100-vol-label {
        font-size: 0.69rem !important;
    }
    .top100-vol-value {
        font-size: 0.75rem !important;
    }
    .liq-summary-label {
        font-size: 0.7rem !important;
    }
    .liq-stats-badge {
        font-size: 0.7rem !important;
        padding: 0.12rem 0.4rem !important;
    }
    #board_main_page .liq-timeframe-btn,
    #board_main_page .altcoin-range-controls button,
    #board_main_page .board-seg-btn {
        font-size: 0.72rem !important;
    }
    .fng-hist-label,
    .aci-hist-label,
    .fng-hist-delta,
    .aci-hist-delta,
    .flow-row-name,
    .flow-net-label,
    .dom-legend-name {
        font-size: 0.7rem !important;
    }
    .board-market-scope-pill__label,
    .custom-select-label,
    .coin-combobox-trigger-label {
        font-size: 0.72rem !important;
    }
    /* Tailwind-Direktwerte: "24h High/Low", "1.911 ev", "65.2% L" standen auf
       8-10 px, weil Board-Regeln den 10px-Wert noch einmal verkleinert haben. */
    #board_main_page .text-\[10px\] {
        font-size: 0.7rem !important;
    }
    /* Countdown-Anzeige ("29s") in den Kartenkoepfen */
    #board_main_page .text-xs.text-center.flex-1 {
        font-size: 0.7rem !important;
    }
    /* Info-Popups (ℹ️) */
    .ctt-label,
    .ctt-desc,
    .ctt-meta-label,
    .ctt-meta-val,
    .ctt-weight {
        font-size: 0.72rem !important;
    }

    /* ── 3. Trefferflaechen ──────────────────────────────────────────────────
       Apple/Google empfehlen 44 px; die Kartenkopfleisten wuerden damit zu hoch.
       32 px ist der Kompromiss, unter dem Fehlgriffe messbar zunehmen. */
    .board-seg-btn,
    .dom-mode-pill,
    .liq-timeframe-btn,
    .altcoin-range-controls button,
    .custom-select-trigger,
    .coin-combobox-trigger,
    .board-market-scope-pill {
        min-height: 32px !important;
    }
    .top100-mode-pill,
    .market-view-toggle-btn,
    .metric-view-toggle-btn,
    .metric-reset-view-btn,
    .chart-fullscreen-btn {
        min-width: 32px !important;
        min-height: 32px !important;
    }
    .board-market-scope-pill {
        height: auto !important;
        padding: 0 0.7rem !important;
    }

    /* ── 4. Kartenkopf darf umbrechen statt ueberzustehen ────────────────── */
    .metric-section-header {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
    .metric-section-header > h2 {
        min-width: 0 !important;
    }

    /* ── 5. Kalender: Schrift war auf 0,55rem (8,8 px) heruntergedreht ──────
       Die Regel hiess "Shrink all calendar text on mobile" und stammt aus der
       Zeit, als die Karte zu breit war. Der Platz ist da - die Terminkarten
       haben bei 320 px reichlich Luft -, also zurueck auf lesbare Werte.
       Betrifft u.a. 231x "Vorher"/"Prognose"-Label und alle Zahlenwerte. */
    .bento-calendar .text-xs {
        font-size: 0.7rem !important;
    }
    .bento-calendar .text-sm {
        font-size: 0.8rem !important;
    }
    .bento-calendar .text-base {
        font-size: 0.875rem !important;
    }
    .bento-calendar .text-lg {
        font-size: 1rem !important;
    }
    .bento-calendar h3 {
        font-size: 0.875rem !important;
    }
    .bento-calendar .text-\[10px\] {
        font-size: 0.7rem !important;
    }
    .calendar-header-controls .text-\[10px\] {
        font-size: 0.7rem !important;
    }
    .cal-filter-seg-label,
    .cal-chip,
    .calendar-type-filter,
    .calendar-impact-filter {
        font-size: 0.72rem !important;
    }
    .calendar-time-filters button {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    .calendar-filter-toggle {
        font-size: 0.78rem !important;
    }

    /* Trefferflaechen im Kalender: die Zeitfilter waren 17 px hoch. */
    .calendar-time-filters button,
    .cal-chip,
    .calendar-type-filter,
    .calendar-impact-filter,
    .calendar-country-filter,
    .calendar-filter-toggle {
        min-height: 32px !important;
    }
    .calendar-country-filter.cal-flag {
        min-width: 32px !important;
    }

    /* ID-Regel mit !important, deshalb hier ebenfalls per ID ueberschrieben */
    html.calendar-page #calendar-timezone-badge {
        font-size: 0.72rem !important;
    }
}