/* ============================================================
   Miralead — "Operator Console" design system  (v2)
   Dark-first, warm graphite · electric indigo · mono detailing
   Schibsted Grotesk (UI/display) + JetBrains Mono (data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  /* ---- accent (overridable via tweaks) ---- */
  --accent:       oklch(0.64 0.20 279);
  --accent-2:     oklch(0.70 0.18 300);
  --accent-bright:oklch(0.74 0.19 282);
  --accent-ink:   oklch(0.84 0.12 285);
  --accent-glow:  oklch(0.64 0.20 279 / 0.45);

  /* ---- warm graphite scale (DARK default) ---- */
  --bg:        oklch(0.165 0.008 285);
  --bg-2:      oklch(0.195 0.009 285);
  --surface:   oklch(0.215 0.010 285);
  --surface-2: oklch(0.245 0.011 285);
  --surface-3: oklch(0.275 0.012 285);
  --line:      oklch(0.30 0.012 285);
  --line-2:    oklch(0.38 0.013 285);
  --hair:      oklch(1 0 0 / 0.06);   /* top highlight */

  --ink:    oklch(0.97 0.004 285);
  --ink-2:  oklch(0.80 0.008 285);
  --ink-3:  oklch(0.64 0.010 285);
  --ink-4:  oklch(0.50 0.012 285);

  /* ---- semantic data colors ---- */
  --c-new:    oklch(0.70 0.15 250);
  --c-active: oklch(0.74 0.14 210);
  --c-qual:   oklch(0.78 0.15 165);
  --c-prop:   oklch(0.82 0.15 85);
  --c-won:    oklch(0.76 0.16 150);
  --c-lost:   oklch(0.68 0.17 25);
  --c-pink:   oklch(0.72 0.17 350);
  --c-violet: oklch(0.68 0.18 300);

  --good: oklch(0.76 0.16 150);
  --warn: oklch(0.82 0.15 85);
  --bad:  oklch(0.68 0.18 25);

  /* ---- radii ---- */
  --r-sm: 7px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ---- shadow (dark) ---- */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5);
  --shadow:    0 6px 18px oklch(0 0 0 / 0.45), 0 2px 5px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.6), 0 6px 14px oklch(0 0 0 / 0.45);
  --shadow-pop:0 28px 70px oklch(0 0 0 / 0.7);
  --inset-hi:  inset 0 1px 0 var(--hair);

  /* ---- density (overridable) ---- */
  --row-h: 46px;
  --pad: 20px;
  --gap: 16px;

  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sidebar-w: 256px;
}

/* ---- LIGHT theme (alternate) ---- */
:root[data-theme="light"] {
  color-scheme: light;
  /* Dastone light palette: white canvas, cool navigation gray, indigo primary. */
  --bg:        #ffffff;
  --bg-2:      #f8f9fb;
  --surface:   #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #eef2f7;
  --line:      #eaf0f9;
  --line-2:    #dee2e6;
  --hair:      transparent;

  --ink:    #303e67;
  --ink-2:  #4a505e;
  --ink-3:  #656d9a;
  --ink-4:  #a0a5b3;

  --accent:       #6f6af8;
  --accent-2:     #817df9;
  --accent-bright:#6f6af8;
  --accent-ink:   #5d58d8;
  --accent-glow:  rgba(111, 106, 248, .16);

  --c-new:    #6f6af8;
  --c-active: #16cdc7;
  --c-qual:   #22b783;
  --c-prop:   #ffb822;
  --c-won:    #22b783;
  --c-lost:   #f5325c;
  --c-pink:   #e56b9f;
  --c-violet: #817df9;
  --good:     #22b783;
  --warn:     #ffb822;
  --bad:      #f5325c;

  --shadow-sm: 0 0 2px 2px rgba(61, 71, 81, .05);
  --shadow:    0 0 4px 3px rgba(61, 71, 81, .05);
  --shadow-lg: 0 8px 24px rgba(61, 71, 81, .10);
  --shadow-pop:0 16px 40px rgba(61, 71, 81, .14);
  --inset-hi: none;

  --r-sm: 3px;
  --r:    4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --sans: 'Roboto', system-ui, sans-serif;
}

:root[data-density="compact"] { --row-h: 40px; --pad: 15px; --gap: 12px; }

* { box-sizing: border-box; }
.no-anim, .no-anim * { transition: none !important; animation-duration: 0.001s !important; }
html, body { margin: 0; height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}
#root { height: 100%; }

::selection { background: var(--accent-glow); color: var(--ink); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- type helpers ---- */
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.num  { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
.kicker {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.display { font-weight: 800; letter-spacing: -0.04em; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------- Authentication ---------- */
.auth-screen, .auth-loading { min-height: 100vh; background: radial-gradient(circle at 50% -10%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 42%), var(--bg); color: var(--ink); display: grid; place-items: center; padding: 28px 18px; }
.auth-loading { display: flex; align-items: center; justify-content: center; }
.app-runtime-error { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); color: var(--ink); }
.app-runtime-error__card { width: min(100%, 460px); padding: 28px; border: 1px solid color-mix(in oklch, var(--bad) 34%, var(--line)); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.app-runtime-error__card h1 { margin: 10px 0; font-size: 22px; }
.app-runtime-error__card p { margin: 0 0 20px; color: var(--bad); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.auth-brand { position: fixed; top: 28px; left: 32px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.auth-brand__mark { display: inline-flex; }
.auth-card { width: min(100%, 440px); padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in oklch, var(--surface) 94%, transparent); box-shadow: var(--shadow-lg), var(--inset-hi); }
.auth-card__head { margin-bottom: 22px; }
.auth-card__head h1 { margin: 8px 0 8px; font-size: 28px; letter-spacing: -.04em; }
.auth-card__head p { margin: 0; color: var(--ink-3); font-size: 13px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); }
.auth-switch button { border: 0; border-radius: 6px; padding: 9px; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; font-size: 12px; }
.auth-switch button.active { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.auth-form input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--bg-2); color: var(--ink); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-optional { color: var(--ink-4); font-weight: 400; }
.auth-error { padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--bad) 38%, transparent); border-radius: 8px; background: color-mix(in oklch, var(--bad) 10%, transparent); color: var(--bad); font-size: 12px; line-height: 1.4; }
.auth-submit { width: 100%; min-height: 44px; justify-content: center; margin-top: 2px; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-card__foot { margin-top: 20px; color: var(--ink-4); font-size: 10.5px; line-height: 1.5; text-align: center; }
@media (max-width: 560px) { .auth-brand { position: static; margin-bottom: 16px; } .auth-screen { display: flex; flex-direction: column; justify-content: center; } .auth-card { padding: 24px 20px; } .auth-card__head h1 { font-size: 24px; } }
.muted { color: var(--ink-3); }
.flex { display: flex; }
.grid { display: grid; gap: var(--gap); }
.divline { height: 1px; background: var(--line); border: none; margin: 0; }

/* ============ Shell ============ */
.app { display: grid; grid-template-columns: 64px 1fr; height: 100%; overflow: hidden; transition: grid-template-columns .26s cubic-bezier(.2,.8,.25,1); }
.app.has-ctx { grid-template-columns: 64px var(--sidebar-w) 1fr; }

/* ---- Rail (icon menu with tooltips) ---- */
.rail {
  width: 64px; background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; height: 100%;
  padding: 13px 0 11px; gap: 3px; z-index: 12;
}
.rail-logo {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent));
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--inset-hi), 0 5px 16px var(--accent-glow);
}
.rail-scroll { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; overflow: visible; }
.rail-item {
  position: relative; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .14s, color .14s, transform .08s;
}
.rail-item:hover { background: var(--surface); color: var(--ink); }
.rail-item:active { transform: scale(.93); }
.rail-item.active { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 16%, var(--surface)); box-shadow: var(--inset-hi), 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent); }
.rail-item.active::before { content:''; position:absolute; left:-13px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.rail-dot { position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:99px; background:var(--bad); border:2px solid var(--bg-2); }
.rail-item:hover .rail-dot, .rail-item.active .rail-dot { border-color: var(--surface); }
.rail-tip {
  position: absolute; left: 50px; top: 50%; transform: translateY(-50%) translateX(-6px);
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 40;
}
.rail-item:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-sep { width: 26px; height: 1px; background: var(--line); margin: 7px 0; flex-shrink: 0; }
.rail-foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---- user menu popover ---- */
.usermenu {
  position: fixed; left: 70px; bottom: 12px; width: 256px; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .16s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.um-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background .12s, color .12s; }
.um-item:hover { background: var(--bg-2); color: var(--ink); }
.um-item svg { color: var(--ink-3); }
.um-backdrop { position: fixed; inset: 0; z-index: 55; }

/* ---- Context panel (second menu) ---- */
.ctx { background: var(--bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }
.ctx-head { padding: 18px 18px 12px; }
.ctx-title { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; }
.ctx-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.ctx-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 14px; }
.ctx-group { margin-top: 14px; }
.ctx-glabel { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); padding: 4px 10px 7px; display:flex; align-items:center; gap:6px; }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r); color: var(--ink-2);
  font-size: 13px; font-weight: 500; transition: background .12s, color .12s; position: relative;
}
.ctx-item:hover { background: var(--surface); color: var(--ink); }
.ctx-item.active { background: var(--surface); color: var(--ink); box-shadow: var(--inset-hi), 0 0 0 1px var(--line); }
.ctx-item svg { color: var(--ink-3); flex-shrink: 0; }
.ctx-item.active svg { color: var(--accent-bright); }
.ctx-count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-4); }
.ctx-foot { padding: 12px; border-top: 1px solid var(--line); }

/* ---- Sidebar ---- */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.sb-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--hair) inset, 0 4px 14px var(--accent-glow);
}
.sb-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.04em; }

.sb-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.sb-group { margin-top: 16px; }
.sb-group-label { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); padding: 4px 10px 7px; }
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 11px; border-radius: var(--r); color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; text-align: left; position: relative;
  transition: background .14s, color .14s;
}
.sb-item:hover { background: var(--surface); color: var(--ink); }
.sb-item.active { background: var(--surface); color: var(--ink); box-shadow: var(--inset-hi), 0 0 0 1px var(--line); }
.sb-item.active::before { content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.sb-item svg { color: var(--ink-3); flex-shrink: 0; }
.sb-item.active svg { color: var(--accent-bright); }
.sb-badge { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-3); padding: 1px 7px; border-radius: 99px; }
.sb-item.active .sb-badge { background: var(--accent); color: #fff; }

.sb-foot { padding: 12px; border-top: 1px solid var(--line); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); transition: background .14s; }
.sb-user:hover { background: var(--surface); }

/* ---- Main ---- */
.main { display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }
.topbar {
  height: 62px; min-height: 62px; flex-shrink: 0; border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  display: flex; align-items: center; gap: 14px; padding: 0 24px; z-index: 10;
}
.topbar-main { width: 100%; min-width: 0; height: 62px; display: flex; align-items: center; gap: 14px; }
.topbar-main { position: relative; }
.topbar--with-menu { height: 62px; min-height: 62px; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.topbar--with-menu .compact-subnav { border-bottom: 0; }
.tb-title { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.tb-crumb { color: var(--ink-4); font-size: 12px; }

.search {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 12px; color: var(--ink-3); width: 300px;
  transition: box-shadow .14s;
}
.search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-glow); }
.search input { border: none; background: none; outline: none; color: var(--ink); width: 100%; font-size: 13px; }
.search kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-4); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; }
.search-trigger { display: inline-grid; flex: 0 0 36px; }
.search--open { position: absolute; z-index: 80; left: auto; right: 184px; top: 10px; width: min(420px, calc(100% - 200px)); min-width: 0; animation: search-reveal .18s ease-out both; }
@keyframes search-reveal { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.search--open .btn-icon { flex: 0 0 28px; width: 28px; height: 28px; }
.topbar-quick-actions { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.topbar-quick-actions .btn.is-active { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 14%, var(--surface)); }
.assistant-popover { position: absolute; z-index: 85; top: 55px; right: 42px; width: 300px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-pop); animation: pop .16s ease-out both; }
.assistant-popover__head, .help-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.assistant-popover__head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-bright); }
.assistant-popover p { margin: 10px 2px; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.assistant-popover__input, .help-drawer__search { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-4); font-size: 11px; }
.assistant-popover__input svg { margin-left: auto; color: var(--accent-bright); }
.help-drawer-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; cursor: pointer; }
.help-drawer { position: fixed; z-index: 1001; inset: 0 0 0 auto; width: min(390px, 100vw); min-height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px; border-left: 1px solid var(--line-2); background-color: #202127 !important; color: #f7f7fb; opacity: 1 !important; isolation: isolate; overflow-y: auto; overflow-x: hidden; box-shadow: -18px 0 50px rgba(0, 0, 0, .42); animation: drawer-in .2s ease-out both; }
[data-theme="light"] .help-drawer { background-color: #ffffff !important; color: #181923; }
.help-drawer > * { position: relative; z-index: 1; }
.drawer-panel { top: 0 !important; bottom: 0 !important; height: 100dvh !important; min-height: 100dvh !important; max-height: none !important; box-sizing: border-box !important; }
.drawer-panel input, .drawer-panel textarea { max-width: 100%; }
.drawer-stack { position: fixed; z-index: 1001; inset: 0; pointer-events: none; overflow: hidden; }
.drawer-stack .help-drawer { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: auto; transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .22s ease, filter .22s ease; }
.drawer-stack__base { z-index: 1; }
.drawer-stack--nested .drawer-stack__base { transform: translateX(-58px) scale(.985); opacity: .72; filter: brightness(.62); transform-origin: right center; }
.drawer-stack__nested { z-index: 2; animation: drawer-stack-in .22s cubic-bezier(.2,.8,.25,1) both; }
@keyframes drawer-stack-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.help-drawer:has(.drawer-nested__body) { padding: 0; }
.help-drawer:has(.drawer-nested__body)::before { content: ''; position: absolute; z-index: 0; inset: 0 auto 0 0; width: 58px; background: #18191f; border-right: 1px solid var(--line); box-shadow: 10px 0 24px rgba(0,0,0,.18); }
.drawer-nested__body { position: absolute !important; z-index: 3 !important; inset: 0 0 0 58px; display: flex; flex-direction: column; padding: 24px; background: #202127; box-shadow: -16px 0 35px rgba(0,0,0,.24); animation: drawer-nested-in .2s ease-out both; }
[data-theme="light"] .drawer-nested__body { background: #fff; }
.drawer-back { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; min-height: 30px; padding: 5px 8px; border-radius: 7px; color: var(--ink-3); }
.drawer-back:hover { color: var(--ink); background: var(--surface); }
.drawer-nested__title { margin-top: 30px; font-size: 20px; font-weight: 700; }
@keyframes drawer-nested-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.help-drawer h2 { margin-top: 5px; font-size: 23px; }
.help-drawer__search { margin-top: 22px; }
.help-drawer__section { display: flex; flex-direction: column; gap: 5px; margin-top: 24px; }
.help-drawer__section strong { margin-bottom: 5px; font-size: 12px; }
.help-drawer__section button, .help-drawer__section p { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; color: var(--ink-2); font-size: 12.5px; text-align: left; }
.help-drawer__section button:hover, .help-drawer__section p:hover { color: var(--accent-bright); }
.help-drawer__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-4); font-size: 11px; }
.help-drawer__foot button { color: var(--accent-bright); }
.chat-drawer { background: var(--surface-2); }
.assistant-drawer { background-color: #202127 !important; }
[data-theme="light"] .assistant-drawer { background-color: #ffffff !important; }
.assistant-drawer__intro { display: flex; gap: 11px; margin-top: 28px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in oklch, var(--accent) 8%, transparent); }
.assistant-drawer__avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 18%, transparent); }
.assistant-drawer__intro strong { font-size: 13px; }
.assistant-drawer__intro p { margin: 5px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.assistant-drawer__suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.assistant-drawer__suggestions button { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 11.5px; text-align: left; }
.assistant-drawer__suggestions button:hover { color: var(--accent-bright); background: var(--surface); }
.assistant-drawer__composer { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-top: auto; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-4); font-size: 11px; }
.assistant-drawer__composer svg { margin-left: auto; color: var(--accent-bright); }
.chat-drawer__channels { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.chat-drawer__channels strong { padding: 0 2px 6px; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
.chat-drawer__people-title { margin-top: 18px; }
.chat-drawer__channel { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 9px; border-radius: 8px; color: var(--ink-2); text-align: left; }
.chat-drawer__channel:hover, .chat-drawer__channel.is-active { color: var(--ink); background: var(--surface); }
.chat-drawer__channel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px color-mix(in oklch, var(--good) 50%, transparent); }
.chat-drawer__channel-dot.is-ai { background: var(--accent); }
.chat-drawer__unread { margin-left: auto; color: var(--accent-bright); font: 10px var(--mono); }
.chat-drawer__status { margin-left: auto; color: var(--good); font-size: 10px; }
.chat-drawer__composer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 11px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-4); font-size: 11px; }
.chat-drawer__composer svg { margin-left: auto; color: var(--accent-bright); }
.chat-drawer__composer input, .assistant-drawer__composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.chat-drawer__composer input::placeholder, .assistant-drawer__composer input::placeholder { color: var(--ink-4); }
.chat-drawer__composer button, .assistant-drawer__composer button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; color: var(--accent-bright); }
.chat-drawer__composer button:hover, .assistant-drawer__composer button:hover { background: color-mix(in oklch, var(--accent) 14%, transparent); }
.mobile-search-popover { display: none; }

.content { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
body.drawer-open { overflow: hidden; }
.route-drawer-backdrop { position: fixed; z-index: 70; inset: 0; background: transparent; }
.route-drawer { position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(1062px, calc(100vw - 72px)); height: 100dvh; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; padding-top: 18px; background: var(--bg); border-left: 1px solid var(--line-2); box-shadow: -22px 0 60px rgba(0,0,0,.35); animation: route-drawer-in .22s cubic-bezier(.2,.8,.25,1) both; }
.route-drawer__close { position: fixed; z-index: 72; top: 16px; right: 18px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); box-shadow: var(--shadow-sm); }
@keyframes route-drawer-in { from { transform: translateX(32px); } to { transform: translateX(0); } }
@keyframes route-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .route-drawer { width: 100vw; padding-top: 8px; } .route-drawer__close { top: 10px; right: 10px; } }
.page { padding: 26px 30px 80px; max-width: 1520px; margin: 0 auto; }
.entity-drawer-backdrop { position: fixed; z-index: 70; inset: 0; display: flex; justify-content: flex-end; background: transparent; }
.entity-drawer { position: relative; width: min(972px, calc(100vw - 72px)); max-width: calc(100vw - 64px); height: 100dvh; overflow: visible; background: var(--bg); border-left: 1px solid var(--line-2); box-shadow: -24px 0 64px rgba(0,0,0,.38); animation: route-drawer-in .22s cubic-bezier(.2,.8,.25,1) both; }
.entity-drawer__scroll { position: relative; z-index: 2; height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; background: inherit; }
@media (prefers-reduced-motion: reduce) { .entity-drawer, .route-drawer { animation: none; } }
.task-drawer { width: min(774px, calc(100vw - 72px)); background: var(--surface); box-shadow: -24px 0 64px rgba(0,0,0,.38); }
.task-drawer.task-detail { width: min(972px, calc(100vw - 72px)); }
.task-detail__form { min-height: 100%; display: flex; flex-direction: column; }
.task-detail__header { padding: 28px 30px 22px; border-bottom: 1px solid var(--line); }
.task-detail__header .kicker { margin-bottom: 14px; }
.task-detail__header h1 { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.task-detail__header .ui-input { font-size: 20px; font-weight: 600; }
.task-detail__status { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--ink-3); font-size: 13px; }
.task-detail__body { display: grid; grid-template-columns: minmax(0,1fr) 310px; flex: 1; min-width: 0; padding: 0; margin: 0; border: 0; }
.task-detail__main { padding: 26px 30px; min-width: 0; }
.task-detail__section + .task-detail__section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.task-detail__section h3 { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 16px; }
.task-detail__section .muted { font-size: 13px; }
.task-detail__section .link-btn { display: inline-flex; align-items: center; gap: 7px; text-align: left; color: var(--accent-bright); font-size: 13px; }
.task-detail__description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.task-detail__aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 26px 22px; background: var(--bg-2); border-left: 1px solid var(--line); }
.task-detail__aside .crm-user-picker__chip>span { max-width: 160px; }
.task-detail__meta,.task-detail__creator,.task-detail__people { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.task-detail__meta>span,.task-detail__creator>span,.task-detail__people>span { font-size: 12px; color: var(--ink-3); }
.task-detail__creator>div { display: flex; align-items: center; gap: 9px; overflow-wrap: anywhere; }
.task-detail__people .crm-user-picker.is-disabled .crm-user-picker__control { border: 0; padding: 0; background: transparent; opacity: 1; min-height: 0; box-shadow: none; }
.task-detail__people .crm-user-picker__control>input { display: none; }
.task-detail__people .crm-user-picker__chip { border: 0; background: transparent; padding: 0; font-size: 13px; gap: 8px; }
.task-detail__people .crm-user-picker__control { gap: 10px; }
.task-detail__footer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 30px; border-top: 1px solid var(--line); background: var(--surface); }
.task-detail__error { margin: 16px 30px 0; }
.task-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.task-checklist__item { display: flex; align-items: center; gap: 9px; }
.task-checklist__item .ui-input { min-width: 0; flex: 1; }
.task-checklist input[type=checkbox],.task-checklist__read input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.task-checklist__read { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.task-checklist__read .is-done { color: var(--ink-4); text-decoration: line-through; }
@media (max-width: 760px) { .task-detail__body { grid-template-columns: 1fr; } .task-detail__aside { border-left: 0; border-top: 1px solid var(--line); } .task-detail__header,.task-detail__main,.task-detail__aside { padding: 20px; } .task-detail__header h1 { font-size: 22px; } .task-detail__footer { padding: 16px 20px; } }
.entity-drawer__rail { position: absolute; z-index: 1; top: 34px; left: -46px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.entity-drawer__control { display: grid; place-items: center; width: 46px; height: 39px; padding: 0; border: 1px solid var(--line); border-right: 0; border-radius: 23px 0 0 23px; background: var(--surface-2); color: var(--accent-ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .16s, background .16s; }
.entity-drawer__control:hover { background: color-mix(in oklch, var(--accent) 22%, var(--surface-2)); }
.entity-drawer__control.is-primary { width: 46px; height: 39px; background: color-mix(in oklch, var(--accent) 18%, var(--surface-2)); }
.entity-drawer__control:not(.is-primary) { width: 37px; height: 31px; }
.entity-drawer__control svg { width: 17px; height: 17px; }
.entity-drawer__control:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.leads-board { min-width: 0; }
.leads-board-wrap { position: relative; min-width: 0; }
.leads-board-scroll { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 100px; padding: 0; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface-2) 94%, transparent); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; transition: background .15s, width .15s; }
.leads-board-scroll--left { left: 0; border-radius: 0 50px 50px 0; }
.leads-board-scroll--right { right: 0; border-radius: 50px 0 0 50px; }
.leads-board-scroll:hover { width: 52px; background: var(--accent); color: #fff; }
.leads-board-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 700px) { .leads-board-scroll { display: none; } }
.leads-stage { min-width: 280px; background: var(--bg-2); border: 1px solid var(--line); }
.leads-stage.is-drop-ready { border-color: color-mix(in srgb, var(--stage-color) 55%, var(--line)); }
.leads-stage.is-drop-target { background: color-mix(in srgb, var(--stage-color) 12%, var(--bg-2)); border-color: var(--stage-color); box-shadow: inset 0 0 0 2px var(--stage-color); }
.leads-stage.is-drag-source { border-style: dashed; }
.leads-drop-preview { flex-shrink: 0; display: grid; gap: 8px; padding: 16px 12px; min-height: 110px; border: 2px dashed var(--stage-color); border-radius: var(--r); background: color-mix(in srgb, var(--stage-color) 15%, var(--surface)); pointer-events: none; overflow-wrap: anywhere; }
.leads-drop-preview__hint { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink); }
.leads-drop-preview > strong { font-size: 13px; }
.leads-drop-preview > .muted { font-size: 11px; }
.leads-drop-unavailable { flex-shrink: 0; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-3); font-size: 12px; text-align: center; pointer-events: none; }
.leads-stage__summary { flex-shrink: 0; padding: 10px; }
.leads-stage__heading { display: flex; align-items: center; gap: 8px; min-height: 32px; box-sizing: border-box; padding: 5px 19px 5px 10px; background: color-mix(in srgb, var(--stage-color) 45%, var(--surface-2)); color: var(--ink); font-size: 12px; line-height: 20px; font-weight: 700; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.leads-stage__heading > span:first-child { flex: 1; overflow-wrap: anywhere; }
.leads-stage__count { flex-shrink: 0; min-width: 20px; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); text-align: center; font-size: 11px; line-height: 20px; }
.leads-stage__total { padding: 5px 2px 9px; color: var(--ink-2); font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.leads-stage__add { width: 100%; justify-content: center; padding: 5px 10px; min-height: 28px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 11px; }
.leads-stage__add:hover { border-color: var(--stage-color); background: color-mix(in srgb, var(--stage-color) 15%, var(--surface-2)); }
.leads-stage__cards > .kcard { flex-shrink: 0; }
@media (min-width: 701px) { .leads-board { height: max(280px, calc(100dvh - 230px)); flex: none !important; } }
@media (max-width: 700px) { .entity-drawer { max-width: calc(100vw - 54px); } .entity-drawer__rail { top: 16px; } }
@media (max-width: 700px) { .task-drawer { width: 100vw; max-width: 100vw; } }
@media (max-width: 700px) { .leads-board { display: flex !important; flex-direction: column; overflow-x: hidden !important; gap: 10px !important; } .leads-stage { width: 100% !important; min-width: 0 !important; max-height: none; } .leads-stage > div:last-child { overflow: visible !important; } }
.page-wide { max-width: none; }

/* Team feed */
.feed-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.feed-page { max-width: 1440px; }
.feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.feed-heading .kicker { color: var(--accent-bright); font-size: 9px; margin-bottom: 8px; }
.feed-heading h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.feed-heading p { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.feed-local-label { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; font-size: 11px; color: var(--ink-3); }
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.feed-main, .feed-compose-fields { min-width: 0; }
.feed-composer { overflow: hidden; }
.feed-composer-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.feed-post-busy { opacity: .7; }
.feed-post-busy :is(button, input) { pointer-events: none; }
.feed-composer-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); padding: 0 22px; overflow-x: auto; }
.feed-composer-tabs button { position: relative; display: flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 18px 0; background: transparent; color: var(--ink-3); font-size: 12px; }
.feed-composer-tabs button.active { color: var(--accent-bright); }
.feed-composer-tabs button.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent-bright); }
.feed-compose-body { display: flex; gap: 13px; padding: 24px 22px; }
.feed-compose-fields { flex: 1; }
.feed-compose-text { background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.7; width: 100%; resize: vertical; min-height: 38px; padding: 6px 0; border: 0; outline: none; }
.feed-compose-text::placeholder { color: var(--ink-3); }
.feed-compose-text:focus-visible { box-shadow: 0 2px var(--accent); }
.feed-input { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; }
.feed-title-input { margin-bottom: 10px; background: transparent; font-weight: 600; }
.feed-event-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.feed-event-fields label { display: grid; gap: 7px; font-size: 11px; color: var(--ink-3); }
.feed-poll-fields { display: grid; gap: 8px; margin-top: 10px; }
.feed-poll-fields > div { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; }
.feed-poll-fields > button { justify-self: start; }
.feed-compose-footer { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 12px 18px; background: var(--bg-2); flex-wrap: wrap; }
.feed-audience { display: flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: 11px; margin-right: auto; }
.feed-poll-fields { border:0; padding:0; min-width:0; }
.feed-editing-label { padding:12px 24px 0; color:var(--accent); font-size:12px; }
.feed-recipients { margin:0 24px 18px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:10px; }
.feed-recipient-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; }
.feed-recipient-modes { display:flex; flex-wrap:wrap; gap:6px; }
.feed-recipient-selected { display:flex; flex-wrap:wrap; gap:6px; }
.feed-recipient-chip { display:flex; gap:6px; align-items:center; background:var(--bg-2); color:var(--ink); border:1px solid var(--accent); border-radius:20px; padding:5px 10px; font-size:12px; cursor:pointer; }
.feed-recipient-list { max-height:210px; overflow:auto; display:grid; gap:4px; }
.feed-recipient-row { display:flex; align-items:center; gap:8px; padding:7px 8px; font-size:12px; border-radius:8px; cursor:pointer; }
.feed-recipient-row:hover { background:var(--bg-2); }
.feed-recipient-row>label { display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; }
.feed-recipient-row input { accent-color:var(--accent); }
.feed-recipient-row small { display:block; color:var(--ink-3); margin-top:2px; }
.feed-group-editor { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px; }
.feed-group-editor fieldset { border:0; padding:0; margin:0; display:grid; gap:10px; min-width:0; }
.feed-group-actions { display:flex; gap:8px; justify-content:flex-end; }
.feed-comment-actions { display:flex; gap:12px; margin-top:5px; }
.feed-comment-actions button { padding:0; border:0; background:none; color:var(--ink-3); font-size:11px; cursor:pointer; }
.feed-comment-actions button:hover { color:var(--accent); }
.feed-comment.feed-comment-reply { margin-left:32px; padding-left:10px; border-left:2px solid var(--line); }
.feed-reply-context { display:block; color:var(--ink-3); font-size:11px; margin-bottom:4px; }
.feed-reply-target { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--accent); margin-bottom:8px; }
@media(max-width:600px) { .feed-recipients { margin-left:14px; margin-right:14px; } }
.feed-toolbar { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; flex-wrap: wrap; }
.feed-filters { display: flex; gap: 4px; margin-right: auto; }
.feed-filters button { font-size: 12px; color: var(--ink-3); background: transparent; padding: 8px 10px; border-radius: 7px; }
.feed-filters button.active { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.feed-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; width: 190px; }
.feed-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); }
.feed-type-filter { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); padding: 8px; border-radius: 8px; font: inherit; font-size: 11px; max-width: 130px; }
.feed-posts { display: grid; gap: 18px; }
.feed-post { overflow: visible; }
.feed-pinned-label { display: flex; align-items: center; gap: 6px; padding: 10px 24px; border-bottom: 1px solid var(--line); font-size: 10px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 5%, var(--surface)); border-radius: var(--r) var(--r) 0 0; }
.feed-post-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 0; }
.feed-author { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.feed-author strong { color: var(--accent-bright); font-weight: 650; }
.feed-author > span { display: inline-flex; gap: 7px; align-items: center; color: var(--ink-3); font-size: 11px; margin-left: 8px; }
.feed-author small { display: flex; align-items: center; gap: 8px; color: var(--ink-4); font-size: 10px; margin-top: 3px; }
.feed-author em { font-style: normal; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.feed-post-controls { display: flex; align-self: start; position: relative; }
.feed-post-menu { position: absolute; top: 36px; right: 0; z-index: 5; padding: 5px; min-width: 190px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.feed-post-menu button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 10px; background: transparent; color: var(--ink-2); font-size: 12px; text-align: left; border-radius: 5px; }
.feed-post-menu button:hover { background: var(--surface-3); }
.feed-post-body { padding: 18px 24px 22px 78px; }
.feed-post-body h2 { font-size: 17px; font-weight: 650; margin-bottom: 10px; letter-spacing: -.02em; }
.feed-post-body > p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 13px; line-height: 1.85; }
.feed-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; border-radius: 5px; padding: 4px 7px; margin-bottom: 12px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.feed-kind-event { color: var(--good); background: color-mix(in oklch, var(--good) 10%, transparent); }
.feed-event-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin-top: 18px; background: var(--bg-2); flex-wrap: wrap; }
.feed-event-date { display: grid; gap: 3px; text-align: center; min-width: 48px; color: var(--accent-bright); }
.feed-event-date b { font-size: 25px; line-height: 1; }
.feed-event-date span { font-size: 10px; text-transform: uppercase; }
.feed-event-card > div:nth-child(2) { flex: 1; }
.feed-event-card strong { font-size: 12px; font-weight: 600; }
.feed-event-card small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 5px; overflow-wrap: anywhere; }
.feed-poll { display: grid; gap: 8px; margin-top: 16px; }
.feed-poll-option { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; position: relative; overflow: hidden; text-align: left; background: var(--bg-2); color: var(--ink-2); }
.feed-poll-option.selected { border-color: var(--accent); color: var(--accent-bright); }
.feed-poll-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in oklch, var(--accent) 10%, transparent); transition: width .2s; }
.feed-poll-text { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; }
.feed-poll-text > span { display: flex; align-items: center; gap: 10px; }
.feed-poll-text svg { flex-shrink: 0; }
.feed-poll small { font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.feed-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.feed-file { display: inline-flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); font-size: 12px; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.feed-file > svg { flex-shrink: 0; color: var(--accent-bright); }
.feed-file small { display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.feed-file button { display: flex; background: transparent; color: var(--ink-3); }
.feed-post-actions { display: flex; align-items: center; gap: 18px; padding: 0 24px 16px 78px; flex-wrap: wrap; }
.feed-post-actions button { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--ink-3); font-size: 11px; }
.feed-post-actions b { font-size: 10px; font-weight: 600; }
.feed-post-actions .feed-comments-toggle { margin-left: auto; }
.feed-selected, .feed-post-actions button.feed-selected { color: var(--accent-bright) !important; }
.feed-comments { border-top: 1px solid var(--line); padding: 16px 24px 18px; background: color-mix(in oklch, var(--bg-2) 60%, var(--surface)); border-radius: 0 0 var(--r) var(--r); }
.feed-comment { display: flex; gap: 10px; margin: 0 0 16px 30px; }
.feed-comment > div:last-child { min-width: 0; flex: 1; }
.feed-comment strong { font-size: 11px; }
.feed-comment time { font-size: 10px; color: var(--ink-4); margin-left: 10px; }
.feed-comment p { font-size: 12px; color: var(--ink-2); line-height: 1.7; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-comment-form { display: flex; align-items: center; gap: 10px; }
.feed-comment-form input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 10px 14px; color: var(--ink); font: inherit; font-size: 12px; }
.feed-sidebar { display: grid; gap: 16px; }
.feed-side-card { padding: 20px; }
.feed-side-title { display: flex; align-items: center; gap: 9px; color: var(--accent-bright); margin-bottom: 14px; }
.feed-side-title h2 { font-size: 13px; font-weight: 650; color: var(--ink); flex: 1; }
.feed-side-title .btn { margin: -8px -8px -8px 0; }
.feed-status-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--ink-4); }
.feed-status-dot.active { background: var(--good); box-shadow: 0 0 0 4px color-mix(in oklch, var(--good) 12%, transparent); }
.feed-day p { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
.feed-day > button { width: 100%; justify-content: center; }
.feed-demo-label { color: var(--ink-4); font-size: 10px; margin: -5px 0 9px; }
.feed-side-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; background: transparent; color: var(--ink-3); font-size: 12px; }
.feed-side-row b { color: var(--ink); font-size: 15px; font-weight: 600; }
.feed-side-divider { border-top: 1px solid var(--line); margin: 9px 0 14px; }
.feed-task-preview { display: flex; gap: 9px; text-align: left; background: transparent; color: var(--ink-2); font-size: 12px; line-height: 1.6; padding: 0 0 14px; }
.feed-task-check { color: var(--ink-4); padding-top: 2px; }
.feed-task-preview small { display: block; color: var(--ink-4); font-size: 10px; margin-top: 4px; }
.feed-side-link { display: flex; align-items: center; gap: 6px; color: var(--accent-bright); font-size: 11px; background: transparent; }
.feed-shortcut { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; color: var(--ink-3); font-size: 12px; padding: 12px 0; }
.feed-shortcut > span { display: flex; align-items: center; gap: 10px; }
.feed-shortcut + .feed-shortcut { border-top: 1px solid var(--line); }
.feed-side-note { display: flex; gap: 8px; padding: 0 8px; color: var(--ink-4); }
.feed-side-note svg { flex-shrink: 0; margin-top: 2px; }
.feed-side-note p { font-size: 10px; line-height: 1.7; }
.feed-empty { display: grid; justify-items: center; gap: 12px; padding: 44px 24px; text-align: center; color: var(--ink-3); }
.feed-empty h3 { color: var(--ink); font-size: 16px; }
.feed-empty p { font-size: 12px; }
.feed-alert, .feed-notice { padding: 12px 16px; margin-top: 12px; border-radius: 8px; font-size: 12px; border: 1px solid var(--line); }
.feed-alert { color: var(--bad); background: color-mix(in oklch, var(--bad) 7%, var(--surface)); }
.feed-notice { display: flex; align-items: center; gap: 8px; color: var(--good); }
.feed-notice button { margin-left: auto; }
.feed-page button:hover { filter: brightness(1.1); }
.feed-page button:disabled { opacity: .45; cursor: not-allowed; }
.feed-page :is(button, input, select, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1150px) { .feed-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; } .feed-composer-tabs { gap: 16px; } .feed-post-body { padding-left: 24px; } .feed-post-actions { padding-left: 24px; } }
@media (max-width: 960px) { .feed-layout { grid-template-columns: 1fr; } .feed-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feed-side-note { align-self: center; } }
@media (max-width: 600px) { .feed-page { padding: 20px 14px 60px; } .feed-heading { align-items: flex-start; } .feed-heading h1 { font-size: 26px; } .feed-local-label { font-size: 9px; padding: 6px 8px; } .feed-sidebar { grid-template-columns: 1fr; } .feed-composer-tabs { padding: 0 14px; gap: 18px; } .feed-composer-tabs button { font-size: 11px; } .feed-compose-body { padding: 18px 14px; gap: 10px; } .feed-compose-body > .avatar { display: none; } .feed-compose-footer { padding: 10px; } .feed-audience { display: none; } .feed-compose-footer > .btn-primary { margin-left: auto; } .feed-post-header { padding: 18px 16px 0; gap: 9px; } .feed-author > span { display:flex; font-size:10px; overflow-wrap:anywhere; } .feed-post-body { padding: 16px; } .feed-post-actions { padding: 0 16px 16px; gap: 12px; } .feed-post-actions button { font-size: 10px; } .feed-comments { padding: 14px; } .feed-comment { margin-left: 0; } .feed-comment time { display: block; margin: 2px 0 0; } .feed-event-fields { grid-template-columns: 1fr; } .feed-toolbar { gap: 8px; } .feed-search { flex: 1; width: auto; } .feed-filters { width: 100%; } }

/* ============ Lead CRM card ============ */
.lead-detail-drawer { width: min(1332px, calc(90vw - 64.8px)); background: var(--bg-2); }
.lead-detail-topbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; padding: 16px 32px; background: color-mix(in oklch, var(--bg-2) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.lead-detail-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lead-detail-title h1 { margin: 2px 0 1px; font-size: 19px; line-height: 1.2; }
.lead-detail-title__company { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.lead-detail-title span { color: var(--ink-3); font-size: 12px; }
.lead-detail-actions { display: flex; align-items: center; gap: 6px; padding-right: 42px; }
.lead-detail-actions .entity-drawer__close { position: absolute; top: 20px; right: 18px; }
.lead-toolbar-select { color: var(--ink-2); }
.lead-stage-strip { --stage-fill: color-mix(in srgb, var(--stage-color, var(--accent)) 45%, #10151c); display: flex; gap: 3px; padding: 16px 32px 11px; background: var(--bg-2); overflow-x: auto; }
.lead-stage-step { flex: 1 0 150px; min-width: 150px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 48px; padding: 8px 24px; border-radius: 0; background: var(--surface-2); border: 0; color: var(--ink-2); font-size: 12px; text-align: left; position: relative; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.lead-stage-step:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.lead-stage-step__name { line-height: 1.35; overflow-wrap: anywhere; }
.lead-stage-step.is-done, .lead-stage-step.is-current { background: var(--stage-fill); color: #fff; }
.lead-stage-step.is-current { box-shadow: inset 0 -3px 0 var(--stage-color); font-weight: 700; }
.lead-stage-step__current { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; line-height: 1.2; }
.lead-stage-step__current::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.lead-stage-step:not(:disabled):hover { filter: brightness(1.15); }
.lead-stage-step:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.crm-current-stage { max-width: 45%; display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border: 1px solid var(--stage-color); border-radius: var(--r); background: color-mix(in srgb, var(--stage-color) 45%, #10151c); color: #fff; overflow-wrap: anywhere; }
.crm-current-stage > span { font-size: 11px; }
.crm-current-stage > strong { font-size: 14px; line-height: 1.35; }
@media (max-width: 700px) { .smart-process-record-form__header { flex-wrap: wrap; } .crm-current-stage { max-width: 100%; } }
.lead-detail-tabs { display: flex; align-items: center; gap: 7px; padding: 0 32px; min-height: 50px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.lead-detail-tabs button { display: inline-flex; align-items: center; gap: 4px; height: 50px; padding: 0 14px; color: var(--ink-3); font-size: 12px; border-bottom: 2px solid transparent; }
.lead-detail-tabs button:hover, .lead-detail-tabs button.is-active { color: var(--ink); }
.lead-detail-tabs button.is-active { border-color: var(--accent-bright); }
.lead-detail-body { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); gap: 20px; padding: 22px 32px 44px; max-width: 1400px; margin: 0 auto; }
.lead-detail-left, .lead-detail-right { min-width: 0; }
.lead-detail-left { display: flex; flex-direction: column; gap: 18px; }
.lead-detail-section { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.lead-detail-section__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.link-btn, .lead-section-footer button, .lead-detail-bottom-links button { color: var(--ink-4); font-size: 11px; }
.link-btn:hover, .lead-section-footer button:hover, .lead-detail-bottom-links button:hover { color: var(--accent-bright); }
.lead-contact-card { position: relative; margin: 12px; padding: 12px 72px 12px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.lead-detail-muted, .lead-field__label { color: var(--ink-4); font-size: 10px; }
.lead-contact-name { margin-top: 7px; font-size: 14px; font-weight: 650; }
.lead-contact-company { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.lead-contact-actions { position: absolute; top: 27px; right: 10px; display: flex; gap: 5px; }
.lead-contact-actions button { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink-3); border-radius: 6px; }
.lead-contact-actions button:hover { color: var(--accent-bright); background: var(--surface); }
.lead-field { display: flex; align-items: flex-start; gap: 9px; padding: 8px 14px; }
.lead-field__icon { flex: 0 0 18px; color: var(--ink-4); margin-top: 1px; }
.lead-field__value { margin-top: 3px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.lead-fields-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding: 4px 0; }
.lead-section-footer { display: flex; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); }
.lead-section-footer button:last-child { margin-left: auto; }
.lead-detail-bottom-links { display: flex; gap: 15px; padding: 2px 14px; }
.lead-detail-bottom-links button { display: inline-flex; align-items: center; gap: 5px; }
.lead-detail-right { display: flex; flex-direction: column; gap: 18px; }
.lead-activity-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.lead-activity-tabs { display: flex; align-items: center; gap: 3px; padding: 0 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.lead-activity-tabs button { flex: 0 0 auto; height: 42px; padding: 0 9px; color: var(--ink-3); font-size: 11.5px; border-bottom: 2px solid transparent; white-space: nowrap; }
.lead-activity-tabs button.is-active { color: var(--accent-bright); border-color: var(--accent-bright); }
.lead-activity-compose { margin: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.lead-activity-compose textarea { width: 100%; min-height: 42px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.lead-activity-compose__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 11px; }
.lead-activity-compose__footer .muted { display: inline-flex; align-items: center; gap: 3px; }
.lead-activity-invite { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink-4); font-size: 12px; }
.lead-timeline { position: relative; padding: 2px 0 20px; }
.lead-timeline-label { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; color: var(--ink-2); font-size: 12px; font-weight: 650; }
.lead-timeline-date { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px 38px; color: var(--accent-bright); font-size: 11px; }
.lead-timeline-date span { display: inline-flex; gap: 4px; align-items: center; color: var(--ink-4); }
.lead-timeline-event { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px 18px 0; }
.lead-timeline-event:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 39px; bottom: 0; width: 1px; background: var(--line-2); }
.lead-timeline-event__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-3); }
.lead-timeline-event__icon.is-auto { color: var(--accent-bright); border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }
.lead-timeline-event__head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lead-timeline-event__head span { margin-left: auto; color: var(--ink-4); font: 10px var(--mono); }
.lead-timeline-event__text { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 900px) { .lead-detail-body { grid-template-columns: 1fr; } .lead-detail-right { order: -1; } }
@media (max-width: 700px) { .lead-detail-drawer { width: 100vw; } .lead-detail-topbar { padding: 10px 14px; } .lead-detail-title h1 { font-size: 16px; } .lead-detail-title__company { display: block; margin-top: 3px; font-size: 11px; } .lead-detail-actions { padding-right: 36px; gap: 2px; } .lead-toolbar-select { padding: 6px 7px; font-size: 0; } .lead-toolbar-select svg { margin: 0; } .lead-detail-actions .btn-primary { font-size: 0; padding: 7px; } .lead-detail-actions .btn-primary svg { margin: 0; } .lead-stage-strip, .lead-detail-tabs { padding-left: 14px; padding-right: 14px; } .lead-detail-body { padding: 12px 14px 28px; } .lead-fields-grid { grid-template-columns: 1fr; } .lead-detail-bottom-links { flex-wrap: wrap; } }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  box-shadow: var(--inset-hi);
  transition: transform .05s, box-shadow .14s, filter .14s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(160deg, var(--accent-bright), var(--accent));
  color: #fff; border-color: transparent;
  box-shadow: var(--inset-hi), 0 2px 10px var(--accent-glow);
}
.btn-primary:hover { box-shadow: var(--inset-hi), 0 4px 18px var(--accent-glow); filter: brightness(1.06); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: var(--r-sm); }
.btn-icon { padding: 8px; border-radius: var(--r); }

/* ============ Cards ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), var(--inset-hi);
}
.card-pad { padding: var(--pad); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 15px var(--pad); border-bottom: 1px solid var(--line); }
.card-title { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }

/* glow panel (hero) */
.glowcard { position: relative; overflow: hidden; }
.glowcard::after {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% -10%, var(--accent-glow), transparent 55%);
  opacity: .9;
}

/* ============ Badges / chips ============ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: all .14s;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip.on { background: color-mix(in oklch, var(--accent) 18%, var(--surface)); color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 40%, transparent); }

.avatar { border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; line-height: 1; font-family: var(--mono); font-weight: 700; color: #fff; font-size: 12px; letter-spacing: -0.04em; box-shadow: var(--inset-hi); overflow: hidden; }
.avatar--image { display: block; object-fit: cover; }
.avatar--placeholder { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: none; }

/* metric */
.metric { padding: var(--pad); position: relative; overflow: hidden; }
.metric-val { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.metric-label { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.delta.up { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.delta.down { color: var(--bad); background: color-mix(in oklch, var(--bad) 14%, transparent); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); padding: 11px var(--pad); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.tbl td { padding: 0 var(--pad); height: var(--row-h); border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.tbl tbody tr { transition: background .1s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl tbody tr:last-child td { border-bottom: none; }

.bar { height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* hover lifts */
.pcard, .kcard, .hot-row, .flowblock, .liftcard { transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s, border-color .14s, background .12s; }
.pcard:hover, .liftcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--inset-hi); border-color: var(--line-2); }
.kcard:hover { box-shadow: var(--shadow), var(--inset-hi); border-color: var(--line-2); }
.hot-row:hover, .flowblock:hover { background: var(--bg-2); }

/* animation — staggered entrance (transform-only so content is always visible even if anim doesn't run) */
@keyframes fade-up { from { transform: translateY(13px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fade-up .5s cubic-bezier(.2,.8,.25,1) forwards; }
}
.st1{animation-delay:.04s}.st2{animation-delay:.10s}.st3{animation-delay:.16s}.st4{animation-delay:.22s}.st5{animation-delay:.28s}.st6{animation-delay:.34s}
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes glowpulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.seg { transition: opacity .14s; }
.seg:hover { opacity: 0.85; }
.spark { display: block; width: 100%; }
.tnum { font-variant-numeric: tabular-nums; }
/* route transitions: fast, quiet, and consistent with the operator-console feel */
.page-transition { animation: route-enter .18s ease-out both; transform-origin: 50% 0; will-change: opacity, transform; }
@keyframes route-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-transition { animation: none; } }
/* Workspace tabs: shared shell primitive */
.workspace-tabs-wrap { position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: var(--bg); padding: 6px 24px 5px; }
.workspace-tabs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.workspace-tabs-clear { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-4); font-size: 11px; white-space: nowrap; }
.workspace-tabs-clear:hover { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 30%, transparent); background: color-mix(in oklch, var(--bad) 9%, transparent); }
.workspace-tab { height: 30px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 0; background: var(--surface); color: var(--ink-2); transition: border-color .16s, background .16s, color .16s, box-shadow .16s; }
.workspace-tab__main { height: 100%; padding: 0 3px 0 9px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; background: transparent; color: inherit; }
.workspace-tab--active { border-color: color-mix(in oklch, var(--accent) 38%, var(--line)); background: color-mix(in oklch, var(--accent) 11%, var(--surface)); color: var(--ink); box-shadow: var(--shadow-sm); }
.workspace-tab--pinned { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.workspace-tab--dirty { border-color: color-mix(in oklch, var(--warn) 60%, transparent); background: color-mix(in oklch, var(--warn) 10%, var(--surface)); }
.workspace-tab__title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.workspace-tab__dirty-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn) 16%, transparent); }
.workspace-tab__pin, .workspace-tab__close { width: 21px; height: 21px; margin-right: 3px; border: 0; border-radius: 6px; display: grid; place-items: center; flex: 0 0 21px; background: transparent; color: var(--ink-4); }
.workspace-tab__pin:hover { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.workspace-tab__pin--active { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 16%, transparent); }
.workspace-tab__pin--close:hover { color: var(--bad); background: color-mix(in oklch, var(--bad) 12%, transparent); }
.workspace-tab__close:hover { color: var(--bad); background: color-mix(in oklch, var(--bad) 12%, transparent); }
.workspace-tabs-mobile { display: none; align-items: center; gap: 8px; justify-content: space-between; }
.workspace-tabs-mobile__more { margin-left: auto; }
.workspace-tabs-mobile__menu { position: absolute; z-index: 50; right: 24px; top: 51px; min-width: 220px; padding: 7px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.workspace-tabs-mobile__menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 7px; color: var(--ink-2); text-align: left; font-size: 12px; }
.workspace-tabs-mobile__menu button:hover { background: var(--surface); color: var(--ink); }
.workspace-tabs-mobile__menu button span { flex: 1; }
.compact-subnav { min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 5px 24px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.compact-subnav__title { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-right: 12px; border-right: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.compact-subnav__title-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent-glow); }
.compact-subnav__items { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 4px; overflow-x: hidden; }
.compact-subnav__groups { overflow: visible; }
.compact-subnav__group-wrap { position: relative; flex: 0 0 auto; }
.compact-subnav__group { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; }
.compact-subnav__group:hover, .compact-subnav__group.active { color: var(--ink); background: var(--surface); border-color: var(--line); }
.compact-subnav__group.active { color: var(--accent-bright); }
.compact-subnav__group-dropdown { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; min-width: 205px; max-width: min(280px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); animation: pop .14s ease-out both; }
.compact-subnav__group-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 7px 9px; border-radius: 7px; color: var(--ink); font-size: 12px; text-align: left; }
.compact-subnav__group-dropdown button:hover, .compact-subnav__group-dropdown button.active { color: var(--ink); background: var(--surface); }
.compact-subnav__group-dropdown button.active { color: var(--accent-bright); }
.compact-subnav__group-dropdown button .compact-subnav__dropdown-label { flex: 1; margin-left: 0; color: var(--ink); }
.compact-subnav__group-dropdown button .compact-subnav__dropdown-count { margin-left: auto; color: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.compact-subnav__item { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 29px; padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; }
.compact-subnav__item:hover { color: var(--ink); background: var(--surface); }
.compact-subnav__item.active { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 12%, var(--surface)); border-color: color-mix(in oklch, var(--accent) 28%, transparent); }
.compact-subnav__count { color: var(--ink-4); font-family: var(--mono); font-size: 10px; }
.compact-subnav__action { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-left: auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.compact-subnav__action:hover { color: var(--ink); background: var(--surface); }
.topbar--with-menu { height: 62px; min-height: 62px; flex-direction: row; align-items: center; gap: 14px; padding: 0 24px; }
.topbar--with-menu .topbar-main { height: 62px; padding: 0; }
.topbar--with-menu .topbar-main > div:first-child { flex: 0 0 auto; }
.topbar--with-menu .topbar-main > .compact-subnav--inline { flex: 1 1 auto; min-width: 0; }
.topbar--with-menu .topbar-main > div.compact-subnav--inline { flex: 1 1 auto; min-width: 0; }
.compact-subnav--inline { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 32px; padding: 0; gap: 8px; border: 0; background: transparent; }
.topbar--with-menu .topbar-main > div[style*="flex: 1"] { display: none; }
.topbar--with-menu .search { width: 260px; flex: 0 0 260px; }
.topbar--with-menu .search--open { width: auto; flex: none; }
.compact-subnav--inline .compact-subnav__title { padding-right: 8px; font-size: 11px; }
.compact-subnav--inline .compact-subnav__items { overflow: visible; }
.topbar--with-menu, .topbar--with-menu .topbar-main { overflow: visible; }
.compact-subnav--inline .compact-subnav__item { min-height: 28px; padding-left: 7px; padding-right: 7px; }
.compact-subnav--inline .compact-subnav__action { display: none; }
.compact-subnav__measure { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; }
.compact-subnav__measure-item { display: inline-flex; }
.compact-subnav__more-wrap { position: relative; flex: 0 0 auto; }
.compact-subnav__more { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.compact-subnav__more:hover { color: var(--ink); background: var(--surface); }
.compact-subnav__dropdown { position: absolute; z-index: 70; top: 35px; right: 0; min-width: 190px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.compact-subnav__dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border-radius: 7px; color: var(--ink-2); font-size: 12px; text-align: left; }
.compact-subnav__dropdown button:hover { color: var(--ink); background: var(--surface); }
.compact-subnav__dropdown button span:first-of-type { flex: 1; }
.compact-subnav__edit { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-4); }
.compact-subnav__edit:hover, .compact-subnav__edit.active { color: var(--accent-bright); border-color: color-mix(in oklch, var(--accent) 45%, transparent); background: color-mix(in oklch, var(--accent) 12%, transparent); }
.compact-subnav__editor { position: absolute; z-index: 75; top: 35px; right: 0; width: 260px; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.compact-subnav__editor-title { padding: 4px 8px 8px; color: var(--ink-3); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.compact-subnav__editor-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 7px; border-radius: 7px; color: var(--ink-2); font-size: 12px; }
.compact-subnav__editor-item:hover { background: var(--surface); color: var(--ink); }
.compact-subnav__editor-item.is-dragging { opacity: .45; background: var(--surface); }
.compact-subnav__editor-item.is-drop-target { color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.compact-subnav__drop-line { display: flex; align-items: center; gap: 7px; height: 18px; padding: 0 8px; color: var(--accent-bright); font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; }
.compact-subnav__drop-line::before { content: ''; height: 1px; flex: 1; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.compact-subnav__editor-item > span:not(.compact-subnav__editor-drag) { flex: 1; }
.compact-subnav__editor-drag { color: var(--ink-4); font-size: 17px; cursor: grab; }
.compact-subnav__editor-actions { display: flex; gap: 2px; }
.compact-subnav__editor-actions button { width: 23px; height: 23px; border-radius: 5px; color: var(--ink-3); }
.compact-subnav__editor-actions button:hover { background: var(--surface-2); color: var(--ink); }
.compact-subnav__editor-actions button:disabled { opacity: .25; }
@media (max-width: 700px) { .workspace-tabs-wrap { padding: 8px 12px; } .workspace-tabs { display: none; } .workspace-tabs-clear { display: none; } .workspace-tabs-mobile { display: flex; flex: 1; } .workspace-tabs-mobile .workspace-tab { max-width: calc(100% - 38px); } }

/* Interface preferences */
.rail-item__label { display: none; }
.rail-logo { background: transparent; color: var(--ink); box-shadow: none; gap: 10px; }
.rail-logo__mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: transparent; box-shadow: none; overflow: hidden; }
.rail-logo__mark svg { display: block; width: 38px; height: 38px; }
.app:not(.menu-classic) .rail-logo { width: 38px; margin-left: auto; margin-right: auto; padding: 0; justify-content: center; }
.rail-logo__label { display: none; font-size: 15px; font-weight: 800; letter-spacing: -0.04em; }
.app.menu-classic { grid-template-columns: 256px minmax(0, 1fr); }
.app.menu-classic.has-ctx { grid-template-columns: 256px minmax(0, 1fr); }
.app.menu-classic .rail { width: 256px; align-items: stretch; padding: 13px 12px 11px; background: var(--bg); }
.app.menu-classic .rail { min-height: 0; overflow: hidden; }
.app.menu-classic .rail-logo { display: flex; align-items: center; width: 100%; height: 38px; justify-content: flex-start; gap: 10px; padding: 0 12px; margin-bottom: 7px; }
.app.menu-classic .rail-logo__label { display: inline; }
.app.menu-classic .rail-scroll, .app.menu-classic .rail-foot { align-items: stretch; }
.app.menu-classic .rail-scroll > .rail-item, .app.menu-classic .rail-scroll > .rail-sep, .app.menu-classic .rail > .rail-item { display: flex; align-items: center; }
.app.menu-classic .rail-item { width: 100%; justify-content: flex-start; gap: 11px; padding: 0 12px; }
.app.menu-classic .rail-item.active::before { left: -12px; }
.app.menu-classic .rail-item__label { display: inline; font-size: 13.5px; font-weight: 500; }
.app.menu-classic .rail-tip { display: none; }
.app.menu-classic .rail-foot { flex: 0 0 auto; padding-top: 6px; background: var(--bg); }
.app.menu-classic .rail-foot .rail-item { display: flex; align-items: center; height: 36px; min-height: 36px; }
.app.menu-classic .rail-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ============ Shared CRM entity surfaces ============ */
.entity-page { max-width: 1480px; margin: 0 auto; }
.entity-page-header { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 8px 0 22px; }
.entity-page-header h1 { margin-top: 5px; font-size: 27px; letter-spacing: -.04em; }
.entity-page-header p { margin-top: 6px; font-size: 13px; }
.entity-page-header__actions { display: flex; align-items: center; gap: 8px; }
.entity-page-header--compact { align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 0 16px; }
.entity-page-header--compact h1 { margin: 0; font-size: 22px; }
.entity-page-header--compact .entity-page-header__actions { flex-wrap: wrap; margin-left: auto; }
.ui-select.ui-select--inline { width: auto; min-width: 0; }
.ui-select--inline select { max-width: 220px; }
.ui-tooltip-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2000; }
.ui-tooltip { position: absolute; transform: translateX(-50%); width: max-content; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; pointer-events: none; }
.entity-page-header__count { position: absolute; top: 13px; right: 0; color: var(--ink-4); font: 11px var(--mono); }
.crm-list-header { display: grid; grid-template-columns: minmax(150px, 240px) minmax(180px, 1fr) auto; align-items: center; gap: 16px; min-height: 62px; margin-bottom: 20px; flex-shrink: 0; }
.crm-list-header__title { min-width: 0; }
.crm-list-header__title .kicker { color: var(--accent-bright); margin-bottom: 7px; white-space: nowrap; }
.crm-list-header__title h1 { font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-list-header__middle { display: flex; justify-content: center; min-width: 0; }
.crm-list-search { display: flex; align-items: center; gap: 10px; width: 80%; min-width: 180px; min-height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-3); }
.crm-list-search > svg { flex-shrink: 0; }
.crm-list-search input { min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 12.5px; }
.crm-list-search:focus-within { border-color: var(--accent); }
.crm-list-search__filter { position: relative; flex-shrink: 0; border-left: 1px solid var(--line); border-radius: 0 5px 5px 0; }
.crm-list-search__filter.is-active { color: var(--accent-bright); }
.crm-list-search__count { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; background: var(--accent); color: white; border-radius: 99px; font-size: 9px; }
.crm-list-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.crm-list-header__actions .btn { white-space: nowrap; }
.crm-list-summary { min-height: 24px; margin: -8px 0 12px; }
.leads-stage__pipeline { font-size: 10px; color: var(--ink-3); margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-filter-options--pipeline { grid-column: 1 / -1; }
.crm-filter-chips { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.crm-filter-options .crm-filter-chip { position:relative; padding:0; flex:1 1 auto; }
.crm-filter-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.crm-filter-chip span { display:block; width:100%; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg-1); text-align:center; color:var(--ink-2); transition:background .15s,border-color .15s; }
.crm-filter-chip:hover span { border-color:var(--accent); }
.crm-filter-chip.is-selected span { border-color:var(--accent); background:var(--accent); color:white; }
.crm-filter-chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width: 1100px) { .crm-list-header { grid-template-columns: minmax(120px, 190px) minmax(160px, 1fr) auto; gap: 12px; } .crm-list-search { width: 100%; min-width: 0; } }
@media (max-width: 820px) { .crm-list-header { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; } .crm-list-header__middle { grid-row: 2; grid-column: 1 / -1; } .crm-list-header__title h1 { font-size: 22px; } }
@media (max-width: 540px) { .crm-list-header { grid-template-columns: minmax(0, 1fr); } .crm-list-header__actions { grid-row: 2; overflow-x: auto; padding: 2px 0; } .crm-list-header__middle { grid-row: 3; } }
.entity-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.entity-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 180px; color: var(--ink-4); }
.entity-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; }
.entity-column-menu { position: relative; }
.entity-column-menu summary { list-style: none; cursor: pointer; }
.entity-column-menu summary::-webkit-details-marker { display: none; }
.entity-column-menu__popover { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 220px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); }
.entity-column-menu__item { display: flex; align-items: center; gap: 8px; min-height: 31px; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.entity-column-menu__item input { accent-color: var(--accent); }
.entity-table-card { overflow: hidden; }
.entity-table-scroll { overflow-x: auto; }
.entity-table { min-width: 880px; }
.entity-table-skeleton { pointer-events: none; }
.skeleton { display: block; position: relative; overflow: hidden; border-radius: 6px; background: var(--surface-2); }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--ink) 8%, transparent), transparent); animation: skeleton-shimmer 1.25s ease-in-out infinite; }
.skeleton--head { width: 62px; height: 9px; }
.skeleton--cell { width: min(100%, 104px); height: 12px; }
.skeleton--person { width: 176px; height: 30px; border-radius: 8px; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.entity-table tbody tr { cursor: pointer; }
.entity-person { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.entity-person > div:not(.avatar) { display: flex; flex-direction: column; gap: 3px; }
.entity-person strong { font-size: 12.5px; }
.entity-person small { color: var(--ink-4); font: 10px var(--mono); }
.entity-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 230px; color: var(--ink-3); text-align: center; }
.entity-state strong { color: var(--ink); font-size: 14px; }
.entity-state__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 13%, var(--surface)); }
.entity-state--error { align-items: flex-start; padding: 24px; text-align: left; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.template-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 18px; }
.template-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 14%, var(--surface)); }
.template-card h3 { font-size: 15px; }
.template-card p { margin-top: 5px; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.template-card .badge { display: inline-flex; margin-top: 10px; font-size: 10px; }
.template-fields-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.template-fields-preview span { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-3); font-size: 10px; }
.template-fields-preview span.is-hidden { opacity: .45; text-decoration: line-through; }
.template-settings-drawer { width: min(720px, 100vw); background: var(--bg-2); }
.template-settings-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 30px; overflow-y: auto; }
.template-field-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.template-field-row div { display: flex; flex-direction: column; gap: 3px; }
.template-field-row strong { font-size: 12px; }
.template-field-row small { color: var(--ink-4); font: 10px var(--mono); }
.template-field-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 10px; white-space: nowrap; }
.template-field-drag { color: var(--ink-4); }
.contact-drawer { width: min(650px, 100vw); background: var(--bg-2); }
.contact-detail-drawer .lead-detail-topbar { padding-right: 70px; }
.contact-detail-form { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.contact-detail-form > .lead-fields-grid { border-top: 0; padding: 0; gap: 12px; }
.contact-detail-form .entity-form-field { padding: 0; }
.contact-detail-form .lead-section-footer { margin: 2px -14px -14px; justify-content: flex-end; align-items: center; }
.contact-form { display: flex; flex-direction: column; min-height: 100%; }
.contact-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 30px 22px; border-bottom: 1px solid var(--line); }
.contact-form__head h2 { margin-top: 6px; font-size: 22px; letter-spacing: -.03em; }
.contact-form__body { display: flex; flex-direction: column; gap: 15px; flex: 1; padding: 24px 30px; overflow-y: auto; }
fieldset.contact-form__body { border: 0; margin: 0; min-width: 0; }
.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.entity-form-field { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 11px; }
.entity-form-field b { margin-left: 3px; color: var(--bad); }
.entity-form-field .ui-input { font-size: 13px; }
.contact-form__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 30px; border-top: 1px solid var(--line); background: var(--surface); }
.form-error { padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--bad) 40%, transparent); border-radius: var(--r); color: var(--bad); background: color-mix(in oklch, var(--bad) 8%, transparent); font-size: 12px; }
@media (max-width: 700px) { .entity-page-header { align-items: flex-start; flex-direction: column; padding-bottom: 16px; } .entity-page-header__actions { width: 100%; } .entity-page-header__actions .btn-primary { flex: 1; justify-content: center; } .entity-toolbar { flex-wrap: wrap; } .entity-search { flex: 1 0 100%; } .entity-toolbar > .btn { flex: 1; justify-content: center; } .contact-form__head, .contact-form__body { padding-left: 18px; padding-right: 18px; } .contact-form__grid { grid-template-columns: 1fr; } .contact-form__footer { padding-left: 18px; padding-right: 18px; } }
.classic-context { margin-top: 8px; padding: 9px 6px 8px; border-top: 1px solid var(--line); }
.app.menu-classic .classic-context__head { display: none; }
.classic-context__head { padding: 0 6px 9px; }
.classic-context__title { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; }
.classic-context__sub { margin-top: 2px; color: var(--ink-4); font-size: 10.5px; }
.classic-context__action { width: 100%; justify-content: center; margin-top: 10px; }
.classic-context__group { margin-top: 8px; }
.classic-context__primary { margin-top: 0; }
.classic-context__label { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 7px; color: var(--ink-4); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: left; }
.classic-context__label:hover { color: var(--ink-2); }
.classic-context__label-count { margin-left: auto; letter-spacing: 0; }
.classic-context__label svg { margin-left: auto; flex: 0 0 auto; }
.classic-context__items { display: flex; flex-direction: column; gap: 2px; }
.classic-context__item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 9px; border-radius: 8px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; text-align: left; }
.classic-context__item:hover { background: var(--surface); color: var(--ink); }
.classic-context__item.active { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent); }
.classic-context__item svg { color: var(--ink-3); flex: 0 0 auto; }
.classic-context__item.active svg { color: var(--accent-bright); }
.classic-context__item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classic-context__count { margin-left: auto; color: var(--ink-4); font-family: var(--mono); font-size: 10px; }

.ui-preferences { display: flex; flex-direction: column; gap: 20px; }
.ui-preference-block { display: flex; flex-direction: column; gap: 12px; }
.ui-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.ui-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-mode-card { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--ink-2); transition: border-color .14s, background .14s, color .14s, box-shadow .14s; }
.ui-mode-card:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface-2); }
.ui-mode-card.is-selected { border-color: color-mix(in oklch, var(--accent) 62%, transparent); background: color-mix(in oklch, var(--accent) 11%, var(--surface)); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent); }
.ui-mode-card__icon { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 8px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.ui-mode-card__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ui-mode-card__label { font-size: 12px; font-weight: 700; }
.ui-mode-card__desc { color: var(--ink-4); font-size: 10.5px; line-height: 1.3; }
.ui-mode-card__check { margin-left: auto; color: var(--good); flex: 0 0 auto; }
.menu-order-block { padding-top: 18px; border-top: 1px solid var(--line); }
.ui-preference-row__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.menu-order-list { display: flex; flex-direction: column; gap: 6px; }
.menu-order-item { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); transition: border-color .14s, background .14s, opacity .14s, transform .14s; }
.menu-order-item:hover { border-color: var(--line-2); background: var(--surface-2); }
.menu-order-item.is-dragging { opacity: .45; transform: scale(.985); border-color: var(--accent); }
.menu-order-item.is-drop-target { border-color: color-mix(in oklch, var(--accent) 70%, var(--line)); background: color-mix(in oklch, var(--accent) 10%, var(--surface-2)); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent); }
.menu-order-drop-line { display: flex; align-items: center; gap: 8px; min-height: 18px; padding: 0 8px; color: var(--accent-bright); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.menu-order-drop-line::before, .menu-order-drop-line::after { content: ''; height: 1px; flex: 1; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.menu-order-item__drag { width: 18px; color: var(--ink-4); font-size: 19px; line-height: 1; cursor: grab; text-align: center; }
.menu-order-item__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 13%, transparent); }
.menu-order-item__label { flex: 1; font-size: 12.5px; font-weight: 600; }
.menu-order-item__actions { display: flex; gap: 2px; }
.menu-order-item__actions .btn-icon { width: 27px; height: 27px; padding: 4px; color: var(--ink-3); }
.menu-order-item__actions .btn-icon:disabled { opacity: .25; cursor: default; }
.lead-create-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: oklch(0 0 0 / .56); backdrop-filter: blur(5px); }
.lead-create-dialog { width: min(520px, 100%); padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow-pop); animation: pop .18s ease-out both; }
.lead-create-form, .entity-record-form { display: flex; flex-direction: column; gap: 14px; }
.lead-create-form label, .entity-record-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 12px; }
.lead-create-form input, .entity-record-form input { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); color: var(--ink); outline: none; font: inherit; }
.lead-create-form input:focus, .entity-record-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.entity-record-drawer { width: min(520px, calc(100vw - 32px)); padding: 28px; }
.entity-record-form h2 { margin: 4px 0 10px; }
.smart-process-record-form { gap: 16px; }
.smart-process-record-drawer { background: var(--bg-2); }
.smart-process-record-form { min-height: 100%; display: flex; flex-direction: column; gap: 0; background: var(--bg-2); }
.smart-process-record-form__header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 34px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.smart-process-record-form__header h1 { margin: 4px 0 0; font-size: 27px; }
.smart-process-record-form__actions { display: flex; align-items: center; gap: 8px; padding-right: 30px; }
.smart-process-record-form__stages { margin: 0; padding: 14px 34px 8px; background: var(--bg-2); }
.smart-process-record-form__tabs { padding: 8px 34px 0; background: var(--bg-2); }
.smart-process-record-form__body { display: grid; grid-template-columns: minmax(420px, 700px) minmax(420px, 1fr); gap: 24px; flex: 1; padding: 24px 34px 110px; }
.smart-process-record-form__main { min-width: 0; }
.smart-process-record-form__main .lead-detail-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.smart-process-record-form__activity { min-width: 0; padding-top: 0; }
.smart-process-record-form__activity .lead-activity-card { background: var(--surface); border: 1px solid var(--line); }
.smart-process-record-form__contact { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); color: var(--ink-3); }
.smart-process-record-form__contact input { border: 0; padding: 0; background: transparent; box-shadow: none; }
.smart-process-record-form__add { margin: 10px 0 20px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.smart-process-record-form__footer { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 34px; border-top: 1px solid var(--line); background: color-mix(in oklch, var(--surface) 96%, transparent); backdrop-filter: blur(12px); }
.smart-process-record-form__error { margin: 0 34px 12px; }
.smart-process-record-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.crm-record-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; }
.smart-process-record-form__body.is-wide { grid-template-columns: minmax(0, 1fr); }
.crm-history__filters { display: flex; gap: 12px; margin-bottom: 18px; }
.crm-history__filters .ui-input { width: min(100%, 320px); }
.crm-history__table { min-width: 760px; width: 100%; }
.crm-history__table th { padding: 16px 20px; }
.crm-history__table th:nth-child(1) { width: 190px; }
.crm-history__table th:nth-child(2) { width: 250px; }
.crm-history__table th:nth-child(3) { width: 270px; }
.crm-history__table td { padding: 18px 20px; vertical-align: top; }
.crm-history__table th .link-btn { color: inherit; font: inherit; }
.crm-history__table td:first-child { white-space: nowrap; width: 190px; }
.crm-history__author { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.crm-history__description { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-relations { display: grid; gap: 14px; }
.crm-relations__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.crm-relations__picker { padding: 18px; }
.crm-relations__branch { display: grid; gap: 14px; margin-left: 24px; border-left: 2px solid var(--line-2); padding-left: 20px; }
.crm-relation-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.crm-relation-card.is-current-record { background: var(--bg-2); }
.crm-relation-card__details { min-width: 0; flex: 1; }
.crm-relation-card__details h3 { margin: 5px 0 12px; font-size: 18px; overflow-wrap: anywhere; }
.crm-relation-card__title { display: block; margin: 5px 0 12px; text-align: left; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.crm-relation-card__stage { display: inline-block; margin-bottom: 12px; padding: 5px 10px; border-radius: 6px; background: color-mix(in srgb, var(--stage-color) 45%, #10151c); color: #fff; font-size: 12px; }
.crm-relation-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0 0 12px; font-size: 12px; }
.crm-relation-card dt { color: var(--ink-3); }
.crm-relation-card dd { margin: 0; overflow-wrap: anywhere; }
.crm-activity-editor { position: relative; }
.crm-activity-editor.is-todo textarea { min-height: 76px; padding-right: 120px; }
.crm-activity-menu { position: absolute; top: 10px; right: 10px; z-index: 4; }
.crm-activity-menu summary { list-style: none; cursor: pointer; }
.crm-activity-menu summary::-webkit-details-marker { display: none; }
.crm-activity-menu__popover { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-pop); }
.crm-activity-menu__popover button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.crm-activity-menu__popover button:hover { background: var(--surface-2); }
.crm-todo-fields { display: grid; gap: 12px; margin-top: 14px; }
.crm-activity-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; }
.crm-selected-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.crm-selected-files li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.crm-selected-files li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.crm-activity-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crm-activity-files .btn { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.crm-activity-files .btn > svg { flex-shrink: 0; }
.crm-event-label { display: block; margin-bottom: 4px; font-weight: 600; }
.crm-todo-actions.is-overdue time { color: var(--bad); }
.crm-next-step { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.crm-next-step > div { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; flex: 1; font-size: 12px; }
.crm-next-step > div > svg { grid-row: span 2; }
.crm-next-step > div > span { color: var(--ink-3); }
@media (max-width: 700px) { .crm-history__filters { flex-direction: column; } .crm-history__filters .ui-input { width: 100%; } .crm-relation-card { flex-wrap: wrap; padding: 16px; gap: 12px; } .crm-relation-card__unlink { margin-left: 52px; } .crm-relations__branch { margin-left: 8px; padding-left: 10px; } .crm-next-step { flex-wrap: wrap; } }
.crm-record-links { display: grid; gap: 12px; margin-bottom: 16px; }
.crm-link-controls { display: grid; gap: 12px; }
.process-settings-pipeline { display: grid; gap: 12px; padding: 16px; }
.localized-name-field { min-width: 0; display: grid; gap: 8px; }
.localized-name-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.localized-name-inputs .ui-field { min-width: 0; }
.localized-name-inputs .ui-input { min-width: 0; width: 100%; }
@media (max-width: 600px) { .localized-name-inputs { grid-template-columns: 1fr; gap: 8px; } }
.crm-record-fieldset.template-settings-body { padding: 22px 30px; }
.process-settings-stage { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: end; gap: 10px; }
.process-settings-stage__actions { display: flex; gap: 4px; padding-bottom: 3px; }
@media (max-width: 600px) { .process-settings-stage { grid-template-columns: minmax(0, 1fr) 54px; } .process-settings-stage__actions { grid-column: 1 / -1; } }
.crm-picker-input { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); }
.crm-picker-input.has-create { padding-right: 42px; }
.crm-picker-input:focus-within { border-color: var(--accent); }
.crm-picker-input > input { flex: 1; min-width: 100px; width: 0; padding: 3px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; outline: none; box-shadow: none; }
.crm-picker-create { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--accent-ink); cursor: pointer; }
.crm-picker-create:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.crm-picker-selected { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.crm-picker-selected__title, .crm-picker-selected__remove { padding: 4px 7px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.crm-picker-selected__title { overflow-wrap: anywhere; text-align: left; }
.crm-picker-selected__remove { display: grid; place-items: center; flex-shrink: 0; color: var(--ink-3); }
.crm-picker-selected__remove:hover { color: var(--ink); }
.crm-picker-create:focus-visible, .crm-picker-selected button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-picker-create:disabled, .crm-picker-selected__remove:disabled { opacity: .5; cursor: default; }
.crm-search-result { justify-content: flex-start; white-space: normal; text-align: left; }
.crm-linked-record, .crm-todo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.crm-linked-record { justify-content: space-between; border-bottom: 1px solid var(--line); }
.crm-pipeline-select { padding: 12px 34px; }
.smart-process-record-form .lead-activity-compose { padding: 16px; }
.smart-process-record-form .lead-activity-compose__footer { margin-top: 12px; }
.smart-process-record-form .lead-timeline { margin-top: 18px; }
.smart-process-record-form .lead-stage-step:disabled { cursor: wait; opacity: .7; }
.smart-process-record-form textarea { width: 100%; min-height: 96px; resize: vertical; padding: 10px 11px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); color: var(--ink); outline: none; font: inherit; }
.smart-process-record-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
@media (max-width: 900px) { .smart-process-record-drawer { width: 100vw; } .smart-process-record-form__body { grid-template-columns: 1fr; padding: 18px 20px 96px; } .smart-process-record-form__activity { order: 2; } .smart-process-record-form__header, .smart-process-record-form__stages, .smart-process-record-form__tabs { padding-left: 20px; padding-right: 20px; } .smart-process-record-form__actions { padding-right: 22px; } .smart-process-record-form__footer { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 700px) { .smart-process-record-form__grid { grid-template-columns: 1fr; } .entity-record-drawer { width: 100%; padding: 20px; } .smart-process-record-form__header { align-items: flex-start; min-height: 72px; } .smart-process-record-form__header h1 { font-size: 22px; } .smart-process-record-form__actions { display: none; } .smart-process-record-form__stages { overflow-x: auto; } .smart-process-record-form__tabs { overflow-x: auto; } }
.entity-record-board { display: flex; gap: 14px; overflow-x: auto; min-height: 360px; padding-bottom: 12px; }
.entity-record-column { flex: 1 0 260px; min-height: 260px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.entity-record-column > header { display: flex; align-items: center; gap: 8px; padding: 2px 2px 12px; }
.entity-record-column > header .sb-badge { margin-left: auto; }
.entity-record-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 6px; padding: 13px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.entity-record-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.entity-record-card small, .entity-record-card span { color: var(--ink-3); font-size: 11px; }
.entity-detail-fields { display: grid; gap: 12px; margin-top: 24px; }
.entity-detail-fields > div { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.entity-detail-fields span { color: var(--ink-3); font-size: 12px; }
.ui-field { display: flex; flex-direction: column; gap: 6px; color: var(--ink-3); font-size: 12px; }
.ui-field__label { display: flex; gap: 3px; align-items: center; }
.ui-field__label b { color: var(--bad); }
.ui-input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); color: var(--ink); outline: none; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.ui-input::placeholder { color: var(--ink-4); }
.ui-input:focus { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.ui-select { position: relative; display: block; width: 100%; }
.ui-select select { appearance: none; padding-right: 36px; cursor: pointer; }
.ui-select > svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.ui-select option { background: var(--bg-2); color: var(--ink); }
.ui-textarea { min-height: 88px; resize: vertical; }
.lead-create-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lead-create-dialog h2 { margin-top: 5px; font-size: 22px; }
.lead-create-dialog p { margin-top: 6px; font-size: 12.5px; }
.lead-create-options { display: flex; flex-direction: column; gap: 8px; }
.lead-create-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--ink-2); text-align: left; transition: border-color .14s, background .14s, transform .14s; }
.lead-create-option:hover { border-color: var(--accent); background: var(--surface); transform: translateX(2px); }
.lead-create-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lead-create-option small { color: var(--ink-4); font-size: 11px; }
.lead-create-option__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.lead-create-option__icon--1 { color: var(--c-prop); background: color-mix(in oklch, var(--c-prop) 14%, transparent); }
.lead-create-option__icon--2 { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.lead-create-option__meta { color: var(--ink-4); font-family: var(--mono); font-size: 10px; white-space: nowrap; }

/* ============================================================
   Responsive shell
   The desktop console keeps its rail/context navigation. Below
   tablet width the context rail becomes a bottom navigation and
   page grids collapse without allowing inline page layouts to
   create horizontal overflow.
   ============================================================ */
@media (max-width: 1199px) {
  :root { --sidebar-w: 0px; --pad: 16px; --gap: 12px; }

  .app.has-ctx { grid-template-columns: 64px minmax(0, 1fr); }
  .app.menu-classic, .app.menu-classic.has-ctx { grid-template-columns: 256px minmax(0, 1fr); }
  .ctx { display: none; }
  .main, .content, .page-transition, .page { min-width: 0; }
  .content { overflow-x: hidden; }
  .topbar { padding-left: 18px; padding-right: 18px; }
  .search { width: min(300px, 32vw); }

  .page .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .page .grid > *, .page > *, .card, .glowcard { min-width: 0; }
  .page-wide { padding-left: 22px; padding-right: 22px; }

  .card:has(.tbl) { overflow-x: auto; }
  .tbl { min-width: 640px; }
}

@media (max-width: 760px) {
  :root { --pad: 14px; --gap: 10px; --row-h: 44px; }

  html, body, #root { min-height: 100%; }
  .app, .app.has-ctx {
    display: block;
    height: 100%;
    min-height: 100svh;
    overflow: hidden;
  }
  .main { height: 100svh; min-height: 0; }

  /* Compact bottom navigation for touch devices. */
  .rail {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: 62px;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-right: 0;
    border-top: 1px solid var(--line);
    background: color-mix(in oklch, var(--bg-2) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.25);
  }
  .rail-logo {
    width: 38px;
    height: 38px;
    margin: 0 2px 0 0;
  }
  .app.menu-classic .rail { width: 100%; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); }
  .app.menu-classic .rail-logo { width: 38px; padding: 0; margin: 0 2px 0 0; justify-content: center; }
  .app.menu-classic .rail-logo__label { display: none; }
  .app.menu-classic .rail-item { width: 40px; padding: 0; justify-content: center; }
  .app.menu-classic .rail-item__label { display: none; }
  .app.menu-classic .rail-scroll > .rail-item, .app.menu-classic .rail > .rail-item { display: grid; }
  .app.menu-classic .classic-context { display: none; }
  .rail-scroll {
    flex: 1;
    width: auto;
    min-width: 0;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    gap: 2px;
  }
  .rail-foot {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0 0 0 4px;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .rail-sep { display: none; }
  .rail-item { width: 40px; height: 40px; border-radius: 11px; }
  .rail-item.active::before {
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 0 0 4px 4px;
  }
  .rail-tip { display: none; }
  .rail-dot { top: 5px; right: 5px; }

  .topbar {
    height: auto;
    min-height: 58px;
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topbar-main { height: auto; min-height: 58px; padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar--with-menu .topbar-main > div:first-child { flex: 0 1 auto; }
  .topbar--with-menu .topbar-main > .compact-subnav--inline { flex: 1 0 100%; }
  .topbar--with-menu .topbar-main > div.compact-subnav--inline { flex: 1 0 100%; }
  .topbar--with-menu { height: auto; min-height: 58px; padding: 0; }
  .topbar--with-menu .topbar-main { height: auto; min-height: 58px; padding: 10px 12px; }
  .topbar--with-menu .search { width: 100%; flex: 1 0 100%; }
  .compact-subnav--inline { order: 5; flex: 1 0 100%; max-width: none; min-width: 0; }
  .compact-subnav__dropdown { top: 33px; right: 0; }
  .topbar > div:first-child, .topbar-main > div:first-child { max-width: calc(100% - 120px); }
  .tb-title { font-size: 14px; }
  .tb-crumb { display: none; }
  .topbar > div[style*="flex: 1"], .topbar-main > div[style*="flex: 1"] { display: none; }
  .search {
    order: 5;
    flex: 1 0 100%;
    width: 100%;
    min-height: 36px;
  }
  .search kbd { display: none; }
  .topbar .btn:not(.btn-icon) { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }

  /* Mobile header: actions stay on one compact row, search opens on demand. */
  .topbar-main { align-items: center; row-gap: 8px; }
  .topbar-main { display: grid; grid-template-columns: minmax(0, 1fr) 100px 36px 36px; grid-auto-rows: 36px; column-gap: 8px; row-gap: 8px; align-items: center; }
  .topbar--with-menu .topbar-main { min-height: 80px; height: auto; }
  .topbar--with-menu .topbar-main > .compact-subnav--inline,
  .topbar--with-menu .topbar-main > div.compact-subnav--inline { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .topbar--with-menu .topbar-main > .compact-subnav--inline,
  .topbar--with-menu .topbar-main > div.compact-subnav--inline { order: 0; }
  .topbar--with-menu .topbar-main > div[style*="flex: 1"] { display: none; }
  .search { display: none; }
  .search-trigger { display: inline-grid; order: 2; flex: 0 0 36px; }
  .topbar--with-menu .search-trigger { grid-column: 1; grid-row: 2; justify-self: start; }
  .topbar--with-menu .topbar-quick-actions { grid-column: 2; grid-row: 2; justify-self: center; }
  .search--open { display: none; }
  .day-button { order: 2; max-width: 42px !important; padding: 8px !important; justify-content: center; }
  .topbar--with-menu .day-button { grid-column: 3; grid-row: 2; }
  .day-button > span { display: none; }
  .topbar-main > button[title="Уведомления"] { order: 2; }
  .topbar--with-menu > .topbar-main > button[title="Уведомления"] { grid-column: 4; grid-row: 2; }
  .topbar-main > .btn-primary { order: 2; max-width: 42px !important; padding: 8px !important; font-size: 0; }
  .topbar--with-menu > .topbar-main > .btn-primary { grid-column: 4; grid-row: 2; }
  .topbar-main > .btn-primary svg { margin: 0; }
  .mobile-search-popover { position: absolute; z-index: 90; inset: 0; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 0; background: var(--bg); box-shadow: 0 0 0 3px var(--accent-glow); animation: search-reveal .18s ease-out both; }
  .mobile-search-popover .search__icon { display: inline-flex; color: var(--ink-3); }
  .mobile-search-popover input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
  .assistant-popover { position: fixed; top: auto; right: 12px; bottom: 74px; width: min(300px, calc(100vw - 24px)); }
  .help-drawer { width: 100vw; padding: 20px 16px; }

  /* Stack page actions below the title instead of squeezing them off-screen. */
  .section-head { align-items: stretch !important; gap: 12px !important; margin-bottom: 16px !important; }
  .section-head > div:first-child { min-width: 0; }
  .section-head__actions { width: 100%; flex-wrap: wrap; gap: 6px !important; }
  .section-head__actions > * { min-width: 0; }
  .section-head__actions .btn { flex: 1 1 auto; justify-content: center; }
  .section-head__actions .btn-primary { flex: 0 0 auto; }

  .workspace-tabs-wrap { padding: 8px 12px; }
  .compact-subnav { padding: 5px 12px; gap: 9px; }
  .compact-subnav__title { padding-right: 9px; }
  .compact-subnav__action { display: none; }
  .workspace-tabs-mobile__menu { right: 12px; top: 49px; max-width: calc(100vw - 24px); }

  .content { padding-bottom: 62px; overflow-x: hidden; }
  .page, .page-wide { padding: 18px 12px 84px; max-width: none; }
  .page .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .page .grid > * { min-width: 0; }
  .page h1.display { font-size: 24px !important; }
  .page .card-head { padding: 13px 14px; flex-wrap: wrap; }
  .page .card-pad { padding: 14px; }
  .page .tbl { min-width: 650px; }
  .tbl th, .tbl td { padding-left: 12px; padding-right: 12px; }
  .card:has(.tbl) { overflow-x: auto; }

  /* Kanban remains intentionally horizontally scrollable, while its shell and cards stay within the viewport. */
  .page-wide { overflow-x: hidden; }
  .page-wide > .section-head { flex: 0 0 auto; }
  .page-wide > div[style*="overflowX"] { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
  .page-wide > div[style*="overflowX"] > div { max-width: 280px; }

  /* Form/action rows should wrap instead of pushing the page wider. */
  .page form, .page .btn-row, .page .filters, .page .toolbar { max-width: 100%; }
  .page input, .page textarea, .page select { max-width: 100%; }
  .page [style*="display: flex"] { min-width: 0; }
  .page [style*="display: flex"] > * { min-width: 0; }

  .usermenu {
    left: 12px;
    right: 12px;
    bottom: 74px;
    width: auto;
    max-width: none;
  }
  .ui-mode-grid { grid-template-columns: 1fr; }
  .ui-preference-row { align-items: flex-start; }
  .ui-preference-row__head { align-items: flex-start; flex-direction: column; }
  .um-backdrop { bottom: 62px; }
}

@media (max-width: 420px) {
  .rail-logo { width: 34px; height: 34px; }
  .rail-item { width: 35px; height: 38px; }
  .rail-foot .rail-item:last-child { display: none; }
  .topbar > div:first-child { max-width: calc(100% - 96px); }
  .page, .page-wide { padding-left: 10px; padding-right: 10px; }
  .btn { padding-left: 10px; padding-right: 10px; }
}

.field-access-matrix { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.process-field-builder { display:grid; gap:14px; }
.process-field-builder__toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.process-field-builder__toolbar p { margin:0; font-size:13px; }
.process-field-builder__toolbar .btn { flex-shrink:0; }
.process-field-group { overflow:hidden; padding:0; transition:border-color .15s; }
.process-field-group.is-drop-target { border-color:var(--accent,#8b7aff); }
.process-field-group__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.process-field-group__head h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; min-width:0; }
.process-field-group__actions { display:flex; gap:4px; flex-shrink:0; }
.process-field-group__settings { display:grid; gap:12px; padding:14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.process-field-list { padding:8px; min-height:66px; }
.process-field-row { border:1px solid transparent; border-radius:8px; }
.process-field-row + .process-field-row { margin-top:3px; }
.process-field-row.is-expanded { border-color:var(--line); background:var(--surface-2); }
.process-field-row.is-dragging { opacity:.35; }
.process-field-row__head { display:flex; align-items:center; gap:5px; min-height:42px; padding:4px; }
.process-field-grip { cursor:grab; color:var(--ink-3); touch-action:none; }
.process-field-drag-ghost { position:fixed; z-index:120; pointer-events:none; display:flex; align-items:center; gap:8px; max-width:250px; padding:10px 14px; border:1px solid var(--accent); border-radius:8px; background:var(--surface-2); box-shadow:var(--shadow-pop); font-size:13px; }
.process-field-grip:active { cursor:grabbing; }
.process-field-row__title { display:flex; align-items:center; gap:8px; flex:1; min-width:0; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; padding:6px 0; font:inherit; font-size:13px; }
.process-field-row__title > span:first-of-type { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.process-field-row__title > svg { flex-shrink:0; }
.process-field-type { margin-left:auto; font-size:12px; font-weight:400; white-space:nowrap; }
.process-field-identifier { display:inline-flex; align-items:center; gap:6px; min-width:0; flex-shrink:0; }
.process-field-identifier code { font-family:var(--mono); font-size:11px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.process-field-copy-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.process-field-copy-status.is-error { position:static; width:auto; height:auto; clip-path:none; font-size:11px; color:var(--bad); max-width:200px; }
.process-field-identifiers { display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:12px; user-select:text; }
.process-field-database-id { display:flex; align-items:center; gap:6px; }
@media(max-width:700px) { .process-field-row__head { flex-wrap:wrap; } .process-field-row__title { flex-basis:calc(100% - 48px); } .process-field-identifier code { max-width:120px; } }
.process-field-required { color:var(--accent,#8b7aff); }
.process-field-row__editor { display:grid; gap:12px; padding:10px 14px 14px; border-top:1px solid var(--line); }
.process-field-row__options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.process-field-row__toggles { display:flex; flex-wrap:wrap; gap:20px; }
.process-field-row__toggles label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.process-field-empty { padding:14px 8px; font-size:13px; color:var(--ink-3); text-align:center; }
.process-field-add { margin:4px; }
.process-field-drop-marker { height:3px; border-radius:2px; background:var(--accent,#8b7aff); margin:4px; box-shadow:0 0 0 3px #8b7aff22; pointer-events:none; }
.process-field-builder__status { min-height:18px; font-size:12px; color:var(--ink-3); }
.process-access-preview { display:flex; gap:8px 14px; flex-wrap:wrap; font-size:11px; color:var(--ink-3); padding:0 14px 8px; }
.process-field-group > .process-access-preview { padding:8px 14px 0; }
.process-access-preview__role.is-level-2 { color:var(--ink-2); }
.process-field-access-button { white-space:nowrap; flex-shrink:0; }
.process-field-access-drawer { width:min(680px,calc(100vw - 110px)); }
.process-field-access-body { display:grid; gap:16px; }
.process-field-access-body p { margin:0; font-size:13px; }
.process-field-access-body .field-access-matrix { grid-template-columns:1fr; }
.process-field-access-body h3 { font-size:14px; margin:0 0 10px; }
.process-effective-access { font-size:12px; }
.process-effective-access th { white-space:normal; }
@media(max-width:600px) { .process-field-builder__toolbar { align-items:flex-start; } .process-field-row__options { grid-template-columns:1fr; } .process-field-type { display:none; } .process-field-group__head { padding:10px; } }
.crm-field-group { grid-column:1 / -1; min-width:0; border-top:1px solid var(--line); padding-top:16px; }
.crm-field-group__fields { display:grid; gap:14px; grid-template-columns:1fr; }
.crm-field-group__fields--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.process-settings-pipeline summary { cursor:pointer; font-weight:600; }
@media(max-width:600px) { .field-access-matrix,.crm-field-group__fields--2 { grid-template-columns:1fr; } }

/* Headings belong to the scrolling content; only action footers stay visible. */
.entity-drawer__scroll:has(> .entity-drawer__frame) { overflow:hidden; }
.entity-drawer__scroll > .entity-drawer__frame { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
.entity-drawer__frame > .entity-drawer__content { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.entity-drawer__frame > .contact-form__footer,
.entity-drawer__frame > .smart-process-record-form__footer { position:relative; flex:0 0 auto; margin-top:0; z-index:5; background:var(--surface); }
.entity-drawer__content > .contact-form__head,
.entity-drawer__content > .smart-process-record-form__header,
.entity-drawer__content > .lead-detail-tabs { position:static; }
.entity-drawer__content > .template-settings-body,
.entity-drawer__content > .contact-form__body,
.entity-drawer__content > .process-field-access-body,
.entity-drawer__content > .process-settings-scroll,
.entity-drawer__content > .smart-process-record-form__body { overflow:visible; min-height:0; flex:none; }
.entity-drawer__content > .process-settings-scroll { display:block; box-sizing:border-box; }
.process-settings-scroll > :not(:last-child) { margin-bottom:18px; }
.entity-drawer__content > .smart-process-record-form__body { padding-bottom:24px; }
.process-field-row__head .process-field-delete { flex-shrink:0; white-space:nowrap; color:var(--bad); border-color:color-mix(in oklch,var(--bad) 35%,var(--line)); background:color-mix(in oklch,var(--bad) 7%,transparent); margin-left:6px; }
.process-field-row__head .process-field-delete:hover { border-color:var(--bad); background:color-mix(in oklch,var(--bad) 15%,transparent); }
.process-field-row__head .process-field-delete:focus-visible { outline:2px solid var(--bad); outline-offset:2px; }

.crm-list-filters { margin-bottom:16px; padding:16px; }
.crm-list-filters__fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end; }
.crm-list-filters__toggle { display:flex; align-items:center; gap:10px; min-height:44px; }
.crm-list-filters__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
/* Compact shared filters and calendar. Native dialog provides focus isolation and restoration. */
.crm-filter-modal{margin:auto;padding:0;width:min(640px,calc(100vw - 32px));max-height:90dvh;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);color:var(--ink);box-shadow:0 24px 80px #0008;overflow:visible}
.crm-filter-modal::backdrop{background:#080a10aa;backdrop-filter:blur(4px)}
.crm-filter-modal--compact{width:min(440px,calc(100vw - 32px))}.crm-filter-modal--compact .crm-filter-modal__body{grid-template-columns:1fr}
.crm-filter-modal form{display:flex;flex-direction:column;max-height:90dvh}
.crm-filter-modal header,.crm-filter-modal footer{display:flex;align-items:center;gap:8px;padding:16px 20px;flex-shrink:0}
.crm-filter-modal header{justify-content:space-between;border-bottom:1px solid var(--line)}
.crm-filter-modal h2{font-size:18px;margin:0}.crm-filter-modal footer{border-top:1px solid var(--line)}.crm-filter-modal footer>span{flex:1}
.crm-filter-modal__body{overflow:auto;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
.crm-filter-options,.crm-filter-amount{border:0;margin:0;padding:0;min-width:0}.crm-filter-options legend,.crm-filter-amount legend{font-weight:600;font-size:13px;margin-bottom:10px}
.crm-filter-options label,.crm-client-options label{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;padding:5px 0}.crm-filter-options input,.crm-client-options input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.crm-filter-options__list{max-height:150px;overflow:auto}.crm-filter-amount,.crm-filter-modal__body>.ui-field,.crm-filter-modal__body>.entity-field{grid-column:1/-1}.crm-filter-amount>div{display:flex;align-items:end;gap:10px}.crm-filter-amount .ui-field{flex:1}.crm-filter-amount>div>span{padding-bottom:12px}
.ui-calendar-control{position:relative;min-width:0}.ui-calendar-trigger{display:flex;gap:10px;align-items:center;text-align:left;width:100%;cursor:pointer;font:inherit;color:var(--ink)}
.ui-calendar-popover{position:fixed;z-index:10000;padding:12px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-sizing:border-box;box-shadow:0 10px 30px #0004;max-height:calc(100dvh - 24px);overflow:auto}
.ui-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.ui-calendar-nav strong{font-size:13px;text-transform:capitalize}
.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:8px 0}.ui-calendar-grid>*{text-align:center;min-width:0}.ui-calendar-grid small{color:var(--ink-3);font-size:11px;padding:5px 0}.ui-calendar-grid button{border:0;border-radius:6px;background:transparent;color:var(--ink);height:32px;cursor:pointer}.ui-calendar-grid button:hover{background:var(--bg-2)}.ui-calendar-grid .is-outside{opacity:.35}.ui-calendar-grid .is-today{box-shadow:inset 0 0 0 1px var(--accent)}.ui-calendar-grid .is-between{background:#8b7aff25}.ui-calendar-grid .is-selected{background:var(--accent);color:white;opacity:1}
.ui-calendar-shortcuts{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}.ui-calendar-shortcuts .btn{font-size:11px;padding:5px 7px}.ui-calendar-time{display:flex;align-items:center;gap:5px;margin:10px 0}.ui-calendar-time select{width:60px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--ink)}.ui-calendar-required{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.crm-client-options{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:16px}.crm-client-options h3{margin:0 0 8px;font-size:14px}.crm-client-options p{font-size:12px;margin:0 0 10px}.crm-client-options>div{display:flex;gap:24px}
@media(max-width:560px){.crm-filter-modal__body{grid-template-columns:1fr}.crm-filter-modal footer{flex-wrap:wrap;padding:12px}.crm-filter-modal header{padding:12px 16px}}

/* Structured client details share the CRM form controls and density. */
.crm-multi-values{display:grid;gap:8px}.crm-multi-values__row{display:flex;gap:6px;align-items:center}.crm-multi-values__row>input{flex:1;min-width:0}.crm-multi-values__row>select{width:110px}.crm-multi-values .link-btn{justify-self:start;display:flex;align-items:center;gap:5px}
.crm-structured-value{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.crm-structured-value>label{display:grid;gap:5px;min-width:0}.crm-structured-value>label>span{font-size:12px}.crm-structured-value>p{grid-column:1/-1}
.crm-user-checkboxes{display:flex;flex-wrap:wrap;gap:10px 16px;max-height:140px;overflow:auto;padding:8px 0}.crm-user-checkboxes>label{display:flex;align-items:center;gap:6px}.crm-user-checkboxes input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.crm-logo-value{display:flex;gap:10px;align-items:center}.crm-logo-value>img{width:40px;height:40px;object-fit:contain;border-radius:8px}.crm-logo-value>input{flex:1;min-width:0}
@media(max-width:540px){.crm-structured-value{grid-template-columns:1fr}.crm-multi-values__row>select{width:90px}}
/* Shared loading surfaces; reduced motion keeps placeholders static. */
.ui-skeleton{display:block;flex-shrink:0;max-width:100%;border-radius:6px;background:color-mix(in srgb,var(--ink-3,#858591) 15%,var(--surface,#19191f));position:relative;overflow:hidden}
.ui-skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ink,#eee) 9%,transparent) 50%,transparent 80%);animation:skeleton-shimmer 1.7s ease-in-out infinite}
@keyframes skeleton-shimmer{to{transform:translateX(100%)}}
.ui-skeleton-frame{min-width:0}.ui-skeleton-frame>.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.crm-list-header.ui-skeleton-frame>div[aria-hidden]{display:contents}
.smart-process-record-form__body.record-loading{display:block;padding:0;flex:1;min-height:0;overflow-y:auto}
.skeleton-app.app{grid-template-columns:256px minmax(0,1fr)}.skeleton-app .skeleton-app-rail{width:100%}
.skeleton-round{border-radius:50%}.skeleton-person{display:flex;align-items:center;gap:12px}.skeleton-person>div{flex:1;min-width:0;display:grid;gap:9px}
.table-loading{min-height:420px}.table-loading .entity-table{width:100%;table-layout:fixed}.table-loading th{height:46px}.table-loading td{height:64px}
.kanban-loading{flex:1;min-height:520px}.skeleton-board{display:flex;gap:14px;overflow:hidden;padding-bottom:12px;min-height:520px}
.skeleton-stage{width:280px;flex-shrink:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg)}
.skeleton-stage .leads-stage__summary{padding:12px 10px}.skeleton-chevron{clip-path:polygon(0 0,95% 0,100% 50%,95% 100%,0 100%);border-radius:0}
.skeleton-stage .leads-stage__cards{display:grid;align-content:start;gap:9px;padding:0 10px 10px}.skeleton-kanban-card{padding:14px;min-height:144px;display:grid;gap:16px;border:1px solid var(--line);border-radius:var(--r)}
.settings-loading{padding:30px;min-height:460px}.skeleton-field{display:grid;gap:12px}.settings-loading>div[aria-hidden]{display:grid;gap:24px}
.skeleton-record-columns{display:grid;grid-template-columns:1.06fr 1fr;gap:28px;padding:30px 38px;min-height:640px}.skeleton-record-fields{padding:26px}.skeleton-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:30px}.skeleton-form-grid>.skeleton-field:nth-child(-n+2){grid-column:1/-1}
.record-loading.is-wide .skeleton-record-columns{grid-template-columns:1fr}.skeleton-activity-compose{padding:22px;display:grid;gap:20px}.skeleton-event{margin-top:30px}
.skeleton-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.skeleton-page-heading,.skeleton-app-topbar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.skeleton-app-rail{width:80px;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;gap:32px;padding:18px 0}.skeleton-app .main{flex:1;min-width:0}.skeleton-app-topbar{height:78px;padding:20px 38px;border-bottom:1px solid var(--line)}.skeleton-app-body{padding:0 38px 30px}.skeleton-app .content{overflow:hidden}
@media(prefers-reduced-motion:reduce){.ui-skeleton::after{animation:none;display:none}}
@media(max-width:800px){.skeleton-record-columns{grid-template-columns:1fr;padding:20px}.skeleton-card-grid{grid-template-columns:1fr}.skeleton-app-body{padding:0 20px 20px}.skeleton-app-rail{width:60px}.skeleton-app-topbar{padding:16px 20px}.skeleton-form-grid{grid-template-columns:1fr}}
.boot-react-root,.boot-shell{height:100%;width:100%}.boot-page{width:100%;box-sizing:border-box}.boot-title{margin-top:7px}.boot-line{margin-top:16px}.boot-total{margin:12px auto}
.boot-rail{position:relative;gap:12px}.boot-logo{display:flex;align-items:center;gap:12px;padding:0 12px;margin-bottom:10px}.boot-nav-row{display:flex;align-items:center;gap:12px;padding:10px 12px;width:100%}.boot-rail-bottom{margin-top:auto;padding:16px 12px;width:100%}
.boot-topbar{justify-content:space-between;padding:0 24px}.boot-workspace-tabs{min-height:42px;padding:6px 24px;border-bottom:1px solid var(--line)}.boot-composer-tabs{align-items:center;height:55px}.boot-chat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;min-height:650px}
.boot-shell .settings-loading{display:grid;gap:24px}.boot-shell .feed-compose-body{align-items:center}.boot-shell .feed-filters{display:flex;gap:8px}.boot-shell .table-loading .entity-table{width:100%;table-layout:fixed}.boot-shell .skeleton-person{width:100%}
.boot-shell:not(.menu-classic) .boot-nav-row>.ui-skeleton:last-child,.boot-shell:not(.menu-classic) .boot-logo>.ui-skeleton:last-child,.boot-shell:not(.menu-classic) .boot-rail-bottom{display:none}
.boot-shell:not(.menu-classic) .boot-logo{padding:0;justify-content:center}.boot-shell:not(.menu-classic) .boot-nav-row{justify-content:center;padding:10px 0}
@media(max-width:760px){.boot-shell .boot-rail{position:fixed;width:100%;padding:6px 8px}.boot-shell .boot-nav-row{width:auto;padding:10px}.boot-nav-row>.ui-skeleton:last-child,.boot-logo>.ui-skeleton:last-child,.boot-rail-bottom{display:none}.boot-chat{grid-template-columns:1fr}.boot-chat>aside{display:none}}
/* Team messenger: only history scrolls; header and composer stay in the frame. */
.content--chat { overflow: hidden; min-height: 0; padding-bottom: 0; }
.content--chat > .page-transition { height: 100%; min-height: 0; }
.messenger { height: 100%; min-height: 0; display: grid; grid-template-columns: 310px minmax(0,1fr); background: var(--surface); position: relative; overflow: hidden; color: var(--ink); }
.messenger button { font-family: inherit; cursor: pointer; }
.messenger button:disabled { cursor: default; opacity: .45; }
.messenger-sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.messenger-sidebar > header { display: flex; align-items: center; gap: 10px; padding: 24px 20px 16px; }
.messenger-sidebar > header > div { flex: 1; }
.messenger .kicker { font-size: 9px; color: var(--ink-3); letter-spacing: .1em; }
.messenger h2 { font-size: 23px; letter-spacing: -.04em; margin: 5px 0 0; }
.messenger-sidebar h2 span { font-size: 12px; color: var(--ink-3); margin-left: 5px; font-weight: 500; }
.messenger-sidebar > .search { width: auto; margin: 0 16px 14px; }
.messenger .search input { min-width: 0; flex: 1; }
.messenger-filters { display: flex; gap: 4px; padding: 0 16px 14px; }
.messenger-filters button { padding: 7px 10px; border: 0; border-radius: 7px; font-size: 11px; color: var(--ink-3); background: transparent; }
.messenger-filters button.active { background: color-mix(in oklch,var(--accent) 15%,transparent); color: var(--accent-ink); font-weight: 700; }
.messenger-room-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px; }
.messenger-room { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; border-radius: 10px; padding: 13px 10px; text-align: left; color: var(--ink); margin-bottom: 3px; }
.messenger-room:hover { background: var(--bg-2); }
.messenger-room.active { background: color-mix(in oklch,var(--accent) 14%,var(--surface)); box-shadow: inset 3px 0 var(--accent); }
.messenger-avatar { position: relative; flex-shrink: 0; }
.messenger-avatar > span { position: absolute; bottom: -2px; right: -3px; background: var(--surface); border-radius: 50%; padding: 3px; display: flex; color: var(--ink-3); }
.messenger-room-copy { min-width: 0; flex: 1; }
.messenger-room-copy > div { display: flex; align-items: center; gap: 6px; }
.messenger-room-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; flex: 1; }
.messenger-room-copy time { color: var(--ink-4); font-size: 10px; }
.messenger-room-copy div + div { margin-top: 5px; }
.messenger-room-copy div + div > span { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.messenger-room-copy b,.messenger-notifications b { background: var(--accent); color: white; font-size: 10px; min-width: 19px; height: 19px; padding: 2px 5px; border-radius: 10px; text-align: center; }
.messenger-sidebar > footer { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-4); font-size: 9px; padding: 14px 8px; border-top: 1px solid var(--line); }
.messenger-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; background: radial-gradient(ellipse at top right,color-mix(in oklch,var(--accent) 7%,transparent),transparent 65%),var(--bg); }
.messenger-conversation-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 15px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.messenger-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.messenger-heading strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messenger-heading small { font-size: 11px; color: var(--ink-3); }
.messenger-history { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px; }
.messenger-day { text-align: center; margin: 4px 0 22px; }
.messenger-day span { background: var(--surface-2); border: 1px solid var(--line); padding: 5px 11px; border-radius: 15px; font-size: 10px; color: var(--ink-3); }
.messenger-message { display: flex; gap: 9px; align-items: flex-end; margin: 12px 0; }
.messenger-message.mine { justify-content: flex-end; }
.messenger-bubble { max-width: min(76%,600px); border: 1px solid var(--line); padding: 11px 14px 7px; border-radius: 15px 15px 15px 4px; background: var(--surface); box-shadow: var(--shadow-sm); }
.messenger-message.mine .messenger-bubble { background: color-mix(in oklch,var(--accent) 17%,var(--surface)); border-color: color-mix(in oklch,var(--accent) 22%,var(--line)); border-radius: 15px 15px 4px 15px; }
.messenger-bubble > strong { display: block; font-size: 11px; color: var(--accent-ink); margin-bottom: 5px; }
.messenger-message-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.messenger-bubble > time { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 9px; color: var(--ink-3); margin-top: 5px; }
.messenger-bubble > time span { display: flex; color: var(--accent-ink); }
.messenger-composer-wrap { flex-shrink: 0; padding: 12px 24px 16px; background: var(--bg); border-top: 1px solid var(--line); }
.messenger-composer { display: flex; align-items: flex-end; gap: 8px; position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.messenger-composer:focus-within { border-color: var(--accent); }
.messenger-composer textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; padding: 3px; }
.messenger-composer textarea::placeholder { color: var(--ink-4); }
.messenger-composer-buttons { display: flex; gap: 4px; }
.messenger-composer-hint { font-size: 9px; color: var(--ink-4); margin: 8px 4px 0; }
.messenger-emoji { position: absolute; bottom: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; background: var(--surface); padding: 10px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.messenger-emoji button { border: 0; background: transparent; font-size: 22px; padding: 5px; }
.messenger-attachments { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 8px; }
.messenger-attachments > span { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-wrap: anywhere; font-size: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.messenger-attachments button { background: transparent; color: var(--ink-3); border: 0; }
.messenger-file { display: flex; width: 100%; gap: 9px; align-items: center; background: color-mix(in oklch,var(--accent) 6%,transparent); border: 1px solid var(--line); color: var(--ink); padding: 9px; margin-top: 8px; border-radius: 8px; text-align: left; }
.messenger-file > span { flex: 1; min-width: 0; }
.messenger-file strong,.messenger-file small { display: block; overflow-wrap: anywhere; font-size: 11px; }
.messenger-file small { margin-top: 3px; font-size: 9px; color: var(--ink-3); }
.messenger-empty,.messenger-history-state { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; flex: 1; padding: 32px; }
.messenger-history-state { min-height: 90%; }
.messenger-empty h2,.messenger-history-state h3 { margin: 0; }
.messenger-empty p,.messenger-history-state p { max-width: 330px; color: var(--ink-3); line-height: 1.7; font-size: 13px; margin: 0; }
.messenger-empty-icon { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid color-mix(in oklch,var(--accent) 25%,var(--line)); border-radius: 24px; background: color-mix(in oklch,var(--accent) 10%,var(--surface)); color: var(--accent-ink); margin-bottom: 8px; }
.messenger-empty-controls { display: flex; justify-content: flex-end; padding: 16px; }
.messenger-list-state { display: flex; flex-direction: column; gap: 12px; padding: 32px 16px; align-items: center; text-align: center; font-size: 12px; color: var(--ink-3); }
.messenger-greetings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.messenger-greetings button { padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-3); font-size: 11px; }
.messenger-error { color: var(--bad); font-size: 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.messenger-message-search { margin: 10px 24px 0; width: auto; flex-shrink: 0; }
.messenger-members { position: absolute; top: 78px; right: 18px; z-index: 3; width: 260px; max-height: 50%; overflow: auto; padding: 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 12px; }
.messenger-members > div { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.messenger-older { display: flex; margin: 0 auto 18px; }
.messenger-scroll-bottom { position: absolute; right: 24px; bottom: 160px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.messenger-backdrop { position: fixed; inset: 0; z-index: 100; background: #0007; backdrop-filter: blur(5px); display: flex; justify-content: flex-end; padding: 24px; }
.messenger-overlay { width: min(1100px,100%); height: 100%; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px #0005; outline: none; }
.messenger-create { position: absolute; inset: 0; z-index: 5; background: #0005; display: grid; place-items: center; padding: 20px; }
.messenger-create form { width: min(420px,100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.messenger-create header,.messenger-create footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.messenger-create h3 { margin: 4px 0 20px; font-size: 21px; }
.messenger-create .messenger-filters { padding: 0 0 16px; }
.messenger-create .search { width: 100%; flex-shrink: 0; }
.messenger-input { width: 100%; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.messenger-directory { overflow-y: auto; min-height: 80px; margin: 12px 0; }
.messenger-directory label { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-size: 12px; cursor: pointer; }
.messenger-directory label span { flex: 1; }
.messenger-actions { display: flex; gap: 4px; position: relative; }
.messenger-actions > button { position: relative; }
.messenger-count { position: absolute; top: -3px; right: -4px; font-size: 9px; min-width: 16px; padding: 2px 4px; border-radius: 9px; background: var(--bad); color: white; border: 2px solid var(--surface); }
.messenger-notifications { position: absolute; z-index: 50; top: calc(100% + 14px); right: 0; width: min(360px,calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 48px #0003; padding: 12px; max-height: 65vh; overflow: auto; }
.messenger-notifications header { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; font-size: 13px; }
.messenger-notifications > button { display: flex; align-items: center; gap: 10px; padding: 12px 6px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); width: 100%; text-align: left; cursor: pointer; }
.messenger-notifications > button > span { min-width: 0; flex: 1; }
.messenger-notifications strong,.messenger-notifications small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-notifications small { color: var(--ink-3); font-size: 11px; margin-top: 4px; }
.messenger-notifications-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 8px; color: var(--ink-3); font-size: 12px; }
.messenger-back,.messenger-mobile-close { display: none; }
@media(max-width:1050px) { .messenger { grid-template-columns: 270px minmax(0,1fr); } .messenger-history { padding: 20px 16px; } .messenger-conversation-head { padding: 14px 16px; gap: 8px; } .messenger-composer-wrap { padding: 12px 14px; } }
@media(max-width:700px) { .content--chat { padding-bottom: 62px; } .messenger { grid-template-columns: minmax(0,1fr); } .messenger-sidebar { border: 0; } .messenger-main { display: none; } .messenger--selected .messenger-sidebar { display: none; } .messenger--selected .messenger-main { display: flex; } .messenger-back,.messenger-mobile-close { display: inline-flex; } .messenger-backdrop { padding: 0; } .messenger-overlay { border-radius: 0; border: 0; } .messenger-heading strong { font-size: 12px; } .messenger-bubble { max-width: 86%; } .messenger-composer-hint { display: none; } .messenger-composer-wrap { padding-bottom: max(12px,env(safe-area-inset-bottom)); } .messenger-composer { gap: 3px; padding: 8px; } .messenger-scroll-bottom { bottom: 130px; } }
.messenger-image { display: block; width: 100%; max-width: 360px; max-height: 360px; object-fit: contain; border-radius: 9px; margin-top: 9px; }
/* Persistent communication dock and compact conversation drawer. */
.app--messenger-dock { padding-right: 62px; }
.messenger-group-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.messenger-group-settings { z-index: 5; }
.messenger-create.messenger-group-settings form { max-height: 100%; overflow-y: auto; gap: 12px; }
.messenger-create.messenger-group-settings .messenger-directory { min-height: 100px; max-height: 240px; flex-shrink: 0; }
.messenger-group-picture { display: flex; align-items: center; gap: 10px; }
.messenger-group-label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); }
.messenger-group-label select { padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); }
.messenger-dock { position: fixed; inset: 0 0 0 auto; z-index: 25; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 6px 14px; border-left: 1px solid var(--line); background: var(--surface); }
.messenger-dock-button { width: 44px; min-height: 44px; flex-shrink: 0; display: grid; place-items: center; position: relative; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--ink-3); cursor: pointer; }
.messenger-dock-button:hover, .messenger-dock-button:focus-visible { color: var(--accent-ink); border-color: var(--line); background: var(--bg-2); }
.messenger-dock-rooms { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 6px 2px; border-top: 1px solid var(--line); width: 100%; align-items: center; }
.messenger-dock-room { border-radius: 50%; }
.messenger-dock-room .messenger-count { top: 0; right: 0; }
.messenger-backdrop { padding: 0; backdrop-filter: none; background: #0004; }
.messenger-overlay { width: min(560px,100vw); border-radius: 16px 0 0 16px; border-right: 0; box-shadow: -18px 0 70px #0004; }
.messenger-overlay--notifications { width: min(420px,calc(100vw - 62px)); background: var(--surface); }
.messenger--compact { grid-template-columns: minmax(0,1fr); }
.messenger--compact .messenger-main { display: none; }
.messenger--compact.messenger--selected .messenger-sidebar { display: none; }
.messenger--compact.messenger--selected .messenger-main { display: flex; }
.messenger--compact .messenger-back,.messenger--compact .messenger-mobile-close { display: inline-flex; }
.messenger--compact .messenger-sidebar { border: 0; }
.messenger--compact .messenger-conversation-head { padding: 14px 12px; gap: 8px; }
.messenger--compact .messenger-conversation-head .btn { flex-shrink: 0; }
.messenger-notifications-panel { height: 100%; display: flex; flex-direction: column; color: var(--ink); }
.messenger-notifications-panel > header { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); }
.messenger-notifications-panel h2 { margin: 6px 0 0; font-size: 21px; }
.messenger-notifications-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.messenger-notification-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 16px 8px; cursor: pointer; }
.messenger-notification-row:hover { background: var(--bg-2); }
.messenger-notification-row > span { flex: 1; min-width: 0; }
.messenger-notification-row strong,.messenger-notification-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-notification-row small { color: var(--ink-3); font-size: 12px; margin-top: 6px; }
.messenger-notification-row b { min-width: 22px; padding: 4px 7px; border-radius: 12px; background: var(--accent); color: white; font-size: 10px; text-align: center; }
.work-error-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 100px); background: var(--surface); color: var(--bad); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 12px; }
.work-error-toast > span { flex: 1; min-width: 0; }
.work-error-toast > button { flex-shrink: 0; }
@media(max-width:700px) { .app--messenger-dock { padding-right: 0; } .messenger-dock { display: none; } .messenger-backdrop { padding: 0; } .messenger-overlay,.messenger-overlay--notifications { width: 100%; border-radius: 0; } .work-error-toast { bottom: 78px; max-width: calc(100vw - 24px); gap: 10px; } }
/* Record, task and messenger drawers cover the dock and keep their full usable width. */
.content--chat > .page-transition { container-type: inline-size; }
@container (max-width: 680px) {
  .messenger:not(.messenger--compact) { grid-template-columns: minmax(0,1fr); }
  .messenger:not(.messenger--compact) .messenger-main { display: none; }
  .messenger:not(.messenger--compact).messenger--selected .messenger-sidebar { display: none; }
  .messenger:not(.messenger--compact).messenger--selected .messenger-main { display: flex; }
  .messenger:not(.messenger--compact) .messenger-back { display: inline-flex; }
}
.notification-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);}
.notification-live {display:inline-flex;align-items:center;gap:7px;margin-right:auto;font-size:11px;color:var(--ink-3);}
.notification-live i,.notification-dot {display:block;flex-shrink:0;width:7px;height:7px;background:#efa943;border-radius:50%;}
.notification-live--online i {background:#50b98c;}
.notification-dot {background:var(--accent,#8275e8);}
.crm-notification {border-bottom:1px solid var(--line);padding:8px 0;}
.crm-notification--unread {background:color-mix(in srgb,var(--accent,#8275e8) 7%,transparent);border-radius:10px;}
.crm-notification-open {display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;text-align:left;background:none;border:0;color:var(--ink);cursor:pointer;}
.crm-notification-open:hover {background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:10px;}
.crm-notification-open>span:nth-child(2) {display:grid;gap:6px;flex:1;min-width:0;}
.crm-notification-open strong {font-size:13px;line-height:1.45;overflow-wrap:anywhere;}
.crm-notification-open small {font-size:12px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;}
.crm-notification-open time {font-size:11px;color:var(--ink-3);}
.crm-notification-icon {display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--surface-2);color:var(--accent);}
.crm-notification-read {margin:0 0 4px 58px;font-size:11px;}
.feed-post:focus {outline:2px solid var(--accent);outline-offset:4px;}

/* List actions dropdown and import preview overlay. */
.list-actions { position: relative; flex-shrink: 0; }
.list-actions__active { background: var(--surface-2); color: var(--accent-bright); }
.list-actions__menu { position: fixed; z-index: 180; width: 270px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 7px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); text-align: left; }
.list-actions__menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border-radius: 7px; text-align: left; font-size: 13px; }
.list-actions__menu button:hover, .list-actions__menu button:focus-visible { background: var(--surface-2); outline: 2px solid transparent; }
.list-actions__menu button > span:not(.list-actions__format) { flex: 1; }
.list-actions__menu small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.list-actions__caption { padding: 8px 10px; font-size: 10px; color: var(--ink-3); letter-spacing: .07em; }
.list-actions__divider { height: 1px; margin: 6px 3px; background: var(--line); }
.list-actions__format { width: 42px; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); text-align: center; font: 10px var(--mono); color: var(--accent-ink); }
.list-actions__back { font-weight: 600; border-bottom: 1px solid var(--line); }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); }
.section-head__actions { flex-wrap: wrap; }

/* Public API keys and documentation */
.api-integrations { display: grid; gap: 18px; }
.api-integrations__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.api-integrations__toolbar h1 { flex: 1; margin: 0; font-size: 20px; line-height: 1.4; }
.api-integrations__toolbar > div { flex: 1; min-width: 240px; }
.api-integrations__toolbar strong { font-size: 17px; }
.api-integrations__toolbar p { margin: 5px 0 0; font-size: 12.5px; }
.api-integrations__notice { padding: 14px 17px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-3); font-size: 12.5px; line-height: 1.6; background: var(--surface); }
.api-integrations__error { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.api-keys-card { overflow: hidden; }
.api-keys-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 24px; text-align: center; }
.api-keys-empty > span { color: var(--accent-bright); }
.api-keys-empty h3, .api-keys-empty p { margin: 0; }
.api-keys-table td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.api-key-row { cursor: pointer; }
.api-key-row:hover td { background: var(--surface); }
.ui-calendar-grid button:disabled { opacity: .3; cursor: not-allowed; }
.api-key-access-summary { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.api-key-row-actions, .api-key-link-actions { display: flex; gap: 6px; align-items: center; }
.api-key-row-actions { justify-content: flex-end; }
.api-key-link-panel { display: grid; gap: 12px; margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.api-key-link-panel .api-key-secret { min-height: 64px; font-size: 12px; }
.api-key-confirm { padding: 12px; border: 1px solid var(--line); border-radius: var(--r); display: flex; gap: 8px; flex-wrap: wrap; }
.api-key-confirm p { width: 100%; margin: 0 0 4px; font-size: 12px; }
.api-key-meta { display: flex; flex-direction: column; gap: 4px; color: var(--ink-3); font-size: 11px; }
.api-key-feedback { display: block; color: var(--good); font-size: 12px; margin-top: 10px; }
.api-key-unlimited { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.api-keys-table td:first-child { min-width: 160px; }
.api-keys-table td small { display: block; margin: 7px 0; font-size: 11px; color: var(--ink-3); max-width: 240px; overflow-wrap: anywhere; }
.api-key-scope { display: block; margin-bottom: 5px; white-space: nowrap; font-size: 12px; }
.api-key-active { color: var(--good); }
.api-key-revoke { display: flex; gap: 6px; flex-wrap: wrap; max-width: 190px; }
.api-key-revoke > span { width: 100%; color: var(--bad); font-size: 11px; }
.api-key-form, .api-key-result { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; font-size: 13px; line-height: 1.6; }
.api-key-form fieldset { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.api-key-form legend { padding: 0 7px; font-size: 12px; color: var(--ink-3); }
.api-key-form fieldset label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.api-key-form fieldset small { width: 100%; margin-left: 24px; color: var(--ink-3); }
.api-process-access__head, .api-process-access__row { display: grid; grid-template-columns: minmax(100px, 1fr) repeat(3, 72px); gap: 5px; align-items: center; }
.api-process-access__head { padding: 0 0 9px; font-size: 10px; color: var(--ink-3); text-align: center; }
.api-process-access__head > span:first-child { text-align: left; }
.api-process-access__row { padding: 7px 0; border-top: 1px solid var(--line); }
.api-process-access__row strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.api-key-form .api-process-access__row label { justify-content: center; padding: 4px; }
.api-process-access__row .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.api-key-form .api-process-access > small { display: block; width: auto; margin: 12px 0 0; font-size: 11px; line-height: 1.6; }
@media (max-width: 480px) { .api-process-access__head, .api-process-access__row { grid-template-columns: minmax(90px, 1fr) repeat(3, 58px); } .api-key-form .api-process-access { padding: 10px; } .api-integrations__toolbar h1 { flex-basis: 100%; } }
.api-key-form textarea { min-height: 90px; resize: vertical; }
.api-key-form__actions { display: flex; gap: 8px; justify-content: flex-end; padding: 18px 0 0; border-top: 1px solid var(--line); }
.api-key-secret { min-height: 95px; font-family: var(--mono); overflow-wrap: anywhere; resize: vertical; }
.api-doc-loading { display: grid; gap: 16px; padding-top: 34px; color: var(--ink-3); }
.api-doc-loading button { justify-self: start; }
.api-doc-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.api-doc-toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 0; margin: 30px 0 10px; align-self: start; }
.api-doc-toc__label { padding: 3px 11px 9px; color: var(--ink-3); font-size: 11px; }
.api-doc-toc button { justify-content: flex-start; text-align: left; white-space: normal; height: auto; }
.api-doc-toc button.api-doc-toc__child { padding-left: 23px; }
.api-doc-toc button[aria-current] { color: var(--accent-ink); }
.api-doc-content { min-width: 0; }
@media (max-width: 760px) { .api-doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .api-doc-toc { z-index: 1; flex-direction: row; flex-wrap: nowrap; margin-top: 18px; overflow-x: auto; max-height: none; } .api-doc-toc button { flex-shrink: 0; max-width: 190px; } .api-doc-toc__label { display: none; } .api-doc-toc button.api-doc-toc__child { padding-left: 11px; } .api-doc-content h2, .api-doc-content h3 { scroll-margin-top: 100px; } }
.api-doc-content { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); padding-bottom: 30px; }
.api-doc-content h2, .api-doc-content h3, .api-doc-content h4 { margin: 30px 0 12px; color: var(--ink); line-height: 1.4; scroll-margin-top: 20px; }
.api-doc-content h2 { font-size: 21px; }
.api-doc-content h3 { font-size: 16px; }
.api-doc-content p { margin: 12px 0; overflow-wrap: anywhere; }
.api-doc-content ul { padding-left: 21px; margin: 14px 0; }
.api-doc-content li { padding: 3px 0; overflow-wrap: anywhere; }
.api-doc-content a { color: var(--accent-bright); text-decoration: underline; }
.api-doc-content code { font-family: var(--mono); font-size: .9em; padding: 2px 5px; border-radius: 4px; background: var(--surface); overflow-wrap: anywhere; }
.api-code { margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.api-code__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font: 11px var(--mono); }
.api-code pre { padding: 16px; margin: 0; overflow-x: auto; color: var(--ink); line-height: 1.65; font-size: 12px; }
.api-code pre code { padding: 0; background: transparent; overflow-wrap: normal; font-size: inherit; }
@media (max-width: 600px) { .api-integrations__toolbar > div { flex-basis: 100%; } .api-doc-toc { gap: 6px; } }
@media (max-width: 760px) { .api-doc-content h2, .api-doc-content h3, .api-doc-content h4 { scroll-margin-top: 100px; } }
.crm-privacy-menu { position: relative; top: auto; right: auto; order: 3; margin-left: 12px; flex-shrink: 0; }
.crm-privacy-menu .crm-activity-menu__popover { min-width: 250px; right: 0; left: auto; }
.crm-privacy-backdrop { z-index: 5000; backdrop-filter: none; background: rgba(0,0,0,.3); }
.crm-privacy-dialog { width: min(860px,94vw); max-height: 90vh; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.crm-privacy-dialog header,.crm-privacy-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-privacy-dialog p,.crm-privacy-dialog h2 { margin: 0; }
.crm-privacy-dialog label { display: flex; flex-direction: column; gap: 8px; }
.crm-privacy-dialog input:not([type=checkbox]) { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.crm-privacy-table { overflow: auto; max-height: 300px; }
.crm-privacy-table table { width: 100%; border-collapse: collapse; text-align: left; }
.crm-privacy-table td,.crm-privacy-table th { padding: 10px; border-bottom: 1px solid var(--line); }
.crm-privacy-delete { background: #a73445; border-color: #a73445; color: #fff; }
.entity-record-page { min-height: 100%; background: var(--bg-2); }
.entity-record-page__tools { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 34px 0; }
.entity-record-page .smart-process-record-form__body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-bottom: 24px; }
@media (max-width: 900px) { .entity-record-page .smart-process-record-form__body { grid-template-columns: 1fr; } .entity-record-page__tools { padding-right: 20px; } }
.api-webhook-tabs { display:flex; gap:6px; margin-bottom:16px; }
.outgoing-webhook-url { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.outgoing-webhook-options { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:10px; padding:14px; }
.outgoing-webhook-options label { display:flex; align-items:center; gap:10px; }
.outgoing-webhook-journal { margin-top:24px; }
.outgoing-webhook-delivery { border-top:1px solid var(--line); padding:12px 0; }
.outgoing-webhook-delivery summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.outgoing-webhook-delivery summary small { width:100%; color:var(--ink-3); }