Dashboard Charts

<div class="uk-chart-card">
    <div class="uk-chart-card-header">
        <div>
            <div class="uk-chart-card-title">Revenue overview</div>
            <div class="uk-chart-card-subtitle">Last 30 days · USD</div>
        </div>
        <div class="uk-chart-card-tabs">
            <button type="button" class="uk-chart-tab">7d</button>
            <button type="button" class="uk-chart-tab uk-chart-tab-active">30d</button>
            <button type="button" class="uk-chart-tab">90d</button>
        </div>
    </div>
    <div class="uk-chart-card-metric">
        <span class="uk-chart-metric-value">$48,295</span>
        <span class="uk-chart-metric-trend uk-chart-metric-trend-up">
            <i class="fas fa-arrow-trend-up"></i> +18.2%
        </span>
        <span class="uk-chart-metric-label">vs. previous period</span>
    </div>
    <div class="uk-chart-line">
        <svg viewBox="0 0 600 200" preserveAspectRatio="none">
            <defs>
                <linearGradient id="ukLineGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#1e3a8a" stop-opacity="0.28"/>
                    <stop offset="100%" stop-color="#1e3a8a" stop-opacity="0"/>
                </linearGradient>
            </defs>
            <line x1="0" y1="50" x2="600" y2="50" stroke="#f1f5f9" />
            <line x1="0" y1="100" x2="600" y2="100" stroke="#f1f5f9" />
            <line x1="0" y1="150" x2="600" y2="150" stroke="#f1f5f9" />
            <path d="M0,150 ... L600,55 L600,200 L0,200 Z" fill="url(#ukLineGradient)"/>
            <path d="M0,150 ... L600,55" fill="none" stroke="#1e3a8a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="550" cy="40" r="5" fill="#fff" stroke="#1e3a8a" stroke-width="2.5"/>
        </svg>
    </div>
    <div class="uk-chart-card-legend">
        <span class="uk-chart-legend-item">
            <span class="uk-chart-legend-dot uk-chart-legend-dot-blue"></span> Revenue
        </span>
        <span class="uk-chart-legend-item">
            <span class="uk-chart-legend-dot uk-chart-legend-dot-purple"></span> Target
        </span>
    </div>
</div>

<style>
    .uk-chart-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-chart-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    .uk-chart-card-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-chart-card-subtitle {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 0.15rem;
    }
    .uk-chart-card-tabs {
        display: flex;
        gap: 2px;
        background: #f1f5f9;
        border-radius: 0.5rem;
        padding: 3px;
    }
    .uk-chart-tab {
        background: transparent;
        border: none;
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748b;
        padding: 0.35rem 0.65rem;
        border-radius: 0.35rem;
        cursor: pointer;
        transition: all 0.15s;
        font-family: inherit;
    }
    .uk-chart-tab-active {
        background: #fff;
        color: #0b1b2f;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .uk-chart-card-metric {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }
    .uk-chart-metric-value {
        font-size: 1.75rem;
        font-weight: 900;
        color: #0b1b2f;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .uk-chart-metric-trend {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
    }
    .uk-chart-metric-trend-up { background: #ecfdf5; color: #16a34a; }
    .uk-chart-metric-trend-up i { font-size: 0.65rem; }
    .uk-chart-metric-label {
        font-size: 0.7rem;
        color: #94a3b8;
    }
    .uk-chart-line {
        height: 200px;
        margin: 0 -0.5rem;
    }
    .uk-chart-line svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .uk-chart-card-legend {
        display: flex;
        gap: 1.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #f1f5f9;
    }
    .uk-chart-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
    }
    .uk-chart-legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .uk-chart-legend-dot-blue { background: #1e3a8a; }
    .uk-chart-legend-dot-purple { background: #6d28d9; }
</style>

<div class="uk-chart-card">
    <div class="uk-chart-card-header">
        <div>
            <div class="uk-chart-card-title">Weekly activity</div>
            <div class="uk-chart-card-subtitle">Sessions by day</div>
        </div>
        <div class="uk-chart-metric-trend uk-chart-metric-trend-up">
            <i class="fas fa-arrow-trend-up"></i> +24%
        </div>
    </div>
    <div class="uk-chart-bars">
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 55%">
                <span class="uk-chart-bar-value">8.2k</span>
            </div>
            <span class="uk-chart-bar-label">Mon</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 72%">
                <span class="uk-chart-bar-value">10.8k</span>
            </div>
            <span class="uk-chart-bar-label">Tue</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 48%">
                <span class="uk-chart-bar-value">7.2k</span>
            </div>
            <span class="uk-chart-bar-label">Wed</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar uk-chart-bar-active" style="height: 92%">
                <span class="uk-chart-bar-value">13.8k</span>
            </div>
            <span class="uk-chart-bar-label uk-chart-bar-label-active">Thu</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 68%">
                <span class="uk-chart-bar-value">10.2k</span>
            </div>
            <span class="uk-chart-bar-label">Fri</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 34%">
                <span class="uk-chart-bar-value">5.1k</span>
            </div>
            <span class="uk-chart-bar-label">Sat</span>
        </div>
        <div class="uk-chart-bar-wrap">
            <div class="uk-chart-bar" style="height: 28%">
                <span class="uk-chart-bar-value">4.2k</span>
            </div>
            <span class="uk-chart-bar-label">Sun</span>
        </div>
    </div>
</div>

<style>
    .uk-chart-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-chart-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .uk-chart-card-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-chart-card-subtitle {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 0.15rem;
    }
    .uk-chart-metric-trend {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
    }
    .uk-chart-metric-trend-up { background: #ecfdf5; color: #16a34a; }
    .uk-chart-metric-trend-up i { font-size: 0.65rem; }
    .uk-chart-bars {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: end;
        gap: 0.5rem;
        height: 220px;
        padding: 0 0.25rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-chart-bar-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    .uk-chart-bar {
        width: 100%;
        max-width: 44px;
        background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%);
        border-radius: 0.4rem 0.4rem 0 0;
        position: relative;
        transition: all 0.2s;
        cursor: pointer;
    }
    .uk-chart-bar:hover {
        filter: brightness(1.08);
        transform: scaleY(1.02);
        transform-origin: bottom;
    }
    .uk-chart-bar-active {
        background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
        box-shadow: 0 6px 16px rgba(30,58,138,0.35);
    }
    .uk-chart-bar-value {
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.65rem;
        font-weight: 800;
        color: #0b1b2f;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.15s;
    }
    .uk-chart-bar-wrap:hover .uk-chart-bar-value,
    .uk-chart-bar-active .uk-chart-bar-value {
        opacity: 1;
    }
    .uk-chart-bar-label {
        font-size: 0.72rem;
        font-weight: 600;
        color: #94a3b8;
        margin-top: 0.5rem;
    }
    .uk-chart-bar-label-active {
        color: #0b1b2f;
        font-weight: 800;
    }
    @media (max-width: 480px) {
        .uk-chart-bars { gap: 0.25rem; height: 180px; }
        .uk-chart-bar-value { display: none; }
    }
</style>

<div class="uk-chart-card">
    <div class="uk-chart-card-header">
        <div>
            <div class="uk-chart-card-title">Traffic sources</div>
            <div class="uk-chart-card-subtitle">Last 30 days</div>
        </div>
    </div>
    <div class="uk-chart-donut-wrap">
        <div class="uk-chart-donut">
            <svg viewBox="0 0 120 120">
                <circle cx="60" cy="60" r="46" fill="none" stroke="#f1f5f9" stroke-width="16"/>
                <circle cx="60" cy="60" r="46" fill="none" stroke="#1e3a8a" stroke-width="16"
                    stroke-dasharray="144.5 288.9" stroke-dashoffset="0"
                    transform="rotate(-90 60 60)" stroke-linecap="round"/>
                <circle cx="60" cy="60" r="46" fill="none" stroke="#6d28d9" stroke-width="16"
                    stroke-dasharray="86.7 288.9" stroke-dashoffset="-144.5"
                    transform="rotate(-90 60 60)" stroke-linecap="round"/>
                <circle cx="60" cy="60" r="46" fill="none" stroke="#16a34a" stroke-width="16"
                    stroke-dasharray="57.8 288.9" stroke-dashoffset="-231.2"
                    transform="rotate(-90 60 60)" stroke-linecap="round"/>
            </svg>
            <div class="uk-chart-donut-center">
                <span class="uk-chart-donut-value">24.8k</span>
                <span class="uk-chart-donut-label">Visitors</span>
            </div>
        </div>
        <div class="uk-chart-donut-legend">
            <div class="uk-chart-legend-row">
                <span class="uk-chart-legend-dot uk-chart-legend-dot-blue"></span>
                <span class="uk-chart-legend-name">Organic search</span>
                <span class="uk-chart-legend-val">50%</span>
            </div>
            <div class="uk-chart-legend-row">
                <span class="uk-chart-legend-dot uk-chart-legend-dot-purple"></span>
                <span class="uk-chart-legend-name">Direct</span>
                <span class="uk-chart-legend-val">30%</span>
            </div>
            <div class="uk-chart-legend-row">
                <span class="uk-chart-legend-dot uk-chart-legend-dot-green"></span>
                <span class="uk-chart-legend-name">Social</span>
                <span class="uk-chart-legend-val">20%</span>
            </div>
        </div>
    </div>
</div>

<style>
    .uk-chart-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-chart-card-header {
        margin-bottom: 1.5rem;
    }
    .uk-chart-card-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-chart-card-subtitle {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 0.15rem;
    }
    .uk-chart-donut-wrap {
        display: flex;
        align-items: center;
        gap: 2.5rem;
        flex-wrap: wrap;
    }
    .uk-chart-donut {
        position: relative;
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }
    .uk-chart-donut svg {
        width: 100%;
        height: 100%;
    }
    .uk-chart-donut-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .uk-chart-donut-value {
        font-size: 1.75rem;
        font-weight: 900;
        color: #0b1b2f;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .uk-chart-donut-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-top: 0.3rem;
    }
    .uk-chart-donut-legend {
        flex: 1;
        min-width: 200px;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }
    .uk-chart-legend-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.85rem;
    }
    .uk-chart-legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        flex-shrink: 0;
    }
    .uk-chart-legend-dot-blue { background: #1e3a8a; }
    .uk-chart-legend-dot-purple { background: #6d28d9; }
    .uk-chart-legend-dot-green { background: #16a34a; }
    .uk-chart-legend-name {
        flex: 1;
        color: #475569;
        font-weight: 600;
    }
    .uk-chart-legend-val {
        font-weight: 800;
        color: #0b1b2f;
    }
    @media (max-width: 480px) {
        .uk-chart-donut-wrap { justify-content: center; gap: 1.5rem; }
        .uk-chart-donut { width: 160px; height: 160px; }
    }
</style>

<div class="uk-kpi-grid">
    <div class="uk-kpi-card">
        <div class="uk-kpi-header">
            <span class="uk-kpi-label">Total revenue</span>
            <div class="uk-kpi-icon uk-kpi-icon-blue"><i class="fas fa-dollar-sign"></i></div>
        </div>
        <div class="uk-kpi-value">$48,295</div>
        <div class="uk-kpi-trend uk-kpi-trend-up">
            <i class="fas fa-arrow-up"></i> <strong>18.2%</strong> <span>vs last month</span>
        </div>
        <div class="uk-kpi-spark">
            <svg viewBox="0 0 100 24" preserveAspectRatio="none">
                <path d="M0,18 ... L100,7" fill="none" stroke="#1e3a8a" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </div>
    </div>
    <!-- Repeat for the other 3 cards -->
</div>

<style>
    .uk-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .uk-kpi-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.9rem;
        padding: 1.25rem;
        text-align: left;
        transition: all 0.2s;
    }
    .uk-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30,58,138,0.08);
        border-color: #cbd5e1;
    }
    .uk-kpi-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    .uk-kpi-label {
        font-size: 0.72rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .uk-kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
    }
    .uk-kpi-icon-blue { background: #eff6ff; color: #1e3a8a; }
    .uk-kpi-icon-purple { background: #f5f3ff; color: #6d28d9; }
    .uk-kpi-icon-green { background: #ecfdf5; color: #16a34a; }
    .uk-kpi-icon-amber { background: #fffbeb; color: #d97706; }
    .uk-kpi-value {
        font-size: 1.5rem;
        font-weight: 900;
        color: #0b1b2f;
        line-height: 1;
        letter-spacing: -0.02em;
        margin-bottom: 0.5rem;
    }
    .uk-kpi-trend {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.7rem;
        margin-bottom: 1rem;
    }
    .uk-kpi-trend i { font-size: 0.6rem; }
    .uk-kpi-trend strong { font-weight: 800; }
    .uk-kpi-trend span { color: #94a3b8; font-weight: 500; }
    .uk-kpi-trend-up { color: #16a34a; }
    .uk-kpi-trend-down { color: #dc2626; }
    .uk-kpi-spark {
        height: 32px;
    }
    .uk-kpi-spark svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    @media (max-width: 900px) {
        .uk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
        .uk-kpi-grid { grid-template-columns: 1fr; }
    }
</style>

<div class="uk-dash-grid">
    <div class="uk-chart-card">
        <div class="uk-chart-card-header">
            <div>
                <div class="uk-chart-card-title">Overview</div>
                <div class="uk-chart-card-subtitle">Last 12 weeks</div>
            </div>
            <div class="uk-chart-card-tabs">
                <button type="button" class="uk-chart-tab uk-chart-tab-active">Revenue</button>
                <button type="button" class="uk-chart-tab">Users</button>
            </div>
        </div>
        <div class="uk-chart-card-metric">
            <span class="uk-chart-metric-value">$182,940</span>
            <span class="uk-chart-metric-trend uk-chart-metric-trend-up">
                <i class="fas fa-arrow-trend-up"></i> +24.1%
            </span>
        </div>
        <div class="uk-chart-area-chart">
            <svg viewBox="0 0 600 220" preserveAspectRatio="none">
                <defs><linearGradient id="ukAreaGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#1e3a8a" stop-opacity="0.3"/>
                    <stop offset="100%" stop-color="#1e3a8a" stop-opacity="0"/>
                </linearGradient></defs>
                <line x1="0" y1="60" x2="600" y2="60" stroke="#f1f5f9"/>
                <line x1="0" y1="120" x2="600" y2="120" stroke="#f1f5f9"/>
                <line x1="0" y1="180" x2="600" y2="180" stroke="#f1f5f9"/>
                <path d="M0,160 ... L600,55 L600,220 L0,220 Z" fill="url(#ukAreaGradient)"/>
                <path d="M0,160 ... L600,55" fill="none" stroke="#1e3a8a" stroke-width="2.5" stroke-linecap="round"/>
            </svg>
        </div>
        <div class="uk-chart-axis">
            <span>W1</span><span>W4</span><span>W7</span><span>W10</span><span>W12</span>
        </div>
    </div>

    <div class="uk-chart-card">
        <div class="uk-chart-card-header">
            <div>
                <div class="uk-chart-card-title">Top products</div>
                <div class="uk-chart-card-subtitle">This month</div>
            </div>
        </div>
        <div class="uk-top-list">
            <div class="uk-top-item">
                <div class="uk-top-rank uk-top-rank-1">1</div>
                <div class="uk-top-body">
                    <div class="uk-top-name">Pro subscription</div>
                    <div class="uk-top-bar-wrap"><div class="uk-top-bar" style="width: 92%"></div></div>
                </div>
                <div class="uk-top-value">$42.8k</div>
            </div>
            <!-- ... more items -->
        </div>
    </div>
</div>

<style>
    .uk-dash-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 1.25rem;
    }
    .uk-chart-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        text-align: left;
    }
    .uk-chart-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    .uk-chart-card-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-chart-card-subtitle {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 0.15rem;
    }
    .uk-chart-card-tabs {
        display: flex;
        gap: 2px;
        background: #f1f5f9;
        border-radius: 0.5rem;
        padding: 3px;
    }
    .uk-chart-tab {
        background: transparent;
        border: none;
        font-size: 0.7rem;
        font-weight: 700;
        color: #64748b;
        padding: 0.3rem 0.6rem;
        border-radius: 0.35rem;
        cursor: pointer;
        font-family: inherit;
    }
    .uk-chart-tab-active {
        background: #fff;
        color: #0b1b2f;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .uk-chart-card-metric {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }
    .uk-chart-metric-value {
        font-size: 1.75rem;
        font-weight: 900;
        color: #0b1b2f;
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .uk-chart-metric-trend {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
    }
    .uk-chart-metric-trend-up { background: #ecfdf5; color: #16a34a; }
    .uk-chart-area-chart { height: 220px; margin: 0 -0.5rem; }
    .uk-chart-area-chart svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .uk-chart-axis {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 600;
        margin-top: 0.5rem;
        padding: 0 0.5rem;
    }
    .uk-top-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .uk-top-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .uk-top-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .uk-top-rank-1 { background: #fef3c7; color: #b45309; }
    .uk-top-rank-2 { background: #e2e8f0; color: #475569; }
    .uk-top-rank-3 { background: #fde8d7; color: #c2410c; }
    .uk-top-body { flex: 1; min-width: 0; }
    .uk-top-name {
        font-size: 0.8rem;
        font-weight: 700;
        color: #0b1b2f;
        margin-bottom: 0.4rem;
    }
    .uk-top-bar-wrap {
        background: #f1f5f9;
        border-radius: 999px;
        height: 6px;
        overflow: hidden;
    }
    .uk-top-bar {
        height: 100%;
        background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
        border-radius: 999px;
        transition: width 0.6s ease;
    }
    .uk-top-value {
        font-size: 0.8rem;
        font-weight: 800;
        color: #0b1b2f;
        min-width: 56px;
        text-align: right;
    }
    @media (max-width: 860px) {
        .uk-dash-grid { grid-template-columns: 1fr; }
    }
</style>