:root {
    /* speeds */
    --marquee-speed-ticker: 300s;
    --marquee-speed-news: 300s;

    /* theme */
    --bg: #0e0f13;
    --panel: #14161c;
    --text: #e6e6e9;
    --muted: #9aa0a6;
    --border: #2a2d36;
    --up: #2ecc71;
    --down: #e74c3c;
    --accent: #1e2430;

    /* app + drawer */
    --app-bg: #0f1218;
    --drawer-bg: #0f1218;

    /* KPI corner flags */
    --kpi-corner-size: 22px;
    --kpi-up: #2ecc71;
    --kpi-down: #e74c3c;
    --kpi-flat: #8a8f98;
}

/* Body background controlled by --app-bg (matches Settings color picker) */
body.bg-app {
    background: var(--app-bg) !important;
    color: var(--text)
}

/* Belt-and-braces default */
html, body {
    background: var(--app-bg) !important
}

.app-root, .main-wrap {
    background: var(--app-bg) !important
}

body.bg-dark {
    background: var(--app-bg) !important
}

/* Panels / cards */
.panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px
}

header.hdr .title {
    font-weight: 700
}

/* Chips / buttons */
.logo-chip {
    display: flex;
    align-items: center;
    gap: 8px
}

.logo-chip img {
    height: 26px;
    width: 26px;
    border-radius: 50%
}

/* “Ghost” button style (single source of truth) */
.btn-ghost {
    background: transparent;
    color: #cfd3da;
    border: 1px solid #2a2d36
}

.btn-ghost:hover {
    background: #1f232d
}

.btn-ghost.active {
    background: #2a2f3b;
    border-color: #3b4252;
    color: #fff
}

/* Marquee */
.marquee {
    white-space: nowrap;
    overflow: hidden
}

.marquee > div {
    display: inline-block;
    animation: scroll var(--marquee-speed-news, 60s) linear infinite;
    will-change: transform
}

#cc-ticker.marquee > div {
    animation-duration: var(--marquee-speed-ticker)
}

.marquee:hover > div {
    animation-play-state: paused
}

@media (prefers-reduced-motion: reduce) {
    .marquee > div {
        animation: none
    }
}

@keyframes scroll {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

/* Ticker row */
.ticker .item {
    display: inline-flex;
    gap: 8px;
    padding: 0 16px;
    border-right: 1px solid var(--border);
    text-decoration: none;
    color: var(--text)
}

.ticker .chg.up {
    color: var(--up)
}

.ticker .chg.down {
    color: var(--down)
}

/* KPI layout */
.kpi-deck {
    display: flex;
    gap: 12px;
    align-items: stretch
}

.brand-col {
    width: 180px;
    flex: 0 0 180px
}

.brand-card {
    background: #0f1117;
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center
}

.brand-card img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    margin-bottom: 8px
}

.brand-name {
    font-weight: 700
}

.brand-clock {
    color: var(--muted);
    font-size: .85rem
}

.kpi-viewport {
    flex: 1;
    position: relative;
    min-height: 200px
}

.kpi-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12px
}

.kpi-card {
    position: relative;
    background: #181b23;
    border: 1px solid #232733;
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
}

.kpi-label {
    color: var(--muted);
    font-size: .8rem
}

.kpi-value {
    font-weight: 700;
    font-size: 1.05rem
}

.kpi-spark {
    position: relative;
    z-index: 1;
    height: 38px;
    margin-top: .25rem
}

.kpi-card .kpi-label, .kpi-card .kpi-delta, .kpi-card .kpi-value {
    position: relative;
    z-index: 2
}

/* disable hover capture from Apex inside KPI */
.kpi-card .apexcharts-canvas {
    pointer-events: none
}

/* KPI corner flag (up/down/flat) */
.kpi-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: var(--kpi-corner-size) solid transparent;
    border-top: var(--kpi-corner-size) solid var(--kpi-flat);
    opacity: .95;
    pointer-events: none
}

.kpi-corner.up {
    border-top-color: var(--kpi-up)
}

.kpi-corner.down {
    border-top-color: var(--kpi-down)
}

.kpi-corner.flat {
    opacity: .35
}

/* Fade helpers for KPI group swap */
.fade-wrap {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease
}

.fade-enter {
    opacity: 0;
    transform: translateY(4px)
}

.fade-enter-active {
    opacity: 1;
    transform: translateY(0)
}

.fade-exit {
    opacity: 1;
    transform: translateY(0)
}

.fade-exit-active {
    opacity: 0;
    transform: translateY(-4px)
}

/* News marquee styles */
#cc-news.marquee > div {
    animation-duration: var(--marquee-speed-news, 85s)
}

#cc-news .news-item {
    color: #e0e3ea;
    text-decoration: none;
    white-space: nowrap
}

#cc-news .news-item:hover {
    text-decoration: underline
}

#cc-news .badge {
    font-size: .72rem;
    background: #2a2f3b;
    border: 1px solid #3b4252
}

#cc-news .badge.bg-danger {
    background: #7a141c;
    border: 1px solid #b32833
}

#cc-news .news-item .text-danger {
    color: #e74c3c !important
}

/* Price ticker links */
#cc-ticker .item {
    text-decoration: none;
    color: #e0e3ea;
    white-space: nowrap
}

#cc-ticker .item:hover {
    text-decoration: underline
}

/* Video panel sizing */
#video-panel {
    display: flex;
    flex-direction: column
}

.video-wrap {
    position: relative;
    width: 100%
}

#yt-player {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 260px;
    display: block
}

@media (min-height: 700px) {
    #yt-player {
        aspect-ratio: auto;
        height: 100%;
        min-height: 360px
    }
}

.video-next {
    position: inherit;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, .45);
    color: #b7c1d1;
    font-size: 12px;
    line-height: 1.25;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    cursor: pointer
}

.video-next:hover {
    background: rgba(0, 0, 0, .55)
}

/* ensure “Up next …” caption clickable */
#yt-next {
    pointer-events: auto;
    cursor: pointer;
    z-index: 10
}

/* Drawer layout */
.drawer {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px
}

.drawer-footer {
    flex: 0 0 auto;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: var(--drawer-bg, #0f1218)
}

.drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #cfd6e4
}

.drawer-brand:hover {
    color: #fff
}

.drawer-brand-img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain
}

.drawer-brand-text {
    font-weight: 600;
    letter-spacing: .2px;
    font-size: 14px
}

.drawer-brand-img.is-dark {
    filter: invert(1) brightness(1.2)
}

/* News highlights */
.news-alert {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, .25)
}

mark.news-mark {
    background: rgba(255, 70, 150, .28);
    color: inherit;
    padding: 0 .08em;
    border-radius: 2px
}

/* KPI + Heatmap container */
.kpi-heatmap {
    border: none;
    border-radius: 12px;
    padding: 12px;
    min-height: 260px;
    display: flex;
    flex-direction: column
}

#heatmap-viewport {
    display: flex;
    align-items: center;
    justify-content: center
}

/* nudge Apex canvas (heatmap) so it fills panel nicely */
.apexcharts-canvas {
    margin-top: -20px;
    margin-left: 15px
}

/* Modal + “metrics” blocks */
.bg-modal {
    background: #11141b;
    border: 1px solid #232733;
    border-radius: 14px
}

.metric {
    background: #121621;
    border: 1px solid #232733;
    border-radius: 12px;
    padding: .75rem .9rem;
    height: 100%
}

.metric .label {
    color: #8b91a1;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .25rem
}

.metric .value {
    font-weight: 600;
    font-size: 1.1rem
}

#dd-chg.text-success {
    color: #2ecc71 !important
}

#dd-chg.text-danger {
    color: #e74c3c !important
}

/* Chart min height */
.chart {
    min-height: 420px
}

#alerts-section .al-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border: 1px solid var(--border, #1a1f29);
    border-radius: 8px;
    background: #0f1218;
    margin-bottom: 6px;
}

#alerts-section .al-row .al-meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

#alerts-section .al-row .al-note {
    color: #9aa4b2;
}

#alerts-section .al-row .al-actions {
    display: flex;
    gap: 6px;
}

#alerts-section .al-row .badge {
    background: #17202b;
    border: 1px solid #1a1f29;
}

.donate-box {
    background: #0f1218;
    border: 1px solid #1a1f29;
    border-radius: 12px;
    padding: 12px;
}

.donate-box .qr {
    background: #fff;
}

.break-anywhere {
    word-break: break-all;
}