:root {
  --background:#f8fafb; --surface:#ffffff; --text:#1c252e; --muted:#637381;
  --primary:#007867; --accent:#e0f3eb; --border:#e5e9ed; --danger:#a12727;
  --font-body:"Segoe UI",system-ui,sans-serif; --font-heading:"Aptos Display","Segoe UI",system-ui,sans-serif;
  --radius-card:18px; --radius-control:10px; --space:8px; --motion:200ms;
  color:var(--text); background:var(--background); font:15px/1.6 var(--font-body);
  scrollbar-color:var(--muted) var(--background); scrollbar-width:thin; scrollbar-gutter:stable;
}
* { box-sizing:border-box; scrollbar-color:var(--muted) var(--background); scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--muted); border:3px solid var(--background); border-radius:10px; }
body { margin:0; } [hidden] { display:none!important; }
a { color:var(--primary); } button,select { font:inherit; } button,a,select { -webkit-tap-highlight-color:transparent; }
button:not(:disabled),select { cursor:pointer; } button:disabled { cursor:wait; opacity:.65; }
:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
h1,h2,h3 { font-family:var(--font-heading); line-height:1.25; letter-spacing:-.025em; margin:0 0 16px; }
h1 { font-size:32px; } h2 { font-size:20px; } h3 { font-size:16px; } p { margin:0 0 16px; }
.muted,.small { color:var(--muted); } .small { font-size:13px; } .eyebrow { text-transform:uppercase; font-size:11px; letter-spacing:.12em; font-weight:600; color:var(--muted); margin-bottom:12px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); color:var(--text); font-weight:600; font-size:14px; text-decoration:none; transition:background var(--motion),box-shadow var(--motion); white-space:nowrap; }
.button:hover { background:var(--accent); } .primary { background:var(--primary); color:var(--surface); border-color:var(--primary); } .primary:hover { background:var(--text); }
.skip { position:fixed; left:16px; top:-80px; z-index:5; padding:12px; background:var(--surface); } .skip:focus { top:16px; }
.brandmark { width:44px; height:44px; display:inline-grid; place-items:center; background:var(--primary); color:var(--surface); border-radius:14px 14px 14px 3px; font-size:26px; font-weight:700; line-height:1; }
.signin { min-height:100svh; display:grid; place-items:center; padding:32px 20px 90px; }
.signin-card { width:min(100%,440px); background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:40px; box-shadow:0 16px 48px rgb(28 37 46 / .04); }
.signin-card .brandmark { margin-bottom:40px; } .signin-card h1 { font-size:38px; margin-bottom:20px; } .signin-card .button { width:100%; margin:16px 0 20px; justify-content:space-between; }
.auth-credit { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); color:var(--muted); font-size:12px; }
.sidebar { width:248px; background:var(--surface); position:fixed; inset:0 auto 0 0; padding:36px 20px 24px; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-weight:750; font-size:20px; letter-spacing:.04em; margin-bottom:48px; } .brand small { display:block; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:.02em; }
.nav-caption { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:0 12px; }
nav { display:grid; gap:6px; } nav a { display:flex; gap:14px; align-items:center; min-height:46px; padding:10px 14px; border-radius:var(--radius-control); text-decoration:none; color:var(--muted); font-size:14px; font-weight:550; transition:color var(--motion),background var(--motion); }
nav a:hover { color:var(--text); background:var(--background); } nav a[aria-current=page] { color:var(--primary); background:var(--accent); } .nav-icon { font-size:19px; width:22px; text-align:center; }
.sidebar-note { margin-top:auto; padding:24px 12px 0; color:var(--muted); font-size:12px; }
.workspace-body { margin-left:248px; } .topbar { min-height:88px; padding:20px 36px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border-bottom:1px solid var(--border); } .topbar-label { font-size:13px; color:var(--muted); } .profile { display:flex; align-items:center; gap:20px; min-width:0; } #identity { overflow-wrap:anywhere; }
main { max-width:1320px; padding:40px 36px 56px; margin:auto; } .page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; } .page-heading h1 { margin:0; } .page-heading .eyebrow { margin-bottom:8px; }
.context-strip { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 20px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); margin-bottom:16px; font-size:13px; } .context-icon { color:var(--primary); font-size:24px; } .context-strip label { color:var(--muted); } select { max-width:100%; min-height:44px; min-width:160px; border:1px solid var(--border); border-radius:var(--radius-control); padding:8px; background:var(--surface); color:var(--text); } .source-label { margin-left:auto; color:var(--muted); font-size:12px; }
.content { display:grid; gap:24px; min-height:280px; animation:enter var(--motion) ease-out; } .panel { background:var(--surface); padding:28px; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:0 3px 12px rgb(28 37 46 / .025); overflow-wrap:anywhere; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .panel p:last-child { margin-bottom:0; }
.lead-panel { border-left:4px solid var(--primary); } .tag { display:inline-block; border-radius:8px; background:var(--accent); color:var(--primary); padding:4px 10px; font-size:12px; margin-bottom:16px; } .metric { font-family:var(--font-heading); font-size:30px; font-weight:700; line-height:1.3; } .error { color:var(--danger); }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; } caption { text-align:left; color:var(--muted); font-size:12px; padding-bottom:16px; } th { color:var(--muted); font-size:12px; font-weight:550; } th,td { padding:16px 12px; border-bottom:1px solid var(--border); vertical-align:top; min-width:120px; } th:first-child,td:first-child { padding-left:0; } tbody tr:last-child td { border:0; } .table-action { margin-top:20px; }
.workspace-footer { max-width:1320px; margin:auto; padding:0 36px 24px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; color:var(--muted); font-size:11px; }
.menu-trigger { display:none; } dialog { border:0; padding:24px; border-radius:0 20px 20px 0; width:min(320px,85vw); max-width:100%; min-height:100svh; margin:0; background:var(--surface); color:var(--text); } dialog::backdrop { background:rgb(28 37 46 / .35); } .drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
@keyframes enter { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .grid { grid-template-columns:1fr; } .topbar { padding:20px 24px; } main { padding:32px 24px; } .workspace-footer { padding-left:24px; padding-right:24px; } }
@media(max-width:800px) { .sidebar { display:none; } .workspace-body { margin-left:0; } .menu-trigger { display:inline-flex; } .topbar { padding:16px; min-height:76px; } .topbar-label { display:none; } .profile { gap:12px; } #identity { font-size:11px; max-width:170px; } main { padding:28px 16px; } .page-heading h1 { font-size:26px; } .panel { padding:22px; } .context-strip { padding:12px; } .source-label { width:100%; margin-left:0; } .workspace-footer { padding:12px 16px 24px; } }
@media(max-width:440px) { .signin-card { padding:28px; } .signin-card h1 { font-size:32px; } .page-heading { align-items:flex-end; } .page-heading .button { padding:10px 12px; } }
@media(max-height:650px),(max-width:440px) { .auth-credit { position:static; text-align:right; margin-top:24px; } .signin { align-content:center; padding-bottom:24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { :root,* { scrollbar-color:auto; } .button,.panel,.context-strip { border:1px solid CanvasText; } nav a[aria-current=page] { outline:2px solid Highlight; } }