:root { color-scheme:light; --ink:#10243f; --muted:#5f7087; --blue:#1264d8; --navy:#071c35; --aqua:#16b8a6; --line:#dce5ef; --bg:#f3f7fb; --white:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
* { box-sizing:border-box } [hidden] { display:none !important } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } html,body { min-height:100%; margin:0; overflow-x:clip } body { color:var(--ink); background:var(--bg) }
button,input,select { font:inherit } button { cursor:pointer } button:focus-visible,input:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid #ffbf47; outline-offset:3px } button:disabled { cursor:not-allowed; opacity:.62 }
.gate { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); background:linear-gradient(145deg,#06182e,#0a3263) }
.gate-art { position:relative; overflow:hidden; background:radial-gradient(circle at 22% 32%,rgba(22,184,166,.8),transparent 20%),radial-gradient(circle at 68% 58%,rgba(18,100,216,.75),transparent 24%),linear-gradient(135deg,#092747,#041427) }
.gate-art::before,.gate-art::after { content:""; position:absolute; inset:15%; border:1px solid rgba(255,255,255,.18); border-radius:50%; transform:rotate(-18deg) }.gate-art::after { inset:28% 8%; transform:rotate(28deg) }
.gate-art span { position:absolute; width:14px; height:14px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 9px rgba(255,255,255,.08) }.gate-art span:nth-child(1){left:22%;top:25%}.gate-art span:nth-child(2){left:62%;top:38%}.gate-art span:nth-child(3){left:38%;top:68%}.gate-art span:nth-child(4){left:78%;top:72%}
.gate-card { align-self:center; max-width:580px; padding:clamp(36px,6vw,88px); color:#fff }.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#071c35; background:linear-gradient(135deg,#52e2d0,#fff); font-weight:900; font-size:1.45rem; box-shadow:0 14px 36px rgba(0,0,0,.25) }
.brand-mark.small { width:36px; height:36px; border-radius:11px; font-size:1rem; flex:0 0 auto }.eyebrow { margin:0 0 7px; color:#2b6bbf; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase }.gate-card .eyebrow { margin-top:28px; color:#70ded0 }
.gate-card h1 { margin:0; max-width:8ch; font-size:clamp(2.8rem,6vw,5.4rem); line-height:.94; letter-spacing:-.055em }.lede { max-width:44ch; color:#c7d7e9; font-size:1.08rem; line-height:1.65 }
.boundary-note { display:flex; flex-direction:column; gap:4px; margin:28px 0; padding:16px 18px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.07) }.boundary-note strong { color:#70ded0 }.boundary-note span,.fine-print { color:#b9c9da; font-size:.86rem }
.auth-form { display:grid; gap:14px; margin:18px 0 }.auth-form label { display:grid; gap:6px; color:#dceaf7; font-size:.82rem; font-weight:750 }.auth-form input { width:100%; min-height:44px; border:1px solid rgba(255,255,255,.3); border-radius:9px; padding:0 12px; color:#071c35; background:#fff }
.primary,.secondary { border:0; border-radius:11px; padding:12px 16px; font-weight:750 }.primary { width:100%; color:#071c35; background:#61e2d2; box-shadow:0 10px 26px rgba(30,202,180,.24) }.secondary { color:#174b8c; background:#e8f1fb }.gate-error { color:#ffd6d6; font-weight:700 }
.workspace { min-height:100vh }.sidebar { position:fixed; inset:0 auto 0 0; z-index:5; width:270px; padding:24px 18px; overflow-y:auto; color:#dceaf7; background:var(--navy) }.sidebar-brand { display:flex; align-items:center; gap:11px; padding:0 7px; font-weight:850 }
.lab-chip,.lab-tag { display:inline-flex; border-radius:999px; font-size:.72rem; font-weight:800 }.lab-chip { margin:22px 7px; padding:7px 10px; color:#70ded0; background:rgba(22,184,166,.12) }
nav { display:grid; gap:5px } nav button { display:flex; gap:11px; width:100%; padding:11px 12px; border:0; border-radius:9px; color:#b8cadc; background:transparent; text-align:left } nav button:hover,nav button[aria-current="page"] { color:#fff; background:#153553 } nav button[aria-current="page"] { box-shadow:inset 3px 0 #42d8c6 }
.runtime-card { position:static; display:grid; gap:4px; margin-top:18px; padding:14px; border:1px solid #284765; border-radius:12px; color:#bcd0e3; font-size:.8rem }.runtime-card strong { color:#fff }.runtime-card small { color:#8fa8be }.content-shell { min-width:0; min-height:100vh; margin-left:270px }
.topbar { display:flex; align-items:center; gap:22px; min-height:92px; padding:18px clamp(22px,4vw,54px); border-bottom:1px solid var(--line); background:var(--white) }.topbar h1 { margin:0; font-size:1.6rem }.topbar .eyebrow { margin:0 }.selectors { display:flex; gap:12px; margin-left:auto }
.selectors label,.search-label { display:grid; gap:5px; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em } select,input[type="search"] { min-height:40px; border:1px solid #cdd9e5; border-radius:9px; padding:0 11px; color:var(--ink); background:#fff }
.icon-button { display:none; border:0; background:transparent; font-size:1.35rem }.lab-banner { display:flex; gap:10px; padding:10px clamp(22px,4vw,54px); color:#174b47; background:#dff8f4; font-size:.82rem }.view { min-width:0; padding:32px clamp(22px,4vw,54px) 60px }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px }.section-heading h2 { margin:0; font-size:clamp(1.7rem,3vw,2.35rem); letter-spacing:-.035em }.section-heading p:not(.eyebrow) { margin:7px 0 0; color:var(--muted) }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px }.metric,.panel { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(33,62,96,.05) }.metric { display:grid; gap:8px; padding:20px }.metric span,.metric small { color:var(--muted) }.metric strong { font-size:1.65rem }.metric small { line-height:1.4 }
.dashboard-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px }.panel { padding:22px }.panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }.panel h3 { margin:0 }.text-button { border:0; color:var(--blue); background:transparent; font-weight:750 }.lab-tag { padding:6px 9px; color:#174b47; background:#dff8f4 }
.site-list>div,.audit-list li { display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid #edf1f5 }.site-list span:first-child,.audit-list li span:nth-child(2) { display:grid; gap:3px; flex:1 }.site-list small,.audit-list small { color:var(--muted) }.audit-list { margin:0; padding:0; list-style:none }.audit-list time { width:42px; color:var(--muted); font-size:.78rem }
.status { display:inline-flex; align-items:center; gap:6px; width:max-content; border-radius:999px; padding:5px 8px; color:#40546c; background:#eef2f6; font-size:.72rem; font-weight:800; white-space:nowrap }.status.online,.status.authorized,.status.acknowledged,.status.success,.status.granted { color:#16604f; background:#dcf6ee }.status.attention,.status.pending { color:#79520a; background:#fff1ca }.status.offline,.status.denied,.status.error { color:#8a3030; background:#fde3e3 }.status.expired,.status.ineligible,.status.default-off,.status.not { color:#485d75; background:#e9eef4 }
.readiness { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; border-left:4px solid var(--blue) }.readiness p:not(.eyebrow) { margin-bottom:0; color:var(--muted); line-height:1.55 }.table-wrap { width:100%; min-width:0; overflow:auto; contain:layout paint inline-size; border:1px solid var(--line); border-radius:14px; background:#fff } table { width:100%; border-collapse:collapse; min-width:720px } th,td { padding:14px 16px; border-bottom:1px solid #e8edf3; text-align:left } th { color:#52677e; background:#f7f9fc; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em } td { font-size:.9rem } tbody tr:hover { background:#f4f8fc }
.search-label { max-width:430px; margin-bottom:14px }.state-card { display:grid; place-items:center; gap:8px; min-height:220px; padding:32px; border:1px dashed #b9c8d8; border-radius:16px; color:var(--muted); text-align:center; background:#fff }.state-card strong { color:var(--ink); font-size:1.1rem }.loading strong::before { content:""; display:inline-block; width:14px; height:14px; margin-right:10px; border:2px solid #b7c8db; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite }
.detail-trigger { border:0; color:var(--blue); background:transparent; font-weight:750; text-decoration:underline; text-underline-offset:3px }.detail-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px); margin:auto; padding:0; border:0; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 24px 80px rgba(2,18,37,.35) }.detail-dialog::backdrop { background:rgba(4,20,39,.68) }.detail-header { position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 24px 18px; border-bottom:1px solid var(--line); background:#fff }.detail-header h2 { margin:0; font-size:1.6rem }.detail-close { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border:1px solid #cbd8e5; border-radius:10px; color:var(--ink); background:#fff; font-size:1.65rem; line-height:1 }.detail-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:8px 24px }.detail-field { display:grid; gap:5px; padding:16px 0; border-bottom:1px solid #e8edf3 }.detail-field:nth-child(odd) { padding-right:18px }.detail-field span { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase }.detail-field strong { overflow-wrap:anywhere }.detail-boundary { margin:0; padding:18px 24px 24px; color:#174b47; background:#e8faf7; font-size:.86rem; font-weight:700 }
.boundary-grid,.preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px }
.boundary-card { display:grid; gap:7px; min-width:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#fff,#f2f7fc) }
.boundary-card span,.checksum-card>span { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase }
.boundary-card strong,.boundary-card small,.checksum-card strong { overflow-wrap:anywhere }.boundary-card small,.checksum-card small { color:var(--muted) }
.inventory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }.inventory-card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff }
.inventory-card h3 { margin:0 }.inventory-card dl,.recommendation dl,.preview-grid dl { margin:14px 0 0 }.inventory-card dl div,.recommendation dl div,.preview-grid dl div { display:grid; gap:4px; padding:10px 0; border-top:1px solid #e8edf3 }
dt { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase }dd { margin:0; overflow-wrap:anywhere }
.planner-note { margin:18px 0 0; padding:16px 18px; border-left:4px solid #2b7c75; border-radius:8px; color:#174b47; background:#e8faf7; line-height:1.5 }.planner-note.warning { border-left-color:#9d6d12; color:#65470e; background:#fff6dc }
.allocation-bars { display:grid; gap:18px }.allocation-bars>div { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,2fr) auto; align-items:center; gap:16px }.allocation-bars span { display:grid; gap:3px }.allocation-bars small { color:var(--muted) }.allocation-bars meter { width:100%; height:16px; accent-color:var(--blue) }.allocation-bars b { min-width:70px; text-align:right }
.policy-separation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px }.policy-separation article { display:grid; gap:5px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#f7f9fc }.policy-separation span { color:var(--muted); line-height:1.4 }
.checksum-card { display:grid; gap:7px; margin-bottom:16px }.checksum-card strong { color:var(--blue); font-size:1.3rem }.recommendation-list { display:grid; gap:14px }.recommendation { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,1.2fr); gap:12px 28px }.recommendation h3 { margin:8px 0 0; font-size:1rem; line-height:1.45 }.recommendation p { grid-column:1/-1; margin:0; color:var(--muted) }.reason-code { display:inline-block; padding:5px 8px; border-radius:6px; color:#174b47; background:#dff8f4; font-size:.68rem; font-weight:850; letter-spacing:.04em }.preview-grid .panel h3 { margin-top:0 }
.disabled-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px }.table-wrap small { color:var(--muted); line-height:1.45 }.table-wrap time { white-space:nowrap; font-size:.78rem }
.detail-trigger:disabled { color:#8295aa; cursor:not-allowed; text-decoration:none }
.event-sequence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0; list-style:none; counter-reset:event }.event-sequence li { min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; overflow-wrap:anywhere }.event-sequence li::before { counter-increment:event; content:counter(event); display:grid; place-items:center; width:25px; height:25px; margin-bottom:8px; border-radius:50%; color:#fff; background:var(--blue); font-weight:800 }
.consent-card { margin-bottom:18px; padding:22px; border:2px solid #2b7c75; border-radius:14px; background:#f2fffc }.consent-card h3 { margin-top:0 }.consent-card p { line-height:1.55 }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }.chip-list span { padding:7px 10px; border-radius:999px; color:#174b47; background:#dff8f4; font-size:.78rem; font-weight:750 }.privacy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }.privacy-grid ul { padding-left:20px }.manifest-table td { overflow-wrap:anywhere; max-width:260px }
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:980px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.selectors{margin-left:0}.topbar{flex-wrap:wrap}.inventory-grid{grid-template-columns:1fr 1fr}.recommendation{grid-template-columns:1fr}}
@media (max-width:720px){.gate{grid-template-columns:1fr}.gate-art{position:absolute;inset:0;opacity:.38}.gate-card{position:relative;padding:40px 24px}.gate-card h1{font-size:3rem}.sidebar{transform:translateX(-105%);transition:transform .2s;overflow-y:auto}.sidebar.open{transform:none;box-shadow:20px 0 50px rgba(0,0,0,.25)}.content-shell{margin-left:0}.icon-button{display:block}.topbar{gap:14px;padding:15px 18px}.topbar>div:nth-child(2){flex:1}.selectors{width:100%;display:grid;grid-template-columns:1fr 1fr}.lab-banner{padding:10px 18px;flex-direction:column;gap:2px}.view{padding:24px 18px 50px}.section-heading{display:grid}.section-heading .secondary{justify-self:start}.metric-grid{grid-template-columns:1fr 1fr}.metric{padding:16px}.metric strong{font-size:1.3rem}.readiness{align-items:flex-start;flex-direction:column}.table-wrap{max-width:100%;border-radius:12px}.panel{padding:18px}.boundary-grid,.preview-grid,.inventory-grid,.policy-separation{grid-template-columns:1fr}.allocation-bars>div{grid-template-columns:1fr}.allocation-bars b{text-align:left}.recommendation{grid-template-columns:1fr}}
@media (max-width:390px){.metric-grid{grid-template-columns:1fr}.selectors{grid-template-columns:1fr}.gate-card h1{font-size:2.65rem}}
@media (max-width:520px){.detail-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.detail-header{padding:18px}.detail-content{grid-template-columns:1fr;padding:4px 18px}.detail-field:nth-child(odd){padding-right:0}.detail-boundary{padding:16px 18px 20px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media (max-width:720px){.event-sequence{grid-template-columns:repeat(2,minmax(0,1fr))}.privacy-grid{grid-template-columns:1fr}}