:root {
    /*    --hd-bg: #f5f7fb;
    --hd-panel: #ffffff;
    --hd-panel-border: #e2e8f0;
    --hd-panel-highlight: #f0f4fb;
    --hd-text: #1f2937;
    --hd-muted: #6b7280;
    --hd-accent: #2563eb;
    --hd-positive: #0f9d58;
    --hd-negative: #d93025;*/
    --hd-bg: #1b1b1b;
    --hd-panel: #262626;
    --hd-panel-border: #3a3a3a;
    --hd-panel-highlight: #2f2f2f;
    --hd-text: #ffffff;
    --hd-muted: #d1d1d1;
    --hd-accent: #4cc9f0;
    --hd-positive: #19e07a;
    --hd-negative: #ff6b6b;
    --bs-body-bg: #262626;
    --bs-heading-color: rgba(255, 255, 255, 0.015);
    --bs-card-title-color: #fff;
    --bs-table-striped-color: #fff;
    --bs-table-color: #fff;
}

.nav {
    --bs-nav-link-color: var(--hd-muted) !important;
    --bs-nav-link-hover-color: var(--hd-muted) !important;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--hd-muted);
}

.table > :not(caption) > * > * {
color: var(--hd-muted)!important;
}


link.active {
    color: var(--bs-nav-tabs-link-active-color)!important;
    background-color: var(--bs-nav-tabs-link-active-bg)!important;
    border-color: var(--bs-nav-tabs-link-active-border-color)!important;
}

link {
    color: var(--hd-muted)!important;
    background-color: var(--hd-accent)!important;
    border-color: var(--bs-nav-tabs-link-active-border-color)!important;
}

    body[data-theme="dark"] {
        --hd-bg: #1b1b1b;
        --hd-panel: #262626;
        --hd-panel-border: #3a3a3a;
        --hd-panel-highlight: #2f2f2f;
        --hd-text: #ffffff;
        --hd-muted: #d1d1d1;
        --hd-accent: #4cc9f0;
        --hd-positive: #19e07a;
        --hd-negative: #ff6b6b;
    }

    html {
        font-size: 14px;
        background-color: var(--hd-bg);
    }

    @media (min-width: 768px) {
        html {
            font-size: 15px;
        }
    }

    body.app-shell {
        min-height: 100vh;
        background-color: var(--hd-bg);
        color: var(--hd-text);
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        letter-spacing: 0.01em;
    }

        body.app-shell .content-wrapper,
        body.app-shell .main-footer {
            background: transparent;
        }

    .tracking-wide {
        letter-spacing: 0.08em;
    }

    .main-header {
        background-color: var(--hd-panel) !important;
        border-bottom: 1px solid var(--hd-panel-border);
    }

        .main-header .navbar-brand {
            font-weight: 600;
            letter-spacing: 0.08em;
        }

    .main-footer {
        border-top: 1px solid var(--hd-panel-border);
    }

    .dashboard-header .page-title {
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .h1, .h2, .h3, .h4, .h5 {
        color: var(--bs-card-color);
    }

    .eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        color: var(--hd-muted);
    }

    .badge.timestamp {
        background: var(--hd-panel);
        border: 1px solid var(--hd-panel-border);
        color: var(--hd-muted);
        border-radius: 999px;
        padding: 0.4rem 0.95rem;
        font-weight: 500;
    }

    .summary-grid .info-box {
        min-height: 0;
    }

    .metric-box {
        background: var(--hd-panel);
        border: 1px solid var(--hd-panel-border);
        border-radius: 1rem;
        padding: 0.4rem;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
    }

        .metric-box .info-box-icon {
            width: 56px;
            height: 56px;
            border-radius: 0.85rem;
            margin: 0.15rem 1rem 0.15rem 0.35rem;
            background: var(--hd-panel-highlight);
            color: #fff;
            font-size: 1.3rem;
        }

        .metric-box .info-box-text {
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--hd-muted);
            margin-bottom: 0.35rem;
        }

    .metric-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .metric-label {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--hd-muted);
        font-weight: 600;
    }

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

    .summary-grid .metric-value {
        font-size: 0.95rem;
    }

    .metric-summary {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-top: 1px solid var(--hd-panel-border);
        margin-top: 0.5rem;
        padding-top: 0.4rem;
    }

    .import {
        color: var(--hd-accent);
    }

    .export {
        color: var(--hd-positive);
    }

    .chart-card {
        background: var(--hd-panel);
        border-radius: 1rem;
        border: 1px solid var(--hd-panel-border);
    }

        .chart-card .card-header {
            border-color: var(--hd-panel-border) !important;
            padding: 1rem 1.25rem 0.25rem;
        }

        .chart-card .card-title {
            font-size: 1rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--hd-muted);
        }

        .chart-card .card-body {
            padding: 0 1.25rem 1.5rem;
        }

    .chart-wrapper {
        position: relative;
        height: 360px;
    }

    @media (max-width: 1600px) {
        .chart-wrapper {
            height: 320px;
        }
    }

    @media (max-width: 1200px) {
        .chart-wrapper {
            height: 300px;
        }
    }

    @media (max-width: 768px) {
        .chart-wrapper {
            height: 250px;
        }
    }

    .chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
    }

    .compact-table {
        border-top: 1px solid var(--hd-panel-border);
        padding-top: 0.75rem;
    }

    .table {
        color: var(--hd-text);
    }

        .table thead th {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--hd-muted);
            border-color: var(--hd-panel-border);
        }

        .table tbody td,
        .table tfoot td {
            font-size: 0.78rem;
            border-color: var(--hd-panel-border);
        }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--hd-panel-highlight);
    }

    .badge {
        font-weight: 500;
    }

    .form-floating > .form-control-plaintext::placeholder,
    .form-floating > .form-control::placeholder {
        color: var(--hd-muted);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder,
    .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }

    .summary-matrix .card-header {
        padding: 1rem 1.5rem 0.35rem;
    }

    .summary-matrix .card-title {
        font-size: 0.85rem;
        letter-spacing: 0.16em;
        color: var(--hd-muted);
    }

    .card-title {
        color: var(--hd-muted);
    }


    .card {
        color: #FFFFFF !important;
    }

    .text-muted {
        color: var(--hd-muted) !important;
    }

    comparison-card .card-title {
        font-size: 0.85rem;
        letter-spacing: 0.16em;
        color: var(--hd-muted);
    }

    .summary-matrix .icon-circle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--hd-panel-highlight);
        color: var(--hd-accent);
        font-size: 1rem;
    }

    .matrix-table th {
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-size: 0.72rem;
        color: var(--hd-muted);
        border-color: var(--hd-panel-border);
    }

    .matrix-table td {
        border-color: var(--hd-panel-border);
        font-size: 0.85rem;
    }

    .matrix-table .matrix-label {
        font-weight: 600;
        color: var(--hd-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .price-highlight .card-header {
        padding: 1rem 1.5rem 0.35rem;
    }

    .price-metrics .metric-label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--hd-muted);
        margin-bottom: 0.35rem;
    }

    .price-value {
        font-size: 1.35rem;
        font-weight: 600;
    }

    #todayMetrics {
        background: linear-gradient(135deg, rgba(102, 132, 170, 0.25), rgba(58, 76, 99, 0.35));
        border: 1px solid rgba(142, 174, 212, 0.4);
    }