body.spoc {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --ink: #14233b;
    --muted: #5d6d86;
    --line: #e4ebf5;
    --accent: #1d4ed8;
    --glow: #dbe7ff;
    background: #f3f6fb;
    color: var(--ink);
}
body.spoc .dash-main { width: min(1080px, calc(100% - 32px)); }
body.spoc .dash-top {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(243, 246, 251, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
}
body.spoc .brand strong { letter-spacing: -0.02em; }
body.spoc .theme-btn {
    border: 1px solid #c9d6ee;
    background: #fff;
    color: #14233b;
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
body.spoc .theme-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
body.spoc .lang { display: inline-flex; border: 1px solid #c9d6ee; border-radius: 999px; overflow: hidden; background: #fff; }
body.spoc .lang a { text-decoration: none; padding: 6px 10px; font-size: 0.78rem; font-weight: 800; color: #5d6d86; }
body.spoc .lang a.on { background: #1d4ed8; color: #fff; }
html[dir="rtl"] body.spoc { font-family: 'Noto Sans Arabic', 'Inter', sans-serif; }

body.spoc .runway { grid-template-columns: 1fr 1.15fr; gap: 18px; }
body.spoc .runway-panel {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(20, 40, 80, 0.06);
}
body.spoc .runway-amount { font-size: 3rem; color: #1d4ed8; }
body.spoc .runway-kicker { letter-spacing: 0.08em; }
body.spoc .speak {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    font-size: 1.02rem;
}
body.spoc .runway-danger { background: linear-gradient(160deg, #fff5f4, #ffe4e1); }
body.spoc .runway-warn { background: linear-gradient(160deg, #fff8ee, #ffefd6); }
body.spoc .runway-ok { background: linear-gradient(160deg, #f3fbf5, #e3f6e8); }
body.spoc .month-track { margin-top: 18px; }
body.spoc .month-cell { height: 10px; background: rgba(20, 35, 59, 0.08); }

body.spoc .card, body.spoc .kpi-card {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(20, 40, 80, 0.05);
}
body.spoc .kpi-value { color: #1d4ed8; }
body.spoc .pie { width: 190px; height: 190px; }
body.spoc .pie-center { width: 128px; height: 128px; }
body.spoc .pie-center b { font-size: 1.6rem; color: #b3261e; }
body.spoc .pie-legend li { font-size: 1rem; padding: 6px 0; }
body.spoc table { min-width: 0; }
body.spoc th { background: #f7f9fd; }
body.spoc tbody tr:hover { background: #f4f7fd; }

html[data-theme="dark"] body.spoc,
body.spoc.is-dark {
    --bg: #0e141b;
    --surface: #18222c;
    --ink: #e8eef6;
    --muted: #a9b7c9;
    --line: #2c3a49;
    --accent: #8eb6ff;
    --glow: #152033;
    background: #0e141b;
    color: #e8eef6;
}
html[data-theme="dark"] body.spoc .dash-top,
body.spoc.is-dark .dash-top { background: rgba(14, 20, 27, 0.92); }
html[data-theme="dark"] body.spoc .theme-btn,
body.spoc.is-dark .theme-btn,
html[data-theme="dark"] body.spoc .lang,
body.spoc.is-dark .lang { background: #243140; color: #e8eef6; border-color: #3a4b60; }
html[data-theme="dark"] body.spoc .lang a,
body.spoc.is-dark .lang a { color: #d5deea; }
html[data-theme="dark"] body.spoc .lang a.on,
body.spoc.is-dark .lang a.on { background: #8eb6ff; color: #0e141b; }
html[data-theme="dark"] body.spoc .runway-amount,
html[data-theme="dark"] body.spoc .kpi-value,
body.spoc.is-dark .runway-amount,
body.spoc.is-dark .kpi-value { color: #8eb6ff; }
html[data-theme="dark"] body.spoc .runway-danger,
body.spoc.is-dark .runway-danger { background: linear-gradient(160deg, #3a2224, #2a181c); }
html[data-theme="dark"] body.spoc .runway-warn,
body.spoc.is-dark .runway-warn { background: linear-gradient(160deg, #3a301c, #2a2416); }
html[data-theme="dark"] body.spoc .runway-ok,
body.spoc.is-dark .runway-ok { background: linear-gradient(160deg, #1a3324, #14261c); }
html[data-theme="dark"] body.spoc .speak,
body.spoc.is-dark .speak { background: rgba(0, 0, 0, 0.22); color: #f3f6fb; }
html[data-theme="dark"] body.spoc .card,
html[data-theme="dark"] body.spoc .kpi-card,
html[data-theme="dark"] body.spoc .runway-panel,
body.spoc.is-dark .card,
body.spoc.is-dark .kpi-card,
body.spoc.is-dark .runway-panel { background: #18222c; color: #e8eef6; }
html[data-theme="dark"] body.spoc .pie,
body.spoc.is-dark .pie { background: conic-gradient(#8eb6ff 0 var(--part), #314052 var(--part) 100%); }
html[data-theme="dark"] body.spoc .pie-center,
body.spoc.is-dark .pie-center { background: #18222c; }
html[data-theme="dark"] body.spoc .pie-center b,
body.spoc.is-dark .pie-center b { color: #f0a8a2; }
html[data-theme="dark"] body.spoc th,
body.spoc.is-dark th { background: #121a22; color: #a9b7c9; }
html[data-theme="dark"] body.spoc td,
body.spoc.is-dark td { border-color: #2c3a49; color: #e8eef6; }
html[data-theme="dark"] body.spoc tbody tr:hover,
body.spoc.is-dark tbody tr:hover { background: #203040; }
html[data-theme="dark"] body.spoc .chip,
html[data-theme="dark"] body.spoc .empty-state,
body.spoc.is-dark .chip,
body.spoc.is-dark .empty-state { color: #d5deea; }
html[data-theme="dark"] body.spoc a,
body.spoc.is-dark a { color: #9ec0ff; }

@media (max-width: 800px) {
    body.spoc .dash-top {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }
    body.spoc .brand-logo { height: 48px; }
    body.spoc .brand strong { font-size: 0.95rem; }
    body.spoc .dash-top-meta { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
    body.spoc .dash-main { width: min(1080px, calc(100% - 20px)); margin-bottom: 24px; }
    body.spoc .runway { grid-template-columns: 1fr; gap: 12px; }
    body.spoc .runway-amount { font-size: 2.3rem; }
    body.spoc .runway-panel, body.spoc .card, body.spoc .kpi-card { border-radius: 16px; }
    body.spoc .pie-card { flex-direction: column; align-items: flex-start; gap: 16px; }
    body.spoc .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.spoc .kpi-label { font-size: 0.72rem; }
    body.spoc .kpi-value { font-size: 1.25rem; }
    body.spoc .split { grid-template-columns: 1fr; }
    body.spoc table { min-width: 680px; }
    body.spoc .table-wrap { margin: 0 -8px; }
    body.spoc .speak { font-size: 0.95rem; }
}
@media (max-width: 420px) {
    body.spoc .kpi-grid { grid-template-columns: 1fr; }
    body.spoc .theme-btn { padding: 8px 10px; }
}