/* AI Command Center - compact dark hub. Pure CSS/SVG, system fonts, no remote assets, no inline styles. */
:root {
  color-scheme: dark;
  --bg0:#070a12; --bg1:#0a0f1b;
  --panel:#0e1524; --panel-hi:#141d31; --panel-solid:#0e1524;
  --line:#1e2a45; --line-hi:#30456f;
  --fg:#e6ebf7; --mute:#97a4c2; --dim:#667393;
  --cyan:#4cd3f5; --violet:#a07bff; --accent:#4cd3f5;
  --ok:#47d9a0; --bad:#ff7b92; --warn:#f6c25b;
  --grad:linear-gradient(135deg,#4cd3f5,#a07bff);
  --r:10px; --r-sm:7px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { background:var(--bg0); min-height:100%; }
body { margin:0; font:13.5px/1.45 var(--font); color:var(--fg); background:transparent; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sprite { position:absolute; width:0; height:0; }
.ico { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none !important; }
.plain { list-style:none; margin:0; padding:0; }
code { font:12px var(--mono); background:rgba(120,160,255,.1); padding:1px 5px; border-radius:4px; }

/* ---------- atmosphere (subtle) ---------- */
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(90% 60% at 50% -10%,#101b36 0%,var(--bg1) 45%,var(--bg0) 100%); }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(120,170,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.035) 1px,transparent 1px); background-size:44px 44px; }
.bg-stars { position:absolute; inset:0; background-repeat:repeat; opacity:.5; }
.bg-stars.s1 { background-image:radial-gradient(1px 1px at 20px 30px,#cfe8ff,transparent),radial-gradient(1px 1px at 140px 90px,#fff,transparent),radial-gradient(1px 1px at 260px 40px,#9fe8ff,transparent); background-size:320px 260px; animation:twinkle 8s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity:.25; } 50% { opacity:.7; } }

/* ---------- base controls ---------- */
.skip { position:absolute; left:8px; top:-70px; background:var(--panel-solid); padding:6px 12px; border:2px solid var(--cyan); border-radius:8px; z-index:100; color:var(--fg); }
.skip:focus { top:8px; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
h1,h2,h3,h4 { font-weight:650; letter-spacing:-.005em; margin:0; }
h2 { font-size:18px; line-height:1.25; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); font-weight:650; }
h4 { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:12px 0 4px; font-weight:650; }
button { font:inherit; font-size:13px; padding:6px 12px; border:1px solid transparent; border-radius:var(--r-sm); background:var(--grad); color:#041019; font-weight:650; cursor:pointer; margin-right:4px; transition:background .15s,border-color .15s,opacity .15s,filter .15s; display:inline-flex; align-items:center; gap:6px; }
button:hover:not(:disabled) { filter:brightness(1.12); }
button.secondary, button.ghost { background:rgba(120,160,255,.08); color:var(--fg); border-color:var(--line-hi); font-weight:550; }
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled) { background:rgba(76,211,245,.14); filter:none; }
button.danger { background:linear-gradient(135deg,#ff6b88,#ff9a6b); color:#2a0610; }
button.danger.outline { background:rgba(255,123,146,.08); color:#ffb4c1; border-color:rgba(255,123,146,.5); }
button.small { padding:3px 9px; font-size:12px; }
button.link { background:none; border:0; padding:0; margin:0; color:var(--cyan); text-align:left; font-weight:550; display:inline; }
button.link:hover:not(:disabled) { filter:none; text-decoration:underline; }
button:disabled { opacity:.4; cursor:not-allowed; }
button.cta { box-shadow:0 6px 20px -10px rgba(76,211,245,.8); }
label { display:block; margin-bottom:8px; color:var(--mute); font-size:12px; font-weight:550; }
label.inline { display:flex; gap:8px; align-items:center; margin:0; color:var(--fg); font-size:13px; }
input:not([type=checkbox]), select, textarea { display:block; width:100%; padding:6px 9px; margin-top:3px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(4,8,18,.7); color:var(--fg); font:inherit; }
input::placeholder { color:var(--dim); }
input:hover:not(:disabled), select:hover { border-color:var(--line-hi); }
input:focus-visible, select:focus-visible { border-color:var(--cyan); }
select option { background:#0e1524; color:var(--fg); }
input[type=checkbox] { width:15px; height:15px; accent-color:#4cd3f5; flex:none; }
.field { position:relative; }
.field > .help { position:absolute; right:0; top:-2px; }
.field.check { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; padding:7px 9px; border:1px dashed var(--line-hi); border-radius:var(--r-sm); }
.field.check > .help { position:static; }

/* help (?) */
button.help { padding:0; margin:0 0 0 4px; width:17px; height:17px; border-radius:50%; background:rgba(120,160,255,.1); color:var(--cyan); border:1px solid var(--line-hi); font-size:10.5px; font-weight:700; justify-content:center; vertical-align:middle; flex:none; line-height:1; }
button.help:hover:not(:disabled) { background:rgba(76,211,245,.25); filter:none; }
button.help[aria-expanded="true"] { background:var(--grad); color:#041019; border-color:transparent; }

/* ---------- banner + header ---------- */
.demo-banner { display:flex; gap:4px 10px; align-items:center; padding:4px clamp(10px,2vw,20px); background:rgba(246,194,91,.09); border-bottom:1px solid rgba(246,194,91,.28); color:#f0d9a8; font-size:12px; line-height:1.35; }
.demo-banner strong { color:#ffd27d; white-space:nowrap; }
.demo-banner span:not(.banner-dot) { flex:1; min-width:0; }
.demo-banner .help { margin-left:auto; color:#ffd27d; border-color:rgba(246,194,91,.5); }
.banner-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); flex:none; }
.top { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between; padding:7px clamp(10px,2vw,20px); border-bottom:1px solid var(--line); background:rgba(7,10,18,.7); }
.brand { display:flex; align-items:center; gap:9px; }
.brand-mark { width:24px; height:24px; }
.bm-ring { fill:none; stroke:url(#g-brand); stroke-width:2; } .bm-core { fill:url(#g-brand); } .bm-dot { fill:var(--cyan); }
.brand-text { display:flex; align-items:baseline; gap:8px; }
h1 { font-size:15px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-sub { font-size:12px; color:var(--mute); }
.top-status { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.tag { font-size:11.5px; padding:1px 8px; border:1px solid var(--line); border-radius:999px; color:var(--mute); font-weight:500; background:rgba(120,160,255,.05); }
h2 .tag { vertical-align:middle; margin-left:4px; }

/* ---------- shell + nav ---------- */
.shell { display:grid; grid-template-columns:176px minmax(0,1fr); gap:14px; padding:12px clamp(10px,2vw,20px) 32px; align-items:start; max-width:1500px; margin:0 auto; }
.nav { position:sticky; top:8px; display:flex; flex-direction:column; gap:1px; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.nav-title { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:0 6px 2px; display:flex; align-items:center; justify-content:space-between; }
.nav-group { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:8px 8px 2px; }
.nav-item { display:flex; align-items:center; gap:2px; }
.nav-item > button[data-view] { flex:1; margin:0; padding:5px 8px; background:transparent; color:var(--mute); border-color:transparent; font-weight:550; justify-content:flex-start; text-align:left; border-radius:6px; }
.nav-item > button[data-view] .nav-label { flex:1; }
.nav-item > button[data-view]:hover:not(:disabled) { background:rgba(76,211,245,.08); color:var(--fg); filter:none; }
.nav-item > button[aria-current="page"] { background:rgba(76,211,245,.12); color:#fff; border-color:var(--line-hi); box-shadow:inset 2px 0 0 var(--cyan); }
.nav-item > button[aria-current="page"] .ico { color:var(--cyan); }
.nav-item > .help { opacity:0; width:15px; height:15px; font-size:9.5px; } .nav-item:hover > .help, .nav-item:focus-within > .help, .nav-item > .help[aria-expanded="true"] { opacity:1; }
.count { font-size:11px; min-width:18px; text-align:center; padding:0 5px; border-radius:999px; background:rgba(120,160,255,.14); color:var(--mute); font-weight:600; }
.nav-note { margin:8px 4px 0; font-size:11px; color:var(--dim); border-top:1px solid var(--line); padding-top:6px; line-height:1.35; }
.mobile-nav, .mobile-nav-backdrop { display:none; }
main { min-width:0; } main:focus { outline:none; }
main > section > * + * { margin-top:10px; }
.page-head.row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.page-head.row .page-sub { flex:1 1 280px; min-width:0; }
.spacer { flex:1 1 0; }
.page-sub { color:var(--mute); margin:2px 0 0; max-width:80ch; font-size:12.5px; }
.msg { color:var(--mute); margin:6px 0 0; font-size:12.5px; } .msg.err { color:var(--bad); }
#banner:empty { display:none; }

/* ---------- panels ---------- */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; min-width:0; position:relative; }
.panel.compact { padding:10px 12px; }
.panel-head { display:flex; align-items:center; gap:2px; margin-bottom:8px; } .panel-head h3 { margin-right:2px; }
.panel-head .more { margin-left:auto; font-size:12px; }
.sub-head { margin-top:16px; }
.alert { padding:8px 12px; border-radius:var(--r-sm); border:1px solid rgba(246,194,91,.4); background:rgba(246,194,91,.07); color:#f0d9a8; font-size:12.5px; }
.alert.err { border-color:rgba(255,123,146,.5); background:rgba(255,123,146,.1); color:#ffd3db; }
.split { display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:10px; align-items:start; }
.split-wide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; }
.duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; }
.trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ---------- overview ---------- */
.truth { display:flex; flex-wrap:wrap; gap:2px 18px; font-size:12px; color:var(--mute); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot-on { background:var(--ok); }
.dot-off { background:transparent; border:2px dashed var(--mute); }
.dot-plan { background:transparent; border:2px dotted var(--violet); }
.mini li { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed var(--line); font-size:12.5px; min-width:0; }
.mini li:last-child { border-bottom:0; }
.mini li .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini li .dim { color:var(--dim); font-size:11.5px; }
.mini li button { margin:0; }
.mini .empty-mini { color:var(--mute); display:block; }
.sysinfo { display:grid; grid-template-columns:90px 1fr; gap:4px 8px; margin:0 0 8px; font-size:12.5px; } .sysinfo dd { color:var(--fg); }
details.more-details, details.panel { font-size:12.5px; }
details > summary { cursor:pointer; color:var(--mute); font-size:12px; font-weight:600; letter-spacing:.04em; padding:2px 0; list-style-position:inside; }
details > summary:hover { color:var(--fg); }
details[open] > summary { margin-bottom:6px; }

/* onboarding + flow (compact) */
.onb-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
.onb-steps li { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:start; padding:8px 10px; border-radius:var(--r-sm); background:rgba(4,8,18,.5); border:1px solid var(--line); }
.onb-steps li.done { border-color:rgba(71,217,160,.4); }
.onb-n { grid-row:span 3; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:750; font-size:12px; color:#041019; background:var(--grad); }
.onb-steps h4 { margin:0; font-size:13px; letter-spacing:0; color:var(--fg); text-transform:none; } .onb-steps p { margin:0; color:var(--mute); font-size:12px; }
.onb-steps button { justify-self:start; margin:4px 0 0; padding:2px 8px; font-size:12px; }
.flow { display:flex; align-items:flex-start; justify-content:space-between; gap:0; padding:4px 0; }
.flow li { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; position:relative; font-size:12px; color:var(--mute); }
.flow li:not(:last-child)::after { content:""; position:absolute; top:15px; left:calc(50% + 20px); right:calc(-50% + 20px); height:1px; background:repeating-linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px 10px); opacity:.6; }
.flow-ico { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(4,8,18,.8); border:1px solid var(--line-hi); color:var(--cyan); }
.flow li.optional .flow-ico { border-style:dashed; color:var(--violet); }
.flow b { color:var(--fg); font-weight:600; display:block; } .flow small { color:var(--dim); font-size:11px; }

/* ---------- agent team: compact chips + optional orbit ---------- */
.team-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.team-card { width:100%; margin:0; padding:5px 8px; display:flex; gap:8px; align-items:center; text-align:left; background:rgba(4,8,18,.5); color:var(--fg); border:1px solid var(--line); font-weight:500; }
.team-card:hover:not(:disabled) { border-color:var(--line-hi); background:var(--panel-hi); filter:none; }
.team-card .av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; border:1.5px dashed rgba(160,175,215,.55); color:#aebbdc; }
.team-card.planned .av { border-style:dotted; border-color:rgba(160,123,255,.7); color:#bfa6ff; } .team-card.active .av { border:1.5px solid var(--ok); color:#d9fff0; }
.team-card .av svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.team-card .tx { flex:1; min-width:0; } .team-card .tx b { display:block; font-size:12.5px; line-height:1.2; } .team-card .tx small { color:var(--mute); font-size:11px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-card .pill { display:none; }
.legend { display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11.5px; color:var(--mute); margin:8px 0 4px; }
.legend i { margin-right:4px; }
.stage { position:relative; aspect-ratio:1; width:100%; max-width:340px; margin-inline:auto; }
.orbits { position:absolute; inset:0; width:100%; height:100%; }
.orbit { fill:none; stroke:rgba(130,170,255,.22); stroke-width:1; stroke-dasharray:3 7; }
.links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.links line { stroke:rgba(150,170,220,.35); stroke-width:1.3; stroke-dasharray:4 6; }
.links line.on { stroke:rgba(71,217,160,.7); stroke-dasharray:none; }
.node { position:absolute; width:76px; height:76px; margin:-38px 0 0 -38px; padding:0; border-radius:50%; background:none; border:0; color:var(--fg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-weight:600; font-size:11px; text-align:center; }
.node .av { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,rgba(70,90,150,.9),rgba(14,20,42,.95)); border:2px dashed rgba(160,175,215,.55); color:#aebbdc; position:relative; }
.node.planned .av { border-style:dotted; border-color:rgba(160,123,255,.7); color:#bfa6ff; }
.node.active .av { border:2px solid var(--ok); color:#d9fff0; box-shadow:0 0 18px rgba(71,217,160,.4); }
.node .av svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.node .nm { max-width:84px; line-height:1.1; } .node .st-mini { font-size:9px; letter-spacing:.05em; color:var(--dim); font-weight:600; }
.node.active .st-mini { color:var(--ok); }
.node.center { width:96px; height:96px; margin:-48px 0 0 -48px; } .node.center .av { width:60px; height:60px; }
.node.n1 { left:50%; top:9%; } .node.n2 { left:84%; top:33%; } .node.n3 { left:72%; top:82%; } .node.n4 { left:28%; top:82%; } .node.n5 { left:16%; top:33%; } .node.center { left:50%; top:50%; }

/* ---------- drawer + popover + confirm ---------- */
.backdrop { position:fixed; inset:0; background:rgba(2,5,12,.65); z-index:40; opacity:0; transition:opacity .2s; } .backdrop.open { opacity:1; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(400px,100%); z-index:50; padding:18px; overflow-y:auto; background:linear-gradient(180deg,#121b33,#0a0f1d); border-left:1px solid var(--line-hi); box-shadow:-24px 0 60px -20px #000; transform:translateX(24px); opacity:0; transition:transform .25s,opacity .2s; }
.drawer.open { transform:none; opacity:1; }
.drawer-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; } .drawer-titles { flex:1; min-width:0; } .drawer-titles h2 { font-size:18px; margin-bottom:4px; }
.avatar-lg { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:2px dashed rgba(160,175,215,.6); color:#aebbdc; flex:none; }
.avatar-lg.planned { border-style:dotted; border-color:rgba(160,123,255,.7); color:#bfa6ff; } .avatar-lg.active { border:2px solid var(--ok); color:#d9fff0; }
.avatar-lg svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
button.close { width:30px; height:30px; padding:0; margin:0; justify-content:center; font-size:20px; line-height:1; background:rgba(120,160,255,.1); color:var(--fg); border:1px solid var(--line-hi); border-radius:50%; align-self:flex-start; }
.drawer-status { padding:8px 10px; border-radius:var(--r-sm); background:rgba(120,160,255,.08); border:1px solid var(--line); margin:0; }
.drawer ul { margin:0; padding-left:18px; color:#cdd7f2; } .drawer li { margin:3px 0; } .drawer p { margin:6px 0; }
.popover { position:fixed; z-index:60; width:min(320px,calc(100vw - 24px)); padding:12px 14px; border-radius:10px; background:#141d34; border:1px solid var(--line-hi); box-shadow:0 18px 40px -10px #000; opacity:0; transform:translateY(4px); transition:opacity .12s,transform .12s; }
.popover.open { opacity:1; transform:none; }
.popover h4 { margin:0 0 4px; font-size:14px; letter-spacing:0; text-transform:none; color:var(--fg); } .popover p { margin:5px 0; font-size:13px; color:#cdd7f2; }
.popover .ex { padding:6px 9px; border-left:2px solid var(--violet); background:rgba(160,123,255,.1); border-radius:0 6px 6px 0; font-size:12.5px; }
.popover button { margin:6px 0 0; }
.confirm { position:fixed; z-index:70; left:50%; top:30%; translate:-50% 0; width:min(420px,calc(100vw - 24px)); padding:16px 18px; border-radius:12px; background:#121a2f; border:1px solid rgba(255,123,146,.5); box-shadow:0 24px 60px -10px #000; }
.confirm h3 { font-size:14px; text-transform:none; letter-spacing:0; color:var(--fg); margin-bottom:6px; } .confirm p { margin:0 0 4px; color:#cdd7f2; } .confirm .actions { margin:12px 0 0; }

/* ---------- KPI cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:6px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; position:relative; }
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad); opacity:.55; border-radius:2px 0 0 2px; }
.card .n { font-size:20px; font-weight:750; line-height:1.1; }
.card .lbl { display:flex; align-items:center; color:var(--fg); font-weight:550; font-size:11.5px; margin-top:1px; line-height:1.2; } .card .lbl .help { margin-left:auto; }
.card .l { color:var(--mute); font-size:11px; line-height:1.3; }
.card:not(.warnc):not(.bad) .l { display:none; } /* the hint stays in the DOM, as a tooltip and in the (?) help; warnings stay visible */
.card.bad .n { color:var(--bad); } .card.warnc .n { color:var(--warn); }

/* ---------- tables, tags, status ---------- */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; vertical-align:middle; }
th { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); font-weight:600; }
tbody tr:hover, tbody tr.sel { background:rgba(76,211,245,.07); } tbody tr.sel td:first-child { box-shadow:inset 2px 0 0 var(--cyan); }
.st { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:11.5px; padding:0 8px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.st-succeeded { color:var(--ok); background:rgba(71,217,160,.08); } .st-failed, .st-cancelled { color:var(--bad); background:rgba(255,123,146,.08); }
.st-running { color:var(--cyan); background:rgba(76,211,245,.08); } .st-awaiting_approval, .st-queued { color:var(--warn); background:rgba(246,194,91,.08); }
.pill { font-size:11px; font-weight:650; padding:0 8px; border-radius:999px; border:1px solid rgba(246,194,91,.55); color:var(--warn); background:rgba(246,194,91,.07); white-space:nowrap; display:inline-block; }
.pill.neutral { border-color:var(--line-hi); color:var(--mute); background:rgba(120,160,255,.05); }
.pill.ok { border-color:rgba(71,217,160,.6); color:var(--ok); background:rgba(71,217,160,.07); } .pill.plan { border-style:dotted; border-color:rgba(160,123,255,.7); color:#c6b0ff; background:rgba(160,123,255,.07); }
.pill.mock { border-style:dashed; border-color:rgba(246,194,91,.6); color:var(--warn); }
.badge { font:11px var(--mono); padding:0 6px; border-radius:5px; background:rgba(76,211,245,.1); border:1px solid rgba(76,211,245,.3); color:#a9e8f8; white-space:nowrap; }
.badges { display:inline-flex; flex-wrap:wrap; gap:3px; }
dl { display:grid; grid-template-columns:110px 1fr; gap:3px 10px; margin:0 0 8px; } dt { color:var(--mute); } dd { margin:0; overflow-wrap:anywhere; }
.actions { margin:10px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .actions button { margin:0; } .actions button.help { margin-left:-2px; }
.hist { margin:4px 0 8px; color:var(--mute); font-size:12px; }
pre.logs { background:rgba(2,5,12,.7); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; max-height:240px; overflow:auto; margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 var(--mono); }
.lv-error { color:var(--bad); } .lv-warn { color:var(--warn); } .lv-info { color:#b7c4e4; }
.logbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .logbar label { flex:1; min-width:130px; margin-bottom:2px; }
.filters { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:8px; margin-bottom:6px; align-items:end; } .filters .help { margin-bottom:10px; }
.audit { max-height:520px; overflow:auto; font:12px var(--mono); } .audit li { padding:4px 0; border-bottom:1px dashed var(--line); overflow-wrap:anywhere; color:#c4d0ee; }
.audit li .seq { color:var(--cyan); margin-right:6px; } .audit li .raw { color:var(--dim); margin-left:6px; }
.login { max-width:420px; margin:32px auto; text-align:center; } .login form { text-align:left; margin-top:10px; display:grid; gap:10px; } .login form button { width:100%; justify-content:center; margin:2px 0 0; } .login-icon { width:44px; height:44px; margin:0 auto 8px; display:grid; place-items:center; border-radius:50%; background:var(--grad); color:#041019; } .login-icon .ico { width:22px; height:22px; }
.legacy-login { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); text-align:left; color:var(--mute); } .legacy-login summary { cursor:pointer; text-align:center; } .legacy-login form { margin-top:8px; }

/* ---------- approvals / providers / demo ---------- */
.how { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
.how li { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(4,8,18,.5); color:var(--mute); font-size:12.5px; }
.how b { width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#041019; font-size:11px; }
li.approval { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:8px 4px; border-bottom:1px dashed var(--line); } li.approval > span { display:flex; gap:6px; } li.approval button { margin:0; }
.provider-list > li { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:10px; }
.provider-list h3 { margin:0 0 4px; font-size:15px; text-transform:none; letter-spacing:0; color:var(--fg); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.provider-list ul, .provider-list ol { margin:3px 0 8px; padding-left:20px; color:#cdd7f2; }
#adapters li { padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:6px; background:rgba(4,8,18,.5); color:#cdd7f2; }
.steps { display:grid; gap:6px; } .steps li { counter-increment:s; padding:7px 10px 7px 42px; position:relative; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(4,8,18,.5); color:var(--mute); }
.steps { counter-reset:s; }
.steps li::before { content:counter(s); position:absolute; left:10px; top:50%; translate:0 -50%; width:22px; height:22px; border-radius:50%; border:2px solid var(--dim); text-align:center; line-height:18px; font-size:11px; font-weight:700; }
.steps li.done { color:var(--fg); border-color:rgba(71,217,160,.4); } .steps li.done::before { content:"\2713"; border-color:var(--ok); color:var(--ok); }
.verdict:not(:empty) { padding:8px 12px; border-radius:var(--r-sm); border:1px solid rgba(71,217,160,.5); background:rgba(71,217,160,.07); color:#cffbe6; }

/* ---------- empty states / first run ---------- */
.empty { padding:14px 0 4px; text-align:center; color:var(--mute); }
.empty-art { width:80px; height:60px; margin:0 auto 4px; display:block; }
.ea-frame { fill:rgba(120,160,255,.05); stroke:var(--line-hi); stroke-width:1.5; stroke-dasharray:5 5; } .ea-line { stroke:var(--dim); stroke-width:3; stroke-linecap:round; fill:none; } .ea-dot { fill:var(--cyan); }
.empty-li { list-style:none; text-align:center; padding:16px 8px; color:var(--mute); }
.empty-li .ico { width:30px; height:30px; color:var(--cyan); opacity:.8; display:block; margin:0 auto 4px; } .empty-li b { display:block; color:var(--fg); font-size:14px; margin-bottom:2px; }
.firstrun { border-style:dashed; border-color:var(--line-hi); } .firstrun p { color:var(--mute); margin:4px 0 8px; }

/* ---------- projects / resources ---------- */
.crumbs { display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center; margin-bottom:6px; font-size:12.5px; }
.crumbs .sep { color:var(--dim); }
.folders li { display:flex; align-items:center; gap:8px; padding:4px 2px; border-bottom:1px dashed var(--line); min-width:0; }
.folders li .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folders li.cand .nm { color:#fff; font-weight:600; }
.folders li button { margin:0; }
.regpanel { margin-top:8px; padding:10px; border:1px solid var(--line-hi); border-radius:var(--r-sm); background:rgba(4,8,18,.5); }
.regpanel h4 { margin:0 0 6px; }
.formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 10px; }
.tabs { display:flex; gap:4px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.tabs button { background:transparent; color:var(--mute); border:0; border-bottom:2px solid transparent; border-radius:0; margin:0; padding:5px 10px; font-weight:600; }
.tabs button[aria-selected="true"] { color:#fff; border-bottom-color:var(--cyan); }
.tabs button:hover:not(:disabled) { filter:none; color:var(--fg); }
ul.tree { list-style:none; margin:0; padding:0 0 0 14px; font:12.5px/1.6 var(--mono); } ul.tree.root { padding-left:0; }
ul.tree li { overflow-wrap:anywhere; } ul.tree .d { color:#a9e8f8; } ul.tree .f { color:#cdd7f2; } ul.tree .x { color:var(--dim); font-style:italic; }
.treebox { max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; background:rgba(2,5,12,.55); }
.auditgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; align-items:start; }
.findings { margin:0; padding:0; list-style:none; }
.findings li { padding:6px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.findings .ev { display:block; color:var(--dim); font:11px var(--mono); margin-top:2px; overflow-wrap:anywhere; }
.findings .ev q { color:#9fb0d6; quotes:"«" "»"; }
.findings .why { display:block; color:var(--mute); font-size:11.5px; margin-top:2px; }
.scope { font-size:12px; color:var(--mute); }
.adapters li { display:grid; grid-template-columns:minmax(150px,230px) auto 1fr; gap:4px 12px; align-items:start; padding:6px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.adapters li:last-child { border-bottom:0; } .adapters .nt { color:var(--mute); }

/* ---------- live operations / manager / notifications / catalog ---------- */
.operations-grid { grid-template-columns:minmax(240px,.65fr) minmax(360px,1.35fr); }
.ops-list li { display:flex; align-items:center; gap:7px; padding:7px 3px; border-bottom:1px dashed var(--line); }
.ops-list li.sel { background:rgba(55,230,255,.06); }
.ops-list small, .steer-list small { color:var(--dim); font:11px var(--mono); }
textarea { width:100%; min-height:74px; resize:vertical; }
.event-stream, .steer-list { list-style:none; padding:0; margin:5px 0 12px; max-height:330px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); }
.event-stream li { display:grid; grid-template-columns:64px minmax(125px,180px) 1fr; gap:7px; padding:5px 8px; border-bottom:1px dashed var(--line); font-size:11.5px; }
.event-stream time, .event-stream code { color:var(--dim); overflow-wrap:anywhere; }
.steer-list li { display:grid; grid-template-columns:auto 1fr; gap:5px 8px; padding:6px 8px; border-bottom:1px dashed var(--line); }
.steer-list small { grid-column:2; }
.compact-select { display:flex; gap:8px; align-items:center; max-width:480px; margin-bottom:8px; }
.chat-list { max-height:430px; overflow:auto; }
.chat-list li { max-width:82%; padding:8px 10px; margin:6px 0; border:1px solid var(--line); border-radius:var(--r-sm); }
.chat-list .chat-user { margin-left:auto; background:rgba(55,230,255,.07); }
.chat-list .chat-manager { background:rgba(154,107,255,.08); }
.chat-list p { margin:3px 0; white-space:pre-wrap; }
.chat-meta { color:var(--dim); font-size:11px; }
.chat-list code { font-size:10.5px; color:var(--dim); }
.chat-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; }
.chat-form .msg { grid-column:1/-1; }
.inline-form { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; }
.inline-form label { margin:0; }
.inline-form input[type=time] { width:105px; }
.notification-list li { display:grid; grid-template-columns:auto minmax(160px,.5fr) 1fr auto; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px dashed var(--line); }
.notification-list li.read { opacity:.62; }
.notification-list time { font:10.5px var(--mono); color:var(--dim); }
.integration-filters { grid-template-columns:1fr 180px 180px; }
.integration-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px; }
.integration-grid > li { border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--panel); }
.integration-grid h3 { margin:0; font-size:14px; text-transform:none; letter-spacing:0; color:var(--fg); }
.integration-grid p { margin:5px 0; }

/* ---------- responsive ---------- */
@media (max-width:1000px) { .split-wide { grid-template-columns:1fr; } }
@media (max-width:860px) {
  html { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .shell { display:block; padding:8px max(8px,env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; position:fixed; z-index:46; left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); top:auto; bottom:calc(68px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 88px - env(safe-area-inset-bottom)); padding:10px; overflow-y:auto; overscroll-behavior:contain; border-color:var(--line-hi); box-shadow:0 -18px 50px rgba(0,0,0,.5); transform:translateY(calc(100% + 90px)); opacity:0; visibility:hidden; pointer-events:none; transition:transform .2s ease,opacity .15s ease,visibility 0s linear .2s; }
  .nav.mobile-open { transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .nav-title, .nav-note { display:block; grid-column:1/-1; }
  .nav-title { min-height:28px; }
  .nav-title .help, .nav-item > .help, .nav-group { display:none; }
  .nav-group { grid-column:1/-1; }
  .nav-item { min-width:0; }
  .nav-item > button[data-view] { min-height:48px; width:100%; white-space:normal; padding:8px; }
  .nav-item > button[aria-current="page"] { box-shadow:inset 3px 0 0 var(--cyan); }
  .mobile-nav-backdrop { display:block; position:fixed; inset:0; z-index:45; background:rgba(2,5,12,.72); }
  .mobile-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; z-index:50; left:0; right:0; bottom:0; min-height:calc(64px + env(safe-area-inset-bottom)); padding:4px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left)); border-top:1px solid var(--line-hi); background:rgba(8,13,25,.97); box-shadow:0 -10px 30px rgba(0,0,0,.35); }
  .mobile-nav button { min-width:0; min-height:56px; margin:0; padding:5px 2px; flex-direction:column; justify-content:center; gap:2px; border-radius:8px; background:transparent; color:var(--mute); border:0; font-size:10.5px; font-weight:600; }
  .mobile-nav button .ico { width:20px; height:20px; }
  .mobile-nav button[aria-current="page"], .mobile-nav button[aria-expanded="true"] { color:#fff; background:rgba(76,211,245,.11); box-shadow:inset 0 2px 0 var(--cyan); }
  .mobile-nav button:hover:not(:disabled) { filter:none; background:rgba(76,211,245,.08); }
  .split, .filters { grid-template-columns:1fr; }
  .operations-grid, .chat-form { grid-template-columns:1fr; }
  .event-stream li { grid-template-columns:70px minmax(0,1fr); gap:4px 8px; padding:9px; }
  .event-stream li code { grid-column:1/-1; }
  .notification-list li { grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:10px 4px; }
  .notification-list li > span:not(.pill) { grid-column:1/-1; }
  .notification-list time { grid-column:2; grid-row:1; }
  .filters .help { justify-self:end; margin-bottom:0; }
  dl { grid-template-columns:90px 1fr; }
  .adapters li { grid-template-columns:1fr; }
  .flow { flex-direction:column; align-items:stretch; gap:4px; } .flow li { flex-direction:row; text-align:left; } .flow li:not(:last-child)::after { display:none; }
  .drawer { width:100%; border-left:0; padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .login { width:auto; max-width:400px; margin:18px auto; }
  input:not([type=checkbox]), select, textarea { min-height:44px; font-size:16px; padding:9px 10px; }
  textarea { min-height:96px; }
  button:not(.link), .tabs button, summary { min-height:44px; }
  button.help, button.close { width:44px; min-width:44px; height:44px; padding:0; }
  button.link { min-height:44px; padding-block:8px; align-items:center; }
  label.inline { min-height:44px; }
  input[type=checkbox] { width:22px; height:22px; }
  .field:not(.check) { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px; }
  .field:not(.check) > .help { position:static; margin-top:18px; }
  .chat-list li { max-width:94%; }
  .chat-form button[type=submit], #steer-form button[type=submit] { width:100%; justify-content:center; }
  .compact-select { max-width:none; align-items:stretch; flex-direction:column; gap:2px; }
  .compact-select select { margin-top:0; }
  .inline-form { align-items:stretch; }
  .inline-form label { flex:1 1 120px; }
  .inline-form input[type=time] { width:100%; }
  .inline-form button, #notifications-read { justify-content:center; }
  .ops-list li { min-height:52px; flex-wrap:wrap; }
  .team-card { min-height:52px; }
  .tabs { overflow-x:auto; overscroll-behavior-inline:contain; }
  .tabs button { white-space:nowrap; }
  :is(input,select,textarea,button):focus-visible { scroll-margin-bottom:calc(82px + env(safe-area-inset-bottom)); }
  body.keyboard-active .mobile-nav, body:has(input:focus,select:focus,textarea:focus) .mobile-nav { transform:translateY(110%); }
}
@media (max-width:600px) {
  .tablewrap { overflow:visible; }
  :is(#task-rows,#proj-rows,#res-rows,#demo-rows) { display:grid; gap:8px; }
  :is(#task-rows,#proj-rows,#res-rows,#demo-rows) tr { display:grid; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(4,8,18,.45); }
  :is(#task-rows,#proj-rows,#res-rows,#demo-rows) td { display:grid; grid-template-columns:minmax(84px,34%) minmax(0,1fr); gap:8px; align-items:center; min-height:38px; padding:3px 0; border-bottom:1px dashed var(--line); }
  :is(#task-rows,#proj-rows,#res-rows,#demo-rows) td:last-child { border-bottom:0; }
  :is(#task-rows,#proj-rows,#res-rows,#demo-rows) td::before { color:var(--dim); font-size:10px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
  table:has(> tbody:is(#task-rows,#proj-rows,#res-rows,#demo-rows)) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #task-rows td:nth-child(1)::before { content:"Название"; } #task-rows td:nth-child(2)::before { content:"Пример"; } #task-rows td:nth-child(3)::before { content:"Статус"; }
  #proj-rows td:nth-child(1)::before { content:"Название"; } #proj-rows td:nth-child(2)::before { content:"Папка"; } #proj-rows td:nth-child(3)::before { content:"Статус"; } #proj-rows td:nth-child(4)::before { content:"Теги"; }
  #res-rows td:nth-child(1)::before { content:"Тип"; } #res-rows td:nth-child(2)::before { content:"Название"; } #res-rows td:nth-child(3)::before { content:"Провайдер"; } #res-rows td:nth-child(4)::before { content:"Среда"; } #res-rows td:nth-child(5)::before { content:"Роль"; } #res-rows td:nth-child(6)::before { content:"Источник"; }
  #demo-rows td:nth-child(1)::before { content:"Задача"; } #demo-rows td:nth-child(2)::before { content:"План"; } #demo-rows td:nth-child(3)::before { content:"Статус"; } #demo-rows td:nth-child(4)::before { content:"Ожидается"; } #demo-rows td:nth-child(5)::before { content:"Проверка"; }
  .page-head.row { align-items:stretch; }
  .page-head.row .spacer { display:none; }
  .page-head.row > button:not(.help), .page-head.row > .tag { flex:1 1 auto; justify-content:center; }
  .actions > button:not(.help) { flex:1 1 140px; justify-content:center; }
  .auditgrid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .brand-sub { display:none; }
  .brand-text { display:block; }
  .top { padding:7px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left)); }
  .top-status { width:100%; }
  .top-status #logout { margin-left:auto; }
  .demo-banner { display:grid; grid-template-columns:auto minmax(0,1fr) 44px; gap:2px 8px; font-size:11.5px; padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left)); }
  .demo-banner strong { white-space:normal; align-self:center; }
  .demo-banner span:not(.banner-dot) { grid-column:1/-1; }
  .demo-banner .help { grid-column:3; grid-row:1; margin:0; }
  .banner-dot { align-self:center; }
  .stage .node .st-mini { display:none; }
  .panel, .panel.compact { padding:10px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trio, .duo, .team-list, .onb-steps, .how, .integration-grid { grid-template-columns:1fr; }
  dl, .sysinfo { grid-template-columns:minmax(82px,34%) minmax(0,1fr); }
  .notification-list { padding:10px; }
  .page-head.row > h2, .page-head.row > .page-sub { flex:1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}