:root {
  color-scheme: dark;
  --bg: #070b16;
  --sidebar: #080d1a;
  --surface: #0e1525;
  --surface-2: #111a2d;
  --surface-hover: #15213a;
  --line: rgba(143, 163, 196, 0.14);
  --line-strong: rgba(143, 163, 196, 0.22);
  --text: #f2f6ff;
  --muted: #8190aa;
  --muted-2: #596982;
  --aqua: #5ce7cd;
  --aqua-soft: rgba(92, 231, 205, 0.12);
  --purple: #918cf8;
  --purple-soft: rgba(145, 140, 248, 0.13);
  --amber: #f4b861;
  --red: #ff7185;
  --blue: #62b5ff;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 232px; flex-direction: column; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #090f1e 0%, #070b16 100%); }
.brand-row { display: flex; align-items: center; gap: 9px; padding: 0 8px 27px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-size: 17px; font-weight: 760; letter-spacing: -.025em; text-decoration: none; }
.brand-mark { position: relative; display: block; width: 28px; height: 28px; transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after, .brand-mark i { position: absolute; display: block; width: 11px; height: 19px; border: 2px solid var(--aqua); border-radius: 3px; content: ""; }
.brand-mark::before { top: 0; left: 1px; }
.brand-mark::after { right: 1px; bottom: 0; }
.brand-mark i:first-child { top: 4px; left: 8px; width: 9px; height: 9px; border-color: var(--purple); }
.brand-mark i:last-child { display: none; }
.beta, .new-badge { padding: 3px 5px; border: 1px solid rgba(92, 231, 205, .25); border-radius: 4px; color: var(--aqua); background: rgba(92, 231, 205, .08); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { padding: 2px 10px 7px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-label.second { padding-top: 24px; }
.nav-link { display: flex; min-height: 41px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: #8190aa; text-decoration: none; transition: .18s ease; }
.nav-link svg { width: 18px; height: 18px; }
.nav-link span { flex: 1; font-size: 13px; font-weight: 560; }
.nav-link em { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 5px; color: #8c9bb4; background: rgba(130, 148, 178, .1); font-size: 10px; font-style: normal; font-weight: 700; }
.nav-link:hover { color: #c8d4e7; background: rgba(255,255,255,.03); }
.nav-link.active { border-color: rgba(92, 231, 205, .09); color: var(--aqua); background: linear-gradient(90deg, rgba(92, 231, 205, .12), rgba(92, 231, 205, .035)); box-shadow: inset 2px 0 var(--aqua); }
.nav-link.active span { color: #dffbf6; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255,113,133,.1); }
.new-badge { flex: 0; }
.sidebar-bottom { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.runtime-card { margin: 0 4px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.runtime-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.runtime-line span { color: #b6c2d5; font-size: 10px; font-weight: 650; }
.runtime-line span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 7px var(--aqua); }
.runtime-line strong { color: var(--muted-2); font-size: 9px; }
.runtime-meter { height: 3px; margin: 10px 0 7px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.06); }
.runtime-meter span { display: block; width: 66%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--purple)); }
.runtime-card p { margin: 0; color: var(--muted-2); font-size: 9px; }
.profile { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 11px; padding: 10px 8px 3px; border: 0; border-top: 1px solid var(--line); color: inherit; background: transparent; text-align: left; }
.profile > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.profile strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile small { color: var(--muted-2); font-size: 9px; }
.profile > svg { width: 16px; color: var(--muted-2); }
.avatar, .workspace-icon { display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(145,140,248,.38); color: #c9c7ff; background: linear-gradient(135deg, rgba(145,140,248,.3), rgba(92,231,205,.12)); font-weight: 750; }
.avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 9px; }

.main { min-height: 100vh; margin-left: 232px; background: radial-gradient(circle at 80% -10%, rgba(82, 90, 185, .1), transparent 34%), var(--bg); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 0 27px; border-bottom: 1px solid var(--line); background: rgba(7, 11, 22, .88); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions, .workspace-picker { display: flex; align-items: center; }
.topbar-left { gap: 12px; color: var(--muted); }
.workspace-picker { gap: 7px; color: #acb8cc; font-size: 12px; font-weight: 650; }
.workspace-picker select { max-width: 180px; height: 30px; border: 0; outline: 0; color: #acb8cc; background: transparent; font: inherit; cursor: pointer; }
.workspace-picker select option { color: var(--text); background: #111a2d; }
.workspace-picker button { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--aqua); background: var(--aqua-soft); font-size: 13px; }
.workspace-icon { width: 27px; height: 27px; border-radius: 7px; font-size: 8px; }
.crumb { color: #344159; }
.topbar-left > strong { color: #8493ab; font-size: 12px; font-weight: 520; }
.topbar-actions { gap: 8px; }
.search-button { display: flex; width: 228px; height: 34px; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-2); background: rgba(255,255,255,.025); text-align: left; }
.search-button svg { width: 15px; }
.search-button span { flex: 1; font-size: 11px; }
kbd { padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--muted-2); background: rgba(255,255,255,.025); font-family: inherit; font-size: 8px; box-shadow: none; }
.icon-button, .more-button { display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.025); }
.icon-button { position: relative; width: 34px; height: 34px; border-radius: 7px; }
.icon-button svg { width: 16px; }
.notification-button i { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border: 1px solid var(--bg); border-radius: 50%; background: var(--red); }
.docs-button { display: flex; height: 34px; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 7px; color: #96a5bd; background: transparent; font-size: 11px; font-weight: 650; }
.docs-button svg { width: 13px; }
.menu-button { display: none; }
.content { width: min(100%, 1510px); margin: 0 auto; padding: 31px 28px 42px; }
.app-view[hidden] { display: none; }
.app-view.active { animation: viewIn .2s ease; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 9px !important; color: var(--aqua) !important; font-size: 9px !important; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow span { width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.welcome-row h1 { margin: 0; font-size: clamp(25px, 2.25vw, 33px); font-weight: 680; letter-spacing: -.035em; }
.welcome-row p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.welcome-actions { display: flex; gap: 9px; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-weight: 700; transition: .18s ease; }
.button svg { width: 15px; }
.button.ghost { color: #bcc7d8; background: rgba(255,255,255,.025); }
.button.ghost:hover { border-color: rgba(145,140,248,.35); color: #e1e0ff; background: var(--purple-soft); }
.button.primary { border-color: var(--aqua); color: #05130f; background: var(--aqua); box-shadow: 0 8px 26px rgba(92,231,205,.12); }
.button.primary:hover { background: #7ff2dc; transform: translateY(-1px); }
.record-dot { width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.panel, .metric-card, .command-strip { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,27,47,.94), rgba(12,19,34,.94)); box-shadow: inset 0 1px rgba(255,255,255,.012); }
.metric-card { position: relative; min-height: 139px; overflow: hidden; padding: 16px 17px; }
.metric-card::after { position: absolute; top: -50px; right: -50px; width: 110px; height: 110px; border-radius: 50%; background: rgba(92,231,205,.025); content: ""; filter: blur(5px); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; }
.metric-icon svg { width: 15px; }
.metric-icon.aqua { color: var(--aqua); background: var(--aqua-soft); }
.metric-icon.purple { color: var(--purple); background: var(--purple-soft); }
.metric-icon.amber { color: var(--amber); background: rgba(244,184,97,.11); }
.metric-icon.blue { color: var(--blue); background: rgba(98,181,255,.1); }
.trend { color: var(--muted-2); font-size: 9px; font-weight: 650; }
.trend.up { color: var(--aqua); }
.live-label { display: flex; align-items: center; gap: 5px; color: var(--aqua); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.live-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 7px var(--aqua); animation: pulse 2s infinite; }
.metric-card > p { margin: 13px 0 2px; color: var(--muted); font-size: 10px; }
.metric-card > strong { display: block; font-size: 25px; font-weight: 680; letter-spacing: -.035em; }
.metric-card > small { display: block; margin-top: 6px; overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mini-bars { position: absolute; right: 16px; bottom: 19px; display: flex; height: 24px; align-items: end; gap: 3px; opacity: .75; }
.mini-bars i { width: 3px; border-radius: 2px; background: var(--aqua); }
.mini-bars i:nth-child(1){height:30%}.mini-bars i:nth-child(2){height:50%}.mini-bars i:nth-child(3){height:42%}.mini-bars i:nth-child(4){height:70%}.mini-bars i:nth-child(5){height:54%}.mini-bars i:nth-child(6){height:85%}.mini-bars i:nth-child(7){height:68%}.mini-bars i:nth-child(8){height:100%}
.sparkline { position: absolute; right: 15px; bottom: 15px; width: 100px; height: 35px; }
.sparkline svg { width: 100%; height: 100%; overflow: visible; }
.sparkline path:not(.area) { stroke: var(--amber); stroke-width: 2; }
.sparkline .area { fill: url(#spark-fill); stroke: none; }
.progress-track { position: absolute; right: 17px; bottom: 23px; width: 76px; height: 4px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.06); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--aqua)); }

.insights-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(245px, .85fr); gap: 12px; margin-bottom: 12px; }
.panel { min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-header h2 { margin: 0; font-size: 13px; font-weight: 670; letter-spacing: -.01em; }
.panel-header p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; }
.traffic-panel { min-height: 324px; padding: 19px 20px 15px; }
.range-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.08); }
.range-tabs button { width: 33px; height: 23px; padding: 0; border: 0; border-radius: 4px; color: var(--muted-2); background: transparent; font-size: 8px; font-weight: 720; }
.range-tabs button.active { color: #c6fff4; background: rgba(92,231,205,.12); }
.chart-wrap { position: relative; height: 214px; padding: 19px 0 21px 37px; }
.chart-y { position: absolute; top: 20px; bottom: 25px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-2); font-size: 8px; }
.traffic-chart { width: 100%; height: 100%; overflow: visible; }
.grid-lines line { stroke: rgba(143,163,196,.09); stroke-dasharray: 3 5; stroke-width: 1; }
.chart-area { fill: url(#line-fill); stroke: none; }
.chart-line { fill: none; stroke: var(--aqua); stroke-width: 2; filter: url(#glow); vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--aqua); stroke: #12372f; stroke-width: 3; filter: url(#glow); vector-effect: non-scaling-stroke; }
.chart-x { position: absolute; right: 0; bottom: 2px; left: 37px; display: flex; justify-content: space-between; color: var(--muted-2); font-size: 8px; }
.chart-legend { display: flex; align-items: center; gap: 19px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 8px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 5px; height: 5px; border-radius: 50%; }
.chart-legend strong { color: #b7c2d3; font-size: 9px; }
.aqua-dot { background: var(--aqua); }.purple-dot { background: var(--purple); }
.chart-total { margin-left: auto; }
.chart-total strong { color: var(--text); }
.health-panel { padding: 19px 19px 15px; }
.more-button { width: 27px; height: 27px; border-radius: 6px; }
.more-button svg { width: 14px; }
.health-content { display: flex; flex-direction: column; align-items: center; padding: 15px 0 10px; text-align: center; }
.health-ring { position: relative; display: grid; width: 104px; height: 104px; place-items: center; border-radius: 50%; background: conic-gradient(var(--aqua) 0 var(--health-percent, 94%), rgba(255,255,255,.06) var(--health-percent, 94%) 100%); box-shadow: 0 0 35px rgba(92,231,205,.07); }
.health-ring::before { position: absolute; inset: 7px; border-radius: 50%; background: #101829; content: ""; }
.health-ring span { position: relative; z-index: 1; display: flex; align-items: baseline; }
.health-ring strong { font-size: 27px; font-weight: 670; }.health-ring small { color: var(--muted-2); font-size: 8px; }
.health-content > p { margin: 9px 0 3px; color: var(--aqua); font-size: 10px; font-weight: 740; }
.health-content > small { max-width: 175px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.health-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.health-stats div { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.health-stats div + div { border-left: 1px solid var(--line); }
.health-stats span { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted-2); font-size: 7px; }
.health-stats i { width: 4px; height: 4px; border-radius: 50%; }.health-stats .healthy{background:var(--aqua)}.health-stats .review{background:var(--amber)}.health-stats .critical{background:var(--red)}
.health-stats strong { font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; border: 0; color: var(--aqua); background: transparent; font-size: 9px; font-weight: 680; }
.text-link svg { width: 12px; transition: transform .16s; }.text-link:hover svg { transform: translateX(3px); }
.health-panel > .text-link { width: 100%; justify-content: center; padding-top: 11px; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(245px, .85fr); gap: 12px; }
.twins-panel { padding: 18px 19px 8px; }.library-link { padding: 5px 0; }
.table-wrap { margin-top: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 9px 9px; color: var(--muted-2); font-size: 8px; font-weight: 650; text-align: left; text-transform: uppercase; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; text-align: right; }
td { height: 57px; padding: 8px 9px; border-top: 1px solid var(--line); color: #8594ac; font-size: 9px; }
.twin-name { display: flex; min-width: 155px; align-items: center; gap: 9px; }
.twin-name > span:last-child { display: flex; flex-direction: column; gap: 3px; }.twin-name strong { color: #dbe4f2; font-size: 10px; }.twin-name small { color: var(--muted-2); font-size: 8px; }
.service-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; color: white; font-size: 12px; font-weight: 850; }
.service-icon.stripe { background: #6856e8; }.service-icon.salesforce{color:#052439;background:#37b3e8;font-size:14px}.service-icon.shopify{background:#6ca745}.service-icon.hubspot{background:#f07d4f}
.service-icon.generated-service { background: linear-gradient(135deg, #715fd8, #348f82); }
.health-score, .status { display: inline-flex; align-items: center; gap: 5px; }.health-score i, .status i { width: 5px; height: 5px; border-radius: 50%; }.health-score.good{color:#9ab0b9}.health-score.good i{background:var(--aqua)}.health-score.warn{color:#c5a269}.health-score.warn i{background:var(--amber)}
td code { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; color: #8d9bb2; background: rgba(0,0,0,.13); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.status { min-width: 58px; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 650; }.status.running{color:var(--aqua);background:rgba(92,231,205,.07)}.status.running i{background:var(--aqua);box-shadow:0 0 5px var(--aqua)}.status.stopped{color:var(--muted);background:rgba(255,255,255,.035)}.status.stopped i{background:var(--muted-2)}
.row-action { min-width: 41px; height: 25px; border: 1px solid rgba(92,231,205,.18); border-radius: 5px; color: var(--aqua); background: var(--aqua-soft); font-size: 8px; font-weight: 700; }.row-action.stop { border-color: var(--line); color: var(--muted); background: rgba(255,255,255,.025); }
.activity-panel { padding: 18px 19px 14px; }.activity-list { margin-top: 10px; }
.activity-item { position: relative; display: flex; gap: 10px; padding: 9px 0; }.activity-item:not(:last-child)::before { position: absolute; top: 39px; bottom: -5px; left: 13px; width: 1px; background: var(--line); content: ""; }
.activity-icon { position: relative; z-index: 1; display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid; border-radius: 7px; }.activity-icon svg{width:13px}.activity-icon.captured{color:var(--aqua);border-color:rgba(92,231,205,.17);background:var(--aqua-soft)}.activity-icon.drift{color:var(--amber);border-color:rgba(244,184,97,.17);background:rgba(244,184,97,.09)}.activity-icon.updated{color:var(--blue);border-color:rgba(98,181,255,.17);background:rgba(98,181,255,.09)}.activity-icon.generated{color:var(--purple);border-color:rgba(145,140,248,.17);background:var(--purple-soft)}
.activity-item > div { min-width: 0; }.activity-item p { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; }.activity-item p strong { font-size: 9px; }.activity-item p b { padding: 2px 4px; border-radius: 3px; color: var(--amber); background: rgba(244,184,97,.1); font-size: 6px; text-transform: uppercase; }.activity-item span:not(.activity-icon) { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.activity-item small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 7px; }.activity-link { width: 100%; justify-content: center; padding-top: 10px; border-top: 1px solid var(--line); }
.command-strip { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; }.terminal-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(92,231,205,.16); border-radius: 7px; background: var(--aqua-soft); }.terminal-icon::before { color: var(--aqua); content: ">_"; font-family: Consolas, monospace; font-size: 10px; font-weight: 800; }.command-strip > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.command-strip > div:nth-child(2) span { color: var(--muted-2); font-size: 7px; font-weight: 750; letter-spacing: .08em; }.command-strip code { overflow: hidden; color: #a9b6ca; font-family: Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.command-strip button { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: transparent; font-size: 8px; }.command-strip button svg{width:12px}

.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.workspace-heading h1 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 680; letter-spacing: -.04em; }
.workspace-heading > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.workspace-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.workspace-stat { display: flex; min-height: 108px; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,27,47,.94), rgba(12,19,34,.94)); }
.workspace-stat > span { color: var(--muted); font-size: 9px; }
.workspace-stat > strong { margin-top: 8px; font-size: 24px; letter-spacing: -.035em; }
.workspace-stat > small { margin-top: auto; color: var(--muted-2); font-size: 8px; }
.workspace-stat .policy-on { color: var(--aqua); }
.workspace-grid { display: grid; gap: 12px; }
.capture-layout { grid-template-columns: minmax(0, 2fr) minmax(255px, .72fr); }
.workspace-panel, .workflow-panel { padding: 19px; }
.small-refresh { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 8px; }
.capture-list { display: grid; gap: 8px; margin-top: 15px; }
.empty-state { display: grid; min-height: 265px; place-items: center; align-content: center; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; }
.empty-state > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: var(--aqua); background: var(--aqua-soft); }
.empty-state h3 { margin: 12px 0 3px; font-size: 12px; }.empty-state p { margin: 0; color: var(--muted-2); font-size: 9px; }
.capture-session { display: grid; grid-template-columns: minmax(160px, 1.3fr) .7fr .6fr auto; align-items: center; gap: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.capture-target { display: flex; min-width: 0; align-items: center; gap: 10px; }.capture-target > span { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--amber); background: rgba(244,184,97,.1); }.capture-target svg{width:15px}.capture-target div{min-width:0}.capture-target strong,.capture-meta strong{display:block;overflow:hidden;color:#d9e3f1;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.capture-target small,.capture-meta span{display:block;margin-top:3px;color:var(--muted-2);font-size:8px}
.capture-session-status { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }.capture-session-status.listening{color:var(--aqua);background:var(--aqua-soft)}.capture-session-status.completed{color:var(--muted);background:rgba(255,255,255,.04)}.capture-session-status i{width:5px;height:5px;border-radius:50%;background:currentColor}
.capture-actions { display: flex; justify-content: flex-end; gap: 5px; }.capture-actions button { height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 8px; }.capture-actions button.primary-mini{border-color:rgba(92,231,205,.24);color:var(--aqua);background:var(--aqua-soft)}.capture-actions button:disabled{opacity:.35;cursor:not-allowed}
.section-kicker { margin: 0 0 7px; color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.workflow-panel h2{margin:0;font-size:15px}.workflow-list{display:grid;gap:0;margin:18px 0;padding:0;list-style:none}.workflow-list li{position:relative;display:flex;gap:11px;padding:0 0 18px}.workflow-list li:not(:last-child)::after{position:absolute;top:27px;bottom:3px;left:13px;width:1px;background:var(--line);content:""}.workflow-list li>span{position:relative;z-index:1;display:grid;width:27px;height:27px;flex:0 0 auto;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--aqua);background:var(--surface);font-size:7px;font-weight:800}.workflow-list strong{font-size:9px}.workflow-list p{margin:3px 0 0;color:var(--muted-2);font-size:8px}.privacy-card{padding:12px;border:1px solid rgba(92,231,205,.13);border-radius:8px;background:rgba(92,231,205,.045)}.privacy-card strong{color:var(--aqua);font-size:9px}.privacy-card p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.5}

.library-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 11px 13px; }
.library-search { display: flex; min-width: 220px; flex: 1; align-items: center; gap: 8px; }.library-search svg{width:15px;color:var(--muted-2)}.library-search input{width:100%;height:30px;border:0;outline:0;color:var(--text);background:transparent;font-size:10px}.library-filter{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px}.library-filter button{height:24px;padding:0 9px;border:0;border-radius:4px;color:var(--muted-2);background:transparent;font-size:8px}.library-filter button.active{color:var(--aqua);background:var(--aqua-soft)}.library-toolbar>span{color:var(--muted-2);font-size:8px}
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.library-card { display: flex; min-height: 204px; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,27,47,.94), rgba(12,19,34,.94)); transition: .18s ease; }.library-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}.library-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.library-card-title{display:flex;align-items:center;gap:10px}.library-card-title div{display:flex;flex-direction:column;gap:2px}.library-card-title strong{font-size:11px}.library-card-title small{color:var(--muted-2);font-size:8px}.library-card-copy{margin:15px 0;color:var(--muted);font-size:8px;line-height:1.5}.library-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.library-card-stats span{display:flex;flex-direction:column;gap:3px;color:var(--muted-2);font-size:7px}.library-card-stats strong{color:#b8c4d6;font-size:10px}.library-card-actions{display:flex;gap:6px;padding-top:11px}.library-card-actions button{height:28px;flex:1;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:rgba(255,255,255,.025);font-size:8px}.library-card-actions .run-library{border-color:rgba(92,231,205,.2);color:var(--aqua);background:var(--aqua-soft)}
.registry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.registry-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,27,47,.94), rgba(12,19,34,.94)); }
.registry-card-header,.registry-card-meta,.registry-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.registry-card-title { display: flex; align-items: center; gap: 10px; }.registry-card-title>span{display:grid;width:34px;height:34px;place-items:center;border-radius:9px;color:var(--aqua);background:var(--aqua-soft);font-size:10px;font-weight:800}.registry-card-title div{display:flex;flex-direction:column;gap:3px}.registry-card-title strong{font-size:11px}.registry-card-title small{color:var(--muted-2);font-size:8px}.verified-badge{padding:4px 7px;border:1px solid rgba(92,231,205,.17);border-radius:999px;color:var(--aqua);background:var(--aqua-soft);font-size:7px;font-weight:750;letter-spacing:.04em}.verified-badge.invalid{color:var(--red);background:rgba(255,113,133,.07)}
.registry-card-meta{margin:16px 0;padding:11px 0;border-block:1px solid var(--line)}.registry-card-meta span{display:flex;flex-direction:column;gap:3px;color:var(--muted-2);font-size:7px}.registry-card-meta strong{color:#c5d1e2;font-size:9px}.registry-fingerprint{overflow:hidden;margin:0 0 14px;color:var(--muted-2);font:7px/1.5 Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.registry-card-actions button{height:29px;flex:1;border:1px solid rgba(92,231,205,.2);border-radius:6px;color:var(--aqua);background:var(--aqua-soft);font-size:8px}.registry-empty{display:grid;margin-top:12px;padding:42px;place-items:center;text-align:center}.registry-empty>span{display:grid;width:42px;height:42px;place-items:center;border-radius:11px;color:var(--aqua);background:var(--aqua-soft)}.registry-empty svg{width:20px}.registry-empty h2{margin:13px 0 5px;font-size:13px}.registry-empty p{margin:0;color:var(--muted-2);font-size:8px}
.file-picker { display: flex!important; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 7px; }.file-picker input{width:auto!important;height:auto!important;margin:0!important;border:0!important;background:transparent!important;font-size:8px}.import-modal textarea{font-family:"SFMono-Regular",Consolas,monospace;font-size:9px}.import-modal{width:min(560px,calc(100% - 28px))}

.heading-controls { display: flex; align-items: center; gap: 8px; }
.heading-controls select, .drift-controls select { height: 38px; padding: 0 31px 0 11px; border: 1px solid var(--line); border-radius: 7px; color: #c5d0df; background: var(--surface); font-size: 9px; }
.runtime-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.runtime-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(285px, .72fr); gap: 12px; margin-bottom: 12px; }
.runtime-log-panel, .rules-panel, .drift-panel { padding: 19px; }
.stream-live { display: inline-flex; align-items: center; gap: 5px; color: var(--aqua); font-size: 7px; font-weight: 800; letter-spacing: .09em; }.stream-live i{width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 7px var(--aqua);animation:pulse 2s infinite}
.runtime-table-wrap { position: relative; margin-top: 13px; overflow-x: auto; }
.runtime-table th { padding-top: 8px; }.runtime-table td{height:50px}.runtime-table td:first-child{font-weight:750}.runtime-table .request-path{max-width:220px;overflow:hidden;color:#a7b5c9;text-overflow:ellipsis}.runtime-table .method{color:var(--purple);font-family:Consolas,monospace;font-weight:750}.runtime-table .status-ok{color:var(--aqua)}.runtime-table .status-error{color:var(--red)}
.empty-state.compact { min-height: 225px; }.runtime-table-wrap.has-data .empty-state{display:none}
.rules-list { display: grid; gap: 8px; margin-top: 13px; }
.rule-item { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }.rule-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.rule-signature{display:flex;min-width:0;align-items:center;gap:7px}.rule-signature strong{color:var(--purple);font-family:Consolas,monospace;font-size:8px}.rule-signature code{overflow:hidden;color:#c7d1e1;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.rule-actions{display:flex;gap:4px}.rule-actions button{width:25px;height:24px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:transparent;font-size:8px}.rule-actions button:hover{color:var(--text);border-color:var(--line-strong)}.rule-actions .delete-rule:hover{color:var(--red)}.rule-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.rule-meta span{padding:3px 5px;border-radius:4px;color:var(--muted-2);background:rgba(255,255,255,.035);font-size:7px}.rules-empty{padding:23px 12px;border:1px dashed var(--line);border-radius:8px;color:var(--muted-2);font-size:8px;text-align:center}
.drift-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }.drift-heading h2{margin:0;font-size:14px}.drift-heading>div>p:last-child{margin:5px 0 0;color:var(--muted-2);font-size:8px}.drift-controls{display:flex;align-items:center;gap:7px}.drift-result{margin-top:15px}.empty-drift{display:flex;align-items:center;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:8px;color:var(--muted-2);background:rgba(255,255,255,.01)}.empty-drift span{color:var(--purple);font-size:18px}.empty-drift p{margin:0;font-size:8px}.drift-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.drift-metric{padding:11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.018)}.drift-metric span{display:block;color:var(--muted-2);font-size:7px}.drift-metric strong{display:block;margin-top:5px;font-size:16px}.drift-metric:first-child strong{color:var(--aqua)}.drift-details{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.drift-details span{padding:5px 7px;border-radius:5px;color:var(--muted);background:rgba(255,255,255,.035);font-size:7px}
.projects-layout { display: grid; grid-template-columns: minmax(225px, .62fr) minmax(0, 2fr); gap: 12px; }
.project-list { display: grid; align-content: start; gap: 8px; }
.project-card { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: inherit; background: linear-gradient(145deg, rgba(18,27,47,.94), rgba(12,19,34,.94)); text-align: left; transition: .16s ease; }.project-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}.project-card.active{border-color:rgba(92,231,205,.28);background:linear-gradient(135deg,rgba(92,231,205,.09),rgba(145,140,248,.05));box-shadow:inset 2px 0 var(--aqua)}.project-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.project-card strong{font-size:10px}.project-card em{color:var(--aqua);font-size:8px;font-style:normal}.project-card p{margin:8px 0;color:var(--muted);font-size:8px;line-height:1.45}.project-card small{color:var(--muted-2);font-size:7px}
.project-editor { padding: 19px; }.saved-indicator{color:var(--aqua);font-size:8px}.editor-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:10px;margin-top:17px}.project-editor label{display:block;color:#aab7ca;font-size:8px;font-weight:650}.project-editor input,.project-editor textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:7px;color:#dbe5f4;background:rgba(4,8,17,.36)}.project-editor input{height:37px;padding:0 10px}.project-editor textarea{padding:10px;resize:vertical;font-family:Consolas,monospace;font-size:9px;line-height:1.55}.editor-section{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,1.6fr);gap:20px;margin-top:17px;padding-top:17px;border-top:1px solid var(--line)}.editor-section h3{margin:0;font-size:10px}.editor-section>div:first-child p{margin:5px 0 0;color:var(--muted-2);font-size:8px;line-height:1.45}.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.policy-grid label,.twin-check{padding:10px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.015)}.policy-grid label>span{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted-2);font-size:8px}.policy-grid input{width:100%;margin:0}.twin-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.twin-check{display:flex!important;align-items:center;gap:8px;color:var(--muted)!important}.twin-check input{width:14px;height:14px;margin:0;accent-color:var(--aqua)}.twin-check span{display:flex;min-width:0;flex-direction:column;gap:2px}.twin-check strong{overflow:hidden;color:#d8e2f1;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.twin-check small{color:var(--muted-2);font-size:7px}.save-project{margin-top:18px}.project-empty{padding:22px;border:1px dashed var(--line);border-radius:10px;color:var(--muted-2);font-size:8px;text-align:center}
.rule-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 9px; }.rule-form-grid label{min-width:0}

.operations-actions{display:flex;align-items:center;gap:8px}.operations-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.operations-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:12px}.operations-panel{padding:19px}.operations-updated{color:var(--muted-2);font-size:7px}.latency-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}.latency-grid>div,.safeguard-grid>div{padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.016)}.latency-grid span,.safeguard-grid span,.process-memory span{display:block;color:var(--muted-2);font-size:7px;text-transform:uppercase;letter-spacing:.07em}.latency-grid strong{display:block;margin-top:7px;font-size:14px}.status-distribution{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}.status-distribution-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:8px}.status-distribution-head strong{color:var(--aqua);font-size:8px}.status-bar{display:flex;height:7px;margin-top:10px;overflow:hidden;border-radius:6px;background:rgba(255,255,255,.04)}.status-bar i{height:100%}.status-2xx{background:var(--aqua)}.status-3xx{background:#6f9cff}.status-4xx{background:var(--amber)}.status-5xx{background:var(--red)}.status-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;color:var(--muted-2);font-size:7px}.status-legend span{display:flex;align-items:center;gap:5px}.status-legend i{width:6px;height:6px;border-radius:50%}.operations-list{display:grid;margin-top:12px}.operations-list>div{display:flex;min-height:42px;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line)}.operations-list>div:first-child{border-top:0}.operations-list span{color:var(--muted);font-size:8px}.operations-list strong{max-width:60%;overflow:hidden;color:#dce6f3;font-size:8px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.safeguard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:17px}.safeguard-grid strong{display:block;margin-top:7px;color:var(--aqua);font-size:10px}.safeguard-grid small{display:block;margin-top:4px;color:var(--muted-2);font-size:7px;line-height:1.45}.process-memory{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:19px}.process-memory>div{min-width:0}.process-memory strong{display:block;margin-top:6px;font-size:15px}.process-memory small{display:block;margin-top:4px;color:var(--muted-2);font-size:7px}.memory-meter{height:5px;margin-top:15px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.05)}.memory-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--aqua),var(--purple));transition:width .25s ease}.process-footer{display:flex;justify-content:space-between;gap:12px;margin-top:17px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted-2);font-size:7px}.process-footer strong{color:var(--muted);font-weight:650}

.auth-pending .app-shell { visibility: hidden; }
.auth-gate { position: fixed; z-index: 120; inset: 0; display: grid; grid-template-columns: minmax(320px,.9fr) minmax(440px,1.1fr); min-height: 100vh; background: var(--bg); }
.auth-gate[hidden] { display: none; }
.auth-form [hidden] { display: none; }
.auth-visual { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: 39px 45px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 38% 47%,rgba(92,231,205,.11),transparent 30%),radial-gradient(circle at 85% 15%,rgba(145,140,248,.16),transparent 32%),linear-gradient(155deg,#0c1528,#070b16 72%); }.auth-visual:after{position:absolute;width:360px;height:360px;top:50%;left:22%;border:1px solid rgba(92,231,205,.08);border-radius:50%;content:"";transform:translate(-50%,-45%);box-shadow:0 0 0 65px rgba(92,231,205,.018),0 0 0 130px rgba(145,140,248,.012)}
.auth-brand { position: relative; z-index: 1; width:fit-content }.auth-visual>div{position:relative;z-index:1;max-width:470px}.auth-lock{display:grid;width:58px;height:58px;place-items:center;margin-bottom:25px;border:1px solid rgba(92,231,205,.3);border-radius:16px;color:var(--aqua);background:linear-gradient(135deg,rgba(92,231,205,.15),rgba(145,140,248,.1));font-size:12px;font-weight:850;box-shadow:0 18px 50px rgba(0,0,0,.28)}.auth-visual p{margin:0 0 13px;color:var(--aqua);font-size:8px;font-weight:800;letter-spacing:.12em}.auth-visual h2{margin:0;font-size:clamp(30px,3.6vw,49px);font-weight:650;letter-spacing:-.045em;line-height:1.05}.auth-visual ul{display:grid;gap:12px;margin:29px 0 0;padding:0;list-style:none;color:#91a0b8;font-size:10px}.auth-visual li{display:flex;align-items:center;gap:9px}.auth-visual li i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 7px var(--aqua)}.auth-visual>small{position:relative;z-index:1;color:var(--muted-2);font-size:9px}
.auth-form-wrap { display:grid;min-height:100vh;place-items:center;padding:36px;background:radial-gradient(circle at 100% 0,rgba(145,140,248,.06),transparent 35%) }.auth-form{width:min(100%,430px);padding:31px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(18,27,47,.86),rgba(10,16,29,.9));box-shadow:var(--shadow)}.auth-form h1{margin:0;font-size:28px;letter-spacing:-.04em}.auth-form>p:not(.modal-eyebrow):not(.auth-error){margin:9px 0 22px;color:var(--muted);font-size:10px;line-height:1.55}.auth-form label{display:block;margin-top:13px;color:#aab7ca;font-size:9px;font-weight:650}.auth-form input{width:100%;height:42px;margin-top:7px;padding:0 11px;border:1px solid var(--line-strong);border-radius:8px;color:var(--text);background:rgba(3,7,15,.42)}.auth-submit{width:100%;margin-top:19px}.auth-switch{display:block;margin:14px auto 0;border:0;color:var(--aqua);background:transparent;font-size:9px}.auth-error{margin:12px 0 0!important;padding:9px 10px;border:1px solid rgba(255,113,133,.2);border-radius:7px;color:#ff9cac;background:rgba(255,113,133,.07);font-size:8px}.auth-trust{display:flex;gap:9px;margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}.auth-trust>span{display:grid;width:20px;height:20px;place-items:center;border-radius:50%;color:#06140f;background:var(--aqua);font-size:9px;font-weight:900}.auth-trust p{display:flex!important;flex-direction:column;gap:2px;margin:0!important}.auth-trust strong{font-size:8px}.auth-trust small{color:var(--muted-2);font-size:7px}
.auth-notice{margin:12px 0 0!important;padding:9px 10px;border:1px solid rgba(92,231,205,.2);border-radius:7px;color:#b9fff1!important;background:rgba(92,231,205,.07);font-size:8px!important;line-height:1.5!important;overflow-wrap:anywhere}
.security-badge { display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid rgba(92,231,205,.18);border-radius:7px;color:var(--aqua);background:var(--aqua-soft);font-size:8px;font-weight:750 }.security-badge i{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 7px var(--aqua)}
.security-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.security-layout { display:grid;grid-template-columns:minmax(235px,.7fr) minmax(0,1.7fr);gap:12px;margin-bottom:12px }.account-panel,.api-key-panel,.audit-panel{padding:19px}.role-badge{padding:4px 6px;border-radius:4px;color:var(--purple);background:var(--purple-soft);font-size:7px;font-weight:800}.account-identity{display:flex;align-items:center;gap:12px;margin:20px 0;padding:14px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.018)}.account-avatar{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border:1px solid rgba(92,231,205,.28);border-radius:11px;color:var(--aqua);background:linear-gradient(135deg,rgba(92,231,205,.18),rgba(145,140,248,.12));font-size:10px;font-weight:800}.account-identity>div{display:flex;min-width:0;flex-direction:column;gap:3px}.account-identity strong{font-size:10px}.account-identity span:not(.account-avatar){overflow:hidden;color:var(--muted);font-size:8px;text-overflow:ellipsis}.account-identity small{color:var(--muted-2);font-size:7px}.logout-button{width:100%}
.verification-notice{display:grid;gap:8px;margin:-8px 0 14px;padding:11px;border:1px solid rgba(255,191,93,.18);border-radius:8px;background:rgba(255,191,93,.06)}.verification-notice>div{display:flex;flex-direction:column;gap:3px}.verification-notice strong{color:#ffd089;font-size:8px}.verification-notice span{color:var(--muted);font-size:7px}.verification-notice button{height:29px;border:1px solid rgba(255,191,93,.2);border-radius:6px;color:#ffd089;background:transparent;font-size:7px}.verification-notice code{padding:7px;border-radius:5px;color:#d8fff7;background:rgba(0,0,0,.22);font-size:7px;overflow-wrap:anywhere}
.api-key-create{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(230px,1.2fr) auto;align-items:end;gap:9px;margin-top:17px}.api-key-create>label{color:#aab7ca;font-size:8px;font-weight:650}.api-key-create input[type=text],.api-key-create>label>input{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:rgba(4,8,17,.36)}.scope-checks{display:flex;min-height:38px;align-items:center;gap:9px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:rgba(4,8,17,.25)}.scope-checks label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:7px}.scope-checks input{width:12px;height:12px;accent-color:var(--aqua)}.token-reveal{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:11px;border:1px solid rgba(92,231,205,.22);border-radius:8px;background:rgba(92,231,205,.06)}.token-reveal>div{display:flex;flex-direction:column;gap:2px}.token-reveal strong{color:var(--aqua);font-size:8px}.token-reveal span{color:var(--muted-2);font-size:7px}.token-reveal code{overflow:hidden;padding:7px;border-radius:5px;color:#d8fff7;background:rgba(0,0,0,.22);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.token-reveal button{height:29px;padding:0 8px;border:1px solid rgba(92,231,205,.22);border-radius:5px;color:var(--aqua);background:var(--aqua-soft);font-size:7px}.api-key-list{display:grid;gap:7px;margin-top:12px}.api-key-item{display:grid;grid-template-columns:minmax(120px,1fr) 1.4fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.014)}.api-key-item>div{display:flex;min-width:0;flex-direction:column;gap:3px}.api-key-item strong{font-size:8px}.api-key-item code{color:var(--aqua);font-size:7px}.api-key-scopes{display:flex;flex-wrap:wrap;gap:4px}.api-key-scopes span{padding:3px 5px;border-radius:4px;color:var(--muted-2);background:rgba(255,255,255,.035);font-size:6px}.api-key-item button{height:26px;padding:0 8px;border:1px solid var(--line);border-radius:5px;color:var(--red);background:transparent;font-size:7px}.keys-empty{padding:16px;border:1px dashed var(--line);border-radius:8px;color:var(--muted-2);font-size:8px;text-align:center}
.token-reveal[hidden] { display: none; }
.audit-list{display:grid;margin-top:12px}.audit-item{display:grid;grid-template-columns:minmax(125px,.8fr) minmax(130px,1fr) 1.4fr auto;align-items:center;gap:12px;min-height:48px;border-top:1px solid var(--line);color:var(--muted);font-size:8px}.audit-item strong{color:#cdd7e5;font-size:8px}.audit-item code{color:var(--purple);font-size:7px}.audit-item time{color:var(--muted-2);font-size:7px;text-align:right}
.team-panel{margin-bottom:12px;padding:19px}.team-access-note{padding:4px 6px;border-radius:4px;color:var(--aqua);background:var(--aqua-soft);font-size:7px;font-weight:800}.invite-create{display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,.8fr) auto;align-items:end;gap:9px;margin-top:17px}.invite-create label{color:#aab7ca;font-size:8px;font-weight:650}.invite-create input,.invite-create select{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid var(--line);border-radius:7px;color:var(--text);background:rgba(4,8,17,.36)}.invite-reveal{margin-bottom:15px}.team-columns{display:grid;grid-template-columns:1.3fr .9fr;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.team-columns h3{margin:0 0 9px;color:var(--muted-2);font-size:7px;letter-spacing:.09em;text-transform:uppercase}.member-list,.invitation-list{display:grid;gap:7px}.member-item{display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.014)}.member-avatar{display:grid;width:31px;height:31px;place-items:center;border-radius:8px;color:var(--aqua);background:var(--aqua-soft);font-size:8px;font-weight:800}.member-item>div,.invitation-item>div{display:flex;min-width:0;flex-direction:column;gap:3px}.member-item strong,.invitation-item strong{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.member-item strong em{margin-left:4px;color:var(--aqua);font-size:6px;font-style:normal}.member-item span:not(.member-avatar),.invitation-item span{overflow:hidden;color:var(--muted);font-size:7px;text-overflow:ellipsis;white-space:nowrap}.member-item small{color:var(--muted-2);font-size:7px}.member-item select{height:29px;padding:0 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:#0c1424;font-size:7px}.member-role-fixed{padding:4px 6px;border-radius:4px!important;color:var(--purple)!important;background:var(--purple-soft);font-size:6px!important;font-weight:800}.member-item button,.invitation-item button{height:27px;padding:0 8px;border:1px solid var(--line);border-radius:5px;color:var(--red);background:transparent;font-size:7px}.invitation-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.014)}
.invite-create[hidden],#pendingInvitesColumn[hidden],.panel[hidden],.verification-notice[hidden]{display:none}
.team-panel.read-only .team-columns{grid-template-columns:1fr}

.modal-backdrop { position: fixed; z-index: 60; inset: 0; background: rgba(2,5,11,.74); backdrop-filter: blur(8px); animation: fadeIn .16s ease; }
.modal, .command-palette { position: fixed; z-index: 70; top: 50%; left: 50%; width: min(470px, calc(100% - 28px)); transform: translate(-50%, -50%); border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(145deg, #121c31, #0b1221); box-shadow: 0 30px 100px rgba(0,0,0,.62); animation: popIn .2s ease; }
.modal { padding: 27px; }.modal-close { position: absolute; top: 15px; right: 15px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.025); }.modal-close svg{width:14px}.modal-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; color: var(--aqua); background: var(--aqua-soft); }.modal-icon.ai{color:var(--purple);background:var(--purple-soft)}.modal-icon svg{width:19px}.modal-eyebrow { margin: 16px 0 7px!important; color: var(--aqua)!important; font-size: 8px!important; font-weight: 750; letter-spacing: .1em; }.modal h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }.modal > p:not(.modal-eyebrow) { margin: 8px 0 19px; color: var(--muted); font-size: 10px; line-height: 1.55; }.modal label { display: block; margin-top: 12px; color: #aab7ca; font-size: 9px; font-weight: 650; }.modal input,.modal select,.modal textarea { width: 100%; margin-top: 6px; border: 1px solid var(--line-strong); border-radius: 7px; color: #dbe5f4; background: rgba(4,8,17,.45); }.modal input,.modal select{height:38px;padding:0 10px}.modal textarea{resize:vertical;padding:10px;line-height:1.45}.secure-note { display: flex; gap: 9px; margin-top: 14px; padding: 10px; border: 1px solid rgba(92,231,205,.13); border-radius: 7px; background: rgba(92,231,205,.045); }.secure-note > span { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #081711; background: var(--aqua); font-size: 9px; font-weight: 800; }.secure-note p{display:flex;flex-direction:column;gap:2px;margin:0}.secure-note strong{font-size:9px}.secure-note small{color:var(--muted);font-size:8px;line-height:1.4}.modal-action{width:100%;margin-top:17px}.suggestion-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.suggestion-row button{padding:6px 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:rgba(255,255,255,.02);font-size:8px}
.command-palette { top: 22%; overflow: hidden; transform: translate(-50%, 0); }.command-input { display: flex; height: 55px; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }.command-input svg{color:var(--aqua)}.command-input input{min-width:0;flex:1;border:0;outline:0;color:var(--text);background:transparent;font-size:12px}.command-results{padding:10px}.command-results>span{display:block;padding:3px 7px 8px;color:var(--muted-2);font-size:7px;font-weight:800;letter-spacing:.1em}.command-results button{display:flex;width:100%;align-items:center;gap:10px;padding:9px;border:0;border-radius:7px;color:var(--muted);background:transparent;text-align:left}.command-results button:hover,.command-results button:focus{color:var(--text);background:var(--surface-hover)}.command-results button>svg{width:17px;color:var(--aqua)}.command-results button span{display:flex;flex:1;flex-direction:column;gap:2px}.command-results strong{font-size:10px}.command-results small{color:var(--muted-2);font-size:8px}
.toast-region { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: grid; gap: 8px; }.toast { display: flex; min-width: 260px; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 8px; color: #dce7f5; background: #131d30; box-shadow: var(--shadow); font-size: 10px; animation: toastIn .25s ease; }.toast::before{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;color:#06140f;background:var(--aqua);content:"✓";font-size:9px;font-weight:900}.toast.leaving{opacity:0;transform:translateY(6px);transition:.25s}
.toast.error::before { color: white; background: var(--red); content: "!"; }
.button:disabled, .row-action:disabled { cursor: wait; opacity: .58; transform: none; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}@keyframes fadeIn{from{opacity:0}}@keyframes popIn{from{opacity:0;transform:translate(-50%,-47%) scale(.98)}}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}@keyframes viewIn{from{opacity:0;transform:translateY(5px)}}

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-grid, .bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .health-panel { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; }.health-panel>.panel-header{grid-column:1/-1}.health-content{grid-row:2/4}.health-panel>.text-link{border-top:1px solid var(--line)}
  .capture-layout, .runtime-layout, .operations-layout { grid-template-columns: 1fr; }.library-grid,.registry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.projects-layout{grid-template-columns:minmax(190px,.55fr) minmax(0,1.6fr)}.drift-heading{align-items:flex-start;flex-direction:column}.drift-controls{width:100%}.drift-controls select{min-width:0;flex:1}.security-layout{grid-template-columns:1fr}.api-key-create{grid-template-columns:1fr 1.4fr}.api-key-create>.button{grid-column:1/-1}.team-columns{grid-template-columns:1fr}.invite-create{grid-template-columns:1fr 1fr}.invite-create>.button{grid-column:1/-1}
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); box-shadow: 20px 0 50px rgba(0,0,0,.45); transition: transform .22s ease; }.sidebar.open{transform:translateX(0)}
  .main { margin-left: 0; }.menu-button{display:grid}.topbar{height:59px;padding:0 13px}.topbar-left{gap:8px}.workspace-picker span:not(.workspace-icon),.crumb,.topbar-left>strong{display:none}.search-button{width:34px;justify-content:center}.search-button span,.search-button kbd,.docs-button{display:none}.content{padding:23px 13px 32px}.welcome-row{align-items:flex-start;flex-direction:column}.welcome-actions{width:100%}.welcome-actions .button{flex:1}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric-card{min-height:130px}.traffic-panel{padding-inline:13px}.chart-legend{flex-wrap:wrap}.chart-total{width:100%;margin-left:0}.health-panel{display:block}.bottom-grid{grid-template-columns:minmax(0,1fr)}.command-strip code{max-width:210px}.toast-region{right:13px;bottom:13px;left:13px}.toast{min-width:0}.modal{padding:23px}
  .workspace-heading{align-items:flex-start;flex-direction:column}.workspace-heading>.button,.heading-controls,.operations-actions{width:100%}.operations-actions .button{flex:1}.heading-controls select,.heading-controls .button{min-width:0;flex:1}.workspace-stats{grid-template-columns:1fr}.runtime-stats,.security-stats,.registry-stats,.operations-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.capture-session{grid-template-columns:1fr 1fr}.capture-target{grid-column:1/-1}.capture-actions{grid-column:1/-1;justify-content:flex-start}.library-toolbar{align-items:stretch;flex-direction:column}.library-filter button{flex:1}.library-grid,.registry-grid,.projects-layout{grid-template-columns:1fr}.project-list{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-section{grid-template-columns:1fr}.drift-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.rule-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-gate{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-wrap{padding:18px}.api-key-create,.invite-create{grid-template-columns:1fr}.api-key-create>.button,.invite-create>.button{grid-column:auto}.audit-item{grid-template-columns:1fr 1fr}.audit-item time{text-align:left}.member-item{grid-template-columns:auto minmax(120px,1fr) auto}.member-item button{grid-column:2/-1}
}
@media (max-width: 480px) {
  .welcome-actions,.heading-controls,.drift-controls,.operations-actions{flex-direction:column}.metrics-grid,.runtime-stats,.security-stats,.operations-stats{grid-template-columns:1fr}.metric-card{min-height:118px}.insights-grid{display:block}.traffic-panel{margin-bottom:9px}.range-tabs button{width:30px}.chart-wrap{height:194px}.chart-x span:nth-child(even){display:none}.health-panel{margin-bottom:9px}.panel-header{align-items:flex-start}.twins-panel,.activity-panel,.runtime-log-panel,.rules-panel,.drift-panel,.account-panel,.api-key-panel,.audit-panel,.team-panel,.operations-panel{padding-inline:13px}.command-strip>div:nth-child(2) span{display:none}.command-strip code{max-width:180px}.suggestion-row button{flex:1}.modal{max-height:calc(100vh - 24px);overflow-y:auto}.heading-controls select,.heading-controls .button,.drift-controls select,.drift-controls .button,.operations-actions .button{width:100%}.project-list,.editor-grid,.policy-grid,.twin-check-grid,.rule-form-grid,.latency-grid,.safeguard-grid,.process-memory{grid-template-columns:1fr}.drift-summary{grid-template-columns:1fr 1fr}.auth-form{padding:23px}.auth-form h1{font-size:24px}.scope-checks{align-items:flex-start;flex-direction:column;padding-block:10px}.token-reveal,.api-key-item{grid-template-columns:1fr}.token-reveal button,.api-key-item button{width:100%}.audit-item{grid-template-columns:1fr;gap:4px;padding:10px 0}.member-item{grid-template-columns:auto 1fr}.member-item select,.member-role-fixed,.member-item button{grid-column:2;width:100%}
}