/* Webflexr shared UI — one design system for auth.webflexr.co + work.webflexr.co.
 * Claude-desktop shell: left sidebar (top icons · brand · grouped nav · user block),
 * a main window (header bar + scrolling body), and a right-side panel for secondary
 * "windows" (task detail, gate, preview). Dark-first, floating rounded panels.
 *
 * NOTE: this file is deployed byte-identical to BOTH docroots (the auth app and the
 * work app run under different FPM pools / open_basedir, so a shared include is
 * impossible — same twin pattern as auth.php). Keep the two copies in sync. */
:root {
  --accent:#f59e0b; --accent-dim:#f59e0b26; --accent-muted:#f59e0b40;
  --font-sans:ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem; --radius-xl:.75rem; --radius-2xl:1rem;
  --transition:.15s cubic-bezier(.4,0,.2,1);
  --green:#22c55e; --blue:#3b82f6; --purple:#a78bfa; --red:#ef4444; --amber:#f59e0b; --gray:#909090;
}
[data-theme=dark] {
  --bg:#0a0a0b; --sidebar-bg:#111112; --surface:#161618; --surface-2:#1c1c1e; --surface-hover:#202022;
  --panel-border:#ffffff14; --panel-shadow:inset 0 1px 0 #ffffff0d, 0 2px 14px #00000055;
  --sidebar-border:#ffffff0d; --border:#242426; --border-subtle:#1b1b1d;
  --text-primary:#ececec; --text-secondary:#c6c6c8; --text-muted:#8c8c92;
  --nav-label:#5a5a62; --nav-item:#a6a6ad; --nav-hover-bg:#ffffff0d; --nav-hover:#ececec;
  --nav-active-bg:#ffffff16; --nav-active:#fff; --input-bg:#161618;
}
[data-theme=light] {
  --bg:#ecedf1; --sidebar-bg:#f6f6f8; --surface:#ffffff; --surface-2:#fafafb; --surface-hover:#f3f3f5;
  --panel-border:#00000012; --panel-shadow:0 1px 3px #00000012, 0 4px 16px #0000000d;
  --sidebar-border:#00000010; --border:#e4e4e8; --border-subtle:#eeeef1;
  --text-primary:#0b0b0f; --text-secondary:#565663; --text-muted:#9a9aa6;
  --nav-label:#a0a0ac; --nav-item:#565663; --nav-hover-bg:#0000000a; --nav-hover:#0b0b0f;
  --nav-active-bg:#0000000f; --nav-active:#0b0b0f; --input-bg:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text-primary);font:14px/1.55 var(--font-sans)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-muted)}

/* ===================== shell ===================== */
.shell{display:flex;min-height:100vh;padding:8px;gap:8px}
@media(max-width:980px){.shell{padding:0;gap:0}}

/* ---- left sidebar ---- */
.sidebar{width:244px;flex-shrink:0;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);
  border-radius:var(--radius-2xl);display:flex;flex-direction:column;padding:10px 10px 10px;
  position:sticky;top:8px;height:calc(100vh - 16px);transition:width var(--transition)}
.side-top{display:flex;align-items:center;gap:4px;padding:2px 4px 8px}
.ic{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;
  background:transparent;color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;font-size:15px;transition:var(--transition)}
.ic:hover{background:var(--nav-hover-bg);color:var(--text-primary)}
.brand{display:flex;align-items:center;gap:8px;padding:6px 8px 12px}
.brand .mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#000;border-radius:6px;font-weight:800;font-size:13px}
.brand .word{font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand .badge{background:var(--nav-active-bg);color:var(--text-secondary);font-size:9px;font-weight:800;
  letter-spacing:.08em;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.nav{flex:1;overflow-y:auto;overflow-x:hidden}
.nav .lbl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-label);
  padding:14px 10px 5px;white-space:nowrap;user-select:none}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-lg);
  color:var(--nav-item);font-weight:500;white-space:nowrap;transition:var(--transition)}
.nav a .ei{width:18px;text-align:center;flex-shrink:0}
.nav a:hover{background:var(--nav-hover-bg);color:var(--nav-hover)}
.nav a.on{background:var(--nav-active-bg);color:var(--nav-active)}
.nav a .count{margin-left:auto;font-size:11px;color:var(--nav-label)}

/* user block, pinned bottom */
.side-user{position:relative;margin-top:8px;border-top:1px solid var(--sidebar-border);padding-top:8px}
.side-user .u-btn{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition)}
.side-user .u-btn:hover{background:var(--nav-hover-bg)}
.ava{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#000;font-weight:800;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}
.side-user .who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.side-user .who b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .who small{font-size:10.5px;color:var(--text-muted)}
.side-user .chev{margin-left:auto;color:var(--text-muted);font-size:12px}
.usermenu{position:absolute;left:6px;right:6px;bottom:calc(100% + 4px);background:var(--surface-2);
  border:1px solid var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--panel-shadow);
  padding:5px;display:none;z-index:30}
.side-user.open .usermenu{display:block}
.usermenu a{display:block;padding:8px 10px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px}
.usermenu a:hover{background:var(--nav-hover-bg);color:var(--text-primary)}

/* collapsed sidebar (icon-only) */
.shell.collapsed .sidebar{width:56px}
.shell.collapsed .sidebar .brand .word,.shell.collapsed .sidebar .brand .badge,
.shell.collapsed .sidebar .nav .lbl,.shell.collapsed .sidebar .nav a span:not(.ei),
.shell.collapsed .sidebar .side-user .who,.shell.collapsed .sidebar .side-user .chev{display:none}
.shell.collapsed .sidebar .nav a{justify-content:center;gap:0}

/* ---- main window ---- */
.main{flex:1;min-width:0;background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius-2xl);box-shadow:var(--panel-shadow);overflow:hidden;display:flex;flex-direction:column}
.winbar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;background:var(--surface);z-index:5}
.winbar .wtitle{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px}
.winbar .wtitle .ei{color:var(--text-muted)}
.winbar .wbadge{font:11px/1 var(--font-mono);color:var(--text-muted);background:var(--border-subtle);padding:4px 8px;border-radius:6px}
.winbar .wact{margin-left:auto;display:flex;align-items:center;gap:4px}
.winbody{padding:30px 34px;max-width:1180px;width:100%;margin:0 auto;overflow-y:auto}
@media(max-width:980px){.sidebar{display:none}.main{border-radius:0}.winbody{padding:20px}}

/* ---- right panel (secondary window) ---- */
.rpanel-scrim{position:fixed;inset:0;background:#0008;opacity:0;pointer-events:none;transition:opacity var(--transition);z-index:44}
.rpanel{position:fixed;top:8px;right:8px;bottom:8px;width:min(460px,94vw);background:var(--surface);
  border:1px solid var(--panel-border);border-radius:var(--radius-2xl);box-shadow:0 10px 40px #0009;
  display:flex;flex-direction:column;transform:translateX(calc(100% + 16px));transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:45}
.rpanel.max{width:min(900px,94vw)}
body.rpanel-open .rpanel{transform:translateX(0)}
body.rpanel-open .rpanel-scrim{opacity:1;pointer-events:auto}
.rpanel header{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--border-subtle)}
.rpanel header .rtitle{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpanel-body{padding:18px 18px 26px;overflow-y:auto;flex:1}

/* jump palette (search) */
.palette{position:fixed;inset:0;background:#0009;display:none;align-items:flex-start;justify-content:center;z-index:60}
.palette.open{display:flex}
.palette .pbox{margin-top:12vh;width:min(560px,92vw);background:var(--surface-2);border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);box-shadow:0 20px 60px #000a;overflow:hidden}
.palette input{width:100%;border:0;background:transparent;color:var(--text-primary);font-size:16px;padding:16px 18px;outline:none}
.palette .presults{max-height:52vh;overflow-y:auto;border-top:1px solid var(--border-subtle)}
.palette .presults a{display:flex;align-items:center;gap:10px;padding:11px 18px;color:var(--text-secondary);font-size:13.5px}
.palette .presults a.sel,.palette .presults a:hover{background:var(--nav-hover-bg);color:var(--text-primary)}
.palette .presults .k{margin-left:auto;font:10px/1 var(--font-mono);color:var(--text-muted)}

/* ===================== primitives ===================== */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px;gap:16px}
.pagehead h1{margin:0;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.pagehead .sub{color:var(--text-muted);margin-top:3px;font-size:13px}
.crumb{color:var(--text-muted);font-size:13px;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.crumb:hover{color:var(--text-secondary)}
.meta{color:var(--text-muted);font-size:13px}
.meta b{color:var(--text-secondary);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-primary);padding:8px 14px;border-radius:var(--radius-lg);font:600 13px var(--font-sans);
  cursor:pointer;transition:var(--transition)}
.btn:hover{background:var(--surface-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#000}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{border-color:var(--red);color:var(--red);background:transparent}
.btn.danger:hover{background:#ef444418}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.amber{border-color:var(--amber);color:var(--amber)}
.btn:disabled{opacity:.45;cursor:default}
.mini{background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);border-radius:7px;
  padding:5px 9px;font:500 12px var(--font-sans);cursor:pointer;margin-left:4px;transition:var(--transition)}
.mini:hover{border-color:var(--accent)}.mini:disabled{opacity:.4;cursor:default}

.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);overflow:hidden}
.tbl th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--border-subtle);font-size:13.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:var(--transition)}
.tbl tbody tr.clk{cursor:pointer}
.tbl tbody tr.clk:hover{background:var(--surface-hover)}
.tbl .name{font-weight:600}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.gray{color:var(--gray);background:#90909022}
.pill.green{color:var(--green);background:#22c55e22}
.pill.blue{color:var(--blue);background:#3b82f622}
.pill.amber{color:var(--amber);background:#f59e0b22}
.pill.purple{color:var(--purple);background:#a78bfa22}
.pill.red{color:var(--red);background:#ef444422}

.card{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-xl);
  box-shadow:var(--panel-shadow);padding:22px;margin-bottom:20px}
.card h2{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:9px}
.card .hint{color:var(--text-muted);font-size:13px;margin:0 0 16px}
.card .hint.box{background:var(--surface-2);padding:10px 12px;border-radius:var(--radius-lg)}

/* label/control grid used by settings + forms */
.srow{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--border-subtle)}
.srow:first-of-type{border-top:0}
.srow>label{color:var(--text-muted);font-size:13.5px}
.srow .sub{display:block;color:var(--text-muted);opacity:.75;font-size:11.5px}
@media(max-width:560px){.srow{grid-template-columns:1fr;gap:6px}}

input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  color:var(--text-primary);font:13.5px/1.5 var(--font-sans);padding:9px 12px}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-muted);border-color:var(--accent)}
.frow{margin-bottom:16px}
.frow label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.frow .fh{font-size:12px;color:var(--text-muted);margin-top:5px}
.toggle{display:inline-flex;align-items:center;gap:8px}
.slider{display:flex;align-items:center;gap:11px}
input[type=range]{flex:1;accent-color:var(--accent);height:4px}
.sval{font:12px/1 var(--font-mono);color:var(--accent);width:1.4em;text-align:center}
.radio{display:flex;flex-direction:column;gap:8px}
.clear{font-size:11px;color:var(--red);margin-left:8px}
.secret-state{font:12px/1 var(--font-mono);margin-left:2px}
.ok{color:var(--green)} .miss{color:var(--red)}
.cur{font:12px/1.4 var(--font-mono);color:var(--text-muted);margin-top:4px}

.flash{padding:11px 15px;border-radius:var(--radius-lg);margin-bottom:20px;font-size:14px}
.flash.ok{background:#22c55e1e;border:1px solid var(--green);color:var(--green)}
.flash.error{background:#ef44441e;border:1px solid var(--red);color:var(--red)}

.empty{color:var(--text-muted);text-align:center;padding:60px 0}
code{font-family:var(--font-mono);font-size:12px;background:var(--border-subtle);padding:1px 6px;border-radius:5px}
.save{position:sticky;bottom:0;background:linear-gradient(transparent,var(--surface) 45%);padding:18px 0 4px;margin-top:8px}

/* platform chooser */
.choose-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:8px}
.choose-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);box-shadow:var(--panel-shadow);padding:22px;transition:var(--transition)}
.choose-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.choose-card.soon{opacity:.5;pointer-events:none}
.choose-card .ci{font-size:26px}
.choose-card h3{margin:0;font-size:16px}
.choose-card p{margin:0;color:var(--text-muted);font-size:13px}

/* centered pre-auth pages (login / account) */
.authpage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{width:min(400px,92vw);background:var(--surface);border:1px solid var(--panel-border);
  border-radius:var(--radius-2xl);box-shadow:var(--panel-shadow);padding:30px 28px}
.authcard .brandline{display:flex;align-items:center;gap:9px;margin-bottom:4px;font-weight:800;letter-spacing:-.02em;font-size:20px}
.authcard .brandline .mark{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#000;border-radius:7px;font-size:14px}
.authcard .sub{color:var(--text-muted);font-size:13.5px;margin:0 0 22px}
.authcard label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px}
.authcard button.primary{width:100%;margin-top:22px}
.grid2{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

/* ================= task board (SCASM engine) — unchanged classes ================= */
.prog-top{display:flex;justify-content:space-between;align-items:flex-start}
.prog-top .big{font-size:30px;font-weight:700;letter-spacing:-.02em}
.prog-bar{height:8px;background:var(--border-subtle);border-radius:999px;margin:14px 0 10px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s}
.milestones{font-size:12.5px;color:var(--text-secondary);max-height:180px;overflow-y:auto}
.milestones div{padding:3px 0;border-bottom:1px solid var(--border-subtle)}
.milestones div:last-child{border-bottom:0}
.gate{border:1px solid var(--accent);background:var(--accent-dim)}
.gate h2{color:var(--accent)}
.gate .actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.gate textarea{width:100%;min-height:70px;margin-top:10px}
.fail-card{border:1px solid var(--red);background:#ef44441a}
.fail-card h2{color:var(--red)}
.chat-list{max-height:320px;overflow-y:auto;margin-bottom:12px}
.chat-msg{padding:9px 12px;border-radius:var(--radius-lg);background:var(--surface-hover);margin-bottom:8px}
.chat-msg .who{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:2px}
.chat-msg.claude .who{color:var(--accent)}
.chat-row{display:flex;gap:8px}
.chat-row input{flex:1}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--border-subtle);color:var(--text-secondary)}
.chip.mono{font-family:var(--font-mono);font-size:11px}
.chip.green-chip{color:var(--green);background:#22c55e1e}
.chip.amber-chip{color:var(--amber);background:#f59e0b1e}
.chip.blue-chip{color:var(--blue);background:#3b82f61e}
.chip.red-chip{color:var(--red);background:#ef44441e}
.t-counts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
#driftBanner{border:1px solid var(--amber);background:#f59e0b14;color:var(--amber);border-radius:var(--radius-lg);padding:9px 13px;font-size:12.5px;margin-bottom:12px}
.t-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:12px}
.fbtn{border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:999px;padding:4px 12px;font:600 12px var(--font-sans);cursor:pointer;transition:var(--transition)}
.fbtn:hover{background:var(--surface-hover)}
.fbtn.on{background:var(--accent);border-color:var(--accent);color:#000}
.fbtn .fc{opacity:.7;font-weight:700;margin-left:3px}
.amber-note{color:var(--amber);padding:4px 2px 10px}
.qa-as{font-size:12px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.qa-as input{width:90px;padding:4px 9px;font-size:12px}
.t-cols-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.t-cols-seg button{border:0;background:transparent;color:var(--text-muted);padding:4px 9px;font:600 12px var(--font-sans);cursor:pointer}
.t-cols-seg button.on{background:var(--accent);color:#000}
@media(max-width:900px){.t-cols-seg{display:none}}
#requestsBox{border:1px dashed var(--amber);border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:12px;font-size:13px}
.req-head{font-weight:700;color:var(--amber);margin-bottom:6px}
.req-row{padding:5px 0;border-top:1px solid var(--border-subtle)}
.req-row a{color:var(--accent)}
.t-board{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start;margin-bottom:20px}
@media(max-width:1250px){.t-board{grid-template-columns:1fr}}
.t-main{display:flex;flex-direction:column;gap:18px}
.t-group .t-ghead{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);padding:0 2px 8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.gcount{background:var(--border-subtle);color:var(--text-secondary);border-radius:999px;padding:0 8px;font-size:11px}
.g-in-progress .t-ghead{color:var(--blue)} .g-rework .t-ghead{color:var(--red)}
.g-needs-qa .t-ghead{color:var(--amber)} .g-approved .t-ghead{color:var(--green)}
.t-cards{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:14px}
.t-rail .t-cards{grid-template-columns:1fr}
.t-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}
.tcard{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-xl);box-shadow:var(--panel-shadow);padding:16px;display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.tcard.dim{opacity:.62}
.tcard.has-drift{outline:1px solid var(--amber)}
.tcard.has-drift-error{outline:1px solid var(--red)}
.drift-flag{font-size:12px;color:var(--amber);background:#f59e0b14;border-radius:var(--radius-md);padding:5px 9px}
.drift-flag.err{color:var(--red);background:#ef444414}
.t-top{display:flex;align-items:flex-start;gap:8px}
.tid{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted);background:var(--border-subtle);padding:2px 7px;border-radius:5px;flex-shrink:0;margin-top:1px}
.t-top h3{margin:0;font-size:13.5px;line-height:1.4;flex:1}
.t-pill{flex-shrink:0}
.t-desc{font-size:12.5px;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-desc.open{display:block;-webkit-line-clamp:unset}
.t-more{font-size:11.5px;color:var(--accent);font-weight:600}
.t-scope{display:flex;flex-wrap:wrap;gap:5px}
.t-blocked{font-size:12px;color:var(--amber)}
.t-prog{display:flex;align-items:center;gap:10px;font-size:12.5px}
.t-prog .prog-bar{flex:1;margin:0}
.t-eta{color:var(--amber);font-size:12px;white-space:nowrap}
.t-link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:12.5px}
.t-link .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.t-link .hint{color:var(--text-muted);font-size:11px}
.t-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--text-muted)}
.t-log{font-size:12px}
.t-log summary{cursor:pointer;color:var(--text-muted);font-weight:600}
.t-log-row{padding:4px 0;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.t-log-row .d{color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px;margin-right:8px}
.t-qa{margin-top:auto;border-top:1px solid var(--border-subtle);padding-top:10px}
.qa-lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:6px}
.qa-buttons{display:flex;align-items:center;gap:8px}
.qa-fail.armed{background:var(--red);border-color:var(--red);color:#fff}
.qa-result{font-size:12.5px}
.v-pass{color:var(--green);font-weight:800}
.v-fail{color:var(--red);font-weight:800}
.v-comment{color:var(--text-secondary)}
.qa-clear{color:var(--text-muted);margin-left:6px}
.t-chat summary{cursor:pointer;font-size:12.5px;color:var(--text-secondary);font-weight:600}
.t-chat-new{color:var(--amber)}
.t-chat-list{max-height:260px;overflow-y:auto;margin:10px 0;display:flex;flex-direction:column;gap:7px}
.bub{background:var(--surface-hover);border-radius:var(--radius-lg);padding:7px 11px;font-size:12.5px;max-width:88%}
.bub.mine{align-self:flex-end;background:var(--accent-dim)}
.bub.claude{border-left:2px solid var(--accent);background:var(--accent-dim)}
.bub .who{font-size:10.5px;font-weight:700;color:var(--text-muted);margin-bottom:2px}
.bub a{color:var(--accent)}
.t-chat-img{max-height:220px;max-width:100%;border-radius:var(--radius-md);display:block;margin-top:4px}
.t-chat-compose{display:flex;gap:8px}
.t-chat-compose textarea{flex:1;min-height:34px;max-height:120px;resize:vertical}
.t-chat-compose.armed textarea{border-color:var(--red);outline:1px solid var(--red)}
.t-chat-compose textarea.err{border-color:var(--red);outline:2px solid var(--red)}
.c-note{border-left:2px solid var(--amber);background:var(--surface);border-radius:var(--radius-md);padding:10px 12px;font-size:12.5px;color:var(--text-secondary);margin-bottom:8px}
.c-note-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.env-card{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:12px 14px;font-size:12.5px;margin-bottom:8px}
.env-card.primary{border-color:var(--accent)}
.env-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.env-role{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.env-card p{color:var(--text-muted);font-size:12px;margin:6px 0}
.env-url{display:block;color:var(--accent);font-size:12px;margin:4px 0;overflow:hidden;text-overflow:ellipsis}
.wk-modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50}
.wk-modal-card{background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-2xl);box-shadow:var(--panel-shadow);padding:24px;width:min(480px,92vw)}
.wk-modal-card .actions{display:flex;gap:10px;align-items:center}
#usageFab{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:17px;cursor:pointer;box-shadow:var(--panel-shadow);z-index:40}
#usageFab:hover{color:var(--accent)}
#usagePop{position:fixed;right:22px;bottom:74px;width:280px;background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--radius-xl);box-shadow:var(--panel-shadow);padding:16px;font-size:12.5px;z-index:40}
#usagePop .u-row{margin:8px 0;color:var(--text-secondary)}
#usagePop .u-job{padding:3px 0;border-top:1px solid var(--border-subtle);color:var(--text-muted)}
#usagePop .prog-bar{margin:6px 0 0}
#usagePop .prog-bar.amber i{background:var(--amber)}
#usagePop .prog-bar.red i{background:var(--red)}