/* AgentPassport — design system
   Brand: blue → violet (from the logo). Neutral slate surfaces, one accent, semantic colors kept separate.
   Themes: dark (default) and light, switched via <html data-theme>. Every component reads tokens only. */

/* ------------------------------------------------------------------ tokens */
:root, :root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a101d; --bg-bar:rgba(10,16,29,.82);
  --panel:#111a2c; --panel2:#0d1524; --sunken:#0b1220; --field:#0c1424;
  --line:#1f2b44; --line-strong:#2b3b5e;
  --txt:#e7ecf6; --txt-strong:#f5f8fe; --muted:#8f9dba; --faint:#5f6e8c; --mono:#b9c6e6;
  --acc:#4f8cff; --acc-hover:#6b9fff; --acc-ink:#ffffff; --acc2:#8db6ff; --violet:#8b6cf6;
  --acc-soft:rgba(79,140,255,.14); --acc-line:rgba(79,140,255,.40);
  --ok:#34c98a;   --ok-soft:rgba(52,201,138,.14);   --ok-line:rgba(52,201,138,.38);
  --warn:#f2b84b; --warn-soft:rgba(242,184,75,.14); --warn-line:rgba(242,184,75,.40);
  --bad:#f2706a;  --bad-soft:rgba(242,112,106,.14); --bad-line:rgba(242,112,106,.42);
  --rowhover:rgba(79,140,255,.07);
  --side-bg:#080d18; --side-line:#16203a; --side-txt:#9fb0d0; --side-hover:rgba(255,255,255,.05);
  --side-active:rgba(79,140,255,.16); --side-group:#5f6e8c;
  --brand-grad:linear-gradient(135deg,#2f9bff 0%,#7c5cf5 100%);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px -14px rgba(0,0,0,.55);
  --pop:0 18px 44px rgba(0,0,0,.5);
  --scrim:rgba(5,9,18,.66);
}
:root[data-theme="light"]{
  color-scheme:light;
  /* Tinted blue: blue-washed sidebar + canvas, strong brand-blue accent, navy ink. All text pairs
     meet WCAG AA (4.5:1). */
  --bg:#eef3fc; --bg-bar:rgba(238,243,252,.88);
  --panel:#ffffff; --panel2:#f5f8fe; --sunken:#e4ecfa; --field:#ffffff;
  --line:#d3dff4; --line-strong:#b3c6ea;
  --txt:#1a2c5c; --txt-strong:#0b1f4d; --muted:#4a608c; --faint:#53699a; --mono:#27407a;
  --acc:#1d4ed8; --acc-hover:#1741b8; --acc-ink:#ffffff; --acc2:#1741b8; --violet:#6d4ae0;
  --acc-soft:rgba(29,78,216,.10); --acc-line:rgba(29,78,216,.34);
  --ok:#11713a;   --ok-soft:rgba(21,128,61,.12);   --ok-line:rgba(21,128,61,.36);
  --warn:#955300; --warn-soft:rgba(178,106,0,.12); --warn-line:rgba(178,106,0,.38);
  --bad:#b82e2e;  --bad-soft:rgba(201,52,52,.09);  --bad-line:rgba(201,52,52,.34);
  --rowhover:#e8effc;
  --side-bg:#e3ecfb; --side-line:#c8d7f2; --side-txt:#34507f; --side-hover:rgba(29,78,216,.08);
  --side-active:#c4d6f6; --side-group:#455f8f;
  --shadow:0 1px 2px rgba(11,31,77,.06),0 8px 20px -12px rgba(11,31,77,.18);
  --pop:0 18px 44px rgba(11,31,77,.20);
  --scrim:rgba(11,31,77,.45);
}

/* -------------------------------------------------------------------- base */
*{box-sizing:border-box}
html{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
body{margin:0;background:var(--bg);color:var(--txt);min-width:320px;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
h1,h2,h3,h4{color:var(--txt-strong);margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus-visible,select:focus-visible{outline:none}
::selection{background:var(--acc-soft)}
.muted{color:var(--muted)} .count{color:var(--muted);font-size:12.5px} .spacer{flex:1}
.lead{margin:0 0 14px;max-width:86ch}
a{color:var(--acc2)}

/* Inline SVG icons (sprite in index.html). Stroke follows currentColor. */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.lg{width:20px;height:20px} .ic.sm{width:14px;height:14px}

/* --------------------------------------------------------------- app shell */
.app{display:grid;grid-template-columns:var(--side-w,248px) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;
  background:var(--side-bg);border-right:1px solid var(--side-line);padding:20px 14px 16px;overflow-y:auto}
.main{min-width:0;display:flex;flex-direction:column}
.content{width:100%;max-width:1560px;padding:22px clamp(16px,2.4vw,34px) 72px}

.brand{display:flex;align-items:center;gap:12px;min-width:0;padding:0 6px}
.brand-logo{height:38px;width:auto;flex:none}
.brand-text{min-width:0}
.brand h1{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.brand .eyebrow{margin:3px 0 0;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

nav.tabs{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0}
.navgroup{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--side-group);
  padding:16px 12px 6px}
.navgroup:first-child{padding-top:2px}
.navgroup[hidden]{display:none}
.tab{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:9px;padding:9px 12px;cursor:pointer;
  color:var(--side-txt);font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.tab .ic{width:18px;height:18px;opacity:.9}
.tab:hover{background:var(--side-hover);color:var(--txt-strong)}
.tab.active{background:var(--side-active);color:var(--txt-strong)}
.tab.active .ic{color:var(--acc);opacity:1}
.tab.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-grad)}
.tab[hidden]{display:none}
.side-foot{font-size:11.5px;color:var(--faint);padding:10px 8px 0;border-top:1px solid var(--side-line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.side-foot .dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}

.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,2.4vw,34px);background:var(--bg-bar);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pagehead{min-width:0}
.pagehead h2{font-size:clamp(18px,1.9vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.pagehead p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.hdr-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hdr-actions{display:flex;align-items:center;gap:6px}
.userchip{display:flex;align-items:center;gap:10px;min-width:0;padding-right:6px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-grad);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.who{font-size:12px;color:var(--muted);line-height:1.35;min-width:0}
.who b{display:inline;color:var(--txt-strong);font-size:13px;font-weight:650;margin-right:2px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;margin-left:6px;
  background:var(--acc-soft);color:var(--acc2);border:1px solid var(--acc-line);vertical-align:1px}
.iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.iconbtn:hover{background:var(--panel);border-color:var(--line);color:var(--txt-strong)}
.iconbtn .ic{width:18px;height:18px}
.actbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--acc2);
  background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:999px;padding:3px 11px}
.actbadge .pdot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

.view{display:none} .view.active{display:block;animation:viewin .22s ease both}
@keyframes viewin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Uniform rhythm between dashboard sections. */
#dashboard.view.active{display:flex;flex-direction:column;gap:18px}
#dashboard > *{margin:0}

/* Dev-mode role switcher (only shown when authMode=dev) */
.devswitch{margin:0 0 16px;background:var(--warn-soft);border:1px dashed var(--warn-line);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.devswitch .ds-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:999px;padding:2px 9px}
.devswitch .ds-lbl{font-size:12.5px;color:var(--muted)}
.devswitch select{min-width:190px}
.devswitch .ds-perm{font-size:11.5px;color:var(--muted);margin-left:auto}
.devswitch .ds-perm b{color:var(--txt-strong)}
#adminBanner .abmsg{display:flex;align-items:center;gap:10px;background:var(--acc-soft);border:1px solid var(--acc-line);
  color:var(--txt-strong);border-radius:12px;padding:10px 16px;margin:0 0 16px;font-size:13.5px}
#adminBanner .abmsg .ic{color:var(--acc)}

/* -------------------------------------------------------------- components */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 16px;box-shadow:var(--shadow)}
.card h3{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:15px;font-weight:650;letter-spacing:-.005em}
.card h3 .ic{color:var(--acc);width:18px;height:18px}
.card h3 .count{font-weight:500;margin-left:2px}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:0 0 18px}
.kpi{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.kpi-ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line)}
.kpi-ic .ic{width:20px;height:20px}
.kpi.ok .kpi-ic{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.kpi.warn .kpi-ic{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.kpi.vio .kpi-ic{background:rgba(139,108,246,.14);color:var(--violet);border-color:rgba(139,108,246,.38)}
.kpi .n{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--txt-strong);font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:12.5px;margin-top:2px}
#kpis{margin-bottom:18px}

/* Welcome / feature tiles on the dashboard */
.hero{position:relative;overflow:hidden;padding:24px 26px}
.hero::before{content:"";position:absolute;inset:0 0 auto auto;width:46%;height:100%;pointer-events:none;
  background:radial-gradient(520px 260px at 90% 0%,var(--acc-soft),transparent 70%)}
.hero h3{font-size:18px;margin-bottom:6px}
.hero .lead{color:var(--muted);margin-bottom:18px}
.feats{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.feat{display:flex;gap:12px;padding:13px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.feat-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line)}
.feat > div > b{display:block;color:var(--txt-strong);font-size:13.5px;margin-bottom:2px}
.feat > div > span{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.feat > div > span b{color:var(--txt);font-weight:650}
.about-list{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7}
.about-list li{margin:2px 0} .about-list b{color:var(--txt-strong)}

/* Side-by-side charts */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:stretch}
.chart-grid .card{margin:0;display:flex;flex-direction:column}
.chart-grid .card > .bars{flex:1;display:flex;flex-direction:column;justify-content:center}
.bars .row{display:flex;align-items:center;gap:12px;margin:9px 0}
.bars .lab{flex:0 0 150px;color:var(--muted);font-size:13px}
.bars .track{flex:1;background:var(--sunken);border:1px solid var(--line);border-radius:999px;height:10px;overflow:hidden}
.bars .fill{height:100%;border-radius:999px;background:var(--brand-grad)}
.bars .val{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--txt-strong);font-weight:600}

/* Stat tiles (generated by JS) */
.statrow{display:flex;gap:14px;flex-wrap:wrap}
.stat{flex:1;min-width:140px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .n{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--txt-strong);font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted);font-size:12px;margin-top:7px}
.stat.ok .n{color:var(--ok)} .stat.err .n{color:var(--bad)} .stat.acc .n{color:var(--acc)}

/* Buttons */
input,select,button,textarea{font-family:inherit;font-size:13.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);border:1px solid var(--acc);
  color:var(--acc-ink);border-radius:9px;padding:8px 15px;cursor:pointer;font-weight:600;line-height:1.3;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--acc-hover);border-color:var(--acc-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--panel2);border-color:var(--acc-line);color:var(--txt-strong)}
.btn.xs{padding:4px 10px;font-size:12px;border-radius:7px;gap:6px}
.btn.xs .ic{width:14px;height:14px}
.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn[disabled]:hover{background:var(--acc);border-color:var(--acc)}
.btn.ghost[disabled]:hover{background:transparent;border-color:var(--line-strong)}
.btn.big{width:100%;padding:12px;font-size:15px;border-radius:10px}
.btn.ms{background:#fff;color:#1b1b1b;border-color:#d0d5df}
.btn.ms:hover{background:#f4f6fa;border-color:#c0c7d6}
.btn.big.local{background:var(--panel2);color:var(--txt);border-color:var(--line-strong)}
.btn.big.local:hover{border-color:var(--acc)}
.rbadge{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:8px;
  background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line)}
a.agentlink{color:var(--acc2);text-decoration:none;font-weight:600;cursor:pointer}
a.agentlink:hover{text-decoration:underline}
.promrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.promrow a.btn{text-decoration:none}
.promote{border-top:1px solid var(--line);margin-top:14px}

/* Form controls */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.toolbar label,.fld{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.toolbar label.count{text-transform:none;letter-spacing:0;font-weight:500}
.toolbar label,.toolbar label select,.ownerctl select,.ownerctl input[type=search]{max-width:100%}
input[type=search],input[type=text],input[type=password],input[type=number],input[type=date],select{
  background:var(--field);border:1px solid var(--line-strong);color:var(--txt);border-radius:9px;padding:8px 12px;
  outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--faint)}
input:hover,select:hover{border-color:var(--acc-line)}
input:focus,select:focus,.xsel.open .xsel-btn{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
input[type=search]{min-width:250px;max-width:100%}
input[type=checkbox]{accent-color:var(--acc);width:15px;height:15px}
.fld select,.fld input{padding:7px 10px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}
.toolbar label select{min-width:220px}
.searchbox{position:relative;display:inline-flex;align-items:center;max-width:100%}
.searchbox .ic{position:absolute;left:11px;color:var(--faint);pointer-events:none;width:15px;height:15px}
.searchbox input[type=search]{padding-left:34px}
.ownerctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ownerctl input[type=search]{min-width:200px} .ownerctl select{min-width:220px}
.oc-msg{font-size:12px}

/* Custom dropdown (progressive enhancement over a native <select>) */
.xsel{position:relative;display:block;min-width:220px}
select.xsel-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none}
.xsel-btn{width:100%;text-align:left;background:var(--field);border:1px solid var(--line-strong);color:var(--txt);
  border-radius:9px;padding:8px 34px 8px 12px;cursor:pointer;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;font-weight:400;
  transition:border-color .15s,box-shadow .15s}
.xsel-btn::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;
  border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:translateY(-70%) rotate(45deg);
  transition:transform .15s}
.xsel.open .xsel-btn::after{transform:translateY(-30%) rotate(-135deg)}
.xsel-btn:hover{border-color:var(--acc-line)}
.xsel-btn:disabled{opacity:.5;cursor:not-allowed}
.xsel-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;min-width:220px;display:none;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:11px;box-shadow:var(--pop);
  padding:6px;max-height:min(340px,60vh);overflow:auto}
.xsel.open .xsel-panel{display:block}
.xsel-search{width:100%;margin:0 0 6px;padding:7px 10px;font-size:13px;position:sticky;top:0;border-radius:8px}
.xsel-opt{padding:8px 10px;border-radius:7px;font-size:13.5px;cursor:pointer;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xsel-opt:hover,.xsel-opt.active{background:var(--rowhover)}
.xsel-opt[aria-selected="true"]{color:var(--acc2);font-weight:600;background:var(--acc-soft)}
.xsel-empty{padding:9px 10px;color:var(--muted);font-size:12.5px}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
.card .tablewrap{box-shadow:none}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none}
th:hover{color:var(--txt-strong)}
th .arrow{color:var(--acc)}
tbody tr{transition:background .12s} tbody tr:hover{background:var(--rowhover)}
td.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;color:var(--mono)}
td.msg{white-space:normal;max-width:520px}
.agentcount{font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt-strong)}
.agentcount.zero{font-weight:500;color:var(--muted)}

/* Status tags */
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid transparent;line-height:1.5}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.tag.mut{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.tag.bad,.tag.fail,.tag.del{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.tag.run{background:var(--acc-soft);color:var(--acc2);border-color:var(--acc-line)}

/* Banners */
.banner{display:flex;align-items:flex-start;gap:10px;border-radius:12px;padding:12px 16px;margin:14px 0;font-size:13.5px;
  border:1px solid;border-left-width:4px;color:var(--txt)}
.banner.err{background:var(--bad-soft);border-color:var(--bad-line);border-left-color:var(--bad)}
.banner.info{background:var(--acc-soft);border-color:var(--acc-line);border-left-color:var(--acc)}
.banner.ok{background:var(--ok-soft);border-color:var(--ok-line);border-left-color:var(--ok)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn-line);border-left-color:var(--warn)}

/* Progress + steps */
.progress{height:8px;background:var(--sunken);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.progress .bar{height:100%;width:0;border-radius:999px;background:var(--brand-grad);transition:width .5s ease}
.progress:not(.done):not(.err) .bar{background-size:200% 100%;animation:pdShimmer 1.4s linear infinite}
.progress.done .bar{background:var(--ok)} .progress.err .bar{background:var(--bad)} .progress.pending .bar{background:var(--warn)}
@keyframes pdShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#pdBarLabel{font-size:12.5px}
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.step .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.step.ok .dot{background:var(--ok)} .step.running .dot{background:var(--acc);animation:pulse 1s infinite}
.step.error .dot{background:var(--bad)} .step.pending .dot{background:var(--line-strong)}
.step .nm{font-weight:600;flex:0 0 130px;text-transform:capitalize;color:var(--txt-strong)}
.step .msg{color:var(--muted);font-size:12.5px}
.actlist{display:flex;flex-direction:column;gap:8px}
.actrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.actrow .who{color:var(--txt-strong);font-weight:600;text-align:left;font-size:13px}
.actrow .what{color:var(--muted);font-size:12.5px;flex:1;min-width:0;white-space:normal}
.actrow .rdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.actrow .rdot.run{background:var(--acc);animation:pulse 1s infinite}
.actrow .rdot.ok{background:var(--ok)} .actrow .rdot.err{background:var(--bad)} .actrow .rdot.mut{background:var(--line-strong)}

/* Loading states */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);padding:34px 20px;text-align:center;font-size:13.5px}
.loading::before{content:"";width:34px;height:34px;flex:none;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 12%,var(--acc) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:ldspin .85s linear infinite}
@keyframes ldspin{to{transform:rotate(360deg)}}
.hint{color:var(--muted);padding:34px 20px;text-align:center;font-size:13.5px;
  background:var(--panel);border:1px dashed var(--line-strong);border-radius:12px}
.skeleton{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.sk-row{display:flex;gap:16px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:none} .sk-row.head{background:var(--panel2)}
.sk-cell{flex:1}
.sk-bar{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--sunken) 25%,var(--line) 37%,var(--sunken) 63%);
  background-size:400% 100%;animation:sksh 1.4s ease infinite}
.sk-row.head .sk-bar{height:9px;opacity:.7}
@keyframes sksh{0%{background-position:100% 0}100%{background-position:-100% 0}}
#netbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;pointer-events:none;opacity:0;
  background:var(--brand-grad);box-shadow:0 0 10px var(--acc-line);transition:width .2s ease,opacity .2s ease}
#netbar.on{opacity:1;width:75%;transition:width 8s cubic-bezier(.1,.7,.1,1),opacity .2s ease}
#netbar.on.done{width:100%;transition:width .2s ease,opacity .25s ease .1s;opacity:0}

/* Donut */
.donut-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.donut-wrap svg{flex:0 0 auto}
.donut-wrap svg circle.seg{transition:stroke-width .15s ease}
.donut-wrap svg circle.seg:hover{stroke-width:30}
.donut-legend{flex:1;min-width:230px;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:7px 18px}
.lg-item{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.lg-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.lg-env{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.lg-val{color:var(--txt-strong);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- dialogs */
.modal{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.modal .sheet{background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;
  width:min(960px,96vw);max-height:90vh;overflow:auto;padding:22px 24px;box-shadow:var(--pop)}
.modal .sheethead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.modal .sheethead h3{margin:0;font-size:16px;display:flex;align-items:center;gap:9px}
.modal .sheethead h3 .ic{color:var(--acc);width:18px;height:18px}

/* Agent lifecycle tracker */
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 4px}
.lc-title{font-size:15px;font-weight:700;color:var(--txt-strong)}
.lc-sub{font-size:12.5px;margin-bottom:14px}
.lc-other{font-size:12px;margin-top:12px}
.tracker{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:4px 0}
.stagecol{flex:1;min-width:180px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.stagehead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--acc2);font-weight:700;margin-bottom:8px}
.arrowcol{display:flex;align-items:center;color:var(--faint);font-size:20px;padding:0 2px}
.hop{background:var(--sunken);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px}
.hop:last-child{margin-bottom:0}
.hop.empty{background:transparent;border-style:dashed;text-align:center;font-size:12px}
.hop-env{font-weight:600;font-size:12.5px;white-space:normal;color:var(--txt-strong)}
.hop-meta{display:flex;gap:6px;align-items:center;font-size:11px;margin-top:4px;flex-wrap:wrap}

/* Agent info panel */
.ai-sect{margin-top:20px}
.ai-sect h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--acc2);font-weight:700}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.ai-kv .k{color:var(--muted);font-size:11px}
.ai-kv .v{font-size:13px;color:var(--txt-strong);word-break:break-word}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}

/* About dialog */
.login-ver{margin:8px 0 0;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.02em}
.aboutsheet{width:min(580px,96vw)}
.aboutbody{margin-top:6px}
.about-hero{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.about-logo{width:46px;height:46px;border-radius:11px;flex:none}
.about-id{flex:1;min-width:0}
.about-name{font-size:17px;font-weight:700;color:var(--txt-strong)}
.about-sub{font-size:12px;color:var(--muted)}
.about-vchip{font-size:13px;font-weight:700;color:#fff;background:var(--brand-grad);border-radius:999px;padding:5px 13px;white-space:nowrap}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:16px 0}
.about-grid>div{background:var(--panel);padding:11px 14px;display:flex;flex-direction:column;gap:3px}
.about-grid span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.about-grid b{font-size:13.5px;color:var(--txt);font-weight:600;word-break:break-word}
.about-grid code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.about-help h4{margin:4px 0 8px;font-size:13px}
.about-help p{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.about-help ul{margin:0 0 12px;padding-left:18px}
.about-help li{font-size:12.5px;color:var(--muted);margin-bottom:5px;line-height:1.45}
.about-help li b{color:var(--txt)}
.about-foot{border-top:1px solid var(--line);padding-top:12px}

/* Admin (Settings) */
.adminsheet{width:min(1060px,96vw)}
.adminlayout{display:grid;grid-template-columns:220px 1fr;gap:20px;margin-top:8px}
.adminnav{display:flex;flex-direction:column;gap:3px}
.adminnav button{text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);
  padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.adminnav button:hover{color:var(--txt-strong);background:var(--panel2)}
.adminnav button.active{color:var(--txt-strong);background:var(--acc-soft);border-color:var(--acc-line)}
.adminmain{min-height:320px}
.adminmain h4{margin:0 0 4px;font-size:15px}
.adminmain .sub{color:var(--muted);font-size:12.5px;margin:0 0 16px}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.set-row .k{flex:0 0 200px;font-size:13px;color:var(--txt-strong)}
.set-row .k small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.set-row input[type=text],.set-row input[type=number]{flex:1;min-width:180px}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 20px}
.cfg-kv{padding:8px 0;border-bottom:1px solid var(--line)}
.cfg-kv .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cfg-kv .v{font-size:13px;color:var(--txt-strong);word-break:break-word;font-family:ui-monospace,Consolas,monospace}
.matrix{overflow-x:auto}
.matrix table{width:100%;border-collapse:collapse;font-size:12px}
.matrix th,.matrix td{border:1px solid var(--line);padding:6px 9px;text-align:center;white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left;position:sticky;left:0;background:var(--panel2)}
.matrix .yes{color:var(--ok);font-weight:700} .matrix .no{color:var(--faint)}
.matrix thead th{background:var(--panel2);color:var(--acc2);text-transform:none}
.rolechips{display:flex;flex-wrap:wrap;gap:6px}
.rolechk{display:flex;align-items:center;gap:6px;font-size:12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;cursor:pointer}

/* ------------------------------------------------------------ login gate */
.logingate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 500px at 85% -10%,var(--acc-soft),transparent 70%),
             radial-gradient(700px 480px at 0% 110%,rgba(139,108,246,.12),transparent 70%),var(--bg)}
.logingate.show{display:flex}
.loginbox{width:min(960px,96vw);background:var(--panel);border:1px solid var(--line-strong);border-radius:20px;
  overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:var(--pop)}
/* The brand panel stays dark in both themes so the white wordmark always has contrast. */
.login-hero{position:relative;padding:38px 36px;color:#e9eefb;
  background:radial-gradient(520px 320px at 100% 0%,rgba(124,92,245,.45),transparent 70%),
             linear-gradient(155deg,#1b4fd8 -20%,#0b1530 62%)}
.login-panel{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
.login-brand{display:flex;align-items:center;gap:14px;margin:0 0 30px}
.login-brand .lb-icon{height:52px;width:auto;flex:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.login-brand .lb-word{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:#fff}
.login-brand .lb-word small{display:block;font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#a9c4ff;margin-top:6px}
.login-h{font-size:28px;line-height:1.2;margin:0 0 24px;letter-spacing:-.02em;color:#fff}
.login-values{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.login-values li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#e9eefb}
.login-values li svg{width:20px;height:20px;flex:none;margin-top:1px;color:#7fe0b6}
.login-values li b{display:block;font-weight:700;color:#fff}
.login-values li span{color:#b5c3e6;font-size:12px}
.login-panel .signin-h{font-size:20px;font-weight:750;letter-spacing:-.01em;margin:0 0 4px}
.login-panel .signin-sub{font-size:12.5px;color:var(--muted);margin:0 0 22px}
.login-foot{margin:20px 0 0;font-size:11.5px;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:7px}
.login-foot svg{width:14px;height:14px;color:var(--ok)}
.login-field{display:block;margin:0 0 14px}
.login-field .lab{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.login-field select,.login-field input{width:100%;padding:11px 13px;font-size:14px;border-radius:10px}
.login-note{font-size:12px;color:var(--muted);background:var(--sunken);border:1px dashed var(--line-strong);
  border-radius:10px;padding:10px 12px;margin:0 0 16px}
.role-desc{font-size:12px;color:var(--muted);margin:-6px 0 16px;min-height:16px}
.login-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.login-or::before,.login-or::after{content:"";height:1px;flex:1;background:var(--line)}
.local-login{margin:0}
.login-err{font-size:12.5px;color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line);border-radius:9px;padding:8px 11px;margin:0 0 12px}

/* ------------------------------------------------------------- responsive */
@media(max-width:1180px){
  .app{--side-w:68px}
  .side{padding:18px 10px;align-items:center}
  .brand{padding:0;justify-content:center} .brand-text,.navgroup,.tab span,.side-foot span{display:none}
  .tab{justify-content:center;padding:11px 0;width:46px}
  .tab.active::before{left:-10px}
  .side-foot{justify-content:center;border-top:0}
}
@media(max-width:760px){
  .loginbox{grid-template-columns:1fr;width:min(440px,94vw)}
  .login-hero{padding:28px 26px 24px}
  .login-values{display:none}
  .login-panel{padding:26px 26px 24px}
  .adminlayout{grid-template-columns:1fr} .cfg-grid{grid-template-columns:1fr}
  .ai-grid,.donut-legend{grid-template-columns:1fr}
}
@media(max-width:720px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;
    border-right:0;border-bottom:1px solid var(--side-line);overflow:visible}
  .brand-logo{height:30px}
  nav.tabs{flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:none}
  .tab{width:auto;flex:none;padding:9px 12px}
  .tab.active::before{display:none}
  .side-foot{display:none}
  .topbar{position:static;padding:12px 14px}
  .hdr-right{width:100%;justify-content:space-between}
  .card{padding:16px 15px}
  .set-row .k{flex-basis:100%}
  .toolbar{gap:10px}
  input[type=search],.searchbox{min-width:0;flex:1 1 160px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .loading::before{animation:ldspin 2.4s linear infinite!important}
}