:root {
  --sg-primary: #2f5bea;
  --sg-primary-dark: #1d3fb8;
  --sg-sidebar: #0f1b33;
  --sg-sidebar-text: #b8c3dc;
  --sg-sidebar-active: #ffffff;
  --sg-surface: #f4f6fb;
  --sg-border: #e3e8f2;
  --sg-text-muted: #66708a;
  --sg-critical: #b4232c;
  --sg-high: #d9480f;
  --sg-medium: #b8860b;
  --sg-low: #2f7d32;
  --sg-opportunity: #3460c8;
  --sg-info: #5c677d;
  --bs-primary: var(--sg-primary);
  --bs-link-color: var(--sg-primary);
}

body { background: var(--sg-surface); color: #1d2433; font-size: .925rem; }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--sg-primary); --bs-btn-border-color: var(--sg-primary); --bs-btn-hover-bg: var(--sg-primary-dark); --bs-btn-hover-border-color: var(--sg-primary-dark); }
.text-muted-2 { color: var(--sg-text-muted) !important; }
.fw-semi { font-weight: 600; }
.small-caps { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 600; color: var(--sg-text-muted); }

/* App shell */
.sg-shell { display: flex; min-height: 100vh; }
.sg-sidebar { width: 248px; background: var(--sg-sidebar); color: var(--sg-sidebar-text); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sg-sidebar .brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.25rem; color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.sg-sidebar .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #4f7cff, #22c1a8); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.sg-sidebar .nav-section { padding: .9rem 1.25rem .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6f7c99; }
.sg-sidebar .nav-link { color: var(--sg-sidebar-text); padding: .45rem 1.25rem; display: flex; align-items: center; gap: .65rem; border-left: 3px solid transparent; }
.sg-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.sg-sidebar .nav-link.active { color: var(--sg-sidebar-active); background: rgba(79,124,255,.16); border-left-color: #4f7cff; }
.sg-sidebar .nav-link .bi { font-size: 1rem; width: 1.1rem; text-align: center; }
.sg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-topbar { background: #fff; border-bottom: 1px solid var(--sg-border); padding: .55rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 10; }
.sg-content { padding: 1.5rem; max-width: 1480px; width: 100%; }
.sg-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sg-page-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; }
.sg-page-header .subtitle { color: var(--sg-text-muted); margin-top: .2rem; }

@media (max-width: 991.98px) {
  .sg-sidebar { position: fixed; left: -260px; z-index: 1040; transition: left .2s ease; }
  .sg-sidebar.open { left: 0; }
  .sg-content { padding: 1rem; }
}

/* Cards & metrics */
.card { border: 1px solid var(--sg-border); border-radius: .75rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--sg-border); font-weight: 600; padding: .8rem 1rem; }
.metric { padding: 1rem 1.1rem; }
.metric .label { font-size: .75rem; color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.metric .value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin-top: .25rem; }
.metric .hint { font-size: .78rem; color: var(--sg-text-muted); }

.score-ring { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: conic-gradient(var(--ring-color, #2f5bea) calc(var(--score, 0) * 1%), #e8ecf5 0); position: relative; }
.score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.score-ring > * { position: relative; }
.score-ring .num { font-size: 1.8rem; font-weight: 800; }
.score-ring .of { font-size: .7rem; color: var(--sg-text-muted); }

/* Severity badges: text + icon + color (never color alone) */
.sev { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.sev-Critical { color: var(--sg-critical); background: #fdecee; }
.sev-High { color: var(--sg-high); background: #fff1e8; }
.sev-Medium { color: var(--sg-medium); background: #fff8e1; }
.sev-Low { color: var(--sg-low); background: #edf7ee; }
.sev-Opportunity { color: var(--sg-opportunity); background: #edf2ff; }
.sev-Informational { color: var(--sg-info); background: #f1f3f7; }

.status-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: #eef1f7; color: #3c4660; }
.status-pill.ok { background: #e6f6ec; color: #1e7b40; }
.status-pill.warn { background: #fff4e0; color: #9a5b00; }
.status-pill.bad { background: #fdebec; color: #a61e2b; }
.status-pill.run { background: #e9efff; color: #2343b0; }

.source-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: .25rem; border: 1px solid var(--sg-border); color: var(--sg-text-muted); background: #fff; }
.source-tag.measured { color: #1e7b40; border-color: #b8e2c6; }
.source-tag.estimated { color: #9a5b00; border-color: #f0d49a; }
.source-tag.ai { color: #6a3fc1; border-color: #d6c7f3; }

.table { --bs-table-bg: #fff; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sg-text-muted); font-weight: 600; background: #fafbfe; border-bottom-width: 1px; }
.table td { vertical-align: middle; }
.url-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.evidence { background: #0f1b33; color: #d5def5; border-radius: .5rem; padding: .75rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--sg-text-muted); }
.empty-state .bi { font-size: 2.2rem; color: #9aa6c1; display: block; margin-bottom: .5rem; }
.empty-state h3 { font-size: 1.05rem; color: #1d2433; font-weight: 600; }

.capability { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px dashed var(--sg-border); }
.capability:last-child { border-bottom: 0; }
.capability .bi-check-circle-fill { color: #1e7b40; }
.capability .bi-x-circle { color: #9aa6c1; }

/* Public site */
.sg-public-nav { background: #fff; border-bottom: 1px solid var(--sg-border); }
.hero { background: radial-gradient(1200px 400px at 10% -10%, #dfe7ff, transparent), radial-gradient(800px 300px at 90% 0%, #d9f6ef, transparent), #f7f9fe; padding: 5rem 0 4rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; }
.hero .lead { color: #42506d; max-width: 640px; }
.feature-card .bi { font-size: 1.6rem; color: var(--sg-primary); }
.loop-step { display: inline-block; padding: .35rem .7rem; margin: .2rem; border-radius: 999px; background: #fff; border: 1px solid var(--sg-border); font-size: .82rem; font-weight: 600; }
.auth-card { max-width: 440px; margin: 3rem auto; }
.footer { color: var(--sg-text-muted); font-size: .82rem; }

.progress-thin { height: 6px; }
.chart-box { position: relative; height: 260px; }
.diff-old { background: #fdecee; text-decoration: line-through; }
.diff-new { background: #e6f6ec; }
.prose { max-width: 820px; line-height: 1.65; }
.prose h1, .prose h2, .prose h3 { margin-top: 1.4rem; }
.notification-dot { position: absolute; top: 2px; right: 0; background: #d9480f; color: #fff; border-radius: 999px; font-size: .62rem; padding: 0 .3rem; }