/* ═══════════════════════════════════════════════════════════════════════════
   UPGRADS CRM — Design System
   Brand: Navy #18345D · Sky #96CAE2 · Surface: white-first
   ───────────────────────────────────────────────────────────────────────────
   Architecture
     01  Primitives      raw colour ramps, never used directly by components
     02  Semantic tokens the only thing components are allowed to reference
     03  Reset & base
     04  Focus / a11y
     05  Utilities
     06  Buttons
     07  Form controls
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 00 · FONT ═════════════════════════════════════════════════════════════
   Inter (variable, latin subset) served from this origin: the production CSP
   allows fonts only from 'self' and data:, so there is no Google Fonts link. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght.woff2) format("woff2"); }
/* The display face for the login page's headlines only (the landing page's own; variable 400–900,
   latin subset, SIL OFL). Body text everywhere stays on Inter. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/SchibstedGrotesk.woff2) format("woff2"); }

/* ══ 01 · PRIMITIVES ═══════════════════════════════════════════════════════ */
:root {
  /* Navy — derived from the logo mark #18345D */
  --navy-950:#0A1729; --navy-900:#0F2340; --navy-800:#18345D; --navy-700:#1F4275;
  --navy-600:#2A5590; --navy-500:#3D6DA9; --navy-400:#6B92C4; --navy-300:#9DB8D9;
  --navy-200:#C6D8EB; --navy-100:#E3ECF6; --navy-50:#F1F6FB;

  /* Sky — derived from the logo growth mark #96CAE2 */
  --sky-800:#26708F; --sky-700:#3E93BC; --sky-600:#5AA8CE; --sky-500:#7BBBDB;
  --sky-400:#96CAE2; --sky-300:#B4DAEC; --sky-200:#D1E8F4; --sky-100:#E8F4FA;
  --sky-50:#F4FAFD;

  /* Neutrals — cool-tinted so they sit next to navy without muddying */
  --n-0:#FFFFFF;  --n-25:#FCFDFE; --n-50:#F8FAFC;  --n-100:#F1F4F8;
  --n-150:#E9EEF4;--n-200:#DFE5EC;--n-300:#C8D1DD; --n-400:#9BA6B6;
  --n-500:#6E7A8C;--n-600:#525E70;--n-700:#3C4756; --n-800:#28313D;
  --n-900:#171D26;--n-950:#0D1116;

  /* Status */
  --green-700:#0B6B4A; --green-600:#0F855C; --green-500:#12A46F;
  --green-100:#DCF3EA; --green-50:#EFFAF6;
  --amber-700:#92400E; --amber-600:#B45309; --amber-500:#D97706;
  --amber-100:#FBEDD9; --amber-50:#FDF8EF;
  --red-700:#A32019;   --red-600:#C42B23;   --red-500:#DC3B32;
  --red-100:#FAE4E2;   --red-50:#FDF4F3;
  --violet-600:#5B48C9;--violet-500:#6D5AE0;--violet-100:#E9E5FB;
  --teal-600:#0E7C86;  --teal-100:#DCF1F3;
}

/* ══ 02 · SEMANTIC TOKENS — LIGHT ══════════════════════════════════════════
   The values are the reference design system's (reference/pro/src/base.css).
   The app's names stay so every component rule keeps resolving; the
   reference's own names are aliases of the same values, so screen CSS copied
   from the reference works verbatim.                                        */
:root {
  /* Surfaces — a step darker than the reference's white-first set (canvas
     #F4F6F9, surface #FFFFFF, sunken #F8FAFC, hover #F3F6FA, 3 #F0F3F7):
     pure white glared and washed the text out (2026-10-07). Dark theme as is. */
  --canvas:        #E9EDF2;          /* app ground                           */
  --surface:       #F5F7FA;          /* cards, panels, modals                */
  --surface-sunken:#EDF1F5;          /* wells, table heads, footers          */
  --surface-raised:#F5F7FA;
  --surface-hover: #E6EBF1;
  --surface-active:#DCE7F2;
  --surface-2:     var(--surface-sunken);
  --surface-3:     #E4E9EF;

  /* Lines — darkened with the surfaces so the hairlines still show
     (reference: #E1E6ED / #EBEFF4 / #CBD3DE) */
  --line:          #D3DAE3;          /* default hairline                     */
  --line-soft:     #DEE4EB;          /* inside cards, table rows             */
  --line-strong:   #B0BBC9;          /* input borders, emphasis              */

  /* Text — darker than the reference's (#161C25 / #3F4A5A / #66728A): on the
     light canvas the reference greys read washed-out, so every step gains
     contrast (muted ≥ 6.7:1 on the canvas, 7.4:1 on a card; was ≈4.6:1 / 5:1).
     Dark theme unchanged. */
  --ink:           #0F141C;
  --ink-secondary: #2C3545;
  --ink-muted:     #475263;
  --ink-subtle:    #475263;
  --ink-inverse:   #FFFFFF;

  /* Brand / accent */
  --brand:         #18345D;
  --brand-hover:   #1F4275;
  --brand-active:  #0F2340;
  --brand-ink:     #2A5590;          /* brand colour used as *text* (links)  */
  --brand-subtle:  #EAF2FA;          /* tinted fill, selected rows           */
  --brand-subtle-2:#D7E6F5;
  --brand-line:    var(--navy-200);
  --on-primary:    #FFFFFF;

  --accent:        var(--sky-400);
  --accent-strong: var(--sky-800);
  --accent-subtle: var(--sky-100);
  --accent-line:   var(--sky-300);

  /* Feedback: hue / tinted fill / tinted border */
  --success:#0B7A52; --success-bg:#E4F5EC; --success-bd:#BFE6D2;
  --warning:#9A5200; --warning-bg:#FDF0DA; --warning-bd:#F2D49C;
  --danger: #B42318; --danger-bg: #FCE9E7; --danger-bd: #F3C2BD;
  --info:   #24508C; --info-bg:   #E6EFFA; --info-bd:   #BFD5EF;
  --violet: #5B48C9; --violet-bg: #ECE8FB; --violet-bd: #D0C8F4;
  --neutral:#4F5A6B; --neutral-bg:#EEF1F5; --neutral-bd:#DCE2EA;
  --success-subtle:var(--success-bg); --success-wash:#F0FAF5; --success-ink:var(--success);
  --warning-subtle:var(--warning-bg); --warning-wash:#FEF8EC; --warning-ink:var(--warning);
  --danger-subtle: var(--danger-bg);  --danger-wash: #FEF4F3; --danger-ink: var(--danger);
  --info-subtle:   var(--info-bg);    --info-ink:    var(--info);

  /* Sidebar — navy in both themes */
  --sb-bg:#0F2340; --sb-bg-2:#15305A; --sb-text:#B6C6DC; --sb-text-dim:#7F95B3; --sb-active-bg:rgba(150,202,226,.14);
  --sb-border:rgba(255,255,255,.08); --sb-width:244px; --sb-width-rail:64px;
  --nav-bg:        var(--sb-bg);
  --nav-border:    var(--sb-border);
  --nav-ink:       var(--sb-text);
  --nav-ink-hover: #FFFFFF;
  --nav-ink-active:#FFFFFF;
  --nav-hover:     rgba(255,255,255,.07);
  --nav-active:    var(--sb-active-bg);
  --nav-label:     var(--sb-text-dim);

  /* Focus, scrim, elevation */
  --focus:#3D6DA9; --focus-ring:0 0 0 3px rgba(61,109,169,.28);
  --scrim:rgba(10,23,41,.46);
  --ring:          rgba(61,109,169,.28);
  --ring-danger:   rgba(180,35,24,.28);
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 14px rgba(16,24,40,.09), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 18px 48px rgba(10,23,41,.22), 0 4px 12px rgba(10,23,41,.10);
  --shadow-xl: var(--shadow-lg);
  --shadow-focus: var(--focus-ring);

  /* Type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-3xs:10px; --fs-2xs:11px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px;
  --fs-md:13.5px; --fs-lg:15px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:30px;
  --lh-tight:1.25; --lh-snug:1.4; --lh-normal:1.45; --lh-loose:1.6;
  --tracking-tight:-.01em; --tracking-caps:.06em;

  /* Spacing scale — every padding/gap in this file comes from here */
  --sp-0:0; --sp-05:2px; --sp-1:4px; --sp-15:6px; --sp-2:8px; --sp-25:10px;
  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Radii */
  --r-xs:4px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-full:999px;

  /* Motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:.12s; --dur:.18s; --dur-slow:.28s;

  /* Layout */
  --sidebar-w:var(--sb-width);
  --topbar-h:56px;                   /* = .topbar height; the overlay inset */
  --page-pad:28px;

  /* ── Legacy aliases ─────────────────────────────────────────────────────
     The existing markup and JS reference these directly (e.g.
     style="color:var(--muted)"); they resolve into the system above.        */
  --bg:            var(--canvas);
  --sidebar-bg:    var(--nav-bg);
  --sidebar-hover: var(--nav-hover);
  --sidebar-text:  var(--nav-ink);
  --sidebar-active:var(--nav-ink-active);
  --primary:       var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-active:var(--brand-active);
  --primary-light: var(--brand-subtle);
  --card-bg:       var(--surface);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --divider:       var(--line-soft);
  --text:          var(--ink);
  --text-2:        var(--ink-secondary);
  --text-3:        var(--ink-muted);
  --text-inv:      var(--ink-inverse);
  --muted:         var(--ink-muted);
  --link:          var(--brand-ink);
  --selected:      var(--brand-subtle);
  --selected-strong:var(--brand-subtle-2);
  --hover:         var(--surface-hover);
  --radius:        var(--r-md);
  --radius-sm:     var(--r-sm);
  --radius-lg:     var(--r-lg);
  --shadow:        var(--shadow-sm);
  --input-bg:      var(--surface);
  color-scheme: light;
}

/* ══ 02b · SEMANTIC TOKENS — DARK ══════════════════════════════════════════
   The reference's dark palette: surfaces built up from a navy-black base. */
[data-theme="dark"] {
  --canvas:        #0B1424;
  --surface:       #111C2F;
  --surface-sunken:#152238;
  --surface-raised:#1A2A44;
  --surface-hover: #16253D;
  --surface-active:#19304F;
  --surface-3:     #1A2A44;

  --line:          #22324C;
  --line-soft:     #1B2A42;
  --line-strong:   #33486A;

  --ink:           #E8EEF6;
  --ink-secondary: #B4C2D6;
  --ink-muted:     #8A9CB8;
  --ink-subtle:    #8A9CB8;
  --ink-inverse:   #0B1424;

  --brand:         #96CAE2;
  --brand-hover:   #B4DAEC;
  --brand-active:  #7BBBDB;
  --brand-ink:     #8DBBE8;
  --brand-subtle:  #19304F;
  --brand-subtle-2:#21406A;
  --brand-line:    rgba(150,202,226,.28);
  --on-primary:    #0B1424;

  --accent:        var(--sky-400);
  --accent-strong: var(--sky-300);
  --accent-subtle: rgba(150,202,226,.12);
  --accent-line:   rgba(150,202,226,.30);

  --success:#4BD39E; --success-bg:#0F2B24; --success-bd:#1B4A3B;
  --warning:#F2B24C; --warning-bg:#33250D; --warning-bd:#5A4216;
  --danger: #FF8B80; --danger-bg: #36171A; --danger-bd: #62292D;
  --info:   #8DBBE8; --info-bg:   #14294A; --info-bd:   #24446F;
  --violet: #B3A5FF; --violet-bg: #221D4A; --violet-bd: #3B3377;
  --neutral:#A9B8CE; --neutral-bg:#1A2940; --neutral-bd:#2A3D5C;
  --success-wash:rgba(75,211,158,.08); --warning-wash:rgba(242,178,76,.08); --danger-wash:rgba(255,139,128,.08);

  --sb-bg:#08111F; --sb-bg-2:#0E1A2F; --sb-text:#A5B6CE; --sb-text-dim:#6F84A3; --sb-active-bg:rgba(150,202,226,.12);
  --sb-border:rgba(255,255,255,.07);

  --focus:#96CAE2; --focus-ring:0 0 0 3px rgba(150,202,226,.32);
  --scrim:rgba(3,8,16,.66);
  --ring:        rgba(150,202,226,.32);
  --ring-danger: rgba(255,139,128,.32);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.6);
  --input-bg:    var(--surface);
  /* The light-theme accent hues are far too dark to read on a dark surface. */
  --violet-600:  #A99BF5; --violet-500: #8E7DEE; --violet-100: rgba(141,125,238,.16);
  --teal-600:    #5FD3DC; --teal-100:   rgba(95,211,220,.16);
  color-scheme: dark;
}

/* ══ 03 · RESET & BASE ═════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4 { font-weight: 650; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--ink); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

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

img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }

strong, b { font-weight: 620; }
code, kbd, pre { font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; }

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

/* Scrollbars — thin, only visible where they matter */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ══ 04 · FOCUS & ACCESSIBILITY ════════════════════════════════════════════
   The original stylesheet had no focus styling at all. One rule, applied
   everywhere, keyboard-only so it never fires on mouse clicks.             */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

input:focus-visible, select:focus-visible, textarea:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ══ 05 · UTILITIES ════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* Layout helpers — these replace the ~120 inline style="display:flex…" blocks */
.hstack        { display: flex; align-items: center; gap: var(--sp-2); }
.hstack-tight  { display: flex; align-items: center; gap: var(--sp-15); }
.hstack-loose  { display: flex; align-items: center; gap: var(--sp-3); }
.vstack        { display: flex; flex-direction: column; gap: var(--sp-2); }
.spacer        { flex: 1; }
.text-muted    { color: var(--ink-muted); }
.text-xs       { font-size: var(--fs-xs); }
.nowrap        { white-space: nowrap; }
.truncate      { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Section eyebrow — the small uppercase label used across settings/filters */
.eyebrow {
  font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-subtle);
}

/* Generic empty state — replaces the hard-coded emoji blocks in the markup */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-12) var(--sp-6);
  text-align: center; height: 100%;
}
.empty-state-art {
  width: 56px; height: 56px; border-radius: var(--r-xl);
  display: grid; place-items: center;
  background: var(--brand-subtle); color: var(--brand-ink);
  border: 1px solid var(--brand-line);
}
.empty-state-art svg { width: 26px; height: 26px; }
.empty-state h2 { font-size: var(--fs-lg); }
.empty-state p  { font-size: var(--fs-sm); color: var(--ink-muted); max-width: 40ch; line-height: var(--lh-loose); }

/* Badge / chip primitives reused by many components */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--neutral-bd); background: var(--neutral-bg); color: var(--neutral); white-space: nowrap; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.badge-violet { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-bd); }
.badge-outline { background: transparent; }

.muted-dash { color: var(--ink-subtle); }

/* ══ 06 · BUTTONS ══════════════════════════════════════════════════════════
   The reference recipe. A bare .btn is the secondary (bordered) button, which
   is how the app's markup has always used it; .btn-ghost drops the border.  */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-weight: 550; font-size: var(--fs-md); white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
  text-decoration: none !important;
}
.btn:hover { background: var(--hover); border-color: var(--text-3); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; transform: none; }
.btn svg, .btn .ic { width: 16px; height: 16px; }
.btn-secondary { border-color: var(--border-strong); background: var(--surface); }
.btn-secondary:hover { background: var(--hover); border-color: var(--text-3); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-active); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
[data-theme="dark"] .btn-danger { color: #2A0A08; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(1.08); }
.btn-danger-ghost { color: var(--danger); border-color: transparent; background: transparent; }
.btn-danger-ghost:hover { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); gap: 6px; }
.btn-sm svg, .btn-sm .ic { width: 14px; height: 14px; }
.btn-lg { height: 40px; padding: 0 18px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.iconbtn { position: relative; width: 34px; height: 34px; border-radius: var(--r-md); border: 0; background: none; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.iconbtn:hover { background: var(--hover); color: var(--text); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #E0483C; border: 2px solid var(--surface); }

/* Buttons that are really <select> elements in the markup */
select.btn { padding-right: 30px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366728A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* ══ 07 · FORM CONTROLS ════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="time"], select, textarea {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-md); line-height: 1.45;
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .85; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366728A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
select option { background: var(--surface); color: var(--ink); }
select option:checked { background: var(--brand-subtle); color: var(--ink); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; transition: opacity var(--dur-fast); }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

.req { color: var(--danger); font-weight: 600; margin-left: 1px; }
.field input[type="color"] { width: 52px; padding: 3px; }

/* ══ 00b · PRO PRIMITIVES ══════════════════════════════════════════════════
   The reference's base components (reference/pro/src/base.css §02–§07) under
   their own names, so screens ported later use them verbatim. Names that the
   app already owned (.btn, .badge, .table, .modal, .page, .toolbar, .switch,
   .sidebar) are restyled in their own sections instead; .col-cards waits for
   the Deals step because the current kanban uses that name.                 */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 14px; height: 14px; } .ic-lg { width: 20px; height: 20px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); } .sub { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; } .grow { flex: 1 1 auto; min-width: 0; } .hide { display: none !important; }

/* layout */
.page-title, .page-header h1 { font-size: var(--fs-xl); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.page-sub { color: var(--text-3); margin-top: 2px; font-size: var(--fs-md); }
.page-wide { max-width: none; } .page-narrow { max-width: 980px; margin: 0 auto; }
.split { display: grid; gap: 20px; } .split-2-1 { grid-template-columns: minmax(0, 1fr) 340px; } .split-1-2 { grid-template-columns: 340px minmax(0, 1fr); }
.grid-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* controls */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .label .req { color: var(--danger); } .help { font-size: var(--fs-sm); color: var(--text-3); } .error-text { font-size: var(--fs-sm); color: var(--danger); }
.input, .select, .textarea { width: 100%; height: 34px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-md); transition: border-color .12s, box-shadow .12s; }
.textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366728A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: .85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--danger); } .input-sm, .select-sm { height: 28px; font-size: var(--fs-sm); }
.input-group { position: relative; } .input-group .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .input-group .input { padding-left: 32px; }
.input-affix { position: relative; } .input-affix .affix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .input-affix .input { padding-right: 30px; text-align: right; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; transition: background .1s, border-color .1s; }
.check input:hover { border-color: var(--text-3); } .check input:checked, .check input:indeterminate { background: var(--primary); border-color: var(--primary); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg) translate(1px, -1px); }
.check input:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--on-primary); }
.check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.check.round input { border-radius: 50%; width: 18px; height: 18px; }
.seg { display: inline-flex; padding: 2px; background: var(--surface-3); border-radius: var(--r-md); gap: 2px; border: 1px solid var(--border); }
.seg button { height: 28px; padding: 0 12px; border: 0; background: none; border-radius: 5px; color: var(--text-2); font-weight: 550; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--text); } .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } .tab { height: 40px; padding: 0 14px; border: 0; background: none; color: var(--text-2); font-weight: 550; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); } .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; } .tab .badge { font-size: 11px; }
.kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface); color: var(--text-2); }

/* data display */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--divider); } .card-title { font-size: var(--fs-lg); font-weight: 620; } .card-body { padding: 18px; } .card-footer { padding: 12px 18px; border-top: 1px solid var(--divider); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .kpi-label { font-size: var(--fs-sm); color: var(--text-3); font-weight: 550; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi-foot { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.delta { font-weight: 600; display: inline-flex; align-items: center; gap: 2px; } .delta.up { color: var(--success); } .delta.down { color: var(--danger); }
.stage-pill { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .stage-pill i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.avatar { --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 650; font-size: calc(var(--s) * .38); flex: none; letter-spacing: .01em; border: 2px solid var(--surface); box-sizing: content-box; margin: -2px; }
.avatar-sm { --s: 22px; } .avatar-lg { --s: 40px; } .avatar-xl { --s: 56px; } .avatar-stack { display: inline-flex; padding-left: 4px; } .avatar-stack .avatar + .avatar { margin-left: -6px; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; } .person .p-name { font-weight: 600; } .person .p-sub { font-size: var(--fs-sm); color: var(--text-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; }
.chip:hover { background: var(--hover); } .chip.on { border-style: solid; border-color: var(--info-bd); background: var(--selected); color: var(--info); } [data-theme="dark"] .chip.on { color: var(--text); }
.chip .x { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; } .chip .x:hover { background: rgba(0,0,0,.1); }
.toolbar-sep { width: 1px; height: 20px; background: var(--border); }
.table-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-sm); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.bulkbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--primary); color: var(--on-primary); border-radius: var(--r-md); margin-bottom: 12px; box-shadow: var(--shadow-md); }
.bulkbar .btn { background: transparent; border-color: rgba(255,255,255,.35); color: inherit; } .bulkbar .btn:hover { background: rgba(255,255,255,.14); } [data-theme="dark"] .bulkbar .btn { border-color: rgba(11,20,36,.35); } [data-theme="dark"] .bulkbar .btn:hover { background: rgba(0,0,0,.12); }
.empty { text-align: center; padding: 48px 24px; color: var(--text-3); } .empty .ic { width: 28px; height: 28px; color: var(--text-3); margin-bottom: 10px; } .empty b { display: block; color: var(--text); font-size: var(--fs-lg); margin-bottom: 4px; }
.list { list-style: none; margin: 0; padding: 0; } .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--divider); } .list-item:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; align-items: center; } .kv dt { color: var(--text-3); font-size: var(--fs-sm); } .kv dd { margin: 0; font-weight: 500; min-width: 0; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.section-title { font-size: var(--fs-sm); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: var(--scrim); animation: fade .15s ease; }
.overlay.drawer-wrap { place-items: stretch end; padding: 0; }
.modal.sm { max-width: 420px; } .modal.lg { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; flex-shrink: 0; } .modal-title { font-size: var(--fs-lg); font-weight: 650; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--divider); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); flex-shrink: 0; }
.drawer { width: min(520px, 100%); height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: slide .18s ease; }
.menu { position: fixed; z-index: 9100; min-width: 200px; max-width: 320px; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; animation: pop .1s ease; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; background: none; border-radius: var(--r-md); text-align: left; color: var(--text); font-size: var(--fs-md); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; } .menu-item.danger { color: var(--danger); } .menu-item .ic { color: var(--text-3); } .menu-item.danger .ic { color: inherit; } .menu-item .check-mark { margin-left: auto; color: var(--primary); }
.menu-sep { height: 1px; background: var(--divider); margin: 6px -6px; } .menu-label { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); font-size: var(--fs-md); animation: pop .15s ease; } [data-theme="dark"] .toast { background: #E8EEF6; color: #0B1424; }
.toast button { border: 0; background: none; color: var(--sky-300); font-weight: 650; cursor: pointer; } [data-theme="dark"] .toast button { color: var(--navy-700); }
.palette { width: min(620px, 100%); margin-top: 10vh; align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .14s ease; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 52px; border-bottom: 1px solid var(--border); } .palette-input input { flex: 1; height: auto; border: 0; background: none; outline: none; box-shadow: none; font-size: var(--fs-lg); padding: 0; }
.palette-input input:focus { border: 0; box-shadow: none; }
.palette-list { max-height: min(380px, 50vh); overflow: auto; padding: 8px; } .palette-group { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-md); text-align: left; cursor: pointer; } .palette-item[aria-selected="true"] { background: var(--selected); }
.palette-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-sm); }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.985); } } @keyframes slide { from { transform: translateX(24px); opacity: 0; } }
/* Named by the auth column, the workspace dropdown and the chat panel; was never defined before 2026-10-06. */
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* feature components */
.board { display: flex; gap: 14px; overflow: auto; padding-bottom: 4px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.col-board { flex: 1 0 252px; max-width: 340px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; flex-direction: column; min-height: 0; }
.col-board.closed { flex: 0 0 236px; background: var(--surface-2); }
.col-board.drop { outline: 2px dashed var(--focus); outline-offset: -4px; background: var(--selected); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; } .col-head .nm { font-weight: 650; } .col-head .cnt { color: var(--text-3); font-weight: 550; font-size: var(--fs-sm); }
.col-sum { padding: 0 14px 10px; font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.col-bar { height: 3px; margin: 0 14px 8px; background: var(--divider); position: relative; overflow: hidden; border-radius: 2px; } .col-bar i { position: absolute; inset: 0 auto 0 0; }
.dcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 12px 10px; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; width: 100%; display: block; position: relative; transition: box-shadow .12s, border-color .12s, transform .12s; }
.dcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .dcard.dragging { opacity: .5; transform: rotate(1deg); } .dcard:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--focus); }
.dcard-title { font-weight: 620; line-height: 1.35; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcard-meta { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: 10px; } .dcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dcard-value { font-weight: 650; font-variant-numeric: tabular-nums; } .dcard-sub { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-xs); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--divider); }
.dcard-sub .ic { width: 13px; height: 13px; } .dcard .urg { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
.urg-1 { background: var(--success); } .urg-2 { background: var(--info); }
.urg-3 { background: var(--warning); } .urg-4 { background: var(--danger); }
.col-board .col-cards { padding: 2px 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 64px; }
.dcard .kebab { position: absolute; top: 8px; right: 8px; opacity: 0; width: 26px; height: 26px; } .dcard:hover .kebab, .dcard:focus-within .kebab, .dcard .kebab:focus-visible { opacity: 1; }
.summary { margin-bottom: 16px; } .summary .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .summary .kpi { padding: 14px 20px; border-right: 1px solid var(--divider); } .summary .kpi:last-child { border-right: 0; }
.summary .strip { padding: 14px 20px 16px; border-top: 1px solid var(--divider); }
.stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface-3); } .stack button { border: 0; padding: 0; min-width: 4px; cursor: pointer; transition: filter .12s; } .stack button:hover { filter: brightness(1.12); }
.stack-legend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .stack-legend button { border: 0; background: none; text-align: left; padding: 4px 6px; margin: -4px -6px; border-radius: var(--r-md); cursor: pointer; } .stack-legend button:hover { background: var(--hover); }
.stack-legend .nm { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 550; } .stack-legend .nm i { width: 8px; height: 8px; border-radius: 50%; } .stack-legend .v { font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; } .stack-legend .c { font-size: var(--fs-xs); color: var(--text-3); }
.stepper { display: flex; gap: 4px; } .step { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); background: var(--surface-3); position: relative; border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); } .step:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 6px 0 0 6px; } .step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 6px 6px 0; }
.step:hover { color: var(--text); } .step.done { background: var(--info-bg); color: var(--info); } .step.current { background: var(--primary); color: var(--on-primary); } .step.won { background: var(--success); color: #fff; } .step.lost { background: var(--danger); color: #fff; }
[data-theme="dark"] .step.won { background: #1E7F57; color: #fff; } [data-theme="dark"] .step.lost { background: #B4362D; color: #fff; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 18px; } .tl-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; position: relative; } .tl-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: -18px; width: 2px; background: var(--divider); }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); } .tl-ic.call { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); } .tl-ic.email { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.tl-ic.whatsapp { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); } .tl-ic.meeting { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-bd); } .tl-ic.note { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-bd); }
.tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tl-head b { font-weight: 620; } .tl-text { margin-top: 4px; color: var(--text-2); line-height: 1.55; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .cal-dow { padding: 8px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); background: var(--surface-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal-cell { min-height: 108px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cal-cell.out { background: var(--surface-2); color: var(--text-3); }
.cal-day { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-sm); font-weight: 600; } .cal-cell.today .cal-day { background: var(--primary); color: var(--on-primary); }
.cal-ev { font-size: var(--fs-xs); font-weight: 600; padding: 2px 6px; border-radius: 4px; border-left: 3px solid; background: var(--info-bg); color: var(--info); border-color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; }
.cal-ev.call { background: var(--success-bg); color: var(--success); border-color: var(--success); } .cal-ev.viewing { background: var(--violet-bg); color: var(--violet); border-color: var(--violet); } .cal-ev.deadline { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 8px 0; } .msg .who { font-weight: 650; } .msg .when { color: var(--text-3); font-size: var(--fs-sm); margin-left: 8px; font-weight: 400; }
.spark { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1180px) { .grid-kpi, .summary .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-2-1, .split-1-2 { grid-template-columns: minmax(0, 1fr); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stack-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════
   08 · APP SHELL
   The reference shell: a navy sidebar that collapses to an icon rail, and a
   main column with a top bar (crumbs, search, New, bell, help) over the view.
   ═══════════════════════════════════════════════════════════════════════════ */
#app { display: grid; grid-template-columns: var(--sb-width) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--canvas); transition: grid-template-columns .18s ease; }
#app.rail { grid-template-columns: var(--sb-width-rail) minmax(0, 1fr); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { background: var(--sb-bg); color: var(--sb-text); display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--sb-border); }
.sb-brand { height: 56px; display: flex; align-items: center; padding: 0 16px; flex: none; }
.sb-brand img { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .95; }
.sb-toggle { margin-left: auto; color: var(--sb-text); width: 30px; height: 30px; }
.sb-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }

.sb-ws { margin: 0 10px 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--sb-bg-2); border: 1px solid var(--sb-border); display: flex; align-items: center; gap: 10px; color: #fff; width: calc(100% - 20px); text-align: left; cursor: pointer; }
.sb-ws:hover { background: rgba(255,255,255,.1); }
.sb-ws-badge { width: 24px; height: 24px; border-radius: 6px; background: var(--sky-400); color: var(--navy-900); font-weight: 700; font-size: 11px; display: grid; place-items: center; flex: none; }
.sb-ws-name { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ws-meta { display: block; font-size: var(--fs-xs); color: var(--sb-text-dim); font-variant-numeric: tabular-nums; }
.sidebar-clock { cursor: pointer; width: fit-content; max-width: 100%; }
.sidebar-clock:hover { color: #fff; }
.sb-chev { color: var(--sb-text-dim); display: inline-flex; }

.sb-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 10px; min-height: 0; }
.sb-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-text-dim); font-weight: 600; padding: 14px 10px 6px; }
.sb-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r-md); color: var(--sb-text); font-weight: 500; font-size: var(--fs-md); position: relative; text-decoration: none !important; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.sb-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-link[aria-current="page"] { background: var(--sb-active-bg); color: #fff; }
.sb-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sky-400); }
.sb-link .ic { opacity: .9; }
.sb-link .sb-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { font-size: 11px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.sb-count.alert { background: #E0483C; }

.sb-foot { border-top: 1px solid var(--sb-border); padding: 8px 10px; flex: none; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); width: 100%; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.sb-user:hover { background: rgba(255,255,255,.07); }
.sb-user .who { min-width: 0; flex: 1 1 auto; }
.sb-user .who b { display: block; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .who span { display: block; font-size: var(--fs-xs); color: var(--sb-text-dim); }
.sidebar-user-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sky-400); color: var(--navy-900); font-weight: 650; font-size: 11px; flex: none; letter-spacing: .01em; }

/* Rail: icons only. The brand toggle collapses it; under 1180px it collapses on its own. */
#app.rail .sb-text, #app.rail .sb-count, #app.rail .sb-ws-name, #app.rail .sb-ws-meta, #app.rail .sb-user .who, #app.rail .sb-label, #app.rail .sb-brand img, #app.rail .sb-chev { display: none; }
#app.rail .sb-brand { justify-content: center; padding: 0; }
#app.rail .sb-toggle { margin: 0; }
#app.rail .sb-ws { justify-content: center; padding: 8px 0; }
#app.rail .sb-link { justify-content: center; padding: 0; }
#app.rail .sb-user { justify-content: center; padding: 8px 0; }
#app.rail .sb-label { display: block; height: 1px; padding: 0; margin: 10px 8px; background: var(--sb-border); font-size: 0; }
@media (max-width: 1180px) { #app { grid-template-columns: var(--sb-width-rail) minmax(0, 1fr); }
  #app .sb-text, #app .sb-count, #app .sb-ws-name, #app .sb-ws-meta, #app .sb-user .who, #app .sb-brand img, #app .sb-chev, #app .sb-toggle { display: none; }
  #app .sb-brand { justify-content: center; padding: 0; }
  #app .sb-ws, #app .sb-user, #app .sb-link { justify-content: center; padding-left: 0; padding-right: 0; }
  #app .sb-label { display: block; height: 1px; padding: 0; margin: 10px 8px; background: var(--sb-border); font-size: 0; }
  .crumbs > :not(b):not(.ic) { display: none; } .crumbs .ic { display: none; } }

/* ── Main column: top bar + scrolling view ───────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 56px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px; flex: none; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-md); min-width: 0; white-space: nowrap; overflow: hidden; flex: 0 1 auto; }
.crumbs b { color: var(--text); font-weight: 600; } .crumbs .ic { width: 14px; height: 14px; } .crumbs a, .crumbs span { white-space: nowrap; }
.search-trigger { margin: 0 auto; display: flex; align-items: center; gap: 10px; width: min(440px, 100%); height: 36px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-md); color: var(--text-3); font-size: var(--fs-md); cursor: pointer; }
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface); } .search-trigger .grow { text-align: left; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar .search-trigger + .topbar-actions { margin-left: 0; }
.view { flex: 1 1 auto; overflow: auto; min-height: 0; position: relative; display: flex; flex-direction: column; }

.page { display: none; flex-direction: column; height: 100%; overflow: hidden; padding: 24px var(--page-pad); gap: var(--sp-4); }
.page.active { display: flex; flex: 1 1 auto; min-height: 0; animation: page-in var(--dur) var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
#page-tasks { overflow: hidden; padding: 0 !important; }
#page-analytics { overflow-y: auto; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-shrink: 0; min-height: 34px; flex-wrap: wrap; }
.page-header h1 { display: flex; align-items: center; gap: var(--sp-2); }
.page-header h1 svg { width: 19px; height: 19px; color: var(--text-3); }
/* The action cluster on the right of every page header */
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Toolbar (search + filters row) ──────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.toolbar > input {
  flex: 1; min-width: 200px; max-width: 340px; height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366728A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat left 10px center;
  font-size: var(--fs-md);
}
.toolbar > input:focus { border-color: var(--focus); box-shadow: var(--focus-ring); }
.ct-search { width: 330px; flex: 0 1 330px; min-width: 180px; }
/* The filter popover for a free-text column: one labelled input, filtering as you type. */
.ct-filter-pop { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 2px; }
.ct-filter-pop .btn { align-self: flex-start; margin-left: -8px; }
.toolbar-actions { display: flex; align-items: center; gap: var(--sp-15); margin-left: auto; flex-wrap: wrap; }


.deals-pipeline-select { height: 34px; width: auto; min-width: 168px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 550; }

/* ═══════════════════════════════════════════════════════════════════════════
   09 · TABLES
   The single densest surface in the product — it earns the most attention.
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.table thead th, .table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; font-weight: 600; font-size: var(--fs-sm); color: var(--text-3); padding: 0 12px; height: 38px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
.table thead th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .table thead th button:hover { color: var(--text); } .table thead th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--divider); vertical-align: middle; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.table.compact td { height: 38px; }
.table td.wrap, .table td[data-wrap] { white-space: normal; word-break: break-word; }
.table tbody tr { transition: background .08s; cursor: default; }
.table tbody tr:hover td { background: var(--hover); }
.table tbody tr[aria-selected="true"] td { background: var(--selected); }
.table tr.clickable { cursor: pointer; }
.table tr:last-child td { border-bottom: 0; }
.table .col-check { width: 44px; padding-right: 0; } .table .num-col { text-align: right; } .table td.strong { font-weight: 600; }

/* Name column reads as the row's identity */
.name-cell { font-weight: 600; color: var(--ink); }
.name-cell .contact-name-link { font-weight: 600; }
.contact-name-link { color: var(--ink); cursor: pointer; text-decoration: none; }
.contact-name-link:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }

#contacts-table { min-width: 100%; }
#contacts-table td { position: relative; }
#contacts-thead th { background: var(--surface-2); }
#contacts-body tr.side-panel-active { background: var(--brand-subtle); }
#contacts-body tr.side-panel-active td { background: var(--brand-subtle); }

/* Row action buttons — revealed on hover, reserved space so nothing jumps */
.row-actions { display: flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
tr:hover .row-actions, tr:focus-within .row-actions { opacity: 1; }
.row-actions .btn + .btn { margin-left: 0; }
.row-label { font-size: var(--fs-sm); font-weight: 550; color: var(--ink); }
.row-sub   { font-size: var(--fs-xs); color: var(--ink-muted); }
.row-dot   { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }

/* Sortable headers */
.sortable-col { cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.sortable-col:hover { color: var(--ink); }
.sort-active { color: var(--brand-ink) !important; }
.sort-icon { display: inline-block; margin-left: var(--sp-1); opacity: 0; transition: opacity var(--dur-fast) var(--ease); font-size: 9px; vertical-align: middle; }
.sortable-col:hover .sort-icon { opacity: .45; }
.sort-icon.active { opacity: 1; color: var(--brand-ink); }

/* Resizable columns */
.col-resize-handle {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 3; user-select: none;
}
.col-resize-handle::after {
  content: ''; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 1px;
  background: transparent; transition: background var(--dur-fast) var(--ease);
}
.col-resize-handle:hover::after { background: var(--accent-strong); top: 0; bottom: 0; width: 2px; }

/* Inline editing */
.editable-cell {
  cursor: text; border-radius: var(--r-xs);
  padding: 3px var(--sp-15); margin: -3px calc(var(--sp-15) * -1);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.editable-cell:hover { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.inline-input, .inline-select {
  width: 100%; padding: var(--sp-1) var(--sp-15);
  border: 1px solid var(--brand); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm);
  box-shadow: var(--shadow-focus);
}

/* Pagination */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-shrink: 0; padding-top: var(--sp-1);
}
/* .pagination-info/.pagination-controls/.page-btn/.page-ellipsis removed in Part 9: Contacts (Part 4) and Objects/Listings (Part 9) were the last two users, both now render the .ct-pg nav instead. */

/* Reference-style pagination nav (Contacts list, Part 4): sprite chevrons, the
   Previous button's right-chevron flipped via .ct-flip, like the reference. */
.ct-pg { display: flex; align-items: center; gap: 2px; }
.ct-pg button { min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--ink-secondary); font-weight: 550; font-size: var(--fs-sm); display: inline-grid; place-items: center; cursor: pointer; }
.ct-pg button:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.ct-pg button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ct-pg button[aria-current="page"] { background: var(--selected); border-color: var(--info-bd); color: var(--ink); }
.ct-pg button:disabled { opacity: .4; cursor: default; }
.ct-pg .gap { min-width: 20px; text-align: center; color: var(--ink-muted); }
.ct-flip { display: inline-grid; transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · DEALS BOARD / LIST LAYOUT
   The contact kanban that used to live here went with contact stages (Part 19):
   .pipeline-board, .pipeline-col, .col-header, .col-cards, .contact-card, .card-*
   and .stage-badge had no markup or renderer left. The Deals board draws from
   .col-board/.dcard in 00b.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Deals page: board (.col-board/.dcard from 00b) and list fill the page column */
#deals-board.board { flex: 1 1 auto; min-height: 0; }
#deals-board { transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
/* While a stage move is in flight (drag, menu, bulk, undo) the board blurs and
   stops taking input, so the user sees it is saving and cannot start a second
   move on stale columns. deals.js sets aria-busy around every stage PATCH. */
#deals-board[aria-busy="true"] { pointer-events: none; user-select: none; cursor: progress; filter: blur(2px); opacity: .7; }
#deals-list-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#deals-list-view .table-wrap { flex: 1 1 auto; min-height: 0; }
#deals-list-foot { margin-top: -1px; border: 1px solid var(--border); border-top: 0; flex: none; }
#deals-summary { flex: none; }
#deals-board .empty { align-self: center; width: 100%; }

/* Stage indicators */

/* (.stage-pill is the reference stage label now, see 00b) */



/* ═══════════════════════════════════════════════════════════════════════════
   11 · SIDE PANEL & DETAIL VIEWS
   ═══════════════════════════════════════════════════════════════════════════ */
.page-contacts-layout {
  flex-direction: row !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important;
}
.contacts-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--page-pad); overflow-y: auto; overflow-x: hidden;
}
.contact-side-panel {
  width: 46%; min-width: 520px; flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-left: 1px solid var(--line);
  transition: width var(--dur-slow) var(--ease), min-width var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.contact-side-panel.hidden { width: 0 !important; min-width: 0 !important; opacity: 0; border-left: none; }
.side-panel-header {
  position: sticky; top: 0; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.side-panel-name {
  flex: 1; min-width: 0; font-size: var(--fs-lg); font-weight: 640;
  letter-spacing: var(--tracking-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-panel-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════════════
   13 · MODALS
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--scrim);
  animation: overlay-in .15s ease both;
}
.modal-overlay.hidden { display: none !important; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop .16s ease both;
}
.modal.xl { max-width: 1180px; }

.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 20px; display: flex; flex-direction: column; gap: 16px; }

/* Form shells that sit directly under .modal: the form provides the flex column
   so its .modal-body can own the padding, the gap and the scrolling. */
.modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   14 · OBJECTS / LISTINGS — list view + empty state
   ═══════════════════════════════════════════════════════════════════════════ */
/* Empty state rendered as a row inside the listings table */
.table-empty-row td,
.table tbody tr.table-empty-row:hover td {
  padding: 0 var(--sp-4); border-bottom: none; background: transparent;
  white-space: normal; max-width: none; overflow: visible; text-overflow: clip;
}
.table-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); text-align: center;
}
.table-empty h2 { font-size: var(--fs-md); font-weight: 620; color: var(--ink); }
.table-empty p  { font-size: var(--fs-sm); color: var(--ink-muted); max-width: 42ch; line-height: var(--lh-normal); }
.table-empty .btn { margin-top: var(--sp-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   15 · TASKS — reference/pro/crm-pro.html, screen: tasks.js (Part 40).
   Sidebar (Views + projects), summary KPIs, the status- or project-grouped
   table with inline add rows, and the board. The drawer's .tk-done / .tk-mini /
   .tk-dr* rules live in §37 and are reused here, not repeated.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-tasks-layout { flex-direction: row !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
.tk-side { width: 232px; flex: none; background: var(--surface); border-right: 1px solid var(--border); overflow: auto; padding: 10px 10px 20px; min-height: 0; }
.tk-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: 24px var(--page-pad); overflow: hidden; }
.tk-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.tk-sec:first-child { padding-top: 6px; }
.tk-row { position: relative; display: flex; align-items: center; border-radius: var(--r-md); min-width: 0; }
.tk-row:hover { background: var(--hover); }
.tk-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-md); color: var(--text-2); font-weight: 550; text-align: left; cursor: pointer; }
.tk-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tk-link[aria-current="true"] { background: var(--selected); color: var(--text); }
.tk-link .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-link .ct { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-link .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tk-chev { width: 22px; height: 28px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; border-radius: var(--r-sm); flex: none; padding: 0; cursor: pointer; }
.tk-chev:hover { color: var(--text); background: var(--surface-3); } .tk-chev:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tk-chev .ic { width: 14px; height: 14px; transition: transform .12s; } .tk-chev[aria-expanded="true"] .ic { transform: rotate(90deg); }
.tk-row .tk-act { position: absolute; right: 2px; top: 3px; opacity: 0; background: var(--surface-3); }
.tk-row:hover .tk-act, .tk-row:focus-within .tk-act, .tk-act:focus-visible { opacity: 1; }
.tk-row:hover .ct, .tk-row:focus-within .ct { visibility: hidden; }
.tk-lists { margin: 1px 0 4px 11px; padding-left: 8px; border-left: 1px solid var(--divider); }
.tk-lists .tk-link { height: 30px; font-weight: 500; }
.tk-addlist { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; margin-top: 1px; border: 0; background: none; border-radius: var(--r-md); color: var(--text-3); font-size: var(--fs-sm); font-weight: 550; width: 100%; cursor: pointer; }
.tk-addlist:hover { background: var(--hover); color: var(--text); } .tk-addlist:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tk-kpi { border: 0; background: none; text-align: left; cursor: pointer; align-items: flex-start; font: inherit; color: inherit; }
.tk-kpi:hover { background: var(--hover); } .tk-kpi:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.tk-kpi .kpi-value.bad { color: var(--danger); }
.tk-main .summary { margin-bottom: 0; } .tk-main .summary .kpi { padding: 12px 18px; }
.tk-main .toolbar > .grow { flex: 1 1 0; }
.tk-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tk-scroll { flex: 1 1 auto; min-height: 0; }

.tk-table { table-layout: fixed; }
.tk-table td { max-width: none; }
.tk-group td { background: var(--surface-2); height: 38px; padding: 0 !important; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.tk-table tbody tr.tk-group:first-child td { border-top: 0; }
.tk-ghead { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px; border: 0; background: none; text-align: left; font-weight: 650; color: var(--text); cursor: pointer; }
.tk-ghead:hover { background: var(--hover); } .tk-ghead:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.tk-ghead .ic { width: 14px; height: 14px; color: var(--text-3); transition: transform .12s; } .tk-ghead[aria-expanded="true"] .ic { transform: rotate(90deg); }
.tk-ghead i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tk-ghead .cnt { color: var(--text-3); font-weight: 550; font-size: var(--fs-sm); }
.tk-tcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-tcell-sub { padding-left: 32px; }
.tk-expand { width: 22px; height: 22px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; border-radius: var(--r-sm); padding: 0; flex: none; cursor: pointer; }
.tk-expand:hover { color: var(--text); background: var(--surface-3); } .tk-expand .ic { transition: transform .12s; } .tk-expand.open .ic { transform: rotate(90deg); }
.tk-expand-gap { width: 22px; flex: none; }
.tk-title { display: block; font-weight: 620; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.tk-title:hover { color: var(--link); text-decoration: none; }
.tk-fin .tk-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.tk-subrow td { background: var(--surface-2); height: 40px; }
.tk-sub { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); min-width: 0; overflow: hidden; white-space: nowrap; }
.tk-sub a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); min-width: 0; max-width: 100%; text-decoration: none; }
.tk-sub a span { overflow: hidden; text-overflow: ellipsis; } .tk-sub a:hover { color: var(--link); }
.tk-sub .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: none; }
.tk-sub .tail { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.tk-due { display: inline-flex; align-items: center; gap: 5px; }
.tk-due.late { color: var(--danger); font-weight: 600; } .tk-due.today { color: var(--warning); font-weight: 600; } .tk-due.fin { color: var(--text-3); }
.tk-add td { height: 42px; background: var(--surface); }
.tk-addwrap { display: flex; align-items: center; gap: 10px; color: var(--text-3); padding-left: 0; }
.tk-addwrap .ic { flex: none; }
.tk-addinput { flex: 1 1 auto; min-width: 0; height: 30px; border: 1px solid transparent; background: transparent; border-radius: var(--r-md); padding: 0 8px; margin-left: -8px; color: var(--text); font-size: var(--fs-md); }
.tk-addinput::placeholder { color: var(--text-3); } .tk-addinput:hover { background: var(--hover); }
.tk-addinput:focus { outline: none; background: var(--surface); border-color: var(--focus); box-shadow: var(--focus-ring); }
.tk-addhint { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; display: none; }
.tk-addwrap:focus-within .tk-addhint { display: inline; }
.tk-table .kebab-cell { text-align: right; }
.tk-table tbody tr:not(.tk-group):not(.tk-add) .iconbtn[data-kebab] { opacity: 0; width: 28px; height: 28px; }
.tk-table tbody tr:hover .iconbtn[data-kebab], .tk-table tbody tr:focus-within .iconbtn[data-kebab], .tk-table .iconbtn[data-kebab]:focus-visible { opacity: 1; }

.tk-boards { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.tk-board-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); } .tk-board-head .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tk-board { gap: 12px; flex: none; overflow: visible; }
.tk-board .col-board { flex: 1 1 0; min-width: 208px; max-width: none; }
.col-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-board.drag-over { outline: 2px dashed var(--focus); outline-offset: -4px; background: var(--selected); }
.tk-card { cursor: grab; }
.tk-card.dragging { cursor: grabbing; }
.tk-card .kebab { top: 6px; right: 6px; }
.tk-card.fin .dcard-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.tk-card .dcard-meta { margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.tk-card .dcard-meta .ic { width: 13px; height: 13px; flex: none; }
.tk-card .dcard-foot { flex-wrap: wrap; row-gap: 6px; justify-content: flex-start; }
.tk-card .cmeta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.tk-card .cmeta .ic { width: 13px; height: 13px; }
.tk-card .cmeta.late { color: var(--danger); font-weight: 600; } .tk-card .cmeta.today { color: var(--warning); font-weight: 600; }
.tk-subtoggle { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.tk-subtoggle:hover { color: var(--text); }
.tk-subcard { margin-left: 14px; border-left: 2px solid var(--accent-line); padding: 8px 10px; cursor: pointer; }
.tk-subcard .dcard-title { font-size: var(--fs-sm); margin-bottom: 6px; }
.tk-colempty { text-align: center; padding: 22px 8px; font-size: var(--fs-sm); color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); margin: 2px 0; }
@media (max-width: 1360px) { .tk-side { width: 208px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   16 · CALENDAR — ported from reference/pro/src/screens/calendar.js (Part 30).
   The old .calendar-grid/.calendar-cell/.calendar-event rules are replaced by
   the reference's .cal-* and .cw-* ones; the day-modal rules below are kept.
   ═══════════════════════════════════════════════════════════════════════════ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 16px; flex: 1 1 auto; min-height: 0; }
.cal-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.cal-card > div { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month { flex: 1 1 auto; min-height: 0; overflow: auto; grid-auto-rows: minmax(96px, 1fr); align-content: stretch; }
.cal-dow { padding: var(--sp-2); text-align: center; font-size: var(--fs-2xs); font-weight: 680;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-muted);
  background: var(--canvas); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
[data-theme="dark"] .cal-dow { background: var(--surface-sunken); }
.cal-cell { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 5px 6px 6px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  overflow: hidden; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.cal-cell:nth-child(7n+7) { border-right: 0; }
.cal-cell:hover { background: var(--surface-hover); }
.cal-cell.out { background: var(--canvas); }
[data-theme="dark"] .cal-cell.out { background: var(--surface-sunken); }
.cal-cell.out .cal-day { color: var(--ink-subtle); }
.cal-cell.out:hover { background: var(--surface-sunken); }
.cal-cell.today { background: var(--brand-subtle); }
.cal-top { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.cal-day { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-secondary);
  border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.cal-day:hover { background: var(--surface-3); }
.cal-day:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cal-cell.today .cal-day { background: var(--brand); color: var(--ink-inverse); }
[data-theme="dark"] .cal-cell.today .cal-day { color: var(--navy-950); }
.cal-mon { font-size: var(--fs-xs); font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }

.cal-ev { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: inherit;
  padding: 2px var(--sp-15); border-radius: var(--r-xs); font-size: var(--fs-2xs); font-weight: 550; line-height: 1.4;
  background: var(--surface-sunken); color: var(--ink-secondary); border-left: 2px solid var(--line-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease); }
.cal-ev:hover { filter: brightness(.97); }
[data-theme="dark"] .cal-ev:hover { filter: brightness(1.15); }
.cal-ev:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cal-ev b { font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cal-ev.note     { background: var(--info-subtle);    color: var(--accent-strong); border-left-color: var(--info); }
.cal-ev.call     { background: var(--success-subtle); color: var(--success-ink);   border-left-color: var(--success); }
.cal-ev.email    { background: var(--surface-sunken); color: var(--ink-secondary); border-left-color: var(--violet); }
.cal-ev.whatsapp { background: var(--warning-subtle); color: var(--warning-ink);   border-left-color: var(--warning); }
.cal-ev.task     { background: var(--brand-subtle);  color: var(--accent-strong); border-left-color: var(--brand); }
.cal-ev.done { opacity: .55; text-decoration: line-through; }
.cal-more { border: 0; background: none; text-align: left; padding: 1px 6px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 650; color: var(--ink-secondary); font-family: inherit; cursor: pointer; }
.cal-more:hover { background: var(--surface-3); color: var(--ink); }
.cal-more:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.cal-label { font-size: var(--fs-lg); font-weight: 650; min-width: 150px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }

/* week view */
.cal-week { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cw-head { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); background: var(--canvas); flex: none; }
[data-theme="dark"] .cw-head { background: var(--surface-sunken); }
.cw-hd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border: 0; border-left: 1px solid var(--line-soft); background: none; color: var(--ink-muted);
  font-size: var(--fs-sm); font-weight: 600; font-family: inherit; cursor: pointer; }
.cw-hd:hover { background: var(--surface-hover); }
.cw-hd:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.cw-hd b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-size: var(--fs-lg); color: var(--ink); font-weight: 650; }
.cw-hd.today { color: var(--ink); }
.cw-hd.today b { background: var(--brand); color: var(--ink-inverse); }
[data-theme="dark"] .cw-hd.today b { color: var(--navy-950); }
/* an activity with a date and no time has no hour, so it gets its own strip */
.cw-allday { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); flex: none; max-height: 92px; overflow-y: auto; }
.cw-allday-lbl { font-size: var(--fs-2xs); color: var(--text-3); text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 8px 0 0; text-align: right; }
.cw-allday-col { display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border-left: 1px solid var(--line-soft); min-width: 0; }
.cw-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.cw-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); position: relative; }
.cw-gutter { position: relative; }
.cw-hr { height: var(--hh); padding: 0 8px 0 0; text-align: right; font-size: var(--fs-xs);
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.cw-hr span { position: relative; top: -7px; background: var(--surface); padding-left: 2px; }
.cw-hr:first-child span { top: 2px; }
.cw-col { position: relative; border-left: 1px solid var(--line-soft); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) - 1px), var(--divider) calc(var(--hh) - 1px), var(--divider) var(--hh)); }
.cw-col.today { background-color: var(--brand-subtle); }
.cw-col:hover { background-color: var(--surface-hover); }
.cw-col.today:hover { background-color: var(--brand-subtle); }
.cal-wev { position: absolute; box-sizing: border-box; white-space: normal; padding: 3px 6px;
  border-radius: 4px; overflow: hidden; width: auto; z-index: 1; display: flex; flex-direction: column; gap: 0;
  border-left-width: 3px; }
.cal-wev .t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.cal-wev.tight .t { white-space: nowrap; }
.cal-wev .m { font-weight: 500; font-size: var(--fs-xs); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 2; pointer-events: none; }
.cw-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* upcoming */
.cal-up { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.cal-up .card-header { padding: var(--sp-4); }
.cal-up-body { overflow: auto; padding: 4px 10px 12px; flex: 1 1 auto; }
.cal-up-day { padding: 12px 8px 6px; font-size: var(--fs-xs); font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.cal-up-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
  border: 0; background: none; border-radius: var(--r-md); text-align: left; font-family: inherit; cursor: pointer; }
.cal-up-item:hover { background: var(--surface-hover); }
.cal-up-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cal-up-item .t { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.cal-up-item .t.done { opacity: .55; text-decoration: line-through; }
.cal-up-item .m { font-size: var(--fs-xs); color: var(--text-3); }
.cal-bar { width: 3px; align-self: stretch; min-height: 30px; border-radius: 2px; background: var(--info); flex: none; }
.cal-bar.call, .cal-dot.call { background: var(--success); }
.cal-bar.email, .cal-dot.email { background: var(--violet); }
.cal-bar.whatsapp, .cal-dot.whatsapp { background: var(--warning); }
.cal-bar.task, .cal-dot.task { background: var(--brand); }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; display: inline-block; }

.cal-legend { display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); color: var(--ink-secondary); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; }
.cal-note { font-size: var(--fs-sm); color: var(--ink-secondary); white-space: pre-wrap; line-height: var(--lh-normal); }

@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-card { min-height: 560px; }
  .cal-up { max-height: 360px; }
  .cal-legend { display: none; }
}

/* Day modal */
.day-event-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-25) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color var(--dur-fast) var(--ease);
}
.day-event-item:hover { border-color: var(--line-strong); }
.day-event-item.completed { opacity: .6; }
.day-event-item.pending { border-left: 3px solid var(--warning); }
.day-event-check { flex-shrink: 0; margin-top: 2px; }
.day-event-icon { font-size: 15px; flex-shrink: 0; }
.day-event-content { flex: 1; min-width: 0; }
.day-event-title { font-size: var(--fs-sm); font-weight: 570; color: var(--ink); }
.day-event-body { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; line-height: var(--lh-normal); }
.day-event-body .btn { margin-top: var(--sp-15); }
.day-events-empty { padding: var(--sp-8); text-align: center; color: var(--ink-subtle); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   17 · ACTIVITIES
   ═══════════════════════════════════════════════════════════════════════════ */
/* Activities page (reference screen: activities.js). The .page clips (overflow:hidden), so the
   2:1 split is the scroll container; align-content:start keeps the cards at their own height. */
.ac-split { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-bottom: 8px; }
.ac-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ac-compose .card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ac-compose .textarea { min-height: 72px; }
.ac-compose-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.ac-compose .textarea[aria-invalid="true"] { border-color: var(--danger); }
.ac-compose .error-text:empty { display: none; }
.ac-day { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; }
.ac-day .section-title { margin: 0; }
.ac-day .muted, .ac-rail .muted { font-size: var(--fs-sm); }
.ac-group + .ac-group { margin-top: 18px; }
.ac-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--divider); align-items: start; }
.ac-row:last-child { border-bottom: 0; }
.ac-row:hover { background: var(--hover); }
.ac-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 24px; }
.ac-head b { font-weight: 620; }
.ac-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--link); font-weight: 550; min-width: 0; text-decoration: none; }
.ac-link .ic { color: var(--text-3); width: 14px; height: 14px; }
.ac-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-time { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ac-text { overflow-wrap: anywhere; }
.ac-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-3); font-size: var(--fs-sm); }
.ac-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.ac-row .kebab { opacity: 0; width: 28px; height: 28px; }
.ac-row:hover .kebab, .ac-row:focus-within .kebab { opacity: 1; }
.ac-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ac-rail .card-header { padding: 12px 16px; }
.ac-rail .card-body { padding: 8px; }
.ac-stat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-md); background: none; text-align: left; color: var(--text); cursor: pointer; }
.ac-stat:hover { background: var(--hover); }
.ac-stat[aria-pressed="true"] { background: var(--selected); }
.ac-stat .nm { font-weight: 550; display: block; }
.ac-stat .bar { display: block; height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 6px; overflow: hidden; }
.ac-stat .bar i { display: block; height: 100%; background: var(--link); border-radius: 2px; }
.ac-stat .n { font-weight: 650; font-variant-numeric: tabular-nums; }
.ac-deal-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); color: var(--text); min-width: 0; text-decoration: none; }
.ac-deal-row:hover { background: var(--hover); text-decoration: none; }
.ac-deal-row .grow { min-width: 0; } .ac-deal-row .n { font-weight: 650; font-variant-numeric: tabular-nums; }
.ac-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); flex: none; }
.ac-ic .ic { width: 14px; height: 14px; }
.ac-rail-empty { padding: 14px 8px; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 760px) { .ac-compose-row { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════
   19 · SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Page header: title + workspace line. Same geometry as .page-header (§08),
   written as its own rule so the shared selector stays untouched; the guided
   tour targets it by class.                                                  */
.settings-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-shrink: 0; min-height: 34px;
}
.settings-page-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-page-title { font-size: var(--fs-xl); font-weight: 660; letter-spacing: -.022em; }
.settings-page-sub { font-size: var(--fs-sm); color: var(--ink-secondary); }

/* ── Layout: a section rail on the left, one scrolling column on the right ─
   The rail speaks the sidebar's language (same icons, same active bar) so
   Settings reads as part of the app, not a page dropped into it.           */
.settings-layout {
  display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  column-gap: var(--sp-8); flex: 1; min-height: 0;
}
.settings-tabs { display: flex; flex-direction: column; gap: 2px; align-self: start; padding-right: var(--sp-2); }
.settings-tab {
  position: relative; display: flex; align-items: center; gap: var(--sp-25); width: 100%;
  padding: var(--sp-2) var(--sp-25);
  border: none; border-radius: var(--r-sm); background: none; cursor: pointer;
  text-align: left; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 550; letter-spacing: -.005em; color: var(--ink-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* The rail sits on the page, not in the navy sidebar, so it uses the page's ink
   tokens: the nav-* tokens it used before (the sidebar's pale blue, white when
   active) were near invisible in light mode (2026-10-07). */
/* The icon is a CSS mask, not a child node: applyTranslations() rewrites the
   button's textContent and would otherwise wipe it. Paths are the sidebar's. */
.settings-tab::before {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor; opacity: .8;
  -webkit-mask-image: var(--ico); mask-image: var(--ico);
  -webkit-mask-size: 16px 16px; mask-size: 16px 16px;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.settings-tab[data-tab="workspace"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="preferences"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3'/%3E%3Cpath d='M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="contacts"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="deals"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='18' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='11' rx='1.5'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="objects"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9v.01M9 12v.01M9 15v.01M9 18v.01'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="tasks"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="team"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="integrations"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2M15 8V2'/%3E%3Cpath d='M18 8v3a6 6 0 0 1-12 0V8z'/%3E%3C/svg%3E"); }
.settings-tab:hover { color: var(--ink); background: var(--surface-hover); }
.settings-tab.active { color: var(--brand-ink); background: var(--brand-subtle); font-weight: 620; }
.settings-tab.active::before { opacity: 1; }
.settings-tab.active::after {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 var(--r-full) var(--r-full) 0;
  background: var(--accent);
}
.settings-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.settings-tab-sep { height: 1px; margin: var(--sp-2) var(--sp-25); background: var(--line-soft); }
.settings-tab-body { flex: 1; min-height: 0; overflow-y: auto; padding-top: 0; padding-right: var(--sp-2); padding-bottom: var(--sp-8); }
.settings-tab.hidden { display: none; }
.settings-pane { display: none; }
.settings-pane.active { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Every section opens with its name and one line on what it controls. */
/* Both rail pages share one content width; single-line inputs stay readable inside the wider cards. */
.page-rail { --rail-content-max: 1080px; }
.page-rail .workspace-name-input { max-width: 520px; }
.settings-pane-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--sp-1); max-width: var(--rail-content-max); }
.settings-pane-title { font-size: var(--fs-lg); font-weight: 640; letter-spacing: -.016em; line-height: var(--lh-tight); }
.settings-tab-hint { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-normal); }

/* ── Cards: one column, one anatomy ─────────────────────────────────────────
   header (title + optional action) → hint → list of rows | body (controls).
   A hairline appears only where a list starts, never as decoration.        */
.settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); max-width: var(--rail-content-max); align-items: start; }
.settings-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.settings-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
}
.settings-card-header .btn { flex-shrink: 0; }
.settings-card-header h2, .settings-card-header h3 { font-size: var(--fs-md); font-weight: 620; letter-spacing: -.012em; line-height: var(--lh-snug); }
.settings-card.wide    { grid-column: 1 / -1; }
.settings-card-body    { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4) var(--sp-4); }
.settings-card-actions { display: flex; align-items: center; gap: var(--sp-25); flex-wrap: wrap; }
.settings-empty        { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-muted); list-style: none; }
.settings-card.danger  { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.settings-card.danger .settings-card-header h2 { color: var(--danger-ink); }
.text-danger           { color: var(--danger); }
.row-label-strong      { font-weight: 600; }
.settings-list { display: flex; flex-direction: column; }
.settings-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-25) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--dur-fast) var(--ease);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: var(--surface-hover); }
.settings-hint { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-normal); padding: var(--sp-1) var(--sp-4) var(--sp-4); }
/* The hairline that starts a list (rows) — and one before a save bar that follows a list. */
.settings-hint + .settings-list, .settings-hint + [id$="-list"], .settings-hint + .col-cfg-locked,
.settings-list + .settings-card-body { border-top: 1px solid var(--line-soft); }
.settings-list + .settings-card-body { padding-top: var(--sp-3); }
/* Row actions are discoverable, not hidden: dimmed until the row is hovered or focused. */
.settings-row .row-actions { opacity: .6; }
.settings-row .row-actions { margin-left: auto; }
.settings-row:hover .row-actions, .settings-row:focus-within .row-actions { opacity: 1; }
.settings-row .btn-icon { width: 26px; height: 26px; color: var(--ink-muted); }
.settings-row .btn-icon .ic { width: 14px; height: 14px; }
.settings-row .btn-danger.btn-icon, .settings-row .btn-danger.btn-sm {
  background: transparent; border-color: transparent; color: var(--ink-muted);
}
.settings-row .btn-danger.btn-icon:hover, .settings-row .btn-danger.btn-sm:hover {
  background: var(--danger-subtle); border-color: transparent; color: var(--danger);
}
.drag-handle .ic { width: 14px; height: 14px; display: block; }
.settings-textarea {
  width: 100%; min-height: 120px; padding: var(--sp-25) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-xs); line-height: var(--lh-loose); resize: vertical;
}
.settings-textarea:focus { border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }

.pipeline-settings-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.pipeline-settings-row { display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line-soft); }   /* a pipeline's name above its stages */
.pipeline-settings-row:last-child { border-bottom: none; }
.settings-row.pipeline-stage-row, .settings-row.col-cfg-row { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }   /* one inset for every list row */
.col-cfg-locked .drag-handle { opacity: .25; }
.col-cfg-locked input[type="checkbox"] { opacity: .35; pointer-events: none; }
.pipeline-stages-list { display: flex; flex-direction: column; }
.pipeline-stage-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.pipeline-stage-row:last-child { border-bottom: none; }
.drag-handle { color: var(--ink-subtle); cursor: grab; font-size: 13px; line-height: 1; flex-shrink: 0; user-select: none; }
.drag-handle:active { cursor: grabbing; }

.col-cfg-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-15) var(--sp-2); border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
.col-cfg-row.col-drag-over { background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-line); }
.col-cfg-locked { color: var(--ink-subtle); font-size: var(--fs-2xs); }
.col-vis-toggle { display: flex; align-items: center; gap: var(--sp-2); flex: 1; cursor: pointer; font-size: var(--fs-sm); }
.col-vis-toggle input { flex-shrink: 0; }

.invite-code-val {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  padding: 2px var(--sp-15); border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink);
}
.invite-used { color: var(--ink-subtle); text-decoration: line-through; }
.member-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--brand-subtle); color: var(--brand-ink);
  font-size: var(--fs-xs); font-weight: 700;
}
.member-main { flex: 1; min-width: 0; }
.member-you  { color: var(--ink-muted); font-weight: 400; }
.member-role {
  padding: 1px var(--sp-15); border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line);
  font-size: var(--fs-3xs); font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-muted);
}
.member-role.role-admin { background: var(--brand-subtle); border-color: transparent; color: var(--brand-ink); }
.member-role.role-owner { background: var(--ink); border-color: transparent; color: var(--surface); }
/* The global `select { width: 100% }` rule would stretch these across the flex row. */
.member-role-select, #invite-role-select { width: auto; flex: 0 0 auto; height: 26px; }
.invite-actions { display: flex; align-items: center; gap: var(--sp-2); }
/* Pipeline name row in the Deals section: icon + name, with edit/delete on the right */
.pipeline-name { display: inline-flex; align-items: center; gap: var(--sp-15); }
.pipeline-name .ic { color: var(--ink-subtle); }

.workspace-name-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.workspace-name-input { flex: 1; min-width: 200px; }
.workspace-name-input:focus { border-color: var(--brand); box-shadow: var(--shadow-focus); }
/* Save feedback: a small pill beside the button that caused it. The JS sets
   the text ("Saved") and the class; the check / cross glyph is a CSS mask.
   Scoped to this page: the same class is a plain coloured line elsewhere.  */
.page-rail .workspace-name-msg {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2) 2px var(--sp-15); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 560; white-space: nowrap; line-height: 1.5;
}
.page-rail .workspace-name-msg::before {
  content: ''; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--ico) center / 12px no-repeat; mask: var(--ico) center / 12px no-repeat;
}
.page-rail .workspace-name-msg.success { background: var(--success-wash); color: var(--success-ink); --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.page-rail .workspace-name-msg.error   { background: var(--danger-wash);  color: var(--danger-ink);  --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.page-rail .workspace-name-msg.hidden { display: none; }

.lang-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lang-opt {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-25); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 550;
  transition: all var(--dur-fast) var(--ease);
}
.lang-opt:hover { border-color: var(--brand); }
.lang-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand-ink); }
.lang-opt input[type="radio"] { flex-shrink: 0; margin: 0; }
.lang-code {
  padding: 1px var(--sp-15); border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line);
  font-size: var(--fs-2xs); font-weight: 680; letter-spacing: .04em; color: var(--ink-muted);
}
.lang-opt:has(input:checked) .lang-code { background: var(--surface); border-color: var(--brand-line); color: var(--brand-ink); }

/* Appearance: a real switch, same geometry and tokens as the sidebar toggle. */
.switch-row { display: inline-flex; align-items: center; gap: var(--sp-25); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; }
input[type="checkbox"].switch,
#pref-dark-toggle {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 36px; height: 20px; border-radius: 10px; position: relative; cursor: pointer;
  background: var(--border-strong); transition: background .15s;
}
input[type="checkbox"].switch::after,
#pref-dark-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--n-0); box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .15s;
}
input[type="checkbox"].switch:checked,
#pref-dark-toggle:checked { background: var(--primary); }
input[type="checkbox"].switch:checked::after,
#pref-dark-toggle:checked::after { transform: translateX(16px); }
input[type="checkbox"].switch:focus-visible,
#pref-dark-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme="dark"] input[type="checkbox"].switch:checked::after,
[data-theme="dark"] #pref-dark-toggle:checked::after { background: var(--navy-900); }

/* ═══════════════════════════════════════════════════════════════════════════
   20 · ANALYTICS
   ═══════════════════════════════════════════════════════════════════════════ */

.analytics-period-switcher { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }
.period-btn {
  padding: var(--sp-1) var(--sp-25); border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-muted);
  font-size: var(--fs-xs); font-weight: 570; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.period-btn:hover { color: var(--ink); }
.period-btn.active { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-xs); }

/* Key metrics: the reference's single card of hairline-separated cells
   (reference/pro/src/screens/analytics.js). The six standalone tiles this replaced
   (.analytics-card + accent/label/value/sub/drag) went with it. */
.an-sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
/* Deals by owner reuses the pipeline bar row; its label column holds an avatar too. */
/* Win rate per month (Part 27): the reference's line chart, on a scaling viewBox. */
.an-chart { width: 100%; }
.an-svg { display: block; width: 100%; height: auto; }
.an-svg text { font: 500 11.5px var(--font); fill: var(--text-3); }
.an-grid { stroke: var(--divider); stroke-width: 1; shape-rendering: crispEdges; }
.an-axis { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.an-tick, .an-xlab { fill: var(--text-3); }
.an-area { fill: var(--accent); opacity: .1; }
.an-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-dot { fill: var(--accent); stroke: var(--card-bg); stroke-width: 2; }
.an-cross { stroke: var(--text-3); stroke-width: 1; opacity: 0; shape-rendering: crispEdges; }
.an-hit { fill: transparent; }
.an-slot { cursor: default; }
.an-slot:hover .an-cross { opacity: .7; }
.an-t1 { fill: var(--ink); font-weight: 620; }

/* Pipeline funnel (Part 26): rows of proportional bars with the conversion stated between them. */
.an-fn { display: flex; flex-direction: column; gap: 2px; }
.an-fn-row { display: grid; grid-template-columns: minmax(88px, 148px) 1fr auto minmax(64px, auto); align-items: center; gap: var(--sp-3); padding: 6px 0; }
.an-fn-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); color: var(--ink); }
.an-fn-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: 0 0 auto; }
.an-fn-n { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; text-align: right; }
.an-fn-val { font-size: var(--fs-xs); color: var(--ink-muted); text-align: right; white-space: nowrap; }
.an-fn-head { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.an-fn-conv { display: flex; align-items: center; gap: 4px; margin-left: 12px; padding: 2px 0; font-size: var(--fs-xs); color: var(--ink-muted); }
.an-fn-conv .ic { color: var(--text-3); }
.an-fn-lost { display: grid; grid-template-columns: minmax(88px, 148px) 1fr minmax(64px, auto); align-items: center; gap: var(--sp-3); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.an-fn-lost-text { font-size: var(--fs-xs); color: var(--ink-muted); }
@media (max-width: 720px) {
  .an-fn-row { grid-template-columns: minmax(72px, 1fr) 1fr auto; }
  .an-fn-row .an-fn-val, .an-fn-head { display: none; }
}
.an-owner-row .pipeline-bar-label { font-size: var(--fs-sm); color: var(--ink); min-width: 0; }
.an-kpis { display: grid; gap: 1px; background: var(--divider); border-radius: var(--r-lg); overflow: hidden; }
.an-kpi { background: var(--surface); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.an-kpi .kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.an-kpi .kpi-label > span:first-child { white-space: nowrap; flex: none; }
.an-kpi .kpi-label .hint { min-width: 0; color: var(--text-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi .kpi-value { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-kpi .kpi-foot { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.an-kpi .delta { font-size: var(--fs-sm); } .an-kpi .delta .ic { width: 13px; height: 13px; }
.an-kpi-fill { background: var(--surface); padding: 16px 20px; display: flex; align-items: center; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 760px) { .an-kpis { grid-template-columns: minmax(0, 1fr) !important; } }
.analytics-card.drag-over { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-line); }

.analytics-section {
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.analytics-section-title { font-size: var(--fs-2xs); font-weight: 680; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-subtle); margin-bottom: var(--sp-3); }

.analytics-draggable-section { position: relative; margin-bottom: var(--sp-4); border-radius: var(--r-lg); transition: opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.analytics-draggable-section.dragging { opacity: .4; }
.analytics-draggable-section.drag-over { box-shadow: 0 0 0 2px var(--brand-line); }
.section-drag-handle {
  position: absolute; left: -20px; top: var(--sp-15);
  color: var(--ink-subtle); cursor: grab; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.analytics-draggable-section:hover .section-drag-handle { opacity: 1; }
.section-drag-handle:active { cursor: grabbing; }

/* Win and loss (Part 28), ported from reference/pro/crm-pro.html:1483-1488. */
.an-wl .stack { height: 14px; border-radius: 7px; }
.an-wl .stack span { display: block; min-width: 4px; }
.an-wl-rows { display: grid; gap: 0; margin-top: 14px; }
.an-wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); }
.an-wl-row:last-child { border-bottom: 0; }
.an-wl-row i { width: 10px; height: 10px; border-radius: 3px; }
.an-wl-row .n { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; min-width: 24px; }
.an-wl-row .p { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.an-pl { display: grid; gap: 12px; margin-top: 4px; }
.an-pl-row .t { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.an-pl-row .t b { font-weight: 620; }
.an-pl-row .t span { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.an-pl-row .progress { height: 8px; border-radius: 4px; }
.an-pl-row .progress > i { background: var(--accent); border-radius: 4px; }
.an-divider { height: 1px; background: var(--divider); margin: 16px 0 14px; }
/* The per-card data table (Part 29), from reference/pro/crm-pro.html:1489-1490. */
.an-table-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: auto; }
.an-table-wrap .table thead th { position: static; }
.an-table-wrap .table td { height: 38px; }

/* Pipeline bars */
.analytics-pipeline-group { display: flex; flex-direction: column; gap: var(--sp-25); }
.analytics-pipeline-sep { position: relative; margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 680; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-subtle); }
.analytics-pipeline-sep::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--line-soft); }
.pipeline-bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; align-items: center; gap: var(--sp-3); }
.pipeline-bar-label { font-size: var(--fs-xs); color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-bar-track { height: 8px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.pipeline-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width var(--dur-slow) var(--ease); }
.pipeline-bar-stats { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Trend charts */
.analytics-trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--sp-3); }
.analytics-trend-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.trend-card {
  position: relative; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.trend-card:hover { box-shadow: var(--shadow-md); }
.trend-card[draggable] { cursor: default; }
.trend-card.dragging { opacity: .4; }
.trend-card.drag-over { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-line); }
.trend-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.trend-card-title { font-size: var(--fs-sm); font-weight: 620; }
.trend-card-total { font-size: var(--fs-lg); font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.trend-drag-handle { color: var(--ink-subtle); cursor: grab; font-size: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.trend-card:hover .trend-drag-handle { opacity: 1; }
.trend-drag-handle:active { cursor: grabbing; }
.trend-chart-wrap { position: relative; }
.sparkline-svg { width: 100%; height: 92px; display: block; overflow: visible; }
.spark-dot { cursor: pointer; transition: r var(--dur-fast) var(--ease); }
.spark-dot:hover { r: 5; }
.spark-label-row { display: flex; justify-content: space-between; margin-top: var(--sp-15); }
.spark-label { font-size: var(--fs-3xs); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.spark-tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  padding: var(--sp-15) var(--sp-2); border-radius: var(--r-sm);
  background: var(--n-900); color: #fff;
  font-size: var(--fs-2xs); font-weight: 550; white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .spark-tooltip { background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); }
.trend-x-labels { display: flex; justify-content: space-between; margin-top: var(--sp-15); }
.trend-view-btns { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }
.trend-view-btn {
  padding: 2px var(--sp-2); border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-muted);
  font-size: var(--fs-2xs); font-weight: 570; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.trend-view-btn:hover { color: var(--ink); }
.trend-view-btn.active { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-xs); }
.trend-detail-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.trend-detail-row { display: grid; grid-template-columns: minmax(80px, 130px) 1fr auto; align-items: center; gap: var(--sp-2); }
.trend-detail-label { font-size: var(--fs-xs); color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-detail-track { height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.trend-detail-fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width var(--dur-slow) var(--ease); }
.trend-detail-val { font-size: var(--fs-xs); font-weight: 620; font-variant-numeric: tabular-nums; }

/* Metric config modal */
.analytics-config-label { font-size: var(--fs-2xs); font-weight: 680; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-subtle); margin-bottom: var(--sp-2); }
.analytics-stage-chips { display: flex; flex-wrap: wrap; gap: var(--sp-15); }
.analytics-stage-option {
  display: flex; align-items: center; gap: var(--sp-15);
  padding: var(--sp-1) var(--sp-25); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--fs-xs); cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.analytics-stage-option:hover { border-color: var(--brand); }
.analytics-stage-dot { width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   21 · INTEGRATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Page: the Settings shell (rail + panes, §19). Each pane's cards sit in one column at the Settings width. */
.intg-stack { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--rail-content-max); }
/* Rail icons for this page's tabs, in the Settings recipe (CSS masks, so data-i18n can rewrite the label). */
.settings-tab[data-tab="webhook"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="platforms"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="activity"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="engine"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.settings-tab[data-tab="deliveries"]::before { --ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); }

/* Card anatomy: header (name + switch) → hint → body of hairline-separated sections → save bar. */
.intg-section { display: flex; flex-direction: column; gap: var(--sp-25); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.settings-card-body > .intg-section:first-child { padding-top: 0; border-top: none; }
.intg-section > .switch-row { align-self: flex-start; }
.intg-section-head { display: flex; flex-direction: column; gap: 2px; }
.intg-section-head h3 { font-size: var(--fs-sm); font-weight: 620; letter-spacing: -.008em; line-height: var(--lh-snug); color: var(--ink); }
.intg-section-hint { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-normal); }
.intg-stack .settings-card-body > .settings-card-actions { padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.intg-fields { display: flex; flex-direction: column; gap: var(--sp-2); }
.intg-field { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 360px; }
.intg-field label { font-size: var(--fs-xs); font-weight: 580; color: var(--ink-secondary); }
.intg-field select, .intg-field input { width: 100%; font-size: var(--fs-sm); }
.intg-autosaved { align-self: flex-end; font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-ink); }
input[type="checkbox"].switch:disabled { opacity: .5; cursor: default; }

/* Read-only URL and secret fields */
.intg-url-box { flex: 1; min-width: 0; display: flex; gap: var(--sp-15); align-items: center; flex-wrap: wrap; }
.intg-url-box .btn { flex-shrink: 0; }
.intg-url-input, .intg-key-input {
  width: 100%; padding: var(--sp-2) var(--sp-25);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-sunken); color: var(--ink);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs);
}
.intg-url-box .intg-url-input { flex: 1; width: auto; min-width: 220px; }

/* Inline code in hints, guide steps, notes and log entries */
.intg-stack code {
  padding: 1px var(--sp-1); border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink);
}

/* Connect a platform: list on the left, guide on the right */
.intg-two-panel { display: grid; grid-template-columns: minmax(210px, 260px) 1fr; gap: var(--sp-4); align-items: start; }
.intg-platform-list { display: flex; flex-direction: column; gap: var(--sp-15); }
.intg-platform-card {
  display: flex; align-items: center; gap: var(--sp-25);
  padding: var(--sp-25) var(--sp-3); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.intg-platform-card:hover { border-color: var(--line-strong); }
.intg-platform-card.active { border-color: var(--brand); background: var(--brand-subtle); box-shadow: 0 0 0 1px var(--brand); }
.intg-platform-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.intg-platform-logo { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; }
.intg-platform-logo svg { width: 100%; height: 100%; }
.intg-platform-name { font-size: var(--fs-sm); font-weight: 570; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.intg-guide-panel { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); min-height: 120px; }
[data-theme="dark"] .intg-guide-panel { background: var(--surface-sunken); }
.intg-guide-panel .empty-inline { padding: 0; }
.intg-guide-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.intg-guide-logo-sm { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.intg-guide-logo-sm svg { width: 100%; height: 100%; }
.intg-guide-title-text { font-size: var(--fs-sm); font-weight: 600; }
.intg-guide-subtitle { font-size: var(--fs-xs); color: var(--ink-muted); }
.intg-guide-url {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-25) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-md);
}
.intg-guide-url-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-muted); }
.intg-guide-url-row { display: flex; gap: var(--sp-2); align-items: center; }
.intg-guide-url-row code {
  flex: 1; min-width: 0; padding: 0; border: none; background: transparent;
  word-break: break-all; font-family: 'SF Mono', ui-monospace, Menlo, monospace;
}
.intg-guide-steps { counter-reset: step; list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-25); }
.intg-guide-steps li {
  position: relative; counter-increment: step; padding-left: var(--sp-7);
  font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--ink-secondary);
}
.intg-guide-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 2px;
  display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: var(--r-full); background: var(--brand-subtle); border: 1px solid var(--brand-line);
  color: var(--brand-ink); font-size: var(--fs-3xs); font-weight: 700;
}
.intg-guide-steps li strong { font-weight: 620; color: var(--ink); }

/* Sample payload */
.intg-code {
  display: block; padding: var(--sp-3);
  background: var(--n-900); color: #D6E2F0;
  border-radius: var(--r-md); overflow-x: auto;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); line-height: var(--lh-loose); white-space: pre;
}
[data-theme="dark"] .intg-code { background: #060C14; border: 1px solid var(--line); }
.intg-json-block { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: var(--sp-4); }
.intg-json-block .intg-code { border-radius: 0; }
.intg-json-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-secondary);
}
.intg-json-note { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--ink-muted); line-height: var(--lh-loose); }
.intg-json-note strong { color: var(--ink); }

/* Field mapping: one row per contact field, the incoming key on the right */
.intg-field-map { display: flex; flex-direction: column; gap: var(--sp-15); }
.intg-map-section-label { margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-muted); }
.intg-map-section-label:first-child { margin-top: 0; }
.intg-map-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: var(--sp-2); }
.intg-map-label { font-size: var(--fs-sm); color: var(--ink-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.intg-map-arrow { color: var(--ink-subtle); font-size: var(--fs-xs); flex-shrink: 0; }
.intg-map-crm { font-size: var(--fs-sm); font-weight: 550; }
.intg-map-input { width: 100%; }
.intg-map-custom-tag {
  padding: 1px var(--sp-15); border-radius: var(--r-xs);
  background: var(--accent-subtle); color: var(--accent-strong);
  font-size: var(--fs-3xs); font-weight: 680; text-transform: uppercase; letter-spacing: .04em;
}
.intg-map-remove {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border: none; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-subtle); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.intg-map-remove:hover { background: var(--danger-subtle); color: var(--danger-ink); }
.intg-key-field { display: flex; gap: var(--sp-15); align-items: center; }
.intg-key-input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); cursor: default; }
.intg-key-input:not([readonly]) { background: var(--surface); color: var(--ink); border-color: var(--brand); box-shadow: var(--shadow-focus); }
.intg-key-edit-btn.active { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); }
.intg-map-add-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.intg-add-select { min-width: 180px; max-width: 320px; }

/* Recent incoming leads and Engine deliveries: one entry per event */
.intg-logs, .engine-deliveries { display: flex; flex-direction: column; gap: var(--sp-2); }
.intg-log-entry {
  border: 1px solid var(--line); border-left: 3px solid var(--success);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.intg-log-entry.error { border-left-color: var(--danger); }
.intg-log-entry-header {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); background: var(--canvas); border-bottom: 1px solid var(--line-soft);
}
[data-theme="dark"] .intg-log-entry-header { background: var(--surface-sunken); }
.intg-log-badge {
  padding: 1px var(--sp-15); border-radius: var(--r-xs);
  font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.intg-log-badge.success { background: var(--success-subtle); color: var(--success-ink); }
.intg-log-badge.error   { background: var(--danger-subtle);  color: var(--danger-ink); }
.intg-log-time { font-size: var(--fs-2xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.intg-log-contact { font-size: var(--fs-sm); font-weight: 570; }
.intg-log-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-15) var(--sp-3); padding: var(--sp-25) var(--sp-3); }
.intg-log-field { font-size: var(--fs-xs); min-width: 0; }
.intg-log-field-key { font-weight: 620; color: var(--ink-secondary); }
.intg-log-field-key::after { content: ':'; margin-right: var(--sp-1); color: var(--ink-subtle); }
.intg-log-skipped { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--ink-muted); border-top: 1px solid var(--line-soft); }
.intg-log-raw { padding: 0 var(--sp-3) var(--sp-25); }
.intg-log-raw-toggle {
  padding: var(--sp-15) var(--sp-3) 0; background: none; border: none;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-muted); cursor: pointer;
}
.intg-log-raw-toggle:hover { color: var(--brand-ink); text-decoration: underline; }

/* Upgrads Engine card */
.engine-stage-groups { display: flex; flex-direction: column; gap: var(--sp-3); }
.intg-log-badge.pending { background: var(--warning-subtle); color: var(--warning-ink); }
.intg-log-badge.failed  { background: var(--danger-subtle);  color: var(--danger-ink); }
.engine-delivery-meta { display: flex; gap: var(--sp-2); margin-left: auto; font-size: var(--fs-2xs); color: var(--ink-muted); }
.intg-log-entry-header .engine-retry { height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-2xs); }
/* API keys card: the issued-keys table */
.engine-keys-table { font-size: var(--fs-sm); }
.engine-key-prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--ink-secondary); }
.engine-key-revoked td { color: var(--ink-muted); }
.engine-key-actions { text-align: right; width: 1%; }
/* The OpenAPI download line under the API-keys hint: hint typography, tucked up against it */
.engine-openapi { font-size: var(--fs-sm); line-height: var(--lh-normal); padding: 0 var(--sp-4) var(--sp-4); margin-top: calc(var(--sp-3) * -1); }
.engine-openapi a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
/* A custom mapping row ends with its tag and its remove button, in one grid cell */
.intg-map-end { display: flex; align-items: center; gap: var(--sp-1); }
/* Trigger stages as chips: the checkbox stays real and keyboard-focusable; the label shows the state */
.engine-stage-groups .analytics-stage-option { position: relative; padding: var(--sp-1) var(--sp-25); user-select: none; }
.engine-stage-groups .analytics-stage-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.engine-stage-groups .analytics-stage-option:has(input:checked) { border-color: var(--success); background: var(--success-subtle); color: var(--success-ink); }
.engine-stage-groups .analytics-stage-option:focus-within { box-shadow: var(--shadow-focus); border-color: var(--brand); }

/* Role3 additions: the page's one-line description, the empty-state line the
   reference inherited from a global rule, and the disabled trigger-stage dot. */
#page-integrations .page-sub { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 2px; }
.intg-stack .empty-inline { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--ink-muted); }
.engine-stage-groups .analytics-stage-option input:disabled + .analytics-stage-dot { opacity: .5; }

/* ═══════════════════════════════════════════════════════════════════════════
   22 · AUTH & ADMIN
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-wrap {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); background: var(--canvas); overflow: hidden;
}
/* Two soft brand washes instead of a hard gradient — quiet, not corporate-1998 */
.auth-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60ch 44ch at 18% 8%,  color-mix(in srgb, var(--sky-400) 24%, transparent), transparent 62%),
    radial-gradient(56ch 40ch at 88% 92%, color-mix(in srgb, var(--navy-800) 13%, transparent), transparent 60%);
}
[data-theme="dark"] .auth-wrap::before {
  background:
    radial-gradient(60ch 44ch at 18% 8%,  color-mix(in srgb, var(--sky-400) 12%, transparent), transparent 62%),
    radial-gradient(56ch 40ch at 88% 92%, color-mix(in srgb, var(--navy-600) 22%, transparent), transparent 60%);
}
.auth-card {
  position: relative; width: 100%; max-width: 408px;
  padding: var(--sp-8) var(--sp-7);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  animation: modal-in var(--dur-slow) var(--ease-out) both;
}
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.auth-logo img { height: 34px; width: auto; object-fit: contain; }
[data-theme="dark"] .auth-logo img { filter: brightness(0) invert(1); opacity: .92; }
.auth-logo span { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-muted); }

.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-field { display: flex; flex-direction: column; gap: var(--sp-15); }
.auth-field label { font-size: var(--fs-xs); font-weight: 580; color: var(--ink-secondary); }
.auth-field input { width: 100%; height: 38px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.auth-field input:focus { border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
.auth-submit { width: 100%; height: 40px; font-size: var(--fs-sm); font-weight: 620; margin-top: var(--sp-1); }

.auth-error {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-25); border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: var(--lh-normal);
  background: var(--danger-wash); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
}

.auth-link-row { text-align: center; margin-top: var(--sp-3); }
.auth-link-row a { font-size: var(--fs-xs); font-weight: 550; color: var(--brand-ink); }
.auth-link-row a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Workspace picker on login */
.workspace-picker-list { display: flex; flex-direction: column; gap: var(--sp-15); }
.workspace-picker-btn {
  display: flex; align-items: center; gap: var(--sp-25); width: 100%;
  padding: var(--sp-25) var(--sp-3); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease);
}
.workspace-picker-btn:hover { border-color: var(--brand); background: var(--brand-subtle); }
.workspace-picker-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--brand); color: var(--ink-inverse);
  font-size: var(--fs-xs); font-weight: 700;
}
.workspace-picker-name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-picker-role { font-size: var(--fs-2xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* Admin panel */
.admin-panel-title { font-size: var(--fs-md); font-weight: 640; letter-spacing: var(--tracking-tight); }
.admin-panel-sub { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-4); line-height: var(--lh-normal); }
.admin-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.admin-invites-list { display: flex; flex-direction: column; gap: var(--sp-15); max-height: 320px; overflow-y: auto; }
.admin-invite-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-25);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin-invite-row.used { opacity: .55; }
.admin-invite-code { flex: 1; min-width: 0; font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.admin-invite-meta { display: flex; align-items: center; gap: var(--sp-15); flex-shrink: 0; }
.admin-invite-date { font-size: var(--fs-2xs); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.admin-invite-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.admin-badge { padding: 1px var(--sp-15); border-radius: var(--r-xs); font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.admin-badge.available { background: var(--success-subtle); color: var(--success-ink); }
.admin-badge.used { background: var(--surface-sunken); color: var(--ink-muted); }
.admin-empty { padding: var(--sp-8); text-align: center; font-size: var(--fs-sm); color: var(--ink-subtle); }
.admin-link-row { text-align: center; margin-top: var(--sp-4); }
.admin-link { font-size: var(--fs-xs); color: var(--ink-muted); }
.admin-link:hover { color: var(--brand-ink); text-decoration: underline; }

/* ── 22b · LOGIN (au-) ─────────────────────────────────────────────────────
   #auth-screen only (2026-10-06, reworked the same day). A two-tone split: the
   navy wall (the sidebar's own gradient, the reference's fading grid, a sky
   glow) beside a white half that holds the form column — no card, no canvas.
   Headlines are set in Schibsted Grotesk (the landing page's display face);
   everything else stays on Inter. The admin gates (#admin-screen, admin.html)
   keep the .auth-* card above. .auth-tabs / .auth-tab remain in the login
   markup only as the hooks auth.js toggles: here they are the sentence switch
   under the form ("Noch kein Konto? Konto erstellen").                        */
.au { --font-display: "Schibsted Grotesk", var(--font); min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(400px, 23fr) 27fr; background: var(--surface); }
.au-brand {
  position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; overflow: hidden;
  display: flex; flex-direction: column; padding: 40px 56px 36px;
  color: var(--sb-text);
  background: radial-gradient(120% 90% at 0% 0%, var(--sb-bg-2) 0%, var(--sb-bg) 62%);
}
/* The wall (js/login-wall.js): a canvas of louvre slats that turn toward the pointer; under it a sky glow,
   over it a scrim that calms the band where the text sits. Content stacks above both. */
.au-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 44% at 100% 100%, color-mix(in srgb, var(--sky-400) 16%, transparent), transparent 70%); }
.au-wall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.au-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 12%, var(--sb-bg) 38%, var(--sb-bg) 66%, transparent 94%); opacity: .78; }   /* clear above 12%: the logo surfaces there */
.au-brand > * { position: relative; z-index: 1; }
/* ".au-brand > *" above has the same specificity as ".au-wall" and comes later, so it would drag the canvas back
   into the flow (full height, on top, content pushed below). Re-assert the two layers absolute, more specifically. */
.au-brand > .au-wall, .au-brand > .au-scrim { position: absolute; z-index: 0; }
.au-logo { height: 26px; width: auto; display: block; align-self: flex-start; filter: brightness(0) invert(1); opacity: .95; }
.au-brand-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-width: 480px; padding: 48px 0; }
.au-headline { font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -.028em; color: var(--navy-50); margin: 0; text-wrap: balance; }
.au-lede { margin: 18px 0 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--sb-text); max-width: 44ch; }
.au-points { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--sb-border); }
.au-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--sb-border); }
.au-pt-ic { width: 40px; height: 40px; border-radius: var(--r-lg); display: grid; place-items: center; color: var(--sky-400); background: color-mix(in srgb, var(--sky-400) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sky-400) 24%, transparent); }
.au-pt-ic .ic { width: 18px; height: 18px; }
.au-points b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; color: var(--navy-50); }
.au-points .t { display: block; margin-top: 4px; font-size: var(--fs-base); line-height: 1.5; color: var(--sb-text-dim); }

/* One orchestrated reveal on first paint: the wall's four pieces rise in turn, then the form. */
.au-rise { animation: modal-in .5s var(--ease-out) both; }
.au-rise-1 { animation-delay: .08s; } .au-rise-2 { animation-delay: .16s; } .au-rise-3 { animation-delay: .24s; }
.au-in { animation: modal-in var(--dur-slow) var(--ease-out) both; animation-delay: .12s; }

/* The form half: the app canvas with a faint dot grid fading downward (an echo of the wall's texture) and a sky
   glow top right; the form is a precise white card. Depth, one palette, nothing flat. */
.au-main { position: relative; isolation: isolate; display: grid; justify-items: center; align-items: center; padding: 48px 32px; min-width: 0; background: var(--canvas); }
.au-main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 38% at 88% 0%, color-mix(in srgb, var(--sky-400) 26%, transparent), transparent 72%); }
.au-main::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, transparent 78%); }
/* DE | EN, top right of the form half; aria-pressed is kept by applyTranslations() */
.au-tools { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 8px; }
.au-lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.au-lang button { height: 26px; padding: 0 9px; border: 0; border-radius: 4px; background: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; cursor: pointer; }
.au-lang button:hover { color: var(--text); }
.au-lang button[aria-pressed="true"] { background: var(--brand-subtle); color: var(--brand-ink); }
.au-lang button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.au-theme { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text-3); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.au-theme .ic { width: 16px; height: 16px; }
.au-theme:hover { color: var(--text); border-color: var(--line-strong); }
.au-theme[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-subtle); }
.au-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.au-col { width: 100%; max-width: 440px; padding: 36px 40px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.au-head { margin-bottom: 24px; }
.au-form .au-head { margin-bottom: 8px; }
.au-title { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.022em; margin: 0; color: var(--brand); }   /* navy; sky in dark, by the token */
.au-sub { margin: 8px 0 0; font-size: var(--fs-base); color: var(--text-3); line-height: 1.5; }
.au-form { display: flex; flex-direction: column; gap: 16px; }
/* The one orchestrated moment on this side: the form's rows rise in turn — on load, and again when the
   sign-up form is shown (display: none → block restarts the animation). */
.au-form > * { animation: modal-in .45s var(--ease-out) both; }
.au-form > :nth-child(1) { animation-delay: .05s; } .au-form > :nth-child(2) { animation-delay: .1s; } .au-form > :nth-child(3) { animation-delay: .15s; } .au-form > :nth-child(4) { animation-delay: .2s; }
.au-form > :nth-child(5) { animation-delay: .25s; } .au-form > :nth-child(6) { animation-delay: .3s; } .au-form > :nth-child(7) { animation-delay: .35s; } .au-form > :nth-child(n+8) { animation-delay: .4s; }
.au-field .label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.au-field .input { height: 44px; padding: 0 12px; font-size: var(--fs-base); border-color: var(--line-strong); }
.au-field .input:hover:not(:focus) { border-color: var(--navy-400); }
/* A sprite icon inside the field (mail, lock) — the staged symbols the app never used. */
.au-inp { position: relative; }
.au-inp .input { padding-left: 40px; }
.au-inp-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; transition: color var(--dur-fast) var(--ease); }
.au-inp:focus-within .au-inp-ic { color: var(--accent-strong); }
.au-field .input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky-400) 35%, transparent); }
.au-field .help { font-size: var(--fs-xs); line-height: 1.45; }
.au-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.au-lab a { font-size: var(--fs-sm); font-weight: 550; color: var(--link); }
.au-lab a:hover { text-decoration: underline; }
.au-pw { position: relative; }
.au-pw .input { padding-right: 44px; }
.au-pw-btn { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-sm); color: var(--text-3); cursor: pointer; }
.au-pw-btn:hover { background: var(--hover); color: var(--text); }
.au-pw-btn[aria-pressed="true"] { color: var(--text); }
.au-pw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.au-pw-btn .ic { width: 18px; height: 18px; }
.au-modes { display: grid; gap: 8px; }
.au-mode { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 500; color: var(--text-2); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.au-mode:hover { border-color: var(--line-strong); }
.au-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); color: var(--text); }
.au-submit { width: 100%; height: 44px; margin-top: 4px; font-size: var(--fs-base); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(16,24,40,.18); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.au-submit:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); }
.au-submit:active { transform: none; }
.au-submit[aria-busy="true"] { opacity: .85; pointer-events: none; }
.au-alert, .au-notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 550; line-height: 1.45; }
.au-alert { background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger); }
.au-notice { background: var(--success-bg); border: 1px solid var(--success-bd); color: var(--success); }
/* After five failed logins: a calm pointer to the way out, with the link right there. */
.au-advice { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.45; background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info); }
.au-advice a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.au-linkrow { display: flex; gap: 6px; }
.au-linkrow .input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-xs); }
.au-aux { display: flex; justify-content: center; gap: 20px; margin-top: 20px; font-size: var(--fs-sm); }
.au-aux a { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--link); }
.au-aux a:hover { text-decoration: underline; }
/* The sentence switch: the inactive tab reads as a link after its question; the active one and its question hide. */
.au-switch { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: var(--fs-base); color: var(--text-3); }
.au-switch .auth-tab { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--link); cursor: pointer; }
.au-switch .auth-tab:hover { text-decoration: underline; }
.au-switch .auth-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.au-switch .auth-tab.active,
.au-switch:has(.auth-tab.active[data-tab="login"]) [data-for="login"],
.au-switch:has(.auth-tab.active[data-tab="signup"]) [data-for="signup"] { display: none; }
.au .workspace-picker-list { margin-bottom: 12px; }
.au .admin-link-row { margin-top: 14px; }
.au .admin-link { color: var(--ink-subtle); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
@media (max-width: 960px) {
  .au { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .au-brand { position: relative; height: auto; padding: 24px 24px 28px; }
  .au-brand-body { padding: 24px 0 0; }
  .au-headline { font-size: clamp(26px, 6vw, 32px); }
  .au-lede, .au-points { display: none; }
  .au-main { padding: 72px 16px 40px; align-items: start; }
  .au-col { padding: 26px 20px 22px; }
  .au-wall, .au-scrim { display: none; }   /* the short mobile bar has no room for the wall */
  .au-tools { top: 16px; right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23 · WORKSPACES
   ═══════════════════════════════════════════════════════════════════════════ */
.ws-dropdown {
  position: absolute; z-index: 9500; min-width: 240px;
  padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur) var(--ease-out) both;
}
.ws-dropdown-list { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.ws-dropdown-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-15) var(--sp-2); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.ws-dropdown-item:hover { background: var(--surface-active); }
.ws-dropdown-item.active { background: var(--brand-subtle); }
.ws-dropdown-item.active .ws-dropdown-name { color: var(--brand-ink); font-weight: 620; }
.ws-dropdown-avatar {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--brand); color: var(--ink-inverse);
  font-size: var(--fs-3xs); font-weight: 700;
}
.ws-dropdown-name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dropdown-divider { height: 1px; background: var(--line); margin: var(--sp-1) 0; }
.ws-dropdown-action {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-15) var(--sp-2); border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-secondary);
  font-size: var(--fs-sm); font-weight: 550; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ws-dropdown-action:hover { background: var(--surface-active); color: var(--ink); }

.ws-page-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--sp-4); align-content: start; padding-bottom: var(--sp-2);
  padding-right: var(--sp-1);
}
.ws-page-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  cursor: pointer; user-select: none;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ws-page-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px); }
.ws-page-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }

/* Banner — the inline `background:<gradient>` from JS wins over this fallback */
.ws-page-card-banner {
  position: relative; height: 72px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(120deg, var(--navy-800), var(--sky-600));
}
.ws-page-card-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(10,23,41,.08));
}
.ws-page-avatar-lg {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-md); background: var(--surface);
  border: 2px solid var(--surface); box-shadow: var(--shadow-md);
  color: var(--brand-ink); font-size: var(--fs-lg); font-weight: 700;
}
.ws-page-active-badge {
  position: absolute; z-index: 1; top: var(--sp-2); right: var(--sp-2);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--navy-950) 52%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: var(--fs-3xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; box-shadow: var(--shadow-xs);
}
.ws-page-card-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface);
}
.ws-page-name {
  font-size: var(--fs-md); font-weight: 650; letter-spacing: var(--tracking-tight);
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-page-role { font-size: var(--fs-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.ws-page-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-25) var(--sp-4); margin-top: auto;
  border-top: 1px solid var(--line-soft); background: var(--canvas);
}
[data-theme="dark"] .ws-page-card-footer { background: var(--surface-sunken); }
.ws-page-open-btn { font-size: var(--fs-xs); font-weight: 600; color: var(--brand-ink); cursor: pointer; }

/* “Add a workspace” card — same skeleton as a real card, dashed outline */
.ws-page-add {
  border: 1.5px dashed var(--line-strong);
  background: var(--surface); box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ws-page-add:hover { border-color: var(--brand); background: var(--brand-subtle); transform: translateY(-2px); }
.ws-page-add .ws-page-card-banner {
  height: 72px; padding: 0;
  background: var(--surface-sunken);
  display: grid; place-items: center;
}
.ws-page-add .ws-page-card-banner::after { display: none; }
.ws-page-add-icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--surface); border: 1.5px dashed var(--line-strong);
  color: var(--brand); font-size: var(--fs-xl); font-weight: 350;
  transition: all var(--dur-fast) var(--ease);
}
.ws-page-add:hover .ws-page-add-icon { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.04); }

.add-ws-choices { display: grid; gap: var(--sp-2); }
.add-ws-choice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease);
}
.add-ws-choice:hover { border-color: var(--brand); background: var(--brand-subtle); }
.add-ws-choice-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--brand-subtle); color: var(--brand-ink);
  border: 1px solid var(--brand-line); font-size: var(--fs-md);
}
.add-ws-choice-title { font-size: var(--fs-sm); font-weight: 620; }
.add-ws-choice-sub { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 1px; line-height: var(--lh-normal); }

/* ═══════════════════════════════════════════════════════════════════════════
   24 · NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
/* White on the dark-theme red is 2.8:1 — dark ink on the same red is 6.8:1. */
[data-theme="dark"] .notif-badge,
[data-theme="dark"] .chat-fab-badge { color: #2A0A08; }
.notif-badge {
  position: absolute; top: 3px; right: 4px;
  display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--r-full); background: #E0483C; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--surface);
}

/* The panel is a popover under the bell in the top bar */
.notif-panel { position: fixed; top: 60px; right: 12px; z-index: 9100; width: 380px; max-height: min(560px, calc(100vh - 72px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: pop .12s ease; }
.notif-panel.hidden { display: none !important; }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--divider);
}
.notif-panel-title { font-size: var(--fs-md); font-weight: 640; }
.notif-list { flex: 1; overflow-y: auto; min-height: 0; }
.notif-item {
  display: flex; align-items: flex-start; gap: var(--sp-25);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unread { background: var(--brand-subtle); }
.notif-item.unread:hover { background: var(--brand-subtle-2); }
.notif-dot { width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0; margin-top: 6px; background: var(--accent-strong); }
.notif-dot.read { background: transparent; }
.notif-icon { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.notif-body  { font-size: var(--fs-xs); color: var(--ink-secondary); margin-top: 2px; line-height: var(--lh-normal); }
.notif-time  { font-size: var(--fs-2xs); color: var(--ink-subtle); margin-top: 3px; }
.notif-empty { padding: var(--sp-12) var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--ink-subtle); line-height: var(--lh-loose); }
.notif-system { border-left: 3px solid var(--accent); }
.notif-pref-list { display: flex; flex-direction: column; gap: var(--sp-15); }
.notif-pref-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-15) 0; font-size: var(--fs-sm); cursor: pointer; }
.notif-pref-row input[type="checkbox"] { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   25 · TEAM CHAT
   ═══════════════════════════════════════════════════════════════════════════ */
.page-chat-layout { padding: 0 !important; gap: 0 !important; }
#page-chat.active { display: flex; flex-direction: column; }
.chat-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--page-pad); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.chat-page-header h1 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: var(--tracking-tight); }
.chat-header { display: flex; align-items: center; gap: var(--sp-2); }
.chat-title { font-size: var(--fs-sm); font-weight: 620; }
.chat-subtitle { font-size: var(--fs-xs); color: var(--ink-muted); }
.chat-online-bar, .chat-page-online-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) var(--page-pad); flex-shrink: 0;
  background: var(--canvas); border-bottom: 1px solid var(--line-soft);
}
[data-theme="dark"] .chat-online-bar, [data-theme="dark"] .chat-page-online-bar { background: var(--surface-sunken); }
.chat-online-item { display: flex; align-items: center; gap: var(--sp-15); font-size: var(--fs-xs); color: var(--ink-secondary); }
.chat-online-dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--success); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }

.chat-messages, .chat-page-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-15);
  padding: var(--sp-4) var(--page-pad);
}
.chat-day-sep { position: relative; text-align: center; margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 620; color: var(--ink-subtle); }
.chat-day-sep::before, .chat-day-sep::after { content: ''; position: absolute; top: 50%; width: calc(50% - 52px); height: 1px; background: var(--line); }
.chat-day-sep::before { left: 0; } .chat-day-sep::after { right: 0; }

/* Team Chat (Part 6): message rows follow the reference's flat .msg
   convention (00b) instead of the dead renderMessages()'s chat bubbles —
   one avatar per run of same-sender messages, a grouped row's own time only
   on hover, scoped under .chat-page-messages so the unused #chat-messages
   widget (dead code) keeps its own .chat-msg/.chat-bubble rules untouched. */
.chat-page-messages .msg { padding: var(--sp-15) var(--sp-2); margin: 0 calc(var(--sp-2) * -1); border-radius: var(--r-md); }
.chat-page-messages .msg:hover { background: var(--surface-2); }
.chat-page-messages .msg.grouped { padding-top: 1px; padding-bottom: 1px; }
.chat-page-messages .msg .gtime { text-align: right; font-size: var(--fs-2xs); color: var(--ink-subtle); opacity: 0; padding-top: 3px; font-variant-numeric: tabular-nums; }
.chat-page-messages .msg:hover .gtime { opacity: 1; }
.chat-page-messages .ch-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-loose); color: var(--ink); }

.chat-msg { display: flex; align-items: flex-end; gap: var(--sp-2); max-width: 78%; }
.chat-msg.grouped { margin-top: -4px; }
.chat-msg.me { flex-direction: row-reverse; margin-left: auto; }
.chat-avatar {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--brand-subtle); color: var(--brand-ink);
  font-size: var(--fs-2xs); font-weight: 700;
}
.chat-avatar-spacer { width: 28px; flex-shrink: 0; }
.chat-bubble-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-bubble {
  padding: var(--sp-2) var(--sp-25); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink);
  word-break: break-word; box-shadow: var(--shadow-xs);
}
.chat-msg.me .chat-bubble { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); }
[data-theme="dark"] .chat-msg.me .chat-bubble { color: var(--navy-950); }
.chat-meta { display: flex; align-items: center; gap: var(--sp-15); font-size: var(--fs-3xs); color: var(--ink-subtle); padding: 0 var(--sp-1); }
.chat-msg.me .chat-meta { justify-content: flex-end; }
.chat-time { font-variant-numeric: tabular-nums; }
.chat-empty { padding: var(--sp-12); text-align: center; font-size: var(--fs-sm); color: var(--ink-subtle); }

.chat-composer {
  display: flex; align-items: flex-end; gap: var(--sp-2); flex-shrink: 0;
  padding: var(--sp-3) var(--page-pad);
  border-top: 1px solid var(--line); background: var(--surface);
}
.chat-input {
  flex: 1; min-height: 38px; max-height: 140px; resize: none;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm);
}
.chat-input:focus { border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
.chat-send-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border: none; border-radius: var(--r-full); background: var(--brand); color: var(--ink-inverse);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chat-send-btn svg { width: 17px; height: 17px; }
.chat-send-btn:hover { background: var(--brand-hover); }
.chat-send-btn:active { transform: scale(.94); }
[data-theme="dark"] .chat-send-btn { color: var(--navy-950); }

.chat-panel {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 8500;
  width: 356px; height: min(560px, 74vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  animation: modal-in var(--dur-slow) var(--ease-out) both;
}
.chat-panel.hidden { display: none !important; }
.chat-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.chat-panel-title { font-size: var(--fs-sm); font-weight: 640; }
.chat-panel-close { display: grid; place-items: center; width: 26px; height: 26px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink-muted); font-size: 17px; cursor: pointer; }
.chat-panel-close:hover { background: var(--surface-active); color: var(--ink); }
.chat-panel .chat-messages, .chat-panel .chat-composer { padding-left: var(--sp-3); padding-right: var(--sp-3); }

.chat-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 8400;
  display: grid; place-items: center; width: 50px; height: 50px;
  border: none; border-radius: var(--r-full);
  background: var(--brand); color: var(--ink-inverse);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), background var(--dur-fast) var(--ease);
}
.chat-fab:hover { background: var(--brand-hover); transform: translateY(-2px) scale(1.04); }
[data-theme="dark"] .chat-fab { color: var(--navy-950); }
.chat-fab-badge {
  position: absolute; top: -2px; right: -2px;
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--danger); color: #fff;
  font-size: var(--fs-3xs); font-weight: 700; border: 2px solid var(--canvas);
}
.chat-fab-badge.hidden { display: none !important; }
/* (the sidebar chat count is a .sb-count now) */

/* @mention autocomplete */
.mention-autocomplete {
  position: absolute; z-index: 9600; min-width: 200px; max-height: 220px; overflow-y: auto;
  padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.mention-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-15) var(--sp-2); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mention-item:hover { background: var(--surface-active); }
.mention-item-avatar {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--brand-subtle); color: var(--brand-ink);
  font-size: var(--fs-3xs); font-weight: 700;
}
.mention-item-name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item-you { font-size: var(--fs-3xs); color: var(--ink-subtle); font-weight: 600; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════════
   26 · GUIDE / PRODUCT TOUR
   ═══════════════════════════════════════════════════════════════════════════ */
.guide-spotlight {
  position: fixed; z-index: 99998; pointer-events: none;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 9999px rgba(10,23,41,.60), 0 0 0 3px var(--accent);
  transition: all var(--dur-slow) var(--ease);
}
.guide-tooltip {
  position: fixed; z-index: 99999; width: min(360px, calc(100vw - 32px));
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  animation: modal-in var(--dur-slow) var(--ease-out) both;
}
.guide-tooltip-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.guide-tooltip-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.guide-step-counter { font-size: var(--fs-2xs); font-weight: 680; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-subtle); }
.guide-skip-btn {
  padding: 0; background: none; border: none;
  font-size: var(--fs-xs); font-weight: 550; color: var(--ink-muted); cursor: pointer;
}
.guide-skip-btn:hover { color: var(--ink); text-decoration: underline; }
.guide-tooltip-title { font-size: var(--fs-md); font-weight: 640; letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-15); }
.guide-tooltip-body { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-loose); }
.guide-tooltip-body strong { color: var(--ink); font-weight: 620; }
.guide-tooltip-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.guide-dots { display: flex; gap: var(--sp-15); }
.guide-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--line-strong); transition: all var(--dur) var(--ease); }
.guide-dot.active { background: var(--brand); width: 18px; }
.guide-nav-btns { display: flex; gap: var(--sp-2); }

.guide-help-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 8300;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-secondary);
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.guide-help-fab:hover { color: var(--brand-ink); border-color: var(--brand); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   27 · CSV IMPORT
   ═══════════════════════════════════════════════════════════════════════════ */
.import-upload-area {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-5); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--canvas);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
[data-theme="dark"] .import-upload-area { background: var(--surface-sunken); }
.import-upload-area:hover { border-color: var(--brand); background: var(--brand-subtle); }
.import-upload-icon { font-size: 26px; color: var(--ink-subtle); }
.import-upload-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.import-browse-link { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.import-info-text { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-loose); }

/* Wizard steps: the step body scrolls on its own, so the footer actions
   (Back / Import contacts) stay inside the modal when optional sections
   such as "Create deals during import" are expanded. */
.import-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.import-step-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--sp-5);
}

.import-map-header-row {
  display: grid; grid-template-columns: 1fr 24px 1fr; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs); font-weight: 680; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-subtle);
}
.import-map-rows { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.import-map-row {
  display: grid; grid-template-columns: 1fr 24px 1fr; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft);
}
.import-map-row:last-child { border-bottom: none; }
.import-col-header { font-size: var(--fs-sm); font-weight: 570; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-col-sample { font-size: var(--fs-2xs); color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.import-col-arrow { color: var(--ink-subtle); text-align: center; font-size: var(--fs-xs); }
.import-col-map { min-width: 0; }
.import-map-sel { width: 100%; }
.import-new-name {
  padding: 1px var(--sp-15); border-radius: var(--r-xs);
  background: var(--accent-subtle); color: var(--accent-strong);
  font-size: var(--fs-3xs); font-weight: 680;
}
.import-done { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-4); text-align: center; }
.import-done-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-full); background: var(--success-subtle); color: var(--success-ink); font-size: 22px;
}
#import-done-text { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: var(--lh-loose); }

/* ═══════════════════════════════════════════════════════════════════════════
   28 · WHATSAPP HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-wa, .btn-wa-inline {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border: none; border-radius: var(--r-sm); background: transparent;
  color: var(--success); cursor: pointer; font-size: 13px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-wa:hover, .btn-wa-inline:hover { background: var(--success-subtle); transform: scale(1.08); }
.wa-detail-link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--success); font-weight: 550; }
.wa-detail-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.wa-vars-hint { font-size: var(--fs-xs); color: var(--ink-muted); line-height: var(--lh-loose); }
.wa-var-chip {
  display: inline-block; padding: 1px var(--sp-15); margin: 2px;
  border-radius: var(--r-xs); border: 1px solid var(--line);
  background: var(--surface-sunken); color: var(--ink-secondary);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: var(--fs-2xs);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.wa-var-chip:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-subtle); }

/* ═══════════════════════════════════════════════════════════════════════════
   29 · BOARD (embedded Miro)
   ═══════════════════════════════════════════════════════════════════════════ */
.page-board { padding: 0 !important; gap: 0 !important; }
.board-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--page-pad); flex-shrink: 0;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.board-topbar-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.board-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.miro-iframe { flex: 1; width: 100%; border: none; display: block; background: var(--canvas); }
.board-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  flex: 1; padding: var(--sp-12); text-align: center;
  font-size: var(--fs-sm); color: var(--ink-muted); line-height: var(--lh-loose);
}
.board-empty strong { display: block; font-size: var(--fs-md); color: var(--ink); }

/* Reference-style empty state (Part 10): a hero tile and a numbered how-to,
   replacing the old two-line text block. */
.board-empty.bd-empty { max-width: 460px; margin: 0 auto; align-items: stretch; text-align: left; }
.bd-empty .hero { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--selected); color: var(--primary); display: grid; place-items: center; margin: 0 auto var(--sp-2); }
.bd-empty .hero .ic { width: 24px; height: 24px; }
.bd-empty h2 { font-size: var(--fs-md); font-weight: 650; color: var(--ink); text-align: center; }
.bd-steps { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); color: var(--ink-secondary); line-height: 1.6; list-style: none; counter-reset: s; display: grid; gap: var(--sp-2); }
.bd-steps li { counter-increment: s; display: flex; gap: var(--sp-3); align-items: flex-start; }
.bd-steps li::before { content: counter(s); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-secondary); font-size: var(--fs-xs); font-weight: 650; display: grid; place-items: center; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   30 · LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════ */
#loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
#loading-bar.active { opacity: 1; }
#loading-bar-fill {
  height: 100%; width: 0%; border-radius: 0 var(--r-full) var(--r-full) 0;
  background: linear-gradient(90deg, var(--navy-700), var(--sky-400));
  transition: width var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
[data-theme="dark"] #loading-bar-fill { background: linear-gradient(90deg, var(--sky-600), var(--sky-300)); }

#loading-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: overlay-in var(--dur) var(--ease) both;
}
#loading-overlay.hidden { display: none !important; }
/* Once the shell is up the overlay covers only the content area: the sidebar and
   the top bar stay put and readable while a slow page loads behind them. On the
   auth screens (#app hidden) it still covers the whole viewport. */
body:has(#app:not(.hidden)) #loading-overlay { left: var(--sb-width); top: var(--topbar-h); }
body:has(#app.rail:not(.hidden)) #loading-overlay { left: var(--sb-width-rail); }
.loading-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-10);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  animation: card-pop var(--dur-slow) var(--ease-spring) both;
}
@keyframes card-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.loading-logo { width: 148px; height: auto; animation: logo-breathe 2.4s var(--ease) infinite; }
[data-theme="dark"] .loading-logo { filter: brightness(0) invert(1); opacity: .92; }
@keyframes logo-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.loading-dots { display: flex; gap: var(--sp-15); align-items: center; }
.loading-dots span {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--accent-strong); animation: dot-bounce 1.2s var(--ease) infinite;
}
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: .16s; }
.loading-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   31 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --page-pad: 18px; }
  .contact-side-panel { width: 46%; min-width: 300px; }
  .settings-grid { grid-template-columns: 1fr; }
  .intg-two-panel { grid-template-columns: 1fr; }
  .analytics-trend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .page { padding: 16px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .search-trigger .kbd-wrap, .crumbs { display: none; }
  .notif-panel { left: 12px; right: 12px; width: auto; }
  .page-contacts-layout, .page-tasks-layout { flex-direction: column !important; }
  .contact-side-panel { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--line); }
  .tk-side { width: 100%; border-right: none; border-bottom: 1px solid var(--line); max-height: 190px; }
  .settings-layout { display: flex; flex-direction: column; gap: var(--sp-3); }
  .settings-tabs { flex-direction: row; align-self: stretch; gap: var(--sp-1); overflow-x: auto; padding: 0 0 2px; border-bottom: 1px solid var(--line); }
  .settings-tab { width: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .settings-tab.active { background: transparent; }
  .settings-tab.active::after { left: var(--sp-2); right: var(--sp-2); top: auto; bottom: -3px; transform: none; width: auto; height: 2px; border-radius: var(--r-full) var(--r-full) 0 0; }
  .settings-tab-sep { display: none; }
  .settings-tab-body { padding-right: 0; }
  .settings-grid, .settings-pane-head, .intg-stack { max-width: none; }
  .modal-overlay { padding: var(--sp-2); align-items: flex-end; }
  .modal { max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .page-header { flex-wrap: wrap; gap: var(--sp-2); }
  .toolbar input { max-width: none; }
  .analytics-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ws-page-grid { grid-template-columns: 1fr; }
  .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 78vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

@media print {
  .sidebar, .topbar, .notif-panel, .modal-overlay, .chat-fab, .guide-help-fab, .page-actions, .toolbar { display: none !important; }
  .page { padding: 0; height: auto; overflow: visible; }
  .table-wrap { border: none; box-shadow: none; overflow: visible; }
  body { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   32 · REMAINING SELECTORS FROM THE PREVIOUS STYLESHEET
   Kept so the rework is a true drop-in: every rule the old file provided has
   an equivalent here, re-expressed in the new token system.
   ═══════════════════════════════════════════════════════════════════════════ */
#analytics-main-sections { display: flex; flex-direction: column; gap: 0; }

/* Toggle buttons that live outside .seg */
#contact-view-list.active,
#contact-view-kanban.active {
  background: var(--brand); border-color: var(--brand);
  color: var(--ink-inverse); font-weight: 600;
}
[data-theme="dark"] #contact-view-list.active,
[data-theme="dark"] #contact-view-kanban.active { color: var(--navy-950); }

/* Integration selects */
#intg-pipeline, #intg-stage, #intg-assignee { max-width: 360px; font-size: var(--fs-sm); }

/* Present in the markup but never styled by the previous stylesheet. */
.analytics-config-group { display: flex; flex-direction: column; gap: var(--sp-15); }
.analytics-config-group + .analytics-config-group { margin-top: var(--sp-5); }
.analytics-config-group p { font-size: var(--fs-xs); color: var(--ink-muted); line-height: var(--lh-normal); }
.form-control { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   33 · ICON & LAYOUT CLASSES INTRODUCED BY THE REWORKED MARKUP
   ═══════════════════════════════════════════════════════════════════════════ */
/* Every emoji in the old markup is now an inline SVG carrying this class. */
.btn .ic { opacity: .85; }
.btn-primary .ic { opacity: 1; }
.page-header h1 .ic { color: var(--ink-muted); }


.import-upload-icon .ic, .import-done-icon .ic { stroke-width: 1.6; }
.empty-state-art .ic { width: 26px; height: 26px; }

/* ═══════════════════════════════════════════════════════════════════════════
   35 · DEAL DETAIL — reference/pro/src/screens/deal-detail.js, in a pop window
   ═══════════════════════════════════════════════════════════════════════════ */
.dd { display: flex; flex-direction: column; gap: 20px; }
.dd-h1 { min-width: 0; }
.dd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--text-3); font-size: var(--fs-sm); }
.dd-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: none; }
.dd-ie { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 2px 8px; margin: -2px -8px; border: 1px solid transparent; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; min-width: 0; cursor: pointer; }
.dd-ie > span.dd-ie-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-ie > .ic { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--text-3); opacity: 0; transition: opacity .12s; pointer-events: none; }
.dd-ie:hover, .dd-ie:focus-visible { z-index: 1; }
.dd-ie:hover { background: var(--hover); border-color: var(--border); }
.dd-ie:hover > .ic, .dd-ie:focus-visible > .ic { opacity: 1; }
.dd-ie:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--focus); }
.dd-ie-menu > .ic { position: static; transform: none; opacity: .8; pointer-events: auto; }
.dd-ie-menu { padding-right: 6px; }
.dd-ie-title { font-size: var(--fs-xl); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; white-space: normal; }
.dd-ie-edit { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0; vertical-align: top; }
.dd-ie-edit .input { width: 100%; }
.dd-ie-edit.dd-w-title { width: min(560px, 100%); }
.dd-ie-edit.dd-w-title .input { height: 38px; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.dd-ie-edit.dd-w-kpi .input { height: 36px; font-size: var(--fs-lg); font-weight: 650; }
.dd-ie-edit.dd-w-kpi { width: 100%; }
.dd-head { margin-bottom: 0; overflow: hidden; }
.dd-stepper-wrap { padding: 16px 20px 16px; }
.dd-stepper .step { cursor: pointer; }
.dd-stepper .step:hover:not(.current) { background: var(--selected); color: var(--text); }
.dd-stepper .step:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.dd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.dd-kpi { padding: 14px 16px 16px 20px; border-right: 1px solid var(--divider); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dd-kpi:last-child { border-right: 0; }
.dd-kpi .kpi-value { font-size: 22px; white-space: nowrap; line-height: 1.2; display: flex; align-items: center; min-height: 30px; }
.dd-kpi .dd-ie { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dd-kpi .kpi-foot { min-height: 18px; }
.dd-kpi .dd-ie.dd-owner { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.dd-late { color: var(--danger); font-weight: 600; }
.dd-main { min-width: 0; align-self: start; }
.dd-main > .tabs { padding: 0 10px; }
.dd-panel { padding: 20px; display: flex; flex-direction: column; gap: 20px; outline: none; min-height: 320px; }
.dd-panel:focus-visible { box-shadow: inset var(--focus-ring); }
.dd-mini { align-self: start; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.dd-mini-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--divider); background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; font-weight: 620; }
.dd-mini-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--divider); min-width: 0; }
.dd-mini-row:last-child { border-bottom: 0; }
.dd-mini-row .tl-ic { width: 26px; height: 26px; } .dd-mini-row .tl-ic .ic { width: 14px; height: 14px; }
.dd-mini-empty { padding: 18px 14px; color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
.dd-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); font-size: var(--fs-sm); }
.dd-compose { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.dd-compose .textarea { background: var(--surface); min-height: 88px; }
.dd-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.dd-hint .ic { color: var(--text-3); }
.dd-hint.warn { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning); } .dd-hint.warn .ic { color: inherit; }
.dd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dd-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dd-tl-main { min-width: 0; }
.dd-tl-time { font-size: var(--fs-sm); }
.dd-tl-actions { display: inline-flex; gap: 2px; margin: -5px 0 -5px auto; opacity: 0; transition: opacity .12s; }
.tl-item:hover .dd-tl-actions, .tl-item:focus-within .dd-tl-actions { opacity: 1; }
.dd-ibtn { width: 26px !important; height: 26px !important; } .dd-ibtn .ic { width: 14px; height: 14px; }
.dd-editor { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.dd-tasks { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.dd-task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.dd-task:last-child { border-bottom: 0; }
.dd-task:hover { background: var(--hover); }
.dd-task .check { margin-top: 1px; }
.dd-task-title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .dd-task-title:hover { color: var(--link); }
.dd-task.done .dd-task-title { color: var(--text-3); text-decoration: line-through; font-weight: 500; }
.dd-task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.dd-taskform { border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.dd-taskform .field-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dd-side .card-header { padding: 12px 16px; } .dd-side .card-body { padding: 16px; } .dd-side .card-footer { padding: 10px 16px; }
.dd-side .empty { padding: 22px 16px; } .dd-side .empty .ic { width: 24px; height: 24px; }
.dd-side .kv { grid-template-columns: 104px minmax(0, 1fr); gap: 6px 12px; } .dd-side .kv dd { min-height: 28px; display: flex; align-items: center; }
.dd-person { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; padding-left: 2px; }
.dd-pname { font-weight: 650; font-size: var(--fs-lg); color: var(--text); } .dd-pname:hover { color: var(--link); }
.dd-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dd-lines > div { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-md); }
.dd-lines .ic { color: var(--text-3); }
.dd-lines a, .dd-lines span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-lst + .dd-lst { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider); }
.dd-lst-name { font-weight: 650; color: var(--text); } .dd-lst-name:hover { color: var(--link); }
.dd-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.dd-stat div { font-size: var(--fs-xs); color: var(--text-3); } .dd-stat b { display: block; font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; font-weight: 620; }
.dd-form { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.dd-form input[type=number]::-webkit-inner-spin-button, .dd-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.dd-form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.dd-affix .input { padding-right: 46px; }
@media (max-width: 1180px) { .dd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dd-kpi { border-bottom: 1px solid var(--divider); } }
@media (max-width: 760px) { .dd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-taskform .field-row-3 { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════
   36 · CONTACT DETAIL — reference/pro/src/screens/contacts.js, side panel or pop window
   ═══════════════════════════════════════════════════════════════════════════ */
.ct-detail { display: flex; flex-direction: column; gap: 20px; }
.ct-head { align-items: flex-start; }
.ct-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ct-meta { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; color: var(--text-3); margin-top: 4px; }
.ct-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ct-name { font-weight: 620; color: var(--text); } a.ct-name:hover { color: var(--link); }
.ct-split { align-items: start; }
.ct-panel { padding: 20px; }
.ct-sec + .ct-sec { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--divider); }
.ct-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ct-sec-head .section-title { margin: 0; }
.ct-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; }
.ct-f { min-width: 0; }
.ct-f dt { font-size: var(--fs-sm); color: var(--text-3); font-weight: 550; margin-bottom: 4px; }
.ct-f dd { margin: 0; min-height: 30px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-edit { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 28px; padding: 3px 8px; margin: 0 -8px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font-weight: 500; text-align: left; cursor: text; }
.ct-edit > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-edit .ic { color: var(--text-3); opacity: 0; transition: opacity .1s; }
.ct-edit:hover { background: var(--hover); } .ct-edit:hover .ic, .ct-edit:focus-visible .ic { opacity: 1; }
.ct-edit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ct-ext { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-md); color: var(--text-3); flex: none; margin-left: -6px; }
.ct-ext:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.ct-ext:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ct-fedit { width: 100%; } .ct-fedit .error-text { margin-top: 4px; }
.ct-compose { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ct-compose .textarea { min-height: 76px; background: var(--surface); }
.ct-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ct-compose-foot .select { width: auto; max-width: 260px; }
.ct-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ct-tl-head .select { width: auto; }
.ct-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ct-big { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ct-mini { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--divider); min-width: 0; }
.ct-mini.clickable { cursor: pointer; margin: 0 -8px; padding: 10px 8px; border-radius: var(--r-md); }
.ct-mini.clickable:hover { background: var(--hover); }
.dv-grow { resize: none; overflow: hidden; min-height: 0; }
/* A note's text is edited in place: make that discoverable without adding chrome. */
.tl-text[data-note] { cursor: text; border-radius: var(--r-md); margin: 0 -6px; padding: 0 6px; transition: background .12s; }
.tl-text[data-note]:hover { background: var(--hover); }
.ct-mini .grow { min-width: 0; }
.ct-task-title { font-weight: 550; color: var(--text); } .ct-task-title.done { color: var(--text-3); text-decoration: line-through; }
@media (max-width: 760px) { .ct-fgrid { grid-template-columns: minmax(0, 1fr); } .ct-id { align-items: flex-start; } }

/* ═══════════════════════════════════════════════════════════════════════════
   37 · TASK DRAWER AND FORM — reference/pro/src/screens/tasks.js
   ═══════════════════════════════════════════════════════════════════════════ */
.tk-drawer { height: 100vh; max-height: 100vh; }
.tk-drawer .modal-foot .btn-danger-ghost:not(:hover) { background: transparent; }
.tk-dr { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.tk-dr-head { display: flex; gap: 12px; align-items: flex-start; }
.tk-dr-title { width: 100%; border: 1px solid transparent; background: transparent; border-radius: var(--r-md); padding: 6px 8px; margin: 0 0 0 -8px; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--text); resize: none; overflow: hidden; font-family: inherit; }
.tk-dr-title:hover { background: var(--hover); } .tk-dr-title:focus { outline: none; background: var(--surface); border-color: var(--focus); box-shadow: var(--focus-ring); }
.tk-dr-title[aria-invalid="true"] { border-color: var(--danger); }
.tk-props { grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; }
.tk-props dd { display: flex; align-items: center; gap: 8px; }
.tk-props .select, .tk-props .input { flex: 1 1 0; min-width: 0; }
.tk-secH { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tk-secH b { font-size: var(--fs-sm); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tk-si { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 4px 2px 6px; border-radius: var(--r-md); } .tk-si:hover { background: var(--hover); }
.tk-si .check { flex: 1 1 auto; min-width: 0; } .tk-si .check span { overflow: hidden; text-overflow: ellipsis; }
.tk-si .tk-x { opacity: 0; } .tk-si:hover .tk-x, .tk-si:focus-within .tk-x { opacity: 1; }
.tk-strike { color: var(--text-3); text-decoration: line-through; }
.tk-mini { width: 26px; height: 26px; flex: none; }
.tk-done { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; flex: none; color: transparent; padding: 0; transition: background .1s, border-color .1s, color .1s; }
.tk-done .ic { width: 12px; height: 12px; stroke-width: 2.75; }
.tk-done:hover { border-color: var(--success); color: var(--success); } .tk-done:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tk-done.on { background: var(--success); border-color: var(--success); color: var(--surface); }
.tk-done.big { width: 26px; height: 26px; margin-top: 6px; } .tk-done.big .ic { width: 15px; height: 15px; }

/* The contact side panel is narrower than a full pop window: stack the detail's
   two-column split (main card + side cards) into one column there. */
.side-panel-body .ct-split { grid-template-columns: minmax(0, 1fr); }

/* The hidden ATTRIBUTE only works when nothing else sets display: the browser's own
   [hidden] { display: none } is beaten by any author rule such as .field-row { display: grid },
   which left a "hidden" date row visible and its picker usable. This makes the attribute as
   reliable as the .hidden class. (Audit: index.html has no static hidden attributes; every
   `el.hidden = …` in public/js intends to hide.) */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING MONITOR (#page-onboarding, public/js/onboarding.js) — one table
   over the §08 primitives (.table-wrap/.table/.seg/.badge/.stage-pill). Only
   what the primitives lack is defined here.
   ═══════════════════════════════════════════════════════════════════════════ */
.onb-sub { font-size: var(--fs-xs); margin-top: 2px; }
/* The Engine's seven-step status: neutral at step 0, info while running, success when done */
.onb-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; background: var(--info-bg); color: var(--info); border: 1px solid var(--info-bd); }
.onb-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }
.onb-status.step-0 { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-bd); }
.onb-status.done { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.onb-drive { display: inline-flex; align-items: center; color: var(--text-2); } .onb-drive:hover { color: var(--text); }
.onb-actions { width: 1%; text-align: right; }
.onb-inactive { flex: none; padding: 10px 14px; border: 1px solid var(--warning-bd); background: var(--warning-bg); color: var(--warning); border-radius: var(--r-md); font-size: var(--fs-sm); }
#page-onboarding .table td a { color: inherit; text-decoration: none; } #page-onboarding .table td a:hover { text-decoration: underline; }