.sp-page { display: grid; gap: 14px; max-width: 1180px; }
.sp-head h1 { margin: 2px 0 4px; }
.sp-head p { margin: 0; color: var(--muted, inherit); max-width: 64ch; }
.sp-status { min-height: 1.4em; font-size: .9rem; }
.sp-status.sp-success { color: var(--success, #2f7d4f); }
.sp-status.sp-warning { color: var(--warning, #9a6510); }
.sp-status.sp-danger { color: var(--danger, #b3261e); }
.sp-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-picker select { min-width: 220px; }
.sp-card { padding: 14px 16px; border: 1px solid var(--line, rgba(120,100,60,.25)); border-radius: 12px; background: var(--panel, rgba(255,250,235,.6)); display: grid; gap: 10px; }
.sp-card h2 { margin: 0; font-size: 1.05rem; }
.sp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.sp-panel p { margin: 0; }
.sp-banner { display: flex; gap: 14px; padding: 12px 16px; border: 1px solid var(--line, rgba(120,100,60,.25)); border-radius: 12px; background: var(--panel, rgba(255,250,235,.6)); }
.sp-banner h2 { margin: 0 0 4px; font-size: 1.02rem; }
.sp-banner p { margin: 0; font-size: .9rem; }
.sp-banner-mark { width: 6px; border-radius: 3px; flex: none; background: var(--success, #2f7d4f); }
.sp-banner-stale .sp-banner-mark { background: var(--warning, #c08a1e); }
.sp-banner-unknown .sp-banner-mark { background: var(--muted, #8a7d62); }
.sp-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-bar-row p { margin: 0; flex: 1; min-width: 220px; }
.sp-chart { width: 100%; height: 200px; display: block; }
.sp-bar { fill: var(--gold, #b8892c); }
.sp-bar-partial { fill: var(--gold-3, #e2c98a); }
.sp-axis { stroke: var(--line-strong, rgba(120,100,60,.45)); stroke-width: 1; }
.sp-tick { font-size: 11px; fill: var(--muted, #6f6550); }
.sp-summary { margin: 0; font-size: .92rem; padding: 6px 8px; border-radius: 6px; }
.sp-summary:focus-visible, .sp-table-wrap:focus-visible { outline: 2px solid var(--gold, #b8892c); outline-offset: 2px; }
.sp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--gold-3, #e2c98a); vertical-align: middle; }
.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sp-table th, .sp-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line, rgba(120,100,60,.2)); }
.sp-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, inherit); }
.sp-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.sp-empty-row { color: var(--muted, inherit); }
.sp-pill { display: inline-block; font-size: .76rem; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: rgba(120,100,60,.12); }
.sp-pill-match, .sp-pill-complete { color: var(--success, #2f7d4f); }
.sp-pill-mismatch { color: var(--danger, #b3261e); }
.sp-pill-closing_unavailable, .sp-pill-partial { color: var(--warning, #9a6510); }
.sp-empty { display: grid; justify-items: start; gap: 4px; padding: 18px; border: 1px dashed var(--line, rgba(120,100,60,.3)); border-radius: 12px; }
.sp-empty-mark { width: 28px; height: 4px; border-radius: 2px; background: var(--gold, #b8892c); }
.sp-sk { height: 64px; margin-bottom: 10px; border-radius: 12px; }
.sp-sk-tall { height: 220px; }
@media (max-width: 767px) { .sp-chart { height: 160px; } .sp-picker select { min-width: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sp-page * { transition: none !important; animation: none !important; } }