:root { font-family: system-ui, sans-serif; color-scheme: dark light; }
body { margin: 2rem; }
main { max-width: 900px; margin-inline: auto; }
.card { border: 1px solid #ccc; padding: 1rem; border-radius: 10px; margin-top: 1rem; }
.row { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
input, select, button { padding: .5rem; }
pre { background: #111; color: #0f0; padding: .75rem; border-radius: 8px; overflow: auto; }

/* Global Stats: responsive, bounded reports with accessible exact figures. */
#global_stats_root { display:block; }
.gs-controls,.gs-form { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.gs-controls label,.gs-form label { display:grid; gap:6px; min-width:160px; }
.gs-controls input,.gs-form input,.gs-controls select { box-sizing:border-box; }
.gs-controls input[type=checkbox],.gs-form input[type=checkbox] { width:auto; justify-self:start; }
.gs-form label { flex:1 1 270px; }
.gs-form p { flex-basis:100%; }
.gs-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:20px 0; }
.gs-kpi { padding:18px; background:#101319; border:1px solid #262a36; border-radius:12px; display:grid; gap:10px; }
.gs-kpi strong { font-size:28px; color:#6ae3b4; }
.gs-kpi small { color:#8b90a1; }
.gs-block { margin:24px 0; padding-top:12px; border-top:1px solid #262a36; }
.gs-scroll { overflow:auto; max-height:460px; }
.gs-scroll table { border-collapse:collapse; width:100%; text-align:left; }
.gs-scroll th,.gs-scroll td { padding:10px; border-bottom:1px solid #262a36; white-space:nowrap; }
.gs-scroll th { color:#8b90a1; }
.gs-trend { display:flex; height:140px; align-items:stretch; gap:3px; margin:15px 0; }
.gs-trend>div { flex:1; display:flex; align-items:end; gap:1px; }
.gs-trend i { display:block; flex:1; min-height:0; }
.gs-received { background:#7aa2ff; }
.gs-dispatched { background:#6ae3b4; }