/* ══════════════════════════════════════════════════════════
   AIOS Dashboard — CYBR_ design system (app shell)
   Adapted from 04_Assets/Design/design-system.html
══════════════════════════════════════════════════════════ */
:root{
  --bg-base:#070b10; --bg-panel:#0c1118; --bg-panel-alt:#101720; --bg-elevated:#141e28;
  --border:#1a2433; --border-strong:#243347;
  --accent:#c2f032; --accent-bright:#d4ff3d; --accent-dim:#8aab23;
  --accent-glow:rgba(194,240,50,.35); --accent-fill:rgba(194,240,50,.12);
  --text-primary:#dde4ee; --text-secondary:#8898aa; --text-muted:#4a5568;
  --status-high:#ff5c4d; --status-medium:#ffb347; --status-low:#c2f032; --status-ok:#7dd957;
  --radius:4px; --radius-sm:3px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --topbar-h:54px; --nav-w:210px; --nav-w-min:60px; --agent-w:390px;
}
*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  background:var(--bg-base);color:var(--text-secondary);font-family:var(--mono);
  font-size:13px;line-height:1.5;min-height:100vh;cursor:none;overflow:hidden;
  background-image:
    radial-gradient(circle at 15% 0%,rgba(30,60,140,.18),transparent 45%),
    radial-gradient(circle at 85% 100%,rgba(20,40,100,.12),transparent 40%),
    radial-gradient(circle at 50% 50%,rgba(194,240,50,.015),transparent 60%);
}
::selection{background:var(--accent);color:#0a0d0a}

/* scan line */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:8000;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
}

/* ── cursor ── */
.cursor{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:13000;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--accent-glow);
  transition:width .15s,height .15s,background .15s}
.cursor.click{width:6px;height:6px;background:var(--accent-bright)}
.cursor-ring{position:fixed;width:28px;height:28px;border-radius:50%;border:1px solid rgba(194,240,50,.4);
  pointer-events:none;z-index:12999;transform:translate(-50%,-50%);transition:transform .08s,width .2s,height .2s,border-color .2s}
.cursor-ring.hover{width:40px;height:40px;border-color:var(--accent)}
.cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,240,50,.06) 0%,transparent 70%);
  pointer-events:none;transform:translate(-50%,-50%);z-index:9998}
@media (pointer:coarse){body{cursor:auto}.cursor,.cursor-ring,.cursor-glow{display:none}}

/* ══ TOPBAR ══ */
.topbar{
  height:var(--topbar-h);display:flex;align-items:center;gap:20px;padding:0 22px;
  border-bottom:1px solid var(--border);background:rgba(8,12,18,.85);backdrop-filter:blur(8px);
  position:relative;z-index:50;
}
.brand{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:.04em;flex:none}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);
  width:34px;height:32px;display:grid;place-items:center;cursor:none;flex:none;transition:color .2s,border-color .2s,background .2s}
.icon-btn:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill)}
.agent-btn.on{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill)}
.cur-blink{color:var(--accent);text-shadow:0 0 12px var(--accent-glow);animation:blink-cur .9s step-end infinite}
@keyframes blink-cur{0%,100%{opacity:1}50%{opacity:0}}

.topbar-center{flex:1;display:flex;justify-content:center}
.engine-switch{display:flex;align-items:center;gap:10px}
.es-label{font-size:10px;letter-spacing:.16em;color:var(--text-muted)}
.model-select{
  font-family:var(--mono);font-size:11px;background:var(--bg-panel-alt);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;cursor:none;outline:none;
}
.model-select:hover{border-color:var(--accent-dim);color:var(--accent)}

.usage-plate{display:flex;align-items:center;gap:16px;flex:none}
.usage-plate .up{display:flex;align-items:baseline;gap:6px;font-size:11px}
.usage-plate .up-l{font-size:9.5px;letter-spacing:.12em;color:var(--text-muted)}
.usage-plate .up b{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}
.usage-plate .conn{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text-secondary);
  padding-left:14px;border-left:1px solid var(--border)}

.pulse{width:9px;height:9px;border-radius:50%;background:var(--status-ok);
  box-shadow:0 0 0 0 rgba(125,217,87,.5);animation:pulse 2s infinite}
.pulse.off{background:var(--status-high);animation:none;box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(125,217,87,.45)}70%{box-shadow:0 0 0 7px rgba(125,217,87,0)}100%{box-shadow:0 0 0 0 rgba(125,217,87,0)}}

/* ══ SHELL (nav · workspace · agent) ══ */
.shell{display:flex;height:calc(100vh - var(--topbar-h));overflow:hidden}

/* ── LEFT NAV ── */
.nav{width:var(--nav-w);flex:none;border-right:1px solid var(--border);background:var(--bg-panel);
  display:flex;flex-direction:column;gap:2px;padding:14px 10px;overflow-y:auto;
  transition:width .22s cubic-bezier(.22,1,.36,1)}
.nav.min{width:var(--nav-w-min)}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:transparent;color:var(--text-muted);font-family:var(--mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:none;white-space:nowrap;overflow:hidden;
  transition:color .2s,background .2s,border-color .2s}
.nav-item .ic{flex:none;display:grid;place-items:center;color:inherit}
.nav-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
.nav-item.active{color:var(--accent);background:var(--accent-fill);border-color:var(--accent-dim)}
.nav.min .nav-item{justify-content:center;padding:10px 0}
.nav.min .nav-item .lbl{display:none}

/* ── WORKSPACE ── */
.workspace{flex:1;overflow-y:auto;padding:26px 28px 60px;min-width:0}
.view{display:none;animation:fade-in .35s ease both}
.view.active{display:block}
@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── split (list + detail pane) ── */
.split{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
.split-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - var(--topbar-h) - 130px);overflow-y:auto;padding-right:4px}
.split-pane{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;min-height:300px}
.list-row{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-panel);cursor:none;transition:border-color .2s,background .2s,transform .15s}
.list-row:hover{border-color:var(--accent-dim);background:var(--accent-fill);transform:translateX(2px)}
.list-row.sel{border-color:var(--accent);background:var(--accent-fill)}
.list-row .lr-top{display:flex;align-items:center;gap:8px}
.list-row .lr-pri{color:var(--text-primary);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .lr-ts{margin-left:auto;color:var(--text-muted);font-size:10px;flex:none}
.list-row .lr-sec{color:var(--text-muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row.unread .lr-pri{color:var(--accent)}

/* ── doc reader / mail body ── */
.doc-reader{line-height:1.7;color:var(--text-secondary);max-height:calc(100vh - var(--topbar-h) - 130px);overflow-y:auto}
.doc-reader h1,.doc-reader h2,.doc-reader h3{color:var(--text-primary);margin:18px 0 10px;letter-spacing:.02em}
.doc-reader h1{font-size:18px}.doc-reader h2{font-size:15px}.doc-reader h3{font-size:13px}
.doc-reader p{margin:0 0 12px}.doc-reader ul,.doc-reader ol{margin:8px 0 12px 20px}
.doc-reader pre{background:var(--bg-base);border:1px solid var(--border);border-radius:4px;padding:10px;overflow-x:auto;margin:10px 0}
.doc-reader code{font-family:var(--mono);color:var(--accent);font-size:12px}
.doc-reader hr{border:0;border-top:1px solid var(--border);margin:16px 0}
.doc-reader a{color:var(--accent);text-decoration:none}

/* ── detail header (mail / event) ── */
.detail-head{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:16px}
.detail-head .dt-title{font-size:16px;color:var(--text-primary);font-weight:600;margin-bottom:8px;line-height:1.4}
.detail-head .dt-meta{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-muted)}
.detail-head .dt-meta b{color:var(--text-secondary);font-weight:500}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}

/* ── compose form ── */
.compose{display:flex;flex-direction:column;gap:10px;margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
.compose input,.compose textarea{font-family:var(--mono);font-size:12.5px;background:var(--bg-panel-alt);
  color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;outline:none;cursor:none;width:100%}
.compose textarea{min-height:160px;resize:vertical;line-height:1.6}
.compose input:focus,.compose textarea:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.compose .row{display:flex;gap:10px;align-items:center}

/* ── vault cards ── */
.vault-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .25s,transform .2s}
.vault-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.vault-card .vc-head{display:flex;align-items:center;gap:10px}
.vault-card .vc-head .ic{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-fill);
  display:grid;place-items:center;color:var(--accent);flex:none}
.vault-card .vc-head b{color:var(--text-primary);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.vault-card .vc-excerpt{font-size:11.5px;color:var(--text-muted);line-height:1.6;max-height:84px;overflow:hidden}
.vault-card .vc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.vault-card .vc-date{margin-left:auto;font-size:10px;color:var(--text-muted);font-family:var(--mono);text-transform:none;letter-spacing:0}
/* vault dashboard: actions + recently-changed list */
.vault-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.vlist{display:flex;flex-direction:column;gap:2px;padding:6px}
.vrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.vrow:hover{background:var(--accent-fill)}
.vrow .vr-tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dim);min-width:74px;flex:none}
.vrow .vr-title{flex:1;color:var(--text-primary);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .vr-date{font-size:10px;color:var(--text-muted);font-family:var(--mono);flex:none}
.chip{font-size:10.5px;letter-spacing:.04em;padding:5px 10px;border:1px solid var(--border);border-radius:3px;
  color:var(--text-secondary);cursor:none;transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.chip:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill)}

.shead{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dim);margin:6px 0 16px}
.shead::before{content:"//";color:var(--text-muted)}
.shead .n{color:var(--text-muted);margin-left:auto;letter-spacing:.1em;font-weight:500}
.shead:not(:first-child){margin-top:34px}
/* ── Overview "home" — project summary candy ─────────────────────────────── */
@keyframes ov2Up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ovPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ov2-hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;padding:30px 32px;margin:4px 0 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;background:linear-gradient(135deg,var(--bg-panel),var(--bg-panel-alt));animation:ov2Up .5s ease}
.ov2-hero-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(620px 220px at 88% -30%,rgba(var(--accent-rgb,194,240,50),.18),transparent 68%),
  linear-gradient(rgba(var(--accent-rgb,194,240,50),.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(var(--accent-rgb,194,240,50),.04) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px}
.ov2-hero-l,.ov2-hero-r{position:relative;z-index:1}
.ov2-greet{font:700 30px/1.1 var(--font,sans-serif);color:var(--text-primary);letter-spacing:-.01em}
.ov2-date{margin-top:7px;font:500 13px/1 var(--font-mono,monospace);color:var(--text-secondary);text-transform:capitalize}
.ov2-sub{margin-top:15px;font:14px/1.5 var(--font,sans-serif);color:var(--text-muted);max-width:520px}
.ov2-hero-r{text-align:right;flex:none}
.ov2-clock{font:700 36px/1 var(--font-mono,monospace);color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(var(--accent-rgb,194,240,50),.35)}
.ov2-pills{display:flex;gap:8px;justify-content:flex-end;margin-top:13px;flex-wrap:wrap}
.ov2-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--border);border-radius:20px;font:600 11px/1 var(--font-mono,monospace);color:var(--text-secondary);background:var(--bg-base)}
.ov2-pill b{color:var(--text-primary);text-transform:uppercase;margin-left:3px}
.ov2-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--status-ok);box-shadow:0 0 8px var(--status-ok)}
.ov2-pill.ok .dot{animation:ovPulse 2s ease-in-out infinite}
@media(max-width:640px){.ov2-hero{flex-direction:column;align-items:flex-start;gap:18px;padding:22px}.ov2-hero-r{text-align:left}.ov2-pills{justify-content:flex-start}.ov2-greet{font-size:25px}}
/* pulse stat tiles */
.ov2-pulse{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:10px}
@media(max-width:900px){.ov2-pulse{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ov2-pulse{grid-template-columns:1fr}}
.ov2-stat{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:13px;padding:16px 17px;background:var(--bg-panel);display:flex;flex-direction:column;gap:10px;animation:ov2Up .5s ease backwards;animation-delay:calc(var(--i,0)*.06s);transition:border-color .15s,transform .15s}
.ov2-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:currentColor;opacity:.6}
.ov2-stat:hover{border-color:var(--accent-dim);transform:translateY(-3px)}
.ov2-stat-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-fill);color:var(--accent)}
.ov2-stat-main{display:flex;flex-direction:column}
.ov2-stat-val{font:700 28px/1 var(--font,sans-serif);color:var(--text-primary)}
.ov2-stat-lbl{font:600 10.5px/1.3 var(--font-mono,monospace);color:var(--text-secondary);margin-top:5px;text-transform:uppercase;letter-spacing:.04em}
.ov2-stat-sub{font:11.5px/1.3 var(--font,sans-serif);color:var(--text-muted)}
.ov2-stat.acc-a{color:var(--accent)}
.ov2-stat.acc-b{color:#5ec8d8}.ov2-stat.acc-b .ov2-stat-ic{color:#5ec8d8;background:rgba(94,200,216,.13)}
.ov2-stat.acc-c{color:#a78bfa}.ov2-stat.acc-c .ov2-stat-ic{color:#a78bfa;background:rgba(167,139,250,.14)}
.ov2-stat.acc-ok{color:var(--status-ok)}.ov2-stat.acc-ok .ov2-stat-ic{color:var(--status-ok);background:rgba(125,217,87,.13)}
.ov2-stat.acc-warn{color:var(--status-medium);border-color:rgba(255,179,71,.4)}.ov2-stat.acc-warn .ov2-stat-ic{color:var(--status-medium);background:rgba(255,179,71,.13)}
/* systems grid */
.ov2-systems{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:13px;margin-bottom:10px}
.ov2-sys{position:relative;display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid var(--border);border-radius:13px;background:var(--bg-panel);cursor:pointer;overflow:hidden;animation:ov2Up .5s ease backwards;animation-delay:calc(var(--i,0)*.05s);transition:border-color .15s,transform .15s,background .15s}
.ov2-sys::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .22s}
.ov2-sys:hover{border-color:var(--accent-dim);transform:translateY(-3px);background:var(--bg-panel-alt)}
.ov2-sys:hover::before{transform:scaleY(1)}
.ov2-sys-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-fill);color:var(--accent)}
.ov2-sys-body{flex:1;min-width:0}
.ov2-sys-top{display:flex;align-items:center;gap:8px}
.ov2-sys-top b{font:700 14px/1 var(--font,sans-serif);color:var(--text-primary)}
.ov2-sys-tag{font:600 8.5px/1 var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-elevated);padding:3px 6px;border-radius:4px}
.ov2-sys-desc{font:12px/1.4 var(--font,sans-serif);color:var(--text-muted);margin-top:5px}
.ov2-sys-go{flex:none;align-self:center;font:600 11px/1 var(--font-mono,monospace);color:var(--text-dim);transition:color .15s,transform .15s}
.ov2-sys:hover .ov2-sys-go{color:var(--accent);transform:translateX(3px)}
/* today + activity columns */
.ov2-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.ov2-cols{grid-template-columns:1fr}}
.ov2-today{padding:6px}
.ov2-td-block{padding:12px 13px;border-radius:9px;cursor:pointer;transition:background .15s}
.ov2-td-block:hover{background:var(--bg-panel-alt)}
.ov2-td-block + .ov2-td-block{border-top:1px solid var(--border);border-radius:0;margin-top:2px}
.ov2-td-h{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:9px}
.ov2-td-ic{color:var(--accent);display:inline-flex}
.ov2-td-n{margin-left:auto;font-weight:700;color:var(--accent)}
.ov2-td-row{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:12.5px}
.ov2-td-row .p{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ov2-td-row .t{color:var(--text-muted);font:11px/1 var(--font-mono,monospace);flex:none}
.ov2-td-empty{font-size:12px;color:var(--text-dim);padding:2px 0}
/* service chips */
.ov2-services{display:flex;flex-wrap:wrap;gap:9px}
.ov2-svc{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--border);border-radius:20px;font:600 12px/1 var(--font,sans-serif);color:var(--text-secondary);background:var(--bg-panel);cursor:pointer;transition:border-color .15s,color .15s}
.ov2-svc:hover{border-color:var(--accent-dim);color:var(--text-primary)}
.ov2-svc .dot{width:7px;height:7px;border-radius:50%;flex:none}
.ov2-svc.ok .dot{background:var(--status-ok);box-shadow:0 0 7px rgba(125,217,87,.6)}
.ov2-svc.off .dot{background:var(--status-medium)}
.ov2-svc-meta{display:inline-flex;align-items:center;font:600 11px/1 var(--font-mono,monospace);color:var(--text-muted);margin-right:4px;padding:7px 0}
.ov2-stat{cursor:pointer}
/* delta pill */
.ov2-d{font-weight:700;font-family:var(--font-mono,monospace);white-space:nowrap}
.ov2-d.up{color:var(--status-ok)}
.ov2-d.down{color:var(--status-high)}
.ov2-stat-sub .ov2-d{font-size:11px}
/* live KPI badge on system cards */
.ov2-sys-kpi{display:inline-block;margin-top:7px;font:700 12px/1 var(--font-mono,monospace);color:var(--accent);background:var(--accent-fill);padding:4px 8px;border-radius:6px}
.ov2-sys-kpi .ov2-d{margin-left:4px;font-size:10.5px}
/* what needs attention */
.ov2-attn{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:10px}
.ov2-attn-c{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-panel);cursor:pointer;overflow:hidden;animation:ov2Up .5s ease backwards;animation-delay:calc(var(--i,0)*.05s);transition:border-color .15s,transform .15s,background .15s}
.ov2-attn-c:hover{border-color:var(--accent-dim);transform:translateY(-2px);background:var(--bg-panel-alt)}
.ov2-attn-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:4px}
.ov2-attn-c.high .ov2-attn-dot{background:var(--status-high);box-shadow:0 0 8px rgba(255,92,77,.5)}
.ov2-attn-c.warn .ov2-attn-dot{background:var(--status-medium)}
.ov2-attn-c.ok .ov2-attn-dot{background:var(--status-ok)}
.ov2-attn-b{flex:1;min-width:0}
.ov2-attn-t{display:flex;align-items:center;gap:8px;font:600 13px/1.25 var(--font,sans-serif);color:var(--text-primary)}
.ov2-attn-src{font:600 8.5px/1 var(--font-mono,monospace);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--bg-elevated);padding:3px 6px;border-radius:4px}
.ov2-attn-m{font:12px/1.45 var(--font,sans-serif);color:var(--text-secondary);margin-top:5px}
.ov2-attn-go{flex:none;align-self:center;color:var(--text-dim);font-weight:700;transition:color .15s,transform .15s}
.ov2-attn-c:hover .ov2-attn-go{color:var(--accent);transform:translateX(3px)}
/* ── Charts (shared interactive trend) ───────────────────────────────────── */
.ch-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.ch-legend{display:flex;gap:8px;flex-wrap:wrap}
.ch-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--border);border-radius:20px;background:var(--bg-panel-alt);color:var(--text-primary);font:600 11.5px/1 var(--font,sans-serif);cursor:pointer;transition:border-color .15s,opacity .15s}
.ch-chip i{width:11px;height:11px;border-radius:3px;flex:none}
.ch-chip:hover{border-color:var(--accent-dim)}
.ch-chip.off{opacity:.4}
.ch-chip.off i{filter:grayscale(1)}
.ch-opts{display:flex;align-items:center;gap:10px}
.ch-seg{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.ch-typebtn{appearance:none;background:none;border:none;border-right:1px solid var(--border);color:var(--text-secondary);font:600 11px/1 var(--font-mono,monospace);padding:7px 12px;cursor:pointer;transition:background .15s,color .15s}
.ch-typebtn:last-child{border-right:none}
.ch-typebtn:hover{color:var(--text-primary);background:var(--bg-panel-alt)}
.ch-typebtn.on{background:var(--accent);color:var(--bg-base)}
.ch-smooth{appearance:none;background:none;border:1px solid var(--border);border-radius:7px;color:var(--text-secondary);font:600 11px/1 var(--font-mono,monospace);padding:7px 11px;cursor:pointer;transition:border-color .15s,color .15s}
.ch-smooth.on{border-color:var(--accent);color:var(--accent)}
.ch-wrap{position:relative;width:100%}
.ch-svg{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair}
.ch-grid{stroke:var(--border);stroke-width:1;shape-rendering:crispEdges}
.ch-axis{font:500 10px/1 var(--font-mono,monospace);fill:var(--text-secondary)}
.ch-axis.r{fill:var(--text-muted)}
.ch-cross{position:absolute;top:0;width:1px;background:var(--accent);opacity:.5;pointer-events:none;display:none}
.ch-tip{position:absolute;pointer-events:none;display:none;transform:translate(-50%,0);background:var(--bg-elevated);border:1px solid var(--border-strong,var(--border));border-radius:7px;padding:8px 10px;font:600 11px/1.5 var(--font-mono,monospace);color:var(--text-primary);white-space:nowrap;z-index:6;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.ch-tip .d{color:var(--text-muted);margin-bottom:4px}
.ch-tip .r{display:flex;align-items:center;gap:6px}
.ch-tip .r i{width:9px;height:3px;border-radius:2px;display:inline-block}
.ch-tip .r b{color:var(--text-primary);margin-left:2px}
/* reveal-on-scroll animation (robust: final state always visible) */
.ch-reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.ch-wrap.in-view .ch-reveal{opacity:1;transform:none}
.ch-line{stroke-dasharray:4000;stroke-dashoffset:4000}
.ch-wrap.in-view .ch-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);transition-delay:var(--d,0s)}
.ch-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.ch-wrap.in-view .ch-bar{transform:scaleY(1);transition:transform .6s cubic-bezier(.34,1.3,.64,1);transition-delay:var(--d,0s)}
.ch-wrap.no-anim .ch-reveal,.ch-wrap.no-anim .ch-line,.ch-wrap.no-anim .ch-bar{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
@media(max-width:640px){.ch-controls{gap:10px}.ch-opts{width:100%;justify-content:space-between}}
/* per-block "?" plain-language explainer (BlockHelp) */
.shelp-btn{flex:none;width:19px;height:19px;border-radius:50%;border:1px solid var(--border);background:var(--bg-panel-alt);color:var(--text-secondary);font:700 11px/1 var(--font-mono,monospace);cursor:pointer;padding:0;letter-spacing:0;transition:border-color .15s,color .15s}
.shead .n + .shelp-btn{margin-left:10px}
.shelp-btn:hover,.shelp-btn.on{border-color:var(--accent);color:var(--accent)}
.shelp-panel{margin:-6px 0 18px;padding:13px 15px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;background:var(--bg-panel-alt);font:13px/1.55 var(--font,sans-serif);color:var(--text-secondary);letter-spacing:normal;text-transform:none;animation:shelpIn .18s ease}
@keyframes shelpIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.shelp-panel b{color:var(--text-primary)}
.shelp-panel>div+div{margin-top:7px}
.shelp-panel .shelp-tag{display:inline-block;min-width:132px;color:var(--accent);font:600 11px/1.4 var(--font-mono,monospace);vertical-align:top}
@media(max-width:640px){.shelp-panel .shelp-tag{display:block;min-width:0;margin-bottom:2px}}

/* ── grid ── */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* ── panel ── */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  transition:border-color .25s,box-shadow .25s,transform .2s}
.panel:hover{border-color:var(--border-strong);box-shadow:0 0 24px rgba(0,0,0,.5)}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.panel-head h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.panel-head .right{margin-left:auto;color:var(--accent-dim);font-size:11px;letter-spacing:.08em;cursor:none;transition:color .2s}
.panel-head .right:hover{color:var(--accent)}

/* ── widget card (integration) ── */
.widget{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .2s,box-shadow .3s}
.widget:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.widget-head{display:flex;align-items:center;gap:10px}
.widget-head .ic{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-fill);
  display:grid;place-items:center;color:var(--accent);flex:none}
.widget-head .t{display:flex;flex-direction:column}
.widget-head .t b{color:var(--text-primary);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.widget-head .t span{color:var(--text-muted);font-size:10.5px}
.widget-head .cnt{margin-left:auto;font-size:22px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.widget-head .refresh{margin-left:auto;color:var(--text-muted);cursor:none;transition:color .2s,transform .3s}
.widget-head .refresh:hover{color:var(--accent);transform:rotate(90deg)}
/* generic refresh icon-button (panel-head etc.) — was unstyled (default button) */
button.refresh{background:none;border:none;color:var(--text-muted);font-size:14px;line-height:1;
  padding:3px 5px;border-radius:var(--radius-sm);cursor:pointer;transition:color .2s,transform .3s}
button.refresh:hover{color:var(--accent);transform:rotate(90deg)}
.panel-head .refresh{margin-left:auto}
/* schedule-add form controls — match the design system (were default browser inputs) */
.sched-add input,.sched-add select{font-family:var(--mono);font-size:12px;background:var(--bg-panel-alt);
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:8px 10px;outline:none;
  transition:border-color .2s,box-shadow .2s}
.sched-add input:focus,.sched-add select:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.sched-add input::placeholder{color:var(--text-muted)}
.sched-add input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
.sched-add select{appearance:none;-webkit-appearance:none;padding-right:24px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 13px) 14px,calc(100% - 8px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* chat file-attachment chips */
.chat-attach{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 6px;margin:0}
.chat-attach:empty{display:none}
.chat-attach .att-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;
  background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:999px;
  padding:4px 10px;font:11px/1 var(--mono);color:var(--text-secondary)}
.chat-attach .att-chip.up{opacity:.6}
.chat-attach .att-chip b{color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attach .att-x{cursor:pointer;color:var(--text-muted);font-size:13px;line-height:1}
.chat-attach .att-x:hover{color:var(--status-high)}
.chat-input .att-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);cursor:pointer;padding:0 11px;font-size:15px;transition:.2s}
.chat-input .att-btn:hover{border-color:var(--accent-dim);color:var(--accent)}
.att-inbubble{margin-top:6px;font:11px/1.3 var(--mono);color:var(--text-muted)}

/* Ad Studio: live balance + cost estimate */
.as-bal{font-variant-numeric:tabular-nums}
.as-bal b{color:var(--accent)}
.hf-badge.est{border-color:var(--accent-dim);color:var(--accent-dim)}

/* ── Notion: toolbar, filters, reader actions, composer ── */
.notion-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
#notionSearch{flex:1;min-width:200px;font-family:var(--mono);font-size:12.5px;background:var(--bg-panel-alt);
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:9px 12px;outline:none;
  transition:border-color .2s,box-shadow .2s}
#notionSearch:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
#notionSearch::placeholder{color:var(--text-muted)}
.notion-filters{display:flex;gap:6px}
.nf-chip{font:600 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;
  border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;transition:.15s}
.nf-chip:hover{color:var(--text-primary);border-color:var(--accent-dim)}
.nf-chip.on{color:var(--bg-base);background:var(--accent);border-color:var(--accent)}
.nt-badge{font:700 9px/1 var(--mono);letter-spacing:.06em;padding:2px 5px;border-radius:3px;flex:none}
.nt-badge.pg{color:var(--accent);background:var(--accent-fill)}
.nt-badge.db{color:var(--text-secondary);background:var(--bg-elevated,#141e28);border:1px solid var(--border)}
.lr-top{display:flex;align-items:center;gap:8px}
.nt-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.nt-head h1{margin:0}
.nt-meta{font:11px/1 var(--mono);color:var(--text-muted)}
.nt-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.nt-actions .btn{text-decoration:none}
.nt-append{margin:14px 0;display:flex;flex-direction:column;gap:8px}
.nt-append textarea{min-height:60px;resize:vertical;font-family:var(--mono);font-size:12.5px;background:var(--bg-panel-alt);
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:10px;outline:none}
.nt-append textarea:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.nt-append-row{display:flex;align-items:center;gap:10px}
.nt-content{margin-top:6px}
.nt-compose{max-width:680px;display:flex;flex-direction:column;gap:8px}
.nt-compose h2{margin:0 0 6px;font-size:18px}
.nt-lbl{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:8px}
.nt-hint{font:11px/1.5 var(--mono);color:var(--text-muted);margin:2px 0 4px}
.nt-input,.nt-body{font-family:var(--mono);font-size:13px;background:var(--bg-panel-alt);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text-primary);padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
.nt-input:focus,.nt-body:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.nt-body{min-height:160px;resize:vertical;line-height:1.6}
.nt-compose-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.nt-compose-row a{color:var(--accent)}
.widget-list{display:flex;flex-direction:column}
.w-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);transition:background .2s}
.w-row:last-child{border-bottom:0}
.w-row:hover{background:rgba(194,240,50,.03)}
.w-row .pri{color:var(--text-primary);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.w-row .sec{color:var(--text-muted);font-size:10.5px;margin-left:auto;white-space:nowrap;flex:none}
.widget,.widget-list,.w-row{min-width:0;max-width:100%}
.nb-src-link{color:var(--accent-dim);text-decoration:none;font-size:13px;padding:0 6px;flex:none}
.nb-src-link:hover{color:var(--accent)}
.w-row .ts{color:var(--text-muted);font-size:10.5px;width:46px;text-align:right;flex:none}
.w-row .meta{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dim);
  border:1px solid var(--border);border-radius:3px;padding:1px 5px;flex:none}

/* ── buttons ── */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;
  border-radius:var(--radius-sm);cursor:none;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;
  position:relative;overflow:hidden;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#0a0d0a;font-weight:600;box-shadow:0 0 16px var(--accent-glow);
  transition:background .2s,box-shadow .2s,transform .15s}
.btn-primary:hover{background:var(--accent-bright);box-shadow:0 0 28px rgba(194,240,50,.5)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-secondary)}
.btn-ghost:hover{border-color:var(--accent-dim);color:var(--accent);box-shadow:0 0 12px rgba(194,240,50,.1)}
.link-btn{background:none;border:0;color:var(--accent-dim);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;cursor:none;transition:color .2s}
.link-btn:hover{color:var(--accent)}

/* ── seg ── */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.seg button{font-family:var(--mono);background:transparent;border:0;color:var(--text-muted);padding:6px 14px;
  font-size:11px;letter-spacing:.08em;cursor:none;text-transform:uppercase;transition:color .2s,background .2s}
.seg button:hover{color:var(--text-secondary);background:rgba(255,255,255,.03)}
.seg button.on{background:var(--bg-elevated);color:var(--accent)}

/* ── badges ── */
.badge{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;
  border-radius:3px;border:1px solid;display:inline-flex;align-items:center;gap:5px}
.badge-accent{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill)}
.badge-muted{color:var(--text-muted);border-color:var(--border);background:transparent}
.badge-ok{color:var(--status-ok);border-color:rgba(125,217,87,.3);background:rgba(125,217,87,.08)}
.badge-warn{color:var(--status-medium);border-color:rgba(255,179,71,.3);background:rgba(255,179,71,.08)}
.badge-high{color:var(--status-high);border-color:rgba(255,92,77,.3);background:rgba(255,92,77,.08)}

/* ── feed ── */
.feed-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);
  transition:background .2s;border-radius:3px}
.feed-row:last-child{border-bottom:0}
.feed-row:hover{background:rgba(194,240,50,.03);padding-left:6px}
.feed-row .ic{width:24px;height:24px;border-radius:var(--radius-sm);background:var(--bg-panel-alt);
  display:grid;place-items:center;color:var(--accent-dim);flex:none}
.feed-row .pri{color:var(--text-primary);font-size:12px}
.feed-row .sec{color:var(--text-muted);font-size:11px;margin-left:auto}
.feed-row .ts{color:var(--text-muted);font-size:10.5px;width:58px;text-align:right;flex:none}
.empty{color:var(--text-muted);font-size:11.5px;padding:16px 0;text-align:center}

/* ══ SKILLS — square cards ══ */
.skill-group{margin-bottom:26px}
.skill-group h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:13px;display:flex;align-items:center;gap:8px}
.skill-group h4 .sg-n{color:var(--accent-dim);background:var(--accent-fill);border-radius:10px;
  padding:1px 8px;font-size:9.5px;letter-spacing:.04em}
.skill-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.skill-card{display:flex;flex-direction:column;gap:8px;padding:15px 15px 13px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-panel);min-height:150px;position:relative;
  transition:border-color .2s,transform .2s,box-shadow .25s}
.skill-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.skill-card .sc-top{display:flex;align-items:center;gap:9px}
.skill-card .sc-ic{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg-panel-alt);
  display:grid;place-items:center;color:var(--accent-dim);flex:none;transition:color .2s,background .2s}
.skill-card:hover .sc-ic{color:var(--accent);background:rgba(194,240,50,.16)}
.skill-card .sc-kind{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  border:1px solid var(--border);border-radius:3px;padding:2px 6px}
.skill-card .sc-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:none;transition:background .2s}
.skill-card .sc-label{color:var(--text-primary);font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.25}
.skill-card .sc-desc{color:var(--text-muted);font-size:10.5px;line-height:1.5;flex:1}
.skill-card .sc-status{font-size:10px;color:var(--accent-dim);min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.skill-card .sc-actions{display:flex;gap:8px}
.sc-btn{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 10px;border-radius:var(--radius-sm);cursor:none;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.18s}
.sc-run{background:var(--accent-fill);border-color:var(--accent-dim);color:var(--accent)}
.sc-run:hover{background:var(--accent);color:#0a0d0a;box-shadow:0 0 14px var(--accent-glow)}
.sc-stop{background:transparent;color:var(--status-high);border-color:rgba(255,92,77,.35);display:none}
.sc-stop:hover{background:rgba(255,92,77,.12)}
/* state machine */
.skill-card[data-state="running"]{border-color:var(--status-medium)}
.skill-card[data-state="running"] .sc-dot{background:var(--status-medium);animation:pulse-dot 1s infinite}
.skill-card[data-state="running"] .sc-run{display:none}
.skill-card[data-state="running"] .sc-stop{display:inline-flex}
.skill-card[data-state="done"] .sc-dot{background:var(--status-ok)}
.skill-card[data-state="done"] .sc-status{color:var(--status-ok);font-style:normal}
.skill-card[data-state="error"] .sc-dot{background:var(--status-high)}
.skill-card[data-state="error"] .sc-status{color:var(--status-high);font-style:normal}
.skill-card[data-state="stopped"] .sc-dot{background:var(--text-muted)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* ══ OVERVIEW KPI strip ══ */
.ov-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:30px}
@media(max-width:880px){.ov-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ov-kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-panel);cursor:none;transition:border-color .2s,transform .2s,box-shadow .25s}
.kpi:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.kpi-ic{color:var(--accent-dim)}
.kpi:hover .kpi-ic{color:var(--accent)}
.kpi-val{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.kpi-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* clickable integration widget */
.widget.clickable{cursor:none}
.widget.clickable:hover{border-color:var(--accent-dim)}
.widget-foot{margin-top:4px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);opacity:0;transition:opacity .2s,color .2s}
.widget.clickable:hover .widget-foot{opacity:1;color:var(--accent-dim)}

.skill-form{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:18px;margin-bottom:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.skill-form.hidden{display:none}
.skill-form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.field input,.field select{font-family:var(--mono);font-size:12px;background:var(--bg-panel-alt);
  color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;outline:none;cursor:none}
.field input:focus,.field select:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}

.skill-log{font-size:11.5px;color:var(--text-secondary);max-height:300px;overflow-y:auto;white-space:pre-wrap;
  word-break:break-word;line-height:1.6}
.skill-log .ln{padding:1px 0;border-bottom:1px solid rgba(26,36,51,.4)}
.skill-log .ln .tag{color:var(--accent-dim);margin-right:8px}

/* ══ CONTENT ENGINE ══ */
.ce-phase-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);
  margin:18px 0 8px;padding-left:2px}

/* universal target/format selector bar */
.ce-targetbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:11px 14px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel)}
.ce-targetbar-l{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-dim)}
.ce-targetbar #ceTarget{min-width:200px}
.ce-targetbar-hint{font-size:11px;color:var(--text-muted)}
.ce-group{display:flex;flex-direction:column;gap:6px}

/* step card */
.ce-step{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-panel);transition:.15s;cursor:default}
.ce-step:hover{border-color:var(--accent-dim);background:var(--accent-fill)}
.ce-step[data-state="running"]{border-color:var(--status-medium)}
.ce-step[data-state="done"]{border-color:var(--accent-dim)}
.ce-step[data-state="error"]{border-color:var(--status-high)}
.ce-step[data-state="stopped"]{opacity:.55}

/* left column: number + icon */
.ce-step-left{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px;flex:none}
.ce-num{font-size:18px;font-weight:700;color:var(--border-strong);line-height:1;min-width:20px;text-align:center}
.ce-step:hover .ce-num{color:var(--accent-dim)}
.ce-ic{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--bg-panel-alt);
  display:grid;place-items:center;color:var(--text-muted);transition:.15s}
.ce-step:hover .ce-ic{color:var(--accent);background:rgba(194,240,50,.15)}

/* body: label + desc + hint */
.ce-step-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ce-step-head{display:flex;align-items:center;gap:8px}
.ce-step-label{color:var(--text-primary);font-size:13px;font-weight:600;letter-spacing:.02em}
.ce-dot{width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex:none;transition:background .2s;margin-left:auto}
.ce-step[data-state="running"] .ce-dot{background:var(--status-medium);animation:pulse-dot 1s infinite}
.ce-step[data-state="done"] .ce-dot{background:var(--status-ok)}
.ce-step[data-state="error"] .ce-dot{background:var(--status-high)}
.ce-step[data-state="stopped"] .ce-dot{background:var(--text-muted)}
.ce-step-desc{color:var(--text-secondary);font-size:11px;line-height:1.4}
.ce-step-hint{color:var(--text-muted);font-size:10px;display:flex;align-items:center;gap:4px;margin-top:1px}

/* right: actions */
.ce-step-actions{display:flex;align-items:center;gap:6px;flex:none;padding-top:2px}
.ce-stop{color:var(--status-high);border-color:rgba(255,92,77,.35);background:transparent;font-size:11px;padding:5px 9px;gap:4px}
.ce-stop:hover{background:rgba(255,92,77,.12);border-color:var(--status-high)}
.ce-run{font-size:11px;padding:5px 12px;opacity:0;transition:opacity .15s}
.ce-step:hover .ce-run{opacity:1}

/* CE steps rendered as HF-style cards */
.ce-step.hf-card{align-items:stretch}
.ce-step.hf-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.45);background:var(--bg-panel)}
.ce-step.hf-card[data-state="running"]{border-color:var(--accent);box-shadow:0 0 14px rgba(194,240,50,.12);background:var(--bg-panel)}
.ce-step.hf-card[data-state="done"]{border-color:var(--accent-dim);background:var(--bg-panel)}
.ce-step.hf-card[data-state="error"]{border-color:var(--status-high);background:var(--bg-panel)}
.ce-step.hf-card[data-state="stopped"]{opacity:.55;background:var(--bg-panel)}
.ce-step.hf-card .ce-run{opacity:1;flex:1;justify-content:center;font-size:12px;padding:7px 14px}
.ce-step.hf-card .hf-steps{padding:10px 12px;gap:8px}
.ce-step.hf-card .ce-topic{font-family:var(--mono);font-size:12px;background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;color:var(--text-primary);width:100%;outline:none}
.ce-step.hf-card .ce-topic:focus{border-color:var(--accent-dim)}

/* divider */
.ce-divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--text-muted)}
.ce-divider::before,.ce-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.ce-div-txt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  padding:4px 10px;border:1px solid var(--border);border-radius:20px}

/* result panel — full width thread under the step */
.ce-result-panel{margin:10px 0 18px;display:flex;flex-direction:column;gap:12px}
.ce-thread{display:flex;flex-direction:column;gap:14px}
.ce-turn{display:flex;flex-direction:column;gap:10px}

/* user reply bubble (right-aligned) */
.ce-turn.user{align-items:flex-end}
.ce-turn.user .ce-bubble{background:var(--accent-fill);border:1px solid var(--accent-dim);
  color:var(--text-primary);padding:9px 13px;border-radius:10px 10px 2px 10px;font-size:12px;
  line-height:1.45;max-width:75%}

/* intro line above cards */
.ce-intro{color:var(--text-secondary);font-size:12px;line-height:1.55}

/* result cards grid */
.ce-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ce-section-label{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;padding:6px 0 2px;
  border-top:1px solid var(--border);margin-top:4px}
.ce-section-label>span:first-child{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);font-family:var(--mono)}
.ce-section-body{font-size:11.5px;color:var(--text-secondary);line-height:1.55;padding-left:4px}
.ce-banner{grid-column:1/-1;background:var(--bg-panel-alt);border:1px solid var(--accent-dim);
  border-radius:var(--radius-sm);padding:13px 16px;display:flex;flex-direction:column;gap:5px}
.ce-banner-title{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--accent);text-transform:uppercase}
.ce-banner-body{font-size:11.5px;color:var(--text-secondary);line-height:1.55}
.ce-card{position:relative;background:var(--bg-panel-alt);border:1px solid var(--border);min-width:0;overflow:hidden;
  border-radius:var(--radius);padding:16px 16px 15px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.ce-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.6)}
.ce-card-head{display:flex;align-items:flex-start;gap:10px}
/* clear sequence number on the left of the card head */
.ce-card-num{flex:none;font:700 22px/1 var(--mono);color:var(--accent);opacity:.85;
  letter-spacing:-.03em;min-width:24px}
.ce-card-title{flex:1;min-width:0;color:var(--text-primary);font-size:13.5px;font-weight:700;line-height:1.3;
  letter-spacing:.01em;text-transform:uppercase;overflow-wrap:break-word;padding-top:2px}
.ce-card-body{font-size:12px;color:var(--text-secondary);line-height:1.55;overflow-wrap:break-word;word-break:break-word;min-width:0}

/* card actions: copy + cascade to next step */
.ce-card-actions{display:flex;gap:7px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.ce-cbtn{font:600 10.5px/1 var(--mono);letter-spacing:.03em;color:var(--text-secondary);
  background:transparent;border:1px solid var(--border);border-radius:5px;padding:6px 10px;
  cursor:none;display:inline-flex;align-items:center;gap:5px;transition:.14s}
.ce-cbtn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.ce-cbtn.ce-use{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill)}
.ce-cbtn.ce-use:hover{background:rgba(194,240,50,.2);border-color:var(--accent)}

/* full-width doc (conversational / single-section output) */
.ce-doc{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* markdown typography (shared by cards + docs) */
.ce-md>:first-child{margin-top:0}
.ce-md>:last-child{margin-bottom:0}
.ce-md p{margin:0 0 8px}
.ce-md strong,.ce-md b{color:var(--text-primary);font-weight:700}
.ce-md h1,.ce-md h2,.ce-md h3,.ce-md h4{color:var(--text-primary);font-size:13px;font-weight:700;
  margin:14px 0 6px;letter-spacing:.02em}
.ce-md ul,.ce-md ol{margin:0 0 8px;padding-left:20px}
.ce-md li{margin:2px 0}
.ce-md li::marker{color:var(--accent-dim)}
.ce-md code{background:var(--bg-base);border:1px solid var(--border);border-radius:3px;
  padding:1px 5px;font-size:11px;color:var(--accent-bright)}
.ce-md pre{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);
  padding:11px 13px;overflow-x:auto;margin:0 0 8px}
.ce-md pre code{background:none;border:0;padding:0;color:var(--text-secondary)}
.ce-md a{color:var(--accent);text-decoration:none}
.ce-md a:hover{text-decoration:underline}
.ce-md blockquote{border-left:2px solid var(--accent-dim);margin:0 0 8px;padding:2px 0 2px 12px;
  color:var(--text-muted)}
.ce-md hr{border:0;border-top:1px solid var(--border);margin:12px 0}
.ce-md table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;margin:0 0 8px;font-size:11px}
.ce-md th,.ce-md td{border:1px solid var(--border);padding:5px 8px;text-align:left;white-space:nowrap}
.ce-md th{background:var(--bg-panel-alt);color:var(--text-primary)}

/* reply box — standalone bar under the result thread */
.ce-reply-box{display:flex;gap:8px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-panel-alt)}
.ce-reply-input{flex:1;background:var(--bg-base);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:10px 13px;font:500 12px/1.3 var(--mono);outline:none;cursor:auto}
.ce-reply-input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.ce-reply-input::placeholder{color:var(--text-muted)}
.ce-reply-send{flex:none;padding:0 14px;display:flex;align-items:center}

/* ══ AGENT PANEL (right) ══ */
.agent{width:var(--agent-w);flex:none;border-left:1px solid var(--border);background:var(--bg-panel);
  display:flex;flex-direction:column;overflow:hidden;transition:width .24s cubic-bezier(.22,1,.36,1)}
.agent.collapsed{width:0;border-left:0}
.agent.collapsed>*{opacity:0;pointer-events:none}
.agent-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
  background:var(--bg-panel-alt);flex:none}
.agent-head .ah-ic{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-fill);
  display:grid;place-items:center;color:var(--accent);flex:none}
.agent-head .ah-t{display:flex;flex-direction:column;min-width:0}
.agent-head .ah-t b{color:var(--text-primary);font-size:12px;letter-spacing:.12em}
.agent-head .ah-t span{color:var(--text-muted);font-size:10px;letter-spacing:.06em;text-transform:capitalize}
.agent-head .icon-btn{margin-left:auto}
.agent-context{flex:none;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--bg-base);
  font-size:10.5px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;min-height:34px}
.agent-context .ctx-empty{color:var(--text-muted)}
.agent-context .ctx-tag{color:var(--accent-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:600;flex:none}
.agent-context .ctx-val{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-context .ctx-clear{margin-left:auto;color:var(--text-muted);cursor:none;flex:none}
.agent-context .ctx-clear:hover{color:var(--status-high)}

/* ── action proposal card (agent → confirm → native API) ── */
.action-card{border:1px solid var(--accent-dim);border-radius:var(--radius);background:var(--accent-fill);
  padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.action-card .ac-head{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);font-weight:600}
.action-card .ac-body{font-size:11.5px;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;
  max-height:160px;overflow-y:auto;line-height:1.5}
.action-card .ac-body b{color:var(--text-primary);font-weight:500}
.action-card .ac-actions{display:flex;gap:8px}
.action-card.done{border-color:var(--status-ok);background:rgba(125,217,87,.08)}
.action-card.done .ac-head{color:var(--status-ok)}
.action-card.failed{border-color:var(--status-high)}
.action-card.failed .ac-head{color:var(--status-high)}
.action-card .ac-note{font-size:10px;color:var(--text-muted);line-height:1.4;font-style:italic}
.risk-badge{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border:1px solid;border-radius:10px;margin-left:auto}
.risk-auto{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--status-ok);letter-spacing:.06em}
.btn-sm{font-size:10.5px;padding:6px 12px}

/* ══ CHAT (inside agent panel) ══ */
.chat-stream{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:92%;padding:12px 15px;border-radius:var(--radius);font-size:12.5px;line-height:1.65}
.msg.user{align-self:flex-end;background:var(--accent-fill);border:1px solid var(--accent-dim);color:var(--text-primary)}
.msg.assistant{align-self:flex-start;background:var(--bg-panel-alt);border:1px solid var(--border);color:var(--text-secondary)}
.msg .who{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.msg.assistant .who{color:var(--accent-dim)}
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}
.msg pre{background:var(--bg-base);border:1px solid var(--border);border-radius:4px;padding:10px;overflow-x:auto;margin:8px 0}
.msg code{font-family:var(--mono);font-size:12px;color:var(--accent)}
.msg ul,.msg ol{margin:8px 0 8px 20px}
.chat-status{padding:0 20px;height:22px;font-size:11px;color:var(--accent-dim);display:flex;align-items:center;gap:8px}
.chat-status.show .typing-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 1s infinite}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--bg-panel-alt)}
.chat-input input{flex:1;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 14px;color:var(--text-primary);font-family:var(--mono);font-size:13px;outline:none;cursor:none}
.chat-input input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim),0 0 16px rgba(194,240,50,.08)}

/* ── full-width Chat view (shares backend/history with the side panel) ── */
.chat-full{display:flex;flex-direction:column;height:calc(100vh - 190px);min-height:440px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chat-full-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
  background:var(--bg-panel-alt);flex:none}
.chat-full-head .cf-ic{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-fill);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
.chat-full-head .cf-t{display:flex;flex-direction:column;min-width:0}
.chat-full-head .cf-t b{color:var(--text-primary);font-size:12px;letter-spacing:.12em}
.chat-full-head .cf-t span{color:var(--text-muted);font-size:10px;letter-spacing:.06em;text-transform:capitalize}
.chat-full-head .chat-memo{margin-left:auto}
.chat-full .chat-stream{flex:1;min-height:0}
.chat-full .chat-input{background:var(--bg-panel-alt)}

/* ══ METRICS ══ */
.kpi{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  transition:box-shadow .3s,transform .25s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 24px rgba(194,240,50,.1)}
.kpi .lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.kpi .num{font-size:28px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.kpi .sub{font-size:10.5px;color:var(--text-muted);margin-top:6px}
.prog-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.prog-row .prog-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}
.prog-row .prog-label span:last-child{color:var(--accent)}
.prog-track{height:5px;background:var(--bg-panel-alt);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
  width:0;transition:width 1s cubic-bezier(.22,1,.36,1)}
.eng-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
.eng-row:last-child{border-bottom:0}
.eng-row .name{width:90px;color:var(--text-primary);text-transform:capitalize}
.eng-row .bars{flex:1;color:var(--text-muted);font-size:11px}
.eng-row b{color:var(--accent);font-variant-numeric:tabular-nums}

/* ── skeleton ── */
.skel{background:var(--bg-panel-alt);border-radius:3px;position:relative;overflow:hidden;height:14px}
.skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(194,240,50,.06) 50%,transparent);animation:shimmer 1.6s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hidden{display:none!important}

/* ══ OVERVIEW HERO ══ */
.ov-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:30px;padding:22px 24px;
  border:1px solid var(--border);border-radius:var(--radius);background:
  linear-gradient(120deg,rgba(194,240,50,.06),transparent 55%),var(--bg-panel);overflow:hidden;position:relative}
.ov-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-fill),transparent 70%);pointer-events:none}
.ov-hero-main{flex:1;min-width:200px}
.ov-greet{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:.01em}
.ov-date{font-size:11.5px;color:var(--text-muted);margin-top:6px;letter-spacing:.05em;text-transform:uppercase}
.ov-hero-side{display:flex;gap:26px;flex:none}
.ov-stat{display:flex;flex-direction:column;gap:3px}
.ov-stat-l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.ov-stat b{font-size:14px;color:var(--accent);font-weight:600}

/* ══ AUTH ERROR (notebooklm re-login etc.) ══ */
.auth-error{border:1px solid rgba(255,179,71,.3);background:rgba(255,179,71,.06);
  border-radius:var(--radius);padding:16px 18px;margin:8px 0;display:flex;flex-direction:column;gap:10px}
.auth-error .ae-head{display:flex;align-items:center;gap:8px;color:var(--status-medium);
  font-size:12px;font-weight:600;letter-spacing:.04em}
.auth-error .ae-body{font-size:12px;color:var(--text-secondary);line-height:1.6}
.auth-error .ae-cmd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-base);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px}
.auth-error .ae-cmd code{font-family:var(--mono);color:var(--accent);font-size:12.5px}
.auth-error .ae-copy{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:var(--radius-sm);cursor:none;
  display:inline-flex;align-items:center;gap:5px;transition:color .2s,border-color .2s}
.auth-error .ae-copy:hover{color:var(--accent);border-color:var(--accent-dim)}
.auth-error .ae-hint{font-size:11px;color:var(--text-muted)}

/* ══ MOBILE DRAWER SCRIM ══ */
.scrim{display:none}

/* ══ TABLET ══ */
@media(max-width:880px){
  :root{--nav-w:178px;--agent-w:330px}
  .workspace{padding:20px 18px 50px}
  .usage-plate{gap:12px}
  .usage-plate .up:nth-child(n+3){display:none}   /* keep IN / OUT */
  .es-label{display:none}
}

/* ══ PHONE ══ */
@media(max-width:640px){
  body{overflow:auto}
  .topbar{position:sticky;top:0;gap:10px;padding:0 12px;z-index:240}
  .brand{font-size:16px}
  .topbar-center{display:none}
  .usage-plate{display:none}

  .shell{display:block;height:auto;overflow:visible}

  /* NAV → off-canvas drawer */
  .nav{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:250px;max-width:84vw;padding:14px 10px;
    transform:translateX(-100%);z-index:220;border-right:1px solid var(--border);
    transition:transform .24s cubic-bezier(.22,1,.36,1)}
  .nav.min{width:250px}
  .nav.min .nav-item{justify-content:flex-start;padding:10px 12px}
  .nav.min .nav-item .lbl{display:block}
  body.nav-open .nav{transform:none;box-shadow:8px 0 40px rgba(0,0,0,.5)}

  /* WORKSPACE → full width, page-level scroll */
  .workspace{padding:16px 14px 64px;height:auto;overflow:visible}

  /* AGENT → slide-in overlay from right */
  .agent{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:min(100%,440px);transform:translateX(100%);
    z-index:230;border-left:1px solid var(--border);transition:transform .24s cubic-bezier(.22,1,.36,1)}
  .agent.collapsed{width:min(100%,440px);transform:translateX(100%);border-left:1px solid var(--border)}
  .agent.collapsed>*{opacity:1;pointer-events:auto}
  .agent:not(.collapsed){transform:none;box-shadow:-8px 0 40px rgba(0,0,0,.5)}

  /* backdrop */
  .scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(2,5,9,.62);
    z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
  body.nav-open,body.agent-open{overflow:hidden}

  /* tighten content */
  .shead{margin-top:24px}
  .shead:not(:first-child){margin-top:26px}
  .ov-hero{padding:18px;gap:14px}
  .ov-greet{font-size:18px}
  .ov-hero-side{gap:18px}
  .panel{padding:15px}
  .split-list{max-height:none}
  .doc-reader{max-height:none}
}

/* ── scrollbar ── */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--bg-base)}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}

/* ── Content Engine: pre-run topic input + score badge ── */
.ce-topic{margin-top:8px;width:100%;max-width:520px;font-family:var(--mono);font-size:11.5px;
  background:var(--bg-base);color:var(--text-primary);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 10px;outline:none;cursor:none;transition:border-color .2s,box-shadow .2s}
.ce-topic::placeholder{color:var(--text-muted)}
.ce-topic:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
/* score chip — inline in the card head, never overlaps the title */
.ce-score{flex:none;display:inline-flex;align-items:baseline;gap:1px;
  padding:3px 7px;border-radius:3px;border:1px solid;font-variant-numeric:tabular-nums;line-height:1;
  font-family:var(--mono)}
.ce-score b{font-size:13px;font-weight:700}
.ce-score span{font-size:8.5px;opacity:.7}
.ce-score.hi{color:var(--status-ok);border-color:rgba(125,217,87,.35);background:rgba(125,217,87,.1)}
.ce-score.mid{color:var(--status-medium);border-color:rgba(255,179,71,.35);background:rgba(255,179,71,.1)}
.ce-score.lo{color:var(--status-high);border-color:rgba(255,92,77,.35);background:rgba(255,92,77,.1)}

/* ── Content Engine: research-mode toggle ── */
.ce-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;
  color:var(--text-secondary);cursor:none;user-select:none}
.ce-toggle input{accent-color:var(--accent);width:14px;height:14px;cursor:none}
.ce-toggle span{color:var(--text-muted);font-size:10px}

/* ══ CALENDAR MONTH GRID ══ */
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-wd{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);text-align:center;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(96px,1fr);gap:6px}
.cal-cell{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;
  display:flex;flex-direction:column;gap:4px;cursor:none;overflow:hidden;transition:border-color .15s,background .15s}
.cal-cell:hover{border-color:var(--accent-dim);background:var(--accent-fill)}
.cal-cell.out{opacity:.4}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim) inset}
.cal-daynum{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex:none}
.cal-cell.today .cal-daynum{color:var(--accent);font-weight:700}
.cal-evs{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-ev{font-size:10px;line-height:1.3;padding:2px 5px;border-radius:3px;background:var(--accent-fill);
  color:var(--text-primary);border-left:2px solid var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:none}
.cal-ev:hover{background:rgba(194,240,50,.22)}
.cal-ev.sel{background:var(--accent);color:#0a0d0a}
.cal-ev.allday{border-left-color:var(--status-medium);background:rgba(255,179,71,.12)}
.cal-ev-t{color:var(--accent-dim);margin-right:4px;font-variant-numeric:tabular-nums}
.cal-more{font-size:9.5px;color:var(--text-muted);padding-left:5px}
.cal-pane:empty{display:none}
.cal-pane{margin-top:18px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px}

/* ══ RESEARCH · NOTEBOOKLM TABS ══ */
.nb-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:14px 0 16px;flex-wrap:wrap}
.nb-tab{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text-muted);
  padding:8px 10px;cursor:none;transition:color .2s,border-color .2s}
.nb-tab:hover{color:var(--text-secondary)}
.nb-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.nb-turn{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.nb-turn:last-child{border-bottom:0}
.nb-q{font-size:12.5px;color:var(--text-primary);font-weight:600;margin-bottom:8px;padding-left:10px;border-left:2px solid var(--accent)}
.nb-a{font-size:12px;line-height:1.65;color:var(--text-secondary)}
.nb-a p{margin:0 0 8px}.nb-a ul,.nb-a ol{margin:6px 0 8px 18px}
.nb-a code{font-family:var(--mono);color:var(--accent);font-size:11px}
.nb-pending{color:var(--text-muted);font-style:italic}
#nbHistory{max-height:calc(100vh - var(--topbar-h) - 280px);overflow-y:auto;margin-bottom:12px}
.nb-ask{margin-top:8px}

/* ══ HIGGSFIELD LAUNCH STUDIO ══ */
.hf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:26px}
.hf-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .2s,box-shadow .3s}
.hf-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.hf-card[data-state="running"]{border-color:var(--accent);box-shadow:0 0 22px rgba(194,240,50,.18)}
.hf-card[data-state="error"]{border-color:var(--status-high)}
.hf-card-top{display:flex;align-items:center;gap:10px}
.hf-phase{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent-dim);letter-spacing:.1em;
  border:1px solid var(--border);border-radius:3px;padding:2px 7px;flex:none}
.hf-ic{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-fill);display:grid;place-items:center;color:var(--accent);flex:none}
.hf-titles{display:flex;flex-direction:column;min-width:0;flex:1}
.hf-titles b{color:var(--text-primary);font-size:13px;letter-spacing:.04em}
.hf-titles span{color:var(--text-muted);font-size:10.5px}
.hf-dot{width:9px;height:9px;border-radius:50%;background:var(--text-muted);flex:none;transition:background .2s}
[data-state="running"] .hf-dot{background:var(--accent);animation:pulse 1.4s infinite}
[data-state="done"] .hf-dot{background:var(--status-ok)}
[data-state="error"] .hf-dot{background:var(--status-high)}
[data-state="stopped"] .hf-dot{background:var(--status-medium)}
.hf-desc{font-size:11.5px;color:var(--text-secondary);line-height:1.6}
.hf-meta{display:flex;flex-wrap:wrap;gap:8px}
.hf-badge{font-size:10px;letter-spacing:.04em;padding:3px 9px;border-radius:3px;border:1px solid;display:inline-flex;align-items:center;gap:5px}
.hf-badge.time{color:var(--text-secondary);border-color:var(--border);background:transparent}
.hf-badge.free{color:var(--status-ok);border-color:rgba(125,217,87,.3);background:rgba(125,217,87,.08)}
.hf-badge.high{color:var(--status-medium);border-color:rgba(255,179,71,.3);background:rgba(255,179,71,.08)}
.hf-badge.max{color:var(--status-high);border-color:rgba(255,92,77,.3);background:rgba(255,92,77,.08)}
.hf-controls{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
.hf-extra,.hf-card .hf-extra,.hf-super .hf-extra{font-family:var(--mono);font-size:12px;background:var(--bg-panel-alt);
  color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;outline:none;cursor:none;width:100%}
.hf-extra:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.hf-actions{display:flex;gap:10px;margin-top:auto}
.hf-run{flex:1;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text-secondary)}
.hf-card .hf-run:hover{border-color:var(--accent-dim);color:var(--accent);background:var(--accent-fill)}

/* ── super skill: glowing animated card ── */
.hf-super{position:relative;border-radius:var(--radius);padding:2px;overflow:hidden;margin-bottom:10px;
  background:var(--bg-panel)}
.hf-super[data-state="running"]{box-shadow:0 0 40px rgba(194,240,50,.25)}
.hf-super-glow{position:absolute;inset:-60%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0%,var(--accent) 12%,#7be0ff 25%,transparent 42%,transparent 58%,var(--accent) 72%,#ff7be0 85%,transparent 100%);
  filter:blur(14px);opacity:.55;animation:hf-rotate 6s linear infinite}
.hf-super-inner{position:relative;z-index:1;background:var(--bg-panel);border-radius:calc(var(--radius) - 1px);
  padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.hf-super-head{display:flex;align-items:center;gap:12px}
.hf-super-ic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:#0a0d0a;flex:none;
  background:linear-gradient(135deg,var(--accent),#7be0ff);box-shadow:0 0 18px var(--accent-glow);animation:hf-pulse 2.4s ease-in-out infinite}
.hf-super-head>div{display:flex;flex-direction:column;flex:1;min-width:0}
.hf-super-head b{color:var(--text-primary);font-size:16px;letter-spacing:.02em}
.hf-super-head span{color:var(--accent-dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.hf-warn{font-size:11.5px;line-height:1.6;color:var(--status-medium);background:rgba(255,179,71,.08);
  border:1px solid rgba(255,179,71,.28);border-radius:var(--radius-sm);padding:10px 12px}
.hf-warn b{color:var(--status-high)}
.hf-super .hf-desc{color:var(--text-secondary)}
.hf-super .hf-run{flex:1;justify-content:center}
/* super-card is not .ce-step, so restore the run/stop buttons hidden by the
   base `.ce-run{opacity:0}` (hover-reveal) rule used on the step cards. */
.hf-super .ce-run,.hf-super .ce-stop{opacity:1}
@keyframes hf-rotate{to{transform:rotate(360deg)}}
@keyframes hf-pulse{0%,100%{box-shadow:0 0 14px var(--accent-glow)}50%{box-shadow:0 0 30px rgba(194,240,50,.6)}}
@media(prefers-reduced-motion:reduce){.hf-super-glow,.hf-super-ic{animation:none}}

/* ── vertical sequential flow + connectors ── */
.hf-seqnote{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-secondary);
  background:var(--accent-fill);border:1px solid var(--accent-dim);border-radius:var(--radius-sm);
  padding:10px 14px;margin-bottom:18px}
.hf-seqnote b{color:var(--accent)}
.hf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px}
/* class display rules above override the [hidden] attribute — restore it so the
   gear/channels toggles actually hide their panels by default. */
.hf-steps[hidden],.hf-multi-pop[hidden],.hf-long[hidden]{display:none}
/* Launch Package stands apart: full width, its own emphasis. */
.hf-super{margin-top:18px}

/* round "?" + prominent gear */
.hf-q{width:20px;height:20px;border-radius:50%;border:1px solid var(--accent-dim);background:transparent;
  color:var(--accent-dim);font-family:var(--mono);font-size:11px;font-weight:700;cursor:none;flex:none;
  display:grid;place-items:center;transition:all .18s;padding:0}
.hf-q:hover,.hf-q.on{background:var(--accent);color:#0a0d0a;border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.hf-gear{margin-left:auto;width:30px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-panel-alt);color:var(--text-secondary);font-size:15px;cursor:none;flex:none;
  display:grid;place-items:center;transition:all .2s;padding:0}
.hf-gear:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-fill);transform:rotate(45deg)}
.hf-gear.on{color:#0a0d0a;background:var(--accent);border-color:var(--accent);transform:rotate(90deg);box-shadow:0 0 12px var(--accent-glow)}

/* ── plain-language + step expanders ── */
.hf-long{font-size:11.5px;line-height:1.65;color:var(--text-secondary);background:var(--bg-panel-alt);
  border-left:2px solid var(--accent-dim);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 12px}
.hf-link{background:none;border:0;color:var(--accent-dim);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;cursor:none;text-decoration:underline;text-underline-offset:2px;padding:0}
.hf-link:hover{color:var(--accent)}
.hf-steps{display:flex;flex-direction:column;gap:0;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  padding:4px 12px;background:var(--bg-panel-alt)}
.hf-step{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:9px 0;border-bottom:1px solid var(--border)}
.hf-step:last-child{border-bottom:0}
.hf-step-h{display:flex;align-items:center;gap:7px;min-width:0}
.hf-step-n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-fill);
  border-radius:3px;width:19px;height:17px;display:grid;place-items:center;flex:none}
.hf-step-h b{font-size:11.5px;color:var(--text-primary)}
.hf-step-none{font-size:10px;color:var(--text-muted);font-style:italic;padding-left:26px}
.hf-step-params{display:flex;flex-wrap:wrap;gap:7px 12px;width:100%;padding-left:26px}
.hf-pp{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-muted);white-space:nowrap}
.hf-pp.hf-pp-wide{flex-basis:100%}
.hf-pp.hf-pp-wide input{flex:1;min-width:0}
.hf-pp>span{flex:none}
.hf-pp input,.hf-pp select{font-family:var(--mono);font-size:11px;background:var(--bg-panel);color:var(--text-primary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 7px;outline:none;cursor:none}
.hf-pp input[type=number]{width:56px}
.hf-pp input:focus,.hf-pp select:focus{border-color:var(--accent-dim)}

/* multi-select dropdown */
.hf-multi{position:relative}
.hf-multi-btn{font-family:var(--mono);font-size:11px;background:var(--bg-panel);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 9px;cursor:none}
.hf-multi-btn:hover{border-color:var(--accent-dim);color:var(--accent)}
.hf-multi-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:180px;max-height:220px;overflow-y:auto;
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.hf-multi-pop label{display:grid;grid-template-columns:15px 1fr;align-items:center;gap:9px;justify-items:start;
  text-align:left;font-size:11px;color:var(--text-secondary);padding:4px 6px;border-radius:3px;cursor:none}
.hf-multi-pop label input{margin:0;width:15px;height:15px}
.hf-multi-pop label:hover{background:var(--accent-fill);color:var(--accent)}

/* quick-generate form — match the card aesthetic */
#mediaForm.panel{border-color:var(--border)}
#mediaForm .compose{gap:12px}
#mediaForm .compose .row{gap:10px}
#mediaForm .compose label{font-size:10px!important;letter-spacing:.04em;color:var(--text-muted);text-transform:uppercase}
#mediaForm .model-select{min-height:30px}
#mediaForm textarea{min-height:90px}

/* ── photo drop zone ── */
.hf-drop{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:14px;text-align:center;
  cursor:none;transition:border-color .2s,background .2s;font-size:11px;color:var(--text-muted)}
.hf-drop:hover{border-color:var(--accent-dim);color:var(--text-secondary)}
.hf-drop.over{border-color:var(--accent);background:var(--accent-fill);color:var(--accent)}
.hf-drop.has{border-color:var(--status-ok);color:var(--status-ok);border-style:solid}
.hf-cal{color:var(--accent-dim)}

/* ── saved text outputs in Результат ── */
.hf-outfile{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px}
.hf-outname{font-family:var(--mono);font-size:11px;color:var(--accent-dim);letter-spacing:.04em;
  display:flex;align-items:center;gap:7px;margin-bottom:8px}
.hf-outbody{font-size:12px;line-height:1.6;color:var(--text-secondary);max-height:340px;overflow-y:auto}

/* ── super skill: wild on hover ── */
.hf-super:hover .hf-super-glow{animation-duration:1.1s;opacity:.95;filter:blur(9px)}
.hf-super .hf-run:hover{animation:hf-shake .5s ease-in-out infinite;box-shadow:0 0 30px rgba(194,240,50,.7)}
.hf-super:hover .hf-super-ic{animation-duration:.9s}
@keyframes hf-shake{0%,100%{transform:translateX(0) scale(1.02)}25%{transform:translateX(-2px) rotate(-1deg) scale(1.03)}75%{transform:translateX(2px) rotate(1deg) scale(1.03)}}
@media(prefers-reduced-motion:reduce){.hf-super .hf-run:hover{animation:none}}

/* ── Usage-plate rolling-window gauges (5h / 7d) ───────────────────────────── */
.usage-plate .up.gauge{flex-wrap:wrap;align-items:center;gap:2px 6px}
.usage-plate .up-bar{flex-basis:100%;height:3px;border-radius:2px;background:var(--bg-panel-alt);overflow:hidden}
.usage-plate .up-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transition:width .4s}
.usage-plate .up-bar i.warn{background:var(--status-medium);box-shadow:none}
.usage-plate .up-bar i.hot{background:var(--status-high);box-shadow:none}

/* ── Metrics tab: limit rows + soft-budget note ────────────────────────────── */
.prog-fill.warn{background:var(--status-medium);box-shadow:none}
.prog-fill.hot{background:var(--status-high);box-shadow:none}
.limit-row .limit-sub{font-size:10.5px;color:var(--text-muted);margin:-6px 0 14px}
.panel-note{font-size:11px;line-height:1.55;color:var(--text-muted);margin:0 0 14px}
.panel-note code{color:var(--accent-dim);font-size:10.5px}
.panel-note b{color:var(--text-secondary)}

/* ── Agent panel: conversation-memory badge ────────────────────────────────── */
.agent-head .chat-memo{font-size:9px;letter-spacing:.06em;color:var(--text-muted);white-space:nowrap;opacity:0;transition:opacity .3s}
.agent-head .chat-memo.on{opacity:1;color:var(--status-ok)}
.agent-head .chat-memo.on::before{content:"\25CF\00A0"}

/* ── Per-view help "?" explainer (UX polish) ───────────────────────────────── */
.view-help{margin:-4px 0 18px;border:1px solid var(--border);border-left:2px solid var(--accent-dim);
  border-radius:var(--radius);background:var(--bg-panel);overflow:hidden}
.view-help summary{cursor:pointer;list-style:none;padding:9px 13px;font-size:11px;letter-spacing:.06em;
  color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.view-help summary::-webkit-details-marker{display:none}
.view-help summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--accent-fill);color:var(--accent);
  font-weight:700;font-size:10px;flex:none}
.view-help summary:hover{color:var(--accent)}
.view-help[open] summary{border-bottom:1px solid var(--border)}
.view-help .vh-body{padding:11px 14px;font-size:11.5px;line-height:1.6;color:var(--text-muted)}
.view-help .vh-body b{color:var(--text-secondary)}
.view-help .vh-body code{color:var(--accent-dim)}

/* ══════════════════════════════════════════════════════════
   Social Media Analytics — CYBR_ styles
══════════════════════════════════════════════════════════ */

/* ── Actor list (inline expand) ────────────────────────── */
.sm-actor-row{
  display:flex;align-items:center;gap:10px;padding:10px 13px;
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:3px;cursor:pointer;transition:border-color .15s,background .15s}
.sm-actor-row:hover{border-color:var(--border-strong);background:var(--bg-panel)}
.sm-actor-row.active{border-color:var(--accent);background:var(--accent-fill)}
.sm-actor-emoji{font-size:18px;flex:none;width:26px;text-align:center}
.sm-actor-info{flex:1;min-width:0}
.sm-actor-name{font-size:12px;font-weight:600;color:var(--text-primary)}
.sm-actor-desc{font-size:10px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-plat-chip{font-size:10px;font-weight:600;letter-spacing:.05em;flex:none;padding:2px 7px;
  border-radius:3px;background:var(--bg-elevated);border:1px solid var(--border)}
.sm-actor-pick{padding:5px 12px;font-size:11px;flex:none}

/* ── Inline expand form ────────────────────────────────── */
.sm-actor-expand{background:var(--bg-panel-alt);border:1px solid var(--accent);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);margin-top:-3px;margin-bottom:8px}
.sm-expand-inner{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sm-expand-title{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.sm-expand-label{font-size:10px;color:var(--text-muted)}
.sm-expand-ta,.sm-expand-lbl{
  background:var(--bg-panel);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius);padding:8px 11px;font:12px/1.5 var(--mono);
  resize:vertical;transition:border-color .15s}
.sm-expand-ta:focus,.sm-expand-lbl:focus{outline:none;border-color:var(--accent)}
.sm-expand-lbl{resize:none}
.sm-expand-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm-expand-note{font-size:10px;color:var(--text-muted)}

/* ── KPI platform sections ─────────────────────────────── */
.sm-plat-section{margin-bottom:22px}
.sm-plat-head{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-left:3px solid var(--accent);background:var(--bg-panel);
  border-radius:0 var(--radius) var(--radius) 0;margin-bottom:10px}
.sm-plat-emoji{font-size:20px}
.sm-charts-head{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--text-muted);
  text-transform:uppercase;margin:12px 0 6px}
.sm-charts-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sm-chart-block{background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 13px}
.sm-chart-title{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:6px}
.sm-chart-canvas svg{display:block}

/* ── Text metrics ──────────────────────────────────────── */
.sm-text-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.sm-text-metric{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:5px 10px;display:flex;gap:8px;align-items:center;font-size:11px}
.sm-tm-key{color:var(--text-muted);flex:none;font-size:10px}
.sm-tm-val{color:var(--text-primary);font-weight:600}

/* ── KPI empty state ───────────────────────────────────── */
.sm-kpi-empty{padding:32px 20px;text-align:center;color:var(--text-muted);line-height:1.7}
.sm-kpi-empty b{color:var(--text-secondary)}
.sm-kpi-empty p{font-size:11px;margin-top:6px}

/* ── Abbreviation legend ───────────────────────────────── */
.sm-legend{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sm-legend summary{cursor:pointer;list-style:none;padding:9px 14px;
  font-size:11px;letter-spacing:.06em;color:var(--text-secondary);
  background:var(--bg-panel)}
.sm-legend summary::-webkit-details-marker{display:none}
.sm-legend[open] summary{border-bottom:1px solid var(--border)}
.sm-legend-body{padding:12px 14px;background:var(--bg-panel-alt)}
.sm-legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px}
.sm-abbr-row{display:flex;gap:10px;align-items:baseline;font-size:11px}
.sm-abbr-key{color:var(--accent);font-weight:700;min-width:44px;flex:none}
.sm-abbr-val{color:var(--text-muted);line-height:1.4}

/* ── Data table ────────────────────────────────────────── */
.sm-table{width:100%;border-collapse:collapse;font-size:11px}
.sm-table th{text-align:left;padding:6px 9px;border-bottom:1px solid var(--border-strong);
  color:var(--text-muted);font-weight:600;letter-spacing:.04em;position:sticky;top:0;
  background:var(--bg-panel);cursor:help}
.sm-table td{padding:5px 9px;border-bottom:1px solid var(--border);color:var(--text-secondary);
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-table tr:hover td{background:var(--bg-elevated);color:var(--text-primary)}

/* ── ER gauge ──────────────────────────────────────────── */
.sm-er-gauge{background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 14px}
.sm-er-label{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.sm-er-bar{height:6px;background:var(--bg-elevated);border-radius:3px;margin:4px 0;overflow:hidden}
.sm-er-fill{height:100%;border-radius:3px;transition:width .4s}
.sm-er-val{font-size:14px;font-weight:700;margin-top:5px}
.sm-er-bench{margin-top:4px}

/* ── Sentiment ─────────────────────────────────────────── */
.sm-sentiment{background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 14px}
.sm-sent-title{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.sm-sent-bars{display:flex;flex-direction:column;gap:5px}
.sm-sent-bar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
.sm-sent-bar span{width:80px;flex:none}
.sm-sent-fill{height:6px;border-radius:3px;transition:width .4s;min-width:2px}

/* ── Schedule / alerts rows ────────────────────────────── */
.sm-status-chip{font-weight:700;font-size:10px;padding:2px 8px;border-radius:3px}

/* ── Quick-launch panel ────────────────────────────────── */
.sm-ql-head{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sm-ql-head .n{font-weight:400;text-transform:none;letter-spacing:0}
.sm-ql-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.sm-ql-group-label{font-size:10px;font-weight:600;color:var(--text-muted);
  letter-spacing:.05em;flex:0 0 100px}
.sm-ql-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px 5px 8px;border-radius:20px;
  font-size:11px;font-weight:600;cursor:pointer;
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-secondary);transition:border-color .15s,background .15s,color .15s}
.sm-ql-chip:hover{border-color:var(--accent);background:var(--accent-fill);color:var(--accent)}
.sm-ql-chip-run{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;font-size:9px;
  background:var(--accent-fill);color:var(--accent);
  border:1px solid var(--accent-dim);margin-left:2px;flex:none;
  transition:background .15s}
.sm-ql-chip:hover .sm-ql-chip-run{background:var(--accent);color:var(--bg-base)}
.sm-ql-divider{border:none;border-top:1px solid var(--border);margin:10px 0 12px}

/* ── Own/Competitor type seg ───────────────────────────── */
#compTypeSeg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
#compTypeSeg button{
  background:transparent;border:none;padding:6px 13px;
  font:600 11px/1 var(--mono);letter-spacing:.04em;color:var(--text-muted);cursor:pointer;
  transition:background .15s,color .15s}
#compTypeSeg button.on{background:var(--accent);color:var(--bg-base)}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:640px){
  .sm-charts-wrap{grid-template-columns:1fr}
  .sm-legend-grid{grid-template-columns:1fr}
  .sm-actor-desc{display:none}
  .sm-ql-group-label{flex:0 0 auto}
}


/* ════════ UX redesign: nav groups · skill-card required · services · ManyChat ════════ */

/* — Grouped left navigation — */
.nav-sect{font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);padding:14px 12px 6px;margin-top:4px;user-select:none}
.nav-sect:first-child{margin-top:0;padding-top:4px}
.nav.min .nav-sect{font-size:0;padding:8px 0 6px;text-align:center}
.nav.min .nav-sect::before{content:"";display:block;height:1px;background:var(--border);margin:0 10px}
@media(max-width:640px){.nav.min .nav-sect{font-size:9.5px;padding:14px 12px 6px;text-align:left}
  .nav.min .nav-sect::before{display:none}}

/* — Required inputs on skill cards — */
.sc-req{color:var(--status-high);font-style:normal;margin-left:3px;font-weight:700}
.hf-badge.req-badge{color:var(--status-medium);border-color:rgba(255,179,71,.35);background:rgba(255,179,71,.08)}
.sc-reqnote{font-size:10.5px;color:var(--status-medium);background:rgba(255,179,71,.07);
  border:1px solid rgba(255,179,71,.25);border-radius:var(--radius-sm);padding:6px 9px;margin:2px 0}
.hf-run.is-blocked{opacity:.5;cursor:not-allowed}
.hf-run:disabled{opacity:.5;cursor:not-allowed}
.hf-next{font-size:10.5px;color:var(--text-muted);padding:2px 0}
.hf-next b{color:var(--accent-dim)}
.hf-pp textarea{font-family:var(--mono);font-size:11px;background:var(--bg-panel);color:var(--text-primary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;width:100%;resize:vertical;outline:none}
.hf-pp textarea:focus{border-color:var(--accent-dim)}

/* — Automation grouping — */
.auto-intro{font-size:12px;line-height:1.6;color:var(--text-secondary);background:var(--bg-panel-alt);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:18px}
.auto-intro b{color:var(--text-primary)}
.sc-group{margin-bottom:8px}
.sc-group-head{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px;
  border-bottom:1px solid var(--border);padding-bottom:6px}
.sc-group-head b{font-size:12.5px;letter-spacing:.04em;color:var(--text-primary)}
.sc-group-head span{font-size:10.5px;color:var(--text-muted)}

/* — Control Center tab panes — */
.ctab-pane[hidden]{display:none}

/* — Service-limits cards — */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.svc-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.svc-card:hover{border-color:var(--accent-dim)}
.svc-head{display:flex;align-items:center;gap:9px}
.svc-head b{font-size:13px;color:var(--text-primary);flex:1;min-width:0}
.svc-ic{color:var(--accent-dim);display:grid;place-items:center}
.svc-state{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.04em}
.svc-state .dot{width:7px;height:7px;border-radius:50%}
.svc-state.ok{color:var(--status-ok)}.svc-state.ok .dot{background:var(--status-ok);box-shadow:0 0 8px var(--status-ok)}
.svc-state.off{color:var(--text-muted)}.svc-state.off .dot{background:var(--text-muted)}
.svc-cat{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dim);margin:8px 0 2px}
.svc-limit{font-size:11.5px;color:var(--text-secondary);margin-bottom:6px}
.svc-usage{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.svc-u{font:11px var(--mono);background:var(--bg-panel-alt);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:4px 8px;color:var(--text-secondary)}
.svc-u b{color:var(--text-muted);margin-right:4px}
.svc-pct{color:var(--accent);font-style:normal}
.svc-note{font-size:10.5px;line-height:1.55;color:var(--text-muted);margin-top:6px;
  border-top:1px solid var(--border);padding-top:7px}

/* — ManyChat placeholder — */
.mc-hero{position:relative;background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 28px;margin-bottom:22px;overflow:hidden}
.mc-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 90% -20%,var(--accent-fill),transparent);pointer-events:none}
.mc-badge{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.12em;color:#0a0d0a;
  background:var(--accent);padding:5px 10px;border-radius:3px;margin-bottom:12px}
.mc-hero h2{font-size:20px;color:var(--text-primary);margin:0 0 8px}
.mc-hero p{font-size:13px;line-height:1.65;color:var(--text-secondary);max-width:62ch;margin:0}
.mc-hero b{color:var(--text-primary)}
.mc-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mc-feature{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.mc-feature .mc-fic{font-size:22px;display:block;margin-bottom:8px}
.mc-feature b{font-size:13px;color:var(--text-primary);display:block;margin-bottom:5px}
.mc-feature p{font-size:11.5px;line-height:1.6;color:var(--text-secondary);margin:0}
.mc-roadmap ol{margin:0 0 14px;padding-left:20px}
.mc-roadmap li{font-size:12px;line-height:1.9;color:var(--text-secondary)}
.mc-roadmap b{color:var(--text-primary)}
.mc-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:14px}
.mc-cta .btn[disabled]{opacity:.5;cursor:not-allowed}

/* — SkillCard params: stacked, full-width (fix overflow) — */
.sc-params{display:flex;flex-direction:column;gap:10px;width:100%;padding-left:0}
.sc-pp{display:flex;flex-direction:column;gap:4px;width:100%}
.sc-pp-l{font-size:10px;letter-spacing:.03em;color:var(--text-muted);display:flex;align-items:center;gap:3px}
.sc-pp-c{font-family:var(--mono);font-size:11.5px;background:var(--bg-panel);color:var(--text-primary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 9px;width:100%;
  box-sizing:border-box;outline:none}
.sc-pp-c:focus{border-color:var(--accent-dim)}
textarea.sc-pp-c{resize:vertical;line-height:1.5;min-height:54px}
.hf-badge.model-badge{color:var(--text-secondary);border-color:var(--border);background:var(--bg-panel-alt);text-transform:uppercase;letter-spacing:.05em}
.svc-via{font:700 8.5px/1 var(--mono);letter-spacing:.08em;color:var(--accent-dim);
  border:1px solid var(--accent-dim);border-radius:3px;padding:2px 5px}

/* — Mail search bar — */
.mail-search{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.mail-search input{flex:1;background:var(--bg-panel);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius-sm);padding:8px 11px;
  font:500 12px/1.2 var(--mono);outline:none}
.mail-search input:focus{border-color:var(--accent-dim)}
.mail-search input::placeholder{color:var(--text-muted)}

/* ══════════════════════════════════════════════════════════
   UI overhaul — Schedule toggles · Mail · Calendar · Research
══════════════════════════════════════════════════════════ */

/* ── toggle switch (РОЗКЛАД вмикач) — replaces raw blue checkbox ── */
.sw{position:relative;display:inline-flex;align-items:center;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw::after{content:"";width:34px;height:18px;border-radius:10px;background:var(--bg-elevated);
  border:1px solid var(--border-strong);transition:background .18s,border-color .18s}
.sw::before{content:"";position:absolute;left:3px;width:12px;height:12px;border-radius:50%;
  background:var(--text-muted);transition:transform .18s,background .18s;z-index:1}
.sw:hover::after{border-color:var(--accent-dim)}
.sw:has(input:checked)::after{background:var(--accent-fill);border-color:var(--accent-dim)}
.sw:has(input:checked)::before{transform:translateX(16px);background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow)}

/* ── schedule rows ── */
.sched-row{align-items:center;gap:12px;padding:12px 6px}
.sched-row .pri b{font-size:12.5px;color:var(--text-primary)}
.sched-row .badge-muted{font-size:8.5px;padding:2px 6px}
.sched-row input[type=time],.sched-row .sj-time{font-family:var(--mono);font-size:12px;
  background:var(--bg-panel-alt);color:var(--text-primary);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 8px;outline:none;cursor:pointer}
.sched-row input[type=time]:focus{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim)}
.sched-row input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.65);cursor:pointer}
.sched-row .sj-run{white-space:nowrap}
.sched-row .sj-del{color:var(--text-muted);padding:6px 10px}
.sched-row .sj-del:hover{color:var(--status-high);border-color:rgba(255,92,77,.4)}

/* ── Mail polish ── */
.list-row.mail-row{flex-direction:row;align-items:center;gap:11px}
.mail-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:700 12px/1 var(--mono);color:var(--accent);background:var(--accent-fill);
  border:1px solid var(--accent-dim);text-transform:uppercase}
.list-row.mail-row.unread .mail-av{background:var(--accent);color:#0a0d0a;border-color:var(--accent)}
.mail-rc{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mail-rc .lr-top{gap:8px}
.mail-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 6px var(--accent-glow)}
.mail-body{max-height:calc(100vh - var(--topbar-h) - 280px);overflow-y:auto;
  background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin-top:8px}
.mail-body pre{margin:0;line-height:1.65;color:var(--text-secondary)}
.detail-head .dt-from{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.detail-head .dt-from .mail-av{width:38px;height:38px;font-size:14px}
.detail-actions.mail-actions{margin:14px 0 0;gap:8px}

/* ── Calendar polish ── */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.cal-nav{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.cal-nav button{background:var(--bg-panel-alt);border:0;color:var(--text-secondary);
  font-family:var(--mono);font-size:12px;padding:7px 12px;cursor:pointer;transition:.15s;
  border-right:1px solid var(--border)}
.cal-nav button:last-child{border-right:0}
.cal-nav button:hover{color:var(--accent);background:var(--accent-fill)}
.cal-title{font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:.02em;
  min-width:160px;text-transform:capitalize}
.cal-vtoggle{margin-left:auto;display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.cal-vtoggle button{background:transparent;border:0;border-right:1px solid var(--border);
  color:var(--text-muted);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;cursor:pointer;transition:.15s}
.cal-vtoggle button:last-child{border-right:0}
.cal-vtoggle button.on{color:#0a0d0a;background:var(--accent)}
.cal-vtoggle button:not(.on):hover{color:var(--accent)}
.cal-cell{position:relative}
.cal-cell.weekend{background:rgba(255,255,255,.012)}
.cal-cell.today .cal-daynum{background:var(--accent);color:#0a0d0a;border-radius:50%;
  width:20px;height:20px;display:grid;place-items:center}
.cal-ev{border-left:2px solid var(--accent-dim)}
/* agenda view */
.cal-agenda{display:flex;flex-direction:column;gap:2px}
.cal-agenda-day{margin-top:14px}
.cal-agenda-day:first-child{margin-top:0}
.cal-agenda-dh{display:flex;align-items:baseline;gap:10px;padding:6px 2px;
  border-bottom:1px solid var(--border);margin-bottom:6px}
.cal-agenda-dh b{font-size:13px;color:var(--text-primary)}
.cal-agenda-dh.is-today b{color:var(--accent)}
.cal-agenda-dh span{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.cal-agenda-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-panel);cursor:pointer;transition:.15s}
.cal-agenda-row:hover{border-color:var(--accent-dim);background:var(--accent-fill);transform:translateX(2px)}
.cal-agenda-time{font:600 12px/1 var(--mono);color:var(--accent);min-width:88px;flex:none;
  font-variant-numeric:tabular-nums}
.cal-agenda-time.allday{color:var(--status-medium)}
.cal-agenda-sum{flex:1;min-width:0;color:var(--text-primary);font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-agenda-loc{font-size:10.5px;color:var(--text-muted);flex:none}
.cal-agenda-empty{color:var(--text-muted);font-size:12px;padding:20px 2px}

/* ── Research / NotebookLM polish ── */
.list-row.nb-row .lr-pri{font-weight:600}
.nb-row-sub{display:flex;align-items:center;gap:7px;margin-top:2px}
.nb-pill{font:600 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-dim);border:1px solid var(--border);border-radius:3px;padding:2px 6px}
.nb-tab{padding:8px 12px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.nb-tab.on{background:var(--accent-fill)}

/* Studio grid */
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin:6px 0 4px}
.studio-card{background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 13px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px}
.studio-card:hover,.studio-card.on{border-color:var(--accent-dim);background:var(--accent-fill);transform:translateY(-2px)}
.studio-card.on{border-color:var(--accent);box-shadow:0 0 18px rgba(194,240,50,.12)}
.studio-ic{font-size:20px;line-height:1}
.studio-name{font:600 12px/1.2 var(--mono);color:var(--text-primary)}
.studio-desc{font:10.5px/1.4 var(--mono);color:var(--text-muted)}
.studio-config{background:var(--bg-panel);border:1px solid var(--accent-dim);border-radius:var(--radius);
  padding:16px;margin:12px 0;display:flex;flex-direction:column;gap:11px;animation:fade-in .2s ease both}
.studio-config-head{display:flex;align-items:center;gap:9px;font:600 13px/1 var(--mono);color:var(--accent)}
.studio-field{display:flex;flex-direction:column;gap:5px}
.studio-field label{font:10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.studio-field select,.studio-field input,.studio-field textarea{font-family:var(--mono);font-size:12px;
  background:var(--bg-panel-alt);color:var(--text-primary);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 10px;outline:none;width:100%}
.studio-field select:focus,.studio-field input:focus,.studio-field textarea:focus{border-color:var(--accent-dim)}
.studio-field textarea{resize:vertical;min-height:60px;line-height:1.5}
.studio-field-row{display:flex;gap:10px;flex-wrap:wrap}
.studio-field-row .studio-field{flex:1;min-width:130px}
.studio-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.studio-note{font:10.5px/1.4 var(--mono);color:var(--text-muted)}
/* artifacts list */
.studio-art{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg-panel);margin-bottom:6px;transition:.15s}
.studio-art:hover{border-color:var(--border-strong)}
.studio-art-ic{font-size:17px;flex:none}
.studio-art-info{flex:1;min-width:0}
.studio-art-title{font:600 12px/1.3 var(--mono);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-art-meta{font:10px/1.3 var(--mono);color:var(--text-muted)}
.studio-art-dl{flex:none}
.studio-saved{font:11px/1.5 var(--mono);color:var(--status-ok);background:rgba(125,217,87,.07);
  border:1px solid rgba(125,217,87,.25);border-radius:var(--radius-sm);padding:9px 12px;margin-top:6px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.studio-saved a{color:var(--accent);text-decoration:none}
.studio-saved a:hover{text-decoration:underline}

/* ══ AUTH / RBAC (Phase 2) ══ */
body.auth-locked{overflow:hidden}
.auth-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;
  background:rgba(5,8,12,.92);backdrop-filter:blur(10px);cursor:none;
  background-image:radial-gradient(circle at 50% 30%,rgba(194,240,50,.05),transparent 55%)}
/* Keep the branded custom cursor on the login screen (it now sits above the
   overlay via z-index); the text caret stays via caret-color on .auth-inp. */
.auth-overlay *{cursor:none}
.auth-card{width:min(360px,90vw);display:flex;flex-direction:column;gap:8px;
  background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:30px 26px 26px;box-shadow:0 0 0 1px rgba(194,240,50,.06),0 30px 80px rgba(0,0,0,.6)}
.auth-brand{font:700 26px/1 var(--mono);color:var(--text-primary);letter-spacing:.04em}
.auth-sub{font:11px/1.4 var(--mono);letter-spacing:.06em;color:var(--text-muted);
  text-transform:uppercase;margin-bottom:10px}
.auth-lbl{font:600 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--text-muted);
  text-transform:uppercase;margin-top:6px}
.auth-inp{background:var(--bg-panel-alt);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:10px 12px;font:13px/1.2 var(--mono);outline:none;cursor:text;
  caret-color:var(--accent)}
.auth-inp:focus{border-color:var(--accent-dim)}
.auth-err{font:11px/1.4 var(--mono);color:var(--status-high);min-height:14px}
.auth-btn{margin-top:8px;background:var(--accent);color:#0a0d0a;border:none;border-radius:var(--radius-sm);
  padding:11px 14px;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:none;
  transition:background .15s}
.auth-btn:hover{background:var(--accent-bright)}
.auth-btn:disabled{opacity:.6}

/* topbar plate: user · role · switcher · logout */
.auth-plate{display:flex;align-items:center;gap:10px;padding-left:14px;
  border-left:1px solid var(--border)}
.auth-user{display:flex;flex-direction:column;line-height:1.1;max-width:160px}
.auth-uname{font:600 11px/1.2 var(--mono);color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-urole{font:9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.auth-switch{font:11px/1 var(--mono);background:var(--bg-panel-alt);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;cursor:none;outline:none;max-width:170px}
.auth-switch:hover{border-color:var(--accent-dim);color:var(--accent)}
.auth-logout{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  border-radius:var(--radius-sm);padding:6px 10px;cursor:none;transition:.15s}
.auth-logout:hover{border-color:var(--status-high);color:var(--status-high)}

/* global banners (impersonation / read-only) */
.auth-banner{position:fixed;left:0;right:0;bottom:0;z-index:11000;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 16px;font:600 11px/1.3 var(--mono);letter-spacing:.05em}
.auth-banner-imp{background:rgba(194,240,50,.12);color:var(--accent-bright);
  border-top:1px solid var(--accent-dim)}
.auth-banner-ro{background:rgba(255,179,71,.12);color:var(--status-medium);
  border-top:1px solid rgba(255,179,71,.4)}
.auth-banner b{color:var(--text-primary)}
.auth-banner-act{background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:var(--radius-sm);padding:4px 10px;font:600 10px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.auth-banner-act:hover{background:rgba(255,255,255,.06)}
/* prominent "return to admin" button in the topbar while previewing */
.auth-back{background:rgba(194,240,50,.14);border-color:var(--accent-dim)!important;
  color:var(--accent-bright)!important;cursor:pointer}
.auth-back:hover{background:rgba(194,240,50,.24)}
/* stack a second banner above the first so they never overlap */
.auth-banner-stacked{bottom:31px;border-bottom:1px solid var(--accent-dim)}
/* user-panel row action buttons (пароль / видалити) — CYBR_ chip style */
.ua-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.ua-pass,.ua-del{background:var(--bg-panel-alt);border:1px solid var(--border);color:var(--text-secondary);
  border-radius:var(--radius-sm);padding:5px 10px;font:600 10.5px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;cursor:none;transition:border-color .15s,color .15s,background .15s}
.ua-pass:hover{border-color:var(--accent-dim);color:var(--accent-bright)}
.ua-del{color:var(--status-high)}
.ua-del:hover{border-color:var(--status-high);background:rgba(255,80,80,.10)}
/* lift content so a bottom banner never hides the last row */
body.has-auth-banner .workspace{padding-bottom:96px}
@media(max-width:640px){.auth-user{max-width:96px}.auth-switch{max-width:120px}}

/* ── User-management panel (UsersAdmin) ── */
.ua-form-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:8px;align-items:center}
.ua-inp{background:var(--bg-panel-alt);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:8px 10px;font:12px/1.2 var(--mono);outline:none;cursor:text;
  caret-color:var(--accent);width:100%}
select.ua-inp{cursor:none}
.ua-inp::placeholder{color:var(--text-muted)}
.ua-inp:focus{border-color:var(--accent-dim)}
.ua-tbl{width:100%;border-collapse:collapse;font:12px/1.4 var(--mono)}
.ua-tbl th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);
  color:var(--text-muted);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.ua-tbl td{padding:8px 10px;border-bottom:1px solid var(--bg-elevated);color:var(--text-primary);
  vertical-align:middle}
.ua-tbl tr:hover td{background:var(--bg-elevated)}
.ua-mono{font-variant-numeric:tabular-nums}
.ua-dim{color:var(--text-secondary)}
.ua-muted,.ua-role-static{color:var(--text-muted);font-size:11px}
.ua-you{font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-fill);border:1px solid var(--accent-dim);
  border-radius:3px;padding:1px 5px;margin-left:4px}
.ua-role-sel{min-width:140px;padding:5px 8px}
.ua-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.ua-del:hover{color:var(--status-high);border-color:var(--status-high);background:rgba(255,80,80,.08)}
/* active toggle switch */
.ua-toggle{position:relative;width:38px;height:20px;border-radius:11px;border:1px solid var(--border);
  background:var(--bg-panel-alt);cursor:none;padding:0;transition:.15s}
.ua-toggle .ua-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-muted);transition:.15s}
.ua-toggle.on{background:var(--accent-fill);border-color:var(--accent-dim)}
.ua-toggle.on .ua-knob{left:20px;background:var(--accent)}
.ua-toggle:disabled{opacity:.45}
@media(max-width:640px){
  .ua-form-grid{grid-template-columns:1fr 1fr}
  .ua-tbl{display:block;overflow-x:auto;white-space:nowrap}
}
/* ── staged-save bar + dirty-row marker (users panel) ── */
.ua-savebar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--radius,4px);background:var(--bg-panel-alt);
  opacity:.55;transition:opacity .2s,border-color .2s}
.ua-savebar.show{opacity:1;border-color:var(--accent-dim)}
.ua-dirty-count{font:11px/1 var(--mono);color:var(--text-secondary);margin-right:auto;letter-spacing:.04em}
.ua-savebar.show .ua-dirty-count{color:var(--accent-bright)}
.ua-dirty-tag{display:none;margin-left:8px;font:700 9px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-fill);
  border:1px solid var(--accent-dim);border-radius:9px;padding:2px 7px;vertical-align:middle}
.ua-tbl tr.ua-dirty td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.ua-tbl tr.ua-dirty .ua-dirty-tag{display:inline-block}
.ua-tbl tr.ua-dirty td{background:rgba(194,240,50,.04)}

/* ════ Активність (activity panel) ════ */
.act-badge{font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--status-medium);background:rgba(255,179,71,.10);border:1px solid rgba(255,179,71,.35);
  border-radius:9px;padding:3px 8px;margin-left:auto;align-self:center}
/* ── Економія / ROI band ── */
.act-roi-panel{background:linear-gradient(135deg,rgba(194,240,50,.06),rgba(125,217,87,.02))}
.act-roi-sub{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-left:8px}
.act-roi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:4px}
.act-roi-card{position:relative;border:1px solid var(--border);border-radius:var(--radius,4px);
  background:var(--bg-panel-alt);padding:16px 16px 14px;overflow:hidden}
.act-roi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-muted)}
.act-roi-card.net::before{background:var(--accent-bright)}
.act-roi-card.time::before{background:#5bd6ff}
.act-roi-card.roi::before{background:#d48aff}
.act-roi-card.gross::before{background:#7dd957}
.act-roi-card.cost::before{background:var(--status-medium)}
.act-roi-card .ic{font-size:18px;line-height:1;opacity:.9}
.act-roi-card .v{font:700 26px/1.1 var(--mono);margin-top:8px;font-variant-numeric:tabular-nums;
  color:var(--text-primary)}
.act-roi-card.net .v{color:var(--accent-bright)}
.act-roi-card.roi .v{color:#d48aff}
.act-roi-card .k{font:10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-top:6px}
.act-roi-note{font:11px/1.5 var(--mono);color:var(--text-muted);margin-top:12px;opacity:.85}
.act-skel-roi{height:96px;border-radius:var(--radius,4px);
  background:linear-gradient(90deg,var(--bg-panel-alt),var(--bg-elevated),var(--bg-panel-alt));
  background-size:200% 100%;animation:act-shimmer 1.2s ease-in-out infinite}
.act-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:8px}
.act-tot{border:1px solid var(--border);border-radius:var(--radius,4px);background:var(--bg-panel-alt);
  padding:12px 14px}
.act-tot .k{font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.act-tot .v{font:600 18px/1.2 var(--mono);color:var(--accent-bright);margin-top:6px;
  font-variant-numeric:tabular-nums}
.act-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.act-period{font:11px/1 var(--mono);color:var(--text-secondary);letter-spacing:.02em}
.act-tbl{width:100%;border-collapse:collapse;font:12px/1.4 var(--mono);table-layout:auto}
.act-tbl th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);
  color:var(--text-muted);font-weight:600;white-space:nowrap}
.act-tbl td{padding:8px 10px;border-bottom:1px solid var(--bg-elevated);color:var(--text-primary);
  font-variant-numeric:tabular-nums}
.act-tbl tbody tr{cursor:none}
.act-tbl tbody tr:hover td{background:var(--bg-elevated)}
.act-tbl th.act-num,.act-tbl td.act-num{text-align:right;font-variant-numeric:tabular-nums}
.act-num{text-align:right}
.act-dim{color:var(--text-secondary)}
.act-off{color:var(--status-high)}
.act-days{display:flex;gap:6px;align-items:center;margin-left:auto}
.act-days .lbl{font:10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.act-day-btn{font:600 11px/1 var(--mono);padding:5px 11px;border:1px solid var(--border);
  border-radius:7px;background:transparent;color:var(--text-secondary);cursor:none;transition:.15s}
.act-day-btn:hover{border-color:var(--accent-dim);color:var(--accent)}
.act-day-btn.on{color:#0a0d0a;background:var(--accent);border-color:var(--accent)}
/* skeleton loaders */
.act-skel{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.act-skel-row{height:30px;border-radius:5px;
  background:linear-gradient(90deg,var(--bg-elevated) 0%,var(--bg-panel-alt) 50%,var(--bg-elevated) 100%);
  background-size:200% 100%;animation:act-shimmer 1.2s ease-in-out infinite}
.act-skel-chart{height:240px}
@keyframes act-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* chart + hover tooltip */
.act-chart{position:relative}
.act-chart svg{display:block;width:100%;height:auto}
.act-chart #actHit{cursor:none}
.act-tip{position:absolute;pointer-events:none;z-index:5;min-width:130px;max-width:60%;
  background:var(--bg-elevated);border:1px solid var(--accent-dim);border-radius:7px;
  padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:opacity .1s}
.act-tip-h{font:700 10px/1 var(--mono);letter-spacing:.08em;color:var(--accent-bright);
  margin-bottom:7px;text-transform:uppercase}
.act-tip-row{display:flex;align-items:center;gap:7px;font:11px/1.5 var(--mono)}
.act-tip-row .d{width:9px;height:9px;border-radius:2px;flex:none}
.act-tip-row .nm{color:var(--text-secondary);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.act-tip-row .vl{color:var(--text-primary);font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.act-legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border)}
.act-leg{display:inline-flex;align-items:center;gap:8px;font:11px/1.2 var(--mono);
  background:var(--bg-panel-alt);border:1px solid var(--border);
  border-left:3px solid var(--lc,var(--accent));border-radius:8px;padding:6px 11px;white-space:nowrap}
.act-leg .act-sw{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--lc,var(--accent));box-shadow:0 0 7px var(--lc,var(--accent))}
.act-leg .nm{color:var(--text-primary);font-weight:600}
.act-leg .vl{color:var(--accent-bright);font-weight:700;font-variant-numeric:tabular-nums}
.act-leg-more{color:var(--text-muted);border-left-color:var(--border)}
.act-drill{margin-top:18px;border:1px solid var(--accent-dim);border-radius:var(--radius,4px);
  background:var(--bg-panel-alt);padding:16px}
.act-drill-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.act-drill-head h4{font:600 13px/1 var(--mono);color:var(--accent-bright);letter-spacing:.04em}
.act-back{font:600 11px/1 var(--mono);padding:6px 12px;border:1px solid var(--border);border-radius:7px;
  background:transparent;color:var(--text-secondary);cursor:none;transition:.15s;margin-left:auto}
.act-back:hover{border-color:var(--accent-dim);color:var(--accent)}
.act-drill-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.act-drill-col{min-width:0}
@media(max-width:640px){.act-drill-cols{grid-template-columns:1fr}}
.act-sub{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dim);
  margin:0 0 8px}
.act-journal{display:flex;flex-direction:column}
.act-ev{display:grid;grid-template-columns:auto auto auto 1fr;gap:6px 10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--bg-elevated);font:11px/1.4 var(--mono)}
.act-ev .ts{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.act-ev .ac{color:var(--text-primary);font-weight:600;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:5px;padding:2px 7px;white-space:nowrap}
.act-ev .st{font-weight:700;text-transform:uppercase;font-size:9px;letter-spacing:.05em;
  border-radius:9px;padding:2px 8px;white-space:nowrap;justify-self:start}
.act-ev .st.ok{color:var(--status-ok);background:rgba(125,217,87,.10);border:1px solid rgba(125,217,87,.35)}
.act-ev .st.error{color:var(--status-high);background:rgba(255,92,77,.10);border:1px solid rgba(255,92,77,.35)}
.act-ev .dt{color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.act-ev{grid-template-columns:1fr auto auto}.act-ev .dt{grid-column:1/-1}}
.act-chat-row{display:flex;gap:10px;align-items:center;padding:8px 10px;margin-bottom:4px;
  border:1px solid var(--border);border-radius:var(--radius,4px);background:var(--bg-panel);cursor:none;
  transition:.15s}
.act-chat-row:hover{border-color:var(--accent-dim);background:var(--accent-fill)}
.act-chat-row.on{border-color:var(--accent-dim);background:var(--accent-fill)}
.act-chat-row .ti{flex:1;min-width:0;font:600 12px/1.3 var(--mono);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-chat-row .mc{flex:none;font:10px/1 var(--mono);color:var(--accent-dim)}
.act-chat-row .up{flex:none;font:10px/1 var(--mono);color:var(--text-muted)}
/* ── collapsible day-groups in the event journal ── */
.act-daygroup{border:1px solid var(--border);border-radius:var(--radius,4px);
  background:var(--bg-panel);margin-bottom:8px;overflow:hidden}
.act-daygroup>summary{list-style:none;cursor:none;display:flex;align-items:center;gap:10px;
  padding:9px 12px;font:600 11px/1 var(--mono);color:var(--text-primary);
  background:var(--bg-panel-alt);transition:background .15s}
.act-daygroup>summary::-webkit-details-marker{display:none}
.act-daygroup>summary:hover{background:var(--bg-elevated)}
.act-daygroup>summary .cv{color:var(--accent-dim);font-size:10px;transition:transform .15s}
.act-daygroup[open]>summary .cv{transform:rotate(90deg)}
.act-daygroup>summary .dh{letter-spacing:.04em;text-transform:capitalize}
.act-daygroup>summary .mt{margin-left:auto;color:var(--text-muted);font-weight:400;font-size:10px}
.act-gerr{color:var(--status-high)}
.act-daygroup .act-journal{padding:2px 12px 6px}
.act-daygroup .act-ev:last-child{border-bottom:none}
/* "open chat" affordance on a chat row */
.act-chat-row .go{flex:none;font:600 10px/1 var(--mono);color:var(--accent);opacity:0;transition:opacity .15s}
.act-chat-row:hover .go{opacity:1}
/* ── chat transcript modal ── */
.act-modal{position:fixed;inset:0;z-index:12500;display:grid;place-items:center;
  background:rgba(5,8,12,.7);backdrop-filter:blur(4px);cursor:none;padding:24px}
.act-modal-card{width:min(680px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.act-modal-head{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border)}
.act-modal-head .ti{font:600 13px/1.3 var(--mono);color:var(--accent-bright);flex:1;min-width:0}
.act-modal-x{flex:none;background:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--text-secondary);font:600 12px/1 var(--mono);padding:6px 9px;cursor:none;transition:.15s}
.act-modal-x:hover{border-color:var(--status-high);color:var(--status-high)}
.act-modal-body{padding:16px;overflow:auto}
.act-transcript{display:flex;flex-direction:column;gap:10px}
.act-row{display:flex}
.act-row.user{justify-content:flex-end}
.act-row.assistant{justify-content:flex-start}
.act-bub{max-width:82%;padding:9px 12px;border-radius:11px;font:12px/1.55 var(--mono);
  display:flex;flex-direction:column;gap:5px}
.act-bub .act-bub-who{font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  opacity:.7}
.act-bub .act-bub-tx{white-space:pre-wrap;word-break:break-word}
.act-bub .act-bub-ts{font-size:9px;color:var(--text-muted);font-variant-numeric:tabular-nums;align-self:flex-end}
.act-row.user .act-bub{background:var(--accent-fill);border:1px solid var(--accent-dim);
  color:var(--text-primary);border-bottom-right-radius:3px}
.act-row.user .act-bub-who{color:var(--accent)}
.act-row.assistant .act-bub{background:var(--bg-panel-alt);border:1px solid var(--border);
  color:var(--text-secondary);border-bottom-left-radius:3px}
@media(max-width:640px){.act-tbl{display:block;overflow-x:auto;white-space:nowrap}.act-bub{max-width:92%}}