:root {
  --bg:#0f1117;--surface:#1a1d27;--surface2:#22263a;--surface3:#2a2f47;
  --border:#2e3350;--accent:#6366f1;--accent2:#818cf8;
  --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--blue:#38bdf8;
  --orange:#f97316;
  --text:#e2e8f0;--muted:#94a3b8;--dim:#64748b;
  --radius:10px;--radius-sm:6px;
}
body.light-mode {
  --bg:#f0f2f5;--surface:#ffffff;--surface2:#f0f2f5;--surface3:#e4e7ec;
  --border:#d1d5db;--accent:#6366f1;--accent2:#4f46e5;
  --green:#16a34a;--yellow:#d97706;--red:#dc2626;--blue:#0284c7;
  --orange:#ea580c;
  --text:#111827;--muted:#4b5563;--dim:#9ca3af;
}
.theme-toggle-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;color:var(--text);font:inherit;font-size:14px;cursor:pointer;transition:all .15s;line-height:1}
.theme-toggle-btn:hover{border-color:var(--accent)}
/* ── GLOBAL TOUCH / ANDROID ────────────────────────────────────────
   Applied unconditionally so Android gets these on all screen sizes.
   ─────────────────────────────────────────────────────────────────── */
/* Remove the blue/gray tap-highlight Android shows on any tapped element */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
*{box-sizing:border-box;margin:0;padding:0}
/* Eliminate 300 ms tap-delay + prevent double-tap-zoom on interactive elements.
   touch-action:manipulation = allow pan + pinch-zoom, but fire click immediately. */
a,button,input,select,textarea,label,[role=button],
.sess-row,.sb-item,.check-item,.pm-item,.msg-header,.acc-hdr,
.hbtn,.back-btn,.btn-p,.btn-s,.btn-approve,.btn-revise,.btn-reject{
  touch-action:manipulation}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI',system-ui,sans-serif;display:flex;flex-direction:column}

/* ── OVERLAYS / MODALS ─────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;z-index:100}
.overlay.hidden{display:none}
/* FE-19: overlays use a flat semi-opaque scrim by default (no always-on GPU
   blur — expensive per-frame on low-end/mobile). Blur is restored only as a
   progressive enhancement on wider viewports, and only where the backdrop-
   filter feature is actually supported. Applied consistently to every overlay
   variant that previously blurred. */
@media (min-width: 900px){
  @supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
    .overlay,.env-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
    .cmdk-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  }
}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;width:100%;max-width:min(520px,calc(100vw - 32px));max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
/* Keep autofilled inputs on-theme — Chrome otherwise paints them white/yellow,
   which made the dark-mode session search box look light. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px var(--surface) inset!important;caret-color:var(--text);transition:background-color 9999s ease-out 0s}
/* Native colour input chrome — without this it renders as a white box in dark mode */
input[type=color]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}
/* Active text-size button mirrors the accent-swatch 'on' treatment */
.text-scale-btn.on{border-color:var(--accent)!important;color:var(--text)!important;background:var(--surface3)!important}
.modal.wide{max-width:min(660px,calc(100vw - 32px))}
.modal.xlarge{max-width:min(820px,calc(100vw - 32px))}
.modal.narrow{max-width:min(420px,calc(100vw - 32px))}
.modal-icon{font-size:32px;text-align:center}
.modal h2{font-size:19px;font-weight:700;text-align:center}
.modal .sub{color:var(--muted);font-size:13px;text-align:center;line-height:1.6}
.modal label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.modal input,.modal textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font:inherit;width:100%;transition:border-color .15s}
.modal textarea{resize:vertical}
/* New Session modal — roomier multiline idea/context + clearer label separation (demo polish) */
#ideaOverlay .modal{gap:16px}
#ideaOverlay label{margin-top:6px}
#ideaInput{min-height:120px;line-height:1.55}
#ctxInput{min-height:80px;line-height:1.55}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--accent)}
.modal .note{font-size:11px;color:var(--dim);text-align:center}
.modal-row{display:flex;gap:10px}
.key-wrap{position:relative;display:flex}
.key-wrap input{padding-right:40px;flex:1}
.key-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px}
.warn-box{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.3);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--orange);line-height:1.5}
.warn-box strong{color:var(--orange)}

/* ── NATIVE CONTROL THEMING (select / file inputs) ─────────────────
   Native <select> and <input type=file> render white widgets that
   clash with the dark theme. Theme them globally; appearance:none on
   selects swaps the OS dropdown caret for a CSS-drawn one so the white
   native widget never paints. Variables follow light-mode automatically. */
/* Single-select dropdowns: hide the native white widget + draw our caret.
   [multiple] / [size] listboxes are excluded — they aren't dropdowns. */
select:not([multiple]):not([size]){
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--surface2);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px;
  padding-right:30px}
select{
  background-color:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 12px;font:inherit;cursor:pointer;transition:border-color .15s}
select:hover{border-color:var(--muted)}
select:focus{outline:none;border-color:var(--accent)}
select:disabled{opacity:.5;cursor:default}
select option,select optgroup{background:var(--surface);color:var(--text)}
/* file inputs: hidden ones stay hidden; visible ones get a themed button */
input[type=file]{color:var(--text);font:inherit;max-width:100%}
input[type=file]::file-selector-button{
  background:var(--surface3);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 12px;margin-right:10px;
  font:inherit;cursor:pointer;transition:all .15s}
input[type=file]::file-selector-button:hover{border-color:var(--accent);background:var(--surface2)}
input[type=file]::-webkit-file-upload-button{
  background:var(--surface3);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 12px;margin-right:10px;
  font:inherit;cursor:pointer;transition:all .15s}
input[type=file]::-webkit-file-upload-button:hover{border-color:var(--accent);background:var(--surface2)}
/* Native checkboxes / radios: tint to the accent so they never render as a
   bright white OS control on the dark theme. Per-instance accent-color rules
   elsewhere still win where set; this is the global fallback. */
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
/* Chrome/WebKit autofill paints inputs bright white/yellow, overriding the dark
   theme (the #1 cause of a "white" search/login field). Pin the fill + text to
   the theme so autofilled inputs stay on-theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-out 0s}
/* Belt-and-suspenders: the session-search filter explicitly matches the input
   beside it (in case a stale cached stylesheet lacks the global select rules). */
#sessStatusFilter{background-color:var(--surface2);color:var(--text);border:1px solid var(--border)}

/* ── SHARED BUTTONS ────────────────────────────── */
.btn-p{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:11px 20px;font:600 13px/1 inherit;cursor:pointer;transition:background .15s}
.btn-p:hover{background:var(--accent2)}
.btn-p:disabled{opacity:.35;cursor:default}
.btn-s{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 20px;font:500 13px/1 inherit;cursor:pointer;color:var(--muted);transition:all .15s}
.btn-s:hover{border-color:var(--muted)}
.btn-full{width:100%}
.btn-sm{padding:6px 12px !important;font-size:12px !important}
.btn-xs{padding:4px 8px !important;font-size:11px !important}
.btn-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--red);border-radius:var(--radius-sm);padding:6px 10px;font:500 11px/1 inherit;cursor:pointer}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-orange{background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.35);color:var(--orange);border-radius:var(--radius-sm);padding:8px 14px;font:600 12px/1 inherit;cursor:pointer;transition:all .15s}
.btn-orange:hover{background:rgba(249,115,22,.25)}

/* ── HOME VIEW ─────────────────────────────────── */
#view-home{display:flex;flex-direction:column;height:100%;overflow:hidden}
#view-home header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.home-logo{font-size:18px;font-weight:700;color:var(--accent)}
.home-logo span{color:var(--text)}
#view-home header .right{margin-left:auto;display:flex;gap:8px}
.hbtn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 16px;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:all .15s}
.hbtn:hover{border-color:var(--accent);color:var(--text)}
.hbtn:disabled{opacity:.35;cursor:default}

.home-body{flex:1;display:flex;overflow:hidden}
/* Left nav rail (Sessions | Workflows) — same visual family as .sidebar. */
.home-nav{width:clamp(150px,13vw,210px);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;padding:12px 0;gap:2px}
.hnav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 14px 9px 17px;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:all .15s}
.hnav-item:hover{background:var(--surface2);color:var(--text)}
/* Active edge via inset box-shadow — the .sb-item.active-focus idiom. */
.hnav-item.active{box-shadow:inset 3px 0 0 var(--accent);color:var(--text);background:var(--surface2);font-weight:600}
.hnav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hnav-ico{font-size:14px;width:18px;text-align:center;flex-shrink:0}
/* Each pane owns its scroll + the 24px padding .home-body used to have. */
.home-pane{flex:1;overflow-y:auto;padding:24px;min-width:0}
.home-stats{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;min-width:110px;flex:1}
.stat-val{font-size:26px;font-weight:700;line-height:1}
.stat-val.blue{color:var(--blue)}
.stat-val.green{color:var(--green)}
.stat-val.yellow{color:var(--yellow)}
.stat-val.red{color:var(--red)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.6px}
/* Clickable home stat cards → status filter (active = accent outline, others dimmed). */
.home-stats .stat-card.clickable{cursor:pointer;transition:opacity .15s,border-color .15s,box-shadow .15s,transform .1s;user-select:none}
.home-stats .stat-card.clickable:hover{border-color:var(--accent)}
.home-stats .stat-card.clickable:active{transform:translateY(1px)}
.home-stats .stat-card.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home-stats .stat-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.home-stats .stat-card.dimmed{opacity:.4}

.sessions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sessions-header h2{font-size:15px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}

/* E147 — keep the session-list search/filter bar pinned while the list scrolls.
   The bar is the unclassed flex wrapper holding #sessSearchInput; :has() targets
   it without markup changes. Matches the .shared-head sticky pattern (sticky +
   top:0 + solid bg + z-index). The .home-pane scrollport has 24px top padding,
   so pull the bar up over it and re-pad so scrolled rows don't peek above. */
.home-pane > div:has(> #sessSearchInput){
  position:sticky;
  top:-24px;
  z-index:5;
  background:var(--bg);
  margin:-24px -24px 12px;
  padding:24px 24px 12px;
}

/* Home list view */
.session-list{display:flex;flex-direction:column;gap:6px}
/* Bulk-select checkbox on session rows (select mode only). */
.sess-sel-box{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
/* Which-pipeline chip on session rows (mirrors .sess-tag, accent family). */
.sess-wf-chip{background:rgba(99,102,241,.10);color:var(--accent2);border:1px solid rgba(99,102,241,.25);border-radius:10px;padding:1px 7px;font-size:10px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* FE-14: content-visibility lets offscreen rows skip layout/paint on long
   lists. contain-intrinsic-size is the row's real rendered height (~61px: a
   two-line info block + 11px vertical padding + 1px borders) so the scrollbar
   and scroll position stay stable while rows are virtualized in and out. */
.sess-row{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s;content-visibility:auto;contain-intrinsic-size:auto 61px}
.sess-row:hover{border-color:var(--accent)}
.sess-row-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-active{background:var(--blue);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.dot-awaiting{background:var(--yellow);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.dot-complete{background:var(--green)}
.dot-rejected{background:var(--red)}
.dot-idle{background:var(--dim)}
.sess-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sess-row-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.sess-row-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.sess-row-progress{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:160px}
.sess-prog-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;min-width:80px}
.sess-prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}
.sess-prog-pct{font-size:12px;font-weight:700;color:var(--accent);min-width:36px;text-align:right}
.sess-row-status{font-size:11px;font-weight:600;flex-shrink:0;min-width:120px}
.sess-row-date{font-size:11px;color:var(--dim);flex-shrink:0;min-width:60px;text-align:right}
.sess-row-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}

/* FE-18: boot skeleton rows. Same box model as .sess-row (height must match so
   the list area doesn't collapse-then-jump / cause CLS while getSessions()
   resolves). Non-interactive placeholders; replaced by real rows or the empty
   state when the fetch settles. */
.sess-row--skeleton{cursor:default;pointer-events:none}
.sess-row--skeleton .skel-block{background:var(--border);border-radius:6px;opacity:.55}
.sess-row--skeleton .sess-row-dot{background:var(--border);box-shadow:none}
.sess-row--skeleton .skel-line{height:14px}
/* The info column carries the row's height: name line (~19.5px) + gap (3px)
   + meta line (~16.5px). Match it so the skeleton row equals a real row and
   the boot swap causes no layout shift. */
.sess-row--skeleton .sess-row-info .skel-line{height:16px;width:45%}
.sess-row--skeleton .skel-line.skel-line-sm{height:16px;width:60%}
/* Shimmer is a progressive enhancement — gated behind the repo's
   reduced-motion contract (FE-06). Off = static grey blocks. */
@media (prefers-reduced-motion: no-preference){
  .sess-row--skeleton .skel-block{
    background:linear-gradient(90deg,var(--border) 25%,var(--surface2) 37%,var(--border) 63%);
    background-size:400% 100%;animation:skel-shimmer 1.4s ease-in-out infinite}
  @keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
}

.empty-state{text-align:center;padding:80px 40px;color:var(--dim)}
.empty-state .empty-icon{font-size:48px;margin-bottom:16px}
.empty-state h3{font-size:18px;font-weight:600;color:var(--muted);margin-bottom:8px}
.empty-state p{font-size:13px;line-height:1.7;max-width:360px;margin:0 auto 20px}

/* ── STUDIO VIEW ───────────────────────────────── */
#view-studio{display:flex;flex-direction:column;height:100%;overflow:hidden}
#view-studio.hidden,#view-home.hidden,#view-login.hidden,#view-reset.hidden{display:none}
#view-reset{display:flex;flex-direction:column;align-items:center;justify-content:safe center;height:100%;overflow-y:auto;padding:24px 0;background:var(--bg)}

.studio-header{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:50px}
.back-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 12px;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:all .15s}
.back-btn:hover{border-color:var(--accent);color:var(--text)}
.studio-logo{font-size:15px;font-weight:700;color:var(--accent);white-space:nowrap}
.session-pill{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:clamp(200px,24vw,420px);cursor:pointer;transition:border-color .15s}
.session-pill:hover{border-color:var(--accent)}
.session-pill span{color:var(--text)}
.session-pill .edit-hint{font-size:9px;color:var(--dim);margin-left:4px}
.studio-header .right{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
/* ── Studio header overflow menu ───────────────────────────────────
   Desktop: wrap + menu are display:contents so the 6 secondary buttons
   appear inline inside .right as if they were never wrapped.
   Mobile: wrap becomes a positioned container; ••• button is shown;
   menu becomes an absolute-positioned dropdown. */
.studio-ovf-wrap{display:contents}
.studio-ovf-btn{display:none}
.studio-ovf-menu{display:contents}

/* ── PROGRESS STRIP ────────────────────────────── */
.progress-strip{background:var(--surface2);border-bottom:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.strip-pct{font-size:26px;font-weight:800;color:var(--accent);min-width:58px;line-height:1}
.strip-bar-wrap{flex:1;min-width:0}
.strip-bar-label{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:4px}
.strip-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.strip-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s ease}
.strip-chips{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.strip-chip{background:var(--surface3);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--muted);white-space:nowrap}
.strip-chip.eta{color:var(--blue);border-color:rgba(56,189,248,.3)}
.strip-chip.fast{color:var(--green);border-color:rgba(34,197,94,.3)}
.strip-chip.slow{color:var(--yellow);border-color:rgba(245,158,11,.3)}
.strip-chip.cost{color:var(--green);border-color:rgba(34,197,94,.3)}
.strip-chip.cost.high{color:var(--yellow);border-color:rgba(245,158,11,.3)}
/* Progress toggle — hidden on desktop, shown on mobile */
.strip-chips-toggle{display:none}
/* Cancel streaming button */
.cancel-btn{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);padding:5px 12px;color:var(--red);font:600 12px/1 inherit;cursor:pointer;transition:all .15s;display:none}
.cancel-btn.visible{display:inline-flex;align-items:center;gap:5px}
.cancel-btn:hover{background:rgba(239,68,68,.22)}

/* ── LAYOUT ────────────────────────────────────── */
.studio-layout{display:flex;flex:1;overflow:hidden}
.sidebar{width:clamp(210px,17vw,300px);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-title{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);padding:12px 14px 6px}
.sb-list{flex:1;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-left:3px solid transparent;transition:all .15s;cursor:pointer;position:relative}
.sb-item:hover{background:var(--surface2)}
.sb-item.approved{border-left-color:var(--green)}
.sb-item.awaiting{border-left-color:var(--yellow)}
.sb-item.rejected{border-left-color:var(--red)}
.sb-item.running{border-left-color:var(--blue)}
.sb-item.pending{cursor:default}
.sb-num{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--dim);flex-shrink:0;transition:all .15s}
.sb-item.approved .sb-num{border-color:var(--green);background:rgba(34,197,94,.1);color:var(--green)}
.sb-item.awaiting .sb-num{border-color:var(--yellow);background:rgba(245,158,11,.1);color:var(--yellow)}
.sb-item.rejected .sb-num{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.sb-item.running .sb-num{border-color:var(--blue);background:rgba(56,189,248,.1);color:var(--blue)}
.sb-label{flex:1;min-width:0}
.sb-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-status{font-size:10px;color:var(--dim);margin-top:1px}
.sb-item.approved .sb-status{color:var(--green)}
.sb-item.awaiting .sb-status{color:var(--yellow)}
.sb-item.rejected .sb-status{color:var(--red)}
.sb-item.running .sb-status{color:var(--blue)}
.sb-item.active-focus{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent)}
.sb-rerun{display:none;font-size:9px;color:var(--dim);background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:1px 5px;flex-shrink:0;cursor:pointer;transition:all .15s}
.sb-item.approved:hover .sb-rerun,.sb-item.rejected:hover .sb-rerun{display:block}
.sb-rerun:hover{border-color:var(--orange);color:var(--orange)}
.sb-footer{padding:10px 12px;border-top:1px solid var(--border)}
.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}
.progress-label{font-size:10px;color:var(--dim);display:flex;justify-content:space-between}

/* ── MAIN + LOG ─────────────────────────────────── */
.main-and-log{display:flex;flex:1;overflow:hidden}
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.convo{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px;min-height:0}

.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:16px}
.welcome-icon{font-size:48px}
.welcome h3{font-size:22px;font-weight:700}
.welcome p{color:var(--muted);max-width:380px;line-height:1.7}

/* ── AGENT BUBBLES ─────────────────────────────── */
.msg{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .3s;flex-shrink:0}
.msg.highlight{box-shadow:0 0 0 2px var(--accent)}
.msg-header{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface2);cursor:pointer;user-select:none;transition:background .15s}
.msg-header:hover{background:var(--surface3)}
.msg-icon{font-size:15px}
.msg-agent{font-size:12px;font-weight:700}
.msg-step{font-size:11px;color:var(--dim)}
.msg-timing{font-size:10px;color:var(--dim);background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:1px 6px}
.msg-time{margin-left:auto;font-size:10px;color:var(--dim)}
.msg-collapse-toggle{font-size:10px;color:var(--dim);flex-shrink:0;margin-left:4px;transition:transform .2s}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 1.5s infinite;flex-shrink:0}
.dot.done{background:var(--green);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Single-step main pane: only the step-visible bubble is shown */
.msg[data-step]:not(.step-visible){display:none}

/* Collapsible body within the visible step */
.msg.collapsed .msg-body{display:none}
.msg.collapsed .msg-collapse-toggle{transform:rotate(-90deg)}
.msg.collapsed .msg-header{border-bottom-color:transparent}

/* Drag-to-resize handle — drag up to cap bubble height (adds internal scroll);
   double-click to restore natural full height */
.resize-handle{height:10px;background:transparent;cursor:ns-resize;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border);transition:background .15s,border-color .15s}
.resize-handle:hover,.resize-handle.dragging{border-top-color:var(--accent);background:rgba(99,102,241,.06)}
.resize-handle::after{content:'···';color:var(--border);font-size:14px;letter-spacing:3px;line-height:1;transition:color .15s}
.resize-handle:hover::after,.resize-handle.dragging::after{color:var(--accent)}
/* Pinned-height state (after manual resize) */
.msg-body.pinned{overflow-y:auto}

/* Re-run button on bubble */
.bubble-rerun-btn{display:none;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);border-radius:3px;color:var(--orange);font:500 10px/1 inherit;padding:3px 8px;cursor:pointer;flex-shrink:0;transition:all .15s;margin-left:4px}
.bubble-rerun-btn:hover{background:rgba(249,115,22,.2)}
.msg:hover .bubble-rerun-btn.visible{display:inline-flex;align-items:center;gap:4px}

/* msg-body: grows to its natural content height.
   The .convo container is the scroller; the gate stays pinned below via flex.
   Use the drag handle to manually cap a bubble's height if desired. */
.msg-body{
  padding:12px 16px;
  line-height:1.7;
  overflow-x:auto;
  /* No max-height — let content breathe; .convo scrolls the page */
}
/* When a bubble has been manually resized it gets overflow-y:auto inline */

/* ── ACCORDION ──────────────────────────────────── */
.acc-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden}
.acc-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface2);cursor:pointer;user-select:none;transition:background .15s}
.acc-hdr:hover{background:var(--surface3)}
.acc-chevron{font-size:11px;color:var(--accent);flex-shrink:0;width:12px}
.acc-title{font-size:13px;font-weight:700;color:var(--accent2)}
/* acc-body: collapsed by default; no artificial height cap — let msg-body scroll */
.acc-body{display:none;padding:10px 14px;border-top:1px solid var(--border)}
.acc-open>.acc-body{display:block}
/* nested h3 accordions inside acc-body */
.acc-body .acc-wrap{border-color:var(--surface3);margin-bottom:6px}
.acc-body .acc-hdr{background:var(--surface);padding:6px 10px}
.acc-body .acc-title{font-size:12px;color:var(--muted)}
.msg-body h1,.msg-body h2,.msg-body h3{font-size:13px;font-weight:700;margin:12px 0 5px;color:var(--accent2)}
.msg-body h2{border-bottom:1px solid var(--border);padding-bottom:4px}
.msg-body p{margin-bottom:8px;color:var(--muted)}
.msg-body ul,.msg-body ol{padding-left:18px;margin-bottom:8px;color:var(--muted)}
.msg-body li{margin-bottom:3px}
.msg-body code{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:11px;font-family:'Consolas','Courier New',monospace;color:var(--accent2)}
.msg-body pre{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;overflow-x:auto;margin-bottom:8px}
.msg-body pre code{background:none;border:none;padding:0;font-size:12px;color:var(--text)}
.msg-body table{border-collapse:collapse;margin-bottom:8px;font-size:12px;width:100%}
.msg-body th{background:var(--surface2);padding:6px 10px;text-align:left;border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:11px}
.msg-body td{padding:6px 10px;border:1px solid var(--border);color:var(--muted)}
.msg-body hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.msg-body strong{color:var(--text)}
.msg-body blockquote{border-left:3px solid var(--accent);padding-left:12px;color:var(--dim);margin-bottom:8px}
.cursor::after{content:'▋';animation:blink .7s infinite;color:var(--accent)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── GATE ──────────────────────────────────────── */
.gate-wrap{border-top:2px solid var(--yellow);background:var(--surface);flex-shrink:0;max-height:clamp(280px,45vh,520px);overflow-y:auto;transition:max-height .3s ease}
.gate-wrap.collapsed{max-height:44px;overflow:hidden}
.gate-wrap.gate-minimized{max-height:44px;overflow:hidden}
.gate-inner{padding:14px 18px;max-width:880px;margin:0 auto}
.gate-collapse-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 18px;background:rgba(245,158,11,.06);border-bottom:1px solid rgba(245,158,11,.2);font-size:11px;color:var(--yellow);flex-shrink:0;cursor:pointer;user-select:none;min-height:44px}
.gate-collapse-bar:hover{background:rgba(245,158,11,.12)}
.gate-collapse-bar .gate-collapse-title{font-weight:600;display:flex;align-items:center;gap:8px}
.gate-collapse-bar .gate-collapse-hint{font-size:10px;color:var(--dim)}
.gate-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.gate-title{font-size:14px;font-weight:700;color:var(--yellow)}
.gate-sub{font-size:11px;color:var(--dim);margin-top:2px}
.gate-next{margin-left:auto;font-size:11px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;white-space:nowrap;flex-shrink:0}
.check-progress{font-size:11px;color:var(--dim);margin-bottom:6px}
.checklist{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.check-item:hover{border-color:var(--accent)}
.check-item.on{border-color:var(--green);background:rgba(34,197,94,.04)}
/* Unchecked: an obviously-empty box — bright, thick border + hollow fill so
   it can't be mistaken for the filled/checked state. The ✓ glyph in the
   markup is suppressed (color:transparent) until .on. */
.check-box{width:18px;height:18px;border:2px solid var(--muted);background:var(--bg);border-radius:4px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:transparent;transition:all .15s}
.check-item:hover .check-box{border-color:var(--accent)}
/* Checked: solidly filled green with a white ✓ — unmistakable vs the hollow
   unchecked box above. */
.check-item.on .check-box{border-color:var(--green);background:var(--green);color:#fff}
.check-text{font-size:12px;line-height:1.4}
.check-item.on .check-text{color:var(--dim)}
.gate-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-move-forward{flex:1 1 100%;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:11px 24px;font:700 14px/1 inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s;min-height:44px}
.btn-move-forward:hover{filter:brightness(1.08)}
.btn-move-forward:active{filter:brightness(0.88)}
.btn-move-forward:disabled{opacity:.45;cursor:default}
.btn-approve{flex:1;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 20px;font:600 13px/1 inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;min-width:200px}
.btn-approve:hover:not(:disabled){background:#16a34a;transform:translateY(-1px)}
.btn-approve:disabled{opacity:.35;cursor:default;transform:none}
.btn-revise,.btn-reject{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;font:500 12px/1 inherit;cursor:pointer;color:var(--muted);transition:all .15s}
.btn-revise:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-reject:hover{border-color:var(--red);color:var(--red)}
.sub-panel{margin-top:10px;display:none}
.sub-panel.open{display:block}
.sub-panel textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font:13px/1.5 inherit;width:100%;resize:vertical;min-height:80px;transition:border-color .15s;margin-bottom:8px}
.sub-panel textarea:focus{outline:none;border-color:var(--yellow)}
.sub-panel .reject-area:focus{border-color:var(--red)}
.sp-btns{display:flex;gap:8px}
.btn-send{background:var(--yellow);color:#000;border:none;border-radius:var(--radius-sm);padding:8px 16px;font:600 12px/1 inherit;cursor:pointer}
.btn-send:hover{background:#d97706}
.btn-send-r{background:var(--red);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 16px;font:600 12px/1 inherit;cursor:pointer}
.btn-cancel{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;color:var(--muted);font:inherit;cursor:pointer}
.gate-note{font-size:11px;color:var(--dim);margin-top:6px}
.impl-warn{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;color:var(--red);margin-bottom:10px}

/* ── ACTIVITY LOG ───────────────────────────────── */
.log-panel{width:0;overflow:hidden;transition:width .3s;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);flex-shrink:0}
.log-panel.open{width:clamp(260px,20vw,360px)}
.log-panel-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.log-panel-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);flex:1}
.log-toggle-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font:inherit;font-size:10px;cursor:pointer;padding:3px 8px;white-space:nowrap;transition:all .15s}
.log-toggle-btn:hover{border-color:var(--accent);color:var(--text)}
.log-filters{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}
.log-filter-btn{background:none;border:1px solid var(--border);border-radius:10px;padding:2px 8px;font:500 10px/1.4 inherit;color:var(--dim);cursor:pointer;transition:all .15s}
.log-filter-btn:hover,.log-filter-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(99,102,241,.1)}
.log-feed{flex:1;overflow-y:auto;padding:6px 0}
.log-entry{display:flex;gap:6px;padding:4px 10px;border-bottom:1px solid rgba(46,51,80,.4);font-size:11px;line-height:1.4}
.log-entry:hover{background:var(--surface2)}
.log-time{color:var(--dim);flex-shrink:0;font-size:10px;padding-top:1px;min-width:52px}
.log-badge{border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700;letter-spacing:.4px;flex-shrink:0;height:16px;line-height:16px}
.badge-sys{background:rgba(100,116,139,.2);color:var(--dim)}
.badge-api{background:rgba(56,189,248,.15);color:var(--blue)}
.badge-agent{background:rgba(99,102,241,.15);color:var(--accent2)}
.badge-gate{background:rgba(245,158,11,.15);color:var(--yellow)}
.log-msg{color:var(--muted);flex:1;word-break:break-word}
.log-msg.ok{color:var(--green)}
.log-msg.warn{color:var(--yellow)}
.log-msg.err{color:var(--red)}
.log-footer{padding:6px 10px;border-top:1px solid var(--border);font-size:10px;color:var(--dim);flex-shrink:0;display:flex;justify-content:space-between;align-items:center}
.log-clear-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:10px;padding:0}
.log-clear-btn:hover{color:var(--muted)}

/* ── INLINE STUDIO FAILURE BANNER (Wave2) ──────────
   Shown when a run fails — surfaces the worker errorMessage in-context. */
.studio-error-banner{display:flex;align-items:flex-start;gap:10px;flex-shrink:0;background:rgba(239,68,68,.12);border-bottom:1px solid rgba(239,68,68,.4);color:var(--red);padding:10px 18px;font-size:13px;line-height:1.45}
.studio-error-banner.hidden{display:none}
.studio-error-banner .seb-icon{flex-shrink:0;font-size:15px;line-height:1.3}
.studio-error-banner .seb-text{flex:1;min-width:0;word-break:break-word;font-weight:500}
.studio-error-banner .seb-close{flex-shrink:0;background:none;border:none;color:var(--red);cursor:pointer;font-size:14px;padding:0 2px;opacity:.8;transition:opacity .15s}
.studio-error-banner .seb-close:hover{opacity:1}

/* ── PER-AGENT CONFIG CONTROLS (Wave2) ─────────────
   model / maxTokens / enabled in the Agents editor modal. */
.agent-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:4px 0 2px}
.agent-config-grid .agent-enabled-row{grid-column:1 / -1}
.agent-config-grid label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.agent-config-grid select,.agent-config-grid input[type=number]{width:100%;margin-top:4px}
.switch-label{display:flex;align-items:center;gap:8px;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;color:var(--muted)}
.switch-label input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}

/* ── GATE CUSTOM-PROMPT BADGE (Wave2) ──────────────── */
.gate-custom-badge{font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--accent);background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.4);border-radius:10px;padding:1px 8px;margin-left:8px;text-transform:none}

/* ── STATUS BAR ────────────────────────────────── */
.status-bar{background:var(--surface2);border-top:1px solid var(--border);padding:4px 18px;display:flex;gap:20px;font-size:11px;color:var(--dim);flex-shrink:0}
.status-bar span{color:var(--text)}
.status-shortcut{margin-left:auto;font-size:10px;color:var(--dim)}

.rejected-banner{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:var(--radius);padding:20px;text-align:center}
.rejected-banner h4{font-size:15px;color:var(--red);margin-bottom:8px}
.rejected-banner p{font-size:12px;color:var(--muted);margin-bottom:4px}

/* ── TOAST ─────────────────────────────────────── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:13px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.5);transform:translateY(60px);opacity:0;transition:all .3s;z-index:200;max-width:380px}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{border-color:var(--green)}
.toast.warn{border-color:var(--yellow)}
.toast.err{border-color:var(--red)}

/* ── KEYBOARD SHORTCUT HINTS ───────────────────── */
kbd{background:var(--surface3);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;font-family:inherit;color:var(--dim)}

/* ── RESUME / RETRY BANNERS ────────────────────── */
.resume-banner{display:flex;align-items:center;gap:12px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.3);border-radius:var(--radius);padding:14px 18px;margin:12px 0;color:var(--orange);font-size:13px}
.resume-banner span{flex:1;line-height:1.4}
.resume-banner strong{display:block;font-size:13px;margin-bottom:2px}
.resume-banner small{font-size:11px;color:var(--muted)}
.msg-error-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.msg-error-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ── GATE PLACEHOLDER ──────────────────────────── */
.gate-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 16px;color:var(--dim);font-size:12px;font-style:italic}

/* ── DOWNLOAD BUTTON ───────────────────────────── */
.bubble-download-btn{display:none;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.3);border-radius:3px;color:var(--blue);font:500 10px/1 inherit;padding:3px 8px;cursor:pointer;flex-shrink:0;transition:all .15s;margin-left:4px}
.bubble-download-btn:hover{background:rgba(56,189,248,.2)}
.msg:hover .bubble-download-btn.has-content{display:inline-flex;align-items:center;gap:4px}

/* ── E135 — PER-BUBBLE COPY BUTTON ─────────────── */
.bubble-copy-btn{opacity:0;background:var(--surface3);border:1px solid var(--border);border-radius:3px;color:var(--dim);font:500 10px/1 inherit;padding:3px 8px;cursor:pointer;flex-shrink:0;transition:opacity .15s,background .15s,color .15s;margin-left:4px;display:inline-flex;align-items:center;gap:4px}
.bubble-copy-btn:hover{background:var(--surface2);color:var(--text)}
.bubble-copy-btn:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px}
.msg:hover .bubble-copy-btn,.msg:focus-within .bubble-copy-btn{opacity:1}

/* ── E128 — KEYBOARD SHORTCUT CHEAT-SHEET ──────── */
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px;border-bottom:1px solid var(--border)}
.sc-row:last-child{border-bottom:none}
.sc-desc{font-size:13px;color:var(--text)}
.sc-keys{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sc-group{margin-top:6px}
.sc-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 2px;font-weight:600}

/* ── E126 — MONTHLY USAGE PILL (home header) ───── */
.usage-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface3);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--dim);white-space:nowrap;cursor:default}
.usage-pill .usage-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);flex-shrink:0}
.usage-pill.hidden{display:none}

/* ── FILE UPLOAD AREA ──────────────────────────── */
.upload-area{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:wrap}
.upload-filename{font-size:11px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-filename.has-file{color:var(--green)}
.upload-clear-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px;padding:0 4px;flex-shrink:0}
.upload-clear-btn:hover{color:var(--red)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* ── LOGIN VIEW ────────────────────────────────── */
#view-login{display:flex;flex-direction:column;align-items:center;justify-content:safe center;height:100%;overflow-y:auto;padding:24px 0;background:var(--bg)}
#view-login.hidden{display:none}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
/* .hidden is defined earlier (utility) but .login-card{display:flex} overrides
   it at equal specificity + later source order, so forgot/chooseOrg panels
   leaked into view. This 2-class selector wins and keeps them hidden until JS
   toggles them. */
.login-card.hidden{display:none}
.login-logo{font-size:36px;text-align:center}
.login-card h2{font-size:22px;font-weight:700;text-align:center}
.login-card .sub{color:var(--muted);font-size:13px;text-align:center;line-height:1.6}
.login-card label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.login-card input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);font:inherit;width:100%;transition:border-color .15s}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-error{color:var(--red);font-size:12px;text-align:center;display:none;padding:6px 10px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm)}
.login-error.show{display:block}
.login-footer{text-align:center;font-size:11px;color:var(--dim);margin-top:4px}
.login-footer strong{color:var(--muted)}

/* ── PROFILE AVATAR + MENU ─────────────────────── */
.avatar-btn{width:32px;height:32px;border-radius:50%;background:var(--accent);border:none;color:#fff;font:700 12px/1 inherit;cursor:pointer;flex-shrink:0;transition:background .15s;display:flex;align-items:center;justify-content:center;user-select:none}
.avatar-btn:hover{background:var(--accent2)}
.profile-menu{position:fixed;top:50px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.6);min-width:220px;z-index:300;overflow:hidden}
.profile-menu.hidden{display:none}
.pm-header{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface2)}
.pm-name{font-size:13px;font-weight:700;color:var(--text)}
.pm-role{font-size:11px;color:var(--muted);margin-top:2px;text-transform:capitalize}
.pm-org{font-size:10px;color:var(--dim);margin-top:1px}
.pm-item{padding:9px 14px;font-size:13px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .15s;user-select:none}
.pm-item:hover{background:var(--surface2)}
.pm-item.danger{color:var(--red)}
.pm-item.danger:hover{background:rgba(239,68,68,.08)}
.pm-divider{border-top:1px solid var(--border);margin:3px 0}

/* ── THEME SETTINGS MODAL ──────────────────────── */
.accent-swatches{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.accent-swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;transition:transform .12s,border-color .12s}
.accent-swatch:hover{transform:scale(1.1)}
.accent-swatch.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}

/* ── AGENT EDITOR MODAL ────────────────────────── */
.agents-layout{display:flex;gap:14px;align-items:flex-start}
.agents-list-panel{flex:0 0 220px;max-height:64vh;overflow-y:auto;display:flex;flex-direction:column;border-right:1px solid var(--border);padding-right:10px}
.agents-section-hdr{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:4px;
  /* Keep the section label above the agent rows so it never renders BEHIND the
     last card (the "Standby stuck behind the last agent" bug); opaque bg so a
     drag-elevated row can't bleed through. clear:both defeats any float/overlap. */
  position:relative;z-index:2;background:var(--surface);clear:both}
.agents-section{display:flex;flex-direction:column;gap:3px;min-height:32px;position:relative;z-index:1}
.agent-drag-handle{cursor:grab;color:var(--dim);font-size:11px;padding:0 3px;user-select:none;flex-shrink:0;line-height:1}
.agent-drag-handle:active{cursor:grabbing}
.agent-row{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .12s;font-size:12px}
.agent-row:hover{border-color:var(--accent)}
.agent-row.on{border-color:var(--accent);background:rgba(99,102,241,.1)}
.agent-row.dragging{opacity:.35}
.agent-row.drop-target{outline:2px dashed var(--accent);border-color:var(--accent)}
.agent-row .agent-icon{font-size:15px;flex-shrink:0}
.agent-row .agent-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-row .agent-ver{font-size:10px;color:var(--dim);flex-shrink:0}
/* Workflow-template drag-and-drop builder (two-pane: available | order) */
.wf-builder{display:flex;gap:12px;align-items:stretch}
.wf-col{flex:1;min-width:0;display:flex;flex-direction:column}
.wf-colhead{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.wf-count{background:var(--accent);color:#fff;border-radius:10px;font-size:10px;padding:0 6px;line-height:16px}
.wf-list{flex:1;min-height:130px;max-height:340px;overflow:auto;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:6px;display:flex;flex-direction:column;gap:5px}
.wf-list.wf-col-drop{border-color:var(--accent);background:rgba(99,102,241,.06)}
.wf-card{display:flex;align-items:center;gap:6px;padding:6px 7px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:grab;font-size:12px}
.wf-card:active{cursor:grabbing}
.wf-card.dragging{opacity:.4}
.wf-card.wf-drop-target{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
.wf-card .wf-grip{color:var(--dim);font-size:12px;flex-shrink:0;line-height:1}
.wf-card .wf-num{color:var(--muted);font-size:10px;min-width:16px;text-align:right;flex-shrink:0}
.wf-card .wf-ico{font-size:14px;flex-shrink:0}
.wf-card .wf-nm{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-card .btn-xs{padding:1px 5px;flex-shrink:0}
.wf-empty{font-size:11px;color:var(--muted);padding:18px 8px;text-align:center}
.wf-hint{font-size:10px;color:var(--dim);margin-top:6px;text-align:center}
/* ── Mode toggle (List / Visual) + visual DAG canvas (REQ2) ───────────────── */
.wf-modes{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.wf-modes .wf-mode-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.wf-modes .wf-hint{margin-top:0;text-align:right}
.wfc-host{display:flex;flex-direction:column;gap:8px}
.wfc-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wfc-tools .wfc-agent-pick{max-width:200px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:12px;padding:4px 6px}
.wfc-tools .wfc-hint{font-size:10px;color:var(--dim);margin:0 0 0 4px;flex:1;min-width:120px;text-align:right}
.wfc-stage{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:auto;max-height:46vh;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px}
.wfc-svg{display:block;min-width:100%}
.wfc-node{cursor:grab}
.wfc-node:active{cursor:grabbing}
.wfc-node .wfc-box{fill:var(--surface2);stroke:var(--border);stroke-width:1.5}
.wfc-node.wfc-sel .wfc-box{stroke:var(--accent);stroke-width:2.5}
.wfc-node .wfc-bar{fill:var(--muted)}
.wfc-node.wfc-agent .wfc-bar{fill:var(--accent)}
.wfc-node.wfc-condition .wfc-bar{fill:var(--yellow,#f59e0b)}
.wfc-node.wfc-compose .wfc-bar{fill:var(--green,#22c55e)}
.wfc-node .wfc-lbl{fill:var(--text);font-size:12px;font-weight:600}
.wfc-node .wfc-tag{fill:var(--muted);font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.wfc-node .wfc-port{fill:var(--accent);stroke:var(--surface);stroke-width:2;cursor:crosshair}
.wfc-node .wfc-port:hover{r:9}
.wfc-edge .wfc-wire{fill:none;stroke:var(--muted);stroke-width:2}
.wfc-edge .wfc-hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.wfc-edge.wfc-sel .wfc-wire{stroke:var(--accent);stroke-width:2.5}
.wfc-edge .wfc-elbl{fill:var(--muted);font-size:10px;text-anchor:middle}
.wfc-props{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;background:var(--surface2);min-height:40px}
.wfc-props .wfc-prophead{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wfc-props .wfc-f{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}
.wfc-props .wfc-f input,.wfc-props .wfc-f select{display:block;width:100%;margin-top:3px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:12px;padding:5px 7px}
.wfc-props .wfc-hint{margin:0;text-align:left}
.wfc-preview{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;background:var(--surface)}
.wfc-preview .wfc-prophead{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wfc-wave{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:5px;font-size:11px}
.wfc-wave .wfc-wnum{font-size:9px;font-weight:700;color:var(--dim);min-width:48px}
.wfc-wave .wfc-chip{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1px 8px;color:var(--text)}
.wfc-wave .wfc-par{color:var(--green,#22c55e);font-size:10px;font-weight:600}
.wf-newform{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;margin-bottom:8px;background:var(--surface2)}
.wf-newform select,.wf-newform input,.wf-newform textarea{width:100%}
.agent-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;letter-spacing:.4px}
.agent-badge.active{background:rgba(34,197,94,.18);color:var(--green)}
.agent-badge.draft{background:rgba(245,158,11,.18);color:var(--yellow)}
.agents-detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.agents-detail label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.agents-detail input,.agents-detail textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text);font:inherit;width:100%;transition:border-color .15s}
.agents-detail textarea{resize:vertical;min-height:200px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace}
.agents-detail input:focus,.agents-detail textarea:focus{outline:none;border-color:var(--accent)}
.agent-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--dim)}
.agent-meta b{color:var(--muted);font-weight:700}
.agent-versions{display:flex;flex-direction:column;gap:4px;font-size:11px}
.agent-version-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.agent-version-row .ver-label{flex:1;color:var(--text)}
@media(max-width:680px){.agents-layout{flex-direction:column}.agents-list-panel{flex:1 1 auto;width:100%;border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:10px;max-height:36vh}}

/* ── TABS (admin/org panels) ───────────────────── */
.modal.xlarge{max-width:760px;max-height:88vh;overflow-y:auto}
.tab-bar{display:flex;gap:2px;background:var(--surface2);border-radius:var(--radius-sm);padding:3px;margin-bottom:14px}
.tab-btn{flex:1;padding:7px 10px;border:none;background:none;color:var(--muted);font:500 12px/1 inherit;cursor:pointer;border-radius:5px;transition:all .15s;text-align:center}
.tab-btn.active{background:var(--surface3);color:var(--text);font-weight:700}
.tab-pane{display:none}
.tab-pane.active{display:block}
.admin-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px}
.admin-table th{background:var(--surface2);padding:7px 10px;text-align:left;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.admin-table td{padding:7px 10px;border:1px solid var(--border);color:var(--muted);vertical-align:middle}
.admin-table tr:hover td{background:rgba(99,102,241,.04)}
.badge-role{display:inline-block;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.3px}
.badge-app_admin{background:rgba(99,102,241,.18);color:var(--accent2)}
.badge-org_admin{background:rgba(56,189,248,.18);color:var(--blue)}
.badge-user{background:rgba(100,116,139,.18);color:var(--muted)}
.badge-deleted{background:rgba(239,68,68,.16);color:var(--red)}
/* Wave4 — login org/role picker (step 2 of a multi-org sign-in) */
.org-pick-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px;text-align:left}
.org-pick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.org-pick-row:hover{border-color:var(--accent);background:rgba(99,102,241,.06)}
.org-pick-row:disabled,.org-pick-row.loading{opacity:.6;cursor:default}
.org-pick-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.org-pick-name{font-weight:600;font-size:13px}
.org-pick-id{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.form-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.form-grid label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.form-grid input,.form-grid select,.form-grid textarea{background-color:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text);font:inherit;width:100%;transition:border-color .15s}
.form-grid select{padding-right:30px}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--accent)}
.form-grid select option{background:var(--surface)}

/* ── PAUSE BUTTON ──────────────────────────────── */
.pause-btn{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-sm);padding:5px 12px;color:var(--yellow);font:600 12px/1 inherit;cursor:pointer;transition:all .15s;display:none}
.pause-btn.visible{display:inline-flex;align-items:center;gap:5px}
.pause-btn:hover{background:rgba(245,158,11,.22)}

/* ── GITHUB SETTINGS ─────────────────────────────── */
.gh-section{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-top:4px}
.gh-section-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.dev-actions{display:flex;gap:8px;padding:12px 16px;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border);flex-wrap:wrap;align-items:center;margin-top:10px}
.dev-actions small{font-size:11px;color:var(--muted);flex-basis:100%;margin-bottom:2px}
/* ── APPROVER RIGHTS ─────────────────────────────── */
.approver-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.approver-table th{background:var(--surface2);padding:5px 8px;text-align:left;border:1px solid var(--border);color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.approver-table td{padding:5px 8px;border:1px solid var(--border);vertical-align:middle}
.approver-table tr:hover td{background:rgba(99,102,241,.04)}
.step-check{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
/* ── APPROVAL HISTORY ────────────────────────────── */
.approval-history{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.approval-history-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.ah-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(46,51,80,.3)}
.ah-row:last-child{border-bottom:none}
.ah-step{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-size:10px;font-weight:700;color:var(--dim);white-space:nowrap;min-width:52px;text-align:center}
.ah-decision{font-weight:700;font-size:10px;padding:1px 6px;border-radius:3px}
.ah-decision.approve{background:rgba(34,197,94,.12);color:var(--green)}
.ah-decision.revise{background:rgba(245,158,11,.12);color:var(--yellow)}
.ah-decision.reject{background:rgba(239,68,68,.12);color:var(--red)}
.ah-who{color:var(--muted);flex:1}
.ah-when{color:var(--dim);font-size:10px;white-space:nowrap}
/* Pending approver notice in gate */
.gate-approver-notice{background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.2);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;color:var(--blue);margin-bottom:8px;display:flex;align-items:flex-start;gap:8px}
.gate-approver-notice strong{color:var(--blue)}

/* ── PAUSED / CANCELLED STATES ─────────────────── */
.sb-item.paused{border-left-color:var(--yellow)}
.sb-item.paused .sb-num{border-color:var(--yellow);background:rgba(245,158,11,.1);color:var(--yellow)}
.sb-item.paused .sb-status{color:var(--yellow)}
.sb-item.cancelled{border-left-color:var(--red)}
.sb-item.cancelled .sb-num{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red)}
.sb-item.cancelled .sb-status{color:var(--red)}
.paused-actions,.cancelled-actions{display:flex;gap:8px;margin-top:10px;padding:10px 12px;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border);flex-wrap:wrap;align-items:center}
.paused-actions small,.cancelled-actions small{font-size:11px;color:var(--muted);flex-basis:100%;margin-bottom:2px}
.api-key-banner{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-sm);padding:8px 14px;font-size:12px;color:var(--yellow);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.api-key-banner button{background:none;border:1px solid var(--yellow);border-radius:var(--radius-sm);color:var(--yellow);padding:3px 10px;font:600 11px/1 inherit;cursor:pointer}
.api-key-banner button:hover{background:rgba(245,158,11,.15)}

/* ── ACTING-AS BANNER (app_admin org switch) ────── */
.acting-as-banner{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(90deg,rgba(249,115,22,.18),rgba(249,115,22,.10));border-bottom:1px solid rgba(249,115,22,.4);
  color:var(--orange);font-size:12px;font-weight:600;padding:7px 14px}
.acting-as-banner.hidden{display:none}
.acting-as-banner .aab-text{letter-spacing:.2px}
.acting-as-banner .aab-text strong{color:var(--text)}
.acting-as-banner .aab-btn{background:none;border:1px solid var(--orange);border-radius:var(--radius-sm);color:var(--orange);padding:3px 12px;font:600 11px/1 inherit;cursor:pointer;transition:background .15s}
.acting-as-banner .aab-btn:hover{background:rgba(249,115,22,.2)}
body.acting-as{padding-top:34px}

/* ── ENV VAR FORM ───────────────────────────────── */
.env-form-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.env-form-header{display:flex;flex-direction:column;gap:6px}
.env-scope-badge{display:inline-block;padding:3px 12px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.env-scope-badge.dev{background:rgba(99,102,241,.15);color:var(--accent2);border:1px solid rgba(99,102,241,.3)}
.env-scope-badge.prod{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.env-form-intro{font-size:12px;color:var(--muted);line-height:1.5}
.env-form-intro strong{color:var(--text)}
.env-form-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.env-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.env-table{width:100%;border-collapse:collapse;font-size:12px}
.env-table th{background:var(--surface2);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:7px 10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.env-table td{padding:4px 6px;border-bottom:1px solid rgba(46,51,80,.45);vertical-align:middle}
.env-table tr:last-child td{border-bottom:none}
.env-table tr:hover td{background:rgba(255,255,255,.02)}
.env-table input,.env-table select{background:transparent;border:1px solid transparent;border-radius:4px;padding:5px 7px;color:var(--text);font:inherit;width:100%;transition:border-color .12s}
.env-table select{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 5px center;background-size:12px;padding-right:22px}
.env-table input:hover,.env-table select:hover{border-color:var(--border)}
.env-table input:focus,.env-table select:focus{outline:none;border-color:var(--accent);background-color:var(--surface2)}
.ev-name{font-family:monospace;font-size:11px !important}
.env-table select option{background:var(--surface2)}
.env-type-secret{color:var(--yellow)}
.env-form-actions{display:flex;align-items:center;gap:12px;padding-top:4px;flex-wrap:wrap}
.env-form-hint{font-size:11px;color:var(--dim)}

/* ── SECRETS VAULT ───────────────────────────────── */
.vault-btn{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.3);border-radius:var(--radius-sm);padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:background .15s}
.vault-btn:hover{background:rgba(251,191,36,.22)}
.vault-count{display:inline-block;background:rgba(251,191,36,.25);border-radius:8px;padding:1px 6px;font-size:10px;margin-left:4px}
.vault-panel{border:1px solid rgba(251,191,36,.25);border-radius:var(--radius-sm);background:rgba(251,191,36,.04);overflow:hidden;margin-top:4px}
.vault-panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(251,191,36,.08);border-bottom:1px solid rgba(251,191,36,.15)}
.vault-panel-title{font-size:11px;font-weight:700;color:#fbbf24;letter-spacing:.5px;text-transform:uppercase}
.vault-panel-scope{font-size:10px;color:var(--dim);font-family:monospace}
.vault-entry{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid rgba(251,191,36,.08);font-size:12px}
.vault-entry:last-child{border-bottom:none}
.vault-entry-name{font-family:monospace;font-weight:600;color:var(--text);font-size:11px}
.vault-entry-val{font-family:monospace;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vault-entry-val.revealed{color:var(--yellow)}
.vault-entry-actions{display:flex;gap:4px}
.vault-reveal-btn,.vault-del-btn{border:none;border-radius:4px;padding:2px 7px;font-size:10px;cursor:pointer;transition:background .15s}
.vault-reveal-btn{background:rgba(99,102,241,.15);color:var(--accent2)}
.vault-reveal-btn:hover{background:rgba(99,102,241,.28)}
.vault-del-btn{background:rgba(239,68,68,.12);color:var(--red)}
.vault-del-btn:hover{background:rgba(239,68,68,.25)}
.vault-empty{padding:12px;text-align:center;color:var(--dim);font-size:12px;font-style:italic}
.vault-saved-indicator{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#fbbf24;opacity:0;transition:opacity .3s}
.vault-saved-indicator.show{opacity:1}
/* ── Credential Generator ─────────────────────────────────────── */
.ev-value-wrap{display:flex;align-items:center;gap:4px;width:100%}
.ev-value-wrap .ev-value{flex:1;min-width:0}
.gen-cred-btn{flex-shrink:0;border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.12);color:var(--accent2);border-radius:5px;padding:2px 7px;font-size:11px;cursor:pointer;transition:background .15s,transform .1s;white-space:nowrap}
.gen-cred-btn:hover{background:rgba(99,102,241,.28);transform:scale(1.08)}
.gen-cred-btn.hidden{display:none}
.cred-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s}
.cred-box{background:var(--surface);border:1.5px solid var(--yellow);border-radius:12px;padding:28px 32px;max-width:540px;width:92%;box-shadow:0 8px 48px rgba(0,0,0,.55)}
.cred-title{font-size:16px;font-weight:700;color:var(--yellow);margin-bottom:4px}
.cred-type-label{font-size:11px;color:var(--muted);margin-bottom:14px}
.cred-warning{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);border-radius:8px;padding:12px 14px;font-size:12px;color:#fbbf24;line-height:1.55;margin-bottom:16px}
.cred-val-wrap{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:18px;overflow:hidden}
.cred-val{flex:1;font-family:monospace;font-size:12px;color:#a5f3fc;word-break:break-all;user-select:all}
.cred-copy-btn{flex-shrink:0;border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.15);color:var(--accent2);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s}
.cred-copy-btn:hover{background:rgba(99,102,241,.3)}
.cred-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* ── Azure Naming Guide ───────────────────────────────────────── */
.naming-guide-btn{border:1px solid rgba(16,185,129,.4);background:rgba(16,185,129,.1);color:#34d399;border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer;transition:background .15s}
.naming-guide-btn:hover{background:rgba(16,185,129,.22)}
.naming-guide-panel{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin:10px 0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease}
.naming-guide-panel.visible{max-height:600px;opacity:1;overflow:auto}
.naming-guide-header{margin-bottom:10px}
.naming-guide-sub{font-size:10px;color:var(--dim);margin-left:8px}
.naming-slug-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
.naming-slug-input{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:12px;color:var(--text);width:140px;font-family:monospace}
.naming-table-wrap{overflow-x:auto}
.naming-table{width:100%;border-collapse:collapse;font-size:11px}
.naming-table th{background:rgba(255,255,255,.04);padding:6px 10px;text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.naming-table td{padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text)}
.naming-table td code{font-family:monospace;color:#a5f3fc;font-size:10.5px}
.naming-table tr:hover td{background:rgba(255,255,255,.03)}
/* ── App Footer ───────────────────────────────────────────────── */
.app-footer{text-align:center;padding:16px 24px;font-size:10.5px;color:var(--dim);border-top:1px solid var(--border);margin-top:24px;letter-spacing:.02em}
.app-footer a{color:var(--muted);text-decoration:none}
.app-footer a:hover{color:var(--accent)}
/* ── Vault Preflight Panel (Impl steps 12 & 16) ──────────────── */
.vault-pf-panel{background:rgba(0,0,0,.22);border:2px solid var(--yellow);border-radius:12px;padding:18px 20px;margin:6px 0}
.vault-pf-panel.prod{border-color:var(--red)}
.vault-pf-phase{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;background:rgba(251,191,36,.15);color:var(--yellow);margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}
.vault-pf-panel.prod .vault-pf-phase{background:rgba(239,68,68,.15);color:var(--red)}
.vault-pf-title{font-size:15px;font-weight:700;color:var(--yellow);margin-bottom:4px}
.vault-pf-panel.prod .vault-pf-title{color:var(--red)}
.vault-pf-desc{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.55}
.vault-pf-warn{font-size:12px;color:#fbbf24;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25);border-radius:8px;padding:10px 12px;margin-bottom:14px;line-height:1.55}
.vault-pf-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:14px}
.vault-pf-table th{background:rgba(255,255,255,.04);padding:6px 10px;text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.vault-pf-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.vault-pf-view-btn{border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.12);color:var(--accent2);border-radius:5px;padding:2px 9px;font-size:11px;cursor:pointer;transition:background .15s}
.vault-pf-view-btn:hover:not(:disabled){background:rgba(99,102,241,.28)}
.vault-pf-view-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.vault-pf-reveal-wrap{position:relative;display:inline-block}
.vault-pf-reveal-popup{position:absolute;left:0;top:30px;z-index:500;background:var(--surface);border:1.5px solid var(--yellow);border-radius:8px;padding:12px 14px;min-width:300px;max-width:440px;box-shadow:0 4px 28px rgba(0,0,0,.65)}
.vault-pf-reveal-val{font-family:monospace;font-size:11.5px;color:#a5f3fc;word-break:break-all;margin:6px 0 8px;user-select:all}
.vault-pf-reveal-timer{font-size:10px;color:var(--dim);margin-top:5px}
.vault-pf-reveal-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;line-height:1}
.vault-pf-confirm-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid var(--border)}
.vault-pf-confirm-row input[type=checkbox]{width:15px;height:15px;margin-top:2px;cursor:pointer;accent-color:var(--accent);flex-shrink:0}
.vault-pf-confirm-label{font-size:12px;color:var(--text);cursor:pointer;line-height:1.5}
.vault-pf-go-btn{width:100%;padding:10px;font-size:13px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:opacity .15s,transform .1s;background:var(--yellow);color:#000}
.vault-pf-panel.prod .vault-pf-go-btn{background:var(--red);color:#fff}
.vault-pf-go-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.vault-pf-go-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}
.vault-pf-locked-banner{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red);display:flex;align-items:center;gap:8px;margin-top:12px}
.vault-pf-empty{text-align:center;padding:22px 12px;color:var(--muted);font-size:12px;font-style:italic}
.vault-pf-status{font-size:11px;padding:2px 6px;border-radius:4px}
.vault-pf-status.pending{color:#fbbf24;background:rgba(251,191,36,.1)}
.vault-pf-status.confirmed{color:#34d399;background:rgba(16,185,129,.1)}
/* ── Vault Panel — Generate & Export Enhancements ─────────────── */
.vault-header-right{display:flex;gap:5px;align-items:center}
.vault-export-btn{border:1px solid rgba(16,185,129,.35);background:rgba(16,185,129,.09);color:#34d399;border-radius:5px;padding:2px 8px;font-size:10px;cursor:pointer;transition:background .15s;white-space:nowrap}
.vault-export-btn:hover{background:rgba(16,185,129,.22)}
.vault-regen-btn{border:none;background:rgba(99,102,241,.1);color:var(--accent2);border-radius:4px;padding:2px 6px;font-size:10px;cursor:pointer;transition:background .15s;flex-shrink:0}
.vault-regen-btn:hover{background:rgba(99,102,241,.25)}
.vault-gen-section{border-top:1px dashed rgba(251,191,36,.2);padding:10px 12px;background:rgba(251,191,36,.025)}
.vault-gen-label{font-size:10px;font-weight:700;color:#fbbf24;letter-spacing:.4px;text-transform:uppercase;margin-bottom:7px}
.vault-gen-row{display:flex;gap:6px;align-items:center}
.vault-gen-name{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:4px 8px;font-size:11px;color:var(--text);font-family:monospace;letter-spacing:.03em}
.vault-gen-name::placeholder{color:var(--dim);font-family:monospace}
.vault-gen-name:focus{outline:none;border-color:rgba(251,191,36,.45)}
.vault-gen-btn{flex-shrink:0;border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.12);color:var(--accent2);border-radius:5px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s}
.vault-gen-btn:hover{background:rgba(99,102,241,.28)}
.vault-gen-hint{font-size:9.5px;color:var(--dim);margin-top:5px;min-height:13px;font-style:italic}
.vault-export-banner{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.22);border-radius:6px;padding:8px 11px;margin:0 12px 8px;font-size:11px;color:var(--red);line-height:1.5;display:none}
.vault-export-banner.visible{display:block}
.vault-export-banner-actions{display:flex;gap:6px;margin-top:7px}
/* ── Env Form Sections (simplified 3-section layout) ─────────── */
.seed-widget{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.25);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.seed-widget-title{font-size:12px;font-weight:700;color:var(--accent2);margin-bottom:10px}
.seed-fields{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;flex-wrap:wrap}
@media(max-width:640px){.seed-fields{grid-template-columns:1fr 1fr}}
.seed-label{font-size:10px;color:var(--muted);margin-bottom:3px}
.seed-input,.seed-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-size:12px;color:var(--text);font-family:monospace}
.seed-input:focus,.seed-select:focus{outline:none;border-color:rgba(99,102,241,.5)}
.seed-apply-btn{background:var(--accent2);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;align-self:flex-end;transition:opacity .15s}
.seed-apply-btn:hover{opacity:.85}
.seed-hint{font-size:10px;color:var(--dim);margin-top:7px}
.infra-section{background:rgba(16,185,129,.04);border:1px solid rgba(16,185,129,.2);border-radius:10px;margin-bottom:12px;overflow:hidden}
.infra-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(16,185,129,.07);border-bottom:1px solid rgba(16,185,129,.15);cursor:pointer;user-select:none}
.infra-hdr-title{font-size:12px;font-weight:700;color:#34d399}
.infra-hdr-count{font-size:10px;color:var(--dim)}
.infra-body{padding:0}
.infra-row{display:grid;grid-template-columns:210px 1fr;gap:10px;align-items:center;padding:5px 14px;border-bottom:1px solid rgba(16,185,129,.07)}
.infra-row:last-child{border-bottom:none}
.infra-row-name{font-family:monospace;font-size:11px;font-weight:600;color:var(--text)}
.infra-row-desc{font-size:9.5px;color:var(--dim)}
.infra-inp{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(16,185,129,.18);padding:2px 4px;font-size:11px;color:#34d399;font-family:monospace;transition:border-color .15s}
.infra-inp:focus{outline:none;border-color:#34d399;background:rgba(16,185,129,.04);border-radius:3px 3px 0 0}
.infra-inp::placeholder{color:var(--dim);font-style:italic}
.env-section-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 0 6px;display:flex;align-items:center;gap:8px}
.env-section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.prov-card{background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:10px;margin-top:10px;overflow:hidden}
.prov-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.prov-card-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.prov-card-body{padding:10px 14px}
.prov-item{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);align-items:flex-start}
.prov-item:last-child{border-bottom:none}
.prov-item-name{font-family:monospace;font-size:10.5px;color:var(--accent2);min-width:220px;flex-shrink:0}
.prov-item-body{font-size:11px;color:var(--dim);line-height:1.45}
.prov-item-agent{font-size:10px;color:#34d399;margin-top:2px}
/* ── ENVIRONMENT CONTROLS MODAL ──────────────────────── */
.env-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:32px 16px}
.env-modal.hidden{display:none}
.env-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:780px;display:flex;flex-direction:column}
.env-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.env-panel-hdr h2{font-size:16px;font-weight:700}
.env-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.env-tab{flex:1;padding:12px;font:600 13px/1 inherit;background:none;border:none;color:var(--muted);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent}
.env-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.env-body{padding:24px;display:flex;flex-direction:column;gap:14px}
.env-info-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.env-info-chip{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;font-size:11px;font-family:monospace;color:var(--accent2)}
.env-cost-box{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--yellow);line-height:1.5}
.env-action-row{display:flex;gap:10px}
.env-action-card{flex:1;background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:6px}
.env-action-card:hover{border-color:var(--accent)}
.env-action-card.selected{border-color:var(--accent);background:rgba(99,102,241,.1)}
.env-action-card.danger:hover,.env-action-card.danger.selected{border-color:var(--red);background:rgba(239,68,68,.08)}
.env-action-icon{font-size:22px}
.env-action-title{font-size:12px;font-weight:700;color:var(--text)}
.env-action-desc{font-size:11px;color:var(--muted);line-height:1.4}
.env-action-time{font-size:10px;color:var(--dim);margin-top:2px}
.env-script-wrap{background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:none}
.env-script-wrap.visible{display:block}
.env-script-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface2)}
.env-script-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.env-script-btns{display:flex;gap:6px}
.env-script-pre{margin:0;padding:14px;font:11px/1.7 'Courier New',monospace;color:var(--text);white-space:pre-wrap;word-break:break-word;max-height:240px;overflow-y:auto}
.env-schedule-box{background:rgba(56,189,248,.06);border:1px solid rgba(56,189,248,.2);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--blue);line-height:1.5}
.env-no-seed{text-align:center;padding:40px 20px;color:var(--dim);font-size:13px;line-height:1.6}

/* ── PDF EXPORT ─────────────────────────────────────── */
.pdf-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 14px;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px}
.pdf-btn:hover{border-color:var(--accent);color:var(--text)}

/* ── TOKEN BAR (E5-F2) ───────────────────────────── */
.token-bar{font-size:11px;color:var(--dim);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.token-bar-track{height:4px;width:120px;background:var(--border);border-radius:2px;overflow:hidden;flex-shrink:0}
.token-bar-fill{height:100%;border-radius:2px;background:linear-gradient(to right,var(--accent),var(--accent2))}

/* ── REVISION NOTE (E4-F6) ──────────────────────── */
.revision-note{font-size:12px;color:#888;font-style:italic;margin-top:4px;padding:4px 8px;border-left:2px solid #444;}

/* ── TIMELINE (E5-F3) ───────────────────────────── */
.timeline-event{display:flex;gap:12px;padding:8px 0;border-left:2px solid #222;margin-left:8px;padding-left:12px;}
.tl-dot{width:10px;height:10px;border-radius:50%;margin-left:-17px;margin-top:4px;flex-shrink:0;}
.tl-approved{background:#22c55e;} .tl-revised{background:#f59e0b;} .tl-rejected{background:#ef4444;} .tl-user{background:#6c63ff;} .tl-agent{background:#a89eff;}
.tl-time{font-size:11px;color:#666;} .tl-label{font-size:13px;color:#ccc;}
#timelinePanel{padding:12px;overflow-y:auto;max-height:calc(100vh - 200px);}

/* ── MODAL BOX (new modals) ─────────────────────── */
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface2);}
.modal-hdr span{font-weight:700;font-size:14px;}
.modal-hdr button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;padding:2px 6px;}
.modal-hdr button:hover{color:var(--text);}

/* ── MOBILE RESPONSIVE ─────────────────────────── */

/* ── 768 px — tablets + large phones ─────────── */
@media (max-width: 768px) {

  /* iOS: 16 px minimum on form inputs prevents auto-zoom */
  input:not([type=checkbox]):not([type=radio]),
  textarea,
  select { font-size: 16px !important; }

  /* ── ANDROID LAYOUT OVERFLOW FIX ─────────────
     Prevent any content from creating a horizontal scrollbar. */
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }

  /* ── ANDROID KEYBOARD FIX ─────────────────────
     Allow the body to grow and scroll so Android can automatically
     scroll the focused input into view above the keyboard.
     Home / login / reset stay at exactly one screen height (no body scroll);
     the studio view can grow taller (body scroll handles it). */
  html  { overflow-y: auto; height: auto; min-height: 100%; min-height: 100svh; }
  body  { overflow-y: auto; height: auto; min-height: 100%; min-height: 100svh; }
  #view-home  { height: 100%; height: 100svh; max-height: 100%; overflow: hidden; }

  /* Home nav rail → horizontal segment strip on top (mirrors the studio
     .sidebar collapse pattern below). */
  .home-body { flex-direction: column; }
  .home-nav {
    width: 100%;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0;
    gap: 0;
  }
  /* Horizontal strip: active edge moves to the bottom (same inset-shadow idiom). */
  .hnav-item { flex: 1; justify-content: center; padding: 10px 8px; }
  .hnav-item.active { box-shadow: inset 0 -3px 0 var(--accent); }
  /* Login / Reset: top-aligned + scrollable so the keyboard never hides the
     Sign In button. height:auto + min-height ensures the body (overflow-y:auto)
     can scroll when the keyboard shrinks the visual viewport. */
  #view-login {
    height: auto;
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: 60px;
    padding-bottom: 48px;
  }
  #view-reset {
    height: auto;
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: 60px;
    padding-bottom: 48px;
  }
  /* Studio view grows with content; body scrolls it */
  #view-studio { height: auto; min-height: 100%; min-height: 100svh; }
  .studio-layout  { overflow: visible !important; }
  .main-and-log   { overflow: visible !important; flex: none; height: auto; }
  .main-wrap      { overflow: visible !important; flex: none; height: auto; }
  .convo {
    overflow: visible;
    flex: none;
    height: auto;
    padding-bottom: 300px; /* breathing room above sticky gate */
  }
  /* Gate panel: sticky bottom, default collapsed on mobile */
  .gate-wrap {
    position: sticky;
    bottom: 0;
    z-index: 50;
    max-height: 44px !important;
    overflow: hidden !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.35);
  }
  /* Tap collapse bar to expand */
  #gateWrap.gate-mobile-open {
    /* 100dvh = dynamic viewport height (shrinks with keyboard on modern browsers).
       Subtract 90px for the sticky studio header above. Falls back to 55vh on
       older browsers that don't support dvh. */
    max-height: min(55vh, calc(100dvh - 90px)) !important;
    overflow-y: auto !important;
  }
  /* Studio header: stick to top so navigation is always reachable */
  .studio-header {
    position: sticky;
    top: 0;
    z-index: 11;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    min-height: auto;
  }

  /* Home view */
  #view-home header { padding: 10px 14px; flex-wrap: wrap; }
  #view-home header .right { flex-wrap: wrap; gap: 6px; }
  .home-body { padding: 14px; }
  .home-stats { gap: 8px; }
  .stat-card { min-width: calc(50% - 4px); padding: 12px 14px; }
  .stat-val { font-size: 22px; }
  .sessions-header { flex-wrap: wrap; gap: 8px; }
  .hbtn { min-height: 40px; padding: 7px 12px; }

  /* Modals: reduce padding, cap height, internal scroll.
     max-width is already built into the base rule via min() — no override needed. */
  .modal {
    padding: 20px 16px;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* Compare / home grid: single column */
  .home-grid { grid-template-columns: 1fr !important; }

  /* Studio sidebar → horizontal scrollable step strip */
  .studio-layout { flex-direction: column !important; }
  .sidebar {
    width: 100% !important;
    height: auto;
    max-height: none;
    flex-direction: row;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .sb-title { display: none; }
  .sb-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    padding: 4px 2px;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .sb-list::-webkit-scrollbar { display: none; }
  .sb-item {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-left: none !important;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }
  .sb-item.approved { border-bottom-color: var(--green); }
  .sb-item.awaiting { border-bottom-color: var(--yellow); }
  .sb-item.rejected { border-bottom-color: var(--red); }
  .sb-item.running  { border-bottom-color: var(--blue); }
  .sb-item.active-focus { background: var(--surface2); box-shadow: inset 0 -3px 0 var(--accent); }
  .sb-label { display: none; }
  .sb-rerun { display: none !important; }
  .sb-footer { display: none; }

  /* Studio header right: wrap buttons */
  .studio-header .right { flex-wrap: wrap; gap: 4px; }
  .session-pill { max-width: 220px; }

  /* Progress strip: chips hidden by default; tap ▾ to expand */
  .progress-strip { padding: 6px 12px; gap: 10px; }
  .strip-pct { font-size: 20px; min-width: 48px; }
  .strip-chips { display: none; }
  .strip-chips-toggle {
    display: flex; align-items: center;
    font-size: 14px; padding: 2px 8px;
    color: var(--dim); transition: transform .2s;
  }
  .progress-strip.chips-open .strip-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .progress-strip.chips-open .strip-chips-toggle { transform: rotate(180deg); }

  /* Convo padding */
  .convo { padding: 10px 12px; }

  /* Gate inner */
  .gate-inner { padding: 10px 12px; max-width: 100%; }
  .gate-actions { gap: 6px; }
  .gate-btns { flex-wrap: wrap; }
  .gate-btns button { flex: 1 1 auto; min-width: 100px; }

  /* Log panel: fixed slide-over overlay */
  .log-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 150;
    width: 0 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.5);
  }
  .log-panel.open { width: 300px !important; }

  /* Status bar: compact */
  .status-bar { padding: 4px 10px; gap: 12px; }
  .status-shortcut { display: none; }

  /* Toast: full-width */
  .toast { right: 8px; left: 8px; max-width: none; }

  /* Login card — keep horizontally centered, full width up to max */
  .login-card { padding: 28px 18px; margin: 0 auto; width: 100%; max-width: 400px; }

  /* Profile menu: keep inside viewport */
  .profile-menu { right: 8px; max-width: calc(100vw - 16px); }

  /* Agent editor modal: stack */
  .agents-layout { flex-direction: column; }
  .agents-list-panel {
    flex: 1 1 auto; width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0; padding-bottom: 10px;
    max-height: 30vh;
  }

  /* Env action cards: stack */
  .env-action-row { flex-direction: column; }
  .env-modal { padding: 12px 8px; }

  /* ── Android touch enhancements ───────────── */
  body { overscroll-behavior: none; }
  .home-body, .log-feed, .gate-wrap { overscroll-behavior: contain; }
  .home-body, .log-feed { touch-action: pan-y; }

  /* Touch feedback (:active replaces :hover on Android) */
  .btn-p:active              { filter: brightness(0.82); }
  .btn-s:active, .hbtn:active, .back-btn:active { background: var(--surface3); }
  .btn-move-forward:active   { filter: brightness(0.88); }
  .btn-approve:active        { filter: brightness(0.88); }
  .btn-revise:active         { border-color: var(--yellow); color: var(--yellow); }
  .btn-reject:active         { border-color: var(--red); color: var(--red); }
  .sess-row:active           { border-color: var(--accent); background: rgba(99,102,241,.04); }
  .sb-item:active            { background: var(--surface3); }
  .check-item:active         { background: var(--surface3); }
  .pm-item:active            { background: var(--surface2); }
  .msg-header:active         { background: var(--surface3); }
  .acc-hdr:active            { background: var(--surface3); }

  /* Prevent long-press text selection on interactive elements */
  button, .hbtn, .back-btn, .sess-row, .sb-item,
  .check-item, .pm-item, .msg-header, .acc-hdr,
  .btn-approve, .btn-revise, .btn-reject,
  .btn-move-forward { user-select: none; }

  /* Gate + checklist touch targets: 44 px minimum */
  .btn-approve, .btn-revise, .btn-reject { min-height: 44px; }
  .btn-send, .btn-send-r, .btn-cancel   { min-height: 44px; padding: 10px 16px; }
  .check-item { min-height: 44px; padding: 10px; }
}

/* ── 640 px — phones ─────────────────────────── */
@media (max-width: 640px) {

  /* Session list rows: 2-line card layout */
  .sess-row {
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 9px 12px;
    align-items: flex-start;
  }
  .sess-row-dot { margin-top: 3px; }
  .sess-row-info { flex: 1; min-width: 0; }
  .sess-row-actions { align-self: flex-start; }
  .sess-row-progress { order: 10; flex: 1 1 100%; min-width: 0; margin-left: 20px; }
  .sess-row-status { order: 10; min-width: auto; font-size: 10px; }
  .sess-row-date   { order: 10; min-width: auto; font-size: 10px; }
  /* Trim session meta — keep status label only; hide count/time/tags */
  .sess-row-meta > span:not(.sess-row-status) { display: none; }
  /* Trim action buttons — keep only the primary Open/Resume button */
  .sess-row-actions .hbtn.btn-xs { display: none; }

  /* Compare modal: single column */
  .compare-grid { grid-template-columns: 1fr !important; }

  /* Modals: tighter padding, stack modal-rows */
  .modal { padding: 18px 14px; }
  .modal-row { flex-direction: column; }

  /* ── Studio header ••• overflow menu ──────────────────────────
     Activate the overflow wrapper so secondary actions collapse
     into a dropdown; keep only Log / Theme / Avatar inline. */
  .studio-ovf-wrap {
    display: flex;
    align-items: center;
    position: relative;
  }
  .studio-ovf-btn { display: flex; align-items: center; }
  .studio-ovf-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    flex-direction: column;
    gap: 3px;
    z-index: 300;
    min-width: 170px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
  }
  .studio-ovf-menu.open { display: flex; }
  .studio-ovf-menu .hbtn {
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-sm);
    font-weight: 500;
  }

  /* Compact the visible header buttons (Log, Theme still inline) */
  .studio-header .right > .hbtn,
  .studio-header .right > .theme-toggle-btn {
    font-size: 11px;
    padding: 4px 8px !important;
  }

  /* Approve button */
  .btn-approve { min-width: 0; font-size: 12px; }

  /* Seed widget fields: 2 columns */
  .seed-fields { grid-template-columns: 1fr 1fr; }
}

/* ── 480 px — small phones ──────────────────── */
@media (max-width: 480px) {

  /* Home header: trimmed */
  .home-logo { font-size: 15px; }
  .hbtn { font-size: 11px; padding: 6px 10px; }
  #view-home header .right { gap: 4px; }
  .home-body { padding: 10px; }
  .stat-card { flex: 1 1 calc(50% - 4px); min-width: 0; }
  #view-home header [data-action="openAnalytics"],
  #view-home header [data-action="openMultiCompare"] { display: none; }

  /* Session rows: ultra compact — dot + name + action only */
  .sess-row-progress { display: none; }
  .sess-row-date { display: none; }
  .sess-row-meta { display: none; }

  /* Studio header: tighten */
  .studio-logo { font-size: 13px; }
  .session-pill { max-width: 140px; font-size: 10px; }
  .sb-item { min-width: 36px; padding: 4px 6px; }
  .sb-num { width: 18px; height: 18px; font-size: 9px; }

  /* Progress strip: compact */
  .strip-pct { font-size: 17px; min-width: 36px; }
  .strip-bar-label { font-size: 9px; }

  /* Modals */
  .modal { padding: 14px 12px; gap: 10px; }
  .modal h2 { font-size: 16px; }
  .modal-row { flex-direction: column; gap: 8px; }

  /* Gate inner */
  .gate-inner { padding: 8px 10px; }

  /* Login — tighter padding + less top offset on very small phones */
  #view-login { padding-top: 40px; padding-bottom: 36px; }
  #view-reset  { padding-top: 40px; padding-bottom: 36px; }
  .login-card { padding: 20px 14px; margin: 0 8px; }
  .login-card h2 { font-size: 18px; }

  /* Hide status bar */
  .status-bar { display: none; }

  /* Profile menu */
  .profile-menu { right: 4px; }

  /* Convo + bubbles */
  .convo { padding: 8px; }
  .msg-body { padding: 10px 12px; }

  /* Toast */
  .toast { bottom: 8px; font-size: 12px; }
}

/* ── ≥ 1400 px — wide monitors ───────────────── */
@media (min-width: 1400px) {
  /* Convo: auto-pad so text lines don't span the full monitor width.
     Uses the sidebar + log proportions to keep content in a readable column. */
  .convo {
    padding-left: clamp(20px, 4vw, 80px);
    padding-right: clamp(20px, 4vw, 80px);
  }
  /* Gate inner already has max-width:880px — no change needed. */
}

/* ── Billing cards (Admin → Billing tab) ─────────────────────────── */
.billing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface);
}
.billing-card-name {
  font-weight: 600;
  font-size: 13px;
}

/* ── Self-serve signup wizard ─────────────────────────────────────── */
.sw-step { display: none; }
.sw-step.active { display: block; }
.sw-progress { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; }
.sw-dot { width: 26px; height: 4px; border-radius: 2px; background: var(--border); transition: background .2s; }
.sw-dot.on { background: var(--accent); }
#signupWizard label { display: block; font-size: 11px; color: var(--muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
#signupWizard input[type=text],
#signupWizard input[type=email],
#signupWizard input[type=password] {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font: inherit;
  transition: border-color .15s;
}
#signupWizard input:focus { border-color: var(--accent); outline: none; }
.sw-option {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 10px; color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s; font: inherit;
}
.sw-option:hover { border-color: var(--accent); background: var(--surface3); }
.sw-option-icon { font-size: 22px; line-height: 1; }
.sw-option-desc { color: var(--muted); font-size: 12px; }
.sw-plan { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin: 12px 0; }
.sw-plan-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.sw-plan-note { color: var(--green); font-size: 12px; margin-top: 8px; }
.sw-subtabs { display: flex; gap: 6px; margin-bottom: 12px; }
.sw-subtab {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
}
.sw-subtab.active { border-color: var(--accent); color: var(--text); background: var(--surface3); }
.sw-joinpane { display: none; }
.sw-joinpane.active { display: block; }

/* ── Org Settings → Users: join requests + invite codes ───────────── */
.join-req-row, .join-code-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; background: var(--surface2); font-size: 13px;
}
.join-code-val { font-family: monospace; font-size: 11px; word-break: break-all; background: var(--surface3); padding: 4px 6px; border-radius: 4px; }
.join-code-fresh { background: var(--surface2); border: 1px dashed var(--accent); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; }
.op-subhdr { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ── First-run activation: home notices + setup checklist + status dot ─────── */
.home-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 13px; border: 1px solid var(--border); background: var(--surface2); }
.home-notice.warn   { border-color: var(--yellow); background: rgba(245,158,11,.08); }
.home-notice.info   { border-color: var(--accent); background: rgba(99,102,241,.08); }
.home-notice.danger { border-color: var(--red);    background: rgba(239,68,68,.08); }
.home-notice .btn-xs { margin-left: auto; }
.setup-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); padding: 12px 14px; margin-bottom: 12px; }
.setup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.setup-sub { font-size: 11px; color: var(--muted); }
.setup-dismiss { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 13px; line-height: 1; }
.setup-dismiss:hover { color: var(--text); }
.setup-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.setup-check { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--dim); border: 1px solid var(--border); flex: 0 0 auto; }
.setup-check.done { color: #fff; background: var(--green); border-color: var(--green); }
.setup-label.done { color: var(--muted); text-decoration: line-through; }
.setup-item { align-items: flex-start; }
.setup-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.setup-desc { font-size: 11px; color: var(--dim); line-height: 1.4; }
.setup-item .btn-xs { margin-left: auto; align-self: center; white-space: nowrap; }
.setup-tip { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.setup-foot { margin-top: 8px; }
/* First-run welcome / "how it works" guide */
.welcome-hero { text-align: center; }
.welcome-logo { font-size: 34px; line-height: 1; margin-bottom: 4px; }
.welcome-steps { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.welcome-step { display: flex; align-items: flex-start; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; text-align: left; }
.welcome-step-icon { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.welcome-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.welcome-step-title { font-weight: 600; font-size: 13px; }
.welcome-step-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.welcome-note { font-size: 12.5px; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; text-align: left; line-height: 1.5; }
/* 2FA enrollment + backup codes */
.totp-steps { text-align: left; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 4px 0 8px; padding-left: 18px; }
.totp-secret { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.totp-secret code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 1px; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 6px; }
.backup-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 1px; text-align: center; }
.sys-status { display: inline-flex; align-items: center; font-size: 11px; color: var(--muted); cursor: pointer; padding: 0 6px; user-select: none; }
.sys-status.ok   { color: var(--green); }
.sys-status.warn { color: var(--yellow); }
.sys-status.down { color: var(--red); }

/* ════════════════════════════════════════════════════════════════
   OG-001 / OG-002 — Public shared-run view + "Powered by BellowAI".
   A standalone, no-chrome read-only page reached at #/shared/{token}.
   ════════════════════════════════════════════════════════════════ */
#view-shared { display: flex; flex-direction: column; height: 100%; overflow-y: auto; background: var(--bg); color: var(--text); }
#view-shared.hidden { display: none; }
.shared-wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; flex: 1; display: flex; flex-direction: column; }
.shared-head { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.shared-brand { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: .3px; }
.shared-cta { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.shared-cta:hover { text-decoration: underline; }
.shared-body { flex: 1; padding: 28px 0 40px; }
.shared-loading, .shared-empty { text-align: center; color: var(--dim); padding: 64px 16px; }
.shared-empty h2 { color: var(--text); margin: 0 0 8px; }
.shared-empty .btn-p { display: inline-block; margin-top: 16px; text-decoration: none; }
.shared-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.shared-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-size: 12px; color: var(--muted); }
.shared-title { font-size: 28px; line-height: 1.25; margin: 4px 0 18px; color: var(--text); }
.shared-idea { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 26px; }
.shared-idea-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin-bottom: 6px; }
.shared-idea-body { color: var(--muted); line-height: 1.6; font-size: 14px; }
.shared-steps { display: flex; flex-direction: column; gap: 22px; }
.shared-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.shared-step-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; color: var(--text); }
.shared-step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.shared-badge-ok { font-size: 11px; font-weight: 600; color: var(--green); margin-left: auto; }
.shared-step-body { color: var(--muted); line-height: 1.65; font-size: 14px; overflow-wrap: anywhere; }
.shared-step-body h1, .shared-step-body h2, .shared-step-body h3, .shared-step-body h4 { color: var(--text); }
.shared-step-body pre { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; overflow-x: auto; }
.shared-step-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.shared-outro { text-align: center; margin: 40px 0 8px; color: var(--dim); }
.shared-outro .btn-p { display: inline-block; margin-top: 10px; text-decoration: none; }
.shared-foot { border-top: 1px solid var(--border); padding: 18px 0 28px; text-align: center; }
/* OG-002 — canonical backlink badge. */
.powered-by-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: all .15s; }
.powered-by-badge:hover { color: var(--text); border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   Command palette (Ctrl/Cmd+K) — skin for ui/command-palette.js.
   The module builds its own #cmd-k-overlay and ships no CSS, so these
   are the only styles for it. Uses the shared theme tokens.
══════════════════════════════════════════════════════════════ */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, .62);
}
.cmdk-overlay.hidden { display: none; }
.cmdk-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.cmdk-input-icon { color: var(--muted); font-size: 16px; }
.cmdk-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-size: 15px; font-family: inherit;
}
.cmdk-input::placeholder { color: var(--dim); }
.cmdk-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk-section-header {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--dim);
}
.cmdk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.cmdk-row.selected { background: var(--accent); color: #fff; }
.cmdk-row.selected .cmdk-row-sub { color: rgba(255, 255, 255, .82); }
.cmdk-row.selected .cmdk-match { color: #fff; }
.cmdk-row-icon { width: 20px; text-align: center; flex: 0 0 auto; }
.cmdk-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row-sub { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.cmdk-match { background: transparent; color: var(--accent); font-weight: 700; }
.cmdk-empty { padding: 24px 12px; text-align: center; color: var(--muted); list-style: none; }
.cmdk-footer {
  display: flex; gap: 16px; padding: 10px 16px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 12px;
}
.cmdk-footer kbd, .cmdk-kbd-hint {
  display: inline-block; padding: 1px 6px; margin: 0 2px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; font-family: inherit; font-size: 11px; color: var(--text);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════
   Parallel Agent Dispatch board — skin for ui/agentBoard.js.
   The <agent-board> renders into light DOM, so it inherits these.
══════════════════════════════════════════════════════════════ */
.agent-board { display: block; max-height: 68vh; overflow-y: auto; }
.agent-board .ab-status-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.agent-board .plan-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 2px 12px; }
.agent-board .plan-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.agent-board .plan-summary strong { color: var(--text); }
.agent-board .plan-buttons { display: flex; gap: 8px; }
/* PAD pre-dispatch cost gate (Stage 2) + Stage-1 planning disclosure. */
.pad-cost-gate { flex: 1 1 100%; width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 0 0 4px; background: var(--panel, rgba(0,0,0,.06)); }
.pad-cost-gate h3 { color: var(--text); }
.pad-cost-table th, .pad-cost-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.pad-cost-totals strong { color: var(--text); }
.agent-board .ab-batches { display: flex; flex-direction: column; gap: 18px; }
.agent-board .batch-group { display: flex; flex-direction: column; gap: 10px; }
.agent-board .batch-divider { display: flex; align-items: center; gap: 10px; }
.agent-board .batch-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.agent-board .batch-divider-label { font-weight: 700; font-size: 13px; color: var(--text); }
.agent-board .batch-divider-meta { font-size: 12px; color: var(--dim); }
.agent-board .slice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.agent-board .slice-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--dim); border-radius: var(--radius-sm); padding: 12px;
}
.agent-board .slice-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.agent-board .slice-title { margin: 0; font-size: 14px; color: var(--text); }
.agent-board .slice-id { font-size: 11px; color: var(--dim); font-family: 'JetBrains Mono', monospace; }
.agent-board .slice-status-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface3); color: var(--text); white-space: nowrap; }
.agent-board .slice-description { margin: 8px 0 6px; font-size: 12px; color: var(--muted); }
.agent-board .slice-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--dim); }
.agent-board .slice-meta .slice-err { color: #ef4444; font-weight: 600; }
.agent-board .slice-output { display: none; margin: 10px 0 0; max-height: 240px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.agent-board .slice-card.expanded .slice-output { display: block; }
.agent-board .slice-controls { display: flex; gap: 6px; margin-top: 10px; }
.agent-board .empty-state { text-align: center; padding: 40px 16px; color: var(--muted); }
.agent-board .empty-state h3 { margin: 0 0 6px; color: var(--text); }
/* Status colour-coding (badge bg + card accent). */
.agent-board .slice-card[data-status="queued"]          { border-left-color: #3b82f6; }
.agent-board .slice-card[data-status="running"]         { border-left-color: var(--accent); }
.agent-board .slice-card[data-status="complete"]        { border-left-color: #22c55e; }
.agent-board .slice-card[data-status="failed"]          { border-left-color: #ef4444; }
.agent-board .slice-card[data-status="budget_exceeded"] { border-left-color: #f97316; }
.agent-board .slice-card[data-status="merge_conflict"]  { border-left-color: #a855f7; }
.agent-board .slice-status-badge[data-status="queued"]          { background: #1e3a8a; color: #bfdbfe; }
.agent-board .slice-status-badge[data-status="running"]         { background: var(--accent); color: #fff; }
.agent-board .slice-status-badge[data-status="complete"]        { background: #14532d; color: #bbf7d0; }
.agent-board .slice-status-badge[data-status="failed"]          { background: #7f1d1d; color: #fecaca; }
.agent-board .slice-status-badge[data-status="budget_exceeded"] { background: #7c2d12; color: #fed7aa; }
.agent-board .slice-status-badge[data-status="merge_conflict"]  { background: #581c87; color: #e9d5ff; }
.agent-board [data-status="running"] .slice-status-badge,
.agent-board .plan-summary [data-status="running"] { animation: ab-pulse 1.4s ease-in-out infinite; }
@keyframes ab-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* FE-06 — respect the OS "reduce motion" setting. Zero out the looping/entry
   animations (pulse dot, streaming cursor blink, overlay fade, agent-board
   pulse) so motion-sensitive users aren't subjected to perpetual movement. */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .cursor::after { animation: none; }
  .cred-overlay { animation: none; }
  .agent-board [data-status="running"] .slice-status-badge,
  .agent-board .plan-summary [data-status="running"] { animation: none; }
  /* FE-06 follow-through: kill MOVEMENT transitions too — the sliding toast
     and the animated progress-bar sweeps. Toasts still appear/disappear
     (opacity snaps); bars still fill (width snaps). */
  .toast { transition: opacity .01s; transform: none; }
  .sess-prog-fill, .progress-fill, .sess-prog-bar > div, #stripFill { transition: none; }
}

/* Board-scoped buttons (the app uses .btn-p/.btn-s; the component uses .btn*). */
.agent-board .btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface3); color: var(--text);
  border-radius: var(--radius-sm); font: inherit; font-weight: 600;
}
.agent-board .btn:disabled { opacity: .5; cursor: not-allowed; }
.agent-board .btn-sm { padding: 5px 11px; font-size: 12px; }
.agent-board .btn-xs { padding: 3px 8px; font-size: 11px; }
.agent-board .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.agent-board .btn-ghost { background: transparent; }
.agent-board .btn-secondary { background: var(--surface3); }
.agent-board .btn-danger { background: transparent; border-color: #ef4444; color: #ef4444; }

/* FE-10 -- standardized keyboard focus ring (a11y). Many controls set a bare
   `outline:none` (or lean on a focus border-color that buttons / links / clickable
   cards never get), stranding keyboard users with no visible focus. Restore a
   consistent ring on KEYBOARD focus only (:focus-visible) so pointer clicks stay
   ring-free. Last in the file so it wins source-order ties with the scattered
   `:focus{outline:none}` rules of equal specificity. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   OG-016 — one-time first-login product tour (coachmark/spotlight).
   Pure CSS + JS, no dependencies. Sits above modals (overlay z=100).
   The backdrop is one full-screen dim layer with a transparent
   "hole" punched over the highlighted element via a big box-shadow
   on a positioned frame; the tooltip is positioned in JS.
   ══════════════════════════════════════════════════════════════ */
.tour-root { position: fixed; inset: 0; z-index: 1200; }
.tour-root.hidden { display: none; }
/* Dim backdrop — catches clicks so the page underneath stays inert. */
.tour-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .6);
}
/* The spotlight frame: a transparent box whose enormous outward
   box-shadow paints the dim everywhere EXCEPT the framed target. */
.tour-spotlight {
  position: fixed;
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  pointer-events: none;               /* clicks near the target fall through to backdrop */
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
/* When no anchor resolves, center the tooltip and skip the spotlight. */
.tour-spotlight.tour-no-anchor { display: none; }
.tour-tooltip {
  position: fixed;
  max-width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 10px;
  color: var(--text);
}
.tour-tooltip.tour-centered {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.tour-title { font: 700 15px/1.3 inherit; color: var(--text); margin: 0; }
.tour-body  { font: 400 13px/1.5 inherit; color: var(--muted); margin: 0; }
.tour-foot  { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour-count { font: 500 12px/1 inherit; color: var(--muted); margin-right: auto; }
.tour-skip  {
  background: none; border: none; color: var(--muted);
  font: 500 12px/1 inherit; cursor: pointer; padding: 6px 4px;
  text-decoration: underline; text-underline-offset: 2px;
}
.tour-skip:hover { color: var(--text); }
/* Reuse the app's .btn-p / .btn-s look but sized for the compact tooltip. */
.tour-tooltip .btn-p,
.tour-tooltip .btn-s { padding: 8px 14px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition: none; }
}