@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#15202b; --muted:#71808b; --line:#dce4e5; --paper:#f4f7f5; --white:#fff; --red:#de6257; --amber:#e5a34b; --green:#429b78; --blue:#4d87a8; --navy:#20323c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Manrope', sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:258px; flex:0 0 258px; background:var(--navy); color:#dfe9e7; padding:28px 20px 22px; display:flex; flex-direction:column; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid #80bbb0; color:#9dd1c6; font-weight:800; margin-bottom:20px; }
.brand-copy { display:flex; flex-direction:column; gap:4px; padding-bottom:35px; border-bottom:1px solid #3d5359; }
.brand-copy strong { font-size:19px; letter-spacing:-.4px; }
.eyebrow, .section-kicker, .scope-label { font:500 10px 'DM Mono', monospace; letter-spacing:1.1px; text-transform:uppercase; }
.eyebrow { color:#86aaa7; }
.primary-nav { padding-top:28px; display:grid; gap:7px; }
.nav-item { border:0; background:transparent; color:#aebfbe; text-align:left; padding:12px 11px; display:flex; align-items:center; gap:13px; font-size:13px; }
.nav-item:hover, .nav-item.active { color:#fff; background:#2f4750; }
.nav-icon { font:500 10px 'DM Mono', monospace; color:#73b6a6; }
.sidebar-footer { margin-top:auto; border-top:1px solid #3d5359; padding-top:20px; }
.scope-label { color:#78a49e; margin-bottom:10px; }
.scope-value { display:flex; align-items:center; gap:8px; font:500 11px 'DM Mono', monospace; color:#ecf4f1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:#69c29e; box-shadow:0 0 0 4px #31545a; }
.sidebar-footer p { color:#89a19f; font-size:11px; line-height:1.6; margin:16px 0 0; }
.main-content { min-width:0; flex:1; }
.topbar { min-height:96px; padding:24px 42px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:#f8faf8; }
.breadcrumb { color:#87958f; font:500 10px 'DM Mono', monospace; text-transform:uppercase; letter-spacing:.7px; margin-bottom:10px; }.breadcrumb span { color:#b1bbb7; margin:0 7px; }
h1,h2,h3,p { margin:0; } h1 { font-size:24px; letter-spacing:-.8px; } h2 { font-size:27px; letter-spacing:-1px; margin:7px 0 9px; } h3 { font-size:17px; letter-spacing:-.35px; margin-top:6px; }
.topbar-actions { display:flex; gap:10px; align-items:center; }.import-button { background:var(--ink); color:#fff; padding:10px 15px; font-size:12px; font-weight:700; cursor:pointer; }.icon-button, .avatar { width:36px; height:36px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--navy); }.icon-button { font-size:19px; }.avatar { border-radius:50%; font:500 10px 'DM Mono', monospace; background:#d6e8df; border-color:#c7ded2; }
.content-wrap { max-width:1380px; margin:0 auto; padding:28px 42px 60px; }.notice-bar { background:#e7f1ed; border-left:3px solid var(--green); min-height:43px; padding:10px 13px; display:flex; align-items:center; gap:10px; color:#3d6656; font-size:12px; }.notice-icon { width:17px; height:17px; border:1px solid #6daa91; border-radius:50%; display:grid; place-items:center; font:700 11px Georgia; }.notice-bar button { margin-left:auto; border:0; background:none; color:#5b8175; font-size:18px; }
.hero-row { display:flex; justify-content:space-between; align-items:end; padding:38px 0 26px; }.section-kicker { color:#87958f; }.status-pill { color:#3b8c70; background:#deeee7; padding:4px 7px; margin-left:8px; font-size:9px; }.muted { color:var(--muted); font-size:12px; }.score-block { display:flex; align-items:center; gap:14px; }.score-block strong, .score-block .muted { display:block; }.score-block strong { font-size:13px; }.score-block .muted { margin-top:5px; font-size:11px; }.score-ring { --score:68%; width:74px; height:74px; border-radius:50%; background:conic-gradient(var(--green) var(--score), #dae5e1 0); display:grid; place-items:center; position:relative; font-size:20px; font-weight:800; }.score-ring:after { content:''; position:absolute; inset:7px; background:var(--paper); border-radius:50%; }.score-ring span, .score-ring small { position:relative; z-index:1; }.score-ring small { font-size:9px; color:var(--muted); margin-left:1px; }
.metric-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:13px; }.metric-card { background:#fff; border:1px solid var(--line); border-top:3px solid; padding:18px 18px 15px; }.accent-red { border-top-color:var(--red); }.accent-amber { border-top-color:var(--amber); }.accent-green { border-top-color:var(--green); }.accent-blue { border-top-color:var(--blue); }.metric-label { font:500 10px 'DM Mono', monospace; color:#75827e; text-transform:uppercase; letter-spacing:.7px; }.metric-value { font-size:31px; font-weight:800; letter-spacing:-1px; margin:10px 0 8px; }.metric-foot { color:#8c9894; font-size:10px; }.trend { font:500 11px 'DM Mono', monospace; margin-right:4px; }.trend.down { color:var(--red); }.trend.up { color:var(--green); }.trend.neutral { color:var(--blue); }
.dashboard-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:13px; margin-top:13px; }.panel { background:#fff; border:1px solid var(--line); padding:21px; }.panel-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; }.legend-note { color:#8d9995; font:500 10px 'DM Mono', monospace; padding-top:4px; }.severity-layout { display:flex; align-items:center; gap:38px; min-height:148px; }.donut { width:150px; height:150px; border-radius:50%; background:conic-gradient(var(--red) 0 43%, var(--amber) 43% 86%, var(--blue) 86% 100%); display:grid; place-items:center; flex:0 0 auto; }.donut > div { width:100px; height:100px; background:#fff; border-radius:50%; display:grid; place-content:center; text-align:center; }.donut strong { font-size:27px; line-height:1; }.donut span { color:var(--muted); font-size:10px; margin-top:5px; }.legend { display:grid; gap:17px; flex:1; }.legend-row { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; }.legend-row > span:first-child { display:flex; align-items:center; gap:9px; }.legend-swatch { width:9px; height:9px; }.legend-number { font:500 12px 'DM Mono', monospace; }
.progress-summary { display:flex; gap:10px; align-items:baseline; }.progress-summary strong { font-size:35px; letter-spacing:-1px; }.progress-summary span { color:var(--muted); font-size:11px; }.progress-bar { height:7px; background:#e8eeeb; margin:18px 0 26px; }.progress-bar span { display:block; height:100%; background:var(--green); }.activity-list { display:grid; gap:17px; }.activity-list > div { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; font-size:11px; }.activity-dot { width:7px; height:7px; border-radius:50%; }.activity-dot.green { background:var(--green); }.activity-dot.amber { background:var(--amber); }.activity-dot.gray { background:#b8c2bf; }.activity-list time { color:#8d9995; font:500 10px 'DM Mono', monospace; }
.findings-panel { margin-top:13px; }.filter-group { display:flex; gap:4px; }.filter { border:1px solid var(--line); background:#fff; padding:6px 9px; color:#798681; font-size:10px; }.filter.active, .filter:hover { background:var(--navy); color:#fff; border-color:var(--navy); }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:620px; } th { color:#899691; font:500 9px 'DM Mono', monospace; letter-spacing:.6px; text-transform:uppercase; text-align:left; padding:0 10px 11px; border-bottom:1px solid var(--line); } td { padding:14px 10px; border-bottom:1px solid #edf1ef; font-size:11px; }.finding-name { font-weight:700; font-size:12px; }.finding-sub { display:block; color:#9aa5a1; font-size:10px; margin-top:4px; }.endpoint { font-family:'DM Mono', monospace; color:#60726e; font-size:10px; }.severity, .finding-status { display:inline-block; padding:5px 7px; font:500 9px 'DM Mono', monospace; text-transform:uppercase; }.severity-high { color:#ae4840; background:#f8e3e0; }.severity-medium { color:#a36b1e; background:#f9edda; }.severity-low { color:#4b7187; background:#e1edf3; }.finding-status { color:#a36b1e; background:#fbf1df; }.finding-status.open { color:#a44740; background:#f8e4e0; }
.coverage-panel { margin-top:13px; display:none; }.coverage-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 38px; }.coverage-item { display:grid; grid-template-columns:1fr auto; gap:9px; font-size:11px; }.coverage-label { display:flex; justify-content:space-between; margin-bottom:6px; }.coverage-label span:last-child { color:#8c9894; font:500 10px 'DM Mono', monospace; }.coverage-track { grid-column:1 / -1; height:6px; background:#e9efec; }.coverage-track span { display:block; height:100%; background:var(--green); }
@media (max-width:850px) { .sidebar { width:70px; flex-basis:70px; padding:22px 10px; }.brand-copy, .sidebar-footer, .nav-item:not(.active) { display:none; }.primary-nav { padding-top:18px; }.nav-item { justify-content:center; padding:12px 5px; }.nav-icon { font-size:11px; }.topbar, .content-wrap { padding-left:22px; padding-right:22px; }.metric-grid { grid-template-columns:repeat(2, 1fr); }.dashboard-grid { grid-template-columns:1fr; }.hero-row { align-items:start; gap:20px; flex-direction:column; }.coverage-list { grid-template-columns:1fr; } }
@media (max-width:520px) { .topbar { align-items:start; gap:15px; flex-direction:column; }.topbar-actions { align-self:stretch; }.import-button { flex:1; text-align:center; }.content-wrap { padding:18px 14px 40px; }.metric-grid { gap:8px; }.metric-card { padding:14px 12px; }.metric-value { font-size:26px; }.severity-layout { gap:20px; }.donut { width:120px; height:120px; }.donut > div { width:82px; height:82px; }.hero-row { padding-top:28px; } }