:root{
  --bg:#070b14; --bg2:#0c1322; --panel:#0f1828; --panel2:#132034;
  --line:#1d2c44; --txt:#cdd9ee; --muted:#6f829e; --accent:#1fd1c6; --accent2:#3a7bff;
  --gold:#e7c873; --warn:#ff7a59; --ok:#36d399; --grid:#16223a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== WELCOME / BOOT ===== */
#boot{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#0c1a2e,#05080f 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .8s}
.tunnel{width:3px;height:60vh;background:linear-gradient(transparent,var(--accent),transparent);box-shadow:0 0 40px var(--accent);animation:rush 1.6s linear infinite;opacity:.7}
@keyframes rush{0%{transform:translateY(-30%);opacity:.2}50%{opacity:1}100%{transform:translateY(30%);opacity:.2}}
.boot-logo{font-size:54px;font-weight:800;letter-spacing:8px;color:#fff;text-shadow:0 0 24px var(--accent);margin-bottom:6px}
.boot-sub{color:var(--accent);letter-spacing:4px;font-size:14px;margin-bottom:30px}
.boot-lines{font-family:'Courier New',monospace;font-size:13px;color:var(--muted);min-height:140px}
.boot-lines div{opacity:0;animation:fadein .4s forwards}
.boot-lines .ready{color:var(--ok)}
@keyframes fadein{to{opacity:1}}
#enterBtn{margin-top:26px;padding:12px 30px;border:1px solid var(--accent);color:var(--accent);border-radius:30px;background:rgba(31,209,198,.08);opacity:0;animation:fadein .5s 2.4s forwards}
#enterBtn:hover{background:rgba(31,209,198,.2)}
#skipBtn{position:fixed;top:18px;right:22px;color:var(--muted);font-size:13px}

/* ===== WEMCO LANDING EXPERIENCE (Phase 6A) ===== */
/* Every landing state is a FULL-SCREEN layer stacked in #boot. Only the
   .active one is visible; transitions are a restrained opacity crossfade so
   the system feels like it is changing state, not swapping cards. */
.landing-state{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;
  opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s;z-index:1}
.landing-state.active{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}
/* keep the canonical boot-screen tunnel/logo treatment present only on state 1 */
.state-cap{color:var(--accent);letter-spacing:5px;font-size:13px;margin-top:8px;
  text-shadow:0 0 18px rgba(31,209,198,.5);opacity:.9}

/* shared atmospheric background — slow, subconscious life */
.bg-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-fx .scan{position:absolute;left:0;right:0;height:140px;top:-140px;
  background:linear-gradient(transparent,rgba(31,209,198,.06),transparent);
  animation:scan 9s linear infinite}
@keyframes scan{0%{top:-140px}100%{top:100%}}
.bg-fx .particle{position:absolute;top:var(--top);left:var(--left);width:2px;height:2px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);
  opacity:.0;animation:drift 18s linear infinite;animation-delay:var(--delay)}
@keyframes drift{0%{opacity:0;transform:translateY(0)}10%{opacity:.5}90%{opacity:.4}100%{opacity:0;transform:translateY(-40px)}}

/* ENTER WEMCO — consistent across every state */
.enter-btn{margin-top:10px;padding:12px 30px;border:1px solid var(--accent);color:var(--accent);
  border-radius:30px;background:rgba(31,209,198,.08);font-size:14px;letter-spacing:2px;
  cursor:pointer;opacity:0;animation:fadein .5s 2.4s forwards;z-index:5}
.enter-btn:hover{background:rgba(31,209,198,.2)}

/* Phase 6B micro-polish: V01 ENTER/dots spacing. The in-flow text group
   (logo+sub+lines) overflows the viewport, so the button was colliding with
   both the dots and the boot text. Keep the button absolute (clears the dots)
   and lift the text group above it via flex-end + a bottom reserve for the
   button and dots. V01 artwork/wordmark/tunnel/boot-text content + animation
   are untouched; only V01's vertical composition is adjusted. */
#state1{justify-content:flex-end;padding-bottom:165px}
#state1 .enter-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:92px;margin-top:0;z-index:3}

/* STATE 2 — supplied Membrane canvas artwork (integrated verbatim). The canvas
   fills Visual 02 only (scoped inside #state2), leaving V01/V03 untouched.
   No wordmark/UI inside the canvas — carried by the carousel overlay. */
#state2{background:#060d18}
/* Polish — stronger visibility (~55% over original unpolished state) via canvas
   filter only; artwork geometry/timing/colour/pulse logic in membrane.js is
   untouched. Targeted, restrained — not an indiscriminate neon wash. */
.membrane-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  pointer-events:none;
  filter:brightness(1.55) contrast(1.08);
  transform:scale(1.13) translateY(-6%);transform-origin:center}
/* Composition: membrane enlarged + lifted slightly above centre so it reads as
   the dominant full-screen visual; caption + ENTER sit clearly below it, above
   the dots. V02-specific — V01/V03 shared layout is untouched. */
#state2 .state-cap{position:absolute;left:0;right:0;bottom:118px;z-index:3}
#state2 .enter-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:60px;
  margin-top:0;z-index:3}
/* STATE 3 — LUMINOUS STRUCTURE: many fine lines + arcs converging into a point,
   light slowly travelling inward (signal finding structure). No wordmark,
   no central vertical line — clearly different from V01. */
.structure{position:relative;width:min(62vmin,460px);aspect-ratio:1;display:flex;
  align-items:center;justify-content:center}
.structure svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px rgba(31,209,198,.26))}
.structure .lines{transform-origin:200px 200px;animation:structspin 120s linear infinite}
@keyframes structspin{to{transform:rotate(360deg)}}
.structure .cline{stroke-dasharray:300;stroke-dashoffset:300;animation:flow 6s ease-in-out infinite}
.structure .cline:nth-child(2n){animation-delay:1.4s}
.structure .cline:nth-child(3n){animation-delay:2.8s}
.structure .cline:nth-child(4n){animation-delay:4.2s}
@keyframes flow{0%{stroke-dashoffset:300;opacity:.2}50%{opacity:.7}100%{stroke-dashoffset:0;opacity:.3}}
.structure .arc{opacity:.4;animation:arcpulse 8s ease-in-out infinite}
@keyframes arcpulse{0%,100%{opacity:.25}50%{opacity:.5}}
.structure .node{animation:corepulse 6s ease-in-out infinite;transform-origin:center}
.structure .art-sweep{position:absolute;inset:-10%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(31,209,198,.12) 50%,transparent 58%);
  transform:translateX(-60%);animation:sweep 15s ease-in-out infinite}

/* navigation affordances — VERY subtle edge cues (keyboard ←/→ is primary).
   The right cue is the restrained "there is more here" invitation on VISUAL 01;
   the left cue appears only once the user moves away from VISUAL 01. */
.more-cue{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  background:transparent;border:none;cursor:pointer;padding:24px;user-select:none;
  opacity:.34;transition:opacity .3s,color .3s}
.more-cue .chev{display:block;font-size:40px;line-height:1;color:rgba(31,209,198,.6);
  text-shadow:0 0 18px rgba(31,209,198,.55);animation:breathe 4s ease-in-out infinite}
.more-cue:hover{opacity:.85;color:var(--accent)}
.more-cue.right{right:0}
.more-cue.left{left:0}
.more-cue.left.hidden{opacity:0;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
.dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:14px}
.dots .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(31,209,198,.5);
  background:transparent;cursor:pointer;padding:0;transition:background .3s,box-shadow .3s}
.dots .dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* ===== PHASE 6B — personal visual foundation (device-local prototype) =====
   Restrained affordances that float above every visual; same WEMCO restrained
   language as the MORE cues. No dashboard chrome. */
.save-cue,.lib-cue{position:absolute;z-index:6;background:transparent;border:none;cursor:pointer;
  padding:14px;color:rgba(31,209,198,.45);opacity:.4;transition:opacity .3s,color .3s,transform .25s}
.save-cue{top:20px;left:22px}
.lib-cue{top:20px;right:22px}
.save-cue:hover,.lib-cue:hover{opacity:.9;color:var(--accent)}
.save-cue svg,.lib-cue svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.save-cue.saved{opacity:.95;color:var(--accent);transform:scale(1.08)}
.save-cue.saved svg{fill:currentColor;stroke:currentColor;filter:drop-shadow(0 0 10px rgba(31,209,198,.6))}
@keyframes savebump{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1.08)}}
.save-cue.saved{animation:savebump .45s ease}

/* Visual library overlay — cinematic, not a settings panel. */
.lib-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(3,7,14,.7);backdrop-filter:blur(4px);opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s}
.lib-overlay.open{opacity:1;visibility:visible;transition:opacity .45s ease}
.lib-panel{width:min(720px,92vw);max-height:84vh;overflow:auto;background:rgba(8,15,26,.96);
  border:1px solid rgba(31,209,198,.28);border-radius:16px;padding:22px 24px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);transform:translateY(10px);transition:transform .45s ease}
.lib-overlay.open .lib-panel{transform:translateY(0)}
.lib-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lib-title{font-size:13px;letter-spacing:3px;color:#fff;font-weight:700}
.lib-scope{font-size:9px;letter-spacing:1.5px;color:var(--gold);border:1px solid var(--gold);
  border-radius:20px;padding:2px 9px;text-transform:uppercase;white-space:nowrap}
.lib-close{margin-left:auto;background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.lib-close:hover{color:var(--accent)}
.lib-note{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:16px;opacity:.85}
.lib-section{margin-bottom:14px}
.lib-sec-label{display:block;font-size:10px;letter-spacing:2px;color:rgba(31,209,198,.7);
  text-transform:uppercase;margin-bottom:8px}
.lib-row{display:flex;gap:12px;flex-wrap:wrap}
.lib-empty{font-size:12px;color:var(--muted);opacity:.8}
.lib-thumb{position:relative;text-align:left;min-width:150px;flex:1 1 150px;cursor:pointer;
  background:rgba(31,209,198,.06);border:1px solid rgba(31,209,198,.2);border-radius:12px;
  padding:14px 14px 12px;color:var(--txt);transition:border-color .25s,background .25s,transform .2s}
.lib-thumb:hover{border-color:var(--accent);background:rgba(31,209,198,.12);transform:translateY(-2px)}
.lib-thumb .lt-name{display:block;font-size:13px;font-weight:600;color:#fff;letter-spacing:.5px}
.lib-thumb .lt-cap{display:block;font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:3px}
.lib-thumb .lt-badge{position:absolute;top:10px;right:12px;font-size:8px;letter-spacing:1px;
  color:var(--gold);border:1px solid var(--gold);border-radius:14px;padding:1px 7px;text-transform:uppercase}
.lib-thumb .lt-set{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:1px;
  color:var(--accent);border:1px solid rgba(31,209,198,.4);border-radius:14px;padding:3px 10px;cursor:pointer}
.lib-thumb .lt-set:hover{background:rgba(31,209,198,.18)}
.lib-thumb .lt-del{position:absolute;bottom:10px;right:12px;font-size:11px;color:var(--warn);
  cursor:pointer;opacity:.7}
.lib-thumb .lt-del:hover{opacity:1}

@media (max-width:760px){
  .boot-logo{font-size:38px;letter-spacing:5px}
  .hanuman{width:62vw}.lineform{width:90vw}
  .more-cue .chev{font-size:32px}
  .boot-lines{font-size:11px}
}
/* ===== LAYOUT ===== */
#app{display:none}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:14px 22px;background:var(--bg2);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:3px;color:#fff;font-size:20px}
.brand span{color:var(--accent)}
/* ===== ACCESS SCOPE INDICATOR (Phase 1: OPERATOR vs OWNER) ===== */
.scope-chip{font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 9px;border-radius:20px;
  background:var(--grid);color:var(--muted);border:1px solid var(--line);text-transform:uppercase;white-space:nowrap}
.scope-chip.owner{background:rgba(231,200,115,.14);color:var(--gold);border-color:var(--gold)}

/* ===== WEMCO BUILD (owner-only build ledger indicator, Phase: visibility) =====
   Distinct gold "owner surface" treatment so it reads as a clickable owner
   control grouped next to the OWNER scope chip — NOT as a muted status badge.
   Honors the existing owner-gated display:none behaviour (set by JS). */
.build-wrap{position:relative;display:inline-block}
.build-badge{font-size:11px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:20px;
  background:rgba(231,200,115,.14);color:var(--gold);border:1px solid var(--gold);
  text-transform:uppercase;white-space:nowrap;cursor:pointer}
.build-badge:hover{filter:brightness(1.15)}

/* ===== COCKPIT HIERARCHY (Phase 2/3) ===== */
/* Tier labels: low-key dividers that name the operational tier. They are
   anchored to the CONTENT column (col 2) so they sit directly above the
   section they describe — NOT in the 280px Today sidebar (the Phase 2 bug
   where auto-placed grid items landed in the left column, detaching the
   heading from its content). */
.section-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  padding:6px 4px 0;font-weight:600;opacity:.8}
/* Secondary operational-signals tier: Activity + Review sit side by side so
   they are easy to scan but clearly subordinate to Today/Prospects. */
.signal-zone{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:980px){ .signal-zone{grid-template-columns:1fr} }
/* PRIMARY tier emphasis (Today + Prospects) — keep them visually anchored:
   the cockpit grid already gives Today a dedicated column; nudge contrast so
   it reads as the operator's immediate briefing without enlarging anything. */
.today-card{border-left:3px solid var(--accent)}
.prospects{border-left:3px solid var(--accent)}
/* CONTROL tier reads as a deeper operational surface, not the first thing
   an ordinary operator reaches for. It lives in the LEFT rail beneath Today. */
.control-panel{opacity:.92}
.control-panel:hover{opacity:1}
/* Narrow-width: collapse the Today sidebar so labels/sections are never
   stranded in a 280px strip. */
/* ===== SECTION-HEADER COUNT CHIPS (Phase 1: attention counts) ===== */
.count-chip{font-size:10px;font-weight:700;letter-spacing:.5px;padding:1px 7px;border-radius:20px;margin-right:8px;
  background:var(--grid);color:var(--muted);border:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.count-chip.attn{background:rgba(255,122,89,.16);color:var(--warn);border-color:rgba(255,122,89,.4)}
.greet{color:var(--muted);font-size:13px}
.search{flex:1;max-width:520px;margin-left:auto;position:relative}
.search input{width:100%;padding:10px 14px 10px 38px;border-radius:24px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:14px}
.search input:focus{outline:none;border-color:var(--accent)}
.search svg{position:absolute;left:12px;top:11px;opacity:.5}
.search-results{position:absolute;top:46px;left:0;right:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;z-index:50;max-height:320px;overflow:auto}
.search-results div{padding:9px 14px;border-bottom:1px solid var(--grid);cursor:pointer;font-size:13px}
.search-results div:hover{background:var(--panel)}

/* ===== API COST GAUGE (Phase 4E) ===== */
.costgauge{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-width:200px;color:var(--txt);font-size:12px;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.costgauge .cg-row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.costgauge .cg-main{margin-bottom:4px}
.costgauge .cg-label{color:var(--muted);letter-spacing:1px;font-size:10px}
.costgauge .cg-balance{color:var(--warn);font-weight:700;font-size:12px}
.costgauge .cg-balance.ok{color:var(--accent)}
.costgauge .cg-spend{color:var(--gold,#e8c87a);font-weight:700;font-size:14px}
.costgauge .cg-refresh{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:1px 7px;cursor:pointer;font-size:12px}
.costgauge .cg-refresh:hover{color:var(--accent);border-color:var(--accent)}
.costgauge .cg-detail{margin-top:8px;border-top:1px solid var(--grid,var(--line));padding-top:6px}
.costgauge .cg-drow{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:11px;color:var(--muted)}
.costgauge .cg-drow b{color:var(--txt);font-weight:600}
.costgauge .cg-note{margin-top:6px;font-size:10px;line-height:1.35;color:var(--muted)}
.costgauge .cg-thresh-low .cg-balance{color:#e8a33a}
.costgauge .cg-thresh-critical .cg-balance{color:#e35d5d}
.tag{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--grid);color:var(--muted);margin-left:8px}

/* ===== SESSION UNLOCK (Phase 4F) ===== */
.lockbtn{margin-left:10px;font-size:11px;color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:3px 10px;background:rgba(231,200,115,.10)}
.lockbtn:hover{filter:brightness(1.15)}
.lockbtn.unlocked{color:var(--ok);border-color:var(--ok);background:rgba(54,211,153,.10);cursor:default}
/* Phase 88B: small static help affordance next to Log In explaining that
   WEMCO identities are admin-provisioned (wemco_employee_setup.py), not
   self-service -- hover/tap only, no new UI surface. */
.login-help{margin-left:6px;color:var(--muted);font-size:11px;cursor:help;border:1px solid var(--line);
  border-radius:50%;padding:0 5px}

/* ===== SYSTEM HEALTH (GET /health) ===== */
.sys-health{margin-left:10px;font-size:11px;color:var(--muted);letter-spacing:.5px}
.sys-health.ok{color:var(--ok)}
.sys-health.warn{color:var(--warn)}

/* ===== RESEARCH-STATE RECONCILIATION (Phase 31, GET /api/research/reconcile) =====
   Same compact badge language as .sys-health above -- no new visual system. */
.reconcile-wrap{position:relative;display:inline-block}
.reconcile-badge{cursor:pointer}
.reconcile-detail{position:absolute;top:22px;left:0;min-width:280px;max-width:380px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  z-index:60;font-size:11px;color:var(--muted);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.reconcile-detail .rc-row{padding:4px 0;border-bottom:1px solid var(--grid)}
.reconcile-detail .rc-row:last-child{border-bottom:none}
.reconcile-detail b{color:var(--txt)}

/* ===== COCKPIT GRID ===== */
/* Two high-level regions sit side by side as two INDEPENDENT vertical stacks:
   .left-rail (Today + AI/Research Control) and .main-area (Prospects +
   Operational Signals). Each rail flows on its own, so resizing the control
   panel grows the left rail only and never pushes the right-hand content down. */
.cockpit-wrap{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:18px;padding:18px;align-items:start}
/* Primary tier label spans the full width above both regions. */
.primary-label{grid-column:1 / -1;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  padding:0 2px 2px;font-weight:700;opacity:.95;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}
/* Independent vertical flow: each rail is a flex column. */
.left-rail{grid-column:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.main-area{grid-column:2;display:flex;flex-direction:column;gap:18px;min-width:0}
/* Narrow-width: collapse the two independent rails into ONE single-column
   document flow. Placed AFTER the base rules so it wins by source order at
   <=900px (today's browsers no longer match media queries against the UA
   stylesheet, so equal-specificity later rules override). DOM order inside
   each rail yields: Today, AI/Research Control, Prospects, Operational
   Signals, Activity/Review. */
@media (max-width:900px){
  .cockpit-wrap{grid-template-columns:1fr}
  .left-rail,.main-area{grid-column:1;grid-column:1;display:flex;flex-direction:column}
  .primary-label{grid-column:1 / -1}
}
.today-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;border-top:3px solid var(--accent)}
.today-card h3{color:var(--muted);font-size:12px;letter-spacing:2px;margin-bottom:14px;text-transform:uppercase}
.today-card h3 .eyebrow{color:var(--accent);font-size:10px;letter-spacing:1px;margin-left:8px;font-weight:600;text-transform:lowercase;opacity:.85}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--grid);font-size:13px}
.stat span{color:var(--muted)}
.stat b{color:var(--accent);font-size:19px;font-weight:700;letter-spacing:.5px}

/* ===== PROSPECT TABLE ===== */
.prospects{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;border-top:3px solid var(--accent)}
.prospects h3{color:var(--muted);font-size:12px;letter-spacing:2px;padding:14px 18px 0;text-transform:uppercase}
/* ===== Phase 74 business-intelligence surfacing (Cockpit only) =====
   Restrained, WEMCO-native. FRESH = no badge (normal). REACTIVATION and
   HUMAN REVIEW are subtle, distinct, and never alarmist. */
.biz-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 18px 12px;border-bottom:1px solid var(--line)}
.biz-filter{display:flex;gap:6px;flex-wrap:wrap}
.biz-filter .bf{background:transparent;border:1px solid var(--line);color:var(--muted);
  font-size:11px;letter-spacing:1px;padding:5px 12px;border-radius:20px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.biz-filter .bf:hover{color:var(--accent);border-color:rgba(31,209,198,.4)}
.biz-filter .bf.active{color:#06121c;background:var(--accent);border-color:var(--accent);font-weight:600}
.biz-counts{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);letter-spacing:.5px}
.biz-counts .bc{white-space:nowrap}
.biz-counts .bc-n{color:#fff;font-weight:700;font-size:13px;margin-right:4px}
.biz-counts .bc.reac .bc-n{color:var(--accent)}
.biz-counts .bc.rev .bc-n{color:var(--gold)}
/* business-cycle badge inside the Company cell */
.biz-badge{display:inline-block;margin-top:6px;font-size:10px;letter-spacing:1.2px;
  padding:3px 9px;border-radius:20px;border:1px solid transparent;font-weight:600}
.biz-badge.biz-reactivation{color:var(--accent);border-color:rgba(31,209,198,.4);
  background:rgba(31,209,198,.1)}
.biz-badge.biz-review{color:var(--gold);border-color:rgba(231,200,115,.5);
  background:rgba(231,200,115,.12)}
.biz-badge.biz-reactivation.sub{margin-left:6px;padding:3px 8px}
/* Phase 79: business segment/industry badge -- a plain FACT, not a warning/
   opportunity signal, so it gets its own neutral accent2 color rather than
   competing visually with the reactivation (accent) / review (gold) badges. */
.seg-badge{display:inline-block;margin-top:6px;margin-left:6px;font-size:10px;letter-spacing:1.2px;
  padding:3px 9px;border-radius:20px;border:1px solid rgba(58,123,255,.4);font-weight:600;
  color:var(--accent2);background:rgba(58,123,255,.1)}
.seg-badge.seg-unknown{color:var(--muted);border-color:var(--line);background:transparent}
.seg-badge.seg-multiple{color:var(--accent2);border-style:dashed}

/* Always-empty Contact/Person column is hidden so the table reads as an
   intelligence queue, not a spreadsheet with a dead column. No data lost
   (the column carried only "—"). */
.person-col{display:none}
.ptable{width:100%;border-collapse:collapse}
.ptable th{text-align:left;font-size:11px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:1px}
.ptable td{padding:14px 14px;border-bottom:1px solid var(--grid);font-size:13px;cursor:pointer}
/* Company identity is the primary scan target: stronger weight, subtle accent. */
.ptable td:first-child b{color:#fff;font-size:14px}
.ptable td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ptable tr:hover{background:var(--panel2)}
.ptable tr{transition:background .12s ease}
.pill{padding:3px 9px;border-radius:20px;font-size:11px;background:var(--grid);color:var(--txt)}
.pill.high{background:rgba(58,123,255,.18);color:#9fc0ff}
.pill.med{background:rgba(231,200,115,.16);color:var(--gold)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.mut{background:var(--muted)}
.actions button{font-size:16px;margin-right:6px;border-radius:8px;padding:5px 9px;background:var(--panel2);border:1px solid var(--line)}
.actions .keep:hover{border-color:var(--ok);color:var(--ok)}
.actions .review:hover{border-color:var(--accent);color:var(--accent)}

/* ===== DOSSIER MODAL ===== */
#overlay{position:fixed;inset:0;background:rgba(3,6,12,.82);z-index:100;display:none;overflow:auto}
.dossier{max-width:1100px;margin:30px auto;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:0}
.dossier-head{display:flex;align-items:flex-start;gap:14px;padding:22px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2);z-index:2}
.dossier-head h2{font-size:22px;color:#fff}
.dossier-head .sub{color:var(--muted);font-size:13px;margin-top:4px}
.closeX{margin-left:auto;font-size:24px;color:var(--muted)}
.why{background:rgba(31,209,198,.07);border:1px solid rgba(31,209,198,.25);border-radius:10px;padding:14px 18px;margin:18px 26px;font-size:13px;color:var(--txt)}
.why b{color:var(--accent)}

/* ===== Phase 80: WEMCO NEEDS YOUR INPUT panel =====
   Gold, matching .biz-badge.biz-review's existing "needs input" color
   language elsewhere in the app -- never alarmist (--warn/red), always
   framed as an actionable work item. */
.human-review-panel{background:rgba(231,200,115,.07);border:1px solid rgba(231,200,115,.3);
  border-radius:10px;padding:14px 18px;margin:0 26px 18px;font-size:13px;color:var(--txt)}
.hr-headline{color:var(--gold);font-weight:700;letter-spacing:1px;font-size:13px;margin-bottom:10px}
.hr-item{border-top:1px solid rgba(231,200,115,.2);padding-top:12px;margin-top:12px}
.hr-item:first-of-type{border-top:none;padding-top:0;margin-top:0}
.hr-title{font-weight:600;color:#fff;font-size:13px;margin-bottom:6px}
.hr-block{margin-bottom:8px}
.hr-block b{color:var(--gold);font-size:10px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:2px}
.hr-block div{color:var(--txt);font-size:12.5px;line-height:1.5}
.hr-opts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.hr-opt{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:11px;
  letter-spacing:.3px;padding:5px 10px;border-radius:16px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.hr-opt:hover{color:var(--gold);border-color:rgba(231,200,115,.5)}
.hr-opt.active{color:#2a2005;background:var(--gold);border-color:var(--gold);font-weight:600}
.hr-note{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);
  font-size:12px;padding:7px 9px;resize:vertical;min-height:32px;box-sizing:border-box}
.hr-save-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.hr-save{background:transparent;border:1px solid rgba(231,200,115,.5);color:var(--gold);font-size:11px;
  padding:6px 12px;border-radius:8px;cursor:pointer}
.hr-save:hover{background:rgba(231,200,115,.12)}
.hr-saved-msg{font-size:11px}

/* Phase 80: year-by-year relationship history table */
.rh-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px}
.rh-table th{text-align:left;color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:1px;
  padding:4px 6px;border-bottom:1px solid var(--line)}
.rh-table td{padding:4px 6px;border-bottom:1px solid var(--grid);color:var(--txt)}
.rh-mark{text-align:center;color:var(--accent);font-weight:600}

/* Phase 80: evidence-source label (INTERNAL EVIDENCE / EXTERNAL EVIDENCE) */
.ev-src{color:var(--accent2);font-style:normal;text-transform:uppercase;letter-spacing:.5px}

/* ===== Phase 87: toast notifications (replaces alert()) =====
   Fixed top-right, below the topbar (~64px), stacking downward. Auto-
   dismissing, non-blocking, restrained -- one line of text, no icons-as-
   images, no animation beyond a simple fade. */
#toastStack{position:fixed;top:70px;right:18px;z-index:300;display:flex;flex-direction:column;
  gap:8px;max-width:340px;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-size:12.5px;color:var(--txt);box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-6px);transition:opacity .18s,transform .18s;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}
.toast.toast-error{border-color:rgba(255,122,89,.5);color:var(--warn)}
.toast.toast-success{border-color:rgba(54,211,153,.4)}
.toast.toast-info{border-color:var(--line)}
/* Phase 88B: optional inline action (e.g. the CLAIM session-expired LOGIN
   button) -- reuses the toast's own text color so it works across all three
   toast-* variants without a new color system. */
.toast-action{align-self:flex-start;background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.3px;cursor:pointer}
.toast-action:hover{background:rgba(255,255,255,.08)}

/* ===== Phase 87: inline release/complete confirmation (replaces confirm()+prompt()) =====
   Replaces the row's normal action buttons IN PLACE with a compact confirm
   step -- no modal, no popup, consistent with the existing restrained
   table-row interaction language. */
.mw-confirm{display:flex;flex-direction:column;gap:6px;min-width:180px}
.mw-confirm .mw-confirm-text{font-size:11px;color:var(--muted);line-height:1.4}
.mw-confirm input{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  color:var(--txt);font-size:11px;padding:5px 7px;width:100%;box-sizing:border-box}
.mw-confirm-row{display:flex;gap:6px}
.mw-confirm-row button{font-size:11px;padding:5px 10px;border-radius:8px;cursor:pointer}
.mw-confirm-yes{background:var(--accent2);color:#fff;border:none}
.mw-confirm-yes.mw-confirm-yes-danger{background:var(--warn);color:#2a0f05}
.mw-confirm-no{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* Phase 87: slot-full hint under the My WEMCO count, and empty-state CTA */
.mw-hint{font-size:11px;color:var(--muted);margin-top:2px}
.mw-hint.mw-hint-full{color:var(--gold)}

/* Phase 86: prospect-claim badge (Company cell) + CLAIM button (Action cell).
   Reuses .biz-badge's shape/sizing so it reads as part of the same badge
   family, distinct color (accent2, same as the Phase 79 segment badge)
   since claim state is workflow/availability, not business-cycle or
   segment fact. */
.claim-badge{display:inline-block;margin-top:6px;margin-left:6px;font-size:10px;letter-spacing:1.2px;
  padding:3px 9px;border-radius:20px;border:1px solid transparent;font-weight:600}
.claim-badge.claim-mine{color:var(--ok);border-color:rgba(54,211,153,.4);background:rgba(54,211,153,.1)}
.claim-badge.claim-inuse{color:var(--muted);border-color:var(--line);background:transparent}
.actions .claim-btn{font-size:11px;letter-spacing:.5px;padding:5px 10px;border-radius:8px;
  background:var(--accent2);color:#fff;border:none;cursor:pointer;font-weight:600}
.actions .claim-btn:hover{filter:brightness(1.1)}
.actions .claim-btn:disabled{opacity:.6;cursor:default}

/* Phase 86: My WEMCO row actions (release/complete) + status/msg text */
.mw-status{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.mw-actions button{font-size:11px;letter-spacing:.3px;padding:5px 9px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);cursor:pointer;margin-right:6px}
.mw-actions .mw-release:hover{border-color:var(--warn);color:var(--warn)}
/* Phase 89: Complete is a non-mutating future-capability preview, not a
   real success action -- deliberately NOT the --ok/green hover treatment
   used for real actions, so it never visually implies a completed task. */
.mw-actions .mw-complete:hover{border-color:var(--accent);color:var(--accent)}
.mw-msg{font-size:12px;padding:8px 4px;color:var(--muted)}
.mw-msg.mw-error{color:var(--warn)}

/* Phase 89: My WEMCO company-name/WCO-ID cells are a second Open affordance
   alongside the existing Open button -- distinct hover/focus treatment so
   the user understands they're interactive, matching WEMCO's existing
   restrained link language (no underline-by-default, no color shift until
   interacted with). */
.mw-open-link{cursor:pointer}
.mw-open-link:hover{text-decoration:underline;color:var(--accent)}
.mw-open-link:focus{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}

/* Phase 81: PROSPECT DECODE -- human-triggered button + result panel */
.decode-btn{background:var(--accent2);color:#fff;border:none;border-radius:8px;padding:8px 16px;
  font-size:12px;font-weight:600;letter-spacing:1px;cursor:pointer}
.decode-btn:disabled{opacity:.6;cursor:default}
.decode-btn:hover:not(:disabled){filter:brightness(1.1)}
.decode-section{margin-top:12px}
.decode-section:first-child{margin-top:0}
.decode-section>b{color:var(--gold);font-size:10px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:4px}
.decode-opp-warn{border-left:2px solid var(--warn);padding-left:8px}
.decode-disclosure{font-size:11px;font-style:italic;border-top:1px solid var(--line);padding-top:8px}

/* ===== Phase 89: DECODE RESEARCH WORKSPACE =====
   Deliberately larger/more immersive than the dossier overlay -- the goal
   is "I am now inside this prospect's complete research workspace", not
   another small card. Layered ABOVE the dossier overlay (higher z-index)
   so opening it never disturbs the dossier underneath. */
#decodeOverlay{position:fixed;inset:0;background:rgba(3,6,12,.9);z-index:150;display:none;overflow:auto}
.decode-workspace{max-width:1400px;margin:20px auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:16px;padding:0;min-height:calc(100vh - 40px)}
.decode-ws-head{display:flex;align-items:flex-start;gap:14px;padding:22px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg2);z-index:2;border-radius:16px 16px 0 0}
.decode-ws-head h2{font-size:22px;color:#fff}
.decode-ws-head .sub{color:var(--muted);font-size:13px;margin-top:4px}
.decode-ws-state{font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 10px;border-radius:20px;
  background:var(--grid);color:var(--muted);border:1px solid var(--line);text-transform:uppercase;margin-left:10px;vertical-align:middle}
.decode-ws-actions{padding:0 28px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.decode-ws-body{padding:0 28px 8px;display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.decode-ws-full{grid-column:1/-1}
.decode-ws-section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.decode-ws-section h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.decode-ws-empty{font-size:12px;color:var(--muted);font-style:italic}
/* Phase 91 Part A: year-by-year OWN relationship history, and a visually
   SEPARATE block for LINKED identity records -- never merged into one
   table, per the brief's explicit instruction. */
.decode-year-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.decode-year-table th,.decode-year-table td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--grid)}
.decode-year-table th{color:var(--muted);font-weight:600;letter-spacing:.5px;font-size:10px;text-transform:uppercase}
.decode-linked-block{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;background:var(--panel2)}
/* Phase 99 Part 9: evidence-card progressive disclosure -- concise summary,
   full source_title/date/URL/notes only on expand. */
.decode-ws-section details summary{cursor:pointer}
.decode-ws-section details summary::-webkit-details-marker{color:var(--muted)}
.decode-ws-section details[open] summary{margin-bottom:4px}
@media (max-width:900px){
  .decode-ws-body{grid-template-columns:1fr}
  .decode-workspace{margin:0;border-radius:0;min-height:100vh}
  .decode-year-table{font-size:11px}
}

/* ===== Phase 96: role chip, My Account, Employee Admin =====
   Deliberately restrained -- reuses .scope-chip/.ptable/.decode-section
   conventions rather than inventing a new visual system. My Account and
   Employee Admin are medium modals (smaller than the Decode workspace, not
   full-screen) layered above everything else; #employeeAdminOverlay is
   Operations-Admin-visible, distinct from the Owner-only control-room
   elements (#cmdToggle/#costGauge/#controlPanel) which stay exactly as
   Phase 93 left them. */
.role-chip{font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 9px;border-radius:20px;
  background:var(--grid);color:var(--muted);border:1px solid var(--line);text-transform:uppercase;
  white-space:nowrap;margin-left:8px}
.role-chip.role-owner{background:rgba(231,200,115,.14);color:var(--gold);border-color:var(--gold)}
.role-chip.role-ops-admin{background:rgba(31,209,198,.12);color:var(--accent);border-color:var(--accent)}

#myAccountOverlay,#employeeAdminOverlay,#loginOverlay{position:fixed;inset:0;background:rgba(3,6,12,.82);z-index:140;
  display:none;overflow:auto}
.myaccount-panel{max-width:520px;margin:60px auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:16px;padding:0}
.admin-panel{max-width:920px;margin:40px auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:16px;padding:0}
.myaccount-head,.admin-head{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2);z-index:2;
  border-radius:16px 16px 0 0}
.myaccount-head h2,.admin-head h2{font-size:18px;color:#fff}
.myaccount-body,.admin-body{padding:20px 24px}
.myaccount-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--grid);font-size:13px}
.myaccount-row span:first-child{color:var(--muted)}

/* Phase 110: compact login panel form elements -- reuses .myaccount-panel/
   .myaccount-head/.myaccount-body for the shell (no new panel pattern). */
.login-form{display:flex;flex-direction:column;gap:6px}
.login-form input{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  color:var(--txt);font-size:14px;padding:10px 12px;letter-spacing:1px}
.login-form input:focus{outline:none;border-color:var(--gold)}
.login-form button{background:var(--accent2);color:#fff;border:none;border-radius:8px;
  padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}
.login-form button:disabled{opacity:.6;cursor:default}
.login-form-msg{font-size:12px;min-height:16px}
.login-form-msg.err{color:var(--warn)}
.login-form-msg.ok{color:var(--ok)}

.admin-create-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.admin-create-form input,.admin-create-form select{background:var(--bg);border:1px solid var(--line);
  border-radius:8px;color:var(--txt);font-size:12px;padding:7px 10px}
.admin-create-form button{background:var(--accent2);color:#fff;border:none;border-radius:8px;
  padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.admin-table th{text-align:left;font-size:10px;color:var(--muted);padding:8px 10px;
  border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.5px}
.admin-table td{padding:9px 10px;border-bottom:1px solid var(--grid)}
.admin-table .status-active{color:var(--ok)}
.admin-table .status-disabled{color:var(--warn)}
.admin-table button{font-size:11px;padding:4px 8px;border-radius:6px;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);cursor:pointer;margin-right:4px}

/* Credential-reveal-once: deliberately NOT a normal auto-dismissing toast --
   the user needs real time to copy a secret. Stays until explicitly closed. */
.credential-reveal{background:rgba(231,200,115,.10);border:1px solid var(--gold);border-radius:10px;
  padding:14px 16px;margin-top:14px}
.credential-reveal .cr-token{font-family:monospace;font-size:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:8px 0;word-break:break-all;
  user-select:all}
.credential-reveal .cr-warn{color:var(--gold);font-size:11px;font-weight:600}
.credential-reveal button{margin-top:8px;font-size:11px;padding:5px 12px;border-radius:8px;
  background:var(--accent2);color:#fff;border:none;cursor:pointer}

@media (max-width:600px){
  .myaccount-panel,.admin-panel{margin:0;border-radius:0;min-height:100vh}
  .admin-table{font-size:11px}
  .admin-create-form{flex-direction:column;align-items:stretch}
}

/* ===== MAGNETIC PANELS ===== */
.panels{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:0 26px 26px}
.panel{grid-column:span 4;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:150px;display:flex;flex-direction:column}
.panel.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,209,198,.3)}
.panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:grab;background:var(--panel2);border-radius:12px 12px 0 0}
.panel-head .ttl{font-size:12px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;flex:1}
.panel-head .grip{color:var(--muted)}
.panel-body{padding:12px;font-size:13px;overflow:auto;flex:1}
.ev{margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--grid)}
.ev .ft{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.ev a{word-break:break-all;font-size:12px}
.muted{color:var(--muted)} .unk{color:var(--warn);font-style:italic}

/* ===== COMMAND WINDOW =====
   Phase 88B: was permanently visible bottom-right, obstructing the prospect
   table. Now closed by default (display:none) and opened only via the
   #cmdToggle header control (see .cmd-toggle below) -- .cmd.open is the
   ONLY thing that reveals it. All existing Command functionality (status
   probe, send, clear, min-toggle) is otherwise unchanged. */
.cmd{display:none;position:fixed;bottom:18px;right:18px;width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;z-index:200;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.cmd.open{display:flex}
.cmd-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--accent);font-size:13px;letter-spacing:1px}
.cmd-head .min{margin-left:auto;color:var(--muted);cursor:pointer}
.cmd-close{color:var(--muted);cursor:pointer;font-size:14px}
.cmd-close:hover{color:var(--warn)}
.cmd-body{padding:12px;font-size:12px;color:var(--muted);max-height:160px;overflow:auto;display:block}
.cmd-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)}
.cmd-input input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--txt);font-size:13px}
.cmd-input button{background:var(--accent);color:#04221f;border-radius:8px;padding:0 12px;font-weight:600}
.voice-row{display:flex;gap:8px;padding:0 12px 10px}
.voice-row button{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.voice-row .soon{opacity:.5}
/* Compact header launcher for the panel above -- lives in the .greet utility
   row next to Owner, same visual language as the other .lockbtn controls. */
.cmd-toggle{color:var(--accent);border-color:var(--accent);background:rgba(31,209,198,.10)}
.cmd-toggle.active{filter:brightness(1.15)}
/* Narrow viewports: the fixed 340px panel would overflow a ~420px screen --
   pin it to the viewport edges instead of a fixed width/right offset. */
@media (max-width:480px){
  .cmd{left:12px;right:12px;width:auto;bottom:12px}
}
.notice{background:rgba(255,122,89,.08);border:1px solid rgba(255,122,89,.25);border-radius:8px;padding:8px 10px;margin:6px 0;font-size:11px;color:var(--warn)}
@media (max-width:1100px){.panels{grid-template-columns:repeat(6,1fr)}.panel{grid-column:span 6}}

/* ===== AI / RESEARCH CONTROL PANEL ===== */
.control-panel{position:relative;margin:18px 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-width:100%}
.control-panel h3{flex:none;font-size:13px;letter-spacing:1px;color:var(--gold);padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.control-panel .min{cursor:pointer;color:var(--muted);font-weight:400}
#ctrlBody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 16px}
/* ---- resizable AI/RESEARCH CONTROL module: dedicated edge/corner hit areas
   only -- the panel surface itself is never a resize target, so normal
   clicks on cards/buttons inside are unaffected. See app.js initCtrlResize(). ---- */
.ctrl-resize{position:absolute;z-index:5;user-select:none}
.ctrl-resize-e{top:0;right:0;width:8px;height:100%;cursor:ew-resize}
.ctrl-resize-s{left:0;bottom:0;height:8px;width:100%;cursor:ns-resize}
.ctrl-resize-se{right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;z-index:6}
body.ctrl-resizing{user-select:none}
/* ---- collapse/restore: header-only footprint, independent of saved expanded
   size (wemco_control_panel_size). We never touch the panel's inline
   width/height here -- only override height visually via !important while
   collapsed, so removing the class snaps back to whatever was there before. ---- */
.control-panel.ctrl-collapsed{height:auto !important}
.control-panel.ctrl-collapsed #ctrlBody{display:none}
.control-panel.ctrl-collapsed .ctrl-resize{display:none;pointer-events:none}
.control-panel h3 .min{user-select:none}
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));gap:10px;margin-bottom:10px}
.ctrl-stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.ctrl-stat span{font-size:11px;color:var(--muted)}
.ctrl-stat b{font-size:15px;font-weight:700;color:var(--txt)}
.badge{font-size:13px;font-weight:800;letter-spacing:1px;padding:2px 0}
.badge.on{color:var(--ok)}
.badge.off{color:var(--warn)}
.ctrl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ctrl-actions button{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--txt);background:var(--panel2)}
.ctrl-actions .danger{background:rgba(255,122,89,.12);border-color:var(--warn);color:var(--warn)}
.ctrl-actions .safe{background:rgba(54,211,153,.10);border-color:var(--ok);color:var(--ok)}
.ctrl-actions .warn{background:rgba(231,200,115,.10);border-color:var(--gold);color:var(--gold)}
.ctrl-actions button:hover{filter:brightness(1.15)}

/* ===== RESEARCH ECONOMICS (Phase 4E economics layer) ===== */
.re-eco{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:14px}
.re-eco h3{margin:0 0 10px;font-size:13px;letter-spacing:1px;color:var(--accent)}
.re-eco .min{margin-left:auto;color:var(--muted);cursor:pointer}
.re-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));gap:10px;margin-bottom:10px}
.re-stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.re-stat span{font-size:10px;color:var(--muted);letter-spacing:.5px}
.re-stat b{font-size:15px;font-weight:700;color:var(--txt)}
.re-detail{margin-bottom:10px;border-top:1px solid var(--grid,var(--line));padding-top:6px}
.re-drow{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:11px;color:var(--muted)}
.re-drow b{color:var(--txt);font-weight:600}
.re-review{margin-top:8px;border-top:1px solid var(--grid,var(--line));padding-top:8px}
.re-rv-title{font-size:11px;color:var(--muted);margin-bottom:6px}
.re-rv-row{display:flex;gap:8px;margin-bottom:6px}
.re-rv-row input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--txt);font-size:12px}
.re-rv-row select{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:12px;padding:0 8px}
.re-rv-row button{border:1px solid var(--ok);border-radius:8px;padding:0 12px;font-size:12px;font-weight:600;color:var(--ok);background:rgba(54,211,153,.10)}

/* ===== RECENT RESEARCH ACTIVITY (real research_worker_audit.csv rows) ===== */
.act-list{max-height:220px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px}
.act-row{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.act-row .act-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.act-row .act-meta{margin-top:3px;font-size:10px;color:var(--muted)}
.act-row .act-err{margin-top:4px;font-size:11px;color:var(--warn)}
.act-pill{padding:2px 8px;border-radius:20px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:var(--grid);color:var(--txt)}
.act-pill.completed{background:rgba(54,211,153,.14);color:var(--ok)}
.act-pill.blocked{background:rgba(255,122,89,.16);color:var(--warn)}
.act-pill.failed{background:rgba(255,122,89,.16);color:var(--warn)}
.act-pill.partial{background:rgba(231,200,115,.16);color:var(--gold)}