:root { --primary:#1e40af; --primary-dark:#172554; --accent:#d97706; --bg:#f8fafc; --surface:#fff; --surface-muted:#f1f5f9; --text:#0f172a; --text-muted:#475569; --border:#dbeafe; --success:#16734a; --warning:#9a5a08; --focus:#1e40af; --shadow:0 10px 28px rgba(15,23,42,.07); font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; line-height:1.5; } button,input,select { font:inherit; } a { color:inherit; } .skip-link { position:fixed; z-index:100; left:16px; top:-56px; padding:10px 14px; border-radius:6px; background:var(--primary-dark); color:#fff; transition:top .18s ease; } .skip-link:focus { top:16px; outline:3px solid #fff; outline-offset:3px; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(20px,4vw,56px); color:#fff; background:var(--primary-dark); } .brand { display:flex; gap:12px; align-items:center; text-decoration:none; } .brand-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:9px; color:var(--primary-dark); background:#fff; font-family:"Courier New",monospace; font-weight:800; font-size:13px; } .brand strong,.brand small { display:block; } .brand small { color:#bfdbfe; font-size:12px; letter-spacing:.07em; text-transform:uppercase; } .topbar-actions,.environment,.sync-state { display:flex; align-items:center; gap:8px; font-size:14px; } .logout-button { min-height:38px; padding:7px 11px; border:1px solid rgba(255,255,255,.5); border-radius:7px; color:#fff; background:transparent; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .18s ease; } .logout-button:hover { background:rgba(255,255,255,.13); } .logout-button:focus-visible { outline:3px solid #fff; outline-offset:2px; } .logout-button:disabled { cursor:wait; opacity:.65; } .status-dot { width:9px; height:9px; flex:none; border-radius:99px; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.14); } .status-dot.amber { background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.15); }
.layout { display:grid; grid-template-columns:236px minmax(0,1fr); max-width:1600px; min-height:calc(100dvh - 72px); margin:auto; } .sidebar { padding:28px 16px; border-right:1px solid var(--border); background:#fff; } .nav-item { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin:3px 0; padding:10px 12px; border-radius:8px; text-decoration:none; color:#334155; font-size:14px; font-weight:600; transition:background .18s ease,color .18s ease; } .nav-item:hover { background:#eff6ff; color:var(--primary); } .nav-item:focus-visible,.primary-button:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; } .nav-item.active { background:#dbeafe; color:#1e3a8a; } .nav-item.muted { color:#64748b; } .nav-item span { padding:2px 6px; border-radius:12px; background:#e2e8f0; font-size:11px; }
.content { width:min(1280px,100%); padding:clamp(24px,4vw,48px); } .page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; } .eyebrow { margin:0 0 4px; color:#64748b; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(28px,4vw,38px); line-height:1.15; letter-spacing:-.035em; } h2 { margin-bottom:0; font-size:18px; line-height:1.3; } .lead { max-width:670px; margin-bottom:0; color:var(--text-muted); font-size:16px; } .sync-state { min-width:max-content; padding:8px 10px; border:1px solid #fde68a; border-radius:8px; color:var(--warning); background:#fffbeb; font-size:13px; }
.filters { display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(150px,1fr) minmax(150px,1fr) auto; gap:12px; align-items:end; margin-bottom:24px; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); } .field { min-width:0; } label { display:block; margin-bottom:5px; color:#475569; font-size:13px; font-weight:600; } input,select { width:100%; min-height:44px; padding:9px 10px; border:1px solid #cbd5e1; border-radius:7px; color:#64748b; background:#f8fafc; } .primary-button { min-height:44px; padding:9px 16px; border:0; border-radius:7px; background:var(--primary); color:#fff; font-weight:700; cursor:not-allowed; opacity:.55; } .filter-note { grid-column:1/-1; margin:0; color:#64748b; font-size:13px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; } .metric-card,.panel,.notice { border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); } .metric-card { min-height:143px; padding:18px; } .metric-card p { margin-bottom:10px; color:#475569; font-size:14px; font-weight:600; } .metric-card strong { display:block; margin-bottom:7px; font-family:"Courier New",monospace; font-size:30px; line-height:1; } .metric-card span { color:#64748b; font-size:12px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr); gap:16px; margin-bottom:16px; } .panel { padding:22px; } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; } .tag { display:inline-flex; align-items:center; min-height:26px; padding:3px 8px; border:1px solid #cbd5e1; border-radius:99px; color:#475569; background:#f8fafc; font-size:12px; font-weight:600; white-space:nowrap; } .tag.amber { border-color:#fde68a; color:var(--warning); background:#fffbeb; } .empty-chart { min-height:204px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#64748b; text-align:center; } .empty-chart svg { width:100%; max-width:560px; height:150px; margin-bottom:6px; } .empty-chart path { stroke:#e2e8f0; stroke-width:1; fill:none; } .empty-chart .trend { stroke:#bfdbfe; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 7; } .empty-chart p { margin:0; font-size:13px; }
.source-list { display:grid; gap:4px; padding:0; margin:0; list-style:none; } .source-list li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid #e2e8f0; } .source-list li:first-child { border-top:0; } .source-symbol { display:grid; width:30px; height:30px; place-items:center; border-radius:7px; color:#fff; background:var(--primary); font-family:"Courier New",monospace; font-weight:700; font-size:12px; } .source-symbol.pale { color:#334155; background:#e2e8f0; } .source-list strong,.source-list small { display:block; } .source-list strong { font-size:13px; } .source-list small { color:#64748b; font-size:12px; }
.report-panel { margin-bottom:16px; } .catalog-state { color:#64748b; font-size:13px; } .report-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .report-card { min-height:156px; display:flex; flex-direction:column; padding:16px; border:1px solid #dbeafe; border-radius:9px; background:#fbfdff; } .report-card h3 { margin:0 0 7px; font-size:15px; line-height:1.3; } .report-card p { margin:0 0 8px; color:#475569; font-size:12px; } .report-card .source { margin-top:auto; color:#64748b; font-size:12px; } .report-card .tag { width:max-content; margin-top:11px; }
.notice { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,1fr); gap:24px; padding:24px; color:#1e3a8a; border-color:#bfdbfe; background:#eff6ff; } .notice h2 { font-size:18px; } .notice p:last-child { margin:0; color:#334155; font-size:14px; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } .report-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .topbar { padding:12px 20px; } .layout { display:block; } .sidebar { display:flex; gap:4px; overflow:auto; padding:10px 16px; border-right:0; border-bottom:1px solid var(--border); } .nav-item { flex:none; margin:0; } .nav-item.muted { display:none; } .content { padding:24px 16px 40px; } .page-heading { display:block; } .sync-state { width:max-content; margin-top:16px; } .filters { grid-template-columns:1fr; } .metric-grid,.report-catalog,.notice { grid-template-columns:1fr; } .source-list li { grid-template-columns:32px minmax(0,1fr); } .source-list .tag { grid-column:2; width:max-content; } } @media (max-width:420px) { .environment { display:none; } .topbar-actions .environment { display:none; } .metric-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }