/* ============================================================
   STOCKNET TERMINAL — light, dense, monochrome + yellow
   ============================================================ */

:root{
  --bg:#F4F5F7; --panel:#FFFFFF; --panel-2:#FAFBFC; --panel-3:#EEF0F3;
  --line:rgba(15,17,22,.10); --line-2:rgba(15,17,22,.15); --line-3:rgba(15,17,22,.24);
  --ink:#0E1116; --ink-2:#545B66; --ink-3:#828A95; --ink-4:#AAB1BB;
  --hl:#FFF386; --hl-line:rgba(214,180,0,.5); --hl-soft:rgba(255,243,134,.4);
  --good:#0E1116; --bad:#7A828D;
  --r:6px; --r-sm:4px; --r-lg:10px;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --sidebar:236px; --rightbar:340px; --topbar:52px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
::selection{ background:var(--hl); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.mono{ font-family:var(--mono); }
svg.i{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
svg.i.sm{ width:13px; height:13px; }
svg.i.lg{ width:20px; height:20px; }

.hl{ background:linear-gradient(180deg,transparent 56%, var(--hl-soft) 56%); padding:0 .12em; }

/* ============================================================ SHELL */
.app{ display:grid; grid-template-columns:var(--sidebar) 1fr; height:100vh; }
.app.with-right{ grid-template-columns:var(--sidebar) 1fr var(--rightbar); }

/* ---- sidebar ---- */
.sidebar{ background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.ws-switch{ padding:11px 12px; border-bottom:1px solid var(--line); position:relative; }
.ws-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border-radius:var(--r); transition:background .15s; }
.ws-btn:hover{ background:var(--panel-3); }
.ws-logo{ width:30px; height:30px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:700; flex:none; }
.ws-meta{ text-align:left; min-width:0; flex:1; }
.ws-name{ font-size:13px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-kind{ font-family:var(--mono); font-size:10px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-switch .chev{ color:var(--ink-3); flex:none; }
.ws-pop{ position:absolute; top:calc(100% - 4px); left:12px; right:12px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:0 18px 40px -16px rgba(15,17,22,.3); padding:5px; z-index:50; }
.ws-pop button{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border-radius:var(--r-sm); }
.ws-pop button:hover{ background:var(--panel-3); }

.nav{ padding:10px 10px 4px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.nav-lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4); padding:12px 8px 5px; }
.nav-cat{ display:flex; align-items:center; gap:8px; padding:15px 8px 5px; }
.nav-cat span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4); flex:1; }
.nav-cat-add{ width:20px; height:20px; border-radius:4px; display:grid; place-items:center; color:var(--ink-4); flex:none; }
.nav-cat-add:hover{ background:var(--panel-3); color:var(--ink); }
.nav-sub .lbl{ font-weight:500; }
.nav-sub .sa-dot{ margin:0 4px; flex:none; }
.nav-when{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--ink-4); flex:none; padding-left:8px; }
.nav-item.active .nav-when{ color:rgba(255,255,255,.5); }
.nav-item{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--r); color:var(--ink-2); font-size:13px; font-weight:500; transition:background .14s, color .14s; width:100%; text-align:left; }
.nav-item:hover{ background:var(--panel-3); color:var(--ink); }
.nav-item.active{ background:var(--ink); color:#fff; }
.nav-item .i{ flex:none; opacity:.85; }
.nav-item .lbl{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item .kbd{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--ink-4); border:1px solid var(--line); border-radius:3px; padding:0 4px; }
.nav-item.active .kbd{ color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.2); }

.side-agents{ margin-top:auto; border-top:1px solid var(--line); padding:10px; }
.sa-row{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-sm); }
.sa-row:hover{ background:var(--panel-3); }
.sa-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-4); flex:none; }
.sa-dot.running{ background:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); animation:pulse 1.6s infinite; }
.sa-dot.done{ background:var(--good); }
.sa-dot.scheduled{ background:var(--ink-4); }
@keyframes pulse{ 50%{ opacity:.4 } }
.sa-name{ font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.sa-pct{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }

.side-user{ border-top:1px solid var(--line); padding:9px 12px; display:flex; align-items:center; gap:9px; }
.avatar{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:700; flex:none; border:1px solid var(--line-2); }
.av-1{ background:#E8EAED; } .av-2{ background:#E2E5E9; } .av-3{ background:#ECEEF1; } .av-4{ background:#E5E8EC; }
.su-name{ font-size:12px; font-weight:600; flex:1; }
.su-seats{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }

/* ---- topbar ---- */
.main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{ height:var(--topbar); border-bottom:1px solid var(--line); background:var(--panel); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:0 14px; flex:none; }
.tb-left{ justify-self:start; min-width:0; }
.tb-right{ justify-self:end; }
.tb-title{ font-size:14px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; white-space:nowrap; flex:none; }
.tb-title .badge{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); border-radius:20px; padding:1px 8px; }
.tb-search{ justify-self:center; display:flex; align-items:center; gap:8px; background:var(--panel-3); border:1px solid var(--line); border-radius:var(--r); padding:6px 11px; width:380px; max-width:100%; color:var(--ink-3); cursor:pointer; transition:border-color .14s, background .14s; }
.tb-search:hover{ border-color:var(--line-2); background:var(--panel); }
.tb-search-ph{ flex:1; text-align:left; font-size:12.5px; }
.tb-search input{ border:none; background:none; outline:none; font-family:var(--sans); font-size:12.5px; color:var(--ink); flex:1; }
.tb-search .kbd{ font-family:var(--mono); font-size:9.5px; border:1px solid var(--line-2); border-radius:3px; padding:0 4px; }

/* ---- sidebar brand ---- */
.side-brand{ height:var(--topbar); display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--line); flex:none; }
.side-logo{ width:22px; height:22px; flex:none; }
.side-brandname{ font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.side-brandname b{ font-weight:700; }

/* ---- header workspace switcher ---- */
.ws-logo.sm{ width:24px; height:24px; border-radius:6px; font-size:10px; }
.ws-logo.ghost{ background:var(--panel-3); color:var(--ink-2); }
.hdr-ws{ position:relative; }
.hdr-ws-btn{ display:flex; align-items:center; gap:9px; height:36px; padding:0 9px 0 7px; border-radius:8px; border:1px solid var(--line); background:var(--panel); max-width:230px; transition:background .14s; }
.hdr-ws-btn:hover{ background:var(--panel-3); }
.hdr-ws-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-ws .i{ color:var(--ink-3); flex:none; }
.hdr-ws-pop{ position:absolute; left:0; top:calc(100% + 8px); width:252px; background:var(--panel); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 18px 44px -16px rgba(15,17,22,.3); padding:5px; z-index:300; }
.hdr-ws-lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); padding:7px 9px 6px; }
.hdr-ws-pop button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; border-radius:6px; text-align:left; }
.hdr-ws-pop button:hover{ background:var(--panel-3); }
.hdr-ws-meta{ flex:1; min-width:0; }
.hdr-ws-pop .ws-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-ws-pop .ws-kind{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.hdr-ws-pop .i{ color:var(--ink); flex:none; }
.hdr-ws-sep{ height:1px; background:var(--line); margin:4px 6px; }

/* ---- header user menu ---- */
.hdr-user{ position:relative; }
.user-avatar{ width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:700; transition:transform .12s; }
.user-avatar:hover{ transform:translateY(-1px); }
.user-avatar.lg{ width:38px; height:38px; font-size:12px; }
.user-menu{ position:absolute; right:0; top:calc(100% + 8px); width:244px; background:var(--panel); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 20px 50px -18px rgba(15,17,22,.32); overflow:hidden; z-index:300; }
.um-head{ display:flex; gap:11px; align-items:center; padding:13px; border-bottom:1px solid var(--line); }
.um-name{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
.um-mail{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:2px; }
.um-list{ padding:5px; }
.um-item{ display:flex; align-items:center; gap:11px; width:100%; padding:8px 9px; border-radius:6px; font-size:13px; color:var(--ink-2); text-align:left; }
.um-item:hover{ background:var(--panel-3); color:var(--ink); }
.um-item .i{ color:var(--ink-3); flex:none; }
.um-item:hover .i{ color:var(--ink); }
.um-sep{ height:1px; background:var(--line); }

/* ---- search modal ---- */
.search-overlay{ position:fixed; inset:0; z-index:500; background:rgba(15,17,22,.28); backdrop-filter:blur(2px); display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.search-modal{ width:min(620px,92vw); background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 40px 90px -30px rgba(15,17,22,.5); overflow:hidden; display:flex; flex-direction:column; max-height:70vh; animation:sp-in .14s ease; }
.sm-input{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink-3); flex:none; }
.sm-input input{ flex:1; border:none; outline:none; background:none; font-family:var(--sans); font-size:15px; color:var(--ink); }
.sm-input .kbd{ font-family:var(--mono); font-size:10px; border:1px solid var(--line-2); border-radius:4px; padding:1px 6px; color:var(--ink-3); }
.sm-results{ overflow-y:auto; padding:6px; }
.sm-group{ padding:3px 0; }
.sm-glabel{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); padding:8px 10px 5px; }
.sm-row{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px; border-radius:7px; text-align:left; }
.sm-row.active{ background:var(--panel-3); }
.sm-ico{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); flex:none; }
.sm-row.active .sm-ico{ color:var(--ink); border-color:var(--line-2); }
.sm-l{ font-size:13.5px; color:var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); flex:none; }
.sm-empty{ padding:30px; text-align:center; color:var(--ink-3); font-size:13px; }
.sm-foot{ display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px; color:var(--ink-4); flex:none; }
.sm-foot .kbd{ border:1px solid var(--line-2); border-radius:3px; padding:0 4px; margin-right:6px; }
.tb-btn{ width:34px; height:34px; border-radius:var(--r); display:grid; place-items:center; color:var(--ink-2); border:1px solid var(--line); background:var(--panel); transition:background .14s; position:relative; }
.tb-btn:hover{ background:var(--panel-3); color:var(--ink); }
.tb-btn .ndot{ position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--ink); }

/* ---- workspace scroll area ---- */
.work{ flex:1; overflow-y:auto; min-height:0; }
.work-pad{ padding:20px 22px 40px; max-width:1180px; }
.work-pad.wide{ max-width:none; }

/* ---- right context panel ---- */
.rightbar{ background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.rb-head{ height:var(--topbar); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; padding:0 14px; flex:none; }
.rb-head .rb-t{ font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.rb-head .rb-close{ margin-left:auto; width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ink-3); }
.rb-head .rb-close:hover{ background:var(--panel-3); color:var(--ink); }
.rb-body{ overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.rb-lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }

/* source card */
.src-card{ border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.src-card.active{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.src-top{ display:flex; gap:10px; align-items:center; padding:11px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.src-tag{ width:34px; height:34px; border-radius:6px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:9.5px; font-weight:700; flex:none; }
.src-tt{ font-size:12.5px; font-weight:600; }
.src-mm{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:1px; }
.src-quote{ padding:12px; font-size:12.5px; line-height:1.6; color:var(--ink-2); }
.src-quote mark{ background:var(--hl); color:var(--ink); padding:0 2px; }
.src-foot{ padding:9px 12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--ink-2); }

/* ============================================================ COMMON */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); }
.sec-t{ font-size:13px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; white-space:nowrap; }
.sec-t .mono-n{ font-family:var(--mono); font-size:10px; color:var(--ink-3); font-weight:500; }
.muted{ color:var(--ink-3); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pill{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; border:1px solid var(--line-2); border-radius:20px; padding:2px 9px; color:var(--ink-2); }
.pill.live{ border-color:var(--hl-line); background:var(--hl-soft); color:var(--ink); }
.pill.warn{ border-color:var(--line-3); }
.tklink{ font-family:var(--mono); font-weight:700; }
.up{ color:var(--good); font-weight:700; }
.down{ color:var(--bad); font-weight:700; }
.delta{ font-family:var(--mono); font-size:11px; }

.btn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--r); font-size:12.5px; font-weight:600; white-space:nowrap; transition:background .15s, border-color .15s, transform .12s; }
.btn:active{ transform:translateY(1px); }
.btn-solid{ background:var(--ink); color:#fff; }
.btn-solid:hover{ background:#262b33; }
.btn-out{ border:1px solid var(--line-2); color:var(--ink); background:var(--panel); }
.btn-out:hover{ background:var(--panel-3); }
.btn.sm{ height:28px; padding:0 10px; font-size:11.5px; }

/* stat tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tile{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 15px; }
.tile .tl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.tile .tv{ font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:7px; }
.tile .td{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:3px; }
.tile .bar{ height:4px; background:var(--panel-3); border-radius:20px; margin-top:10px; overflow:hidden; }
.tile .bar i{ display:block; height:100%; background:var(--ink); border-radius:20px; }

/* generic table */
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th.num, .tbl td.num{ text-align:right; font-family:var(--mono); }
.tbl td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ cursor:pointer; transition:background .12s; }
.tbl tbody tr:hover{ background:var(--panel-2); }
.tbl tbody tr.open{ background:var(--panel-2); }
.tbl .sub td{ padding:0; border-bottom:1px solid var(--line); }
.tbl .sub .subin{ padding:0 12px 13px; color:var(--ink-2); font-size:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.subin .kv .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.subin .kv .v{ font-family:var(--mono); font-size:13px; margin-top:3px; }

.thesis-tag{ font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:20px; border:1px solid var(--line-2); white-space:nowrap; }
.thesis-tag.on-track::before{ content:"● "; color:var(--ink); }
.thesis-tag.watch::before{ content:"● "; color:var(--ink-3); }
.thesis-tag.at-risk::before{ content:"▲ "; color:var(--ink); }

/* grids */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.span-2{ grid-column:span 2; }

/* feed rows */
.feed{ display:flex; flex-direction:column; }
.feed-row{ display:flex; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); transition:background .12s; cursor:pointer; }
.feed-row:last-child{ border-bottom:none; }
.feed-row:hover{ background:var(--panel-2); }
.feed-kind{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); width:54px; flex:none; }
.feed-tk{ font-family:var(--mono); font-weight:700; font-size:11.5px; width:54px; flex:none; }
.feed-title{ flex:1; font-size:12.5px; }
.feed-by{ font-size:11px; color:var(--ink-3); }
.feed-cites{ font-family:var(--mono); font-size:10px; color:var(--ink-2); border:1px solid var(--line); border-radius:20px; padding:1px 7px; display:inline-flex; gap:4px; align-items:center; }
.feed-time{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); width:34px; text-align:right; flex:none; }

/* alerts */
.alert{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.alert:last-child{ border-bottom:none; }
.alert:hover{ background:var(--panel-2); }
.alert .sev{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.alert .sev.flag{ background:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.alert .sev.up{ background:var(--good); }
.alert .sev.down{ background:var(--bad); }
.alert .a-tk{ font-family:var(--mono); font-weight:700; font-size:11.5px; }
.alert .a-msg{ font-size:12.5px; margin-top:1px; }
.alert .a-src{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:3px; }
.alert .a-move{ margin-left:auto; font-family:var(--mono); font-size:11px; flex:none; }

/* ============================================================ TERMINAL VIEW */
.term{ display:flex; flex-direction:column; height:100%; }
.term-scroll{ flex:1; overflow-y:auto; padding:20px 22px; }
.term-thread{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.t-msg{ display:flex; gap:12px; }
.t-ava{ width:28px; height:28px; border-radius:7px; flex:none; display:grid; place-items:center; }
.t-ava.you{ background:var(--panel-3); font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-2); }
.t-ava.bot{ background:var(--ink); color:#fff; }
.t-bubble{ flex:1; min-width:0; }
.t-who{ font-size:11.5px; font-weight:600; margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.t-who .when{ font-family:var(--mono); font-size:10px; color:var(--ink-4); font-weight:400; }
.t-q{ font-size:14px; line-height:1.5; }
.t-steps{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.t-step{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-2); }
.t-step .si{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; flex:none; }
.t-step.done .si{ background:var(--ink); border-color:var(--ink); color:#fff; }
.t-step.run .si{ border-color:var(--ink); border-top-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.t-ans{ font-size:14px; line-height:1.7; }
.t-ans b{ font-weight:700; }
.cite-chip{ display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:10px; background:var(--hl-soft); border:1px solid var(--hl-line); color:var(--ink); border-radius:20px; padding:0 6px; margin:0 2px; vertical-align:1px; cursor:pointer; transition:background .14s; }
.cite-chip:hover{ background:var(--hl); }
.cite-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.t-table{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:14px; }
.t-cursor{ display:inline-block; width:7px; height:15px; background:var(--ink); vertical-align:-3px; margin-left:1px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* composer */
.composer{ border-top:1px solid var(--line); background:var(--panel); padding:12px 22px 16px; flex:none; }
.composer-in{ max-width:760px; margin:0 auto; }
.sugg{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.sugg button{ font-size:11.5px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:20px; padding:5px 11px; background:var(--panel); transition:background .14s, border-color .14s; }
.sugg button:hover{ background:var(--panel-3); border-color:var(--line-3); color:var(--ink); }
.composer-box{ display:flex; align-items:flex-end; gap:10px; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:10px 10px 10px 14px; background:var(--panel); }
.composer-box:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.composer-box textarea{ flex:1; border:none; outline:none; resize:none; font-family:var(--sans); font-size:13.5px; line-height:1.5; max-height:120px; background:none; color:var(--ink); padding:5px 0; }
.composer-agent{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); padding:6px 0; }
.send-btn{ width:34px; height:34px; border-radius:var(--r); background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; transition:opacity .14s; }
.send-btn:disabled{ opacity:.3; cursor:default; }

/* ============================================================ DEEP DIVE */
.dd-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.dd-tk{ font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:-.02em; }
.dd-name{ font-size:14px; color:var(--ink-2); }
.dd-px{ margin-left:auto; text-align:right; }
.dd-px .p{ font-family:var(--mono); font-size:24px; font-weight:700; }
.dd-tabs{ display:flex; gap:3px; border-bottom:1px solid var(--line); margin-top:18px; }
.dd-tab{ padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .14s; }
.dd-tab:hover{ color:var(--ink); }
.dd-tab.active{ color:var(--ink); border-bottom-color:var(--ink); }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.kpi-c{ border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; background:var(--panel); cursor:pointer; transition:border-color .14s; }
.kpi-c:hover{ border-color:var(--line-3); }
.kpi-c .kl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; }
.kpi-c .kv{ font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:-.02em; margin-top:8px; }
.kpi-c .kd{ font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:3px; }
.risk{ display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:13px 0; border-bottom:1px solid var(--line); }
.risk:last-child{ border-bottom:none; }
.risk .rr{ font-size:13px; font-weight:600; }
.risk .rd{ font-size:12px; color:var(--ink-3); grid-column:1; }
.risk .rl{ font-family:var(--mono); font-size:10px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:20px; padding:2px 9px; align-self:start; }

/* ============================================================ IDEAS */
.idea-split{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
.idea-row{ display:grid; grid-template-columns:50px 1fr 90px; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.idea-row:last-child{ border-bottom:none; }
.idea-row:hover{ background:var(--panel-2); }
.idea-row.sel{ background:var(--panel-3); }
.idea-tk{ font-family:var(--mono); font-weight:700; font-size:13px; }
.idea-bar{ height:7px; background:var(--panel-3); border-radius:20px; overflow:hidden; }
.idea-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--ink),#3a4049); border-radius:20px; transition:width .8s cubic-bezier(.2,.7,.2,1); }
.idea-fit{ font-family:var(--mono); font-size:12px; text-align:right; font-weight:700; }
.idea-detail .big-fit{ font-family:var(--mono); font-size:40px; font-weight:700; letter-spacing:-.03em; }

/* ============================================================ MEMORY */
.mem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mem-item{ padding:13px 0; border-bottom:1px solid var(--line); }
.mem-item:last-child{ border-bottom:none; }
.mem-k{ font-size:13px; font-weight:600; }
.mem-v{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.rule{ display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); }
.rule:last-child{ border-bottom:none; }
.rule .rk{ width:20px; height:20px; border-radius:5px; background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; }
.rule .rt{ font-size:12.5px; }
.rule .rs{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:2px; }

/* ============================================================ AGENT TASKS */
.task-badge{ margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:700; min-width:16px; height:16px; padding:0 4px; border-radius:20px; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.nav-item.active .task-badge{ background:#fff; color:var(--ink); }

.task-compose{ display:flex; gap:9px; padding:13px 14px; border-bottom:1px solid var(--line); }
.task-compose input{ flex:1; height:34px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel); padding:0 12px; font-family:var(--sans); font-size:13px; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.task-compose input:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.task-list{ display:flex; flex-direction:column; }
.task-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.task-row:hover{ background:var(--panel-2); }
.task-row:last-child{ border-bottom:none; }
.task-row.done{ opacity:.62; }
.task-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-4); }
.task-dot.running{ background:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); animation:pulse 1.6s infinite; }
.task-dot.queued{ background:var(--ink-4); }
.task-check{ width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; }
.task-main{ flex:1; min-width:0; }
.task-title{ font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-meta{ display:flex; align-items:center; gap:10px; margin-top:5px; }
.task-state{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); flex:none; }
.task-state.running{ color:var(--ink-2); }
.task-state.queued{ color:var(--ink-4); }
.task-state.done{ color:var(--ink-3); }
.task-bar{ flex:1; max-width:240px; height:5px; background:var(--panel-3); border-radius:20px; overflow:hidden; }
.task-bar i{ display:block; height:100%; background:var(--ink); border-radius:20px; transition:width .9s linear; }
.task-pct{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); width:34px; text-align:right; flex:none; }
.task-x{ width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ink-4); flex:none; }
.task-x:hover{ background:var(--panel-3); color:var(--ink); }

/* ---- detail drawer (task / run) ---- */
.detail-overlay{ position:fixed; inset:0; z-index:520; background:rgba(15,17,22,.28); backdrop-filter:blur(2px); display:flex; justify-content:flex-end; }
.detail-drawer{ width:min(460px,94vw); height:100%; background:var(--panel); border-left:1px solid var(--line-2); box-shadow:-30px 0 70px -30px rgba(15,17,22,.4); display:flex; flex-direction:column; animation:dd-in .2s cubic-bezier(.2,.7,.2,1); }
@keyframes dd-in{ from{ transform:translateX(24px); opacity:.6; } to{ transform:none; opacity:1; } }
.dd-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none; }
.dd-title{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.dd-body{ overflow-y:auto; padding:16px; }
.dd-statusrow{ margin-bottom:18px; }
.dd-sec-lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin:0 0 11px; }
.dd-steps{ position:relative; margin-bottom:24px; }
.dd-step{ display:flex; gap:12px; align-items:flex-start; padding:0 0 16px; position:relative; }
.dd-step:not(:last-child)::before{ content:""; position:absolute; left:9px; top:20px; bottom:0; width:1.5px; background:var(--line-2); }
.dd-step-mark{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; flex:none; background:var(--panel); z-index:1; }
.dd-step.done .dd-step-mark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.dd-step.run .dd-step-mark{ border-color:var(--ink); border-top-color:transparent; animation:spin .8s linear infinite; }
.dd-step-l{ font-size:13px; font-weight:500; color:var(--ink); padding-top:1px; }
.dd-step.pending .dd-step-l{ color:var(--ink-3); }
.dd-step-s{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.dd-out-p{ font-size:13px; line-height:1.7; color:var(--ink-2); }
.dd-out-p b{ color:var(--ink); font-weight:700; }
.dd-pending{ font-size:12.5px; color:var(--ink-3); line-height:1.55; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:13px; }
.dd-alerts{ display:flex; flex-direction:column; gap:2px; }
.dd-alert{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.dd-alert:last-child{ border-bottom:none; }
.dd-alert-t{ font-size:12.5px; color:var(--ink); }
.dd-alert-s{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:2px; }
.dd-ideas{ display:flex; flex-direction:column; gap:1px; }
.dd-idea{ display:grid; grid-template-columns:auto auto; gap:3px 10px; padding:11px 0; border-bottom:1px solid var(--line); }
.dd-idea:last-child{ border-bottom:none; }
.dd-idea-tk{ font-family:var(--mono); font-weight:700; font-size:13px; }
.dd-idea-fit{ font-size:12px; text-align:right; color:var(--ink-2); }
.dd-idea-why{ grid-column:1 / -1; font-size:12px; color:var(--ink-3); line-height:1.5; }
.agents-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.agent-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:12px; }
.agent-card .ah{ display:flex; gap:12px; align-items:flex-start; }
.agent-ico{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; }
.agent-card h4{ font-size:14px; font-weight:600; }
.agent-card .ad{ font-size:12px; color:var(--ink-3); margin-top:2px; line-height:1.45; }
.agent-foot{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:12px; }
.agent-foot .runs{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.state-chip{ font-family:var(--mono); font-size:10px; padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.state-chip .d{ width:6px; height:6px; border-radius:50%; }
.state-chip.running .d{ background:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.state-chip.done .d{ background:var(--good); }
.state-chip.idle .d{ background:var(--ink-4); }
.state-chip.scheduled .d{ background:var(--ink-4); }
.switch{ width:34px; height:20px; border-radius:20px; background:var(--line-3); position:relative; transition:background .18s; flex:none; }
.switch.on{ background:var(--ink); }
.switch i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s; }
.switch.on i{ transform:translateX(14px); }

/* misc */
.empty{ color:var(--ink-3); font-size:12.5px; padding:30px; text-align:center; }
.divide{ height:1px; background:var(--line); margin:18px 0; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.flex{ display:flex; align-items:center; gap:10px; }
.gap6{ gap:6px; } .gap8{ gap:8px; }
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; }

/* ============================================================ WORKFLOWS */
.wf-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.wf-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:12px; cursor:pointer; transition:border-color .14s, transform .12s, box-shadow .14s; }
.wf-card:hover{ border-color:var(--line-3); transform:translateY(-1px); box-shadow:0 10px 26px -16px rgba(15,17,22,.22); }
.wf-card.off{ opacity:.62; }
.wf-card-head{ display:flex; align-items:flex-start; gap:11px; }
.wf-card-ico{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink); flex:none; }
.wf-card-name{ font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-card-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.wf-chain{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.wf-node{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink); background:var(--panel-3); border:1px solid var(--line); border-radius:7px; padding:5px 9px; white-space:nowrap; }
.wf-node-ico{ color:var(--ink-2); display:grid; place-items:center; }
.wf-arrow{ color:var(--ink-4); display:grid; place-items:center; flex:none; }
.wf-card-prompt{ font-size:12.5px; color:var(--ink-2); line-height:1.55; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wf-card-foot{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.wf-state{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); }
.wf-state::before{ content:""; width:6px; height:6px; border-radius:50%; }
.wf-state.live{ color:var(--ink); border-color:var(--hl-line); background:var(--hl-soft); }
.wf-state.live::before{ background:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.wf-state.paused::before{ background:var(--ink-4); }
.wf-next{ display:inline-flex; align-items:center; gap:5px; }
.wf-target{ margin-left:auto; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%; }

.wf-add-card{ border:1.5px dashed var(--line-3); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px 20px; color:var(--ink-2); min-height:150px; transition:border-color .14s, background .14s; text-align:center; line-height:1.4; }
.wf-add-card:hover{ border-color:var(--ink-3); background:var(--panel-2); color:var(--ink); }
.wf-add-ico{ width:38px; height:38px; border-radius:10px; background:var(--panel-3); display:grid; place-items:center; color:var(--ink); margin-bottom:2px; flex:none; }
.wf-add-card > span:nth-child(2){ font-size:13.5px; font-weight:600; color:var(--ink); }

/* builder modal */
.wf-overlay{ position:fixed; inset:0; z-index:520; background:rgba(15,17,22,.3); backdrop-filter:blur(2px); display:flex; justify-content:center; align-items:flex-start; padding:6vh 16px; }
.wf-modal{ width:min(620px,96vw); max-height:88vh; background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 40px 90px -30px rgba(15,17,22,.5); display:flex; flex-direction:column; animation:sp-in .15s ease; overflow:hidden; }
.wf-modal-head{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none; }
.wf-modal-t{ flex:1; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.wf-modal-body{ overflow-y:auto; padding:16px; }
.wf-modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--line); flex:none; }
.wf-field{ display:block; margin-bottom:18px; }
.wf-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); display:block; margin-bottom:8px; }
.wf-lab-sub{ text-transform:none; letter-spacing:0; color:var(--ink-3); margin-left:7px; font-size:10.5px; }
.wf-input{ width:100%; height:36px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel); padding:0 12px; font-family:var(--sans); font-size:13px; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.wf-input:focus, .wf-textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--hl-soft); }
.wf-textarea{ width:100%; border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel); padding:9px 12px; font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--ink); outline:none; resize:vertical; }
.wf-flow{ display:flex; flex-direction:column; }
.wf-step{ display:flex; gap:12px; padding-bottom:18px; position:relative; }
.wf-step:not(:last-child)::before{ content:""; position:absolute; left:11px; top:24px; bottom:0; width:1.5px; background:var(--line-2); }
.wf-step-n{ width:23px; height:23px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; display:grid; place-items:center; flex:none; z-index:1; }
.wf-step-main{ flex:1; min-width:0; }
.wf-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wf-choice{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 11px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel); text-align:left; transition:border-color .14s, background .14s; }
.wf-choice:hover{ border-color:var(--line-3); background:var(--panel-2); }
.wf-choice.sel{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); background:var(--panel-2); }
.wf-choice-ico{ width:24px; height:24px; border-radius:6px; background:var(--panel-3); display:grid; place-items:center; color:var(--ink); margin-bottom:4px; flex:none; }
.wf-choice.sel .wf-choice-ico{ background:var(--ink); color:#fff; }
.wf-choice-l{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.wf-choice-s{ font-family:var(--mono); font-size:9.5px; color:var(--ink-3); line-height:1.2; }
.wf-summary{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-2); min-width:0; }
.wf-summary span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-summary b{ color:var(--ink); }

/* ============================================================ ARTIFACTS */
.art-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.art-tabs{ display:flex; gap:3px; }
.art-tab{ height:32px; padding:0 13px; border-radius:var(--r); font-size:12.5px; font-weight:500; color:var(--ink-2); border:1px solid transparent; }
.art-tab:hover{ background:var(--panel-3); color:var(--ink); }
.art-tab.active{ background:var(--ink); color:#fff; }
.art-search{ margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--panel-3); border:1px solid var(--line); border-radius:var(--r); padding:6px 11px; width:220px; color:var(--ink-3); }
.art-search input{ flex:1; border:none; outline:none; background:none; font-family:var(--sans); font-size:12.5px; color:var(--ink); }
.art-viewtoggle{ display:flex; gap:2px; border:1px solid var(--line-2); border-radius:var(--r); padding:2px; }
.art-viewtoggle button{ width:28px; height:26px; border-radius:4px; display:grid; place-items:center; color:var(--ink-3); }
.art-viewtoggle button.active{ background:var(--panel-3); color:var(--ink); }

.art-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:14px; }
.art-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color .14s, transform .12s, box-shadow .14s; position:relative; }
.art-card:hover{ border-color:var(--line-3); transform:translateY(-2px); box-shadow:0 12px 28px -16px rgba(15,17,22,.24); }
.art-thumb{ height:104px; background:var(--panel-3); display:grid; place-items:center; color:var(--ink-2); position:relative; border-bottom:1px solid var(--line); }
.art-ext{ position:absolute; bottom:8px; right:9px; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:4px; padding:1px 6px; }
.art-body{ padding:11px 12px 12px; position:relative; }
.art-name{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art-meta{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:3px; }
.art-foot{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.art-by{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--ink-2); min-width:0; }
.art-by svg{ flex:none; }
.art-by.agent{ color:var(--ink); }
.art-when{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--ink-4); flex:none; white-space:nowrap; }
.art-cites{ position:absolute; top:-92px; right:10px; display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; color:var(--ink); background:var(--hl-soft); border:1px solid var(--hl-line); border-radius:20px; padding:2px 7px; }
.art-row-name{ display:inline-flex; align-items:center; gap:9px; font-weight:500; }
.art-row-ico{ width:26px; height:26px; border-radius:6px; background:var(--panel-3); display:grid; place-items:center; color:var(--ink-2); flex:none; }

.wl-flag{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; border-radius:4px; padding:1px 6px; margin-left:7px; vertical-align:1px; }
.wl-flag.earn{ background:var(--hl-soft); border:1px solid var(--hl-line); color:var(--ink); }
.wl-flag.idea{ background:var(--panel-3); border:1px solid var(--line-2); color:var(--ink-2); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; border:3px solid var(--panel); }
::-webkit-scrollbar-thumb:hover{ background:var(--line-3); }

/* responsive: collapse panels on small screens */
@media (max-width:1100px){
  .app.with-right{ grid-template-columns:var(--sidebar) 1fr; }
  .rightbar{ display:none; }
}
@media (max-width:760px){
  :root{ --sidebar:60px; }
  .ws-meta,.ws-switch .chev,.nav-item span.lbl,.nav-lab,.side-agents,.su-name,.su-seats{ display:none; }
  .nav-item{ justify-content:center; }
  .tiles,.kpi-grid{ grid-template-columns:1fr 1fr; }
  .grid-2,.idea-split,.mem-grid,.agents-grid,.wf-grid{ grid-template-columns:1fr; }
}