/* ================================================================
   FD AI Command Center
   Design system — light theme
   ================================================================ */
:root{
  /* The FD RYZE logo's ground (img/fd-ryze-logo.png is drawn on exactly this
     colour), used wherever the logo sits so its margins vanish into the plate. */
  --brand-ink:#2A0854;
  --bg:#F2F4F9;
  --panel:#FFFFFF;
  --panel-2:#F6F8FB;
  --panel-3:#EBEEF5;
  --border:#DFE4EE;
  --border-soft:#E9EDF4;
  --text:#1B2436;
  --text-dim:#5A6478;
  --text-faint:#8E97AB;
  /* Named by a few rules below (sign-in foot, error text, workspace slug) but
     never defined, so they fell back to full-strength text. */
  --muted:var(--text-dim);
  --purple:#6D4AEF;
  --purple-bright:#5B36D6;
  --purple-dim:rgba(109,74,239,0.10);
  --green:#16A34A;
  --green-dim:rgba(22,163,74,0.11);
  --red:#DC2626;
  --red-dim:rgba(220,38,38,0.09);
  --amber:#D97706;
  --amber-dim:rgba(217,119,6,0.11);
  --orange:#EA580C;
  --orange-dim:rgba(234,88,12,0.10);
  --blue:#2563EB;
  --blue-dim:rgba(37,99,235,0.09);
  --cyan:#0891B2;
  --cyan-dim:rgba(8,145,178,0.10);
  --pink:#DB2777;
  --pink-dim:rgba(219,39,119,0.09);
  --radius:10px;
  --radius-lg:14px;
  --sidebar-w:234px;
  --inspector-w:356px;
  --shadow:0 10px 30px rgba(23,32,64,0.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.45;
  overflow:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#C9D0DE;border-radius:6px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#AEB7CA;}

/* ================= LAYOUT ================= */
.app{display:flex;height:100vh;}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.main{flex:1;overflow-y:auto;padding:22px 24px 40px;position:relative;}

/* ================= SIDEBAR ================= */
.sidebar{
  width:var(--sidebar-w);
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;
  padding:12px 12px 14px;
}

/* ---- brand: the FD RYZE logo and the product name ------------------------
   img/fd-ryze-logo.png is 326x88 px: white lettering on a solid #2A0854
   ground, the lettering inside x 46..314, y 26..71 (the "FD" caps are
   y 33..70). Every place the logo appears is a plate of that same ground, so
   the image may hang its built-in margin out past the plate's padding and be
   clipped there without a seam. .brand-logo's negative margins are those pixel
   offsets scaled to the rendered height (--logo-h / 88): the "F" lands flush
   with the text below it, and the image's layout box is exactly as tall as its
   lettering, so the spacing around it is the spacing written here.
   The PNG must carry NO colour profile (no iCCP/cHRM/gAMA chunk). The file as
   first exported was tagged Display P3, so browsers converted its ground to
   about rgb(46,5,88) and a lighter box showed round the lettering on the
   #2A0854 plate. Untagged, its pixels are read as sRGB and match exactly. */
.brand-logo{
  display:block;flex-shrink:0;width:auto;height:var(--logo-h,40px);
  margin:calc(var(--logo-h,40px) * -26 / 88) 0 calc(var(--logo-h,40px) * -16 / 88) calc(var(--logo-h,40px) * -46 / 88);
}
/* The "FD" of "FD AI Command Center", drawn in the logo's own letterforms:
   img/fd-mark.png (the two letters cut from the logo, 73x38) masks a box of
   currentColor sized to the cap height of the surrounding text and sitting on
   its baseline (an inline-block with overflow:hidden takes its bottom edge as
   its baseline). The real text "FD" stays inside, transparent, so the name is
   read aloud, selected and copied as "FD AI Command Center". */
.fd-mark{
  display:inline-block;vertical-align:baseline;overflow:hidden;
  height:.71em;width:calc(.71em * 73 / 38);
  background-color:currentColor;
  -webkit-mask-image:url(../img/fd-mark.png);mask-image:url(../img/fd-mark.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left bottom;mask-position:left bottom;
}
.fd-mark > span{color:transparent;white-space:nowrap;}
/* Selecting the name must not paint the hidden letters in the highlight text
   colour on top of the drawn ones. */
.fd-mark > span::selection{color:transparent;}
@media (forced-colors:active){.fd-mark{forced-color-adjust:none;background-color:CanvasText;}}

/* Sidebar plate, 209px wide inside the 234px sidebar (1px border, 12px
   padding each side): logo and LIVE on one row (lettering 122px, status 36px,
   181px available), the product name on its own row below (153px at 13.5px
   bold in Segoe UI, of 181px available; nowrap, with an ellipsis as the guard
   should a wider fallback face ever run out of room). */
.brand{
  --logo-h:40px;
  flex-shrink:0;overflow:hidden;
  margin:0 0 12px;padding:14px 14px 13px;
  background:var(--brand-ink);color:#fff;border-radius:12px;
  box-shadow:0 6px 18px rgba(42,8,84,.20);
}
.brand-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.brand-name{margin-top:10px;font-weight:700;font-size:13.5px;line-height:1.25;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-status{font-size:10px;color:#4ADE80;display:flex;align-items:center;gap:5px;flex-shrink:0;font-weight:700;letter-spacing:.12em;}
.brand-status .dot{background:#4ADE80;}
.brand-status .dot.pulse{animation-name:pulse-live;}
@keyframes pulse-live{0%{box-shadow:0 0 0 0 rgba(74,222,128,.45);}70%{box-shadow:0 0 0 6px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;}
.dot.pulse{animation:pulse 2.2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.4);}70%{box-shadow:0 0 0 6px rgba(22,163,74,0);}100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}}

.nav{flex:1;overflow-y:auto;padding:2px 0;scrollbar-width:thin;}
.nav-group{margin-top:14px;}
.nav-group:first-child{margin-top:2px;}
.nav-label{font-size:9.5px;letter-spacing:.12em;color:var(--text-faint);padding:0 10px;margin-bottom:5px;font-weight:700;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:8px;
  color:var(--text-dim);font-size:12.5px;font-weight:500;
  cursor:pointer;margin-bottom:1px;
  border:1px solid transparent;
  transition:background .12s,color .12s;
  white-space:nowrap;
}
.nav-item:hover{background:var(--panel-2);color:var(--text);}
.nav-item.active{
  background:var(--purple-dim);color:var(--purple-bright);
  border-color:rgba(109,74,239,0.22);
}
.nav-item.active .nav-ico svg{stroke:var(--purple-bright);}
.nav-ico{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;}
.nav-ico svg{width:15px;height:15px;stroke:currentColor;}
.nav-item .nav-count{margin-left:auto;background:var(--panel-3);border-radius:5px;font-size:10px;padding:0 6px;color:var(--text-dim);font-weight:600;}
.nav-item.active .nav-count{background:rgba(109,74,239,.16);color:var(--purple-bright);}

.user-card{
  margin-top:10px;padding:12px 8px 2px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:8px;
}
.user-card:hover .user-name{color:var(--purple-bright);}
.user-meta{min-width:0;}
.user-name{font-size:12.5px;font-weight:600;transition:color .12s;}
.user-role{font-size:10.5px;color:var(--text-faint);}
.user-caret{margin-left:auto;color:var(--text-faint);display:flex;}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;background:#8E97AB;
}
.avatar.sm{width:24px;height:24px;font-size:9px;}
.av-purple{background:linear-gradient(135deg,#7C5CFC,#5B3FE0);}
.av-blue{background:linear-gradient(135deg,#3B82F6,#1D4ED8);}
.av-green{background:linear-gradient(135deg,#22C55E,#15803D);}
.av-orange{background:linear-gradient(135deg,#F97316,#C2410C);}
.av-pink{background:linear-gradient(135deg,#EC4899,#BE185D);}
.av-cyan{background:linear-gradient(135deg,#22D3EE,#0E7490);}

/* ================= PAGE HEADER ================= */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.page-title{font-size:23px;font-weight:700;margin:0;letter-spacing:-.01em;}
.page-sub{color:var(--text-dim);font-size:12.5px;margin-top:3px;}
.page-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.crumbs{font-size:12px;color:var(--text-dim);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.crumbs a{color:var(--text-dim);}
.crumbs a:hover{color:var(--purple-bright);}
.crumbs .sep{color:var(--text-faint);}
.crumbs .cur{color:var(--text);}

/* search */
.search-box{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  display:flex;align-items:center;gap:7px;padding:0 11px;height:34px;min-width:225px;
  color:var(--text-dim);
}
.search-box svg{width:13px;height:13px;stroke:var(--text-faint);flex-shrink:0;}
.search-box input{
  background:none;border:none;outline:none;color:var(--text);
  font-size:12.5px;width:100%;font-family:inherit;
}
.search-box input::placeholder{color:var(--text-faint);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 13px;height:34px;border-radius:8px;font-size:12.5px;font-weight:600;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  cursor:pointer;transition:all .13s;white-space:nowrap;
  box-shadow:0 1px 2px rgba(23,32,64,0.05);
}
.btn svg{width:13.5px;height:13.5px;stroke:currentColor;}
.btn:hover{background:var(--panel-2);border-color:#C7CEDD;}
.btn.primary{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 3px 12px rgba(109,74,239,.28);}
.btn.primary:hover{background:#7D5DF5;}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 3px 12px rgba(234,88,12,.25);}
.btn.orange:hover{background:#F26A22;}
.btn.success{background:var(--green);border-color:var(--green);color:#fff;}
.btn.success:hover{background:#1FB558;}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff;}
.btn.danger:hover{background:#E93D3D;}
.btn.ghost-danger{color:#B91C1C;border-color:rgba(220,38,38,.30);background:rgba(220,38,38,.05);}
.btn.ghost-danger:hover{background:rgba(220,38,38,.10);}
.btn.sm{height:29px;padding:0 10px;font-size:11.5px;border-radius:7px;}
.btn.block{width:100%;justify-content:center;}
.btn:disabled{opacity:.55;cursor:default;}
.btn .badge-count{background:rgba(255,255,255,.22);border-radius:5px;padding:0 6px;font-size:10.5px;}
.btn:not(.primary):not(.orange) .badge-count{background:var(--panel-3);color:var(--text-dim);}
.btn .spin{animation:spin 1s linear infinite;display:inline-flex;}
@keyframes spin{to{transform:rotate(360deg);}}
.icon-btn{
  width:30px;height:30px;border-radius:7px;border:none;background:transparent;
  color:var(--text-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.icon-btn:hover{background:var(--panel-3);color:var(--text);}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;}
.link{color:var(--purple-bright);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;}
.link:hover{text-decoration:underline;}
.link svg{width:12px;height:12px;stroke:currentColor;}
.link.orange{color:var(--orange);}

/* ================= KPI CARDS ================= */
.kpi-row{display:grid;gap:12px;margin-bottom:16px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));}
.kpi-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;position:relative;min-width:0;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.kpi-label{font-size:10.5px;color:var(--text-dim);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.kpi-ico{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.kpi-ico svg{width:15px;height:15px;}
.kpi-value{font-size:24px;font-weight:700;margin-top:7px;letter-spacing:-.02em;line-height:1.1;}
.kpi-value .unit{font-size:14px;color:var(--text-dim);font-weight:600;}
.kpi-delta{font-size:11px;margin-top:6px;color:var(--text-faint);display:flex;align-items:center;gap:4px;font-weight:500;}
.kpi-delta svg{width:11px;height:11px;}
.kpi-delta.good{color:var(--green);}
.kpi-delta.bad{color:var(--red);}
.kpi-delta .vs{color:var(--text-faint);font-weight:400;}
.kpi-sub{font-size:11px;color:var(--text-faint);margin-top:6px;}

/* secondary mini-kpis with sparkline */
.mini-kpi-row{display:grid;gap:12px;margin-bottom:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.mini-kpi{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;display:flex;align-items:center;gap:12px;justify-content:space-between;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.mini-kpi .mk-label{font-size:10.5px;color:var(--text-dim);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.mini-kpi .mk-value{font-size:16px;font-weight:700;margin-top:1px;}
.mini-kpi svg{flex-shrink:0;}

/* ================= CONNECTION CHIPS ================= */
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.conn-chip{
  display:flex;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--border);border-radius:9px;padding:7px 13px;font-size:12px;font-weight:600;
  cursor:pointer;transition:border-color .13s;
  box-shadow:0 1px 2px rgba(23,32,64,0.04);
}
.conn-chip:hover{border-color:#C7CEDD;}
.conn-chip .stat{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:11px;font-weight:500;}
.conn-chip .logo{width:17px;height:17px;display:flex;}

/* ================= CARDS / PANELS ================= */
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;min-width:0;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.card.pad-0{padding:0;overflow:hidden;}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.card-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.card-title .muted{color:var(--text-faint);font-weight:500;font-size:12px;}
.card-title svg{width:14px;height:14px;stroke:var(--text-dim);}
.grid{display:grid;gap:14px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}
.g4{grid-template-columns:repeat(4,1fr);}
.mt{margin-top:14px;}
.mb{margin-bottom:14px;}

/* screen with inspector layout */
.with-inspector{display:grid;grid-template-columns:minmax(0,1fr) var(--inspector-w);gap:16px;align-items:start;}
.with-inspector.collapsed{grid-template-columns:minmax(0,1fr);}
.with-inspector.collapsed .inspector{display:none;}

/* ================= INSPECTOR ================= */
.inspector{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  position:sticky;top:0;max-height:calc(100vh - 46px);overflow-y:auto;
  padding:16px;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.insp-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px;}
.insp-title{font-size:14.5px;font-weight:700;line-height:1.3;}
.insp-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.insp-close{margin-left:auto;flex-shrink:0;}
.insp-section{border-top:1px solid var(--border-soft);margin-top:14px;padding-top:12px;}
.insp-section-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.insp-section-title svg{width:13px;height:13px;stroke:var(--purple-bright);}
.kv{display:flex;justify-content:space-between;gap:14px;padding:3.5px 0;font-size:12px;align-items:baseline;}
.kv .k{color:var(--text-dim);flex-shrink:0;}
.kv .v{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere;}
.kv .v.mono{font-family:Consolas,'Cascadia Mono',monospace;font-size:11px;}
.quote{
  background:var(--panel-2);border:1px solid var(--border-soft);border-radius:8px;
  padding:9px 11px;font-size:12px;color:var(--text-dim);margin:6px 0;line-height:1.5;
}
.quote b{color:var(--text);font-weight:600;}

/* ================= TABS ================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--text-dim);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--purple-bright);border-bottom-color:var(--purple);}
.tab .tab-count{background:var(--panel-3);border-radius:5px;padding:0 6px;font-size:10.5px;color:var(--text-dim);}
.tab.active .tab-count{background:var(--purple-dim);color:var(--purple-bright);}
.tabs.pills{border-bottom:none;gap:6px;margin-bottom:14px;}
.tabs.pills .tab{border:1px solid var(--border);border-radius:8px;padding:6px 12px;background:var(--panel);}
.tabs.pills .tab.active{background:var(--purple-dim);border-color:rgba(109,74,239,.30);}

/* ================= FILTER BAR ================= */
.filter-bar{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.filter-item{display:flex;flex-direction:column;gap:4px;}
.filter-item label{font-size:10px;color:var(--text-faint);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
select.filter-select{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  border-radius:7px;height:30px;font-size:12px;padding:0 8px;outline:none;cursor:pointer;
  font-family:inherit;min-width:110px;
}
select.filter-select:hover{border-color:#C7CEDD;}
.filter-search{
  background:var(--panel-2);border:1px solid var(--border);border-radius:7px;height:30px;
  display:flex;align-items:center;padding:0 9px;gap:6px;min-width:170px;
}
.filter-search svg{width:12px;height:12px;stroke:var(--text-faint);}
.filter-search input{background:none;border:none;outline:none;color:var(--text);font-size:12px;width:100%;font-family:inherit;}
.clear-filters{color:var(--purple-bright);font-size:12px;font-weight:600;cursor:pointer;padding:6px 4px;margin-left:auto;}
.clear-filters:hover{text-decoration:underline;}

/* ================= TABLE ================= */
.tbl-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
.tbl thead th{
  text-align:left;font-size:10.5px;color:var(--text-dim);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--border);
  white-space:nowrap;user-select:none;background:var(--panel);position:sticky;top:0;z-index:2;
}
.tbl thead th.sortable{cursor:pointer;}
.tbl thead th.sortable:hover{color:var(--text);}
.tbl thead th .sort-ico{font-size:9px;margin-left:3px;color:var(--purple-bright);}
.tbl tbody td{
  padding:10px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle;
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
}
.tbl tbody tr{cursor:pointer;transition:background .1s;}
.tbl tbody tr:hover{background:rgba(109,74,239,0.045);}
.tbl tbody tr.selected{background:rgba(109,74,239,0.08);box-shadow:inset 2.5px 0 0 var(--purple);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl .cell-main{font-weight:600;color:var(--text);}
.tbl .cell-sub{font-size:11px;color:var(--text-faint);margin-top:1px;font-weight:400;}
.tbl .num{font-variant-numeric:tabular-nums;}
.tbl .mono{font-family:Consolas,'Cascadia Mono',monospace;font-size:11.5px;color:var(--text-dim);}
.tbl .dim{color:var(--text-dim);}
.entity-cell{display:flex;align-items:center;gap:10px;min-width:0;}
.entity-ico{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.entity-ico svg{width:14px;height:14px;}
.owner-cell{display:flex;align-items:center;gap:8px;}
.owner-cell .cell-sub{margin-top:0;}

/* table footer */
.tbl-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;border-top:1px solid var(--border);flex-wrap:wrap;font-size:12px;color:var(--text-dim);
}
.pager{display:flex;gap:5px;align-items:center;}
.page-btn{
  min-width:27px;height:27px;padding:0 7px;border-radius:6px;border:1px solid var(--border);
  background:var(--panel);color:var(--text-dim);font-size:11.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.page-btn svg{width:12px;height:12px;stroke:currentColor;}
.page-btn:hover:not(:disabled){border-color:#C7CEDD;color:var(--text);}
.page-btn.cur{background:var(--purple);border-color:var(--purple);color:#fff;}
.page-btn:disabled{opacity:.4;cursor:default;}
.rows-select{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-dim);}

/* ================= BADGES ================= */
.badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:6px;
  font-size:10.5px;font-weight:700;padding:2.5px 8px;letter-spacing:.02em;white-space:nowrap;
}
.badge .bdot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.bg-green{background:var(--green-dim);color:#15803D;}
.bg-red{background:var(--red-dim);color:#B91C1C;}
.bg-amber{background:var(--amber-dim);color:#B45309;}
.bg-orange{background:var(--orange-dim);color:#C2410C;}
.bg-purple{background:var(--purple-dim);color:var(--purple-bright);}
.bg-blue{background:var(--blue-dim);color:#1D4ED8;}
.bg-cyan{background:var(--cyan-dim);color:#0E7490;}
.bg-gray{background:rgba(90,100,120,0.10);color:var(--text-dim);}
.bg-pink{background:var(--pink-dim);color:#BE185D;}
/* plain status text with dot (no bg) */
.status-text{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;}
.st-green{color:#15803D;}
.st-red{color:#B91C1C;}
.st-amber{color:#B45309;}
.st-gray{color:var(--text-dim);}
.st-blue{color:#1D4ED8;}
.st-purple{color:var(--purple-bright);}

/* ================= PROGRESS / BARS ================= */
.bar-bg{height:4.5px;background:#E4E8F1;border-radius:3px;overflow:hidden;min-width:54px;}
.bar-fill{height:100%;border-radius:3px;background:var(--green);transition:width .5s;}
.bar-cell{display:flex;flex-direction:column;gap:4px;min-width:70px;}
.bar-cell .bar-num{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.hbar-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12px;}
.hbar-row .hb-label{width:150px;flex-shrink:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbar-row .hb-bar{flex:1;}
.hbar-row .hb-val{width:70px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0;}
.hbar-row .hb-pct{width:46px;text-align:right;color:var(--text-dim);font-size:11px;flex-shrink:0;}

/* ================= LEGEND ================= */
.legend{display:flex;flex-direction:column;gap:8px;}
.legend-item{display:flex;align-items:center;gap:9px;font-size:12px;}
.legend-item .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.legend-item .lg-label{color:var(--text);}
.legend-item .lg-val{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;}
.legend-item .lg-pct{color:var(--text-dim);width:52px;text-align:right;font-variant-numeric:tabular-nums;}
.legend.inline{flex-direction:row;flex-wrap:wrap;gap:14px;}

/* ================= CONNECTION CARDS ================= */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin-bottom:16px;}
.conn-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:15px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 3px rgba(23,32,64,0.05);
}
.conn-card .cc-head{display:flex;align-items:flex-start;gap:10px;}
.conn-card .cc-logo{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.conn-card .cc-name{font-weight:700;font-size:13.5px;line-height:1.25;}
.conn-card .cc-kv{display:flex;justify-content:space-between;font-size:11.5px;padding:2.5px 0;}
.conn-card .cc-kv .k{color:var(--text-dim);}
.conn-card .cc-kv .v{font-weight:600;}
.conn-card .cc-actions{display:flex;gap:8px;margin-top:4px;}
.conn-card .cc-actions .btn{flex:1;justify-content:center;}

/* ================= MODAL ================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,28,48,0.38);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:200;
  animation:fadeIn .15s;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  width:min(560px,92vw);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow);animation:slideUp .18s;
}
.modal.wide{width:min(860px,94vw);}
@keyframes slideUp{from{transform:translateY(12px);opacity:0;}to{transform:none;opacity:1;}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);}
.modal-title{font-size:15px;font-weight:700;}
.modal-body{padding:16px 18px;overflow-y:auto;font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 18px;border-top:1px solid var(--border);}
textarea.input, input.input{
  width:100%;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:12.5px;padding:9px 11px;outline:none;font-family:inherit;resize:vertical;
}
textarea.input:focus, input.input:focus{border-color:var(--purple);}
.form-row{margin-bottom:12px;}
.form-row label{display:block;font-size:11px;color:var(--text-dim);font-weight:600;margin-bottom:5px;letter-spacing:.03em;}

/* ================= TOASTS ================= */
.toast-root{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:9px;}
.toast{
  background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--purple);
  border-radius:10px;padding:11px 15px;min-width:270px;max-width:380px;
  box-shadow:var(--shadow);display:flex;gap:10px;align-items:flex-start;
  animation:toastIn .2s;font-size:12.5px;
}
@keyframes toastIn{from{transform:translateX(30px);opacity:0;}to{transform:none;opacity:1;}}
.toast.out{transition:all .25s;opacity:0;transform:translateX(30px);}
.toast .t-ico{flex-shrink:0;margin-top:1px;}
.toast .t-ico svg{width:15px;height:15px;}
.toast .t-title{font-weight:700;font-size:12.5px;color:var(--text);}
.toast .t-msg{color:var(--text-dim);font-size:11.5px;margin-top:2px;line-height:1.45;}
.toast.success{border-left-color:var(--green);}
.toast.error{border-left-color:var(--red);}
.toast.warn{border-left-color:var(--amber);}

/* ================= DROPDOWN MENU ================= */
.menu{
  position:fixed;z-index:250;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:5px;min-width:190px;box-shadow:var(--shadow);
  animation:fadeIn .12s;
}
.menu-item{
  display:flex;align-items:center;gap:9px;padding:7.5px 10px;border-radius:7px;
  font-size:12.5px;color:var(--text);cursor:pointer;font-weight:500;
}
.menu-item svg{width:13.5px;height:13.5px;stroke:var(--text-dim);flex-shrink:0;}
.menu-item:hover{background:var(--panel-2);}
.menu-item.danger{color:#B91C1C;}
.menu-item.danger svg{stroke:#B91C1C;}
.menu-sep{height:1px;background:var(--border);margin:5px 4px;}
.menu-head{font-size:10.5px;color:var(--text-faint);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px 4px;}

/* ================= CHARTS ================= */
.chart-box{position:relative;}
.chart-box svg{display:block;width:100%;}
.axis-label{font-size:10px;fill:var(--text-faint);}
.chart-tip{
  position:fixed;z-index:260;background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:8px 11px;font-size:11.5px;pointer-events:none;
  box-shadow:var(--shadow);display:none;
}
.chart-tip .ct-title{font-weight:700;margin-bottom:3px;color:var(--text);}
.chart-tip .ct-row{display:flex;align-items:center;gap:7px;color:var(--text-dim);padding:1px 0;}
.chart-tip .sw{width:8px;height:8px;border-radius:2px;}

/* donut center */
.donut-wrap{display:flex;align-items:center;gap:18px;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.donut-center .dc-val{font-size:21px;font-weight:700;}
.donut-center .dc-label{font-size:10.5px;color:var(--text-dim);margin-top:1px;}

/* ================= REPLAY STUDIO BROWSER ================= */
.rp-layout{display:grid;grid-template-columns:332px minmax(0,1fr);gap:14px;align-items:start;}
@media (max-width:1100px){.rp-layout{grid-template-columns:1fr;}}
.rp-rail-list{display:flex;flex-direction:column;max-height:calc(100vh - 305px);min-height:120px;overflow-y:auto;margin:0 -14px -14px;}
.rp-run{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:none;border:0;border-top:1px solid var(--border-soft);padding:9px 14px;
}
.rp-run:hover{background:var(--panel-2);}
.rp-run.active{background:var(--purple-dim);box-shadow:inset 3px 0 0 var(--purple);}
.rp-run-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rp-run-preview{
  color:var(--text-dim);font-size:11.5px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rp-run-facts{color:var(--text-faint);font-size:10.5px;margin-top:3px;}
.rp-more{border-top:1px solid var(--border-soft);padding:8px 14px;}

/* ================= TIMELINE / PIPELINE ================= */
.pipe{display:flex;flex-direction:column;gap:0;}
.pipe-step{display:flex;gap:11px;position:relative;padding-bottom:16px;}
.pipe-step:last-child{padding-bottom:0;}
.pipe-step::before{
  content:'';position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--border);
}
.pipe-step:last-child::before{display:none;}
.pipe-dot{
  width:21px;height:21px;border-radius:50%;flex-shrink:0;z-index:1;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  background:var(--panel-3);border:1.5px solid var(--border);color:var(--text-dim);
}
.pipe-dot svg{width:11px;height:11px;}
.pipe-dot.done{background:var(--green-dim);border-color:var(--green);color:#15803D;}
.pipe-dot.active{background:var(--purple-dim);border-color:var(--purple);color:var(--purple-bright);}
.pipe-dot.fail{background:var(--red-dim);border-color:var(--red);color:#B91C1C;}
.pipe-body{flex:1;min-width:0;padding-top:1px;}
.pipe-title{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px;}
.pipe-sub{font-size:11px;color:var(--text-faint);margin-top:1px;}

/* ================= MISC ================= */
.tag{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:600;margin:2px 3px 2px 0;}
.stars{color:#E9A23B;font-size:13px;letter-spacing:1px;}
.stars .off{color:#D4DAE6;}
.empty-state{padding:44px 20px;text-align:center;color:var(--text-faint);}
.empty-state svg{width:34px;height:34px;stroke:var(--text-faint);margin-bottom:10px;}
.empty-state .es-title{font-size:13.5px;font-weight:600;color:var(--text-dim);margin-bottom:4px;}
.sec-title{font-size:14px;font-weight:700;margin:20px 0 12px;display:flex;align-items:center;gap:9px;}
.sec-title:first-child{margin-top:0;}
.divider{height:1px;background:var(--border);margin:14px 0;}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start;}
.muted{color:var(--text-dim);}
.faint{color:var(--text-faint);}
.small{font-size:11px;}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.w-100{width:100%;}
.flex{display:flex;align-items:center;gap:9px;}
.flex-wrap{flex-wrap:wrap;}
.between{justify-content:space-between;}
.grow{flex:1;min-width:0;}
code.inline{background:var(--panel-3);border-radius:5px;padding:1px 6px;font-family:Consolas,monospace;font-size:11px;color:#6D28D9;}

/* masked secret */
.secret-val{
  display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:8px;padding:7px 10px;
  font-family:Consolas,monospace;font-size:11.5px;color:var(--text-dim);
}
.secret-val .sv{flex:1;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px;}

/* rating dots for eval scores */
.score-pill{font-weight:700;font-variant-numeric:tabular-nums;}
.sc-good{color:#15803D;}.sc-mid{color:#B45309;}.sc-bad{color:#B91C1C;}

/* live indicator */
.live-pill{
  display:inline-flex;align-items:center;gap:7px;border-radius:7px;padding:5px 11px;
  background:var(--green-dim);color:#15803D;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid rgba(22,163,74,.30);letter-spacing:.05em;
}
.live-pill.paused{background:var(--amber-dim);color:#B45309;border-color:rgba(217,119,6,.30);}
tr.flash-in td{animation:rowIn 1.4s;}
@keyframes rowIn{0%{background:rgba(109,74,239,.16);}100%{background:transparent;}}

/* replay */
.replay-transcript{display:flex;flex-direction:column;gap:10px;}
.msg{max-width:88%;border-radius:11px;padding:10px 13px;font-size:12.5px;line-height:1.55;}
.msg.user{align-self:flex-end;background:var(--purple-dim);border:1px solid rgba(109,74,239,.25);}
.msg.agent{align-self:flex-start;background:var(--panel-2);border:1px solid var(--border);}
.msg .msg-meta{font-size:10px;color:var(--text-faint);margin-bottom:4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.msg.tool{align-self:flex-start;background:var(--panel-2);border:1px dashed #B9C2D6;font-family:Consolas,monospace;font-size:11px;color:#5A6478;width:88%;}

/* print/responsive kindness */
@media (max-width:1200px){
  .with-inspector{grid-template-columns:1fr;}
  .inspector{position:static;max-height:none;}
  .two-col{grid-template-columns:1fr;}
  .g3,.g4{grid-template-columns:1fr 1fr;}
}

/* ---- async table states -------------------------------------------------- */
.tbl-loading{padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.skeleton-row{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--panel-2) 25%,#EDF0F6 50%,var(--panel-2) 75%);background-size:300% 100%;animation:shimmer 1.25s ease-in-out infinite;}
.skeleton-row:nth-child(2n){width:88%}
.skeleton-row:nth-child(3n){width:94%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.card-loading{position:relative;min-height:74px;}
.card-loading::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);background-size:300% 100%;animation:shimmer 1.25s ease-in-out infinite;pointer-events:none;}
.screen-error{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;color:var(--muted);}
.screen-error svg{width:26px;height:26px;stroke:var(--red);}
.screen-error .se-title{font-weight:650;color:var(--text);font-size:14px;}
/* A dialog action in flight (components.js openModal): the pressed button says
   so, and the dialog takes programmatic focus without drawing a ring round itself. */
.btn.loading::before{content:"";width:11px;height:11px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;}
.modal:focus{outline:none;}
/* A reload with the previous rows still on screen: dim them so a slow sort or
   page change does not look like a dead click. */
.tbl.is-stale tbody{opacity:.5;transition:opacity .12s .15s;}
@media (prefers-reduced-motion: reduce){.skeleton-row,.card-loading::after,.btn.loading::before{animation:none}}

/* ---- sign-in gate -------------------------------------------------------- */
#auth-root{position:fixed;inset:0;z-index:400;}
/* Centred when the card fits, scrollable from its top when it does not: the
   card's auto margins do the centring and fall to zero rather than going
   negative, so on a short window (a phone on its side, a zoomed laptop) the
   branded header is never pushed above the top edge where nothing can reach it. */
.auth-shell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;
  background:radial-gradient(1100px 620px at 18% -10%,rgba(109,74,239,.16),transparent 60%),var(--bg);}
.auth-card{width:100%;max-width:392px;background:var(--panel);border:1px solid var(--border);border-radius:16px;
  margin:auto;
  padding:30px 28px 24px;box-shadow:0 20px 60px rgba(20,24,40,.14);display:flex;flex-direction:column;gap:16px;}
/* The card's header is a brand plate (see .brand-logo above) laid over the
   card's own top border: the negative margins are the card's padding plus its
   1px border, and the radius is the card's outer radius, so the dark header
   meets the card edge exactly and the logo's "F" lines up with the fields. */
.auth-brand{
  --logo-h:48px;
  margin:-31px -29px 8px;padding:27px 29px 24px;
  background:var(--brand-ink);color:#fff;border-radius:16px 16px 0 0;
}
.auth-name{margin:12px 0 0;font-weight:700;font-size:18px;line-height:1.25;letter-spacing:.005em;color:#fff;}
.auth-note{font-size:12.5px;color:#B45309;background:var(--amber-dim);border:1px solid rgba(180,83,9,.18);
  border-radius:8px;padding:9px 11px;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field span{font-size:12px;font-weight:600;color:var(--text);}
.auth-field input{height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);
  font:inherit;font-size:13px;color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s;}
.auth-field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,74,239,.14);background:var(--panel);}
.auth-error{font-size:12.5px;color:#B91C1C;background:var(--red-dim);border:1px solid rgba(185,28,28,.18);
  border-radius:8px;padding:9px 11px;}
.auth-submit{justify-content:center;height:38px;font-size:13px;}
.auth-foot{font-size:11.5px;color:var(--muted);line-height:1.5;border-top:1px solid var(--border);padding-top:14px;}

/* ---- workspace switcher -------------------------------------------------- */
.ws-list{display:flex;flex-direction:column;gap:8px;}
.ws-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel);cursor:pointer;font:inherit;}
.ws-option:hover{background:var(--panel-2);border-color:#C7CEDD;}
.ws-option.current{border-color:var(--purple);background:var(--purple-dim);}
.ws-name{font-size:13px;font-weight:600;color:var(--text);}
.ws-slug{font-size:11.5px;color:var(--muted);font-family:var(--mono,ui-monospace,monospace);}

/* ---- truthfulness banner: says when a number is a floor, not a total ----- */
.scan-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:9px 12px;border-radius:9px;
  font-size:12.2px;color:#B45309;background:var(--amber-dim);border:1px solid rgba(180,83,9,.18);}
.scan-note svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;}

/* ---- replay playback --------------------------------------------------- */
.pipe-step.playing{background:var(--purple-dim);border-radius:9px;}
.pipe-step.playing .pipe-title{color:var(--purple-bright);}
.pipe-step.played{opacity:.62;}