:root{
  --bg:#0d0e12;--sidebar:#15161c;--panel:#16171d;--panel-2:#1b1d24;--card:#1a1c23;
  --border:#262833;--border-soft:#22242d;--text:#e7e9ef;--text-dim:#9aa0ad;--text-mute:#6c7280;
  --green:#22c55e;--blue:#5b9bff;--accent:#6366f1;--red:#ef4757;--amber:#f5a623;--purple:#8b6cf0;
  /* Raised surface for a hovered or selected row. Referenced in six places but
     never defined, so those states have been rendering with no background at
     all; matches --panel-2, the surface controls already sit on. */
  --bg-hover:#1b1d24;
  --radius:14px;--shadow:0 18px 50px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(34,197,94,.14);--ring-border:rgba(34,197,94,.45);
  --card-grad:linear-gradient(180deg,#181a21,#15161c);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
::selection{background:rgba(34,197,94,.28);color:#fff}
:focus-visible{outline:2px solid rgba(34,197,94,.55);outline-offset:2px;border-radius:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:none}
svg{fill:currentColor;stroke:none}
kbd{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--text-dim)}
button{font-family:inherit}
input,textarea{font-family:inherit}
a{color:var(--blue)}
[hidden]{display:none!important}

.brand-logo{height:30px;display:flex;align-items:center;flex:none;overflow:hidden}
.brand-logo.lg{height:52px}
.brand-logo img{height:100%;width:auto;object-fit:contain;display:block}
/* collapsed-state icon logo: hidden until the sidebar collapses */
.brand-logo.icon{max-width:0;opacity:0}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.2px}

.avatar{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;width:34px;height:34px;font-size:12px}
.av-green{background:#2e9e5b}
.av-blue{background:#4f7df0}
.av-purple{background:#8b6cf0}
.av-amber{background:#e0913a}
.av-pink{background:#e065a3}
.avatar.sm{width:26px;height:26px;font-size:10.5px}
.avatar.lg{width:46px;height:46px;font-size:15px}
.avatar.xl{width:56px;height:56px;font-size:18px}

/* ===================== LOGIN ===================== */
.auth{display:grid;grid-template-columns:1.05fr 1fr;height:100vh}
.auth-left{background:linear-gradient(160deg,#14161e,#0d0e12 60%);padding:60px 64px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);position:relative;overflow:hidden}
.auth-left::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 90% 80% at 35% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 90% 80% at 35% 40%,#000 25%,transparent 78%)}
/* The green and blue radial "glow orbs" that used to sit behind this panel are
   gone on purpose. They were pure decoration and read as generic. The subtle
   grid above is the only texture. */
.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:40px;position:relative}
.auth-brand .brand-name{font-size:22px}
/* Solid white. Gradient-filled text is a tell; it also breaks selection colour. */
.auth-left h1{font-size:52px;line-height:1.1;font-weight:800;letter-spacing:-1.2px;margin-bottom:22px;position:relative;color:#fff}
.auth-left>p{color:var(--text-dim);font-size:18px;line-height:1.6;max-width:500px;position:relative}
.auth-points{list-style:none;margin-top:38px;display:flex;flex-direction:column;gap:16px;position:relative}
.auth-points li{display:flex;gap:12px;align-items:center;color:var(--text-dim);font-size:16px}
.tick{width:24px;height:24px;border-radius:50%;background:rgba(34,197,94,.15);color:var(--green);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.tick svg{width:13px;height:13px;stroke-width:3}
/* Pinned to the bottom of .auth-left rather than flowed after the points, so the
   headline block keeps its vertical centring. Left/right match .auth-left's 64px
   padding. Monochrome on purpose: this is attribution, not status. */
.auth-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--text-mute)}
.auth-foot.pinned{position:absolute;left:64px;right:64px;bottom:26px}
/* The left panel is hidden below 900px, so the same attribution is repeated
   under the card there. Exactly one of the two is ever visible. */
.auth-foot.compact{display:none;justify-content:center;text-align:center}
.auth-foot a{color:var(--text-dim);text-decoration:none}
.auth-foot a:hover{color:var(--text);text-decoration:underline}
.auth-foot .af-sep{color:var(--border)}
.auth-right{display:grid;place-items:center;padding:40px;position:relative;overflow:hidden}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:42px;box-shadow:var(--shadow);position:relative}
.auth-card h2{font-size:28px;font-weight:700}
.auth-sub{color:var(--text-mute);margin:8px 0 30px;font-size:15px}
.auth-card .field{margin-bottom:20px}
.auth-card .field>span{font-size:14px;margin-bottom:8px}
.auth-card .field input{font-size:15.5px;padding:13px 15px}
.auth-card .btn-primary.lg{padding:14px;font-size:16px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:7px;font-weight:500}
.field input,.field textarea,.field select{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;outline:none;transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:38px;background-color:var(--panel-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
.field select:hover{border-color:#34363f}
.auth-error{color:#ff8896;font-size:13px;min-height:18px;margin-bottom:6px}
/* Buttons are FLAT: one solid fill, no gradient, no coloured glow, no lift.
   Hover darkens/lightens the fill itself. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#1f9d55;color:#fff;border:0;border-radius:10px;padding:9px 15px;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
.btn-primary svg,.btn-ghost svg,.btn-danger svg{width:15px;height:15px;flex:none}
.btn-primary:hover{background:#23ad5e}
.btn-primary:active{background:#1b8a4b}
.btn-primary.lg{width:100%;padding:12px;font-size:15px}
.btn-primary:disabled{opacity:.6;cursor:default}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);border-radius:10px;padding:8px 13px;font-weight:500;cursor:pointer;font-size:13px;transition:.15s}
.btn-ghost:hover{background:#21232c;color:var(--text);border-color:#34363f}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(239,71,87,.13);border:1px solid rgba(239,71,87,.3);color:#ff8896;border-radius:10px;padding:8px 13px;font-weight:500;cursor:pointer;font-size:13px}
.btn-danger:hover{background:rgba(239,71,87,.2)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-mute);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.google-signin-wrap{display:flex;justify-content:center;margin-bottom:6px}
.demo-accounts{margin-top:24px;border-top:1px solid var(--border);padding-top:18px}
.demo-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-mute);margin-bottom:11px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-chip{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left;transition:.15s}
.demo-chip:hover{border-color:#34363f;background:#21232c}
.demo-chip .dc-name{font-size:12.5px;font-weight:600}
.demo-chip .dc-role{font-size:10.5px;color:var(--text-mute)}

/* ===================== APP SHELL ===================== */
.app{--nav-w:256px;display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh}
.sidebar{background:linear-gradient(180deg,#16171e,#121319);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;min-height:0}
.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;min-height:0}
.nav-section{font-size:10.5px;font-weight:600;letter-spacing:1.4px;color:var(--text-mute);text-transform:uppercase;padding:18px 10px 7px}
.nav-item{display:flex;align-items:center;gap:12px;background:transparent;border:0;cursor:pointer;color:var(--text-dim);font:inherit;font-weight:500;padding:10px 11px;border-radius:10px;text-align:left;transition:.15s;width:100%}
.nav-item .ico{width:18px;height:18px;flex:none}
.nav-item{position:relative}
.nav-item:hover{background:#1e2029;color:var(--text)}
/* Active = one soft, FLAT tint block behind the item, with the icon in the accent.
   Explicitly not: a gradient, an inset ring, a left edge bar, or any glow. The
   fill and the icon carry the state on their own. */
.nav-item.active{background:transparent;color:#fff}
.nav-item.active .ico svg{fill:var(--green);stroke:none}
.nav-item span{flex:1}
.nav-badge{flex:none!important;background:var(--accent);color:#fff;font-size:11px;font-weight:600;border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.nav-badge.red{background:var(--red)}
.sidebar-foot{border-top:1px solid var(--border);padding-top:14px}
.nav-toggle{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;cursor:pointer;color:var(--text-mute);font:inherit;font-weight:500;padding:9px 11px;border-radius:10px;margin-bottom:8px;transition:.15s}
.nav-toggle:hover{background:var(--panel-2);color:var(--text)}
.nav-toggle .ico{width:18px;height:18px;flex:none;transition:transform .2s}
.nav-toggle .ico svg{width:100%;height:100%}
/* collapsed sidebar: icons only */
.app.nav-collapsed{--nav-w:68px}
.app.nav-collapsed .brand-name,
.app.nav-collapsed .nav-item span:not(.ico):not(.nav-badge),
.app.nav-collapsed .me-meta,
.app.nav-collapsed #logoutBtn,
.app.nav-collapsed .nav-toggle span:not(.ico){display:none}
/* Keep section headers' exact vertical footprint when collapsed (hide the text,
   show a centered divider) so the icons never shift position between states. */
.app.nav-collapsed .nav-section{color:transparent;overflow:hidden;white-space:nowrap;position:relative}
.app.nav-collapsed .nav-section::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:1px;background:var(--border)}
.app.nav-collapsed .brand{justify-content:center;overflow:hidden;gap:0}
.app.nav-collapsed .brand-logo.full{max-width:0;opacity:0}
.app.nav-collapsed .brand-logo.icon{max-width:44px;opacity:1}
.app.nav-collapsed .nav-item,
.app.nav-collapsed .nav-toggle,
.app.nav-collapsed .me{justify-content:center}
.app.nav-collapsed .nav-item{position:relative}
.app.nav-collapsed .nav-badge{position:absolute;top:2px;right:6px}
.app.nav-collapsed .nav-toggle .ico{transform:rotate(180deg)}
.me{display:flex;align-items:center;gap:11px;padding:7px;border-radius:11px;transition:.15s}
.me:hover{background:#1c1e27}
.me-meta{flex:1;min-width:0}
.me-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-role{font-size:12px;color:var(--text-mute)}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--text-dim);cursor:pointer;display:grid;place-items:center;transition:.15s;flex:none}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{background:var(--panel-2);color:var(--text)}
.icon-btn.ghost{border:0;background:transparent}
.icon-btn.ghost:hover{background:var(--panel-2)}

.main{display:flex;flex-direction:column;min-width:0;background:var(--bg);height:100vh}
.view{display:flex;flex-direction:column;height:100%;min-height:0}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:rgba(13,14,18,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);flex:none;gap:12px}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.ico-sm{width:20px;height:20px;color:var(--text-dim);flex:none}
.t-name{font-weight:700;font-size:15.5px}
.t-sub{font-size:12px;color:var(--text-mute);display:flex;align-items:center;gap:6px}
.dot-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green)}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.scroll{flex:1;overflow-y:auto;padding:24px 26px 48px}
.thread,.scroll,.drawer,.inspector,.linear-scroll{scrollbar-width:thin;scrollbar-color:#2a2c36 transparent}
.thread::-webkit-scrollbar,.scroll::-webkit-scrollbar,.drawer::-webkit-scrollbar{width:8px}
.thread::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track{background:transparent}
/* sidebar nav scrolls, but the scrollbar is hidden */
.nav{scrollbar-width:none}
.nav::-webkit-scrollbar{width:0;height:0;display:none}
.thread::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb{background:#2a2c36;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.thread::-webkit-scrollbar-thumb:hover,.scroll::-webkit-scrollbar-thumb:hover,.drawer::-webkit-scrollbar-thumb:hover{background:#3a3d4a;background-clip:padding-box}
/* scrollable modal bodies use the same dark scrollbar as the rest of the app */
.modal-body,.pick-list,.mf-body{scrollbar-width:thin;scrollbar-color:#2a2c36 transparent}
.modal-body::-webkit-scrollbar,.pick-list::-webkit-scrollbar,.mf-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-track,.pick-list::-webkit-scrollbar-track,.mf-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb,.pick-list::-webkit-scrollbar-thumb,.mf-body::-webkit-scrollbar-thumb{background:#2a2c36;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.modal-body::-webkit-scrollbar-thumb:hover,.pick-list::-webkit-scrollbar-thumb:hover,.mf-body::-webkit-scrollbar-thumb:hover{background:#3a3d4a;background-clip:padding-box}

/* ===================== CHAT ===================== */
.thread{flex:1;overflow-y:auto;padding:26px 22px 10px;display:flex;flex-direction:column;gap:20px}
.msg{display:flex;gap:13px;max-width:none;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg-body{flex:1;min-width:0}
.msg-head{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.msg-author{font-weight:600;font-size:13.5px}
.msg-time{font-size:11.5px;color:var(--text-mute)}
.msg-text{font-size:14px;line-height:1.55;color:#d7dae2;word-wrap:break-word}
.mention{color:var(--blue);font-weight:600;background:rgba(91,155,255,.1);border-radius:5px;padding:0 3px}
.ack{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;font-weight:600;color:var(--green);background:rgba(34,197,94,.12);border-radius:20px;padding:2px 9px}
.ack svg{width:12px;height:12px;stroke-width:2.6}
.msg.ack-line .msg-text{color:var(--green);font-weight:500;font-size:13px}
.msg-head{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.msg-edited{font-size:11px;color:var(--text-mute);font-style:italic}

/* ---- kebab menu ---- */
.msg-menu-wrap{position:relative;margin-left:auto;flex-shrink:0}
.msg-kebab{opacity:0;transition:opacity .15s;background:none;border:none;cursor:pointer;color:var(--text-mute);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0}
.msg:hover .msg-kebab{opacity:1}
.msg-kebab:hover{background:var(--panel-2);color:var(--text)}
.msg-dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:200;background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:4px;min-width:140px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.msg-menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;cursor:pointer;color:var(--text);font-size:13px;padding:8px 11px;border-radius:7px;text-align:left;white-space:nowrap}
.msg-menu-item svg{width:14px;height:14px;fill:currentColor;stroke:none;flex-shrink:0}
.msg-menu-item:hover{background:rgba(255,255,255,.06)}
.msg-menu-item.del{color:#ff8896}
.msg-menu-item.del:hover{background:rgba(255,136,150,.12)}

/* ---- intel kebab menu ---- */
.intel-menu-wrap{position:relative;margin-left:auto;flex-shrink:0}
.intel-kebab{opacity:0;transition:opacity .15s;background:none;border:none;cursor:pointer;color:var(--text-mute);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0}
.auto-card:hover .intel-kebab{opacity:1}
.intel-kebab:hover{background:var(--panel-2);color:var(--text)}
/* Fixed positioning (coords set in JS) so the menu escapes the panel's
   overflow:hidden clipping instead of being cut at its rounded edge. */
.intel-dropdown{position:fixed;z-index:300;background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:4px;min-width:160px;box-shadow:0 8px 28px rgba(0,0,0,.45)}

/* ---- intelligence document view (Google Docs-style paper) ---- */
.doc-wrap{display:flex;gap:22px;align-items:flex-start;max-width:1160px;margin:0 auto;padding:4px 2px 40px}
.doc-toc{position:sticky;top:8px;width:230px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;max-height:calc(100vh - 120px);overflow:auto}
.doc-toc-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);padding:4px 10px 8px}
.doc-toc a{display:block;padding:5px 10px;color:var(--text-mute);font-size:12.5px;border-radius:7px;text-decoration:none;line-height:1.35}
.doc-toc a.lvl3{padding-left:24px;font-size:11.5px}
.doc-toc a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.doc-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.doc-paper{background:#fdfdfc;color:#1d2129;border-radius:8px;padding:52px 62px;box-shadow:0 3px 24px rgba(0,0,0,.5);font-size:14.5px;line-height:1.68}
.doc-paper h1{font-size:25px;line-height:1.3;margin:0 0 10px;color:#111}
.doc-paper h2{font-size:19px;margin:30px 0 12px;padding-bottom:7px;border-bottom:1px solid #e4e6ea;color:#111}
.doc-paper h3{font-size:15.5px;margin:22px 0 8px;color:#222}
.doc-paper h4{font-size:14px;margin:16px 0 6px;color:#222}
.doc-paper p{margin:0 0 12px}
.doc-paper table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:12.8px}
.doc-paper th,.doc-paper td{border:1px solid #d9dde3;padding:7px 10px;text-align:left;vertical-align:top}
.doc-paper th{background:#f2f4f7;font-weight:600}
.doc-paper tr:nth-child(even) td{background:#fafbfc}
.doc-paper hr{border:none;border-top:1px solid #e4e6ea;margin:30px 0}
.doc-paper ul,.doc-paper ol{margin:0 0 12px;padding-left:24px}
.doc-paper li{margin-bottom:4px}
.doc-paper pre{background:#f6f8fa;border:1px solid #e4e6ea;border-radius:8px;padding:13px 15px;overflow:auto;font-size:12.3px;line-height:1.55}
.doc-paper code{font-family:Consolas,'SF Mono',monospace;font-size:.92em;background:#f0f2f5;border-radius:4px;padding:1px 5px}
.doc-paper pre code{background:none;padding:0}
.doc-paper blockquote{border-left:3px solid #c3c9d2;margin:12px 0;padding:4px 15px;color:#4b5563}
.doc-paper a{color:#2563eb;text-decoration:none}
.doc-paper a:hover{text-decoration:underline}
.doc-paper b{color:#111}

/* creatives panel under the document */
.cre-list{display:flex;flex-direction:column;gap:10px}
.cre-card{background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.cre-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.cre-name{font-weight:600;font-size:13.5px}
.cre-status{font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:99px}
.cre-status.gen{background:rgba(240,180,60,.14);color:#f0b43c}
.cre-status.ok{background:rgba(74,222,128,.13);color:#4ade80}
.cre-status.fail{background:rgba(255,136,150,.13);color:#ff8896}
.cre-status.off{background:rgba(255,255,255,.06);color:var(--text-mute)}
.cre-script{font-size:12.5px;color:var(--text-mute);line-height:1.55;white-space:pre-wrap;max-height:120px;overflow:auto;margin-bottom:8px}
.cre-err{font-size:12px;color:#ff8896;margin-top:6px}
@media (max-width:980px){ .doc-toc{display:none} .doc-paper{padding:32px 26px} }

/* ---- inline edit ---- */
.msg-edit-area{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:14px;padding:9px 12px;resize:none;font-family:inherit;line-height:1.55;margin-top:4px;box-sizing:border-box}
.msg-edit-btns{display:flex;gap:8px;margin-top:7px}
.btn-sm{padding:5px 14px;font-size:12.5px}

/* ---- custom confirm modal ---- */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fade .2s ease}
.confirm-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px 28px 22px;min-width:290px;max-width:380px;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.confirm-msg{color:var(--text);font-size:15px;margin:0 0 22px;line-height:1.5}
.confirm-btns{display:flex;gap:10px;justify-content:flex-end}
.btn-danger{background:#e53e3e;color:#fff;border:none;border-radius:9px;padding:8px 18px;font-size:13.5px;font-weight:600;cursor:pointer}
.btn-danger:hover{background:#c53030}

.file-chip{display:inline-flex;align-items:center;gap:9px;margin-top:9px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 13px;font-size:13px;color:var(--text);max-width:330px;cursor:pointer;text-decoration:none}
.file-chip:hover{border-color:#34363f}
.file-chip svg{width:16px;height:16px;color:var(--blue);flex:none}
.file-chip .fsize{color:var(--text-mute);font-size:11.5px}

.ai-card{margin-top:11px;background:linear-gradient(180deg,#1c1e26,#191b22);border:1px solid var(--border);border-radius:13px;padding:14px 16px;max-width:500px;box-shadow:0 4px 18px rgba(0,0,0,.25);cursor:pointer;transition:.15s}
.ai-card:hover{border-color:#34363f}
.ai-tag{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green);letter-spacing:.3px;margin-bottom:9px}
.ai-tag svg{width:13px;height:13px}
.ai-title{font-weight:600;font-size:14.5px;line-height:1.4;color:#fff;margin-bottom:11px}
.ai-badges{display:flex;flex-wrap:wrap;gap:7px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:20px;padding:3px 10px;border:1px solid transparent;white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge.assignee{background:rgba(34,197,94,.13);color:#5fd98a;border-color:rgba(34,197,94,.25)}
.badge.due{background:rgba(245,166,35,.13);color:#f5b955;border-color:rgba(245,166,35,.25)}
.badge.due.over{background:rgba(239,71,87,.13);color:#ff8896;border-color:rgba(239,71,87,.25)}
.badge.file{background:var(--panel-2);color:var(--text-dim);border-color:var(--border)}
.badge.prio-urgent{background:rgba(239,71,87,.15);color:#ff8896;border-color:rgba(239,71,87,.3)}
.badge.prio-high{background:rgba(245,166,35,.15);color:#f5b955;border-color:rgba(245,166,35,.3)}
.badge.prio-normal{background:rgba(99,102,241,.15);color:#a3a6f5;border-color:rgba(99,102,241,.3)}
.badge.prio-low{background:var(--panel-2);color:var(--text-dim);border-color:var(--border)}
.badge.comments{background:var(--panel-2);color:var(--text-dim);border-color:var(--border)}

.delivery{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:8px;padding:5px 11px;color:var(--text-dim);background:var(--panel)}
.dchip svg{width:14px;height:14px}
.dchip.sent{color:var(--green);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.07)}
.dchip.failed{color:#ff8896;border-color:rgba(239,71,87,.3)}
.dchip.pending{color:var(--amber);border-color:rgba(245,166,35,.3)}
.spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* composer */
.composer{position:relative;padding:14px 22px 18px;border-top:1px solid var(--border);background:var(--bg);flex:none}
.composer-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:10px 12px 10px 16px;transition:.15s}
.composer-row:focus-within{border-color:var(--ring-border);box-shadow:var(--ring)}
.composer-input{flex:1;min-height:24px;max-height:160px;overflow-y:auto;outline:none;font-size:14px;line-height:1.5;color:var(--text);padding:3px 0}
.composer-input:empty::before{content:attr(data-placeholder);color:var(--text-mute)}
.composer-tools{display:flex;align-items:center;gap:6px;flex:none}
.composer-tools .icon-btn{width:34px;height:34px;border:0;background:transparent}
.composer-tools .icon-btn:hover{background:var(--panel-2)}
.send-btn{width:38px;height:38px;border-radius:11px;border:0;cursor:pointer;flex:none;background:#1f9d55;color:#fff;display:grid;place-items:center;transition:.15s}
.send-btn svg{width:17px;height:17px;stroke-width:2}
.send-btn:hover{background:#23ad5e}
.send-btn:active{background:#1b8a4b}
.composer-hint{font-size:11.5px;color:var(--text-mute);padding:9px 4px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.composer-hint .lead-only{color:var(--amber)}
.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.attachments:empty{display:none}
.att-pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:6px 10px;font-size:12.5px}
.att-pill svg{width:14px;height:14px;color:var(--blue)}
.att-pill .x{cursor:pointer;color:var(--text-mute);width:14px;height:14px;display:grid;place-items:center;border-radius:4px}
.att-pill .x:hover{background:var(--border);color:var(--text)}
.mention-pop{position:absolute;bottom:96px;left:22px;width:260px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none;z-index:20}
.mention-pop.show{display:block;animation:fade .15s ease}
.mention-opt{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer}
.mention-opt:hover,.mention-opt.active{background:#262a36}
.mention-opt .mo-name{font-weight:600;font-size:13px}
.mention-opt .mo-role{font-size:11px;color:var(--text-mute)}
.drop-hint{position:absolute;inset:14px 22px 90px;border:2px dashed rgba(34,197,94,.5);border-radius:16px;background:rgba(34,197,94,.06);display:none;place-items:center;color:var(--green);font-weight:600;z-index:30;pointer-events:none}
.drop-hint.show{display:grid}

/* ===================== CHAT BOOKMARK BAR (pinned folders / links / files) =====================
   Lives inside the thread's header, between the channel name and its actions.
   These are destinations, not status, so the strip is monochrome: weight and
   border carry the hierarchy, and the controls stay dimmer than the bookmarks. */
.bmk-bar{position:relative;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  flex:1;min-width:0;margin-left:8px}
.bmk-item{display:inline-flex;align-items:center;gap:7px;max-width:230px;padding:6px 11px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  font:inherit;font-size:12.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:.12s}
.bmk-item:hover{border-color:#34363f;color:var(--text)}
.bmk-item svg{width:14px;height:14px;flex:none;color:var(--text-mute)}
.bmk-item:hover svg{color:var(--text-dim)}
.bmk-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmk-caret{display:inline-flex;align-items:center;margin-left:-2px}
.bmk-caret svg{width:12px;height:12px}
/* Curation controls: no chip, no border, held back so the bookmarks themselves
   are what the eye lands on. They come up to full strength on hover. */
.bmk-quiet{background:transparent;border:0;color:var(--text-mute);opacity:.45;transition:.12s}
.bmk-quiet:hover{background:var(--panel-2);color:var(--text-dim);opacity:1}
.bmk-empty{font-size:12.5px;color:var(--text-mute)}
.bmk-pop{position:absolute;top:calc(100% - 4px);z-index:40;min-width:240px;max-width:320px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.bmk-pop-row{display:flex;align-items:center;gap:4px}
.bmk-pop-item{flex:1;display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;border-radius:9px;
  color:var(--text-dim);font-size:13px;text-decoration:none}
.bmk-pop-item:hover{background:var(--panel-2);color:var(--text)}
.bmk-pop-item svg{width:14px;height:14px;flex:none;color:var(--text-mute)}
.bmk-pop-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmk-pop-item .fsize{color:var(--text-mute);font-size:11.5px;margin-left:auto;flex:none}
.bmk-pop-acts{display:flex;gap:1px;flex:none;opacity:0;transition:.12s}
.bmk-pop-row:hover .bmk-pop-acts{opacity:1}
.bmk-pop-empty{padding:10px 10px 12px;color:var(--text-mute);font-size:12.5px}
.bmk-pop-foot{display:flex;align-items:center;justify-content:flex-end;gap:2px;
  margin-top:4px;padding-top:5px;border-top:1px solid var(--border)}
.bmk-seg{width:max-content;margin-bottom:16px}
.bmk-file{margin-top:9px;font-size:12.5px;color:var(--text-mute)}

/* ===================== TEAM CHAT CHANNELS (Slack-style right rail) ===================== */
.chat-layout{display:flex;height:100%;min-height:0}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.chan-panel{width:250px;flex:none;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.chan-head{display:flex;align-items:center;justify-content:space-between;padding:15px 12px 12px 18px;border-bottom:1px solid var(--border)}
.chan-title{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-mute)}
.chan-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.chan-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;cursor:pointer;color:var(--text-dim);transition:.12s}
.chan-item:hover{background:var(--panel-2);color:var(--text)}
.chan-item.active{background:rgba(34,197,94,.10);color:#fff}
/* The ellipsis lives on .chan-label, not here. When .chan-name carried
   overflow:hidden it also clipped the lock badge, which sits above the hash's
   line box - the top of the padlock's shackle was cut off. */
.chan-name{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;min-width:0;white-space:nowrap}
.chan-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chan-hash{color:var(--text-mute);font-weight:600;flex:none}
.chan-item.active .chan-hash{color:var(--green)}
/* A restricted channel carries its lock as a badge on the top-left corner of the
   hash rather than trailing the name, so the state reads at the start of the row
   and long names cannot push it out of sight under the ellipsis. The left margin
   is what stops the badge being clipped by the row padding. */
.chan-hash.locked{position:relative;display:inline-block;margin-left:5px}
.chan-actions{display:flex;gap:1px;flex:none;opacity:0;transition:.12s}
.chan-item:hover .chan-actions{opacity:1}
.chan-empty{padding:14px 12px;color:var(--text-mute);font-size:13px}
.chan-subhead{margin-top:14px;padding:0 10px 6px}
/* The first section heading sits directly under the rail header, which already
   supplies the gap - the 14px would read as a stray indent. */
.chan-list>.chan-subhead:first-child{margin-top:2px}
.chan-item.deleted{color:var(--text-mute)}
.chan-item.deleted .chan-name{text-decoration:line-through;text-decoration-color:var(--text-mute)}
.chan-item.deleted .chan-actions{opacity:1}
/* Small lock on the hash = restricted (leads-only or private). It marks state, so
   it stays a muted monochrome glyph, never an accent. Sat on the hash's top-left
   corner; the panel-coloured ring keeps it legible where it overlaps the glyph. */
.chan-lock{position:absolute;top:-4px;left:-6px;display:inline-flex;align-items:center;justify-content:center;
  width:11px;height:11px;border-radius:50%;color:var(--text-mute);background:var(--panel);box-shadow:0 0 0 2px var(--panel)}
.chan-lock svg{width:9px;height:9px;fill:currentColor;stroke:none}
/* The badge sits on whatever the row is filled with, so it has to follow the
   row's background or it reads as a floating dot. */
.chan-item:hover .chan-lock{background:var(--panel-2);box-shadow:0 0 0 2px var(--panel-2)}
/* #172824 is rgba(34,197,94,.10) composited over --panel, i.e. the active row's
   actual rendered fill - a ring has to be opaque, so it cannot reuse the tint. */
.chan-item.active .chan-lock{color:var(--green);background:#172824;box-shadow:0 0 0 2px #172824}
/* Member picker inside the channel modal: a bounded, bordered scroll box so the
   modal stays compact even with a long roster. */
.chan-member-list{max-height:220px;margin:0;border:1px solid var(--border);border-radius:10px;padding:6px;background:var(--panel-2)}
.icon-btn.sm{width:28px;height:28px;border:0;background:transparent}
.icon-btn.sm svg{width:16px;height:16px}
.icon-btn.xs{width:24px;height:24px;border:0;background:transparent;border-radius:7px}
.icon-btn.xs svg{width:13px;height:13px}

/* ===================== STATS / PANELS / TABLES ===================== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:.15s}
.stat-card:hover{border-color:#333646;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.stat-num{font-size:30px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stat-num.warn{color:var(--amber)}.stat-num.bad{color:var(--red)}.stat-num.good{color:var(--green)}
.stat-label{font-size:13px;color:var(--text-dim);margin-top:2px}
.stat-trend{font-size:11.5px;color:var(--text-mute);margin-top:9px}
.stat-trend.up{color:var(--green)}.stat-trend.down{color:var(--red)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.rm-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 20px;align-items:start}
.rm-grid>div{min-width:0}
.rm-preview{position:sticky;top:0}
.rm-preview .panel{margin-bottom:0}
@media(max-width:900px){.rm-grid{grid-template-columns:1fr}.rm-preview{position:static}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.panel-head h3{font-size:14.5px;font-weight:600}
.muted{color:var(--text-mute);font-size:12px}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mute);font-weight:600;padding:11px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.016)}
.data-table td{font-variant-numeric:tabular-nums}
.data-table td{padding:13px 18px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr{cursor:pointer;transition:.12s}
.data-table tbody tr:hover{background:#1b1d24}
.cell-person{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:20px;padding:3px 10px;white-space:nowrap}
.pill.pending{background:rgba(245,166,35,.13);color:#f5b955}
.pill.in_progress{background:rgba(91,155,255,.13);color:#88b3ff}
.pill.done{background:rgba(34,197,94,.13);color:#5fd98a}
.pill.overdue{background:rgba(239,71,87,.13);color:#ff8896}
.bar{height:6px;border-radius:6px;background:var(--panel-2);overflow:hidden;width:120px}
.bar>span{display:block;height:100%;background:var(--green)}

/* task board */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.search-box{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex:1;min-width:200px;max-width:340px;transition:.15s}
.search-box:focus-within{border-color:var(--ring-border);box-shadow:var(--ring)}
.search-box svg{width:16px;height:16px;color:var(--text-mute)}
.search-box input{background:transparent;border:0;outline:none;color:var(--text);font-size:13.5px;width:100%}
.chip-btn{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.chip-btn:hover{background:var(--panel-2);color:var(--text)}
.chip-btn.active{background:rgba(34,197,94,.13);color:#fff;border-color:rgba(34,197,94,.32)}
.filter-sep{width:1px;height:22px;background:var(--border);margin:0 3px}
.filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mute);align-self:center;margin-right:2px}
.member-bar{margin-top:-8px;margin-bottom:18px}
.member-chip{display:inline-flex;align-items:center;gap:7px}
.member-chip .avatar{flex:none}
.task-board{display:flex;flex-direction:column;gap:12px;max-width:820px}
.task-card{background:var(--card-grad);border:1px solid var(--border);border-radius:13px;padding:15px 18px;display:flex;gap:14px;align-items:flex-start;transition:.15s;cursor:pointer}
.task-card:hover{border-color:#333646;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.task-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);flex:none;margin-top:2px;cursor:pointer;display:grid;place-items:center;color:transparent;transition:.15s}
.task-check svg{width:13px;height:13px;stroke-width:3}
.task-card.done .task-check{background:var(--green);border-color:var(--green);color:#0c1a10}
.task-main{flex:1;min-width:0}
.task-title{font-weight:600;font-size:14.5px;margin-bottom:5px}
.task-card.done .task-title{text-decoration:line-through;color:var(--text-mute)}
.task-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:9px}
.task-from{font-size:12px;color:var(--text-mute)}
.empty{grid-column:1/-1;width:100%;padding:56px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text-mute);font-size:13.5px}
/* when a section holds only its empty-state, let it span the full width so the text truly centers on screen */
.task-board:has(>.empty),.notif-list:has(>.empty),.auto-list:has(>.empty),.recipe-grid:has(>.empty){max-width:none}
.empty .big{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;background:var(--panel-2);border:1px solid var(--border);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.empty .big svg{width:28px;height:28px;fill:currentColor;stroke:none;opacity:.6}

/* people / directory */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.person-card{background:var(--card-grad);border:1px solid var(--border);border-radius:13px;padding:18px;position:relative;transition:.15s}
.person-card:hover{border-color:#333646;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.person-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.person-name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.you-tag{font-size:10px;font-weight:700;letter-spacing:.3px;color:#0c1a10;background:var(--green);border-radius:20px;padding:1px 8px}
.person-role{font-size:12.5px;color:var(--text-mute)}
.contact-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-dim);padding:5px 0}
.contact-row svg{width:15px;height:15px;color:var(--text-mute);flex:none}
.person-badge{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border)}
.person-badge.lead{color:#a3a6f5;background:rgba(99,102,241,.13);border-color:rgba(99,102,241,.3)}
.person-badge.admin{color:#5fd98a;background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.3)}
.person-actions{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--border-soft);padding-top:13px}
.person-actions button{flex:1;font-size:12.5px;padding:7px}
/* A second actions row (e.g. client Edit/Remove under Performance/Message) reads
   as a continuation of the first, not a new divided section. */
.person-actions+.person-actions{border-top:0;margin-top:8px;padding-top:0}

/* settings */
.settings-panel{max-width:680px}
.setting-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border-soft)}
.setting-row:last-child{border-bottom:0}
.setting-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.setting-ico svg{width:19px;height:19px}
.setting-ico.email{background:rgba(91,155,255,.13);color:#88b3ff}
.setting-ico.wa{background:rgba(34,197,94,.13);color:#5fd98a}
.setting-ico.ai{background:rgba(99,102,241,.15);color:#a3a6f5}
.setting-ico.bell{background:rgba(245,166,35,.13);color:#f5b955}
.setting-meta{flex:1}
.setting-name{font-weight:600;font-size:14px}
.setting-desc{font-size:12.5px;color:var(--text-mute);margin-top:2px}
.switch{position:relative;width:42px;height:24px;flex:none}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--panel-2);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:.2s}
.slider::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#8b909c;top:3px;left:4px;transition:.2s}
.switch input:checked+.slider{background:rgba(34,197,94,.25);border-color:var(--green)}
.switch input:checked+.slider::before{background:var(--green);transform:translateX(18px)}

/* analytics */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.chart-pad{padding:20px}
.abar{margin-bottom:16px}
.abar:last-child{margin-bottom:0}
.abar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;text-transform:capitalize}
.abar-top span:first-child{color:var(--text-dim)}
.abar-val{font-weight:700;color:var(--text)}
.abar-track{height:10px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.abar-fill{height:100%;border-radius:6px;transition:width .5s ease}
/* donut */
.donut-wrap{position:relative;width:160px;height:160px;margin:18px auto 6px}
.donut{width:160px;height:160px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}
.donut-pct{font-size:30px;font-weight:800;letter-spacing:-1px}
.donut-sub{font-size:11.5px;color:var(--text-mute);margin-top:2px}
.donut-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:8px 18px 22px}
.leg{font-size:12.5px;color:var(--text-dim);display:flex;align-items:center;gap:7px;text-transform:capitalize}
.leg .dot{width:9px;height:9px;border-radius:50%}
.leg b{color:var(--text)}
/* per-person bars */
.person-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.person-bar:last-child{margin-bottom:0}
.pb-name{width:120px;font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-track{flex:1;height:14px;background:var(--panel-2);border-radius:7px;overflow:hidden}
.pb-fill{height:100%;border-radius:7px;background:var(--green);transition:width .5s ease}
.pb-val{width:96px;text-align:right;font-size:12px;color:var(--text-dim);font-weight:500}

/* notifications */
.notif-list{max-width:640px;display:flex;flex-direction:column;gap:10px}
.notif{display:flex;gap:13px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;align-items:flex-start;cursor:pointer;transition:.15s}
.notif:hover{border-color:#34363f;box-shadow:0 6px 20px rgba(0,0,0,.25)}
/* Unread is carried by the red .notif-dot plus a raised neutral surface. It used
   to also wear a green 3px left edge, which said "unread" in a second, different
   colour from the dot on the same row - and the green tint/accent belongs to the
   active nav item, not to a list row. */
.notif.unread{background:var(--panel-2)}
.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;align-self:center}
.notif-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.notif-ico svg{width:16px;height:16px}
.notif-ico.escalation,.notif-ico.reminder{background:rgba(239,71,87,.13);color:#ff8896}
.notif-ico.assigned{background:rgba(34,197,94,.13);color:#5fd98a}
.notif-ico.comment{background:rgba(91,155,255,.13);color:#88b3ff}
.notif-ico.status{background:rgba(99,102,241,.15);color:#a3a6f5}
.notif-body{flex:1}
.notif-text{font-size:13.5px}
.notif-time{font-size:11.5px;color:var(--text-mute);margin-top:3px}

/* ===================== DRAWER (task detail) ===================== */
.drawer-overlay,.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer-overlay{justify-content:flex-end}
.drawer{width:min(540px,94vw);background:var(--bg);border-left:1px solid var(--border);height:100%;overflow-y:auto;animation:slideIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes slideIn{from{transform:translateX(48px);opacity:.3}to{transform:none;opacity:1}}
.drawer-head{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:sticky;top:0;background:var(--bg);z-index:2}
.drawer-head h2{font-size:17px;font-weight:700;line-height:1.35}
.drawer-sec{padding:18px 22px;border-bottom:1px solid var(--border-soft)}
.drawer-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-mute);margin-bottom:12px;font-weight:600}

/* ---- board side panels ----
   A docked column, not an overlay. `.app` is a two-column grid; while a panel is
   open it becomes three, so the board narrows instead of being covered and stays
   fully interactive underneath the mouse. Collapsing drops the column to zero
   width rather than unmounting the panel, which is what lets it come back with
   everything still wired. */
.app.kb-docked{grid-template-columns:var(--nav-w) minmax(0,1fr) clamp(320px,30vw,440px)}
.app.kb-docked.kb-collapsed{grid-template-columns:var(--nav-w) minmax(0,1fr) 0}
.app.kb-collapsed .kb-dock{display:none}
.kb-dock{background:var(--panel);border-left:1px solid var(--border);height:100vh;
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.kb-dock .panel-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;
  align-items:flex-start;justify-content:space-between;gap:10px;flex:none}
.kb-dock .panel-head h2{font-size:15.5px;font-weight:700;line-height:1.35;min-width:0;word-break:break-word}
.kb-dock .panel-tools{display:flex;gap:2px;flex:none}
.kb-dock .panel-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto}
.kb-dock .panel-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;
  justify-content:flex-end;gap:10px;flex:none;flex-wrap:wrap;background:var(--panel)}
/* A destructive action belongs at the far end, away from the button people
   actually reach for. */
.kb-dock .panel-foot .btn-danger{margin-right:auto}
/* The tab that brings a collapsed panel back. Sits on the edge it left from. */
.kb-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  width:22px;height:64px;padding:0;display:grid;place-items:center;cursor:pointer;
  background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border);border-right:0;
  border-radius:9px 0 0 9px}
.kb-rail:hover{background:#21232c;color:var(--text)}
.kb-rail svg{width:14px;height:14px}
/* Narrow screens cannot give a panel its own column and still show a board, so
   there it goes back to floating over the board rather than crushing it. */
@media (max-width:1100px){
  .app.kb-docked{grid-template-columns:var(--nav-w) minmax(0,1fr)}
  .kb-dock{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);z-index:45;
    box-shadow:-14px 0 34px rgba(0,0,0,.42)}
}

/* ---- editable board title ----
   No chrome until you interact with it: the title has to read as a title first
   and an input second, or every board looks like an unsaved form. */
.kb-bname.editable{border-radius:7px;padding:1px 5px;margin-left:-5px;cursor:text;display:inline-block}
.kb-bname.editable:hover{background:var(--panel-2)}
.kb-bname.editing{background:var(--panel-2);box-shadow:var(--ring);outline:none;cursor:text}

/* ---- choice-list editor ----
   One row per choice: position, name, the eight colours, and its tools. The
   swatches reuse .kb-lbl's palette so a choice tinted red is the same red as a
   label tinted red. */
.kb-optlist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.kb-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--border)}
.kb-opt-grip{font-size:11px;color:var(--text-mute);width:14px;text-align:center;flex:none}
.kb-opt-name{flex:1;min-width:0}
.kb-opt-dots{display:flex;gap:4px;flex:none}
.kb-opt-dot{width:16px;height:16px;padding:0;border-radius:50%;cursor:pointer;opacity:.45}
.kb-opt-dot:hover{opacity:.8}
.kb-opt-dot.on{opacity:1;outline:2px solid var(--text);outline-offset:2px}
.kb-opt-tools{display:flex;gap:2px;flex:none}
/* The choices as they will actually look, under the field name in Board setup. */
.kb-opt-preview{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
/* A choice select tinted by its current value, so the card panel matches the
   card. Each rule covers the control itself AND its options, because colour
   inherits: tinting only the select painted every option in the selected value's
   colour, so an open list of four choices showed four identical colours.
   Options also need their own background, or the popup inherits the page's. */
.kb-selval option{color:var(--text);background:var(--panel-2)}
.kb-selval.c-gray,   .kb-selval option.c-gray  {color:var(--text)}
.kb-selval.c-blue,   .kb-selval option.c-blue  {color:#88b3ff}
.kb-selval.c-green,  .kb-selval option.c-green {color:#5fd98a}
.kb-selval.c-amber,  .kb-selval option.c-amber {color:#f5b955}
.kb-selval.c-red,    .kb-selval option.c-red   {color:#ff8896}
.kb-selval.c-purple, .kb-selval option.c-purple{color:#b49bff}
.kb-selval.c-teal,   .kb-selval option.c-teal  {color:#5ad3c4}
.kb-selval.c-pink,   .kb-selval option.c-pink  {color:#f58ac0}
.kv{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.kv .k{width:90px;font-size:12.5px;color:var(--text-mute)}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px}
.seg button{background:transparent;border:0;color:var(--text-dim);font:inherit;font-size:12px;font-weight:500;padding:5px 11px;border-radius:6px;cursor:pointer}
.seg button.active{background:#2d303c;color:#fff}
.cmt{display:flex;gap:11px;margin-bottom:14px}
.cmt-body{flex:1}
.cmt-head{display:flex;gap:8px;align-items:baseline}
.cmt-name{font-weight:600;font-size:13px}
.cmt-time{font-size:11px;color:var(--text-mute)}
.cmt-text{font-size:13.5px;color:#d7dae2;margin-top:3px;line-height:1.5}
.cmt-form{display:flex;gap:10px;margin-top:8px}
.cmt-form input{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text);outline:none;font-size:13.5px;transition:.15s}
.cmt-form input:focus{border-color:var(--ring-border);box-shadow:var(--ring)}

/* ===================== MODAL ===================== */
.modal-overlay{justify-content:center;align-items:center}
/* Capped to the viewport and laid out as a column: head and foot are pinned and
   the body takes the remaining space. Without this a modal taller than the
   screen pushed its title and its Save button off the top and bottom, and
   `overflow:hidden` clipped them away entirely with no way to scroll to them.
   Variants that set their own .modal-body max-height still win, since that caps
   the body further rather than fighting the column. */
.modal{width:min(440px,94vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;animation:slideIn .2s}
.modal.modal-wide{width:min(920px,94vw)}
.modal.modal-wide .modal-body{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Manual-fill questionnaire wizard */
.modal.modal-mf{width:min(680px,94vw)}
.modal.modal-mf .mf-step{font-size:11px;font-weight:600;color:var(--accent2,#a3a6f5);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.mf-progress{display:flex;gap:5px;padding:4px 22px 2px;flex:none}
.mf-dot{flex:1;height:3px;border-radius:2px;background:var(--panel-2)}
.mf-dot.on{background:var(--green)}
.mf-dot.done{background:rgba(43,180,98,.45)}
.mf-body{max-height:min(60vh,520px);overflow-y:auto}
.mf-sub{font-size:12.5px;color:var(--text-dim);line-height:1.6;margin-bottom:14px}
.mf-item{padding:14px 0;border-top:1px solid var(--border)}
.mf-item:first-of-type{border-top:none}
.mf-q{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px}
.mf-qnum{flex:none;width:22px;height:22px;border-radius:6px;background:var(--panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-dim);margin-top:1px}
.mf-qlabel{font-size:13px;font-weight:600;line-height:1.45}
.mf-qhint{font-size:12px;color:var(--text-dim);line-height:1.5;margin-top:3px;font-style:italic}
.mf-input{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px;line-height:1.5}
.mf-input:focus{outline:none;border-color:var(--green)}
textarea.mf-input{resize:vertical;min-height:78px}
.mf-opts{display:flex;flex-wrap:wrap;gap:8px}
.mf-opt,.mf-pill{padding:8px 13px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:.12s}
.mf-opt{border-radius:99px}
.mf-pill:hover,.mf-opt:hover{color:var(--text);border-color:var(--border2,rgba(255,255,255,.2))}
.mf-opt.sel,.mf-pill.sel{background:rgba(43,180,98,.14);border-color:var(--green);color:#7ee0a3;font-weight:600}
.modal-head{padding:20px 22px 6px;font-size:17px;font-weight:700;flex:none}
.modal-body{padding:14px 22px 8px;flex:1 1 auto;min-height:0;overflow-y:auto}
/* Wraps so a modal with several actions does not push one off the edge. */
.modal-foot{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;flex:none;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- picker button (replaces trigger/action selects) ---- */
.picker-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-size:13.5px;cursor:pointer;transition:.15s}
.picker-btn:hover:not(:disabled){border-color:var(--ring-border)}
.picker-btn:disabled{opacity:.6;cursor:default}
.picker-btn.big{padding:11px 14px;font-size:14px}
.picker-btn .pk-ico{width:18px;height:18px;flex:none;display:grid;place-items:center;color:var(--text-dim)}
.picker-btn .pk-ico svg{width:16px;height:16px;fill:currentColor;stroke:none}
.picker-btn .pk-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-btn .pk-caret{width:16px;height:16px;flex:none;color:var(--text-mute)}
.picker-btn .pk-caret svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* ---- searchable catalog picker modal ---- */
.modal.modal-pick{width:min(520px,94vw)}
.pick-body{display:flex;flex-direction:column;gap:0;padding-bottom:0}
.pick-search{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:10px;position:sticky;top:0}
.pick-search svg{width:16px;height:16px;flex:none;fill:var(--text-mute);stroke:none}
.pick-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px}
.pick-list{max-height:min(56vh,460px);overflow-y:auto;margin:0 -6px;padding:0 6px 8px}
.pick-group{margin-bottom:10px}
.pick-group-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);padding:6px 6px 4px}
.pick-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:9px;padding:9px 10px;color:var(--text);font-size:13.5px;cursor:pointer;transition:.12s}
.pick-item:hover{background:var(--bg-hover)}
.pick-item.sel{background:var(--bg-hover);border-color:var(--ring-border)}
.pick-item .pick-ico{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--text-dim)}
.pick-item .pick-ico svg{width:17px;height:17px;fill:currentColor;stroke:none}
.pick-item .pick-lbl{flex:1;min-width:0}
.pick-item .pick-check{width:16px;height:16px;flex:none;color:#5fd98a}
.pick-item .pick-check svg{width:16px;height:16px;fill:currentColor;stroke:none}
.pick-empty{padding:24px 8px;text-align:center;color:var(--text-mute);font-size:13px}

/* ===================== TOAST ===================== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(27,29,36,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #2e313d;border-radius:12px;padding:12px 18px;font-size:13px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.16,1,.3,1);z-index:90}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;color:var(--green)}
.toast.err svg{color:#ff8896}

/* ===================== LOGIN ROLE TABS ===================== */
.auth-tabs{display:flex;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:5px;margin-bottom:24px}
.auth-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:0;color:var(--text-dim);font:inherit;font-size:13.5px;font-weight:600;padding:10px 6px;border-radius:8px;cursor:pointer;transition:.15s}
.auth-tab .at-ico{width:16px;height:16px;display:grid;place-items:center;flex:none}
.auth-tab .at-ico svg{width:16px;height:16px}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{background:var(--panel);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3),inset 0 0 0 1px var(--border)}

/* ===================== KPI / PERFORMANCE ===================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi{background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;transition:.15s}
.kpi:hover{border-color:#333646;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
.kpi-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-2);color:var(--text-dim);flex:none}
.kpi-ico svg{width:17px;height:17px}
.kpi-ico.green{background:rgba(34,197,94,.14);color:#5fd98a}
.kpi-ico.blue{background:rgba(91,155,255,.14);color:#88b3ff}
.kpi-ico.purple{background:rgba(99,102,241,.16);color:#a3a6f5}
.kpi-val{font-size:27px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi-label{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.delta{font-size:11.5px;font-weight:700;border-radius:20px;padding:2px 8px;white-space:nowrap}
.delta.up{color:#5fd98a;background:rgba(34,197,94,.13)}
.delta.down{color:#ff8896;background:rgba(239,71,87,.13)}
.delta.flat{color:var(--text-mute);background:var(--panel-2)}

.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.mini{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 14px}
.mini-val{font-size:17px;font-weight:700;letter-spacing:-.3px}
.mini-label{font-size:10.5px;color:var(--text-mute);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}

/* trend chart */
.trend-svg{width:100%;height:auto;display:block}
.trend-svg .ax{fill:var(--text-mute);font-size:10px;stroke:none}
.trend-svg line{stroke-width:1}
.trend-legend{display:flex;gap:18px;justify-content:center;padding:10px 0 2px}
.trend-legend .leg{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:7px}
.trend-legend .dot{width:9px;height:9px;border-radius:50%}

/* campaign cells / channel chips */
.camp-cell{display:flex;align-items:center;gap:11px}
.ch-dot{width:10px;height:10px;border-radius:3px;flex:none}
td.camp-name,.camp-name{font-weight:600;font-size:13.5px}
.camp-ch{font-size:11.5px;color:var(--text-mute);font-weight:400}
.ch-chip{display:inline-block;font-size:11.5px;font-weight:600;color:var(--ch);background:color-mix(in srgb,var(--ch) 15%,transparent);border:1px solid color-mix(in srgb,var(--ch) 32%,transparent);border-radius:20px;padding:2px 10px}
.btn-ghost.sm{padding:5px 11px;font-size:12px}

/* client cards */
.client-card .client-kpis,.csm-card .client-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:13px 0;text-align:center}
.ck-val{font-size:16px;font-weight:700}
.ck-val.good{color:#5fd98a}
.ck-lbl{font-size:10px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}

/* ---- CSM client-health board ---- */
/* The card colour IS the status signal (green healthy / amber watch / red at
   risk), so the whole surface takes a soft status tint + matching border. This
   is meaning, not decoration - each tint maps to a stated KPI band. */
.csm-card.status-green{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.05)}
.csm-card.status-yellow{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.055)}
.csm-card.status-red{border-color:rgba(239,71,87,.4);background:rgba(239,71,87,.055)}
.csm-card.status-green:hover{border-color:rgba(34,197,94,.7)}
.csm-card.status-yellow:hover{border-color:rgba(245,166,35,.7)}
.csm-card.status-red:hover{border-color:rgba(239,71,87,.7)}
.csm-reason{font-size:12.5px;color:var(--text-dim);margin:2px 0 14px}
.csm-card .client-kpis .delta{margin-top:6px}
.csm-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.csm-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-dim);background:transparent;border:1px solid var(--border);border-radius:9px;padding:6px 12px;cursor:pointer;transition:.15s}
.csm-chip:hover{background:var(--panel-2);color:var(--text)}
.csm-chip.active{background:var(--panel-2);color:var(--text);border-color:#333646}
.csm-dot{width:9px;height:9px;border-radius:50%;flex:none}
.csm-dot.green{background:var(--green)}
.csm-dot.yellow{background:var(--amber)}
.csm-dot.red{background:var(--red)}
.csm-dot.nodata{background:var(--text-mute)}

/* ===================== CREATIVE PIPELINE (Kanban) ===================== */
.kanban{flex:1;min-height:0;display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding:18px 22px 22px}
.kanban,.kcol-body{scrollbar-width:thin;scrollbar-color:#2a2c36 transparent}
.kanban::-webkit-scrollbar,.kcol-body::-webkit-scrollbar{width:8px;height:8px}
.kanban::-webkit-scrollbar-track,.kcol-body::-webkit-scrollbar-track{background:transparent}
.kanban::-webkit-scrollbar-thumb,.kcol-body::-webkit-scrollbar-thumb{background:#2a2c36;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.kanban::-webkit-scrollbar-thumb:hover,.kcol-body::-webkit-scrollbar-thumb:hover{background:#3a3d4a;background-clip:padding-box}
/* Columns size to their content (capped at the board height) instead of always
   running full height: one card no longer floats above a screen of empty space. */
.kcol{flex:1 1 268px;min-width:236px;max-width:340px;align-self:flex-start;max-height:100%;display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.kcol-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 2px}
.kcol-title{font-weight:600;font-size:13.5px}
.kcol-count{font-size:11.5px;font-weight:600;color:var(--text-mute);background:var(--panel-2);border-radius:20px;padding:1px 9px;min-width:22px;text-align:center}
.kcol-hint{font-size:11px;color:var(--text-mute);padding:0 14px 10px}
.kcol-body{flex:1;min-height:78px;overflow-y:auto;padding:4px 10px 12px;display:flex;flex-direction:column;gap:9px}
.kcol-body.drop-ok{background:rgba(34,197,94,.06);outline:2px dashed rgba(34,197,94,.4);outline-offset:-4px;border-radius:10px}
/* Dashed tray so an empty stage still reads as a container you can drop into. */
.kcol-empty{color:var(--text-mute);font-size:12px;text-align:center;padding:18px 0;border:1px dashed var(--border-soft);border-radius:10px}
/* Cards must sit ABOVE the column, not blend into it: lighter fill than --panel,
   a firmer border and a black depth shadow. --card-grad is too close to --panel. */
.kcard{background:var(--panel-2);border:1px solid #303341;border-radius:11px;padding:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:.15s}
.kcard:hover{background:#20222c;border-color:#3d4150}
.kcard.drag{cursor:grab}
.kcard.dragging{opacity:.45}
.kcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kcard-title{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--text)}
.kcard-plat{flex:none;font-size:10px;font-weight:600;color:var(--text-dim);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
/* Platform chip: solid fill in the network's own brand colour with white text, so
   the channel a card ships to is readable at a glance. Flat fill, no gradient and
   no glow. TikTok and X are brand-black, so they keep a hairline border to stay
   separated from the dark card; an unrecognised platform keeps the neutral chip
   above. */
.kcard-plat.ig,.kcard-plat.tt,.kcard-plat.yt,
.kcard-plat.fb,.kcard-plat.li,.kcard-plat.x{color:#fff;border-color:transparent}
.kcard-plat.ig{background:#e1306c}
.kcard-plat.yt{background:#e62117}
.kcard-plat.fb{background:#1877f2}
.kcard-plat.li{background:#0a66c2}
.kcard-plat.tt{background:#161823;border-color:rgba(37,244,238,.55)}
.kcard-plat.x{background:#000;border-color:rgba(255,255,255,.28)}
.kcard-client{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-mute);margin-top:7px}
.kcard-client svg{width:13px;height:13px;flex:none}
.kcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border-soft)}
.kcard-unassigned{font-size:11px;color:var(--text-mute);font-style:italic}
.kcard-meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.kchip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--text-dim);background:var(--panel-2);border-radius:20px;padding:2px 8px}
.kchip svg{width:12px;height:12px}
.kchip.ok{color:#5fd98a;background:rgba(34,197,94,.12)}
.kchip.warn{color:#f5b955;background:rgba(245,166,35,.13)}
.pv-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);margin-bottom:7px}
.pv-brief,.pv-sec{margin-bottom:16px}
.pv-brief-txt{font-size:13px;color:var(--text-dim);line-height:1.5}
.pv-file{margin-bottom:10px}
.pv-moves{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border-soft);padding-top:14px}
.pv-moves .pv-lbl{margin-bottom:0}
.pv-move{font-size:12px;padding:6px 11px}
.pv-postlink{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--green);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:9px;padding:7px 11px;margin-bottom:11px;text-decoration:none}
.pv-postlink:hover{background:rgba(34,197,94,.16)}
.pv-postlink svg{width:14px;height:14px}
/* ============================================================
   KANBAN BOARDS (configurable) - reuses the pipeline's .kanban/.kcol/.kcard
   shell above and adds only what a user-shaped board needs on top: labels,
   custom-field values on the card face, column tools, and the setup/rule editor.
   ============================================================ */
.kb-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.kb-board{display:flex;flex-direction:column;gap:7px;text-align:left;background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;cursor:pointer;color:inherit;font:inherit;transition:.15s}
.kb-board:hover{border-color:#34363f;background:var(--panel-2)}
.kb-board-name{font-weight:600;font-size:14.5px}
.kb-board-desc{font-size:12.5px;color:var(--text-dim);line-height:1.45}
.kb-board-meta{font-size:11.5px;color:var(--text-mute);margin-top:4px}
.kb-blank{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 20px;text-align:center;font-size:13.5px}
.kb-blank .muted{max-width:420px;line-height:1.55}

/* Column header tools + the two "add" affordances. The add-column tile sits in
   the .kanban flex row, so it needs the same flex-none sizing a .kcol has. */
.kcol-tools{display:flex;align-items:center;gap:4px}
/* The one green mark on a board: this column means finished. It is status, which
   is the only thing colour is spent on here. */
.kcol-done{display:inline-flex;color:var(--green);margin-left:5px;vertical-align:-1px}
.kcol-done svg{width:12px;height:12px}
.kcol-title{display:inline-flex;align-items:center}
.kcol-new{width:calc(100% - 20px);margin:0 10px 10px;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px dashed var(--border);border-radius:10px;color:var(--text-mute);font:inherit;font-size:12px;padding:8px;cursor:pointer;transition:.15s}
.kcol-new:hover{background:var(--panel-2);color:var(--text-dim);border-color:#34363f}
.kcol-new svg{width:13px;height:13px}
.kcol-add{flex:none;align-self:flex-start;display:flex;align-items:center;gap:7px;min-width:172px;background:transparent;border:1px dashed var(--border);border-radius:14px;color:var(--text-mute);font:inherit;font-size:13px;padding:13px 15px;cursor:pointer;transition:.15s}
.kcol-add:hover{background:var(--panel);color:var(--text-dim);border-color:#34363f}
.kcol-add svg{width:15px;height:15px}

/* Labels. The colour is the label's own identity (the user picks it), which is
   why these are the one place a palette is spent on something that is not
   status: two boards agreeing on a colour is how a global label stays
   recognisable as it moves between them. */
.kb-lbls{display:flex;flex-wrap:wrap;gap:5px}
.kb-lbl{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 7px;border:1px solid transparent;white-space:nowrap}
button.kb-lbl{font-family:inherit;cursor:pointer;opacity:.5}
button.kb-lbl.on{opacity:1}
button.kb-lbl:hover{opacity:.85}
button.kb-lbl.on:hover{opacity:1}
.kb-lbl.c-gray{background:var(--panel-2);color:var(--text-dim);border-color:var(--border)}
.kb-lbl.c-blue{background:rgba(91,155,255,.14);color:#88b3ff;border-color:rgba(91,155,255,.3)}
.kb-lbl.c-green{background:rgba(34,197,94,.13);color:#5fd98a;border-color:rgba(34,197,94,.28)}
.kb-lbl.c-amber{background:rgba(245,166,35,.13);color:#f5b955;border-color:rgba(245,166,35,.3)}
.kb-lbl.c-red{background:rgba(239,71,87,.13);color:#ff8896;border-color:rgba(239,71,87,.3)}
.kb-lbl.c-purple{background:rgba(139,108,240,.15);color:#b49bff;border-color:rgba(139,108,240,.32)}
.kb-lbl.c-teal{background:rgba(20,184,166,.14);color:#5ad3c4;border-color:rgba(20,184,166,.3)}
.kb-lbl.c-pink{background:rgba(236,72,153,.14);color:#f58ac0;border-color:rgba(236,72,153,.3)}
.kcard .kb-lbls{margin-bottom:8px}
.kb-lblgroup{margin-bottom:12px}
.kb-lblgroup-name{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);margin-bottom:6px}
.kb-lblpick{max-height:210px;overflow-y:auto;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px 13px 2px}

/* Workload: one block per person. Overdue is the only coloured number here,
   because it is the only one that is a problem rather than a quantity. */
.kb-wl-list{display:flex;flex-direction:column;gap:18px;max-width:760px}
.kb-wl{display:block}
.kb-wl-who{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.kb-wl-name{font-size:13.5px;font-weight:500;flex:1;min-width:0}
.kb-wl-num{font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.kb-wl-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--text-mute)}
.kb-wl-over{color:#ff8896;font-weight:600}

/* Portfolio completion bar, inline in the table cell. */
.kb-pf-name{font-weight:500}
.kb-pf-bar{display:inline-block;width:72px;height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:8px}
.kb-pf-fill{display:block;height:100%;background:var(--green);border-radius:4px}

/* Calendar: a plain month grid. Days outside the month recede rather than
   disappear, so the weeks stay readable as weeks. */
.kb-cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.kb-cal-month{font-size:15px;font-weight:600;min-width:150px}
.kb-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.kb-cal-dow{background:var(--panel);padding:9px 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute)}
.kb-cal-cell{background:var(--panel);min-height:104px;padding:7px 8px;display:flex;flex-direction:column;gap:4px}
.kb-cal-cell.out{background:#131419}
.kb-cal-cell.out .kb-cal-day{color:#4a4f5c}
.kb-cal-day{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
/* Today is the only tinted cell: it is a "you are here", the same job the active
   nav item's tint does. */
.kb-cal-cell.today{background:rgba(34,197,94,.07)}
.kb-cal-cell.today .kb-cal-day{color:var(--green);font-weight:700}
.kb-cal-card{display:block;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:4px 7px;font:inherit;font-size:11px;color:var(--text-dim);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-cal-card:hover{background:#23252f;color:var(--text)}
.kb-cal-card.done{text-decoration:line-through;color:var(--text-mute)}

/* Timeline: one bar per card, positioned by percentage across a fixed window. */
.kb-tl{margin-bottom:20px}
.kb-tl-axis{position:relative;height:22px;margin-left:210px;border-bottom:1px solid var(--border);margin-bottom:10px}
.kb-tl-tick{position:absolute;top:2px;font-size:10.5px;color:var(--text-mute);transform:translateX(-50%);white-space:nowrap}
.kb-tl-now{position:absolute;top:0;bottom:-4px;width:2px;background:var(--green)}
.kb-tl-group{margin-bottom:16px}
.kb-tl-groupname{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);margin-bottom:7px}
.kb-tl-row{display:flex;align-items:center;gap:12px;padding:3px 0;cursor:pointer;border-radius:8px}
.kb-tl-row:hover{background:var(--panel-2)}
.kb-tl-name{width:198px;flex:none;font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px}
.kb-tl-track{position:relative;flex:1;height:20px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.kb-tl-bar{position:absolute;top:3px;height:14px;background:var(--blue);border-radius:4px;min-width:6px}
.kb-tl-bar.over{background:var(--red)}
.kb-tl-bar.done{background:var(--green)}
@media(max-width:820px){.kb-tl-name{width:110px}.kb-tl-axis{margin-left:122px}}

/* Dashboard bars are buttons (each one drills into the cards behind it), so they
   need the button chrome stripped back to what .abar already looks like. */
.kb-bar{display:block;width:100%;text-align:left;background:transparent;border:0;padding:6px 8px;margin:0 -8px 6px;border-radius:9px;font:inherit;color:inherit;cursor:pointer;transition:.15s}
.kb-bar:hover{background:var(--panel-2)}
.kb-bar .abar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px}
.kb-bar .abar-track{display:block;height:10px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.kb-bar:hover .abar-track{background:#23252f}
.kb-bar .abar-fill{display:block;height:100%;border-radius:6px}

/* My tasks: due-date buckets, each a flat list of rows. Deliberately not cards -
   this is a queue you read top to bottom, not a board you rearrange. */
.kb-bucket{margin-bottom:22px}
.kb-bucket-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.kb-bucket-name{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mute)}
.kb-bucket-name.overdue{color:#ff8896}
.kb-tasklist{display:flex;flex-direction:column;gap:8px;max-width:900px}
.kb-task{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:12px 14px;cursor:pointer;transition:.15s}
.kb-task:hover{background:var(--panel-2);border-color:#34363f}
.kb-task-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.kb-task-title{font-size:13.5px;font-weight:500}
.kb-task-title.done{color:var(--text-mute);text-decoration:line-through}
.kb-task-where{font-size:11px;color:var(--text-mute)}
.kb-task-meta{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}

/* Filter bar: saved views on top, live filters under. Sits in the page rather
   than behind a button, because a filter you cannot see is one you forget is on
   and then the board looks broken. */
.kb-filterbar{flex:none;display:flex;flex-direction:column;gap:10px;padding:14px 22px 0}
.kb-views,.kb-filterrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-search{flex:0 1 240px;min-width:150px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text);font:inherit;font-size:13px;outline:none}
.kb-search.sm{flex:0 1 130px;min-width:100px}
.kb-search:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.kb-filterrow select{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text-dim);font:inherit;font-size:13px;outline:none;cursor:pointer;max-width:190px}
.kb-filterrow select:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.kb-filter-count{font-size:12px;color:var(--text-mute);font-variant-numeric:tabular-nums}

/* "Also on CSM Board: In Progress" - where else this same card lives. Monochrome
   on purpose: it is a list of places, not a status. */
.kb-also{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;color:var(--text-mute);line-height:1.4}
.kb-also svg{width:12px;height:12px;flex:none}

/* Custom-field values on the card face */
.kb-vals{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kb-val{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-dim);background:var(--panel);border:1px solid var(--border-soft);border-radius:6px;padding:2px 7px}
.kb-val-k{color:var(--text-mute)}

/* Setup + rule editor. Everything below lives inside a modal body. */
.modal.modal-kb{width:min(760px,95vw)}
.kb-modal-body{max-height:min(70vh,620px);overflow-y:auto}
.kb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.kb-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.kb-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.kb-item-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.kb-item-name{font-size:13.5px;font-weight:600}
.kb-item-sub{font-size:11.5px;color:var(--text-mute);line-height:1.45}
.kb-item-tools{display:flex;align-items:center;gap:2px;flex:none}
.kb-item-tools .icon-btn:disabled{opacity:.3;cursor:default}
.kb-flip svg{transform:rotate(180deg)}
.kb-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kb-narrow{max-width:280px}
.kb-none{font-size:12.5px;color:var(--text-mute);padding:11px 13px;border:1px dashed var(--border);border-radius:10px}
.kb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-row>select,.kb-row>input{flex:1 1 150px;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit;font-size:13px;outline:none}
.kb-row>select:focus,.kb-row>input:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.kb-act{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.kb-act .kb-row>select,.kb-act .kb-row>input{background:var(--panel)}
.kb-act-arg{display:flex;flex-direction:column;gap:9px}
.kb-act-arg:empty{display:none}
.kb-note{font-size:11.5px;color:var(--text-mute);line-height:1.5}
.kb-fields{display:flex;flex-direction:column;gap:9px}
.kb-fieldrow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px}
.kb-fieldrow>span{font-size:12.5px;color:var(--text-dim)}
.kb-fieldrow input,.kb-fieldrow select{width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit;font-size:13px;outline:none}
.kb-fieldrow input:focus,.kb-fieldrow select:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
@media(max-width:640px){.kb-fieldrow{grid-template-columns:1fr;align-items:stretch}}

/* Pipeline board/reports toggle */
.pipe-seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:2px}
.pipe-seg button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:7px;cursor:pointer}
.pipe-seg button svg{width:14px;height:14px}
.pipe-seg button.on{background:var(--panel);color:var(--text)}
/* Pipeline reports */
#pipeReports .panel{margin-bottom:16px}
.rep-emp{display:inline-flex;align-items:center;gap:8px}
.rep-pending{color:var(--amber);font-weight:600}
.rep-total td{font-weight:700;border-top:1px solid var(--border)}
.rep-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:16px 18px}
.rep-client{background:var(--card-grad);border:1px solid var(--border);border-radius:12px;padding:15px}
.rep-client-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.rep-client-name{font-weight:600;font-size:14px}
.rep-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:12px 0}
.rep-val{font-size:17px;font-weight:700}
.rep-lbl{font-size:9.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.rep-best{font-size:11.5px;color:var(--text-dim);margin-top:11px;display:flex;align-items:center;gap:6px}
.rep-best svg{width:13px;height:13px;color:var(--green);flex:none}
.rep-client{cursor:pointer}
.rep-client:hover{border-color:#333646}
.rep-client-head svg{width:15px;height:15px;color:var(--text-mute);margin-left:auto;flex:none}
/* Client content dashboard: monthly views bar chart */
.pbar{display:flex;align-items:stretch;gap:14px;height:190px;padding:8px 4px 0}
.pbar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.pbar-val{font-size:11px;color:var(--text-mute);font-weight:600}
.pbar-track{width:100%;max-width:52px;flex:1;display:flex;align-items:flex-end;background:var(--panel-2);border-radius:7px;overflow:hidden}
.pbar-fill{width:100%;background:var(--green);border-radius:7px 7px 0 0;min-height:3px}
.pbar-lbl{font-size:10.5px;color:var(--text-mute)}
/* Posting plan modal */
.plan-client{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px}
.plan-client-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.plan-client-name{font-weight:600;font-size:14px}
.plan-client-sum{margin-left:auto;font-size:11.5px;color:var(--text-mute);background:var(--panel-2);border-radius:20px;padding:2px 10px}
.plan-accounts{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.plan-acct{display:flex;align-items:center;gap:9px}
.plan-acct.off{opacity:.5}
.plan-acct-plat{flex:0 0 84px;font-size:12px;font-weight:600;color:var(--text-dim)}
.plan-in{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:12.5px;padding:6px 9px;outline:none}
.plan-in:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.plan-acct .plan-in[data-f="account_label"]{flex:1;min-width:0}
.plan-qty{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-mute)}
.plan-qty .plan-in{width:56px;text-align:center}
.plan-active{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-mute);white-space:nowrap}
.plan-add{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--border);padding-top:10px}
.plan-add .plan-in[data-na-label]{flex:1;min-width:0}
.btn-ghost.xs,.btn-primary.xs{font-size:12px;padding:6px 10px}

/* ===================== CLIENT HOME (single-screen portal) ===================== */
.home-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.home-grid .panel{margin-bottom:0}
.home-chat{display:flex;flex-direction:column;height:520px}
.home-chat .panel-head{gap:12px}
.home-chat .panel-head .muted{flex:none;white-space:nowrap}
.home-chat .thread{flex:1;padding:18px 18px 8px;gap:16px}
.home-chat .composer{padding:12px 16px 14px}
.home-rail{display:flex;flex-direction:column;gap:16px}
.rail-list{display:flex;flex-direction:column}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.rail-list .acct-row:last-child{border-bottom:0}
.acct-name{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:500}
.acct-name svg{width:15px;height:15px;color:var(--text-mute);flex:none}
.acct-figs{color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-figs b{color:var(--text)}
button.rep-row{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-soft);cursor:pointer;text-align:left;font:inherit;transition:.12s}
button.rep-row:hover{background:#1b1d24}
.rail-empty{padding:16px 18px;color:var(--text-mute);font-size:13px}
@media (max-width:900px){.home-grid{grid-template-columns:1fr}.home-chat{height:440px}}

/* sidebar-less client portal: dashboard is the whole app, account lives in the profile */
.app.client-portal{grid-template-columns:1fr}
.app.client-portal .sidebar{display:none}

/* client profile: collapsed = avatar; open = name/email + Settings + Logout, revealed horizontally */
.client-profile{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.cp-panel{display:flex;align-items:center;gap:12px;max-width:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-width .26s ease,opacity .18s ease}
.client-profile.open .cp-panel{max-width:560px;opacity:1;pointer-events:auto}
.cp-id{text-align:right;white-space:nowrap;line-height:1.25}
.cp-name{font-size:13.5px;font-weight:600;color:var(--text)}
.cp-email{font-size:12px;color:var(--text-mute)}
.cp-panel .btn-sm{white-space:nowrap}
.cp-avatar{background:transparent;border:0;padding:0;cursor:pointer;line-height:0;flex:none;border-radius:50%}
.cp-avatar:focus-visible{outline:none;box-shadow:var(--ring)}

/* ===================== ZOOM MEETING CARD ===================== */
.meet-card{display:flex;align-items:center;gap:13px;margin-top:11px;background:var(--panel-2);border:1px solid var(--border);border-radius:13px;padding:13px 15px;max-width:440px}
.meet-ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(45,140,255,.18);color:#7fb0ff}
.meet-ico svg{width:20px;height:20px}
.meet-info{flex:1;min-width:0}
.meet-topic{font-weight:600;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meet-when{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-mute);margin-top:3px}
.meet-when svg{width:12px;height:12px}
.meet-demo{color:var(--amber)}
.meet-join{display:inline-flex;align-items:center;gap:6px;flex:none;background:#2d6fe0;color:#fff;text-decoration:none;font-weight:600;font-size:13px;border-radius:9px;padding:8px 15px;transition:.15s}
.meet-join:hover{background:#3d80f0}
.meet-join svg{width:15px;height:15px}
.meet-note{display:flex;gap:9px;align-items:flex-start;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.28);color:#f5c97a;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin-bottom:14px}
.meet-note svg{width:16px;height:16px;flex:none;margin-top:1px}
.meet-note code{background:rgba(0,0,0,.3);border-radius:4px;padding:1px 5px;font-size:11.5px}
.meet-note.ok{background:rgba(43,180,98,.1);border-color:rgba(43,180,98,.3);color:#7ee0a3}
.meet-note .btn-sm{margin-left:auto;flex:none;align-self:center;white-space:nowrap}

/* responsive */
@media(max-width:980px){
  .auth{grid-template-columns:1fr}.auth-left{display:none}.auth-foot.compact{display:flex}
  .auth-right{align-content:center;gap:22px}
  .app{--nav-w:68px}
  .brand-name,.nav-item span:not(.ico):not(.nav-badge),.nav-section,.me-meta,.nav-toggle span:not(.ico),#logoutBtn{display:none}
  .brand{justify-content:center;overflow:hidden;gap:0}.brand-logo{height:22px}
  .brand-logo.full{max-width:0;opacity:0}.brand-logo.icon{max-width:44px;opacity:1}
  .nav-item,.nav-toggle,.me{justify-content:center}.nav-badge{position:absolute;top:4px;right:4px}
  .nav-item{position:relative}
  .stat-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}.mini-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===================== AUTOMATIONS ===================== */
.auto-list{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.auto-card{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.auto-card:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.auto-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.12);color:var(--text-mute);flex-shrink:0}
.auto-ico svg{width:18px;height:18px}
.auto-ico.on{background:rgba(34,197,94,.16);color:var(--green)}
.auto-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:2px 9px;vertical-align:1px;margin-left:6px}
.auto-pill.live{background:rgba(34,197,94,.14);color:var(--green)}
.auto-pill.live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse-dot 1.8s ease infinite}
.auto-pill.off{background:rgba(154,160,173,.12);color:var(--text-dim)}
.auto-pill.draft{background:rgba(245,166,35,.14);color:var(--amber)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
.auto-main{flex:1;min-width:0}
.auto-name{font-weight:600;font-size:14.5px;margin-bottom:3px}
.auto-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px}
.auto-lastrun{font-size:11.5px;color:var(--text-mute);margin-top:4px;display:flex;align-items:center;gap:6px}
.run-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.auto-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.auto-actions .icon-btn{width:30px;height:30px}

.auto-runs{color:#5b9bff;font-size:12px;font-weight:500}
.auto-menu-wrap{position:relative}
/* draft marker: rectangular with a soft bevel (not a pill) */
.auto-pill.draft{border-radius:5px;text-transform:none;letter-spacing:0;padding:2px 8px}

/* new-automation choice modal */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.choice-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:24px 16px;cursor:pointer;transition:border-color .15s}
.choice-card:hover{border-color:var(--accent)}
.choice-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.12);color:var(--accent)}
.choice-ico svg{width:19px;height:19px;fill:currentColor;stroke:none}
.choice-title{font-weight:600;font-size:14.5px;color:var(--text)}
@media(max-width:560px){.choice-grid{grid-template-columns:1fr}}

/* template picker: a scrollable grid of template boxes */
.modal.modal-tpl{width:min(860px,94vw)}
.modal.modal-tpl .modal-body{max-height:min(66vh,560px);overflow-y:auto}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:6px}

/* automation folders (navigate in and out, like files on a computer) */
.ph-actions{display:flex;align-items:center;gap:12px}
.auto-ico.folder-ico{background:rgba(99,102,241,.12);color:var(--accent)}
.folder-row{cursor:pointer}
/* breadcrumb trail: "All automations / Parent / Child" */
.folder-crumb{display:flex;align-items:center;gap:3px;min-width:0;flex-wrap:wrap}
.crumb-link{background:none;border:0;cursor:pointer;color:var(--text-mute);font-size:14.5px;font-weight:600;padding:2px 6px;border-radius:6px}
.crumb-link:hover{color:var(--text);background:var(--bg-hover)}
.crumb-link.cur{color:var(--text)}
.crumb-sep{color:var(--text-mute);font-size:13px}

.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:14px 16px}
.recipe-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s;text-align:left;font:inherit;color:var(--text);width:100%;cursor:pointer}
.recipe-card:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.recipe-ico{width:34px;height:34px;border-radius:9px;background:rgba(99,102,241,.12);color:var(--accent);display:flex;align-items:center;justify-content:center}
.recipe-ico svg{width:17px;height:17px}
.recipe-name{font-weight:600;font-size:14px}
.recipe-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5;flex:1}
.recipe-card .btn-sm{align-self:flex-start}

.switch.big{transform:scale(1.05)}

/* ============================================================
   FULL-SCREEN BUILDER
   ============================================================ */
.builder-screen{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;animation:fade .18s ease}
.bs-bar{display:flex;align-items:center;gap:16px;padding:11px 18px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}
.bs-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.bs-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-sub{font-size:12px;color:var(--text-mute)}
.bs-seg{display:flex;gap:4px;margin-left:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:3px}
.bs-seg button{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-dim);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:7px;cursor:pointer}
.bs-seg button svg{width:14px;height:14px}
.bs-seg button.active{background:var(--accent);color:#fff}
.bs-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.bs-body{flex:1;display:flex;min-height:0;position:relative}

/* ---- canvas ---- */
.canvas-wrap{flex:1;position:relative;overflow:hidden;cursor:grab;
  background-color:#0c0d11;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 1.4px, transparent 1.4px);
  background-size:24px 24px}
.canvas-wrap.panning{cursor:grabbing}
.canvas-pan{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.connectors{position:absolute;left:0;top:0;width:4000px;height:4000px;overflow:visible;pointer-events:none}
.connectors path{fill:none;stroke:#3a3d4d;stroke-width:2.5}
.node{position:absolute;width:248px;background:var(--panel-1,#16171d);border:1px solid var(--border);border-radius:13px;padding:13px 15px;cursor:grab;user-select:none;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:border-color .12s,box-shadow .12s}
.node:hover{border-color:#3a3d52}
.node.sel{border-color:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.node.trigger{border-color:rgba(99,102,241,.5)}
/* Node type (trigger / condition / action) is already colour-coded on .node-ico
   below, so the 3px left edge these used to carry was the same signal twice. */
.node-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.node-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(99,102,241,.14);color:var(--accent)}
.node-ico svg{width:14px;height:14px}
.node-ico.cond{background:rgba(245,166,35,.14);color:var(--amber)}
.node-ico.act{background:rgba(34,197,94,.14);color:var(--green)}
.node-kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute)}
.node-kind.trig{color:var(--accent)}.node-kind.cond{color:var(--amber)}.node-kind.act{color:var(--green)}
.node-num{margin-left:auto;font-size:10px;font-weight:700;color:var(--text-mute);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.node-title{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-port{position:absolute;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#3a3d4d;border:2px solid var(--bg)}
.node-port.in{top:-5px}.node-port.out{bottom:-5px}
/* dotted placeholder shown until a trigger is chosen */
.node.trigger.placeholder{border-style:dashed;border-color:#3a3d52;background:transparent;box-shadow:none;cursor:pointer;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.node.trigger.placeholder:hover,.node.trigger.placeholder.sel{border-color:var(--accent);box-shadow:none}
.node.trigger.placeholder .node-kind{color:var(--text-mute)}
.ph-add{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text-dim)}
.ph-add svg{width:16px;height:16px;fill:currentColor;stroke:none}
.node.trigger.placeholder:hover .ph-add{color:var(--text)}
.canvas-add{position:absolute;left:18px;bottom:18px;display:flex;gap:8px;z-index:5}
.canvas-ro{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:7px;color:var(--amber);font-size:12.5px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:9px;padding:7px 12px}
.canvas-ro svg{width:14px;height:14px}
.canvas-hint{position:absolute;right:16px;bottom:16px;font-size:11.5px;color:var(--text-mute);pointer-events:none}

/* ---- inspector ---- */
.inspector{width:320px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);padding:18px;overflow-y:auto}
.insp-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim)}
.insp-head svg{width:15px;height:15px}
.insp-head.condition{color:var(--amber)}.insp-head.action{color:var(--green)}
.insp-head #iDel{margin-left:auto}
.insp-hint{font-size:12.5px;color:var(--text-mute);line-height:1.6;margin-top:6px}
.inspector .field{margin-bottom:13px}
.inspector textarea{background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13.5px;padding:9px 11px;font-family:inherit;resize:vertical;width:100%;box-sizing:border-box;color-scheme:dark}

/* ---- runs drawer ---- */
.runs-drawer{position:absolute;right:0;top:0;bottom:0;width:340px;background:var(--panel);border-left:1px solid var(--border);z-index:20;box-shadow:-12px 0 32px rgba(0,0,0,.4);display:flex;flex-direction:column}
.rd-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.rd-head h3{font-size:14px}

/* ---- linear mode (full screen) ---- */
.linear-scroll{flex:1;overflow-y:auto;padding:34px 22px;display:flex;justify-content:center}
.linear-scroll .bld-flow{width:100%;max-width:680px}

/* ---- shared linear flow ---- */
.bld-flow{display:flex;flex-direction:column;align-items:stretch}
.trigger-card,.step-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.trigger-card{border-color:rgba(99,102,241,.5)}
.flow-line{width:2px;height:18px;background:var(--border);margin:0 0 0 30px}
.step-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:9px;color:var(--text-mute)}
.step-tag svg{width:13px;height:13px}
.step-tag.trig{color:var(--accent)}.step-tag.cond{color:var(--amber)}.step-tag.act{color:var(--green)}
.trigger-card select,.act-type,.cond-row select,.cond-row input,.pp select,.pp input{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:9px 11px;color:var(--text);font-size:13.5px;font-family:inherit;color-scheme:dark}
.trigger-card select,.act-type{width:100%}
#stepList{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.step-card{display:flex;align-items:flex-start;gap:10px;position:relative}
.step-card.dragging{opacity:.4}
.step-card.drop-target{border-color:var(--accent)}
/* .step-card is a transparent, borderless flex row, so a coloured left border was
   a stripe floating in space. The step's type is already named and colour-coded
   by .step-tag.cond / .step-tag.act above. */
.step-grip{color:var(--text-mute);cursor:grab;padding-top:2px}
.step-grip svg{width:16px;height:16px}
.step-body{flex:1;min-width:0}
.cond-row{display:flex;gap:8px;flex-wrap:wrap}
.cond-row select.op{flex:0 0 70px}
.cond-row input{flex:1;min-width:90px}
.act-params{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.pp{display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.pp.wide{flex:1 1 100%}
.pp-label{color:var(--text-mute);text-transform:capitalize}
.pp.wide input{width:100%}
/* delete controls: the icon itself is red, the button stays quiet */
.step-del{background:none;border:none;color:var(--red);opacity:.75;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;transition:.15s}
.step-del svg{width:15px;height:15px}
.step-del:hover{opacity:1;background:rgba(239,71,87,.12)}
.icon-btn.danger{border:none;background:none;color:var(--red);opacity:.8}
.icon-btn.danger:hover{opacity:1;background:rgba(239,71,87,.12);color:var(--red)}
.add-step-row{display:flex;gap:10px}
.run-panel{margin-top:22px}
.run-log{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.run-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.run-status{font-weight:600;text-transform:capitalize}
.ro-banner{display:flex;align-items:center;gap:9px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:var(--amber);border-radius:11px;padding:11px 15px;font-size:13px;margin-bottom:16px}
.ro-banner svg{width:16px;height:16px;flex-shrink:0}

/* ---- run log expandable steps ---- */
.run-row{cursor:pointer;border-radius:9px;padding:4px 8px;transition:background .15s}
.run-row summary{display:flex;align-items:center;gap:9px;font-size:12.5px;list-style:none;outline:none}
.run-row summary::-webkit-details-marker{display:none}
.run-row:hover>summary{background:var(--bg-hover)}
.run-steps{padding:8px 8px 4px 28px;display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--border);margin-left:8px;margin-top:4px}
.run-step-row{display:flex;align-items:baseline;gap:8px;font-size:11.5px}
.run-step-name{font-weight:600;min-width:7rem}
.run-step-out{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22rem}
.run-err{color:var(--red)}

/* ---- branch node ports ---- */
.node-ports-row{display:flex;justify-content:space-between;padding:0 6px;margin-top:8px}
.node-port.out-yes,.node-port.out-no{position:static;transform:none;width:auto;height:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 10px;border-radius:99px;display:flex;align-items:center;justify-content:center;cursor:default}
.node-port.out-yes{background:rgba(34,197,94,.16);color:#22c55e;border:1px solid rgba(34,197,94,.4)}
.node-port.out-no{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.4)}

/* ---- setup guide (playthrough stepper) ---- */
.bs-guide{display:flex;align-items:center;gap:2px;margin-left:10px;flex:none}
.guide-step{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--text-mute);font-size:12px;font-weight:600;padding:6px 9px;border-radius:9px;cursor:pointer;transition:.15s;font-family:inherit}
.guide-step:hover{background:var(--bg-hover,#1e2029);color:var(--text)}
.guide-dot{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);flex:none}
.guide-dot svg{width:11px;height:11px;fill:currentColor;stroke:none}
.guide-step.done .guide-dot{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:var(--green)}
.guide-step.done{color:var(--text-dim)}
.guide-step.active{color:var(--text)}
.guide-step.active .guide-dot{background:rgba(99,102,241,.18);border-color:var(--accent);color:var(--accent)}
.guide-sep{width:14px;height:1px;background:var(--border);flex:none}
@media(max-width:1180px){.guide-lbl{display:none}.guide-sep{width:8px}}

/* ---- canvas empty state ---- */
.canvas-empty{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:30px 38px;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:6;max-width:400px}
.canvas-empty .ce-ico{width:44px;height:44px;border-radius:12px;background:rgba(99,102,241,.15);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.canvas-empty .ce-ico svg{width:20px;height:20px;fill:currentColor;stroke:none}
.canvas-empty h3{font-size:16px;margin-bottom:8px}
.canvas-empty p{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:18px}
.canvas-empty .ce-btns{display:flex;gap:10px;justify-content:center}

/* ---- inspector extras ---- */
.insp-note{font-size:12px;color:var(--text-mute);line-height:1.55;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:9px;padding:9px 11px;margin-bottom:13px}
.branch-box{border:1px solid var(--border);border-radius:11px;padding:11px 12px;margin-bottom:11px;background:var(--panel-2)}
.branch-box.pass{border-color:rgba(34,197,94,.3)}
.branch-box.fail{border-color:rgba(239,68,68,.28)}
.branch-lbl{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.branch-box.pass .branch-lbl{color:#4ade80}
.branch-box.fail .branch-lbl{color:#f87171}
.branch-dot{width:7px;height:7px;border-radius:50%;flex:none}
.branch-dot.pass{background:#22c55e}.branch-dot.fail{background:#ef4444}
.branch-box select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:8px 10px;color:var(--text);font-size:13px;font-family:inherit;color-scheme:dark}

/* ---- picker upgrades ---- */
.cat-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}
.pick-group-h{display:flex;align-items:center}
.pick-item{align-items:flex-start}
.pick-item .pick-ico{width:28px;height:28px;border-radius:8px;background:var(--panel-2)}
.pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-desc{font-size:11.5px;color:var(--text-mute);line-height:1.45}

/* ---- new-automation wizard ---- */
.wiz-steps{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wiz-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);flex:none}
.wiz-dot.on{background:rgba(99,102,241,.18);border-color:var(--accent);color:var(--accent)}
.wiz-dot.done{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:var(--green)}
.wiz-dot svg{width:12px;height:12px;fill:currentColor;stroke:none}
.wiz-line{width:26px;height:1.5px;background:var(--border);flex:none}
.wiz-line.on{background:var(--accent)}
.wiz-trig{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.wiz-trig .pick-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.wiz-trig .pick-ico svg{width:16px;height:16px;fill:currentColor;stroke:none}
.wiz-trig>div{flex:1;min-width:0}
.wiz-trig-lbl{font-weight:600;font-size:13.5px}
.wiz-trig-desc{font-size:11.5px;color:var(--text-mute);line-height:1.45;margin-top:2px}
.wiz-next-hint{font-size:12px;color:var(--text-mute);line-height:1.55;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:9px;padding:9px 11px;margin-top:4px}

/* ---- linear extras ---- */
.step-note{font-size:11.5px;color:var(--text-mute);margin-top:8px;line-height:1.5}
.linear-empty{text-align:center;color:var(--text-mute);font-size:13px;padding:22px 0}
.step-card.flash{border-color:var(--accent);transition:border-color .3s}
.step-tag svg{width:13px;height:13px;fill:currentColor;stroke:none}

/* ---- connector SVG ---- */
#connectors path{fill:none;stroke-width:2;stroke:var(--border-mid)}

/* ---- webhook panel ---- */
.webhook-panel{margin:4px 0 8px;padding:10px 14px;background:var(--bg-code,var(--sidebar));border-radius:10px;border:1px solid var(--border)}
.field-label{font-size:12px;color:var(--text-mute);display:block;margin-bottom:4px}
.webhook-url-box{font-size:11.5px;word-break:break-all;margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.webhook-url-code{font-family:monospace;background:var(--bg-hover);padding:4px 8px;border-radius:6px;font-size:11px;user-select:all}
.btn-xs{font-size:11px;padding:2px 8px;border-radius:6px}

/* ---- cron panel ---- */
.cron-panel{margin:4px 0 8px;padding:10px 14px;background:var(--sidebar);border-radius:10px;border:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.cron-panel .btn-sm{align-self:flex-start;margin-top:4px}

/* ---- integrations page ---- */
.integ-grid{display:flex;flex-direction:column;gap:10px;padding:20px 28px;max-width:800px}
.integ-card{display:flex;align-items:center;gap:14px;background:var(--sidebar);border:1px solid var(--border);border-radius:14px;padding:14px 18px}
.integ-icon{width:40px;height:40px;border-radius:11px;background:var(--panel-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-dim);flex-shrink:0}
.integ-icon svg{width:19px;height:19px;fill:currentColor;stroke:none}
.integ-icon img{width:20px;height:20px;object-fit:contain}
.integ-modal .modal-head h3{display:flex;align-items:center;gap:10px}
.mh-ico{width:24px;height:24px;display:grid;place-items:center;color:var(--text-dim);flex:none}
.mh-ico svg{width:20px;height:20px;fill:currentColor;stroke:none}
.mh-ico img{width:20px;height:20px;object-fit:contain}
.integ-info{flex:1;min-width:0}
.integ-name{font-weight:600;font-size:14px}
.integ-desc{font-size:12px;margin-top:1px}
.integ-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--bg-hover);color:var(--text-mute);margin-top:4px;display:inline-block}
.integ-badge.ok{background:rgba(34,197,94,.15);color:#22c55e}
.integ-cfg-btn{flex-shrink:0}
.integ-modal{max-width:480px;width:92vw;border-radius:18px;padding:0;background:var(--sidebar);border:1px solid var(--border)}
.integ-modal .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.integ-modal .modal-head h3{margin:0;font-size:16px}
.integ-modal .modal-body{padding:20px 20px 8px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.integ-modal .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--border)}
/* A non-secret setting on an integration, sat below its credential fields. Same
   row geometry as the rest of the app (12-14px padding, 10px radius) and no
   tinted fill: this is a setting, not the section you are on. */
.integ-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border)}
.integ-toggle .it-lbl{font-weight:600;font-size:13px}
.integ-toggle .it-hint{font-size:11.5px;line-height:1.5;margin-top:3px}
.integ-toggle .switch{margin-top:2px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999}
.modal-overlay.hidden{display:none}
.btn-danger{background:rgba(239,71,87,.15);color:var(--red);border:1px solid rgba(239,71,87,.3)}
.btn-danger:hover{background:rgba(239,71,87,.25)}

/* ===================== CRM: CONTACTS / LEADS ===================== */
.tag-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#a3a6f5;background:rgba(99,102,241,.13);border:1px solid rgba(99,102,241,.28);border-radius:20px;padding:2px 9px;margin:1px 2px 1px 0}
.tag-chip.lg{font-size:12px;padding:4px 11px}
.tag-x{cursor:pointer;color:var(--text-mute);font-weight:700;margin-left:2px;line-height:1}
.tag-x:hover{color:var(--red)}
.crm-form{background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:10px}
.crm-form-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.crm-form .kv{margin-bottom:6px}
.crm-form .kv .k{width:auto;min-width:90px}

/* Forms (CRM): form-list row icon + stacked question/answer in the drawer */
.form-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);flex:none}
.form-ico svg{width:16px;height:16px}
/* Q&A is stacked, not a 90px key/value: questions and answers are both long. */
.qa-item{padding:11px 0;border-bottom:1px solid var(--border-soft)}
.qa-item:last-child{border-bottom:0;padding-bottom:0}
.qa-q{font-size:12.5px;color:var(--text-mute);line-height:1.5;margin-bottom:5px}
.qa-q b{color:var(--text-dim);font-weight:600;margin-right:6px;font-variant-numeric:tabular-nums}
.qa-a{font-size:13.5px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.qa-a.empty{color:var(--text-mute);font-style:italic}

/* ===================== AI ASSISTANT ===================== */
.ai-tabs{display:flex;gap:8px;padding:0 22px;margin-bottom:14px;flex-wrap:wrap}
.ai-tab{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.15s}
.ai-tab:hover{color:var(--text)}
.ai-tab.active{background:var(--green);color:#0a0f0c;border-color:var(--green)}
.ai-switch{display:flex;align-items:center;gap:8px}
.ai-switch-lbl{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.ai-switch-sel{position:relative;display:inline-flex;align-items:center}
.ai-switch-sel select{appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--border);color:var(--text);font:inherit;font-size:13px;font-weight:600;padding:8px 34px 8px 14px;border-radius:10px;cursor:pointer;transition:.15s}
.ai-switch-sel select:hover{border-color:var(--green)}
.ai-switch-sel svg{position:absolute;right:10px;width:16px;height:16px;pointer-events:none;color:var(--text-dim)}
.ai-wrap{flex:1;display:flex;flex-direction:column;min-height:0;padding:0}
.ai-wrap .meet-note{margin:16px 22px 0}
.ai-scroll{flex:1;overflow-y:auto;padding:24px 22px 8px;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;scrollbar-color:#2a2c36 transparent}
.ai-scroll::-webkit-scrollbar{width:8px}
.ai-scroll::-webkit-scrollbar-thumb{background:#2a2c36;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.ai-row{display:flex;gap:12px;max-width:820px;width:100%;margin:0 auto;animation:fade .3s ease}
.ai-row.user{justify-content:flex-end}
.ai-ava{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(34,197,94,.14);color:var(--green)}
.ai-ava svg{width:17px;height:17px;fill:currentColor;stroke:none}
.ai-bubble{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 16px;font-size:14px;line-height:1.55;color:#dcdfe7;max-width:calc(100% - 46px)}
.ai-bubble.user{background:#1f9d55;color:#fff;border:0;border-bottom-right-radius:5px}
.ai-bubble p{margin:0 0 8px}.ai-bubble p:last-child{margin:0}
.ai-bubble ul{margin:4px 0 8px;padding-left:18px}.ai-bubble li{margin:3px 0}
.ai-bubble b{color:#fff;font-weight:700}
.ai-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ai-action{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.ai-action svg{width:15px;height:15px;fill:currentColor;stroke:none}
.ai-action:hover{border-color:var(--green);color:#fff}
.ai-typing{display:inline-flex;gap:4px;padding:2px 0}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-mute);animation:aiblink 1.2s infinite ease-in-out}
.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes aiblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* empty / welcome */
.ai-empty{max-width:560px;margin:auto;text-align:center;padding:30px 20px}
.ai-empty-ico{width:60px;height:60px;margin:0 auto 16px;border-radius:17px;display:grid;place-items:center;background:rgba(34,197,94,.14);color:var(--green)}
.ai-empty-ico svg{width:30px;height:30px;fill:currentColor;stroke:none}
.ai-empty-title{font-size:20px;font-weight:700;margin-bottom:8px}
.ai-empty-sub{color:var(--text-dim);font-size:14px;line-height:1.6;margin-bottom:22px}
.ai-suggest{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.ai-chip{background:var(--panel);border:1px solid var(--border);color:var(--text-dim);font:inherit;font-size:13px;text-align:left;padding:11px 14px;border-radius:11px;cursor:pointer;transition:.15s}
.ai-chip:hover{border-color:#34363f;color:var(--text);background:var(--panel-2)}
/* composer */
.ai-composer{flex:none;display:flex;align-items:flex-end;gap:10px;margin:0 auto;width:100%;max-width:820px;padding:14px 22px 20px;position:relative}
.ai-composer textarea{flex:1;resize:none;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:13px 16px;color:var(--text);font:inherit;font-size:14px;line-height:1.5;outline:none;max-height:140px;transition:.15s}
.ai-composer textarea:focus{border-color:var(--ring-border);box-shadow:var(--ring)}
.ai-composer .send-btn{margin-bottom:2px}

/* ===================== DIVISIONS =====================
   Each division carries one accent colour, used on the selection card, the
   sidebar chip and the switcher, so a glance at the sidebar tells you which
   portal you are standing in. */
.dv-blue  {--dv:#5b9bff}
.dv-green {--dv:#22c55e}
.dv-amber {--dv:#f5a623}
.dv-purple{--dv:#8b6cf0}

/* ---- selection screen (multiple division tags) ---- */
.picker{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#1a1c26,var(--bg));padding:32px;overflow:auto;z-index:40}
.picker-inner{width:100%;max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.picker h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:10px}
.picker-sub{color:var(--text-dim);max-width:480px;line-height:1.6}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;width:100%;margin-top:18px}
.picker-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:20px;border-radius:var(--radius);cursor:pointer;
  background:var(--card-grad);border:1px solid var(--border);color:var(--text);font:inherit;transition:.18s;position:relative}
/* Hover raises the surface and greens the icon. No tinted fill: the tint block is
   reserved for the active nav item. No lift, no glow. */
.picker-card:hover{border-color:#3a3d4a;background:var(--panel-2)}
.picker-card:hover .pc-ico{color:var(--green)}
.picker-card:disabled{opacity:.5;cursor:default}
.picker-card .pc-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:transparent;border:0;color:var(--text-dim);transition:.15s}
.picker-card .pc-ico svg{width:19px;height:19px}
.picker-card .pc-name{font-weight:700;font-size:16px}
.picker-card .pc-tag{font-size:12.5px;color:var(--text-mute);line-height:1.45}
.linkish{background:none;border:0;color:var(--text-mute);cursor:pointer;font:inherit;font-size:13px;margin-top:22px;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--text-dim)}

/* ---- agency overview (admin landing) ----
   Cards are destinations, so they follow the picker rules: flat surface, accent
   on the icon at hover, no tinted fill, no lift, no glow. Numbers are plain text;
   only overdue takes a colour, because overdue IS a status. */
.overview{position:fixed;inset:0;overflow:auto;background:radial-gradient(1200px 600px at 50% -10%,#1a1c26,var(--bg));padding:40px 32px;z-index:40}
.ov-inner{max-width:960px;margin:0 auto}
.ov-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.ov-head .linkish{margin-top:0}
.overview h1{font-size:30px;font-weight:800;letter-spacing:-.5px}
.ov-sub{color:var(--text-dim);margin-top:6px;line-height:1.6}
.ov-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0 30px}
.ov-stat{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.ov-stat-val{font-size:26px;font-weight:700;letter-spacing:-.5px}
.ov-stat-val.warn{color:var(--red)}
.ov-stat-label{font-size:12px;color:var(--text-mute);margin-top:3px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ov-card{display:flex;flex-direction:column;gap:14px;text-align:left;padding:20px;border-radius:var(--radius);cursor:pointer;
  background:var(--card-grad);border:1px solid var(--border);color:var(--text);font:inherit;transition:.18s}
.ov-card:hover{border-color:#3a3d4a;background:var(--panel-2)}
.ov-card:hover .ov-card-ico{color:var(--green)}
.ov-card:hover .ov-card-open{color:var(--text)}
.ov-card-head{display:flex;align-items:center;gap:12px}
.ov-card-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:transparent;color:var(--text-dim);flex:none;transition:.15s}
.ov-card-ico svg{width:20px;height:20px}
.ov-card-title{display:flex;flex-direction:column;min-width:0}
.ov-card-name{font-weight:700;font-size:17px}
.ov-card-tag{font-size:12px;color:var(--text-mute);line-height:1.4}
.ov-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ov-card-stats span{font-size:13px;color:var(--text-dim)}
.ov-card-stats b{color:var(--text);font-weight:700;margin-right:3px}
.ov-card-stats .warn b,.ov-card-stats span.warn{color:var(--red)}
.ov-card-open{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--text-mute);transition:.15s}
.ov-card-open svg{width:14px;height:14px}

/* ---- sidebar chip: which portal am I in ----
   NO tinted fill. The green tint block is reserved for the ACTIVE nav item and
   means "the section you are on". Giving the chip the same fill made it read as
   a second active item, which is unreadable once the sidebar collapses to icons.
   The chip carries its accent on the icon alone. */
.division-chip{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 2px;padding:9px 10px;border-radius:10px;cursor:default;text-align:left;
  background:transparent;border:0;color:var(--text);font:inherit;transition:.15s}
.division-chip.switchable{cursor:pointer}
.division-chip.switchable:hover{background:#1e2029}
.division-chip .dc-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:transparent;border:0;color:var(--green);flex:none}
.division-chip .dc-ico svg{width:15px;height:15px}
.division-chip .dc-text{display:flex;flex-direction:column;min-width:0;flex:1}
.division-chip .dc-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.division-chip .dc-sub{font-size:10.5px;color:var(--text-mute);letter-spacing:.3px}
.division-chip .dc-caret{color:var(--text-mute);flex:none;transform:rotate(90deg)}
.division-chip .dc-caret svg{width:14px;height:14px}
.app.nav-collapsed .division-chip{justify-content:center;padding:9px 0}
.app.nav-collapsed .division-chip .dc-text,
.app.nav-collapsed .division-chip .dc-caret{display:none}

/* ---- switcher modal ----
   Deliberately monochrome: the rows are a list of destinations, not status, so
   colour would be decoration. Selection is carried by border and weight instead. */
.switch-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.switch-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;cursor:pointer;text-align:left;width:100%;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);font:inherit;transition:.15s}
.switch-row:hover{border-color:#3a3d4a;background:#1f222a}
/* The division you are already in: no tinted fill (that block means "active nav
   section"). The green icon and the CURRENT label carry it. */
.switch-row.current{border-color:#3f4351}
.switch-row.current .sr-ico,
.switch-row.current .sr-current{color:var(--green)}
.switch-row .sr-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:transparent;border:0;color:var(--text-dim);flex:none;transition:.15s}
.switch-row .sr-ico svg{width:16px;height:16px}
.switch-row .sr-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.switch-row .sr-name{font-weight:600;font-size:14px}
.switch-row .sr-tag{font-size:12px;color:var(--text-mute);line-height:1.4}
.switch-row .sr-current{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-mute);flex:none}

/* ---- division tag pickers (Directory member modal) ----
   A multi-select of tags, not a status: monochrome. Selection is carried by the
   filled dot and the brighter border, not by a colour per division. */
.dv-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.dv-opt{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);transition:.15s;user-select:none}
.dv-opt:hover{border-color:#3a3d4a;color:var(--text)}
.dv-opt input{display:none}
.dv-opt .dv-dot{width:9px;height:9px;border-radius:50%;background:var(--text-mute);opacity:.5;transition:.15s;flex:none}
.dv-opt.on{background:var(--panel-2);border-color:#3f4351;color:var(--text)}
.dv-opt.on .dv-dot{opacity:1;background:var(--green)}

/* ===== Client onboarding =====
   The 40-question form the client fills in on first login. Monochrome by
   default: the only colour is the green progress fill and the tick on a chosen
   option, both of which mean "this is done". */
.ob-wrap{max-width:760px;margin:0 auto}
.ob-track{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.ob-step{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;background:none;
  border:1px solid var(--border);color:var(--text-dim);font-size:12.5px;cursor:pointer;transition:.12s}
.ob-step:hover{background:var(--panel-2);color:var(--text)}
.ob-step.active{background:rgba(34,197,94,.10);border-color:transparent;color:#fff}
.ob-step-n{width:18px;height:18px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;
  font-size:11px;font-weight:600;flex:none}
.ob-step.active .ob-step-n{background:var(--green);color:#0b0d10}
/* A section the client has started. Marked on the number only - the tinted fill
   is reserved for the section they are actually on. */
.ob-step.done:not(.active) .ob-step-n{color:var(--green)}
.ob-meter{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ob-bar{width:100%;flex:1}
.ob-qs{padding:18px 18px 6px}
.ob-q{margin-bottom:22px}
.ob-q>span{font-size:14px;color:var(--text);line-height:1.45;margin-bottom:4px}
.ob-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--panel-2);
  color:var(--text-mute);font-size:11.5px;font-weight:600;margin-right:8px;vertical-align:2px}
.ob-hint{font-size:12.5px;line-height:1.5;margin:0 0 9px}
.ob-opts{max-height:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
/* Give the unselected options a visible edge (the picker's default is a
   transparent border). Scoped off .sel so it cannot flatten the accent border
   that marks a chosen option. */
.ob-opts .pick-item:not(.sel){border-color:var(--border)}
.ob-sub{margin-top:9px}
.ob-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.ob-foot .muted{font-size:12.5px;text-align:center;flex:1}
@media (max-width:720px){
  .ob-step-l{display:none}
  .ob-foot{flex-wrap:wrap}
  .ob-foot .muted{order:3;flex-basis:100%;text-align:left}
}

/* ===== Onboarding message editor (admin) ===== */
/* Placeholder tokens are wider than the default .kv key column, which would clip
   them mid-token. */
.tpl-ph .kv{margin-bottom:7px}
.tpl-ph .kv .k{width:148px;flex:none}
.tpl-ph code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
/* The rendered message, shown as it will be posted. Scrolls rather than growing
   the modal past the viewport. */
.tpl-preview{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px 13px;
  max-height:220px;overflow-y:auto}

/* ===== @repo answers in an in-house channel =====
   Reads as the repo speaking rather than as the teammate who asked. The accent
   is on the avatar icon only: the answer is not a status, so it gets no tint. */
.repo-avatar{background:var(--panel-2);border:1px solid var(--border);color:var(--green)}
.repo-avatar svg{width:16px;height:16px;fill:currentColor;stroke:none}
.repo-asker{font-size:11.5px;color:var(--text-mute)}
/* Answers are written as short prose with a trailing Source line; keeping the
   newlines is what makes that line read as its own line. */
.repo-text{white-space:pre-wrap}
/* The bubble that holds the repo's place while it reads. Muted, because it is
   not an answer yet; the dots are the house typing indicator reused verbatim. */
.repo-thinking{display:inline-flex;align-items:center;gap:8px;color:var(--text-mute)}

/* ---- what a repo answer was built from ----
   A row of chips, not a sentence: sources are scanned, not read. Neutral
   surfaces, with the accent on the icon of the client's own material only. That
   is the distinction worth seeing at a glance, since a claim from the client's
   repo is fact about the account and one from the playbook is not. */
.repo-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.repo-src-label{font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-mute);margin-right:2px}
.repo-src-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--text-dim);background:var(--panel-2);border:1px solid var(--border);
  border-radius:7px;padding:3px 8px;max-width:230px}
.repo-src-chip .repo-src-ico{display:grid;place-items:center;flex:none;color:var(--text-mute)}
.repo-src-chip .repo-src-ico svg{width:11px;height:11px;fill:currentColor;stroke:none}
.repo-src-chip.own{color:var(--text)}
.repo-src-chip.own .repo-src-ico{color:var(--green)}

/* ---- documents the repo produced ----
   Sits under the summary as the artefact the message is about. Row geometry and
   radius match the rest of the app; the accent is on the file icon only, since a
   generated document is not a status. */
.repo-docs{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.repo-doc{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--border);text-decoration:none;color:var(--text);max-width:420px}
.repo-doc:hover{border-color:#3a3d4a;background:#21232c}
.repo-doc-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:var(--panel);border:1px solid var(--border);color:var(--green);flex:none}
.repo-doc-ico svg{width:15px;height:15px;fill:currentColor;stroke:none}
.repo-doc-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.repo-doc-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repo-doc-sub{font-size:11.5px;color:var(--text-mute)}
.repo-doc-dl{color:var(--text-mute);flex:none;display:grid;place-items:center}
.repo-doc-dl svg{width:15px;height:15px}
.repo-doc:hover .repo-doc-dl{color:var(--text)}

/* The onboarding-message editor: a long message plus a placeholder key plus a
   preview needs more room than the default 440px shell. */
.modal.modal-onb{width:min(700px,94vw)}

/* ============================================================
   KANBAN RULE PLAYGROUND
   Reuses the automation builder's shell (.builder-screen, .bs-bar,
   .canvas-wrap, .canvas-pan, .connectors, .inspector). What differs is the
   node: an automation node is one draggable card, whereas a rule slot is a
   container that grows with its rows, so it is drawn as a dashed box with a
   caps heading and solid rows inside.

   Dashed is doing work here, not decorating: it says "this is a slot that holds
   things", against the solid border of the rows it holds.
   ============================================================ */
.rule-screen .rslot{position:absolute;width:320px;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;
  padding:12px;border:1px dashed #3a3d52;border-radius:14px;background:rgba(22,23,29,.78)}
.rule-screen .rslot.when{width:270px}
.rule-screen .rslot-h{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);padding:1px 3px 3px}
/* The "Check if" / "Otherwise if" heading is a control: it selects the branch,
   which is where its match mode, its order and its delete live. */
.rule-screen button.rslot-h{width:auto;align-self:flex-start;background:none;border:none;border-radius:6px;padding:2px 5px;margin:-1px 0 1px -2px;font-family:inherit;text-align:left;cursor:pointer;transition:.15s}
.rule-screen button.rslot-h:hover{color:var(--text-dim);background:var(--bg-hover)}
.rule-screen button.rslot-h.sel{color:var(--accent)}
/* The "Otherwise if" control is a slot in its own right, so kbLayoutSlots can
   park it under the last branch and size it like the others. It carries no box
   of its own: the dashed button inside is the whole thing. */
.rule-screen .rslot.bare{border:none;background:none;padding:0;gap:0}
.rule-screen .rslot-empty{font-size:12px;color:var(--text-mute);line-height:1.5;padding:2px 3px 4px}
.rule-screen .rslot-add{display:flex;align-items:center;gap:7px;width:100%;background:none;border:1px dashed var(--border);
  border-radius:10px;padding:9px 12px;color:var(--text-mute);font-family:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.rule-screen .rslot-add svg{width:14px;height:14px;flex:none;fill:currentColor;stroke:none}
.rule-screen .rslot-add:hover{color:var(--text);border-color:#34363f}

/* A row is the same object in all three slots, so it gets one treatment. The
   selected row takes the same accent border .node.sel takes on the automation
   canvas, since "this is the node the panel is editing" means the same thing on
   both screens. Border only: no fill, no glow, no lift. */
.rule-screen .rrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;box-sizing:border-box;
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  color:var(--text);font-family:inherit;font-size:13px;cursor:pointer;transition:.15s}
.rule-screen .rrow:hover{border-color:#34363f}
.rule-screen .rrow.sel{border-color:var(--accent)}
.rule-screen .rrow-ico{width:18px;height:18px;flex:none;display:grid;place-items:center;color:var(--text-mute)}
.rule-screen .rrow-ico svg{width:15px;height:15px;fill:currentColor;stroke:none}
.rule-screen .rrow.sel .rrow-ico{color:var(--text-dim)}
.rule-screen .rrow-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The And / Or between two conditions is a control, not a caption: clicking it
   flips the whole set between every-must-hold and any-may-hold. */
.rule-screen .rjoin{align-self:flex-start;background:none;border:none;border-radius:6px;padding:1px 5px;margin:-2px 0;
  color:var(--text-mute);font-family:inherit;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.15s}
.rule-screen .rjoin:hover{color:var(--text);background:var(--bg-hover)}

/* ---- the playground's inspector ---- */
.rule-screen .insp-head.trigger{color:var(--accent)}
.rule-screen .insp-head .icon-btn.danger{margin-left:auto}
/* Splits "settings for what is chosen" from "every other option for this slot". */
.rule-screen .insp-sep{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);
  border-top:1px solid var(--border);padding-top:15px;margin:20px 0 8px}
.rule-screen .inspector .pick-group:last-child{margin-bottom:0}
.rule-screen .inspector .kb-lblgroup:last-child{margin-bottom:0}
.rule-screen .inspector .kb-act{margin-bottom:8px}
.rule-screen .inspector .kb-note{margin:-6px 0 14px}

/* Below this the panel's fixed 320px leaves the canvas a sliver, so the two
   stack: the rule above, the settings for the selected part below it. */
@media(max-width:820px){
  .rule-screen .bs-body{flex-direction:column}
  .rule-screen .canvas-wrap{flex:0 0 44vh}
  .rule-screen .inspector{width:auto;flex:1;min-height:0;border-left:none;border-top:1px solid var(--border)}
  .rule-screen .canvas-hint{display:none}
}