:root {
  color-scheme: light;
  --navy:#10213d;
  --blue:#145da0;
  --blue-strong:#073b75;
  --cyan:#16a9c7;
  --green:#14875b;
  --line:#dce4ed;
  --line-strong:#c8d5e3;
  --ink:#172033;
  --muted:#687386;
  --bg:#f4f6f9;
  --surface:#fff;
  --sidebar-width:260px;
  --shadow:0 4px 18px rgba(25,48,82,.07);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif; }
button,input,select { font:inherit; }
button,input,select,a { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select):focus-visible { outline:3px solid rgba(11,87,208,.35); outline-offset:2px; box-shadow:0 0 0 1px #0b57d0; }
.hidden { display:none !important; }

.app-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; display:flex; flex-direction:column; width:var(--sidebar-width); padding:22px 16px 16px; overflow-y:auto; background:#fff; border-right:1px solid var(--line); box-shadow:2px 0 15px rgba(20,42,76,.05); }
.brand-block,.login-brand { display:flex; align-items:center; gap:11px; }
.brand-mark { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-size:20px; font-weight:800; box-shadow:0 5px 12px rgba(20,93,160,.18); }
.brand-block strong { display:block; color:var(--navy); font-size:17px; letter-spacing:.02em; }
.brand-block span { display:block; color:var(--muted); font-size:11px; }
.sidebar-context { margin:24px 0 16px; padding:13px; border:1px solid #dce7f1; border-radius:11px; background:#f5f9fd; }
.sidebar-context > span { display:block; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-context strong { display:block; margin-top:5px; color:var(--blue-strong); font-size:12px; line-height:1.35; }
.sidebar-context small { display:block; margin-top:5px; color:var(--green); font-weight:700; }
.sidebar-nav { display:grid; gap:4px; }
.sidebar-nav h2 { margin:20px 10px 5px; color:#8a94a5; font-size:10px; letter-spacing:.1em; }
.nav-link { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 11px; border-radius:8px; color:#344258; text-decoration:none; font-weight:600; transition:.15s ease; }
.nav-link span { width:18px; color:#62748c; text-align:center; }
.nav-link:hover { background:#f0f5fa; color:var(--blue-strong); transform:translateX(2px); }
.nav-link.active { background:#e8f1fb; color:var(--blue-strong); box-shadow:inset 3px 0 var(--blue); }
.sidebar-footer { display:grid; gap:9px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.sidebar-footer > span { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.logout { min-height:38px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--blue-strong); font-weight:700; cursor:pointer; }
.sidebar-toggle { position:fixed; top:14px; left:14px; z-index:50; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--blue-strong); box-shadow:var(--shadow); cursor:pointer; }
.sidebar-backdrop { position:fixed; inset:0; z-index:20; background:rgba(9,22,42,.35); }

.app-main { min-height:100vh; margin-left:var(--sidebar-width); padding:28px clamp(20px,2.3vw,36px); }
.app-main.login-layout { display:grid; place-items:center; margin-left:0; }
.viewer-panel { width:min(1440px,100%); margin:0 auto; }
.panel,.metric-card,.page-title-card,.login-panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.page-title-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,310px); gap:24px; min-height:148px; padding:23px 25px; border-left:4px solid var(--green); }
.page-title-main { align-self:center; }
.system-status { display:block; margin-bottom:8px; color:var(--green); font-size:11px; font-weight:750; }
.page-title-card h1 { margin:0; color:#152036; font-size:26px; line-height:1.2; }
.page-title-card p { margin:6px 0 13px; color:var(--muted); }
.readonly-badge { display:inline-flex; align-items:center; min-height:30px; padding:4px 10px; border:1px solid #b9dfcf; border-radius:999px; background:#edf9f4; color:#0d714b; font-size:11px; font-weight:750; }
.page-client-context { align-self:center; justify-self:end; text-align:right; }
.page-client-context > span { display:block; color:var(--muted); font-size:11px; }
.page-client-context strong { display:block; margin:5px 0; color:var(--blue-strong); font-size:13px; }
.page-client-context small { display:block; color:var(--muted); font-size:11px; }
.context-toolbar { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:22px 0; padding:15px 18px; }
.context-toolbar label { display:grid; min-width:min(360px,100%); gap:5px; color:var(--muted); font-size:11px; font-weight:700; }
.context-toolbar p { margin:0; color:var(--muted); font-size:12px; }
select,input { width:100%; min-height:40px; padding:8px 11px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--ink); }
select:disabled { opacity:1; background:#f6f8fa; color:var(--blue-strong); }

.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:26px 2px 13px; }
.section-heading h2 { margin:2px 0 0; color:#17243a; font-size:20px; }
.eyebrow { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.11em; }
.section-caption { color:var(--muted); font-size:11px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.metric-card { position:relative; min-height:112px; padding:17px; overflow:hidden; }
.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--blue); }
.metric-card:nth-child(3n)::before { background:var(--cyan); }
.metric-card:nth-child(4n)::before { background:var(--green); }
.metric-card h3 { margin:0; color:var(--muted); font-size:12px; font-weight:650; }
.metric-card p { margin:12px 0 0; color:var(--blue-strong); font-size:21px; font-weight:780; line-height:1.15; }
.table-panel { margin-top:25px; padding:18px 20px; }
.table-panel .section-heading { margin:0 0 12px; }
.table-scroll { overflow-x:auto; scrollbar-gutter:stable; }
table { width:100%; border-collapse:separate; border-spacing:0; white-space:nowrap; }
th,td { padding:12px 11px; border-bottom:1px solid var(--line); text-align:right; }
thead th { background:#f3f6f9; color:#5f6c7e; font-size:11px; font-weight:750; }
th:first-child,td:first-child { position:sticky; left:0; text-align:left; }
thead th:first-child { z-index:2; background:#f3f6f9; }
tbody th:first-child { background:#fff; color:var(--blue-strong); }
tbody tr:last-child > * { border-bottom:0; }
.message { margin:14px 0; padding:10px 13px; border:1px solid #b9dfcf; border-radius:8px; background:#edf9f4; color:#0d714b; }
.message.error { border-color:#f0caca; background:#fff1f1; color:#9d2727; }
footer { padding:28px 12px 8px; color:var(--muted); font-size:11px; text-align:center; }

.login-panel { width:min(470px,100%); padding:34px; border-top:4px solid var(--blue); }
.login-brand { margin-bottom:25px; }
.login-brand strong { color:var(--navy); font-size:18px; }
.login-panel h1 { margin:5px 0 8px; font-size:25px; }
.login-panel > p { margin:0 0 23px; color:var(--muted); }
.login-panel form { display:grid; gap:15px; }
.login-panel label { display:grid; gap:6px; color:#4b596d; font-size:12px; font-weight:700; }
.login-panel form button { min-height:44px; margin-top:3px; border:0; border-radius:8px; background:var(--blue-strong); color:#fff; font-weight:750; cursor:pointer; }
.login-note { display:block; margin-top:20px; color:var(--muted); text-align:center; }

@media (max-width:1100px) { .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px) {
  :root { --sidebar-width:min(86vw,320px); }
  .app-sidebar { transform:translateX(-105%); transition:transform .18s ease; }
  body.sidebar-open .app-sidebar { transform:translateX(0); }
  .sidebar-toggle { display:block !important; }
  .app-main { margin-left:0; padding:70px 14px 24px; }
  .app-main.login-layout { padding:18px; }
  .page-title-card { grid-template-columns:1fr; padding:18px; }
  .page-client-context { justify-self:start; text-align:left; }
  .context-toolbar { align-items:stretch; flex-direction:column; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .page-title-card h1 { font-size:22px; }
  .metrics { grid-template-columns:1fr; gap:10px; }
  .metric-card { min-height:94px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .login-panel { padding:24px 19px; }
  .table-panel { padding:14px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }