:root {
  color-scheme: light;
  --bg-app:#f1f5f7; --bg-card:#ffffff; --bg-card-raise:#e9f0f4; --bg-inset:#edf3f6;
  --line:rgba(30,65,75,.1); --line-strong:rgba(30,65,75,.2);
  --text-1:#203b43; --text-2:#49646e; --text-3:#647982;
  --accent:#197e8e; --accent-hi:#096e80; --accent-dim:#e0f0f3;
  --ok:#147657; --ok-dim:#e3f3ea; --warn:#8c5d16; --warn-dim:#fbf0d9; --bad:#b3453f; --bad-dim:#fbe8e5;
}
aside { background:#f9fbfc; }
.topbar { background:#fff; }
.card { box-shadow:0 2px 5px #28495e04; }
.sb-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sb-item.active { box-shadow:inset 0 0 0 1px #187c8b12; }
.sb-scroll, .page { scrollbar-color:#b8cad2 transparent; }
.score-bar .sb-track, .meter { background:#dce7eb; }
.tb-search { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-btn { opacity:.7; }
@media (max-width:1000px) { .tb-search { display:none; } .tb-right { margin-left:auto; } }
@media (max-width:640px) {
  body { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  aside { height:auto; min-width:0; border-right:0; border-bottom:1px solid var(--line); }
  .sb-brand, .sb-ws, .sb-foot, .sb-label, .sb-item[data-nopage] { display:none; }
  .sb-scroll { display:flex; gap:5px; overflow-x:auto; padding:10px; }
  .sb-item { flex:0 0 auto; padding:9px 10px; font-size:12px; }
  .sb-item .cnt, .sb-item svg { display:none; }
  .sb-item.active::before { display:none; }
  main { height:100%; min-height:0; grid-template-rows:42px minmax(0,1fr); }
  .topbar { padding:0 14px; } .tb-right { display:none; }
  .crumb { font-size:11px; }
  .page { padding:18px 14px; }
  .page-head { flex-wrap:wrap; gap:8px; }
  .page-head h2 { font-size:18px; }
  .page-head .ph-sub { font-size:9px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .k-v { font-size:27px; }
  .kpi { min-width:0; }
  .g-2, .g-3, .g-2b { grid-template-columns:minmax(0,1fr); }
  .card-h { flex-wrap:wrap; }
  .tbl-wrap { overflow-x:auto; }
  .tbl-wrap table { min-width:650px; }
  .card-f { flex-wrap:wrap; gap:8px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }