/* Uses the existing Shangbo palette. */
.overview-info {display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel-raised);color:var(--brand);font:600 13px Georgia,serif;vertical-align:middle;cursor:pointer}
#overviewHelp {max-width:min(520px,90vw);background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:26px}
#overviewHelp::backdrop {background:rgba(0,0,0,.7)}
#overviewHelp p {color:var(--muted);line-height:1.7}
#dash { display:flex; flex-direction:column; gap:18px; }
#dash.hide {display:none}
.overview-hero { background:radial-gradient(ellipse at top right,rgba(90,167,255,.12),transparent 65%),var(--panel-solid); border:1px solid var(--line); border-radius:20px; padding:28px; }
.overview-heading {display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.overview-heading h2 {font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.045em;margin:5px 0 10px}
.overview-caption {color:var(--muted);max-width:70ch;margin:0 0 20px}
.overview-nav {display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.overview-nav button,.overview-action {background:var(--panel-raised);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:9px 13px;cursor:pointer}
.overview-nav button.active {background:var(--brand);color:var(--canvas);border-color:var(--brand)}
.overview-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.overview-metric {min-height:138px;padding:20px!important;border:1px solid var(--line)!important;border-radius:13px;background:rgba(22,27,34,.7)!important;color:var(--ink);text-align:left}
.overview-metric strong {display:block;font:700 2.3rem var(--mono);letter-spacing:-.07em;margin:9px 0;color:var(--brand)}
.overview-metric small {display:block;color:var(--muted);font-size:.76rem}
.overview-metric:hover {border-color:var(--brand)!important}
.overview-split {display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:20px}
.overview-box {background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.overview-box h3 {margin:0 0 6px;font-size:1.05rem}
.overview-bars {display:flex;gap:5px;align-items:stretch;height:160px;margin-top:20px}
.overview-bars button {flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0;font-size:.65rem}
.overview-bars i {width:80%;max-width:35px;background:var(--brand);border-radius:4px 4px 0 0;display:block;min-height:2px;margin:4px 0}
.overview-bars button:hover i {background:var(--green)}
.overview-alert {padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.overview-alert:last-child {border:0}
.overview-alert a {color:var(--brand)}
.overview-flow {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}
.overview-flow button {border:1px solid var(--line)!important;border-radius:12px;padding:16px!important;background:var(--panel-raised)!important;color:var(--ink)}
.overview-flow strong {display:block;font-size:1.6rem;margin:8px 0}
.overview-flow small {color:var(--muted);display:block}
.overview-detail {border:1px solid var(--line);border-radius:14px;background:var(--panel-solid);overflow:hidden}
.overview-detail>summary {padding:18px 22px;cursor:pointer;font-weight:600;display:list-item;list-style-position:inside}
.overview-detail[open]>summary {border-bottom:1px solid var(--line);color:var(--brand)}
.overview-detail>.panel,.overview-detail>.grid-2 {margin:0;border:0}
.overview-status {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:18px}
.overview-status article {border:1px solid var(--line);border-radius:12px;padding:16px}
.overview-status p {font-size:.8rem;color:var(--muted);margin:8px 0}
.overview-status b {font-size:.85rem}
.overview-status .state {display:block;color:var(--amber);margin:9px 0}
.overview-empty {color:var(--muted);padding:15px 0;font-size:.86rem}
@media(max-width:800px){.overview-metrics{grid-template-columns:repeat(2,1fr)}.overview-split{grid-template-columns:1fr}.overview-flow{grid-template-columns:repeat(2,1fr)}.overview-hero{padding:18px}.overview-heading{display:block}}
@media(prefers-reduced-motion:no-preference){.overview-metric,.overview-nav button{transition:border-color .18s,background .18s}}