/* ============================================================
   Helm — AI Agent Control Plane
   Premium SaaS · dark-first · glassmorphism · functional
   ============================================================ */

:root, [data-theme="dark"]{
  --bg-0:#08090C;
  --bg-1:#0C0E13;
  --bg-2:#10131A;
  --bg-3:#161A23;
  --bg-4:#1C2230;
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --t-1:#F2F4F8;
  --t-2:#B7BECC;
  --t-3:#7E8696;
  --t-4:#555C6B;
  --b-blue:#7C8CFF;
  --b-purple:#B388FF;
  --b-grad:linear-gradient(135deg,#7C8CFF 0%,#B388FF 100%);
  --ok:#5BD2A5;
  --warn:#FFB86B;
  --err:#FF7A8A;
  --info:#7CC8FF;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-glow:0 0 0 1px rgba(124,140,255,.25), 0 12px 40px rgba(124,140,255,.15);
  --bg-grad:
    radial-gradient(900px 600px at 80% -10%, rgba(179,136,255,.08), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(124,140,255,.08), transparent 60%),
    var(--bg-0);
}
[data-theme="light"]{
  --bg-0:#F6F7FB;
  --bg-1:#FFFFFF;
  --bg-2:#F2F4F9;
  --bg-3:#E9ECF4;
  --bg-4:#DDE2EC;
  --line:rgba(15,18,30,.07);
  --line-2:rgba(15,18,30,.12);
  --line-strong:rgba(15,18,30,.18);
  --t-1:#0E1119;
  --t-2:#3D4658;
  --t-3:#6B7488;
  --t-4:#98A0B2;
  --b-blue:#5566E8;
  --b-purple:#8E5CFF;
  --b-grad:linear-gradient(135deg,#5566E8 0%,#8E5CFF 100%);
  --shadow-1:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px rgba(15,18,30,.08);
  --shadow-glow:0 0 0 1px rgba(85,102,232,.3), 0 12px 40px rgba(85,102,232,.18);
  --bg-grad:
    radial-gradient(900px 600px at 80% -10%, rgba(142,92,255,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(85,102,232,.10), transparent 60%),
    var(--bg-0);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:13.5px;color:var(--t-1);
  background:var(--bg-grad);
  -webkit-font-smoothing:antialiased;letter-spacing:.005em;
}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12.5px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}

.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ============ SIDEBAR ============ */
.sidebar{
  border-right:1px solid var(--line);
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  padding:18px 14px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
[data-theme="light"] .sidebar{
  background:rgba(246,247,251,.78);
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px;cursor:pointer;border-radius:8px}
.brand:hover{background:var(--bg-2)}
.brand-mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(124,140,255,.15),rgba(179,136,255,.15));
  border:1px solid var(--line-2);
}
.brand-name{font-weight:600}
.brand-sub{font-size:11px;color:var(--t-3);margin-top:1px}
.live-pill{
  margin-left:auto;font-size:10px;padding:2px 7px;border-radius:99px;
  background:rgba(91,210,165,.08);color:var(--ok);
  border:1px solid rgba(91,210,165,.22);
  display:inline-flex;align-items:center;gap:5px;
}

.workspace-switch{
  margin:14px 4px 18px;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--line);cursor:pointer;color:var(--t-2);transition:.15s;
}
.workspace-switch:hover{border-color:var(--line-2);background:var(--bg-3)}
.ws-avatar{width:26px;height:26px;border-radius:7px;background:var(--b-grad);
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600}
.ws-meta{flex:1;min-width:0}
.ws-name{font-size:12.5px;color:var(--t-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-env{font-size:10.5px;color:var(--t-3);margin-top:1px}

.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--t-4)}
.dot-live{background:var(--ok);box-shadow:0 0 0 3px rgba(91,210,165,.15)}
.dot-warn{background:var(--warn);box-shadow:0 0 0 3px rgba(255,184,107,.15)}
.dot-err{background:var(--err);box-shadow:0 0 0 3px rgba(255,122,138,.15)}
.dot-paused{background:var(--t-4);box-shadow:0 0 0 3px rgba(120,120,120,.15)}

.nav{display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto;padding-right:2px}
.nav-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-4);padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--t-2);font-size:13px;cursor:pointer;transition:.12s}
.nav-item .ico{width:18px;text-align:center;color:var(--t-3);font-size:15px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.nav-item:hover{background:var(--bg-2);color:var(--t-1)}
.nav-item.active{background:linear-gradient(90deg,rgba(124,140,255,.14),rgba(179,136,255,.06));color:var(--t-1);box-shadow:inset 0 0 0 1px rgba(124,140,255,.2)}
.nav-item.active .ico{color:var(--b-blue)}
.nav-item .kbd{margin-left:auto}
.kbd{font-size:10px;color:var(--t-4);border:1px solid var(--line);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;background:var(--bg-2)}
.badge-mini{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:99px;background:var(--bg-3);color:var(--t-3);border:1px solid var(--line)}
.badge-mini.badge-warn{color:var(--warn);border-color:rgba(255,184,107,.3);background:rgba(255,184,107,.08)}
.badge-pulse{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:99px;background:rgba(124,140,255,.15);color:var(--b-blue);border:1px solid rgba(124,140,255,.3);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,140,255,.4)}50%{box-shadow:0 0 0 6px rgba(124,140,255,0)}}

.sidebar-foot{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.usage-card{border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:var(--bg-2)}
.usage-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t-2)}
.usage-val{color:var(--t-1);font-weight:500}
.usage-bar{height:4px;background:var(--bg-4);border-radius:99px;margin:7px 0 6px;overflow:hidden}
.usage-fill{height:100%;background:var(--b-grad);border-radius:99px;transition:width .8s cubic-bezier(.4,.1,.2,1)}
.usage-sub{font-size:10.5px;color:var(--t-4)}
.user-row{display:flex;align-items:center;gap:10px;padding:6px 4px}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3a4070,#5a3f8c);display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff}
.user-meta{flex:1;min-width:0}
.user-name{font-size:12.5px}
.user-role{font-size:10.5px;color:var(--t-4)}
.icon-btn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--t-3);border:1px solid var(--line);background:var(--bg-2);font-size:15px;transition:.12s;line-height:1}
.icon-btn:hover{color:var(--t-1);border-color:var(--line-2);background:var(--bg-3)}

/* ============ MAIN ============ */
.main{padding:14px 22px 40px;display:flex;flex-direction:column;gap:18px;min-width:0}

.topbar{
  display:flex;align-items:center;gap:14px;padding:10px 14px;
  background:rgba(10,12,18,.60);
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.28);
  position:sticky;top:10px;z-index:5;
}
[data-theme="light"] .topbar{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,18,30,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 24px rgba(15,18,30,.06);
}
.crumbs{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--t-3);font-size:12.5px;flex-wrap:wrap}
.crumb{color:var(--t-2);cursor:pointer}
.crumb:hover{color:var(--t-1)}
.crumb-current{color:var(--t-1);font-weight:500;cursor:default}
.crumb-sep{color:var(--t-4)}
.run-status{margin-left:6px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;border-radius:99px}
.run-status.warn{background:rgba(255,184,107,.08);color:var(--warn);border:1px solid rgba(255,184,107,.2)}
.run-status.err{background:rgba(255,122,138,.08);color:var(--err);border:1px solid rgba(255,122,138,.2)}
.run-status.ok{background:rgba(91,210,165,.08);color:var(--ok);border:1px solid rgba(91,210,165,.2)}

.topbar-actions{display:flex;align-items:center;gap:8px}
.search{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;width:280px;color:var(--t-3);cursor:pointer}
.search input{background:transparent;border:none;outline:none;color:var(--t-1);font-size:12.5px;flex:1;font-family:inherit;cursor:pointer}
.search:hover{border-color:var(--line-2)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:500;border:1px solid var(--line);background:var(--bg-2);color:var(--t-1);transition:.15s}
.btn:hover{border-color:var(--line-2);background:var(--bg-3)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--bg-2)}
.btn-primary{background:var(--b-grad);border:1px solid rgba(255,255,255,.12);color:#fff;box-shadow:0 6px 20px rgba(124,140,255,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-soft{background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.25);color:#cfd5ff}
[data-theme="light"] .btn-soft{color:#3a47b8}
.btn-soft:hover{background:rgba(124,140,255,.18)}
.btn-sm{padding:5px 9px;font-size:11.5px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ============ VIEW ROOT ============ */
.view{display:flex;flex-direction:column;gap:16px;animation:viewIn .25s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Page head */
.page-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;padding:0 4px}
.page-title{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:10px}
.version-pill{font-size:11px;font-weight:500;color:var(--t-2);padding:2px 8px;border-radius:99px;border:1px solid var(--line);background:var(--bg-2)}
.page-sub{margin:6px 0 0;color:var(--t-3);font-size:13px;max-width:560px}

.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;flex:1;max-width:760px}
.kpi{background:rgba(12,14,19,.60);border:1px solid var(--line);border-radius:12px;padding:11px 13px;position:relative;overflow:hidden;transition:.2s;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
[data-theme="light"] .kpi{background:rgba(255,255,255,.80);}
.kpi:hover{border-color:var(--line-2);transform:translateY(-1px)}
.kpi-label{font-size:11px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em}
.kpi-value{font-size:20px;font-weight:600;margin-top:3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi-unit{font-size:13px;color:var(--t-3);font-weight:500;margin-left:2px}
.kpi-trend{font-size:11px;margin-top:1px;color:var(--ok)}
.kpi-trend.bad{color:var(--warn)}
.kpi-spark{position:absolute;right:0;bottom:0;width:60%;height:30px;opacity:.85}
.kpi-spark svg{width:100%;height:100%}

/* ============ PANELS ============ */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.008) 40%,transparent 100%), rgba(12,14,19,.65);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
[data-theme="light"] .panel{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.80));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 32px rgba(15,18,30,.07);
}
.panel-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head.no-bd{border-bottom:none;padding-bottom:6px}
.panel-title-wrap{flex:1;min-width:0}
.panel-title{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel-sub{font-size:11.5px;color:var(--t-3);margin-top:2px;display:block}
.panel-actions{display:flex;gap:6px}

.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg-item{padding:5px 11px;font-size:11.5px;color:var(--t-3);border-radius:6px;transition:.12s}
.seg-item:hover{color:var(--t-2)}
.seg-item.active{background:var(--bg-3);color:var(--t-1);box-shadow:inset 0 0 0 1px var(--line-2)}

.ai-glow{background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(179,136,255,.4))}

/* Empty state */
.empty{padding:60px 20px;text-align:center;color:var(--t-3)}
.empty h3{color:var(--t-1);margin:0 0 6px;font-size:15px}

/* ============ TIMELINE VIEW ============ */
.body-grid{display:grid;grid-template-columns:1fr 360px;gap:16px}

.timeline-panel .panel-head{padding-bottom:10px}
.ruler{padding:14px 22px 10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.01)}
.ruler-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--t-4);margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.ruler-track{position:relative;height:18px;background:linear-gradient(90deg,rgba(124,140,255,.04) 0%,rgba(179,136,255,.06) 100%);border:1px solid var(--line);border-radius:6px}
.ruler-marker{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:var(--b-blue);box-shadow:0 0 0 3px rgba(124,140,255,.18),0 0 8px rgba(124,140,255,.6);cursor:pointer;transition:.2s}
.ruler-marker:hover{transform:translate(-50%,-50%) scale(1.4)}
.ruler-marker.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(255,184,107,.18),0 0 8px rgba(255,184,107,.5)}
.ruler-marker.err{background:var(--err);box-shadow:0 0 0 3px rgba(255,122,138,.18),0 0 8px rgba(255,122,138,.5)}
.ruler-marker.active{transform:translate(-50%,-50%) scale(1.5);outline:2px solid #fff;outline-offset:2px}

.trace{padding:10px 18px 18px;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:32px 1fr;position:relative}
.step-rail{position:relative}
.step-rail::before{content:"";position:absolute;left:15px;top:0;bottom:-4px;width:1px;background:linear-gradient(180deg,var(--line) 0%,var(--line-2) 50%,var(--line) 100%)}
.step:first-child .step-rail::before{top:18px}
.step:last-child .step-rail::before{bottom:auto;height:18px}
.step-dot{position:absolute;left:11px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--bg-3);border:1.5px solid var(--b-blue);box-shadow:0 0 0 3px rgba(124,140,255,.12);z-index:1;transition:.2s}
.step-dot.dot-warn{border-color:var(--warn);box-shadow:0 0 0 3px rgba(255,184,107,.15)}
.step-dot.dot-err{border-color:var(--err);box-shadow:0 0 0 3px rgba(255,122,138,.15)}

.step-card{margin:6px 0;padding:11px 14px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);transition:.15s;cursor:pointer}
.step-card:hover{border-color:var(--line-2);background:var(--bg-3)}
.step-card.selected{border-color:rgba(124,140,255,.45);box-shadow:0 0 0 1px rgba(124,140,255,.25),0 8px 28px rgba(124,140,255,.18);background:linear-gradient(180deg,rgba(124,140,255,.05),transparent),var(--bg-3)}
.step-warn .step-card{border-color:rgba(255,184,107,.25);background:rgba(255,184,107,.04)}
.step-err .step-card{border-color:rgba(255,122,138,.25);background:rgba(255,122,138,.04)}
.step-card.fixed{opacity:.55;border-style:dashed}
.step-card.fixed::after{content:"FIXED";position:absolute;top:8px;right:10px;font-size:9px;color:var(--ok);letter-spacing:.1em;font-weight:600}

.step-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;position:relative}
.step-kind{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-3);font-weight:600}
.step-tag{font-family:'JetBrains Mono',monospace;font-size:11px;padding:2px 7px;border-radius:5px;background:var(--bg-3);color:var(--t-2);border:1px solid var(--line)}
.step-tag.tag-model{color:var(--b-blue);background:rgba(124,140,255,.08);border-color:rgba(124,140,255,.2)}
.step-tag.tag-tool{color:var(--info);background:rgba(124,200,255,.08);border-color:rgba(124,200,255,.2)}
.step-time{font-size:11px;color:var(--t-4);font-family:'JetBrains Mono',monospace}
.step-meta{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.meta-pill{font-size:10.5px;padding:2px 7px;border-radius:99px;background:var(--bg-3);color:var(--t-3);border:1px solid var(--line);font-family:'JetBrains Mono',monospace}
.meta-pill.ok{color:var(--ok);background:rgba(91,210,165,.08);border-color:rgba(91,210,165,.2)}
.meta-pill.bad{color:var(--err);background:rgba(255,122,138,.08);border-color:rgba(255,122,138,.2)}

.step-body{color:var(--t-2);font-size:13px;line-height:1.55}
.step-body code{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg-3);padding:1px 5px;border-radius:4px;color:var(--b-blue)}

.step-expanded{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.step-expanded .ex{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.step-expanded .ex-l{font-size:10px;color:var(--t-4);text-transform:uppercase;letter-spacing:.06em}
.step-expanded .ex-v{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--t-1);margin-top:2px}

.anomaly{font-size:10.5px;padding:2px 7px;border-radius:99px;font-weight:500}
.anomaly-warn{background:rgba(255,184,107,.1);color:var(--warn);border:1px solid rgba(255,184,107,.25)}
.anomaly-err{background:rgba(255,122,138,.1);color:var(--err);border:1px solid rgba(255,122,138,.25)}

.bar{margin-top:8px;height:5px;background:var(--bg-3);border-radius:99px;position:relative;overflow:hidden}
.bar-fill{height:100%;background:var(--b-grad);border-radius:99px;transition:width .6s ease}
.bar-x{position:absolute;right:0;top:-16px;font-size:10px;color:var(--t-4);font-family:'JetBrains Mono',monospace}

.code-block{margin-top:6px;padding:10px 12px;background:#06070A;border:1px solid var(--line);border-radius:8px;white-space:pre;color:var(--t-2);overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55}
[data-theme="light"] .code-block{background:#0E1119;color:#cdd2dc}
.c-key{color:var(--b-blue)}
.c-str{color:var(--ok)}
.c-num{color:var(--warn)}

.hl-bad{background:rgba(255,122,138,.15);color:#FFC0C8;padding:0 4px;border-radius:3px;border-bottom:1px dashed var(--err)}
[data-theme="light"] .hl-bad{color:#a3263c}

.inline-fix{margin-top:9px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--t-3)}
.chip-fix{font-size:11.5px;padding:4px 9px;border-radius:99px;background:rgba(124,140,255,.08);color:#cfd5ff;border:1px solid rgba(124,140,255,.22);transition:.12s}
[data-theme="light"] .chip-fix{color:#3a47b8}
.chip-fix:hover{background:rgba(124,140,255,.18)}
.chip-fix.applied{background:rgba(91,210,165,.1);color:var(--ok);border-color:rgba(91,210,165,.3)}

/* ============ INSIGHTS ============ */
.insights-panel{display:flex;flex-direction:column;align-self:start;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
.insights-panel .panel-head{padding-bottom:14px}
.insight{margin:10px 14px 0;padding:12px 13px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);transition:.15s}
.insight:hover{border-color:var(--line-2)}
.insight-warn{border-color:rgba(255,184,107,.22);background:linear-gradient(180deg,rgba(255,184,107,.04),transparent 80%),var(--bg-2)}
.insight-err{border-color:rgba(255,122,138,.22);background:linear-gradient(180deg,rgba(255,122,138,.05),transparent 80%),var(--bg-2)}
.insight-ai{border-color:rgba(124,140,255,.25);background:linear-gradient(180deg,rgba(124,140,255,.06),rgba(179,136,255,.04) 60%,transparent),var(--bg-2);box-shadow:var(--shadow-glow)}
.insight.applied{opacity:.55;background:var(--bg-2)}
.insight.applied::before{content:"✓ Applied";display:block;font-size:10px;color:var(--ok);letter-spacing:.08em;font-weight:600;margin-bottom:6px}
.insight-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.insight-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--warn)}
.insight-tag.tag-err{color:var(--err)}
.insight-tag.tag-cost{color:var(--info)}
.insight-tag.tag-ai{background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.insight-impact{font-size:10px;color:var(--t-4)}
.insight-title{font-size:13px;font-weight:500;color:var(--t-1);line-height:1.4}
.insight-title b{color:var(--t-1)}
.insight-body{font-size:12px;color:var(--t-3);line-height:1.55;margin-top:5px}
.insight-body code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--b-blue);background:var(--bg-3);padding:1px 4px;border-radius:3px}
.insight-actions{margin-top:10px;display:flex;gap:6px}

.ai-summary{margin:14px;padding:13px;border-radius:12px;background:linear-gradient(135deg,rgba(124,140,255,.09),rgba(179,136,255,.05));border:1px solid rgba(124,140,255,.2);position:relative}
.ai-summary-head{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--t-2);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.ai-summary p{margin:0;font-size:12.5px;line-height:1.6;color:var(--t-2)}
.ai-summary p b{color:var(--t-1)}

/* ============ RUNS LIST ============ */
.runs-toolbar{display:flex;gap:8px;align-items:center;padding:0 4px;flex-wrap:wrap}
.runs-table{width:100%;border-collapse:separate;border-spacing:0}
.runs-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t-4);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:500;background:rgba(255,255,255,.01)}
.runs-table td{padding:10px 14px;font-size:12.5px;border-bottom:1px solid var(--line);vertical-align:middle}
.runs-table tbody tr{cursor:pointer;transition:.12s}
.runs-table tbody tr:hover{background:var(--bg-2)}
.runs-table tbody tr.new-row{animation:rowIn .6s ease}
@keyframes rowIn{from{background:rgba(124,140,255,.18)}to{background:transparent}}
.runs-table .mono-cell{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--t-2)}
.run-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:2px 8px;border-radius:99px}
.run-pill.ok{background:rgba(91,210,165,.08);color:var(--ok);border:1px solid rgba(91,210,165,.2)}
.run-pill.warn{background:rgba(255,184,107,.08);color:var(--warn);border:1px solid rgba(255,184,107,.2)}
.run-pill.err{background:rgba(255,122,138,.08);color:var(--err);border:1px solid rgba(255,122,138,.2)}
.run-pill.live{background:rgba(124,140,255,.1);color:var(--b-blue);border:1px solid rgba(124,140,255,.25);animation:pulse 1.5s infinite}

.filter-chip{font-size:11.5px;padding:5px 10px;border-radius:99px;background:var(--bg-2);color:var(--t-2);border:1px solid var(--line);cursor:pointer;transition:.12s}
.filter-chip:hover{border-color:var(--line-2)}
.filter-chip.active{background:rgba(124,140,255,.12);color:#cfd5ff;border-color:rgba(124,140,255,.3)}

/* ============ AGENTS GRID ============ */
.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.agent-card{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:.18s;position:relative;overflow:hidden}
.agent-card:hover{border-color:rgba(124,140,255,.3);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.agent-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.agent-icon{width:34px;height:34px;border-radius:9px;background:var(--b-grad);display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
.agent-name{font-size:14px;font-weight:600}
.agent-version{font-size:11px;color:var(--t-3)}
.agent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.agent-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.agent-stat-l{font-size:10px;color:var(--t-4);text-transform:uppercase;letter-spacing:.06em}
.agent-stat-v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.agent-status{position:absolute;top:14px;right:14px;font-size:10.5px;padding:2px 8px;border-radius:99px}

/* ============ GRAPH ============ */
.graph-panel{display:flex;flex-direction:column}
.graph-wrap{position:relative;flex:1;min-height:420px;padding:8px 10px 16px}
.graph-svg{width:100%;height:100%}
.node-label{font-family:'Inter',sans-serif;font-size:9.5px;font-weight:500;fill:#fff;letter-spacing:.02em}
[data-theme="light"] .node-label{fill:#fff}
.node-pulse{fill:var(--ok);animation:nodePulse 1.8s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.4;r:4}50%{opacity:1;r:5.5}}
.graph-legend{position:absolute;bottom:14px;left:18px;display:flex;gap:14px;font-size:11px;color:var(--t-3)}
.lg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.lg-blue{background:var(--b-blue)}
.lg-purple{background:var(--b-purple)}
.lg-warn{background:var(--warn)}
.flow-particle{fill:var(--b-blue);filter:drop-shadow(0 0 4px rgba(124,140,255,.8))}

/* ============ SIM ============ */
.sim-panel .sim-grid{display:grid;grid-template-columns:1fr 130px 1fr;gap:14px;padding:16px 18px;align-items:stretch}
.sim-col{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:12px}
.sim-col-new{background:linear-gradient(135deg,rgba(124,140,255,.08),rgba(179,136,255,.05));border-color:rgba(124,140,255,.25)}
.sim-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sim-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-3);font-weight:600}
.sim-tag.tag-new{background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sim-name{font-size:11px;color:var(--t-4);font-family:'JetBrains Mono',monospace}
.sim-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;color:var(--t-3);border-bottom:1px dashed var(--line)}
.sim-row:last-child{border-bottom:none}
.sim-row b{color:var(--t-1);font-weight:500;font-variant-numeric:tabular-nums}
.sim-diff{display:flex;flex-direction:column;justify-content:center;gap:7px;font-size:11.5px;color:var(--t-3);text-align:center;font-family:'JetBrains Mono',monospace}
.diff-line.up{color:var(--ok)}
.diff-line.down.good{color:var(--ok)}
.diff-line.up.bad{color:var(--warn)}
.sim-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:rgba(255,255,255,.01);flex-wrap:wrap;gap:10px}
.sim-note{font-size:11px;color:var(--t-4)}
.sim-actions{display:flex;gap:8px}

.sim-controls{padding:14px 18px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:rgba(255,255,255,.01)}
.sim-control-l{font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:block}
select.sim-input,input.sim-input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--t-1);font-family:inherit;font-size:12.5px;outline:none;transition:.12s}
select.sim-input:focus,input.sim-input:focus{border-color:rgba(124,140,255,.4)}
textarea.sim-input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--t-1);font-family:'JetBrains Mono',monospace;font-size:11.5px;outline:none;min-height:70px;resize:vertical}

/* ============ GUARDRAILS ============ */
.guard-list{padding:8px 10px 14px}
.guard-row{display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:.12s}
.guard-row:hover{background:var(--bg-2)}
.guard-icon{font-size:11px;color:var(--t-4)}
.guard-icon.ok{color:var(--ok)}
.guard-icon.warn{color:var(--warn)}
.guard-icon.err{color:var(--err)}
.guard-name{font-size:13px;font-weight:500}
.guard-desc{font-size:11.5px;color:var(--t-3);margin-top:2px}
.guard-stat{text-align:right;min-width:50px}
.guard-num{font-size:14px;font-weight:600;color:var(--t-1);font-family:'JetBrains Mono',monospace}
.guard-num.warn{color:var(--warn)}
.guard-num.err{color:var(--err)}
.guard-num-l{font-size:10px;color:var(--t-4);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.switch{width:30px;height:18px;border-radius:99px;background:var(--bg-4);position:relative;cursor:pointer;transition:.18s;border:1px solid var(--line)}
.switch span{position:absolute;left:2px;top:1px;width:14px;height:14px;border-radius:50%;background:var(--t-3);transition:.18s}
.switch.on{background:linear-gradient(90deg,#4a55b8,#7a55b8);border-color:rgba(124,140,255,.4)}
.switch.on span{left:14px;background:#fff;box-shadow:0 0 0 2px rgba(124,140,255,.2)}

/* ============ SCORECARD ============ */
.scorecard{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),var(--bg-1);border:1px solid var(--line);border-radius:16px;padding:14px 18px 18px;box-shadow:var(--shadow-1)}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
.score-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.score-head{display:flex;justify-content:space-between;align-items:baseline}
.score-head span{font-size:11.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em}
.score-head b{font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.score-chart{width:100%;height:50px}

.foot{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:11px;color:var(--t-4)}

/* ============ COMMAND PALETTE ============ */
.palette-backdrop{position:fixed;inset:0;background:rgba(4,5,10,.55);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:100;animation:fadeIn .15s ease}
[data-theme="light"] .palette-backdrop{background:rgba(200,205,220,.40);}
.palette-backdrop.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.palette{width:560px;max-width:90vw;background:rgba(11,14,21,.78);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(124,140,255,.18);overflow:hidden;animation:popIn .18s ease;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
[data-theme="light"] .palette{background:rgba(255,255,255,.82);border-color:rgba(15,18,30,.12);}
@keyframes popIn{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.palette-input-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--t-3)}
.palette-input-row input{flex:1;background:transparent;border:none;outline:none;color:var(--t-1);font-size:14px;font-family:inherit}
.palette-list{max-height:380px;overflow:auto;padding:6px}
.palette-group{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-4);padding:8px 10px 4px}
.palette-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--t-2)}
.palette-item .pi-ico{width:22px;height:22px;border-radius:6px;background:var(--bg-3);display:grid;place-items:center;font-size:11px;color:var(--t-3)}
.palette-item .pi-sub{margin-left:auto;font-size:11px;color:var(--t-4)}
.palette-item.active{background:rgba(124,140,255,.12);color:var(--t-1)}
.palette-item.active .pi-ico{background:var(--b-grad);color:#fff}
.palette-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--t-4);background:var(--bg-2)}

/* ============ TOASTS ============ */
.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:90;max-width:360px}
.toast{background:rgba(14,17,26,.75);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:11px 14px;color:var(--t-1);font-size:12.5px;box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(124,140,255,.08);display:flex;align-items:flex-start;gap:10px;animation:toastIn .25s cubic-bezier(.4,.1,.2,1);min-width:280px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
[data-theme="light"] .toast{background:rgba(255,255,255,.82);border-color:rgba(15,18,30,.10);}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(20px);opacity:0}}
.toast-ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;font-size:12px}
.toast.ok .toast-ico{background:rgba(91,210,165,.15);color:var(--ok)}
.toast.warn .toast-ico{background:rgba(255,184,107,.15);color:var(--warn)}
.toast.err .toast-ico{background:rgba(255,122,138,.15);color:var(--err)}
.toast.ai .toast-ico{background:var(--b-grad);color:#fff}
.toast-body{flex:1}
.toast-title{font-weight:600}
.toast-sub{color:var(--t-3);font-size:11.5px;margin-top:2px}
.toast-x{color:var(--t-4);cursor:pointer;font-size:14px}

/* ============ TOUR ============ */
.tour-backdrop{position:fixed;inset:0;background:rgba(4,5,10,.52);backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);display:none;z-index:80;pointer-events:auto}
.tour-backdrop.open{display:block;animation:fadeIn .2s ease}
.tour-spotlight{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,9,12,.65),0 0 0 2px rgba(124,140,255,.6),0 0 60px rgba(124,140,255,.4);transition:all .35s cubic-bezier(.4,.1,.2,1);pointer-events:none}
.tour-card{position:absolute;width:320px;background:var(--bg-1);border:1px solid rgba(124,140,255,.3);border-radius:14px;padding:16px;box-shadow:0 24px 80px rgba(0,0,0,.5);transition:all .35s cubic-bezier(.4,.1,.2,1)}
.tour-step{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--b-blue);font-weight:600}
.tour-card h3{margin:6px 0 4px;font-size:15px}
.tour-card p{margin:0 0 12px;font-size:12.5px;color:var(--t-2);line-height:1.55}
.tour-actions{display:flex;justify-content:space-between;gap:8px}

/* ============ OVERVIEW ============ */
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ov-hero{grid-column:span 4;display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.ov-card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),var(--bg-1);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-1)}
.ov-pulse{
  background:linear-gradient(135deg,rgba(124,140,255,.12),rgba(179,136,255,.06));
  border:1px solid rgba(124,140,255,.22);
  display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;
}
.ov-pulse::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 80% 0%,rgba(179,136,255,.18),transparent 60%);pointer-events:none}
.ov-pulse-h{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-2)}
.ov-pulse-v{font-size:38px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ov-pulse-sub{font-size:12.5px;color:var(--t-2);line-height:1.5;max-width:520px}
.ov-pulse-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.ov-pulse-stat{display:flex;flex-direction:column;gap:2px}
.ov-pulse-stat-l{font-size:10px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em}
.ov-pulse-stat-v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.ov-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.ov-mini-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.ov-mini-l{font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em}
.ov-mini-v{font-size:20px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.ov-mini-sub{font-size:11px;color:var(--t-4);margin-top:1px}

.ov-section{grid-column:span 2}
.ov-section-wide{grid-column:span 4}
.ov-list{display:flex;flex-direction:column}
.ov-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer;transition:.12s}
.ov-item:hover{background:var(--bg-2)}
.ov-item:last-child{border-bottom:none}
.ov-item-i{width:24px;height:24px;border-radius:6px;background:var(--bg-3);display:grid;place-items:center;font-size:11px;color:var(--t-3);flex-shrink:0}
.ov-item-i.warn{background:rgba(255,184,107,.12);color:var(--warn)}
.ov-item-i.err{background:rgba(255,122,138,.12);color:var(--err)}
.ov-item-i.ai{background:var(--b-grad);color:#fff}
.ov-item-meta{flex:1;min-width:0}
.ov-item-t{font-size:12.5px;color:var(--t-1)}
.ov-item-s{font-size:11px;color:var(--t-3);margin-top:1px}
.ov-item-time{font-size:11px;color:var(--t-4);font-family:'JetBrains Mono',monospace}

/* ============ ALERTS ============ */
.alerts-list{display:flex;flex-direction:column}
.alert-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);transition:.12s;cursor:pointer}
.alert-row:hover{background:var(--bg-2)}
.alert-row:last-child{border-bottom:none}
.alert-row.acked{opacity:.55}
.alert-sev{width:6px;align-self:stretch;border-radius:3px;background:var(--t-4);min-height:42px}
.alert-sev.crit{background:var(--err);box-shadow:0 0 12px rgba(255,122,138,.4)}
.alert-sev.warn{background:var(--warn)}
.alert-sev.info{background:var(--info)}
.alert-meta-t{font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.alert-meta-s{font-size:11.5px;color:var(--t-3);margin-top:2px;font-family:'JetBrains Mono',monospace}
.alert-when{font-size:11px;color:var(--t-4);font-family:'JetBrains Mono',monospace;text-align:right}
.alert-actions{display:flex;gap:6px}

/* ============ EVALUATIONS ============ */
.eval-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.eval-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.eval-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.eval-stat-l{font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em}
.eval-stat-v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.eval-stat-v.ok{color:var(--ok)}
.eval-stat-v.warn{color:var(--warn)}
.eval-stat-v.err{color:var(--err)}
.eval-table{width:100%;border-collapse:separate;border-spacing:0}
.eval-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t-4);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:500}
.eval-table td{padding:10px 14px;font-size:12.5px;border-bottom:1px solid var(--line);vertical-align:middle}
.eval-table tr:last-child td{border-bottom:none}
.eval-result{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:2px 8px;border-radius:99px;font-family:'JetBrains Mono',monospace}
.eval-result.pass{background:rgba(91,210,165,.08);color:var(--ok);border:1px solid rgba(91,210,165,.22)}
.eval-result.fail{background:rgba(255,122,138,.08);color:var(--err);border:1px solid rgba(255,122,138,.22)}
.eval-result.regress{background:rgba(255,184,107,.08);color:var(--warn);border:1px solid rgba(255,184,107,.22)}
.eval-bar{height:10px;border-radius:99px;background:var(--bg-3);overflow:hidden;display:flex}
.eval-bar-pass{background:linear-gradient(90deg,#3FA877,#5BD2A5)}
.eval-bar-fail{background:linear-gradient(90deg,#A8424F,#FF7A8A)}
.eval-bar-regress{background:linear-gradient(90deg,#A8743F,#FFB86B)}

/* ============ AUDIT LOG ============ */
.audit-feed{display:flex;flex-direction:column}
.audit-item{display:grid;grid-template-columns:140px 28px 1fr;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line);align-items:flex-start;font-size:12.5px}
.audit-item:last-child{border-bottom:none}
.audit-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t-4);padding-top:2px}
.audit-actor{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#3a4070,#5a3f8c);display:grid;place-items:center;color:#fff;font-size:10px;font-weight:600}
.audit-actor.system{background:linear-gradient(135deg,#2a3a5a,#3a5a8a)}
.audit-actor.ai{background:var(--b-grad)}
.audit-text{color:var(--t-2);line-height:1.55}
.audit-text b{color:var(--t-1)}
.audit-text code{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg-3);color:var(--b-blue);padding:1px 5px;border-radius:4px}
.audit-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:1px 7px;border-radius:99px;margin-left:6px;color:var(--t-3);background:var(--bg-3);border:1px solid var(--line)}

/* ============ FLOW DIAGRAM ============ */
.flow-wrap{position:relative;padding:30px 18px;min-height:560px}
.flow-svg{width:100%;height:auto;display:block}
.flow-node{cursor:pointer}
.flow-node-bg{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1.2;transition:.2s}
.flow-node:hover .flow-node-bg{fill:var(--bg-3);stroke:var(--b-blue)}
.flow-node.detect .flow-node-bg{stroke:rgba(255,122,138,.4)}
.flow-node.understand .flow-node-bg{stroke:rgba(124,200,255,.4)}
.flow-node.decide .flow-node-bg{stroke:rgba(179,136,255,.5)}
.flow-node.act .flow-node-bg{stroke:rgba(91,210,165,.4)}
.flow-node-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;fill:var(--t-1)}
.flow-node-sub{font-family:'Inter',sans-serif;font-size:10.5px;fill:var(--t-3)}
.flow-node-screens{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--t-2)}
.flow-edge{fill:none;stroke:url(#flowEdge);stroke-width:1.6;stroke-dasharray:4 4;animation:flowDash 1.4s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-16}}
.flow-arrow{fill:var(--b-purple)}
.flow-loop{fill:none;stroke:var(--b-purple);stroke-width:1.4;stroke-dasharray:4 4;opacity:.6;animation:flowDash 2s linear infinite}
.flow-stage-label{font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.12em;fill:var(--t-4);font-weight:600}
.flow-legend{display:flex;gap:14px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid var(--line);background:rgba(255,255,255,.01);font-size:11.5px;color:var(--t-3)}
.flow-legend b{color:var(--t-1)}

/* ============ RESPONSIVE ============ */
@media (max-width:1300px){
  .body-grid{grid-template-columns:1fr 320px}
  .ov-grid{grid-template-columns:repeat(2,1fr)}
  .ov-hero{grid-column:span 2;grid-template-columns:1fr}
  .ov-section{grid-column:span 2}
  .ov-section-wide{grid-column:span 2}
  .eval-grid{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .body-grid{grid-template-columns:1fr}
  .insights-panel{position:static;max-height:none}
  .score-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .sim-panel .sim-grid{grid-template-columns:1fr}
  .sim-controls{grid-template-columns:1fr}
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#2a3142;background-clip:padding-box;border:2px solid transparent}

/* highlight pulse for navigation focus */
.highlight-flash{animation:highlightFlash 1.4s ease}
@keyframes highlightFlash{0%{box-shadow:0 0 0 0 rgba(124,140,255,.6)}40%{box-shadow:0 0 0 8px rgba(124,140,255,0)}100%{box-shadow:0 0 0 0 rgba(124,140,255,0)}}