/* r1034 (Egor: one brand across the ecosystem, a first try): Nunito, self-hosted, one variable file 200-1000.
   For now only the sidebar and the chat title in the dialog. OFL: _assets/fonts/Nunito-OFL.txt */
@font-face{font-family:"Nunito";src:url("/_assets/fonts/nunito-var.v1.woff2") format("woff2-variations"),url("/_assets/fonts/nunito-var.v1.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
  /* =========================================================
     TOKENS — Linear / Vercel, Funnels v2 lineage
     ========================================================= */
  :root {
    --canvas-bg: #1a1a19; /* r81: primary dark bg (Egor) */
    --ink:        #181817; /* r81: secondary (sidebar/elements) */
    --ink-2:      #181817; /* r81: secondary (panels/cards) */
    --surface:    rgba(255,255,255,0.025);
    --surface-2:  rgba(255,255,255,0.04);
    --surface-3:  #2c2c2a; /* r81: light element bg (Egor) */
    --line:       rgba(255,255,255,0.06);
    --line-2:     rgba(255,255,255,0.10);
    --line-3:     rgba(255,255,255,0.16);

    --text:       #ffffff;
    --text-2:     rgba(255,255,255,0.70);
    --text-3:     rgba(255,255,255,0.50);
    --text-4:     rgba(255,255,255,0.35);

    --accent:      #007EF7;
    --accent-muted: rgba(0,126,247,0.6);
    --accent-soft: rgba(0,126,247,0.10);
    --accent-line: rgba(0,126,247,0.28);
    /* Text/icon color that sits ON an accent-filled button. Dark theme accent is
       a light blue, so ink is near-black; light theme (below) flips it to white. */
    --accent-ink: #ffffff;
    --on-accent: #ffffff;

    --bad:  #ff6b6b;
    --warn: #d8b54a;
    --good: #007EF7;
    --win:  #2bb673;

    --bad-soft:  rgba(255,107,107,0.10);
    --warn-soft: rgba(216,181,74,0.12);

    --w15: rgba(255,255,255,0.015);
    --w18: rgba(255,255,255,0.018);
    --w20: rgba(255,255,255,0.02);
    --w25: rgba(255,255,255,0.025);
    --w40: rgba(255,255,255,0.04);
    --w50: rgba(255,255,255,0.05);
    --w60: rgba(255,255,255,0.06);
    --w70: rgba(255,255,255,0.07);
    --w80: rgba(255,255,255,0.08);
    --w100: rgba(255,255,255,0.1);
    --w120: rgba(255,255,255,0.12);
    --w140: rgba(255,255,255,0.14);
    --w160: rgba(255,255,255,0.16);
    --w180: rgba(255,255,255,0.18);
    --w280: rgba(255,255,255,0.28);
    --w350: rgba(255,255,255,0.35);
    --w500: rgba(255,255,255,0.5);
    --w600: rgba(255,255,255,0.6);
    --w700: rgba(255,255,255,0.7);

    --shadow-focus: 0 0 0 3px rgba(0,126,247,0.18);

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 12px;

    --font-sans:    'Nunito', ui-rounded, system-ui, sans-serif;   /* r1034b (Egor): Nunito everywhere in the app; LLM answers keep Inter (below) */
    --font-brand:   'Nunito', ui-rounded, system-ui, sans-serif;   /* r1034 */
    --font-display: 'Nunito', ui-rounded, system-ui, sans-serif;   /* r1034b */
    --font-mono:    'Nunito', ui-rounded, system-ui, sans-serif;   /* r1034b: Nunito's figures are tabular by default (all ten 600 units) */

    --sidebar-w: 292px; /* r93: wider (Egor). r625: +20 - the thread's left edge showed past it while the right had the scrollbar lane, so the two sides read as uneven. Everything that follows the sidebar reads this one variable, so the frame, the panel and the composer move with it. */
    --dd-bg: #383835;      /* r102: dropdown surface (Egor) */
    /* r722 (Egor): the usage categories are TOKENS now, not literals buried in
       two JS files. They had to be - a colour chosen against #1f1f1e cannot also
       be right against #fcfcfb, and the only way a theme can answer for one is
       if the theme owns it. Reading and Web search go lighter and more saturated
       on light, where the dark pair read as muddy rather than as colour. */
    --cat-read: #6b8fb5;
    --cat-write: #007EF7;
    --cat-web: #d8b54a;
    /* r481: these three were used ONLY as hardcoded fallbacks (var(--ctl,#232323)
       and friends), so light theme kept Relay's chips, rails and avatars black.
       The token is the fix; the fallback was the bug. */
    --ctl:        #232323;
    --seg-on:     #515151;
    --surface-1:  #161616;
    --nav-sel: #30302f;    /* r102: selected row */
  }  /* r838: the hand, applied unless someone turns it off */
  
  
  /* r842 (Egor): the bold is a DRAWN weight, not a smear. One face per weight,
     so the browser stops synthesising 700 out of 400 - which is what thickened
     every heading and chip until now. */
  


  :root[data-theme="light"] {
    --ctl:        #efeeeb;
    --seg-on:     #ffffff;
    --surface-1:  #ffffff;
    --dd-bg: #ffffff;
    --cat-read: #8fb4dc;   /* r722: lighter, so it reads as colour on white */
    --cat-write: #007EF7;  /* the brand blue is right on both */
    --cat-web: #e8b93c;
    --nav-sel: #efeeeb;
    --canvas-bg: #fcfcfb; /* r82 light: main bg (Egor) */
    --ink: #fbfbf9; /* r82 light: sidebar/elements */
    --ink-2: #ffffff;
    --surface: rgba(17,20,26,0.03);
    --surface-2: rgba(17,20,26,0.05);
    --surface-3: #efeeeb; /* r82 light: raised elements */
    --line: #e6ebf1;
    --line-2: #dde4ec;
    --line-3: rgba(17,20,26,0.20);
    --text: #11141a;
    --text-2: rgba(17,20,26,0.72);
    --text-3: rgba(17,20,26,0.55);
    --text-4: rgba(17,20,26,0.42);
    --accent: #007EF7;
    --accent-muted: rgba(0,126,247,0.7);
    --accent-soft: rgba(0,126,247,0.10);
    --accent-line: rgba(0,126,247,0.32);
    --accent-ink: #ffffff;
    --on-accent: #ffffff;
    --bad: #d83a3a;
    --warn: #a8841f;
    --good: #007EF7;
    --win: #16a34a;
    --bad-soft: rgba(216,58,58,0.10);
    --warn-soft: rgba(168,132,31,0.12);
    --shadow-focus: 0 0 0 3px rgba(0,126,247,0.20);
    --card: #ffffff;
    --shadow-card: 0 1px 2px rgba(0,9,18,.04), 0 1px 3px rgba(0,9,18,.06);
    --shadow-card-lg: 0 4px 16px rgba(0,9,18,.10), 0 1px 4px rgba(0,9,18,.06);
    --r-card: 16px;
    --w15: rgba(17,20,26,0.015);
    --w18: rgba(17,20,26,0.018);
    --w20: rgba(17,20,26,0.02);
    --w25: rgba(17,20,26,0.025);
    --w40: rgba(17,20,26,0.04);
    --w50: rgba(17,20,26,0.05);
    --w60: rgba(17,20,26,0.06);
    --w70: rgba(17,20,26,0.07);
    --w80: rgba(17,20,26,0.08);
    --w100: rgba(17,20,26,0.1);
    --w120: rgba(17,20,26,0.12);
    --w140: rgba(17,20,26,0.14);
    --w160: rgba(17,20,26,0.16);
    --w180: rgba(17,20,26,0.18);
    --w280: rgba(17,20,26,0.28);
    --w350: rgba(17,20,26,0.35);
    --w500: rgba(17,20,26,0.5);
    --w600: rgba(17,20,26,0.6);
    --w700: rgba(17,20,26,0.7);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0; padding: 0;
    background: var(--canvas-bg); /* r83: page bg = primary (#1a1a19); the sidebar keeps --ink (#181817) */
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body { min-height: 100vh; }

  button, a { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }
  a { text-decoration: none; }
  input, select, textarea { font: inherit; color: inherit; }

  ::selection { background: var(--accent-soft); color: var(--text); }

  /* ── Branded scrollbars (replace native windows-grey) ───────────── */
  * {
    /* r466 (Egor: arrows and width survived r465): Chromium >=121 IGNORES
       every ::-webkit-scrollbar rule the moment standard scrollbar-width /
       scrollbar-color are set on the element - the r465 webkit block never
       applied. Standard props now live ONLY in the Firefox branch below;
       element-level scrollbar-color/width were stripped across the app for
       the same reason (ai.js, shell.js, ai/index.html). */
  }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--nav-scroll, #333332) transparent; }
  }
  :root[data-theme="light"] { --nav-scroll: #d8d6d2; }
  /* r466c: the r466b @property approach WENT DARK EVERYWHERE - a custom
     property registered with inherits:false does not resolve inside the
     scrollbar pseudo-element, so background:var(--sbc) was invalid and the
     thumb stayed transparent on every pane. Back to the plain class switch
     (which worked everywhere), with the fade carried by a transition on the
     thumb's own background-color. If a browser refuses to animate it, the
     switch still lands - it degrades to instant, never to invisible.
     ONE OWNER: ai.js's four element-level thumb overrides were removed in
     r466b (their !important was why the chat bar never faded). */
  *::-webkit-scrollbar { width: 4px; height: 4px; } /* r466: half again - Relay-thin everywhere */
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    transition: background-color .45s ease;
  }
  .lia-scrolling::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active { background-color: var(--nav-scroll, #333332); transition: background-color .12s ease; }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* r465: no arrows */
  *::-webkit-scrollbar-corner { background: transparent; }

  .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* =========================================================
     APP SHELL
     ========================================================= */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns 200ms cubic-bezier(.2,.7,.2,1);
  }
  /* kill layout animation while the window is actively resizing (devtools
     docking) so nothing thrashes/lags — Egor r65 */
  html.is-resizing .app, html.is-resizing .aside, html.is-resizing .ai { transition: none !important; }
  /* Compare route: the whole page is the dotted canvas (also covers the generic
     load skeleton phase, before compare.js mounts the stage). */
  body.cmp-route { background-color: var(--canvas-bg); background-image: radial-gradient(rgba(127,127,127,.10) 1.4px, transparent 1.4px); background-size: 26px 26px; }

  /* =========================================================
     SIDEBAR
     ========================================================= */
  .aside {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--canvas-bg, var(--ink-2));
    border-right: 1px solid var(--line-2);
    padding: 12px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
    overflow: hidden;
  }
  /* ── Nav redesign (Egor r58) ──────────────────────────────────
     Collapsed: the rail disappears entirely (0px); a fixed peek icon sits
     top-left next to the chat title. Hover shows the sidebar as a floating
     popover; click expands it back to the monolithic rail. */
  .app.is-collapsed { --sidebar-w: 0px; }
  .app.is-collapsed .aside { width: 0; min-width: 0; padding: 0; border-right: 0; }
  /* OPEN sidebar (not collapsed, not peeking) = solid monolith, no gaps (Egor r64) */
  .app.ws-ai:not(.is-collapsed) .aside {
    position: sticky !important; left: auto !important; top: 0 !important; bottom: auto !important;
    height: 100vh !important; margin: 0 !important; border-radius: 0 !important;
    border-right: 1px solid var(--line-2) !important; box-shadow: none !important;
    width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important;
  }
  #sidebar-peek {
    position: fixed; top: 12px; left: 12px; z-index: 80;
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--line-2); background: var(--canvas-bg, var(--ink-2));
    color: var(--text-2); display: none; align-items: center; justify-content: center;
    cursor: pointer; font-size: 17px;
  }
  #sidebar-peek:hover { color: var(--text); background: var(--surface-2); }
  body:has(.app.is-collapsed) #sidebar-peek { display: inline-flex; }
  /* content clears the peek icon when the rail is collapsed */
  body:has(.app.is-collapsed) .ai__head { padding-left: 52px; }
  body:has(.app.is-collapsed) .crumbs { padding-left: 52px; }
  /* also drive it from the class in case :has is flaky (mirrors the JS toggle) */
  .app.is-collapsed .ai__head { padding-left: 52px; }
  .app.is-collapsed .crumbs { padding-left: 52px; }
  @media (max-width: 1092px) { body:not(.ws-ai) #sidebar-peek { display: none !important; } } /* INVARIANT: ws-ai peek button must survive ANY viewport width (devtools). Never drop the :not(.ws-ai) scope. */
  /* hover peek: AIRY floating popover (Egor r62) — margins, radius, shadow;
     identical in every other way to the expanded rail, minus the logo/search
     header row (that space is taken by the peek icon above it). */
  .app.is-collapsed.is-peek .aside {
    position: fixed; left: 10px; top: 54px; bottom: 10px;
    width: 232px; min-width: 232px; height: auto; z-index: 75;
    padding: 12px 8px 16px; border: 1px solid var(--line-2); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.42);
    overflow: hidden auto;
  }
  /* in the peek popover, drop the logo+collapse+search row (blank space under
     the fixed peek icon) — keep everything else identical to the open rail */
  .app.is-collapsed.is-peek .ainav__top,
  .app.is-collapsed.is-peek .ainav__searchrow { display: none; }

  .profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 120ms;
    margin-bottom: 4px;
  }
  .profile:hover { background: var(--surface-2); }
  .avatar {
    width: 24px; height: 24px;
    border-radius: 9px;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    display: grid; place-items: center;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--text);
    flex-shrink: 0;
  }
  .profile__name {
    flex: 1;
    font-size: 13px; font-weight: 500;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .is-collapsed .profile { justify-content: center; padding: 8px 0; }
  .is-collapsed .profile__name,
  .is-collapsed .profile .kbd,
  .is-collapsed .profile__meta,
  .is-collapsed .profile__chev { display: none; }

  /* brand row: logo + name + collapse toggle */
  .aside__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
  .aside__brand-name { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text); min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; user-select: none; -webkit-user-select: none; transition: opacity 120ms; }
  .aside__brand-name span { pointer-events: none; user-select: none; -webkit-user-select: none; }
  .aside__brand-svg { height: 24px; width: auto; display: block; color: #007EF7; pointer-events: none; }
  :root[data-theme="dark"] .aside__brand-svg { color: #FFFFFF; }
  .aside__brand-name:hover { opacity: 0.78; }
  .aside__collapse {
    width: 28px; height: 28px; border-radius: var(--r-sm);
    display: grid; place-items: center; flex-shrink: 0;
    background: transparent; border: none; color: var(--text-3); cursor: pointer;
    transition: background 120ms, color 120ms;
  }
  .aside__collapse:hover { background: var(--surface-2); color: var(--text); }
  .aside__collapse i { font-size: 17px; }
  .is-collapsed .aside__brand { justify-content: center; padding: 6px 0 14px; }
  .is-collapsed .aside__brand-name { display: none; }
  .is-collapsed .aside__collapse { display: grid; }

  /* footer profile */
  .aside__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
  .profile { width: 100%; background: transparent; border: none; font-family: inherit; }
  .profile__meta { flex: 1; min-width: 0; text-align: left; }
  .profile__plan { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile__chev { font-size: 13px; color: var(--text-4); flex-shrink: 0; }
  .avatar { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

  /* profile popover menu */
  .profile-menu {
    position: fixed; z-index: 1000;
    /* r147: the DROPDOWN STANDARD surface (#383835), lighter than ink-2 */
    background: var(--dd-bg, #383835); border: 1px solid var(--line-2);
    border-radius: 16px; padding: 7px; box-shadow: 0 8px 22px rgba(0,0,0,0.16); /* r148: softer */
    display: flex; flex-direction: column; gap: 1px;
  }
  .profile-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 11px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-2); font-size: 13px; font-family: inherit; text-align: left; width: 100%;
    transition: background 120ms, color 120ms;
  }
  .profile-menu__item:hover { background: var(--surface-2); color: var(--text); }
  .profile-menu__item i { font-size: 16px; }
  .profile-menu__item .lia-ico { width: 18px; height: 18px; flex: 0 0 18px; }   /* r832: the 4B symbols in the footer menu */
  /* r147: Log out is a PLAIN white item now (danger restyle removed, confirm
     card guards the action instead) */
  .profile-menu__item { color: var(--text); }
  .profile-menu__item:hover { background: var(--nav-sel, #30302f); }
  .profile-menu__sep { height: 1px; background: var(--line); margin: 5px 0; }
  .profile-menu__mail { padding: 7px 12px 8px; font: 500 11.5px var(--font-sans); color: var(--text-4); border-bottom: 1px solid var(--line); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

  .nav { display: flex; flex-direction: column; gap: 1px; padding-top: 0; }
  .nav__title {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--text-4);
    padding: 10px 10px 4px;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.04em;
  }
  .nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 13px; font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    text-align: left;
    transition: background-color 170ms ease, color 170ms ease;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }
  .nav__item i { font-size: 16px; color: var(--text-3); transition: color 170ms ease; flex: 0 0 16px; }
  .nav__item .nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav__item:hover { background: var(--surface-2); color: var(--text); }
  .nav__item:hover i { color: var(--text); }
  .nav__item.is-active { background: var(--accent); color: var(--on-accent, #fff); }
  .nav__item.is-active i { color: var(--on-accent, #fff); }
  .nav__item.is-active:hover { background: var(--accent); color: var(--on-accent, #fff); }
  .nav__item.is-active:hover i { color: var(--on-accent, #fff); }
  .nav__item.is-active::before { display: none; }
  .is-collapsed .nav__title,
  .is-collapsed .nav__item .nav__label { display: none; }
  .is-collapsed .nav__item { justify-content: center; padding: 8px 0; }
  .is-collapsed .nav__item.is-active::before { display: none; }

  /* Tooltips handled by JS (.lia-tip) at body level — the old ::after was
     clipped by .aside overflow:hidden in collapsed mode (visible artifacts). */

  .aside__foot {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  /* =========================================================
     MAIN
     ========================================================= */
  .main { padding: 28px 36px 60px; min-width: 0; }
  .main__inner { max-width: 1200px; }

  .crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
  }
  .crumbs i { font-size: 9px; color: var(--text-4); }
  .crumbs__last { color: var(--text-2); }
  /* Hide breadcrumb + account·date subtitle app-wide (top bar already shows them); keep tasks count */
  .crumbs { display: none !important; }
  .subtitle:not(.tk-subtitle) { display: none !important; }

  .topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .h1 {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 600;
    letter-spacing: -0.6px;
    color: var(--text);
    margin: 0;
    line-height: 1.1;
  }
  .subtitle {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    margin-top: 8px;
  }
  .topbar__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .topbar__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  /* picker / select */
  .picker, .select-inline {
    height: 34px;
    padding: 0 12px;
    background: var(--card, var(--surface-2));
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
  }
  .picker:hover, .select-inline:hover { background: var(--surface-3); border-color: var(--line-3); color: var(--text); }
  .picker i, .select-inline i { font-size: 13px; color: var(--text-3); }
  .picker .caret { margin-left: 2px; font-size: 11px; }

  /* =========================================================
     BUTTONS
     ========================================================= */
  .btn {
    padding: 7px 12px;
    border-radius: var(--r-md);
    font-size: 12px; font-weight: 500;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 120ms, border-color 120ms, color 120ms;
  }
  .btn i { font-size: 13px; }
  .btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .btn--primary:hover { background: var(--accent-muted); color: var(--accent-ink); }
  .btn--ghost {
    background: transparent;
    border-color: var(--line-2);
    color: var(--text-2);
  }
  .btn--ghost:hover { background: var(--surface-2); border-color: var(--line-3); color: var(--text); }

  /* =========================================================
     PILLS / STATUS
     ========================================================= */
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 11px; font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1.4;
    border: 1px solid transparent;
  }
  .pill--ig { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
  .pill--fb { background: var(--surface-2); color: var(--text-2); border-color: var(--line-2); }
  .pill--active { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
  .pill--paused { border-color: var(--line-2); color: var(--text-3); background: transparent; }

  /* =========================================================
     KPI CARDS
     ========================================================= */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }
  .kpi {
    background: var(--card, var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-card, var(--r-lg));
    box-shadow: var(--shadow-card, none);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .kpi__label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
  }
  .kpi__value {
    font-family: var(--font-mono);
    font-size: 32px; font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .kpi__delta {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
  }
  .kpi__delta.is-up { color: var(--good); }
  .kpi__delta.is-down { color: var(--bad); }

  /* =========================================================
     PANELS
     ========================================================= */
  .panel {
    background: var(--card, var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-card, var(--r-lg));
    box-shadow: var(--shadow-card, none);
    overflow: hidden;
    margin-bottom: 16px;
  }
  .panel__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .panel__title {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .panel__link {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
  }
  .panel__link:hover { text-decoration: underline; color: var(--accent); }

  /* dashboard: top creatives */
  .creative-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms;
  }
  .creative-row:last-child { border-bottom: 0; }
  .creative-row:hover { background: var(--surface-2); }

  .creative-thumb {
    width: 56px; height: 56px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    overflow: hidden;
    position: relative;
  }
  .creative-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Video-thumbnail variants. The play-icon badge is a small dark pill in
     the corner — visible only when idle (img showing). On hover/play the
     <video> covers it; the badge fades out via opacity so we don't see
     a play icon on top of an already-playing video. */
  .creative-thumb--video { cursor: pointer; }
  .creative-thumb--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .creative-thumb__video-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    pointer-events: none;
    transition: opacity 0.15s ease;
    backdrop-filter: blur(4px);
  }
  /* Hide the badge once the <video> reports 'playing' (or the iframe
     finishes its initial load). Until then the badge stays visible —
     showing either the play icon (idle) or the spinner (buffering).
     Using is-playing class rather than :has(video) means the badge
     stays around through the load wait, which avoids the 'play icon
     vanishes for 300ms before video appears' empty-state moment. */
  .creative-thumb--video:has(video.is-playing) .creative-thumb__video-badge,
  .creative-thumb--video:has(iframe.is-playing) .creative-thumb__video-badge { opacity: 0; }

  /* Spinner inside the badge — replaces the play icon while buffering.
     Reuses the existing Phosphor 'circle-notch' glyph + a simple
     rotate keyframe. Slightly slower than the standard 1s revolution
     so it reads as 'loading' not 'frantic'. */
  .creative-thumb__spinner { animation: liaSpin 0.9s linear infinite; }
  @keyframes liaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Toast entry/exit — slides up from below with a slight scale. */
  @keyframes liaToastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }
  @keyframes liaToastOut {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(8px)  scale(0.98); }
  }
  .lia-toast__retry:hover { background: var(--w120) !important; }
  .lia-toast__close:hover { color: var(--text) !important; }
  /* Slightly larger badge for big thumbs (240px in modals) — 18px looks
     lost on a 240×240 tile. */
  .creative-thumb[style*="width:240"] .creative-thumb__video-badge,
  .creative-thumb[style*="width: 240"] .creative-thumb__video-badge,
  .creative-thumb[style*="width:200"] .creative-thumb__video-badge,
  .creative-thumb[style*="width: 200"] .creative-thumb__video-badge,
  .creative-thumb[style*="width:160"] .creative-thumb__video-badge,
  .creative-thumb[style*="width: 160"] .creative-thumb__video-badge {
    width: 28px;
    height: 28px;
    font-size: 14px;
    right: 8px;
    bottom: 8px;
  }
  .creative-thumb--g1 { background: linear-gradient(135deg, #1e3a8a 0%, #0a1f4a 100%); }
  .creative-thumb--g2 { background: linear-gradient(135deg, #064e3b 0%, #022c1e 100%); }
  .creative-thumb--g3 { background: linear-gradient(135deg, #581c87 0%, #2a0d44 100%); }
  .creative-thumb--g4 { background: linear-gradient(135deg, #7c2d12 0%, #3d1606 100%); }
  .creative-thumb--g5 { background: linear-gradient(135deg, #155e75 0%, #0a3540 100%); }
  .creative-thumb--g6 { background: linear-gradient(135deg, #831843 0%, #4a0c25 100%); }

  .creative-row__main { min-width: 0; }
  .creative-row__name { font-size: 13px; font-weight: 500; color: var(--text); }
  .creative-row__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }
  .creative-row__stat { font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 70px; text-align: right; }
  .creative-row__stat .lbl { display: block; font-size: 10px; color: var(--text-3); margin-bottom: 2px; }

  /* dashboard: AI activity */
  .ai-row {
    display: grid;
    grid-template-columns: 14px 100px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms;
  }
  .ai-row:last-child { border-bottom: 0; }
  .ai-row:hover { background: var(--surface-2); }
  .ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-muted); box-shadow: 0 0 0 3px rgba(0,126,247,0.10); }
  .ai-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
  .ai-call { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
  .ai-call b { color: var(--accent); font-weight: 500; }
  .ai-call .arr { color: var(--text-4); margin: 0 6px; }
  .ai-call .res { color: var(--text-2); }

  /* =========================================================
     TABLES
     ========================================================= */
  .dtable {
    background: var(--card, var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-card, var(--r-lg));
    box-shadow: var(--shadow-card, none);
    overflow: hidden;
  }
  .dtable table { width: 100%; border-collapse: collapse; }
  .dtable thead th {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.04em;
    padding: 10px 14px;
    text-align: left;
    background: var(--card, var(--surface-3));
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
  }
  .dtable thead th.num, .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .dtable thead th i { font-size: 11px; opacity: 0.4; margin-left: 4px; vertical-align: -1px; }
  .dtable tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .dtable tbody tr:last-child td { border-bottom: 0; }
  .dtable tbody tr { transition: background 120ms; }
  .dtable tbody tr:hover td { background: var(--surface-2); }
  .dtable td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .row-name { font-weight: 500; }
  .row-name .caret {
    color: var(--text-4);
    margin-right: 6px;
    transition: transform 160ms;
    display: inline-block;
    width: 10px;
  }
  tr.is-open .row-name .caret { transform: rotate(90deg); color: var(--text); }
  tr.is-child { display: none; }
  tr.is-child.is-shown { display: table-row; background: var(--w15); }
  tr.is-child .row-name { font-weight: 400; color: var(--text-2); padding-left: 24px; }
  tr.is-child.is-deep .row-name { padding-left: 48px; }

  /* pagination */
  .pagi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
  }
  .pagi__nav { display: flex; gap: 4px; }
  .pagi__btn {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    display: grid; place-items: center;
    transition: background 120ms, color 120ms;
  }
  .pagi__btn:hover { background: var(--surface-3); color: var(--text); }
  .pagi__btn[disabled] { color: var(--text-4); cursor: not-allowed; }

  /* =========================================================
     CREATIVES GALLERY
     ========================================================= */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .creative-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color 120ms;
    cursor: pointer;
  }
  .creative-card:hover { border-color: var(--line-2); }
  .creative-card__media {
    position: relative;
    height: 240px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-4);
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .creative-card__media .rank {
    position: absolute;
    top: 10px; right: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: rgba(10,10,20,0.85);
    color: #fff;
    border: 1px solid var(--line-3);
    backdrop-filter: blur(6px);
  }
  .creative-card__media .rank--best { background: var(--accent); color: var(--on-accent); border: 0; }
  .creative-card__body { padding: 14px 16px; }
  .creative-card__name { font-size: 13px; font-weight: 600; color: var(--text); }
  .creative-card__campaign { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }
  .creative-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .creative-card__stat { display: flex; justify-content: space-between; color: var(--text); }
  .creative-card__stat .lbl { color: var(--text-3); }
  .creative-card__bar {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .creative-card__bar-track {
    flex: 1; height: 4px;
    background: var(--surface-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .creative-card__bar-fill { height: 100%; background: var(--accent); }
  .creative-card__bar-fill.is-warn { background: var(--warn); }
  .creative-card__bar-fill.is-bad { background: var(--bad); }
  .creative-card__bar-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

  /* =========================================================
     DEMOGRAPHICS
     ========================================================= */
  .demo-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 1024px) { .demo-grid { grid-template-columns: 1fr; } }

  .age-bar {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .age-bar:not(:last-child) { border-bottom: 1px solid var(--line); }
  .age-bar__label { color: var(--text-2); position: relative; }
  .age-bar__label.is-peak { color: var(--accent); }
  .age-bar__label.is-peak::after {
    content: '← peak';
    position: absolute;
    left: 100%;
    margin-left: 6px;
    font-size: 10px;
    color: var(--accent);
    white-space: nowrap;
  }
  .age-bar__viz {
    display: flex;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .age-bar__m { background: rgba(94,160,255,0.65); }
  .age-bar__f { background: rgba(255,140,180,0.6); }
  .age-bar__pct { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

  .legend {
    display: flex;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    padding: 0 0 12px;
  }
  .legend i {
    width: 8px; height: 8px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: 1px;
  }
  .legend .m { background: rgba(94,160,255,0.65); }
  .legend .f { background: rgba(255,140,180,0.6); }

  .platform-bar {
    display: grid;
    grid-template-columns: 100px 1fr 90px;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .platform-bar:not(:last-child) { border-bottom: 1px solid var(--line); }
  .platform-bar__viz { height: 10px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
  .platform-bar__fill { height: 100%; background: var(--accent); }
  .platform-bar__fill.is-fb { background: var(--text-3); }
  .platform-bar__pct { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

  /* =========================================================
     FILTERS / SEARCH
     ========================================================= */
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    align-items: center;
  }
  .filters .spacer { flex: 1; }

  .search {
    position: relative;
    display: inline-block;
  }
  .search input {
    height: 34px;
    padding: 0 12px 0 32px;
    background: var(--card, var(--surface-2));
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 12px;
    font-family: var(--font-mono);
    min-width: 220px;
  }
  .search input::placeholder { color: var(--text-4); }
  .search input:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--shadow-focus); }
  .search i {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-4);
    font-size: 14px;
    pointer-events: none;
  }

  /* =========================================================
     FUNNELS layout
     ========================================================= */
  .funnels-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    min-height: 600px;
  }
  @media (max-width: 1024px) { .funnels-layout { grid-template-columns: 1fr; } }

  .funnel-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .funnel-list__head {
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .funnel-list__title {
    font-family: var(--font-mono);
    font-size: 11px; color: var(--text-3);
  }
  .funnel-list-item {
    padding: 8px 10px;
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    display: flex; flex-direction: column;
  }
  .funnel-list-item:hover { background: var(--surface-2); color: var(--text); }
  .funnel-list-item.is-active { background: var(--accent-soft); color: var(--accent); }
  .funnel-list-item__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); margin-top: 2px; }
  .funnel-list-item.is-active .funnel-list-item__sub { color: var(--accent); opacity: 0.7; }

  .funnel-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: var(--r-md);
    width: fit-content;
    margin-bottom: 16px;
  }
  .funnel-tab {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-size: 12px; font-weight: 500;
    color: var(--text-3);
    transition: background 120ms, color 120ms;
    cursor: pointer;
  }
  .funnel-tab:hover { color: var(--text); }
  .funnel-tab.is-active { background: var(--ink); color: var(--text); }

  /* funnel constructor rows */
  .stage-row {
    display: grid;
    grid-template-columns: 40px 120px 1fr 110px 110px 32px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .stage-row:hover { background: var(--surface-2); }
  .stage-row__id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-4);
  }
  .stage-row__handle {
    width: 16px; height: 16px;
    color: var(--text-4);
    cursor: grab;
    display: grid; place-items: center;
  }
  .stage-row__handle:hover { color: var(--text-2); }
  .stage-row__name { font-size: 13px; font-weight: 500; }
  .stage-row__sources { display: flex; gap: 6px; flex-wrap: wrap; }
  .src-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }
  .src-pill:hover { background: var(--surface-3); border-color: var(--line-2); }
  .src-pill i { font-size: 10px; color: var(--text-4); }
  .stage-row__val {
    font-family: var(--font-mono);
    font-size: 16px; font-weight: 500;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .stage-row__cr {
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: right;
  }
  .cr--good { color: var(--good); }
  .cr--warn { color: var(--warn); }
  .cr--bad { color: var(--bad); }
  .cr--neutral { color: var(--text-3); }

  .stage-add {
    padding: 14px 16px;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    cursor: pointer;
    width: 100%;
    transition: color 120ms, background 120ms;
  }
  .stage-add:hover { color: var(--accent); background: var(--surface-2); }

  .funnel-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
  }

  /* visual funnel */
  .visual-funnel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .visual-funnel__stage {
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    border-radius: var(--r-md);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--font-mono);
  }
  .visual-funnel__stage .name { font-size: 13px; color: var(--text); font-weight: 500; }
  .visual-funnel__stage .val { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
  .visual-funnel__cr {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
  }

  /* =========================================================
     AI SESSIONS
     ========================================================= */
  .session {
    background: var(--card, var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-card, var(--r-lg));
    box-shadow: var(--shadow-card, none);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .session__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: background 120ms;
  }
  .session__head:hover { background: var(--surface-2); }
  .session__head-left { display: flex; flex-direction: column; gap: 8px; }
  .session__ts {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    display: flex; align-items: center; gap: 8px;
  }
  .session__ts .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0,126,247,0.12); }
  .session__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
  }
  .session__summary {
    font-size: 13px;
    color: var(--text);
    max-width: 640px;
    line-height: 1.5;
  }
  .session__caret {
    font-size: 16px;
    color: var(--text-3);
    transition: transform 160ms;
  }
  .session.is-open .session__caret { transform: rotate(90deg); color: var(--text); }
  .session__body {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--card, var(--surface-2));
  }
  .session.is-open .session__body { display: block; }
  .session__log {
    padding: 14px 20px;
  }
  .session__log-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    padding: 6px 0;
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .session__log-row .ts { color: var(--text-3); }
  .session__log-row .tool { color: var(--text); }
  .session__log-row .tool::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(0,126,247,0.12); }
  .session__log-row .result { color: var(--text-2); text-align: right; }
  .session__actions {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    display: flex; gap: 8px;
  }

  /* =========================================================
     SETTINGS
     ========================================================= */
  .settings-card {
    background: var(--card, var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-card, var(--r-lg));
    box-shadow: var(--shadow-card, none);
    margin-bottom: 16px;
  }
  .settings-card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .settings-card__body { padding: 18px 20px; }

  .connect-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
  }
  .connect-row__brand {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    background: rgba(94,160,255,0.15);
    color: rgba(94,160,255,0.9);
    display: grid; place-items: center;
    font-size: 18px;
  }
  .connect-row__main { flex: 1; min-width: 0; }
  .connect-row__name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
  .connect-row__status {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--good); box-shadow: 0 0 0 3px rgba(0,126,247,0.15);
  }
  .connect-row__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }

  .accounts-list { display: flex; flex-direction: column; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
  .accounts-list__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .check {
    width: 16px; height: 16px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
    flex-shrink: 0;
  }
  .check.is-on { background: var(--accent); border-color: var(--accent); }
  .check.is-on::after {
    content: '✓';
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .accounts-list__name { color: var(--text); flex: 1; }
  .accounts-list__id { color: var(--text-3); }

  .plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .plan-card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
    background: var(--surface);
    display: flex; flex-direction: column; gap: 14px;
  }
  .plan-card.is-current {
    border-color: var(--accent-line);
    background: var(--accent-soft);
  }
  .plan-card__name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
  }
  .plan-card.is-current .plan-card__name { color: var(--accent); }
  .plan-card__price {
    font-family: var(--font-mono);
    font-size: 28px; font-weight: 500;
    color: var(--text);
    line-height: 1;
  }
  .plan-card__price small { font-size: 12px; color: var(--text-3); }
  .plan-card__bullets {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
  }
  .plan-card__bullets li::before {
    content: '·';
    color: var(--text-3);
    margin-right: 6px;
  }
  .plan-card__cta { margin-top: auto; }

  .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding-top: 4px; }
  .status-grid__row {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }
  .status-grid__row:last-child { border-bottom: 0; }
  .status-grid__row .lbl { color: var(--text-3); }
  .status-grid__row .val { color: var(--text); }
  .status-grid__row .val.is-good {
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .status-grid__row .val.is-good::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--good); box-shadow: 0 0 0 3px rgba(0,126,247,0.15);
  }

  /* =========================================================
     SCREEN ROUTING
     ========================================================= */
  .screen { display: none; }
  .screen.is-active { display: block; }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 1199px) {
    /* ============================ INVARIANT ============================
       ws-ai SIDEBARS NEVER REACT TO VIEWPORT WIDTH. Opening devtools = a
       resize; it must not move, squash or hide the ws-ai sidebar. This bug
       has been re-introduced 3+ times. Every width media in this file MUST
       be scoped :not(.ws-ai) / body:not(.ws-ai). See also the safety net at
       the very end of this file and the force-block in screens/ai.js.
       =================================================================== */
    .app:not(.ws-ai) { --sidebar-w: 56px; }
    .app:not(.ws-ai) .nav__title,
    .app:not(.ws-ai) .nav__item .nav__label,
    .app:not(.ws-ai) .profile__name,
    .app:not(.ws-ai) .profile .kbd { display: none; }
    .app:not(.ws-ai) .nav__item { justify-content: center; padding: 8px 0; }
    .app:not(.ws-ai) .profile { justify-content: center; padding: 8px 0; }
    .app:not(.ws-ai) .nav__item.is-active::before { display: none; }
  }
  @media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .plans-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .main { padding: 20px 18px 100px; }
    .h1 { font-size: 24px; }
    .gallery { grid-template-columns: 1fr; }
    .stage-row { grid-template-columns: 28px 100px 1fr; gap: 8px; }
    .stage-row__val, .stage-row__cr, .stage-row__handle { display: none; }
    .funnel-bottom { grid-template-columns: repeat(2, 1fr); }
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar__actions { width: 100%; }
    .topbar__row { width: 100%; }
    .app { grid-template-columns: 1fr; }
    .aside { display: none; }
  }

  /* r469b: the prototype-era .mobile-tabbar removed - no node ever rendered it, but its media reserved 60px of body for nothing */

/* =========================================================
   APP ADDITIONS — beyond prototype: modal, filter-bar,
   leads quality, account switcher, drawer-tabs, datepicker
   ========================================================= */

/* --- center modal (replaces the prototype drawer/slide pattern) --- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal-overlay.is-open { display: flex; }

.modal {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  width: min(100%, 1080px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.modal__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.modal__subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.modal__close {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.modal__close:hover { background: var(--surface-3); color: var(--text); }

.modal__tabs {
  display: flex; gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.modal__tab {
  padding: 12px 18px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.modal__tab:hover { color: var(--text-2); }
.modal__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.modal__body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}
.modal__foot .tk-foot,
.modal__foot.tk-foot { justify-content: space-between; }
.modal__pane { display: none; }
.modal__pane.is-active { display: block; }

/* --- filter bar --- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 0 14px;
  align-items: center;
}
.filter-bar__group {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.filter-bar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.filter-bar__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}

.fselect {
  height: 38px;
  min-width: 160px;
  max-width: 160px;
  padding: 0 28px 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.fselect:hover { background-color: var(--surface-3); }

.finput {
  height: 38px;
  padding: 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  min-width: 180px;
}
.finput::placeholder { color: var(--text-4); }
.finput:focus { outline: 0; border-color: var(--line-3); box-shadow: var(--shadow-focus); }

.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.fchip__x { cursor: pointer; opacity: 0.6; }
.fchip__x:hover { opacity: 1; color: var(--bad); }

/* --- leads quality badges --- */
.qbadge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.qbadge--clean { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.qbadge--dup   { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255,184,74,0.25); }
.qbadge--invalid { background: var(--bad-soft); color: var(--bad); border: 1px solid rgba(255,107,107,0.25); }
.qbadge--bot   { background: rgba(255,107,107,0.04); color: var(--bad); border: 1px dashed rgba(255,107,107,0.25); }

/* --- date picker (own implementation, not shadow DOM) --- */
.dp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.dp-overlay.is-open { display: flex; }
.dp-panel {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 18px;
  width: min(100%, 760px);
  display: flex; gap: 18px;
}
.dp-presets {
  width: 160px; display: flex; flex-direction: column; gap: 6px;
}
.dp-preset {
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.dp-preset:hover { background: var(--surface-3); color: var(--text); }
.dp-preset.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.dp-cals { flex: 1; display: flex; gap: 18px; }
.dp-cal { flex: 1; }
.dp-cal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.dp-cal__title {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
}
.dp-cal__nav {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.dp-dow { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); padding: 4px 0; }
.dp-day {
  text-align: center; padding: 6px 0;
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; color: var(--text);
  background: transparent;
  border: 1px solid transparent;
}
.dp-day:hover:not(.is-disabled) { background: var(--surface-3); }
.dp-day.is-disabled { color: var(--text-4); cursor: default; }
.dp-day.is-sel { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dp-day.is-range { background: var(--accent-soft); }

.dp-foot {
  position: absolute; bottom: 18px; right: 18px;
  display: flex; gap: 8px;
}

/* r470c (Egor: unstyled three bars mid-screen, and no burger at all on a
   phone): #lia-mburger's rules lived in ainav-boot-css, which only the AI
   sidebar skeleton injects - on tasks/settings the button existed UNSTYLED
   (the ghost bars), and pages that never ran the skeleton had no burger
   look at all. build2 loads on EVERY page, so build2 is the ONE owner now;
   ainav-boot-css keeps a pointer comment. */
#lia-mburger{display:none;position:fixed;top:23px;left:12px;z-index:90;width:38px;height:38px;border-radius:10px;border:1px solid var(--line,#343432);background:var(--ink,#232321);color:var(--text,#f4f3ef);align-items:center;justify-content:center;font-size:18px;cursor:pointer}
/* r831: the 4B collapse symbol on both buttons, at their own size */
.aside__collapse .lia-ico,#lia-mburger .lia-ico{width:20px;height:20px;flex:0 0 20px}
@media (max-width:1024px){
  #lia-mburger{display:flex}
  body.mnav-open #lia-mburger{display:none!important}
}
@media (max-width:767px){
  /* the phone Relay list carries its own sidebar burger next to the search -
     two burgers in one corner would fight */
  body.ws-ai:has(.jshell) #lia-mburger{display:none!important}
  /* r995a (Egor): with the ads browser open the canvas is the whole screen and
     its tab row starts at the top of it, so at top:23px the burger hung BELOW
     the tab's centre line and overlapped the tab itself. The tab row is
     r995b: 4px was too high - Egor got the burger sitting on the tab's TOP
     EDGE, so the tab row starts lower than the stylesheet suggested. Measured
     off his screenshot instead of computed: at 591px wide for a 390pt screen
     the scale is 1.515, our viewport begins at y=152 under the in-app browser
     chrome, and the tab box runs y=168 to y=225, centre y=196. That is
     (196-152)/1.515 = 29px into the viewport, and a 38px button centres on it
     at top:10px. The same arithmetic checks out against the old screenshot: the
     burger at top:23px measured back to a centre of 42px, which is 23+19.
     The tab row steps 56px to the right in the popup's own
     stylesheet - the burger keeps the corner, the tab moves out of it.
     Scoped with :has(.br) so this only applies while the browser is open;
     everywhere else the burger stays where every other screen expects it. */
  body:has(.br) #lia-mburger{top:10px}
}

/* r469b (Egor): the bottom tab bar is GONE since 2026-07-16 - these rules kept flashing a dead bar at frame zero on non-ws-ai pages until shell.js removed the node. Mobile nav is the top-right burger. */

/* =========================================================
   APP ADDITIONS — beyond prototype: modal, filter-bar,
   leads quality, account switcher, drawer-tabs, datepicker
   ========================================================= */

/* --- center modal (replaces the prototype drawer/slide pattern) --- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal-overlay.is-open { display: flex; }

.modal {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  width: min(100%, 1080px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.modal__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.modal__subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.modal__close {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.modal__close:hover { background: var(--surface-3); color: var(--text); }

.modal__tabs {
  display: flex; gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.modal__tab {
  padding: 12px 18px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.modal__tab:hover { color: var(--text-2); }
.modal__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.modal__body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}
.modal__foot .tk-foot,
.modal__foot.tk-foot { justify-content: space-between; }
.modal__pane { display: none; }
.modal__pane.is-active { display: block; }

/* --- filter bar --- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 0 14px;
  align-items: center;
}
.filter-bar__group {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.filter-bar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.filter-bar__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}

.fselect {
  height: 38px;
  min-width: 160px;
  max-width: 160px;
  padding: 0 28px 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.fselect:hover { background-color: var(--surface-3); }

.finput {
  height: 38px;
  padding: 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  min-width: 180px;
}
.finput::placeholder { color: var(--text-4); }
.finput:focus { outline: 0; border-color: var(--line-3); box-shadow: var(--shadow-focus); }

.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.fchip__x { cursor: pointer; opacity: 0.6; }
.fchip__x:hover { opacity: 1; color: var(--bad); }

/* --- leads quality badges --- */
.qbadge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.qbadge--clean { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.qbadge--dup   { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255,184,74,0.25); }
.qbadge--invalid { background: var(--bad-soft); color: var(--bad); border: 1px solid rgba(255,107,107,0.25); }
.qbadge--bot   { background: rgba(255,107,107,0.04); color: var(--bad); border: 1px dashed rgba(255,107,107,0.25); }

/* --- date picker (own implementation, not shadow DOM) --- */
.dp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.dp-overlay.is-open { display: flex; }
.dp-panel {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 18px;
  width: min(100%, 760px);
  display: flex; gap: 18px;
}
.dp-presets {
  width: 160px; display: flex; flex-direction: column; gap: 6px;
}
.dp-preset {
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.dp-preset:hover { background: var(--surface-3); color: var(--text); }
.dp-preset.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.dp-cals { flex: 1; display: flex; gap: 18px; }
.dp-cal { flex: 1; }
.dp-cal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.dp-cal__title {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
}
.dp-cal__nav {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.dp-dow { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); padding: 4px 0; }
.dp-day {
  text-align: center; padding: 6px 0;
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; color: var(--text);
  background: transparent;
  border: 1px solid transparent;
}
.dp-day:hover:not(.is-disabled) { background: var(--surface-3); }
.dp-day.is-disabled { color: var(--text-4); cursor: default; }
.dp-day.is-sel { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dp-day.is-range { background: var(--accent-soft); }

.dp-foot {
  position: absolute; bottom: 18px; right: 18px;
  display: flex; gap: 8px;
}

/* r469b: second copy of the dead bottom bar removed (the bar itself died 2026-07-16) */

/* --- full-screen mobile menu (all sections, grouped) --- */
.mmenu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mmenu.is-open { opacity: 1; visibility: visible; transform: none; }
.mmenu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top)) 20px 16px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.mmenu__brand { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.mmenu__close {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); background: var(--surface);
}
.mmenu__close i { font-size: 20px; }
.mmenu__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }
.mmenu__group {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-4); padding: 18px 8px 6px;
}
.mmenu__item {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; border-radius: 12px; text-align: left;
  color: var(--text); font-size: 15px;
}
.mmenu__item > i:first-child { font-size: 20px; color: var(--text-2); width: 24px; text-align: center; flex: 0 0 auto; }
.mmenu__item span { flex: 1; }
.mmenu__item .mmenu__chev { margin-left: auto; font-size: 15px; color: var(--text-4); }
.mmenu__item:active, .mmenu__item:hover { background: var(--surface-2); }
.mmenu__item.is-active { background: var(--accent-soft); color: var(--accent); }
.mmenu__item.is-active > i:first-child { color: var(--accent); }
.mmenu__item > svg.mmenu__svg:first-child { width: 24px; height: 24px; color: var(--text-2); flex: 0 0 auto; }
.mmenu__item.is-active > svg.mmenu__svg:first-child { color: var(--accent); }

/* --- Overview screen, mobile (<=767) --- */
@media (max-width: 767px) {
  .ov-grid { grid-template-columns: 1fr !important; }
  .kpi__value { font-size: 26px; }
  .creative-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px; }
  .creative-row__main { flex: 1 1 130px; min-width: 0; }
  .creative-row__stat { flex: 0 0 auto; text-align: left; min-width: 0; }
}

/* --- Audience screen, mobile (<=767) --- */
@media (max-width: 767px) {
  /* filters take full width */
  .aud-filter { min-width: 0; width: 100%; }
  .aud-filter select { width: 100%; }
  /* cohort lists: drop the last numeric column, tighten */
  .aud-list__row,
  .aud-list__head {
    grid-template-columns: 84px 1fr 76px 64px !important;
    gap: 8px;
  }
  .aud-list__row > :nth-child(5),
  .aud-list__head > span:nth-child(5) { display: none; }
  .aud-list__row--lg,
  .aud-list__head--lg {
    grid-template-columns: 96px 1fr 84px 70px !important;
    gap: 10px;
  }
  .aud-list__row--lg > :nth-child(5),
  .aud-list__head--lg > span:nth-child(5) { display: none; }
  /* age-rank header hint can wrap instead of colliding */
  .aud-age-rank__head-row { flex-wrap: wrap; gap: 2px 10px; }
}

/* --- Modal / drill-detail content, mobile (<=640) --- */
@media (max-width: 640px) {
  .modal__body { padding: 16px; }
  .modal__head { padding: 14px 16px 12px; }
  .modal__tabs { padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal__title { font-size: 18px; }
  /* lead detail: 3-up info tiles -> 2-up, then 1-up on very narrow */
  .lead-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  /* lead creative-detail two-column inline grids stack */
  .modal__body [style*="grid-template-columns:200px 1fr"],
  .modal__body [style*="grid-template-columns: 200px 1fr"],
  .modal__body [style*="grid-template-columns:1fr 1fr"],
  .modal__body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* ad-detail (creatives drill): preview + content columns stack */
  .modal__body [style*="grid-template-columns:160px 1fr"],
  .modal__body [style*="grid-template-columns: 160px 1fr"],
  .modal__body [style*="grid-template-columns:240px 1fr"],
  .modal__body [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* KPI block inside drill is forced to 4-up inline; make it 2-up so big
     euro values (e.g. €457.58) stop overflowing and overlapping */
  .modal__body .kpi-grid[style*="repeat(4,1fr)"],
  .modal__body .kpi-grid[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .modal__body .kpi__value { font-size: 22px; word-break: normal; }
  /* inner per-day / platform tables in the drill use fixed inline grids;
     let their scroll container handle width instead of clipping */
  .modal__pane { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal__pane > div > [style*="grid-template-columns:90px"],
  .modal__pane > div > [style*="grid-template-columns: 90px"],
  .modal__pane > div > [style*="grid-template-columns:100px"],
  .modal__pane > div > [style*="grid-template-columns: 100px"] {
    min-width: 440px;
  }
}
@media (max-width: 430px) {
  .lead-tiles { grid-template-columns: 1fr !important; }
}

/* =========================================================
   TASKS screen (board + list, chips, editor)
   ========================================================= */
.tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-head__actions { display: flex; align-items: center; gap: 10px; }
.tk-viewtog { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.tk-viewtog__b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); background: var(--card, var(--surface)); cursor: pointer; border: 0; }
.tk-viewtog__b i { font-size: 14px; }
.tk-viewtog__b.is-on { background: var(--accent-soft); color: var(--accent); }
.tk-new { display: inline-flex; align-items: center; gap: 7px; }

/* filter bar */
.tk-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.tk-filterbar__lbl { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.tk-filterbar__clear { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); background: none; border: 0; cursor: pointer; }
.tk-filterbar__clear:hover { color: var(--text); }

/* chips */
.tk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tk-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-chip i { font-size: 12px; opacity: 0.6; flex-shrink: 0; }
.tk-chip--acct { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line, rgba(43,127,212,.25)); }
.tk-chip--obj { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-2); }

/* board */
.tk-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; height: calc(100vh - 188px); margin-right: -36px; padding-right: 36px; padding-bottom: 10px; }
.tk-col { flex: 0 0 290px; width: 290px; background: var(--card, var(--surface-2)); border: 1px solid var(--line); border-radius: var(--r-card, var(--r-lg)); box-shadow: var(--shadow-card, none); display: flex; flex-direction: column; max-height: 100%; }
.tk-col__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tk-col__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.tk-col__title { font-weight: 600; font-size: 13px; flex: 1; }
.tk-col__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); background: var(--surface-3); padding: 1px 8px; border-radius: 999px; }
.tk-col__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 40px; transition: background 120ms; }
.tk-col__body.is-over { background: var(--accent-soft); }
.tk-col__empty { color: var(--text-4); font-family: var(--font-mono); font-size: 11px; text-align: center; padding: 12px 0; }
.tk-col__add { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 9px; border-top: 1px solid var(--line); color: var(--text-3); font-family: var(--font-mono); font-size: 11px; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.tk-col__add:hover { color: var(--accent); }
.tk-col-add { flex: 0 0 200px; align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: none; color: var(--text-3); font-size: 13px; cursor: pointer; }
.tk-col-add:hover { color: var(--accent); border-color: var(--accent-line); }

/* card */
.tk-card { background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 12px; cursor: pointer; box-shadow: var(--shadow-card, none); transition: border-color 120ms, box-shadow 120ms; }
.tk-card:hover { border-color: var(--line-3); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tk-card.is-dragging { opacity: 0.4; }
.tk-card__title { font-size: 13px; font-weight: 500; line-height: 1.35; margin-bottom: 8px; }
.tk-card__row { display: flex; align-items: flex-start; gap: 8px; }
.tk-card__row .tk-card__title { margin-bottom: 8px; flex: 1; min-width: 0; }
.tk-card__pri { flex-shrink: 0; padding-top: 2px; display: flex; }
.tk-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tk-card__foot { display: flex; align-items: center; gap: 10px; }
.tk-pri-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-due { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-3); }
.tk-due i { font-size: 13px; }
.tk-due.is-soon { color: var(--warn, #c4842a); }
.tk-due.is-overdue { color: var(--bad, #e0463f); }

/* list */
.tk-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tk-list--grouped { background: none; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
.tk-lsection { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tk-lsection__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px; border: 0; background: var(--surface-2); cursor: pointer; text-align: left; font: inherit; }
.tk-lsection__head:hover { background: var(--surface-3, var(--surface-2)); }
.tk-lsection__caret { font-size: 13px; color: var(--text-3); flex-shrink: 0; }
.tk-lsection__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-lsection__label { font-size: 13px; font-weight: 600; color: var(--text-1); }
.tk-lsection__count { font-size: 12px; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 2px; }
.tk-lsection__body { display: block; }
.tk-lsection.is-collapsed .tk-lsection__body { display: none; }
.tk-list--grouped .tk-lrow:last-child { border-bottom: 0; }
.tk-lrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.tk-lrow:last-child { border-bottom: 0; }
.tk-lrow:hover { background: var(--surface-2); }
.tk-lrow__status { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.tk-lrow__main { flex: 1; min-width: 0; }
.tk-lrow__title { font-size: 13.5px; font-weight: 500; display: block; margin-bottom: 4px; }
.tk-lrow__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-lrow__meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tk-pri { font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.tk-pri__txt { line-height: 1; }
.tk-pri-ico { display: block; flex-shrink: 0; }

/* ── liaSelect — branded dropdown replacing native <select> ──────── */
.lia-sel__native { display: none !important; }
.lia-sel { position: relative; width: auto; min-width: 160px; }
/* Full-width inside task grid cells / editor / filter grid where the parent allocates the column */
.tk-f .lia-sel, .tk-filter__grid .lia-sel, .tk-editor .lia-sel, label.tk-f .lia-sel { width: 100%; min-width: 0; }
.lia-sel__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans); font-size: 13px;
  cursor: pointer; text-align: left;
  transition: background 120ms, border-color 120ms;
}
.lia-sel__btn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--line-3, var(--line-2)); }
.lia-sel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lia-sel__car { display: inline-block; width: 11px; height: 11px; opacity: 0.55; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center / 11px 11px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center / 11px 11px; }
.lia-sel__car::before { content: ""; }
.lia-sel.is-disabled { opacity: 0.5; }
.lia-sel.is-disabled .lia-sel__btn { cursor: not-allowed; }
.lia-sel__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: var(--dd-bg, #383835);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 6px; display: none; z-index: 300;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.lia-sel__menu--portal { position: fixed; left: auto; right: auto; z-index: 11000; }
.lia-sel__menu.is-open { display: block; }
.lia-sel.is-loading .lia-sel__sk { display: block; height: 12px; width: 70%; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: lia-shimmer 1.4s infinite; }
@keyframes lia-sel-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.lia-sel__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 13px; color: var(--text);
  cursor: pointer;
}
.lia-sel__item:hover { background: var(--surface-2); }
.lia-sel__item.is-current { background: var(--surface-2); }
.lia-sel__item-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lia-sel__item .ph-check { color: var(--accent); flex-shrink: 0; }

/* ── stage colour palette ───────────────────────────────────────── */
.tk-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tk-swatch {
  aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; transition: transform 100ms, box-shadow 120ms;
}
.tk-swatch:hover { transform: scale(1.12); }
.tk-swatch.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-3); }

/* editor modal fields */
.tk-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.tk-f > span { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; }
.tk-input { width: 100%; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--text); font-family: var(--font-sans); font-size: 14px; }
.tk-input:focus { border-color: var(--accent-line); outline: none; }
textarea.tk-input { resize: vertical; }
.tk-f-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.tk-linkrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tk-chosen { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; margin-top: 4px; }
.tk-chosen__empty { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.tk-foot { display: flex; align-items: center; justify-content: space-between; }
.tk-del { display: inline-flex; align-items: center; gap: 6px; color: var(--bad, #e0463f); background: none; border: 0; font-size: 13px; cursor: pointer; font-family: var(--font-sans); }
.tk-del:hover { text-decoration: underline; }

/* stage editor */
.tk-stagelist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tk-stage-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.tk-stage-item__lbl { flex: 1; font-size: 13px; }
.tk-stage-item__tag { font-family: var(--font-mono); font-size: 9px; color: var(--text-4); text-transform: uppercase; }
.tk-stage-item__del { color: var(--text-4); background: none; border: 0; cursor: pointer; }
.tk-stage-item__del:hover { color: var(--bad, #e0463f); }
.tk-addstage { display: flex; gap: 8px; }
.tk-addstage .tk-input { flex: 1; }

.tk-sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: lia-shimmer 1.4s infinite; border-radius: var(--r-lg); }
.tk-skboard { display: flex; gap: 14px; margin-top: 14px; }
.tk-aibtns { display: inline-flex; gap: 6px; }
.tk-subtitle { font-family: var(--font-sans) !important; font-size: 13px; }
.tk-aibtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color 140ms, background 140ms; background: var(--card, var(--surface)); border: 1px solid var(--line-2); color: var(--text); }
.tk-aibtn:hover { border-color: var(--line-3); background: var(--surface-2); }
.tk-ailogo { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-ailogo--claude { color: var(--text); background: transparent; }
.tk-ailogo--gpt { color: var(--text); background: transparent; }
.tk-skcol { flex: 0 0 290px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tk-skcol__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tk-sk--dot { width: 9px; height: 9px; border-radius: 3px; }
.tk-sk--label { height: 12px; width: 90px; border-radius: 4px; }
.tk-sk--card { height: 58px; border-radius: var(--r-md); }
.tk-sk--count { display: inline-block; height: 13px; width: 64px; border-radius: 4px; vertical-align: middle; }
.tk-sk--mini { display: inline-block; height: 12px; width: 20px; border-radius: 4px; }

/* tasks mobile (<=767): board column tabs, single column */
/* === Kommo-style filter bar === */
.tk-filter { margin-bottom: 14px; position: relative; }
.tk-filter__top { display: flex; align-items: center; gap: 10px; }
.tk-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; background: var(--card, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.tk-search i { color: var(--text-4); font-size: 15px; }
.tk-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-family: var(--font-sans); font-size: 14px; }
.tk-search input::placeholder { color: var(--text-4); }
.tk-filter__toggle { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px; padding: 0; position: relative; background: var(--card, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--text-2); font-size: 15px; cursor: pointer; }
.tk-filter__toggle i { font-size: 15px; }
.tk-filter__toggle:hover { border-color: var(--line-3); color: var(--text); }
.tk-filter__toggle.is-active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.tk-filter__badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; }
.tk-filter__toggle .tk-filter__badge { position: absolute; top: -6px; right: -6px; }
.tk-filter__clear { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 10px; background: none; border: 0; color: var(--text-3); font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.tk-filter__clear:hover { color: var(--bad, #e0463f); }
.tk-filter__body { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 250; width: min(880px, calc(100vw - 48px)); padding: 16px; background: var(--ink-2, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 18px 48px rgba(0,0,0,0.32); }
.tk-filter.is-open .tk-filter__body { display: block; }
.tk-filter__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* === right-click context menu === */
.tk-ctx { position: fixed; z-index: 11000; min-width: 180px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(0,0,0,0.4); padding: 5px; }
.tk-ctx__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none; color: var(--text); font-family: var(--font-sans); font-size: 13px; text-align: left; border-radius: var(--r-sm); cursor: pointer; }
.tk-ctx__item i:first-child { font-size: 16px; color: var(--text-3); width: 18px; }
.tk-ctx__item:hover { background: var(--surface-2); }
.tk-ctx__item.is-danger { color: var(--bad, #e0463f); }
.tk-ctx__item.is-danger i { color: var(--bad, #e0463f); }
.tk-ctx__more { margin-left: auto; font-size: 13px; color: var(--text-4); }

/* === branded date field (replaces native input[type=date] inside tasks) === */
.tk-datefield { position: relative; }
.tk-datefield__btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--text); font-family: var(--font-sans); font-size: 13px; cursor: pointer; text-align: left; transition: background 120ms, border-color 120ms; }
.tk-datefield__btn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--line-3, var(--line-2)); }
.tk-datefield__btn i { color: var(--text-4); font-size: 15px; flex-shrink: 0; }
.tk-datefield__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-datefield__btn.is-empty { color: var(--text-4); }
.tk-cal--portal { position: fixed; }
.tk-cal__day.is-inrange { background: var(--accent-soft); border-radius: 0; }
.tk-cal__hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); align-self: center; }
.tk-cal { position: absolute; z-index: 11050; margin-top: 6px; width: 260px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.4); padding: 12px; }
.tk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tk-cal__title { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.tk-cal__nav { width: 26px; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.tk-cal__nav:hover { color: var(--text); }
.tk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tk-cal__dow { text-align: center; font-family: var(--font-mono); font-size: 9px; color: var(--text-4); padding: 4px 0; }
.tk-cal__day { text-align: center; padding: 6px 0; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; color: var(--text); background: none; border: 0; cursor: pointer; }
.tk-cal__day:hover:not(.is-empty) { background: var(--surface-3); }
.tk-cal__day.is-today { color: var(--accent); font-weight: 600; }
.tk-cal__day.is-sel { background: var(--accent); color: var(--on-accent); }
.tk-cal__day.is-empty { cursor: default; }
.tk-cal__foot { display: flex; justify-content: space-between; margin-top: 8px; }
.tk-cal__foot button { background: none; border: 0; color: var(--accent); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }

@media (max-width: 767px) {
  .tk-head__actions { width: 100%; justify-content: space-between; }
  .tk-board { gap: 10px; }
  .tk-col { flex: 0 0 84vw; width: 84vw; max-height: none; }
  .tk-col-add { flex: 0 0 84vw; }
  .tk-f-row { grid-template-columns: 1fr; }
  .tk-linkrow { grid-template-columns: 1fr; }
  .tk-lrow__meta { flex-direction: column; align-items: flex-end; gap: 4px; }
  .tk-filter__grid { grid-template-columns: 1fr 1fr; }
  .tk-search { max-width: none; }
}

/* --- account switcher (in topbar) --- */
.acct-switch {
  position: relative;
}
/* Manual sync button — leftmost topbar control. Icon-only square that
   matches the height of the account/date pills. States:
     idle      = neutral, hover lightens bg
     is-syncing = accent border + icon, spinner rotates
     is-ok     = green tint for 2s after success
     is-err    = red tint for 2s after failure
   The spinner animation is reused from .creative-thumb__spinner
   (liaSpin keyframes). */
.sync-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sync-btn:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--line-3);
  color: var(--text);
}
.sync-btn:disabled { cursor: wait; opacity: 0.85; }
.sync-btn.is-syncing {
  border-color: var(--accent-muted);
  color: var(--accent);
}
.sync-btn.is-ok {
  background: rgba(80, 245, 169, 0.08);
  border-color: rgba(80, 245, 169, 0.32);
  color: var(--accent);
}
.sync-btn.is-err {
  background: rgba(255, 100, 100, 0.08);
  border-color: rgba(255, 100, 100, 0.32);
  color: #ff7a7a;
}
.sync-btn i { font-size: 14px; line-height: 1; -webkit-text-stroke: 0.3px currentColor; }

.acct-switch__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-mono); font-size: 12px;
  cursor: pointer;
}
.acct-switch__btn:hover { background: var(--surface-3); }
/* Top bar: account selector + calendar(date) button rounded to 16px (compare cmp-iconbtn keep --r-md) */
#lia-btn, #acct-switch-btn, #date-btn { border-radius: var(--r-xl); font-family: var(--font-sans); font-weight: 500; color: var(--text-3); }
.acct-switch__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Green = an account is selected and Meta is connected. */
.acct-switch__dot.is-on  { background: var(--accent); }
/* Yellow = Meta is connected but nothing picked yet — user needs to act. */
.acct-switch__dot.is-pending { background: var(--warn, #d8b54a); }
/* Gray = no Meta connection at all; nothing to pick from. */
.acct-switch__dot.is-off { background: var(--text-4); }
.acct-switch__menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 6px;
  display: none;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.acct-switch__menu.is-open { display: block; }
.acct-switch__item {
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.acct-switch__item:hover { background: var(--surface-2); }
.acct-switch__item.is-current { background: var(--accent-soft, rgba(0,126,247,.12)); }
.acct-switch__item.is-current .acct-switch__item-name { color: var(--accent); }
.acct-switch__item-name { font-size: 13px; }
.acct-switch__item-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }

/* A3: grouped selector (BM → accounts) + search */
.acct-switch__search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.acct-switch__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,126,247,.15); }
.acct-switch:has(.acct-switch__menu.is-open) .acct-switch__btn { border-color: var(--accent); }
.acct-switch__search i { font-size: 14px; color: var(--text-3); }
.acct-switch__search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--text-1); font-size: 13px;
}
.acct-switch__search input::placeholder { color: var(--text-3); }
.acct-switch__list { max-height: 360px; overflow-y: auto; }
.acct-switch__group + .acct-switch__group { margin-top: 4px; }
.acct-switch__group-head {
  padding: 8px 10px 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
  position: sticky; top: 0; background: var(--ink-2); z-index: 1;
}
.acct-switch__empty {
  padding: 14px 10px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3);
}

/* --- top-of-screen action row (date + compare) --- */
.toolrow {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-bottom: 14px;
}
.toolrow__sep { flex: 1; }
.compare-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-2);
}
.compare-toggle__label { color: var(--text-3); }
.compare-toggle select {
  background: transparent; border: 0; color: var(--text); font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}

/* --- KPI delta with explicit comparison label --- */
.kpi__delta {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  margin-top: 8px;
}
.kpi__delta-val { font-weight: 500; }
.kpi__delta-vs { color: var(--text-4); font-size: 10px; }

/* --- expandable table rows (campaigns drill-down) --- */
.dtable tr.is-expanded { background: var(--surface-2); }
.dtable tr.dtable__sub--adset {
  background: var(--ink-2);
}
.dtable tr.dtable__sub--adset td.row-name {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}
.dtable tr.dtable__sub--ad {
  background: var(--w15);
}
.dtable tr.dtable__sub--ad td.row-name,
.dtable tr.dtable__sub--ad td:nth-child(2) {
  color: var(--text-2);
  font-size: 11px;
}
.dtable .row-toggle {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  width: 20px; height: 20px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dtable .row-toggle--sm {
  width: 16px; height: 16px;
}
.dtable .row-toggle--sm i { font-size: 11px; }
.dtable .row-toggle:hover { background: var(--surface-3); color: var(--text); }
.dtable .row-toggle.is-open { color: var(--accent); }

/* --- wide data tables (Ads, Leads) — horizontal scroll on mobile (<=767) --- */
@media (max-width: 767px) {
  .dtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtable table { min-width: 680px; }
  .dtable thead th, .dtable tbody td { padding: 9px 12px; }
  .dtable tbody td { font-size: 12px; }
}

/* --- leads-specific styling --- */
/* Audience panel rows — used by both the real chart and the skeleton.
   Same grid columns so skeleton-to-data transition is invisible.
   Cols: label · share-bar · leads · spend · cpl  */
.aud-panel__row {
  display: grid;
  grid-template-columns: 80px 1fr 70px 80px 60px;
  gap: 12px;
  align-items: center;
}
.aud-panel__row--head { padding-bottom: 4px; }

/* Filters row above the leads table — flex line of search + 3 selects.
   Same exact layout is used by the skeleton + real render, so swap
   doesn't shift anything. */
.leads-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.leads-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.leads-summary__card {
  background: var(--card, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-card, var(--r-lg));
  box-shadow: var(--shadow-card, none);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
/* both summary cards share one skeleton: head + value row + bottom line, equal height (Egor r56) */
.leads-summary__card{ min-height:104px; display:flex; flex-direction:column }
.leads-summary__totrow{ display:flex; gap:16px; margin-top:auto; padding-top:10px; flex-wrap:wrap }
.leads-summary__totitem{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-3) }
.leads-summary__totitem i{ font-size:13px }
.leads-summary__totitem em{ font-style:normal; color:var(--text-4); font-size:11px }
/* platform value row uses the SAME font-size as total's number */
.leads-summary__value--plat{ display:flex; gap:18px; align-items:baseline }
.leads-summary__plat{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:26px; line-height:1.1 }
.leads-summary__plat em{ font-style:normal; font-family:var(--font-sans); font-size:12px; font-weight:500; color:var(--text-3) }
.leads-summary__platico--fb{ font-size:18px; color:#6BA6FF }
.leads-summary__platico--ig{ font-size:18px; color:#E1306C }
.leads-summary__card--plat .leads-summary__platbar{ display:flex; height:5px; border-radius:3px; overflow:hidden; margin-top:auto; background:var(--surface-2) }
.leads-summary__platbar-fb{ background:#6BA6FF }
.leads-summary__platbar-ig{ background:#E1306C }
.leads-summary__card:hover {
  border-color: var(--line-2);
  background: var(--card, var(--surface));
}
/* Tinted accent strip along the left edge — communicates card category */
.leads-summary__card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .15s ease;
}
.leads-summary__card--primary::before { background: var(--accent); }
.leads-summary__card--warn::before { background: var(--warn); }
.leads-summary__card--bad::before { background: var(--bad); }
.leads-summary__card--fb::before { background: #6BA6FF; }
.leads-summary__card--ig::before { background: #E1306C; }

.leads-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.leads-summary__label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.leads-summary__icon {
  width: 14px; height: 14px;
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.6;
}
.leads-summary__card--warn .leads-summary__icon { color: var(--warn); opacity: 0.9; }
.leads-summary__card--bad .leads-summary__icon { color: var(--bad); opacity: 0.9; }
.leads-summary__card--fb .leads-summary__icon { color: #6BA6FF; opacity: 0.9; }
.leads-summary__card--ig .leads-summary__icon { color: #E1306C; opacity: 0.9; }

.leads-summary__value {
  font-family: var(--font-display); font-size: 26px;
  line-height: 1.1;
}
.leads-summary__card--warn .leads-summary__value { color: var(--warn); }
.leads-summary__card--bad .leads-summary__value { color: var(--bad); }

.leads-summary__sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3); margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.leads-summary__bar {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.leads-summary__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--text-3);
  border-radius: 2px;
}
.leads-summary__card--warn .leads-summary__bar-fill { background: var(--warn); }
.leads-summary__card--bad .leads-summary__bar-fill { background: var(--bad); }
.leads-summary__card--fb .leads-summary__bar-fill { background: #6BA6FF; }
.leads-summary__card--ig .leads-summary__bar-fill { background: #E1306C; }

/* ───────── Lead modal — hero + attribution + siblings ───────── */
.lead-overview { font-family: var(--font-sans); }

/* Country-code badge — cross-platform replacement for flag emojis.
   Flag emoji render as letter pairs on Windows / Linux, which looks
   broken. We render a small dark pill with the ISO-2 code instead. */
.cc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--w60);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  min-width: 22px;
  vertical-align: middle;
}
.cc-badge--lg {
  padding: 6px 12px;
  font-size: 13px;
  min-width: 42px;
  border-radius: 5px;
}

.lead-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--w40), var(--w20));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.lead-hero__main { flex: 1; min-width: 0; }
.lead-hero__phone {
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2;
}
.lead-hero__phone .phone-copy__text {
  letter-spacing: 0.5px;
}
.lead-hero__meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.lead-hero__sep { color: var(--text-4); }

/* Sub line on kpiCard — kept for backwards compat with other screens */
.kpi__sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Compact KPI-style tile for the lead overview — purpose-built so dates
   and long IDs don't get cropped by the big display font of UI.kpiCard.
   Uses smaller monospace for the value, optional copy button on the
   right, optional sub-line beneath. */
.lead-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.lead-tiles + .lead-tiles { margin-top: 10px; }
.lead-tile {
  background: var(--card, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-card, var(--r-lg));
  box-shadow: var(--shadow-card, none);
  padding: 12px 14px;
  min-width: 0;
}
.lead-tile__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.lead-tile__value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lead-tile__value-text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.lead-tile__value--mono .lead-tile__value-text {
  font-family: var(--font-mono);
  font-size: 13px;
}
.lead-tile__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.lead-tile .copy-id-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--w40);
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.lead-tile .copy-id-btn:hover {
  background: var(--w80);
  color: var(--text);
}

/* Attribution chain block — campaign / adset / ad with icons */
.lead-attr {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 0;
}
.lead-attr__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.lead-attr__row:last-child { border-bottom: none; }
.lead-attr__label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.lead-attr__label i { font-size: 12px; opacity: 0.7; }
.lead-attr__value {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text);
  min-width: 0;
}

/* Sibling leads mini-table inside the context tab */
.lead-siblings {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lead-siblings__row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 12px;
}
.lead-siblings__row:last-child { border-bottom: none; }
.lead-siblings__row:hover { background: var(--w20); }
.lead-siblings__time { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); white-space: nowrap; }
.lead-siblings__phone {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lead-siblings__phone .mono { color: var(--text); }
.lead-siblings__quality { justify-self: end; }

/* Hour-of-day histogram — 24 columns, each with a bar above and the
   hour label below. Bars are top-aligned to a fixed height so the
   labels always sit at the same Y, regardless of column counts. */
.hour-hist {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 8px 6px;
}
.hour-hist__cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.hour-hist__bar-wrap {
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
}
.hour-hist__col {
  width: 100%;
  background: var(--accent);
  opacity: 0.6;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.hour-hist__col:hover { opacity: 1; }
.hour-hist__col--this {
  background: var(--warn);
  opacity: 1;
}
.hour-hist__hour {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  text-align: center;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.hour-hist__hour--this {
  color: var(--warn);
  font-weight: 700;
}

/* Lead modal timeline — line connects icons WITHOUT passing through them.
   Each item draws its own short connector via ::before, going from the
   bottom of its icon to the bottom of the item. The next item starts
   immediately (no padding gap) and its icon sits at top:0, so segments
   meet seamlessly between adjacent icons. The last item has no
   connector. Result: clean dots-on-a-line with no overlap. */
.lead-timeline.timeline {
  position: relative;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
  padding-top: 0;
}
.lead-timeline .timeline__item {
  position: relative;
  padding: 0 0 22px 38px;
  margin: 0;
  border: none;
  z-index: 1;
}
.lead-timeline .timeline__item:last-child { padding-bottom: 0; }
/* Per-item connector segment — overrides the generic .timeline__item::before
   dot. Goes from just below the icon to the bottom of the item. Items
   butt against each other so the next item's icon (at top:0) connects
   directly to where this segment ends. */
.lead-timeline .timeline__item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 2px;
  height: auto;
  background: var(--line-2);
  border-radius: 1px;
  border: none;
}
.lead-timeline .timeline__item:last-child::before { display: none; }
.lead-timeline .timeline__icon {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  background: var(--bg, var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  font-size: 13px;
  z-index: 2;
}
.lead-timeline .timeline__item--now .timeline__icon {
  /* r311: --good is already #007EF7, but these rgba fills stayed green
     (#4ADE80). Blue is the only accent. */
  background: rgba(0, 126, 247, 0.10);
  border-color: rgba(0, 126, 247, 0.40);
  color: var(--good, #007EF7);
}
.lead-timeline .timeline__body { padding-top: 3px; }
.lead-timeline .timeline__event {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.lead-timeline .timeline__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.lead-timeline .timeline__detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
}
.lead-timeline .timeline__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  margin-top: 4px;
  opacity: 0.85;
}

/* Lead modal — creative tab fields */
.lead-creative__field { margin-bottom: 14px; }
.lead-creative__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.lead-creative__value {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.lead-creative__value--strong { font-weight: 600; }

.lead-creative__meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 6px;
}
.lead-creative__meta-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}
.lead-creative__meta-label {
  color: var(--text-3);
  font-size: 10px;
}
.lead-creative__meta-value { color: var(--text); min-width: 0; }
.lead-creative__meta-value .copy-id-btn {
  background: var(--w40);
  border: 1px solid var(--line);
  color: var(--text-3);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lead-creative__meta-value .copy-id-btn:hover {
  background: var(--w80);
  color: var(--text);
}

/* Clickable lead row inside ad modal's leads tab — opens stacked lead modal */
.lead-row-clickable:hover {
  background: var(--w50) !important;
  border-color: var(--line-2) !important;
}

/* Copy-on-tap phone affordance + small icon button next to it */
.phone-copy {
  display: inline-flex; align-items: center; gap: 8px;
}
.phone-copy__text {
  cursor: pointer;
  user-select: all;
  -webkit-user-select: all;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: background .12s ease;
}
.phone-copy__text:hover {
  background: var(--surface-2, var(--w40));
}
.phone-copy__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.phone-copy__btn:hover {
  background: var(--surface-2, var(--w40));
  border-color: var(--line);
  color: var(--text);
}
.phone-copy__btn--copied {
  color: var(--good, #007EF7);
  border-color: rgba(0,126,247,0.25); /* r311: was green */
}

/* Export dropdown */
.export-dd {
  position: relative;
  display: inline-block;
}
.export-dd__menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 5px;
  min-width: 150px;
  display: none;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.export-dd.is-open .export-dd__menu { display: block; }
.export-dd__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px;
  background: var(--card, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.export-dd__toggle:hover { background: var(--surface-3); border-color: var(--line-3); }
.export-dd.is-open .export-dd__toggle { border-color: var(--accent); }

.export-dd__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.export-dd__item:hover {
  background: var(--surface-2, var(--w40));
}
.export-dd__item i { font-size: 13px; color: var(--text-3); }

/* Spin animation for loading icons inside buttons */
@keyframes lia-spin-kf { to { transform: rotate(360deg); } }
.lia-spin { display: inline-block; animation: lia-spin-kf 0.8s linear infinite; }

/* timeline (used in leads modal, and elsewhere) */
.timeline {
  border-left: 2px solid var(--line-2);
  padding-left: 16px;
  margin-left: 6px;
}
.timeline__item {
  position: relative;
  padding-bottom: 14px;
}
.timeline__item::before {
  content: ""; position: absolute;
  left: -22px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--accent);
}
.timeline__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.timeline__event { font-size: 13px; margin-top: 2px; }

/* loading shimmer */
@keyframes lia-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-3) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: lia-shimmer 1.4s infinite;
  border-radius: var(--r-md);
}
/* Inline skeleton placeholders for individual text/value slots.
   Use these inside a real layout (panel, kpi card, row) so the
   surrounding structure — titles, labels, axes — stays readable
   while data is loading. */
.skel-line {
  display: inline-block;
  height: 0.9em;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: lia-shimmer 1.4s infinite;
  vertical-align: middle;
}
.skel-line--w20 { width: 20%; }
.skel-line--w30 { width: 30%; }
.skel-line--w40 { width: 40%; }
.skel-line--w50 { width: 50%; }
.skel-line--w60 { width: 60%; }
.skel-line--w70 { width: 70%; }
.skel-line--w80 { width: 80%; }
.skel-line--w100 { width: 100%; }
.skel-line--tall { height: 1.4em; }
.skel-line--xl { height: 1.1em; }
.skel-block {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: lia-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
/* A <span class="skel-block"> is inline by default, so its width/height are
   ignored and it renders as nothing (e.g. blank age cohorts in the audience
   table/age-ranking skeletons). Block-level <div class="skel-block"> is left
   alone — some rely on display:block to fill their container width. */
span.skel-block { display: inline-block; vertical-align: middle; }

/* error state */
.error-card {
  padding: 18px;
  background: var(--bad-soft);
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: var(--r-lg);
  color: var(--bad);
  font-family: var(--font-mono); font-size: 12px;
}

/* mobile responsive base */
@media (max-width: 1092px) {
  body:not(.ws-ai) .nav__item .nav__label { display: none !important; }
  body:not(.ws-ai) .aside { width: 64px !important; }
  body:not(.ws-ai) .aside__brand-name { display: none; }
  body:not(.ws-ai) { --sidebar-w: 64px !important; }
}
@media (max-width: 767px) {
  body:not(.ws-ai) .aside { display: none !important; }
  body:not(.ws-ai) .app { grid-template-columns: 1fr !important; }
  .main { padding: 16px !important; } /* r469b: the 90px bottom reserve served the dead bar */
  .h1 { font-size: 24px !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .modal { max-height: 100vh !important; height: 100vh; border-radius: 0; }
  .modal-overlay { padding: 0; }
  .dp-overlay { padding: 16px; align-items: stretch; }
  .dp-panel { flex-direction: column; gap: 12px; width: 100%; max-height: calc(100dvh - 32px); position: relative; }
  .dp-presets { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .dp-cals { flex-direction: column; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dp-foot { position: static; bottom: auto; right: auto; flex-shrink: 0; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* =========================================================
   OVERVIEW — budget panel grows naturally
   ========================================================= */
.ov-budget { display: flex; flex-direction: column; }
.ov-budget .panel__head { flex-shrink: 0; }
.ov-budget__summary {
  padding: 0 16px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 10px;
  flex-shrink: 0;
}
.ov-budget__body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ov-budget__row { min-height: 56px; }
.ov-budget__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.ov-budget__name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.ov-budget__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.row-toggle[disabled] { opacity: 0.3; cursor: not-allowed; }

/* Creative row stays single-row, name ellipsizes */
.creative-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creative-row__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CREATIVES — full inventory row list
   ========================================================= */
.crv-controls {
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-bottom: 14px;
}
.crv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card, var(--surface));
  height: 36px;
}
.crv-search:focus-within { border-color: var(--accent-line); }
.crv-search i { color: var(--text-4); font-size: 14px; }
.crv-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  height: 100%;
}
.crv-search input::placeholder { color: var(--text-4); }

.crv-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.crv-filter-row select {
  height: 38px;
  padding: 0 28px 0 12px;
  background: var(--card, var(--surface-2)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  appearance: none;
  cursor: pointer;
  min-width: 160px;
  max-width: 160px;
}
.crv-filter-row select:hover { border-color: var(--line-2); }
.crv-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}


/* Blue metric chip — label + value pill, used in meta strips (audience totals,
   creatives count/metrics). Mirrors the global-creative popup chips. */
.metric-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metric-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--font-mono);
  color: var(--accent, #007EF7);
  background: rgba(0,126,247,.10);
  border: 1px solid rgba(0,126,247,.20);
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.metric-chip__k { color: var(--accent, #007EF7); font-weight: 500; }

.crv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.crv-list {
  display: flex;
  flex-direction: column;
}
.crv-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 16px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: background 120ms;
}
.crv-row:hover { background: var(--surface); }
.crv-row--skel { cursor: default; }
.crv-row__thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.crv-row__thumb .creative-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
}
.crv-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crv-row__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crv-row__crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crv-row__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
  user-select: all;
  cursor: text;
}
.crv-row__pill { display: flex; align-items: center; }
.crv-row__stats {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 14px;
  align-items: start;
  position: relative;
}
.crv-row__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.crv-row__stat .lbl {
  font-size: 9px;
  color: var(--text-4);
  font-weight: 400;
}
.crv-row__bar {
  grid-column: 1 / -1;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.crv-row__bar-inner { flex: 1; min-width: 0; }
.crv-row__share {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive — collapse stats to fewer columns on narrow viewports */
@media (max-width: 1200px) {
  .crv-row { grid-template-columns: 64px 1fr auto; }
  .crv-row__thumb,
  .crv-row__thumb .creative-thumb { width: 64px; height: 64px; }
  .crv-row__pill { display: none; }
  .crv-row__stats { grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
  .crv-row__bar { display: none; }
}
@media (max-width: 768px) {
  .crv-row { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 4px; }
  .crv-row__thumb,
  .crv-row__thumb .creative-thumb { width: 56px; height: 56px; }
  .crv-row__stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
  }
  .crv-row__stat { text-align: left; }
  .crv-filter-row select { min-width: 100px; flex: 1; }
  .crv-sort-group { margin-left: 0; width: 100%; margin-top: 6px; }
}
@media (max-width: 460px) {
  .crv-row__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 6px 12px; }
}

/* =========================================================
   LIGHTBOX — full-resolution image / video viewer
   Patterned on the Vali implementation; sits above the
   detail-modal (z-index 10000 vs modal 9000).
   ========================================================= */
.lia-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.lia-lightbox.hidden { display: none; }
.lia-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
}
.lia-lightbox__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw;
  max-height: 92vh;
  background: #000;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}
.lia-lightbox__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 240px;
}
.lia-lightbox__media img,
.lia-lightbox__media video {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  /* Slight smoothing helps small upscaled images look less pixelated. */
  image-rendering: auto;
}
.lia-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--w80);
  border: 1px solid var(--w120);
  color: #fff;
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}
.lia-lightbox__close:hover { background: var(--w180); }

.cr-thumb-clickable { transition: transform 120ms; }
.cr-thumb-clickable:hover { transform: scale(1.01); }

/* =========================================================
   AUDIENCE — demographics + time patterns + segments
   ========================================================= */
.aud-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.aud-filters select {
  height: 38px;
  padding: 0 28px 0 12px;
  background: var(--card, var(--surface-2)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  appearance: none;
  cursor: pointer;
  min-width: 160px;
  max-width: 160px;
}
.aud-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}
.aud-filter label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.aud-filter select {
  height: 32px;
  padding: 0 26px 0 10px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  appearance: none;
  cursor: pointer;
}
.aud-filter select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aud-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.aud-row {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.aud-row--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 920px) {
  .aud-row--2col { grid-template-columns: 1fr; }
}

/* Panel head with action button (expand) */
.panel__head--with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel__expand {
  background: transparent;
  border: none;
  color: var(--accent, #007EF7);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.panel__expand:hover {
  background: rgba(0,126,247,.10);
}
.panel__expand i { font-size: 14px; }

/* Demographic breakdown list */
.aud-list {
  display: flex;
  flex-direction: column;
  padding: 4px 14px 6px;
}
.aud-list__row {
  display: grid;
  grid-template-columns: 96px 1fr 90px 78px 64px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
}
.aud-list__row:last-child { border-bottom: 0; }
.aud-list__row--lg {
  padding: 14px 0;
  font-size: 13px;
  grid-template-columns: 130px 1fr 110px 100px 90px;
  gap: 18px;
}
.aud-list__lbl {
  color: var(--text-2);
  text-transform: capitalize;
}
.aud-list__num {
  text-align: right;
  color: var(--text-2);
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
.aud-list__num--mute { color: var(--text-3); }
.aud-list__share {
  color: var(--text-4);
  font-size: 9px;
}
.aud-list__row--lg .aud-list__share { font-size: 10px; }
.aud-list__head {
  display: grid;
  grid-template-columns: 96px 1fr 90px 78px 64px;
  gap: 14px;
  padding: 6px 0 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.aud-list__head--lg {
  grid-template-columns: 130px 1fr 110px 100px 90px;
  gap: 18px;
  font-size: 10px;
  padding-bottom: 12px;
}
.aud-list__head span { text-align: right; }
.aud-list__head span:first-child,
.aud-list__head span:nth-child(2) { text-align: left; }
.aud-list__head--label { color: var(--text-3); }

/* When-leads-arrive */
.aud-time-body { padding: 6px 14px 4px; }
.aud-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 14px 0 10px;
}
.aud-week--lg { padding: 24px 0 14px; gap: 16px; }
.aud-week__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.aud-week__bar-wrap {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: flex-end;
}
.aud-week--lg .aud-week__bar-wrap { height: 160px; }
.aud-week__bar {
  width: 100%;
  background: var(--w160);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: background 120ms;
}
.aud-week__bar.is-best { background: var(--accent); }
.aud-week__lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.aud-week--lg .aud-week__lbl { font-size: 12px; }
.aud-week__lbl.is-best { color: var(--accent); }
.aud-week__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.aud-week--lg .aud-week__num { font-size: 11px; }

.aud-hours {
  padding: 14px 0 6px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.aud-hours--lg { padding: 20px 0 8px; }
.aud-hours__bars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 44px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.aud-hours--lg .aud-hours__bars { height: 90px; gap: 3px; }
.aud-hours__bar {
  background: var(--w140);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.aud-hours__bar.is-best { background: var(--accent); }
.aud-hours__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  text-align: center;
  padding-top: 4px;
}
.aud-hours--lg .aud-hours__scale { font-size: 11px; }
.aud-hours__scale span:first-child { text-align: left; }
.aud-hours__scale span:last-child { text-align: right; }

/* Daily trend chart (expanded-only) */
.aud-daily { padding: 10px 0; }
.aud-daily__head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-bottom: 8px;
}
.aud-daily__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 90px;
}
.aud-daily__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.aud-daily__bar {
  width: 100%;
  background: rgba(80, 245, 169, 0.5);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.aud-daily__scale {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
}

/* Segments — cards with thumb */
.aud-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  padding-top: 14px;
}
.aud-segments--lg {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}
.aud-segment {
  padding: 14px 16px;
  background: var(--w20);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all 140ms;
}
.aud-segment--clickable { cursor: pointer; }
.aud-segment--clickable:hover {
  background: var(--w40);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.aud-segment__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.aud-segment__cohort {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.aud-segment__age { color: var(--text); }
.aud-segment__dot { color: var(--text-4); }
.aud-segment__gender { color: var(--text-2); text-transform: capitalize; }
.aud-segment__total {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.aud-segment__winner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aud-segment__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
}
.aud-segment__thumb .creative-thumb,
.aud-segment__thumb .skel-block {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.aud-segment__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.aud-segment__name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aud-segment__metrics {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.aud-segment__metrics .lbl { color: var(--text); font-weight: 500; }
.aud-segment__metrics .sep { color: var(--text-4); }
.aud-segment__arrow {
  color: var(--text-4);
  transition: color 140ms;
}
.aud-segment--clickable:hover .aud-segment__arrow {
  color: var(--accent);
}
.aud-segment__no-winner {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  padding: 6px 0;
}

/* Age ranking */
.aud-age-rank {
  margin-top: 10px;
  padding: 0 14px 4px;
}
.aud-age-rank__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 10px;
  margin-bottom: 4px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.aud-age-rank__head-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
}
.aud-age-rank__head-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.aud-age-rank__row {
  display: grid;
  grid-template-columns: 80px 1fr 110px 110px 80px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
}
.aud-age-rank__row:last-child { border-bottom: 0; }
.aud-age-rank__age { color: var(--text); font-weight: 500; }
.aud-age-rank__cpl { color: var(--text-2); }
.aud-age-rank__leads {
  text-align: right;
  color: var(--text-3);
}
@media (max-width: 920px) {
  .aud-age-rank__row {
    grid-template-columns: 70px 1fr 80px;
  }
  .aud-age-rank__row > :nth-child(4),
  .aud-age-rank__row > :nth-child(5) { display: none; }
}

/* Fullscreen-expanded panel inside the modal */
.aud-expanded { padding: 4px 0 12px; }
.aud-expanded__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.aud-expanded__totals > div {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.aud-expanded__totals .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-bottom: 6px;
}
.aud-expanded__totals .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}
.aud-expanded__section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.aud-expanded__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.aud-expanded__head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* Audience segments intro block removed — explainer redundant after user
   understood the metric semantics. */

/* =========================================================================
   FUNNELS — new production design (prototype-aligned)
   - Stages table with grid columns (36/1fr/320/120/90/32)
   - Metrics strip (aov/revenue/profit/romi)
   - Funnel visual: horizontal bars decreasing width
   - Control: 'coming next iteration' placeholder
   - Sidebar list slot (.sidebar-funnels) sits under main nav,
     above the global footer in the left sidebar.
   ========================================================================= */

.fn-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-3);
  font-size: 13px;
  font-family: var(--font-mono);
}
.fn-meta b { color: var(--text); font-weight: 600; }
.fn-meta__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-4);
  display: inline-block;
}

/* Tab row */
.fn-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
  margin-bottom: 18px;
}
.fn-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.fn-tab i { font-size: 14px; }
.fn-tab:hover { color: var(--text-2); }
.fn-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.fn-pane { margin-top: 0; }
.fn-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.fn-add:hover { background: var(--surface-3); border-color: var(--line-3); color: var(--text); }
.fn-add i { font-size: 13px; }

/* Panels — only the active one is shown */
.fn-panel { display: none; }
.fn-panel.is-active { display: block; }

/* Stages table */
.fn-stages {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fn-row {
  display: grid;
  grid-template-columns: 36px 1fr 320px 120px 90px 32px;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.fn-row:last-child { border-bottom: 0; }
.fn-row--head {
  padding: 10px 18px;
  background: var(--w20);
}
.fn-row--head .fn-cell {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.fn-row--head .fn-cell--num { text-align: left; }
.fn-row--head .fn-cell--val,
.fn-row--head .fn-cell--cr { text-align: right; }
.fn-row--data {
  cursor: pointer;
  transition: background 120ms;
}
.fn-row--data:hover { background: var(--w20); }
.fn-row--data:hover .fn-row__more i { opacity: 1; }
.fn-row--add {
  grid-template-columns: 1fr;
  padding: 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.fn-row--add:hover { background: var(--surface); color: var(--text); }
.fn-row--add i { font-size: 14px; vertical-align: -2px; margin-right: 6px; }

/* Funnels stage rows on mobile — interim (this screen will be replaced by
   the task manager). Real row = num · name · val · trail; just tighten
   padding/columns so it fits a phone without overflow. */
@media (max-width: 767px) {
  .fn-row { grid-template-columns: 24px 1fr auto auto; gap: 10px; padding: 12px 12px; }
}

.fn-cell--num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.fn-cell--name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn-cell--source { display: flex; gap: 4px; flex-wrap: wrap; }
.fn-cell--val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.fn-cell--cr {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}
.fn-cell--cr.is-bad   { color: var(--bad); }
.fn-cell--cr.is-warn  { color: var(--warn); }
.fn-cell--cr.is-good  { color: var(--accent); }
.fn-cell--cr.is-empty { color: var(--text-4); }
/* Price (cost-per-X) variant of the CR cell. Different visual
   language than conversion rate — neutral text color so it doesn't
   read as good/bad, with a small monospace suffix for the metric
   label (CPC / CPM / CPL / CPR). */
.fn-cell--cr.is-price { color: var(--text); }
.fn-cell--cr-suffix {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-4);
  margin-left: 4px;
}
.fn-visual__cr.is-price { color: var(--text-2); }
.fn-visual__cr-suffix {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  margin-left: 4px;
}

.fn-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.4;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.fn-pill--accent {
  background: rgba(0,126,247, 0.10);
  border-color: rgba(0,126,247, 0.25);
  color: var(--accent);
}

.fn-row__more {
  display: grid; place-items: center;
  color: var(--text-3);
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 120ms;
}
.fn-row__more:hover { background: var(--surface-2); }
.fn-row__more i { font-size: 14px; opacity: 0; transition: opacity 120ms; }

/* Metrics strip */
.fn-metrics {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fn-metric {
  padding: 18px 20px 18px 4px;
  border-right: 1px solid var(--line);
}
.fn-metric:last-child { border-right: 0; }
.fn-metric__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.fn-metric__value {
  font-family: var(--font-display, var(--font-sans));
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1.05;
}
.fn-metric__value.is-good { color: var(--accent); }
.fn-metric__value.is-warn { color: var(--warn); }
.fn-metric__value.is-bad  { color: var(--bad); }

/* Visual */
.fn-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.fn-visual__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.fn-visual__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  margin: 0 auto;
  min-width: 240px;
  opacity: 0;
  transform: translateY(8px);
  animation: fnRowIn 280ms cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--step-i, 0) * 60ms);
}
@keyframes fnRowIn { to { opacity: 1; transform: translateY(0); } }
.fn-visual__name { font-size: 14px; font-weight: 500; color: var(--text); margin-right: 16px; }
.fn-visual__val  { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text); }
.fn-visual__cr {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 0;
}
.fn-visual__cr.is-bad  { color: var(--bad); }
.fn-visual__cr.is-warn { color: var(--warn); }
.fn-visual__cr.is-good { color: var(--accent); }

/* "Coming next" placeholder */
.fn-coming {
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fn-coming__icon {
  width: 60px; height: 60px;
  border-radius: 30px;
  background: var(--card, var(--surface-2));
  display: grid; place-items: center;
  color: var(--text);
}
.fn-coming__icon i { font-size: 26px; }
.fn-coming__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 16px 0 6px;
}
.fn-coming__sub {
  font-size: 13px;
  color: var(--text-3);
  max-width: 320px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.fn-coming__cta {
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.fn-coming__cta:hover:not(:disabled) { background: var(--surface-2); }

.fn-empty {
  padding: 32px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

/* Stage editor modal body */
.fn-editor { display: flex; flex-direction: column; gap: 14px; }
.fn-field { display: flex; flex-direction: column; gap: 5px; }
.fn-field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.fn-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color 120ms, box-shadow 120ms;
}
.fn-input:focus {
  outline: none;
  border-color: var(--accent-muted, rgba(0,126,247, 0.5));
  box-shadow: 0 0 0 3px rgba(0,126,247, 0.12);
}
.fn-source-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.fn-editor__actions {
  display: flex;
  align-items: center;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Modal action buttons (reused in editor) */
.btn-primary {
  padding: 9px 16px;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms;
}
.btn-primary:hover { opacity: 0.9; }
.btn-ghost {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-text-danger {
  padding: 9px 6px;
  background: transparent;
  border: 0;
  color: var(--bad);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 120ms;
}
.btn-text-danger:hover { opacity: 0.8; }

/* =========================================================================
   SIDEBAR FUNNELS slot — list of funnels under the main nav.
   Only populated when the user is on /funnels; cleared on navigation.
   ========================================================================= */
.sidebar-funnels {
  margin: 16px 8px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sidebar-funnels:empty { display: none; }
.sidebar-funnels__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.sidebar-funnels__add {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 120ms, color 120ms;
}
.sidebar-funnels__add:hover { background: var(--surface-2); color: var(--text); }
.sidebar-funnels__add i { font-size: 11px; }
/* Inline caption next to the 'Funnels' label that signals when
   non-Meta funnels (kommo, callgear) are being filtered out of
   the sidebar — they remain in the old liaison dashboard. */
.sidebar-funnels__head-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--text-4);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
  cursor: help;
}
.sidebar-funnels__empty {
  padding: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.sidebar-funnels__list {
  display: flex; flex-direction: column;
  gap: 1px;
}
/* Folder tree — groups funnels by created_at month. Collapsible.
   Indented body so funnels visually sit inside their folder. */
.sidebar-funnels__tree {
  display: flex; flex-direction: column;
  gap: 1px;
}
.sidebar-funnels__folder { display: flex; flex-direction: column; }
.sidebar-funnels__folder-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: var(--r-sm);
  transition: background 120ms, color 120ms;
}
.sidebar-funnels__folder-head:hover { background: var(--surface-2); color: var(--text-2); }
.sidebar-funnels__folder-caret {
  font-size: 10px;
  transition: transform 140ms ease;
  color: var(--text-4);
}
.sidebar-funnels__folder.is-open .sidebar-funnels__folder-caret {
  transform: rotate(90deg);
}
.sidebar-funnels__folder-name {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-funnels__folder-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--surface-2);
}
.sidebar-funnels__folder-body {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-left: 16px; /* indent funnels under the folder caret */
  margin-top: 1px;
}
.sidebar-funnels__folder.is-open .sidebar-funnels__folder-body {
  display: flex;
}
.sidebar-funnels__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 120ms, color 120ms;
}
.sidebar-funnels__item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-funnels__item.is-active {
  background: var(--surface-3);
  color: var(--text);
}
.sidebar-funnels__item.is-active i { color: var(--accent); }
.sidebar-funnels__item span {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1092px) {
  .sidebar-funnels { display: none; }
}

/* Stages table responsive — collapse source column on narrow screens */
@media (max-width: 920px) {
  .fn-row {
    grid-template-columns: 30px 1fr 90px 70px 28px;
    gap: 10px;
    padding: 10px 12px;
  }
  .fn-row .fn-cell--source { display: none; }
  .fn-row--head .fn-cell--source { display: none; }
  .fn-metric__value { font-size: 20px; }
}

/* =========================================================================
   CONNECT-META CARD — universal empty state for screens that need a
   Meta connection. Replaces the red error boxes that used to appear
   on every screen when Meta was disconnected. Friendly + actionable.
   ========================================================================= */
.connect-meta-card {
  margin: 24px 0 32px;
  padding: 56px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.connect-meta-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 18px;
}
.connect-meta-card__icon i { font-size: 24px; }
.connect-meta-card__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text);
  margin: 0 0 8px;
}
.connect-meta-card__sub {
  font-size: 13px;
  color: var(--text-2);
  max-width: 420px;
  margin: 0 0 22px;
  line-height: 1.55;
}
.connect-meta-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.connect-meta-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-md);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms, transform 120ms;
}
.connect-meta-card__cta:hover { opacity: 0.92; }
.connect-meta-card__cta:active { transform: translateY(1px); }
.connect-meta-card__hint {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  max-width: 360px;
  line-height: 1.5;
}

/* Facebook brand button — used in Settings 'not signed in' state for
   one-click Memberstack OAuth via FB. Same color as the sign-in/up
   pages so the visual language is consistent across surfaces. */
.btn.fb-btn {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
  font-weight: 600;
}
.btn.fb-btn:hover { background: #1462c8; border-color: #1462c8; color: #fff; }
.btn.fb-btn:disabled, .btn.fb-btn.is-loading { opacity: 0.75; cursor: wait; }

/* =========================================================================
   FUNNELS — simplified Meta-only screen
   ========================================================================= */
.fn-funnel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.fn-funnel-name {
  font-family: var(--font-display, var(--font-sans));
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}
.fn-funnel-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}
.fn-funnel-actions { display: flex; gap: 8px; }
.fn-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--bad);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Trailing cell — CR or cost-per. Same column, different look. */
.fn-cell--trail {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.fn-trail { display: inline-flex; align-items: baseline; gap: 4px; }
.fn-trail--empty { color: var(--text-4); }
.fn-trail--cr.is-good { color: var(--accent); }
.fn-trail--cr.is-warn { color: var(--warn); }
.fn-trail--cr.is-bad  { color: var(--bad); }
.fn-trail--price { color: var(--text); }
.fn-trail__suffix {
  font-size: 9px;
  color: var(--text-4);
  font-weight: 500;
}

/* Constructor — pickable metric pills + picked stages list. */
.fn-builder { display: flex; flex-direction: column; gap: 18px; }

/* Two-up row: month picker on the left, locked account on the right. */
.fn-builder__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.fn-builder__field-grow { flex: 1; min-width: 200px; }
.fn-builder__locked-value {
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.3;
  min-width: 160px;
  display: flex;
  align-items: center;
}
.fn-builder__hint {
  margin-top: -8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.5;
}

/* Action row pinned to the bottom of the modal body via sticky
   positioning. The modal__body has padding:22px and overflow-y:auto,
   so we offset margins by -22px to span the full body width and
   the bottom is flush with the body's scroll edge. The background
   matches the modal surface so scrolled content slides UNDER the
   actions instead of leaking through. */
.fn-builder__actions {
  position: sticky;
  bottom: -22px; /* cancel modal__body padding-bottom */
  margin: 14px -22px -22px;
  padding: 14px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 2;
}
.fn-builder__actions .btn {
  min-width: 130px;
  justify-content: center;
}

.fn-builder__meta {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.fn-builder__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}
.fn-builder__meta-label { color: var(--text-3); }
.fn-builder__meta-value { color: var(--text); font-weight: 500; }
.fn-builder__meta-hint {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.5;
}

/* The metrics CURRENTLY in the funnel — orderable list. */
.fn-picked {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fn-picked__empty {
  padding: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.fn-picked__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 120ms, background 120ms;
}
.fn-picked__row:hover { border-color: var(--line-2); }
.fn-picked__handle {
  color: var(--text-4);
  font-size: 14px;
  cursor: grab;
}
.fn-picked__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  width: 18px;
  text-align: center;
}
.fn-picked__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.fn-picked__actions { display: flex; gap: 2px; }
.fn-picked__btn {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.fn-picked__btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
.fn-picked__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fn-picked__btn--danger:hover:not(:disabled) {
  color: var(--bad);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Available metric pills — click to add to funnel. */
.fn-available {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fn-available__empty {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.fn-available__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.fn-available__pill:hover {
  background: var(--surface-3);
  border-color: var(--accent-line, var(--line-2));
  color: var(--text);
}
.fn-available__pill i { font-size: 14px; }

/* =========================================================================
   FUNNELS — stair-step visual
   ========================================================================= */
/* Container under the stages table. The spend bar sits as a small header
   above the staircase since spend (currency) doesn't share a scale with
   count metrics. */
.fn-funnel-vis {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Spend header — narrow chip showing total spend so it's visible but
   doesn't pretend to be part of the staircase. */
.fn-stair--head {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.fn-stair--head .fn-stair__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.05em;
}
.fn-stair--head .fn-stair__value {
  font-family: var(--font-display, var(--font-sans));
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Staircase track — left-aligned, each step narrower than the previous. */
.fn-stair-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.fn-stair--step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 18%, var(--surface-2)) 0%,
    var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 180px;
  transition: width 200ms ease, background 150ms;
}
.fn-stair--step:first-child {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 28%, var(--surface-2)) 0%,
    var(--surface-2) 100%);
}
.fn-stair--step .fn-stair__label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.fn-stair--step .fn-stair__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Constructor — inline period chip at top */
.fn-builder__topline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fn-input--inline {
  width: auto;
  min-width: 160px;
}

/* =========================================================================
   FUNNELS — clickable stages, stage breakdown modal, folder rename
   ========================================================================= */
/* Stages and stair-step bars become clickable affordances. */
.fn-row--click { cursor: pointer; transition: background 100ms; }
.fn-row--click:hover { background: var(--w25); }

.fn-stair {
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 150ms, transform 100ms, border-color 150ms;
  text-align: left;
  font-family: inherit;
}
.fn-stair:hover {
  border-color: var(--line-2);
  transform: translateX(2px);
}
.fn-stair--head { padding: 8px 14px; }

/* Stage breakdown modal — compact data table. */
.stage-mod__loading { padding: 4px; }
.stage-mod__empty {
  padding: 28px;
  text-align: center;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 11px;
}
.stage-mod__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 12px;
}
.stage-mod__table thead th {
  text-align: left;
  padding: 9px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.stage-mod__table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}
.stage-mod__table tbody tr:hover td { background: var(--w20); }
.stage-mod__table th.is-highlight,
.stage-mod__table td.is-highlight {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}
.stage-mod__total td {
  background: var(--surface-2) !important;
  font-weight: 600;
  border-top: 2px solid var(--line-2);
}
.stage-mod__hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}

/* Folder name — make rename affordance visible on hover */
.sidebar-funnels__folder-name {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background 100ms, color 100ms;
}
.sidebar-funnels__folder-name:hover {
  background: var(--w40);
  color: var(--text);
}
.sidebar-funnels__folder-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  margin-left: 4px;
  opacity: 0.8;
}

/* Constructor intro hint */
.fn-builder__intro {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  margin-bottom: 4px;
}

/* ───────── TOP STRIP: search + notifications ───────── */
.aside__top { display: flex; gap: 8px; align-items: center; padding: 0 2px; margin-bottom: 8px; }
.aside-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--text-3); font-family: var(--font-sans); transition: border-color 120ms, color 120ms;
}
.aside-search:hover { border-color: var(--line-3); color: var(--text-2); }
.aside-search i { font-size: 16px; flex: 0 0 16px; }
.aside-search__label { flex: 1; font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside-search__kbd { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }
.aside-bell {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--text-3); transition: border-color 120ms, color 120ms;
}
.aside-bell:hover { border-color: var(--line-3); color: var(--text); }
.aside-bell i { font-size: 17px; }
.aside-bell__dot {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--accent, #007EF7); color: var(--on-accent); font-size: 9px; font-weight: 600;
  border: 2px solid var(--ink-2); font-family: var(--font-sans);
}
.is-collapsed .aside__top { flex-direction: column; gap: 6px; padding: 0 0 12px; }
.is-collapsed .aside-search__label, .is-collapsed .aside-search__kbd { display: none; }
.is-collapsed .aside-search { justify-content: center; padding: 0; width: 40px; height: 36px; flex: none; }
.is-collapsed .aside-bell { width: 40px; height: 36px; }

/* ───────── COMMAND PALETTE (⌘K) ───────── */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.cmdk {
  width: 560px; max-width: 92vw; background: var(--ink-2, #181817);
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cmdk__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk__bar i { font-size: 18px; color: var(--text-3); }
.cmdk__bar input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--font-sans); }
.cmdk__bar input::placeholder { color: var(--text-4); }
.cmdk__esc { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; }
.cmdk__results { max-height: 56vh; overflow-y: auto; padding: 6px 0; }
.cmdk__group { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-4); padding: 10px 16px 4px; }
.cmdk__row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 16px; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-2); }
.cmdk__row:hover { background: var(--surface-2); color: var(--text); }
.cmdk__row i { font-size: 17px; color: var(--text-3); flex: 0 0 17px; }
.cmdk__row:hover i { color: var(--text-2); }
.cmdk__p { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__s { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-4); flex: 0 0 auto; padding-left: 12px; }
.cmdk__empty { padding: 28px 16px; text-align: center; color: var(--text-4); font-size: 13px; }

/* ───────── NOTIFICATIONS PANEL ───────── */
.notif-pop {
  position: fixed; z-index: 9000; width: 480px; max-width: 94vw;
  background: var(--ink-2, #181817); border: 1px solid var(--line-2); border-radius: 14px;
  overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.notif-pop__hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; }
.notif-pop__hd b { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-pop__read { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 11px; font-family: var(--font-sans); }
.notif-pop__read:hover { text-decoration: underline; }
.notif-pop__tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.notif-pop__tab { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text-3); padding: 5px 11px; border-radius: 8px; font-family: var(--font-sans); }
.notif-pop__tab.is-on { background: var(--surface-2); color: var(--text); }
.notif-pop__tab span { color: var(--text-4); margin-left: 4px; font-size: 11px; }
.notif-pop__list { max-height: 60vh; overflow-y: auto; }
.notif-pop__n { position: relative; display: flex; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; cursor: pointer; font-family: var(--font-sans); }
.notif-pop__n:hover { background: var(--surface-2); }
.notif-pop__n.is-unread { background: var(--w18); }
.notif-pop__n.is-unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.notif-pop__ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; }
.notif-pop__ic i { font-size: 15px; }
.notif-pop__bd { flex: 1; min-width: 0; }
.notif-pop__t { font-size: 12.5px; line-height: 1.35; color: var(--text); }
.notif-pop__sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.notif-pop__act { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--accent); border: 1px solid var(--accent-line, rgba(0,126,247,.25)); border-radius: 7px; padding: 3px 9px; cursor: pointer; }
.notif-pop__act:hover { background: var(--accent-soft); }
.notif-pop__caught { padding: 32px 16px; text-align: center; color: var(--text-4); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; }
.notif-pop__caught i { font-size: 22px; }

.notif-pop__cols{ display:flex; }
.notif-pop__col{ flex:1; min-width:0; border-right:1px solid var(--line); }
.notif-pop__col:last-child{ border-right:none; }
.notif-pop__coltitle{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--text-4); padding:9px 12px 6px; }
.notif-pop__coltitle span{ color:var(--text-3); margin-left:3px; }
.notif-pop__none{ padding:26px 12px; text-align:center; color:var(--text-4); font-size:11.5px; }
.notif-pop__n .notif-pop__t{ font-size:12px; }
@media (max-width:560px){ .notif-pop__cols{ flex-direction:column; } .notif-pop__col{ border-right:none; border-bottom:1px solid var(--line); } }

/* ── Skeletons (loading states, no flash on refresh) ───────────────── */
.lia-skel{ display:inline-block; border-radius:6px; vertical-align:middle;
  background:linear-gradient(90deg, var(--w50) 25%, var(--w120) 37%, var(--w50) 63%);
  background-size:400% 100%; animation:lia-sk 1.4s ease infinite; }
@keyframes lia-sk{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.lia-skel--name{ width:96px; height:13px; }
.lia-skel--plan{ width:58px; height:10px; margin-top:5px; }
.lia-skel--acct{ width:124px; height:12px; }
.notif-skel{ display:flex; align-items:center; gap:10px; padding:10px 12px; }
.lia-skel--nic{ width:30px; height:30px; border-radius:8px; flex-shrink:0; }
.notif-skel__b{ flex:1; display:flex; flex-direction:column; gap:6px; }
.lia-skel--l1{ width:70%; height:11px; } .lia-skel--l2{ width:45%; height:9px; }

/* ── Account chip on notifications (which ad account) ──────────────── */
.notif-chip{ display:inline-block; padding:0 7px; border-radius:999px;
  font-family:var(--font-mono); font-size:9px; line-height:16px; font-weight:500; letter-spacing:.2px;
  color:var(--text-3, var(--w600)); background:var(--w60);
  border:1px solid var(--line); white-space:nowrap; }
.notif-pop__tags{ margin-top:4px; }

/* ── Account-only topbar on notification reports ───────────────────── */
.topbar--account-only .sync-btn,
.topbar--account-only #date-btn,
.topbar--account-only .compare-toggle{ display:none !important; }


/* ── Bell badge: loading skeleton (no '0' flash) + proper hide ─────── */
.aside-bell__dot[hidden]{ display:none !important; }
.aside-bell__dot.is-loading{ min-width:9px; width:9px; height:9px; padding:0; border-radius:50%;
  background:var(--w280); animation:lia-pulse 1.1s ease-in-out infinite; }
@keyframes lia-pulse{ 0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:.9; transform:scale(1)} }

/* ── Bell panel header: 'See all' link ────────────────────────────── */
.notif-pop__hdacts{ display:flex; align-items:center; gap:14px; }
.notif-pop__seeall{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); cursor:pointer; text-decoration:none; }
.notif-pop__seeall:hover{ color:var(--text); }


/* ── Cursor-style tooltips (.lia-tip) — body-level, never clipped ─────────
   r143: repainted onto the PLATFORM tooltip standard (--tip-*), same look as
   [data-ftip] / .ai-float-tip from r112. Vars declared globally here because
   ai.js (their previous home) only loads on ws-ai routes. */
:root{ --tip-bg:#383835; --tip-tx:#fff; --tip-line:transparent; }
:root[data-theme="light"]{ --tip-bg:#ffffff; --tip-tx:#3d3d3a; --tip-line:var(--line-2,#e2e2e1); }
.lia-tip{ position:fixed; z-index:9999; display:none; align-items:center; gap:7px;
  padding:5px 9px; background:var(--tip-bg); border:1px solid var(--tip-line);
  border-radius:7px; font-family:var(--font-sans); font-size:11px; font-weight:600;
  color:var(--tip-tx); box-shadow:0 5px 16px -8px rgba(0,0,0,.28); pointer-events:none;
  opacity:0; transform:translateY(2px); transition:opacity .12s ease, transform .12s ease; white-space:nowrap; }
.lia-tip.is-show{ opacity:1; transform:translateY(0); }
/* r786: a tooltip carrying a SENTENCE has to wrap. The Placements editor
   explains what Advantage+ does and why Recommended is not always right, and
   nowrap turned a paragraph into a 2000px strip that the viewport clamp then
   cut. Opt-in, by length (shell.js toggles is-wide above 60 characters), so
   every short label keeps its single-line shape.
   r785 wrote this rule into _assets/shell.css, which NO page loads - the seven
   index.html files load _assets/shell.build2.css. The class was toggled, no
   rule matched it, and the strip survived the fix. A file that is not loaded
   is a trap: check which one the page asks for before editing either. */
.lia-tip.is-wide{ white-space:normal; max-width:min(320px,72vw); align-items:flex-start;
  line-height:1.45; font-weight:500; padding:7px 10px; }
.lia-tip__t{ color:var(--tip-tx); }
.lia-tip__kbd{ display:inline-flex; gap:3px; }
.lia-tip__kbd kbd{ font-family:var(--font-mono); font-size:10px; line-height:1; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:5px; padding:3px 5px; }

.notif-pop__time{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-4); margin-top:4px; }

  /* ───────── icon hover animation (Claude-style) ───────── */
  i.ph, i.ph-fill { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  button:hover > i.ph, a:hover > i.ph, label:hover > i.ph, [role="button"]:hover > i.ph,
  button:hover i.ph, a:hover i.ph,
  .setx-nav__item:hover i.ph, .profile:hover i.ph, .profile-menu__item:hover i.ph,
  .ntf-card:hover .ntf-ic i, .aside__collapse:hover i.ph { transform: scale(1.14); }

  /* sidebar nav — outline → fill morph */
  .nav__item .nav__ic { position: relative; width: 16px; height: 16px; flex: 0 0 16px; display: block; }
  .nav__item .nav__ic i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; color: var(--text-3);
    transition: color 120ms, opacity .2s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
  .nav__item .nav__ic .ph-fill { opacity: 0; transform: scale(.55) rotate(-6deg); }
  .nav__item:hover .nav__ic .ph { opacity: 0; transform: scale(.5) rotate(-8deg); }
  .nav__item:hover .nav__ic .ph-fill { opacity: 1; transform: scale(1) rotate(0); color: var(--text); }
  .nav__item.is-active .nav__ic .ph { opacity: 0; transform: scale(.5); }
  .nav__item.is-active .nav__ic .ph-fill { opacity: 1; transform: scale(1) rotate(0); color: var(--on-accent, #fff); }
  .nav__item.is-active:hover .nav__ic .ph-fill { color: var(--on-accent, #fff); }
  .nav__item .nav__ic svg.nav__svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: var(--text-3);
    transition: color 120ms, opacity .2s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
  .nav__item .nav__ic .nav__svg--fill { opacity: 0; transform: scale(.55) rotate(-6deg); }
  .nav__item:hover .nav__ic .nav__svg { opacity: 0; transform: scale(.5) rotate(-8deg); }
  .nav__item:hover .nav__ic .nav__svg--fill { opacity: 1; transform: scale(1) rotate(0); color: var(--text); }
  .nav__item.is-active .nav__ic .nav__svg { opacity: 0; transform: scale(.5); }
  .nav__item.is-active .nav__ic .nav__svg--fill { opacity: 1; transform: scale(1) rotate(0); color: var(--on-accent, #fff); }

/* MyStar-style floating sidebar panel (desktop, expanded only) */
@media (min-width: 1093px) {
  .app:not(.is-collapsed) .aside {
    margin: 12px;
    height: calc(100vh - 24px);
    top: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-card, none);
    padding: 14px 13px 12px;
  }
}
.aside__foot { margin-top: auto; }

/* Maps "Filters" topbar control — duplicated from the maps screen so the
   boot-time stub button (rendered before screens/maps.js loads) is fully
   styled and never pops in. The maps screen re-injects identical rules. */
.map-tbf{position:relative;display:inline-flex;align-items:center;gap:8px;}
.map-flt-btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-xl,16px);}
.map-flt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font:700 10px var(--font-mono);}
.map-flt-pop{position:absolute;top:calc(100% + 8px);left:0;display:none;flex-direction:column;align-items:stretch;min-width:230px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:10px;gap:8px;z-index:300;box-shadow:0 16px 40px rgba(0,0,0,.4);}
.map-flt-pop.is-open{display:flex;}

/* ── Sentence-case for labels & panel/section headings (cosmetics pass):
   data stays lowercase in code; the first letter capitalizes in CSS.
   Abbreviation labels (CPL/CTR/...) are upper-cased in data instead. ── */
.panel__title, .kpi__label, .kpi__sub, .lbl, .l, .tk-f > span,
.m-meta > div > span,
.m-sec__head span, .ntf-sectitle, .table-wrap th, .stx-card__count,
.filterbar label, .setx-label, .crumbs, .crumbs__last {
  display: inline-block;
}
.panel__title::first-letter, .kpi__label::first-letter, .kpi__sub::first-letter,
.lbl::first-letter, .l::first-letter, .tk-f > span::first-letter,
.creative-row__stat .lbl::first-letter, .creative-card__stat .lbl::first-letter,
.m-meta > div > span::first-letter, .m-sec__head span::first-letter,
.ntf-sectitle::first-letter, .table-wrap th::first-letter,
.stx-card__count::first-letter, .filterbar label::first-letter,
.setx-label::first-letter, .crumbs::first-letter, .crumbs__last::first-letter {
  text-transform: uppercase;
}

/* ── Audience Region mini-map + expand modal ── */
.audmap-wrap { position: relative; cursor: pointer; }
#audmap-mini { height: 300px; background: var(--surface-2); }
#audmap-mini .maplibregl-canvas { cursor: pointer; }
.audmap-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; }
.audmap-load i { font-size: 22px; color: var(--text-3); }
.audmap-pin { position: relative; width: 16px; height: 16px; border-radius: 6px; background: var(--accent, #007EF7); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
/* generous hit zone (iOS-keyboard style): invisible 36px target around the pin */
.audmap-pin::after { content: ""; position: absolute; inset: -12px; }
.audmap-pin:hover { transform: scale(1.15); transition: transform .12s; }
.audmap-pin--mini { width: 11px; height: 11px; border-radius: 4px; border-width: 1.5px; }
.audmap-pin--mini::after { inset: -6px; }
/* themed MapLibre popup for the audience map (default is white-on-white in dark) */
.audmap-pop .maplibregl-popup-content { background: var(--ink-2, #fff); color: var(--text, #111); border: 1px solid var(--line-2); border-radius: var(--r-lg, 10px); box-shadow: 0 8px 28px rgba(0,0,0,.30); font: 500 12px var(--font-sans); padding: 9px 12px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.audmap-pop .maplibregl-popup-tip { border-top-color: var(--ink-2, #fff); border-bottom-color: var(--ink-2, #fff); }
.audmap-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(8,12,20,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.audmap-modal__box { width: min(1100px, 94vw); height: min(78vh, 760px); background: var(--canvas-bg, var(--ink, #0d0d0f)); border-radius: 16px; overflow: hidden; position: relative; border: 1px solid var(--line-2); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.audmap-modal__map { position: absolute; inset: 0; }
.audmap-modal__bar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 5; pointer-events: none; }
.audmap-btn { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; background: var(--ink-2, #fff); border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--text-2); font: 600 12px var(--font-sans); padding: 8px 14px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.audmap-btn:hover { border-color: var(--accent); color: var(--accent); }
.audmap-btn--x { padding: 8px 10px; }

.audmap-spin { width: 30px; height: 30px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: lia-spin-kf .8s linear infinite; }

/* ── .map-mode switch, GLOBAL copy: the source rules live inside maps.js's
   screen CSS and exist only on the /maps route; the audience map modal uses
   the same control anywhere. Keep in sync with maps.js. ── */
.map-mode{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-xl,16px);background:var(--ink-2,#fff);border:0.5px solid var(--line-2);}
.map-mode__b{appearance:none;border:none;background:transparent;cursor:pointer;font:500 12.5px var(--font-sans);color:var(--text-3);padding:6px 13px;border-radius:13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background-color .15s,color .15s;}
.map-mode__b:hover{color:var(--text);}
.map-mode__b.is-on{background:var(--accent);color:#fff;}
.map-mode__dot{width:7px;height:7px;border-radius:50%;background:#C2C7CE;transition:background .15s;}
.map-mode__dot.is-live{background:#007EF7;animation:mapLiveDotB 1.6s infinite;}
@keyframes mapLiveDotB{0%{box-shadow:0 0 0 0 rgba(0,126,247,.5)}70%{box-shadow:0 0 0 5px rgba(0,126,247,0)}100%{box-shadow:0 0 0 0 rgba(0,126,247,0)}}
.map-mode__b.is-on .map-mode__dot.is-live{background:#fff;animation:mapLiveDot 1.6s infinite;}
@keyframes mapLiveDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 5px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* creative markers sized to their real format (onload measures the ratio) */
.audmap-cpin { position: relative; width: 40px; height: 64px; border-radius: 10px; border: 2px solid #fff; background: var(--surface-3, #e6e8ec); box-shadow: 0 3px 12px rgba(0,0,0,.35); cursor: pointer; }
.audmap-cpin.is-land { width: 64px; height: 40px; }
.audmap-cpin.is-sq { width: 46px; height: 46px; }
.audmap-cpin img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.audmap-cpin.is-noimg { background: var(--accent, #007EF7); width: 16px; height: 16px; border-radius: 6px; }
.audmap-cpin:hover { transform: scale(1.08); transition: transform .12s; }
.audmap-cpin--mini { width: 24px; height: 38px; border-radius: 7px; border-width: 1.5px; }
.audmap-cpin--mini.is-land { width: 38px; height: 24px; }
.audmap-cpin--mini.is-sq { width: 28px; height: 28px; }

.audmap-cpin--own { border-color: var(--accent, #007EF7); }
.audmap-cpin__more { position: absolute; top: -7px; right: -7px; background: var(--accent, #007EF7); color: #fff; font: 600 10px/1 var(--font-sans); padding: 3px 6px; border-radius: 999px; border: 1.5px solid #fff; pointer-events: none; }

.audmap-info[hidden] { display: none !important; }
.audmap-info { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--ink-2, #fff); border: 0.5px solid var(--line-2); color: var(--text-3); font-size: 14px; cursor: default; }
.audmap-info:hover { color: var(--accent, #007EF7); }

/* ── Workspace (CRM) sidebar mode ── */
.aside-ws { position: relative; flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text-3); transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.aside-ws i { font-size: 16px; }
.aside-ws:hover { border-color: var(--line-3); color: var(--text); }
.aside-ws__beta { position: absolute; top: -6px; right: -7px; padding: 1px 5px; border-radius: 8px; background: var(--accent, #007EF7); color: #fff; font: 600 7.5px/1.4 var(--font-sans); letter-spacing: .03em; border: 2px solid var(--ink-2, #fff); }
.is-collapsed .aside-ws { width: 40px; height: 36px; }
[data-theme="light"] body.ws-crm .aside-ws { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.nav__beta { display: inline-block; margin-left: 6px; font: 600 9px/1 var(--font-mono); letter-spacing: .05em; color: var(--accent); background: rgba(0,126,247,.12); border: 1px solid rgba(0,126,247,.25); padding: 2px 5px; border-radius: 999px; vertical-align: middle; }
.aside, .nav__item, .nav__title, .aside-search, .aside-bell { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.nav { transition: opacity .18s ease; }
[data-theme="light"] body.ws-crm .aside { background: var(--accent, #007EF7); border-color: rgba(255,255,255,.14); }
[data-theme="light"] body.ws-crm .aside .nav__title { color: rgba(255,255,255,.65); }
[data-theme="light"] body.ws-crm .aside .nav__item { color: rgba(255,255,255,.85); }
[data-theme="light"] body.ws-crm .aside .nav__item:hover { background: rgba(255,255,255,.12); color: #fff; }
[data-theme="light"] body.ws-crm .aside .nav__item.is-active { background: #fff; color: var(--accent, #007EF7); }
[data-theme="light"] body.ws-crm .aside .nav__item.is-active .nav__beta { color: var(--accent, #007EF7); background: rgba(0,126,247,.10); border-color: rgba(0,126,247,.3); }
[data-theme="light"] body.ws-crm .aside .aside-search, body.ws-crm .aside .aside-bell { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
[data-theme="light"] body.ws-crm .aside .nav__beta { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
/* compact search */
.aside-search { padding: 6px 9px; }
.aside-search__label { font-size: 11px; }

/* ── Marketplace (Beta) mockup ── */
.mkt { max-width: 860px; margin: 0 auto; padding: 34px 22px 60px; }
.mkt__hero { padding: 26px 0 8px; }
.mkt__badge { display: inline-block; font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: rgba(0,126,247,.10); border: 1px solid rgba(0,126,247,.25); padding: 4px 9px; border-radius: 999px; margin-bottom: 14px; }
.mkt__lead { margin: 10px 0 0; max-width: 620px; color: var(--text-2); font: 500 14px/1.65 var(--font-sans); }
.mkt__pickTitle { margin: 34px 0 12px; font: 600 12px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.mkt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mkt__card { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2, #fff); cursor: pointer; font: 600 13px var(--font-sans); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; text-align: left; }
.mkt__card:hover { border-color: var(--accent); }
.mkt__card.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(0,126,247,.06); }
.mkt__live { font: 600 9px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent, #007EF7); background: rgba(0,126,247,.10); border: 1px solid rgba(0,126,247,.3); padding: 3px 6px; border-radius: 999px; }
.mkt__customWrap { margin-top: 12px; max-width: 380px; }
.mkt__apply { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.mkt__btn { background: var(--accent); color: #fff; border: 0; padding: 11px 20px; border-radius: 10px; font: 600 13px var(--font-sans); cursor: pointer; }
.mkt__btn:disabled { opacity: .45; cursor: default; }
.mkt__note { font: 500 12px var(--font-mono); color: var(--text-3); }

/* the white logo is the provided SVG file, swapped in whole (letters are
   hardcoded #007EF7 in the inline svg — recolouring was fighting it) */
.aside__brand-white { display: none; height: 24px; width: auto; pointer-events: none; }
[data-theme="light"] body.ws-crm .aside .aside__brand-svg { display: none; }
[data-theme="light"] body.ws-crm .aside .aside__brand-white { display: block; }
/* Dark theme: the full-white wordmark (white smile included) replaces the
   currentColor svg, same 24px box (Egor 2026-07-04). */
:root[data-theme="dark"] .aside .aside__brand-svg { display: none; }
:root[data-theme="dark"] .aside .aside__brand-white { display: block; }
[data-theme="light"] body.ws-crm .aside .profile__name { color: #fff; }
[data-theme="light"] body.ws-crm .aside .profile__plan { color: rgba(255,255,255,.72); }
[data-theme="light"] body.ws-crm .aside .aside__collapse { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); background: transparent; }
[data-theme="light"] body.ws-crm .aside .aside__collapse:hover { color: #fff; background: rgba(255,255,255,.12); }
[data-theme="light"] body.ws-crm .aside .profile { border-color: rgba(255,255,255,.18); }
[data-theme="light"] body.ws-crm .aside .profile__chev { color: rgba(255,255,255,.85); }
[data-theme="light"] body.ws-crm .aside .avatar { background: #fff; color: var(--accent, #007EF7); }

/* dark theme: the workspace sidebar IS the regular dark sidebar — the only
   marker is the 3px accent edge (Egor's pick after the v1-v5 mockups); the
   active item keeps the standard blue fill */
[data-theme="dark"] body.ws-crm .aside { box-shadow: inset 3px 0 0 var(--accent, #007EF7); }

[data-theme="light"] body.ws-crm .aside .nav__item .nav__ic i,
[data-theme="light"] body.ws-crm .aside .nav__item .nav__svg { color: #fff; }
[data-theme="light"] body.ws-crm .aside .nav__item.is-active .nav__ic i,
[data-theme="light"] body.ws-crm .aside .nav__item.is-active .nav__svg { color: var(--accent, #007EF7); }
/* badges (the notification counter and the 'new' pill) invert on the blue
   sidebar: white fill, blue text — the buttons themselves keep the
   translucent-white look */
[data-theme="light"] body.ws-crm .aside .aside-bell__dot { background: #fff; color: var(--accent, #007EF7); border-color: #fff; }
[data-theme="light"] body.ws-crm .aside .aside-ws__beta { background: #fff; color: var(--accent, #007EF7); border-color: #fff; }

/* ── Unified close buttons (Egor, 2026-07-04): the audience panel__expand
   language everywhere a popup closes — no plate, brand blue; hover grows a
   translucent blue plate and scales the glyph slightly. !important because
   most of these carry local styles injected LATER by their screens. ── */
.modal__close, .lia-sheet__x, .cmp-deep__close, .cmp-thread__x, .readout__close,
.sxd-modal__x, .setx-modal__x, .audmap-btn--x, .gmodal__x, .lia-lightbox__close,
.aisx-lb__close, .m-dayov__close, .stx-drill__close, .stx-zoom__x {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent, #007EF7) !important;
  border-radius: 8px !important;
  min-width: 26px !important; min-height: 26px !important; padding: 0 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease !important;
}
.modal__close:hover, .lia-sheet__x:hover, .cmp-deep__close:hover, .cmp-thread__x:hover, .readout__close:hover,
.sxd-modal__x:hover, .setx-modal__x:hover, .audmap-btn--x:hover, .gmodal__x:hover, .lia-lightbox__close:hover,
.aisx-lb__close:hover, .m-dayov__close:hover, .stx-drill__close:hover, .stx-zoom__x:hover {
  background: rgba(0,126,247,.12) !important;
  color: var(--accent, #007EF7) !important;
  transform: scale(1.1);
}

/* ── Lia AI workspace: base styles so the boot skeleton (rendered by shell.js
   before ai.js loads) is correct, and collapse behaves. Full component styles
   are injected by ai.js; these are the shared primitives + collapse rules. ── */
body.ws-ai .aside__brand, body.ws-ai .aside__top { display: none !important; }
body.ws-ai .nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
body.ws-ai .ainav__recent { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
body.ws-ai .ainav__back { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 6px 8px; border-radius: 9px; border: 0; background: none; cursor: pointer; text-align: left; }
body.ws-ai .ainav__brand { display: flex; align-items: center; gap: 10px; padding: 10px 8px 16px; }
body.ws-ai .ainav__brand b { font-family:var(--font-sans); font-size: 16px; font-weight: 800; letter-spacing: -.02em; display: block; }
body.ws-ai .ainav__brand span { font-size: 10px; font-weight: 700; color: var(--text-3); display: block; margin-top: 1px; }
body.ws-ai .ainav__orb { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--accent, #007EF7), #4ea3ff); position: relative; flex: 0 0 26px; display: inline-block; }
body.ws-ai .ainav__new { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent, #007EF7); color: #fff; font-size: 12.5px; font-weight: 800; border-radius: 11px; padding: 10px; margin: 0 4px 14px; border: 0; }
body.ws-ai .ainav__item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 9px 10px; border-radius: 10px; border: 0; background: none; text-align: left; width: 100%; }
body.ws-ai .ainav__item i { font-size: 14px; opacity: .85; }
body.ws-ai .ainav__label { font:600 10px/1 var(--font-sans); color: var(--text-3); padding: 12px 10px 6px; }
body.ws-ai .ainav__label--gap { margin-top: 12px; }

/* collapsed AI sidebar: icon-only, nothing overflows */
.is-collapsed.ws-ai:not(.is-peek) .ainav__back { justify-content: center; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__back span, .is-collapsed body.ws-ai .ainav__back { font-size: 0; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__brand { justify-content: center; padding: 6px 0 14px; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__brand div { display: none; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__new { padding: 10px 0; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__new i { font-size: 16px; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__new span, .is-collapsed.ws-ai:not(.is-peek) .ainav__new { font-size: 0; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__item { justify-content: center; padding: 9px 0; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__item i { font-size: 16px; }
.is-collapsed.ws-ai:not(.is-peek) .ainav__item .n, .is-collapsed.ws-ai:not(.is-peek) .ainav__label,
.is-collapsed.ws-ai:not(.is-peek) .ainav__recent, .is-collapsed.ws-ai:not(.is-peek) .ainav__recent-skel,
.is-collapsed.ws-ai:not(.is-peek) .ainav__brand span { display: none; }

/* ── r803 (Egor): the active row wears a marker, not a fill ──────────────────
   "Аналитика с улыбкой": the selected item in Lia's sidebar is no longer a
   --nav-sel slab. A hand-drawn blue stroke covers the whole row, drawn left to
   right when the row is chosen and wiped right to left when it is left. The
   text brightens as it always did (r803b) - the stroke replaces the slab, not
   the feeling of being selected.

   OWNER. This block is the ONLY paint for .ainav__item.is-active and
   .ainav__chatrow.on. The three former owners (ai/index.html frame-zero
   block, ai.js injectCSS twice - once with !important) were emptied in the
   same revision and point here; a unit fails if --nav-sel returns to any of
   them. Frame zero already has this file: shell.build2.css is a render-
   blocking <link> above the critical block, so the first paint matches.

   MECHANICS. The stroke is a ::before under the row's children (all lifted to
   z-index 1, no negative z-index anywhere - a negative one inside an isolated
   context did not survive every engine). It is fully painted and a clip-path
   reveals it, by a KEYFRAME animation and not a transition (r803c): paintNav
   rebuilds nav.innerHTML on every view change, so a nav button is BORN with
   .is-active and a transition never fires on a newborn node - the nav items
   snapped while the chat rows, which are toggled in place, drew. A keyframe
   plays on a fresh node and on a toggled one alike. And there is no wipe-back
   on leaving, by decision: the old row simply lets go. r804: the keyframe is
   gated by html[data-mk-arm], which shell.js raises on pointerdown - so a
   reload or a background repaint never replays the hand, and the same block
   now covers the App Tools rail, the Settings nav and the Relay folder tabs.

   PATTERNS. The five strokes are _assets/markers/marker-1..5.svg. Each file
   holds TWO paths - the stroke and a lighter second pass - and r807 draws them
   as two layers: ::before is path 1, drawn left to right in the first half of
   the time; ::after is path 2, drawn right to left in the second half, the
   hand coming back over the line. The layers are cut from the files at build
   (the unit reassembles them and compares against the file). Alpha .62 on the
   dark theme, .42 on the light - Egor's numbers, chosen on the mockup; the .30
   whole-file image survives only as the hover mask. One pattern per item,
   fixed; chat rows cycle 3-1-5-2-4 so neighbours never share one.

   No prefers-reduced-motion clause, on purpose: the mockup had one and with
   "Reduce motion" on it silenced the whole effect. */
:root{--mk-1:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20d%3D%22M14.0%2016.0%20L24.5%2010.3%20L34.9%208.0%20L45.4%208.4%20L55.8%208.8%20L66.3%208.9%20L76.8%209.0%20L87.2%208.9%20L97.7%208.7%20L108.2%208.3%20L118.6%207.9%20L129.1%207.4%20L139.5%206.8%20L150.0%206.3%20L160.5%205.8%20L170.9%205.4%20L181.4%205.2%20L191.8%205.0%20L202.3%205.0%20L212.8%205.2%20L223.2%205.4%20L233.7%205.8%20L244.2%206.3%20L254.6%206.8%20L265.1%207.4%20L275.5%2010.6%20L286.0%2017.3%20Q%20295.0%2014.3%20295.0%2021.9%20Q%20295.0%2029.5%20286.0%2026.5%20L275.5%2032.6%20L265.1%2035.2%20L254.6%2035.2%20L244.2%2035.2%20L233.7%2035.4%20L223.2%2035.6%20L212.8%2035.8%20L202.3%2036.1%20L191.8%2036.4%20L181.4%2036.8%20L170.9%2037.2%20L160.5%2037.5%20L150.0%2037.8%20L139.5%2038.2%20L129.1%2038.4%20L118.6%2038.6%20L108.2%2038.7%20L97.7%2038.8%20L87.2%2038.8%20L76.8%2038.7%20L66.3%2038.5%20L55.8%2038.3%20L45.4%2038.0%20L34.9%2037.7%20L24.5%2034.6%20L14.0%2028.0%20A%206.0%206.0%200%200%201%2014.0%2016.0%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20opacity%3D%22.5%22%20d%3D%22M16.5%2019.6%20L27.1%2016.1%20L37.8%2014.5%20L48.4%2014.4%20L59.1%2014.3%20L69.8%2014.1%20L80.4%2013.8%20L91.1%2013.5%20L101.7%2013.2%20L112.4%2012.9%20L123.0%2012.6%20L133.7%2012.3%20L144.3%2012.2%20L155.0%2012.1%20L165.7%2012.1%20L176.3%2012.2%20L187.0%2012.4%20L197.6%2012.6%20L208.3%2012.9%20L218.9%2013.2%20L229.6%2013.5%20L240.2%2013.8%20L250.9%2014.1%20L261.6%2014.3%20L272.2%2014.4%20L282.9%2016.1%20L293.5%2019.7%20Q%20298.7%2017.9%20298.7%2023.1%20Q%20298.7%2028.2%20293.5%2026.4%20L282.9%2029.9%20L272.2%2031.4%20L261.6%2031.2%20L250.9%2031.0%20L240.2%2030.8%20L229.6%2030.6%20L218.9%2030.4%20L208.3%2030.2%20L197.6%2030.0%20L187.0%2029.8%20L176.3%2029.7%20L165.7%2029.6%20L155.0%2029.6%20L144.3%2029.6%20L133.7%2029.7%20L123.0%2029.8%20L112.4%2029.9%20L101.7%2030.1%20L91.1%2030.3%20L80.4%2030.5%20L69.8%2030.7%20L59.1%2031.0%20L48.4%2031.2%20L37.8%2031.3%20L27.1%2029.9%20L16.5%2026.4%20A%203.5%203.5%200%200%201%2016.5%2019.6%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-2:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20d%3D%22M12.2%2017.2%20L22.8%2013.0%20L33.4%2010.8%20L44.0%2010.4%20L54.6%209.7%20L65.2%208.9%20L75.8%208.0%20L86.4%207.2%20L97.0%206.4%20L107.6%205.9%20L118.2%205.6%20L128.8%205.5%20L139.4%205.8%20L150.0%206.4%20L160.6%207.3%20L171.2%208.5%20L181.8%209.8%20L192.4%2011.3%20L203.0%2012.8%20L213.6%2014.2%20L224.2%2015.5%20L234.8%2016.6%20L245.4%2017.4%20L256.0%2018.0%20L266.6%2018.2%20L277.2%2020.0%20L287.8%2024.0%20Q%20295.8%2028.1%20287.8%2032.2%20L277.2%2036.5%20L266.6%2038.3%20L256.0%2038.0%20L245.4%2037.5%20L234.8%2036.9%20L224.2%2036.2%20L213.6%2035.3%20L203.0%2034.4%20L192.4%2033.5%20L181.8%2032.5%20L171.2%2031.5%20L160.6%2030.5%20L150.0%2029.6%20L139.4%2028.8%20L128.8%2028.0%20L118.2%2027.4%20L107.6%2026.9%20L97.0%2026.6%20L86.4%2026.4%20L75.8%2026.3%20L65.2%2026.3%20L54.6%2026.5%20L44.0%2026.8%20L33.4%2027.1%20L22.8%2025.5%20L12.2%2021.5%20L%208.4%2019.4%20L%2012.2%2017.2%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20opacity%3D%22.5%22%20d%3D%22M15.4%2015.7%20L26.2%2012.8%20L36.9%2011.3%20L47.6%2010.9%20L58.4%2010.6%20L69.1%2010.4%20L79.9%2010.3%20L90.6%2010.4%20L101.3%2010.8%20L112.1%2011.3%20L122.8%2011.9%20L133.5%2012.8%20L144.3%2013.7%20L155.0%2014.7%20L165.7%2015.7%20L176.5%2016.7%20L187.2%2017.6%20L197.9%2018.4%20L208.7%2019.0%20L219.4%2019.4%20L230.1%2019.6%20L240.9%2019.7%20L251.6%2019.6%20L262.4%2019.3%20L273.1%2019.0%20L283.8%2019.7%20L294.6%2021.8%20Q%20299.2%2023.8%20294.6%2025.7%20L283.8%2028.2%20L273.1%2029.3%20L262.4%2029.4%20L251.6%2029.5%20L240.9%2029.6%20L230.1%2029.7%20L219.4%2029.8%20L208.7%2029.8%20L197.9%2029.8%20L187.2%2029.8%20L176.5%2029.6%20L165.7%2029.4%20L155.0%2029.1%20L144.3%2028.7%20L133.5%2028.3%20L122.8%2027.7%20L112.1%2027.1%20L101.3%2026.5%20L90.6%2025.8%20L79.9%2025.1%20L69.1%2024.4%20L58.4%2023.6%20L47.6%2023.0%20L36.9%2022.3%20L26.2%2020.6%20L15.4%2017.6%20L%2013.2%2016.6%20L%2015.4%2015.7%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-3:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20d%3D%22M14.4%2024.2%20L24.8%2016.3%20L35.3%2012.2%20L45.7%2011.0%20L56.1%209.9%20L66.6%209.0%20L77.0%208.2%20L87.4%207.6%20L97.8%207.2%20L108.3%207.0%20L118.7%207.0%20L129.1%207.0%20L139.6%207.1%20L150.0%207.3%20L160.4%207.4%20L170.9%207.5%20L181.3%207.5%20L191.7%207.3%20L202.2%206.9%20L212.6%206.3%20L223.0%205.6%20L233.4%204.7%20L243.9%203.6%20L254.3%202.5%20L264.7%201.2%20L275.2%203.0%20L285.6%208.4%20L%20291.4%2013.1%20L%20285.6%2017.9%20L275.2%2025.3%20L264.7%2029.3%20L254.3%2030.4%20L243.9%2031.7%20L233.4%2033.0%20L223.0%2034.5%20L212.6%2036.0%20L202.2%2037.4%20L191.7%2038.8%20L181.3%2040.2%20L170.9%2041.4%20L160.4%2042.5%20L150.0%2043.4%20L139.6%2044.1%20L129.1%2044.7%20L118.7%2045.0%20L108.3%2045.2%20L97.8%2045.2%20L87.4%2045.0%20L77.0%2044.8%20L66.6%2044.4%20L56.1%2044.0%20L45.7%2043.6%20L35.3%2043.3%20L24.8%2040.0%20L14.4%2033.2%20Q%204.8%2030.0%204.8%2028.7%20Q%204.8%2027.4%2014.4%2024.2%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20opacity%3D%22.5%22%20d%3D%22M16.7%2025.1%20L27.3%2020.5%20L38.0%2018.1%20L48.6%2017.6%20L59.3%2017.1%20L69.9%2016.8%20L80.5%2016.5%20L91.2%2016.3%20L101.8%2016.2%20L112.4%2016.1%20L123.1%2016.0%20L133.7%2015.8%20L144.4%2015.5%20L155.0%2015.2%20L165.6%2014.7%20L176.3%2014.2%20L186.9%2013.5%20L197.6%2012.7%20L208.2%2011.9%20L218.8%2011.0%20L229.5%2010.0%20L240.1%209.1%20L250.7%208.1%20L261.4%207.3%20L272.0%206.5%20L282.7%207.5%20L293.3%2010.7%20L%20296.6%2015.7%20L%20293.3%2020.6%20L282.7%2024.5%20L272.0%2026.2%20L261.4%2026.1%20L250.7%2026.2%20L240.1%2026.2%20L229.5%2026.4%20L218.8%2026.6%20L208.2%2026.9%20L197.6%2027.4%20L186.9%2027.9%20L176.3%2028.6%20L165.6%2029.4%20L155.0%2030.3%20L144.4%2031.2%20L133.7%2032.2%20L123.1%2033.3%20L112.4%2034.4%20L101.8%2035.5%20L91.2%2036.6%20L80.5%2037.6%20L69.9%2038.6%20L59.3%2039.5%20L48.6%2040.3%20L38.0%2040.9%20L27.3%2039.8%20L16.7%2036.4%20Q%2011.1%2034.5%2011.1%2030.7%20Q%2011.1%2027.0%2016.7%2025.1%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-4:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20307%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20d%3D%22M8.8%2010.9%20L19.4%205.5%20L29.9%203.0%20L40.5%203.1%20L51.0%203.3%20L61.6%203.8%20L72.1%204.6%20L82.7%205.5%20L93.2%206.5%20L103.8%207.5%20L114.3%208.6%20L124.9%209.6%20L135.4%2010.4%20L146.0%2011.1%20L156.6%2011.5%20L167.1%2011.7%20L177.7%2011.7%20L188.2%2011.4%20L198.8%2010.9%20L209.3%2010.3%20L219.9%209.6%20L230.4%208.8%20L241.0%208.1%20L251.5%207.4%20L262.1%207.0%20L272.6%208.9%20L283.2%2013.8%20Q%20292.3%2020.5%20283.2%2027.1%20L272.6%2031.5%20L262.1%2033.1%20L251.5%2032.5%20L241.0%2032.0%20L230.4%2031.5%20L219.9%2031.1%20L209.3%2030.8%20L198.8%2030.6%20L188.2%2030.4%20L177.7%2030.4%20L167.1%2030.4%20L156.6%2030.5%20L146.0%2030.7%20L135.4%2030.9%20L124.9%2031.2%20L114.3%2031.5%20L103.8%2031.8%20L93.2%2032.1%20L82.7%2032.3%20L72.1%2032.5%20L61.6%2032.6%20L51.0%2032.7%20L40.5%2032.6%20L29.9%2032.5%20L19.4%2030.1%20L8.8%2024.8%20Q%20-0.3%2017.8%208.8%2010.9%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20opacity%3D%22.5%22%20d%3D%22M20.8%2019.3%20L31.5%2016.4%20L42.2%2015.3%20L52.9%2015.6%20L63.6%2016.0%20L74.3%2016.4%20L85.0%2016.8%20L95.7%2017.1%20L106.5%2017.4%20L117.2%2017.5%20L127.9%2017.5%20L138.6%2017.4%20L149.3%2017.1%20L160.0%2016.7%20L170.7%2016.1%20L181.4%2015.5%20L192.1%2014.8%20L202.8%2014.1%20L213.5%2013.4%20L224.3%2012.8%20L235.0%2012.3%20L245.7%2011.9%20L256.4%2011.6%20L267.1%2011.5%20L277.8%2011.5%20L288.5%2013.0%20L299.2%2016.1%20Q%20304.5%2020.0%20299.2%2023.8%20L288.5%2027.0%20L277.8%2028.5%20L267.1%2028.7%20L256.4%2028.9%20L245.7%2029.0%20L235.0%2029.0%20L224.3%2029.0%20L213.5%2028.9%20L202.8%2028.9%20L192.1%2028.8%20L181.4%2028.6%20L170.7%2028.5%20L160.0%2028.4%20L149.3%2028.3%20L138.6%2028.3%20L127.9%2028.3%20L117.2%2028.3%20L106.5%2028.4%20L95.7%2028.6%20L85.0%2028.8%20L74.3%2029.0%20L63.6%2029.3%20L52.9%2029.7%20L42.2%2030.0%20L31.5%2029.2%20L20.8%2026.7%20Q%2015.5%2023.0%2020.8%2019.3%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-5:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20d%3D%22M13.6%2012.3%20L24.1%207.1%20L34.6%205.1%20L45.1%205.8%20L55.6%206.5%20L66.1%207.2%20L76.6%207.9%20L87.0%208.6%20L97.5%209.1%20L108.0%209.6%20L118.5%2010.0%20L129.0%2010.4%20L139.5%2010.6%20L150.0%2010.8%20L160.5%2010.9%20L171.0%2011.0%20L181.5%2011.1%20L192.0%2011.1%20L202.5%2011.2%20L213.0%2011.4%20L223.4%2011.6%20L233.9%2011.9%20L244.4%2012.3%20L254.9%2012.7%20L265.4%2013.3%20L275.9%2016.5%20L286.4%2023.0%20A%205.6%205.6%200%200%201%20286.4%2035.6%20L275.9%2041.4%20L265.4%2043.8%20L254.9%2043.7%20L244.4%2043.4%20L233.9%2043.1%20L223.4%2042.7%20L213.0%2042.2%20L202.5%2041.6%20L192.0%2040.9%20L181.5%2040.2%20L171.0%2039.5%20L160.5%2038.7%20L150.0%2037.9%20L139.5%2037.1%20L129.0%2036.4%20L118.5%2035.6%20L108.0%2035.0%20L97.5%2034.3%20L87.0%2033.8%20L76.6%2033.3%20L66.1%2032.9%20L55.6%2032.6%20L45.1%2032.4%20L34.6%2032.2%20L24.1%2029.6%20L13.6%2023.7%20L%208.6%2018.0%20L%2013.6%2012.3%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.30%29%22%20opacity%3D%22.5%22%20d%3D%22M16.2%2015.8%20L26.9%2013.0%20L37.6%2012.0%20L48.3%2012.6%20L58.9%2013.1%20L69.6%2013.5%20L80.3%2013.9%20L91.0%2014.3%20L101.6%2014.6%20L112.3%2014.8%20L123.0%2015.0%20L133.7%2015.2%20L144.3%2015.4%20L155.0%2015.6%20L165.7%2015.8%20L176.3%2016.1%20L187.0%2016.4%20L197.7%2016.7%20L208.4%2017.1%20L219.0%2017.5%20L229.7%2018.0%20L240.4%2018.5%20L251.1%2019.1%20L261.7%2019.7%20L272.4%2020.3%20L283.1%2022.3%20L293.8%2026.2%20A%203.2%203.2%200%200%201%20293.8%2031.0%20L283.1%2034.1%20L272.4%2035.3%20L261.7%2035.0%20L251.1%2034.8%20L240.4%2034.6%20L229.7%2034.4%20L219.0%2034.3%20L208.4%2034.1%20L197.7%2034.0%20L187.0%2033.8%20L176.3%2033.6%20L165.7%2033.4%20L155.0%2033.2%20L144.3%2032.9%20L133.7%2032.5%20L123.0%2032.2%20L112.3%2031.7%20L101.6%2031.2%20L91.0%2030.7%20L80.3%2030.1%20L69.6%2029.5%20L58.9%2028.9%20L48.3%2028.3%20L37.6%2027.7%20L26.9%2025.5%20L16.2%2021.6%20L%2013.3%2018.7%20L%2016.2%2015.8%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-1a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20d%3D%22M14.0%2016.0%20L24.5%2010.3%20L34.9%208.0%20L45.4%208.4%20L55.8%208.8%20L66.3%208.9%20L76.8%209.0%20L87.2%208.9%20L97.7%208.7%20L108.2%208.3%20L118.6%207.9%20L129.1%207.4%20L139.5%206.8%20L150.0%206.3%20L160.5%205.8%20L170.9%205.4%20L181.4%205.2%20L191.8%205.0%20L202.3%205.0%20L212.8%205.2%20L223.2%205.4%20L233.7%205.8%20L244.2%206.3%20L254.6%206.8%20L265.1%207.4%20L275.5%2010.6%20L286.0%2017.3%20Q%20295.0%2014.3%20295.0%2021.9%20Q%20295.0%2029.5%20286.0%2026.5%20L275.5%2032.6%20L265.1%2035.2%20L254.6%2035.2%20L244.2%2035.2%20L233.7%2035.4%20L223.2%2035.6%20L212.8%2035.8%20L202.3%2036.1%20L191.8%2036.4%20L181.4%2036.8%20L170.9%2037.2%20L160.5%2037.5%20L150.0%2037.8%20L139.5%2038.2%20L129.1%2038.4%20L118.6%2038.6%20L108.2%2038.7%20L97.7%2038.8%20L87.2%2038.8%20L76.8%2038.7%20L66.3%2038.5%20L55.8%2038.3%20L45.4%2038.0%20L34.9%2037.7%20L24.5%2034.6%20L14.0%2028.0%20A%206.0%206.0%200%200%201%2014.0%2016.0%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-1b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20opacity%3D%22.5%22%20d%3D%22M16.5%2019.6%20L27.1%2016.1%20L37.8%2014.5%20L48.4%2014.4%20L59.1%2014.3%20L69.8%2014.1%20L80.4%2013.8%20L91.1%2013.5%20L101.7%2013.2%20L112.4%2012.9%20L123.0%2012.6%20L133.7%2012.3%20L144.3%2012.2%20L155.0%2012.1%20L165.7%2012.1%20L176.3%2012.2%20L187.0%2012.4%20L197.6%2012.6%20L208.3%2012.9%20L218.9%2013.2%20L229.6%2013.5%20L240.2%2013.8%20L250.9%2014.1%20L261.6%2014.3%20L272.2%2014.4%20L282.9%2016.1%20L293.5%2019.7%20Q%20298.7%2017.9%20298.7%2023.1%20Q%20298.7%2028.2%20293.5%2026.4%20L282.9%2029.9%20L272.2%2031.4%20L261.6%2031.2%20L250.9%2031.0%20L240.2%2030.8%20L229.6%2030.6%20L218.9%2030.4%20L208.3%2030.2%20L197.6%2030.0%20L187.0%2029.8%20L176.3%2029.7%20L165.7%2029.6%20L155.0%2029.6%20L144.3%2029.6%20L133.7%2029.7%20L123.0%2029.8%20L112.4%2029.9%20L101.7%2030.1%20L91.1%2030.3%20L80.4%2030.5%20L69.8%2030.7%20L59.1%2031.0%20L48.4%2031.2%20L37.8%2031.3%20L27.1%2029.9%20L16.5%2026.4%20A%203.5%203.5%200%200%201%2016.5%2019.6%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-2a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20d%3D%22M12.2%2017.2%20L22.8%2013.0%20L33.4%2010.8%20L44.0%2010.4%20L54.6%209.7%20L65.2%208.9%20L75.8%208.0%20L86.4%207.2%20L97.0%206.4%20L107.6%205.9%20L118.2%205.6%20L128.8%205.5%20L139.4%205.8%20L150.0%206.4%20L160.6%207.3%20L171.2%208.5%20L181.8%209.8%20L192.4%2011.3%20L203.0%2012.8%20L213.6%2014.2%20L224.2%2015.5%20L234.8%2016.6%20L245.4%2017.4%20L256.0%2018.0%20L266.6%2018.2%20L277.2%2020.0%20L287.8%2024.0%20Q%20295.8%2028.1%20287.8%2032.2%20L277.2%2036.5%20L266.6%2038.3%20L256.0%2038.0%20L245.4%2037.5%20L234.8%2036.9%20L224.2%2036.2%20L213.6%2035.3%20L203.0%2034.4%20L192.4%2033.5%20L181.8%2032.5%20L171.2%2031.5%20L160.6%2030.5%20L150.0%2029.6%20L139.4%2028.8%20L128.8%2028.0%20L118.2%2027.4%20L107.6%2026.9%20L97.0%2026.6%20L86.4%2026.4%20L75.8%2026.3%20L65.2%2026.3%20L54.6%2026.5%20L44.0%2026.8%20L33.4%2027.1%20L22.8%2025.5%20L12.2%2021.5%20L%208.4%2019.4%20L%2012.2%2017.2%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-2b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20opacity%3D%22.5%22%20d%3D%22M15.4%2015.7%20L26.2%2012.8%20L36.9%2011.3%20L47.6%2010.9%20L58.4%2010.6%20L69.1%2010.4%20L79.9%2010.3%20L90.6%2010.4%20L101.3%2010.8%20L112.1%2011.3%20L122.8%2011.9%20L133.5%2012.8%20L144.3%2013.7%20L155.0%2014.7%20L165.7%2015.7%20L176.5%2016.7%20L187.2%2017.6%20L197.9%2018.4%20L208.7%2019.0%20L219.4%2019.4%20L230.1%2019.6%20L240.9%2019.7%20L251.6%2019.6%20L262.4%2019.3%20L273.1%2019.0%20L283.8%2019.7%20L294.6%2021.8%20Q%20299.2%2023.8%20294.6%2025.7%20L283.8%2028.2%20L273.1%2029.3%20L262.4%2029.4%20L251.6%2029.5%20L240.9%2029.6%20L230.1%2029.7%20L219.4%2029.8%20L208.7%2029.8%20L197.9%2029.8%20L187.2%2029.8%20L176.5%2029.6%20L165.7%2029.4%20L155.0%2029.1%20L144.3%2028.7%20L133.5%2028.3%20L122.8%2027.7%20L112.1%2027.1%20L101.3%2026.5%20L90.6%2025.8%20L79.9%2025.1%20L69.1%2024.4%20L58.4%2023.6%20L47.6%2023.0%20L36.9%2022.3%20L26.2%2020.6%20L15.4%2017.6%20L%2013.2%2016.6%20L%2015.4%2015.7%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-3a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20d%3D%22M14.4%2024.2%20L24.8%2016.3%20L35.3%2012.2%20L45.7%2011.0%20L56.1%209.9%20L66.6%209.0%20L77.0%208.2%20L87.4%207.6%20L97.8%207.2%20L108.3%207.0%20L118.7%207.0%20L129.1%207.0%20L139.6%207.1%20L150.0%207.3%20L160.4%207.4%20L170.9%207.5%20L181.3%207.5%20L191.7%207.3%20L202.2%206.9%20L212.6%206.3%20L223.0%205.6%20L233.4%204.7%20L243.9%203.6%20L254.3%202.5%20L264.7%201.2%20L275.2%203.0%20L285.6%208.4%20L%20291.4%2013.1%20L%20285.6%2017.9%20L275.2%2025.3%20L264.7%2029.3%20L254.3%2030.4%20L243.9%2031.7%20L233.4%2033.0%20L223.0%2034.5%20L212.6%2036.0%20L202.2%2037.4%20L191.7%2038.8%20L181.3%2040.2%20L170.9%2041.4%20L160.4%2042.5%20L150.0%2043.4%20L139.6%2044.1%20L129.1%2044.7%20L118.7%2045.0%20L108.3%2045.2%20L97.8%2045.2%20L87.4%2045.0%20L77.0%2044.8%20L66.6%2044.4%20L56.1%2044.0%20L45.7%2043.6%20L35.3%2043.3%20L24.8%2040.0%20L14.4%2033.2%20Q%204.8%2030.0%204.8%2028.7%20Q%204.8%2027.4%2014.4%2024.2%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-3b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20opacity%3D%22.5%22%20d%3D%22M16.7%2025.1%20L27.3%2020.5%20L38.0%2018.1%20L48.6%2017.6%20L59.3%2017.1%20L69.9%2016.8%20L80.5%2016.5%20L91.2%2016.3%20L101.8%2016.2%20L112.4%2016.1%20L123.1%2016.0%20L133.7%2015.8%20L144.4%2015.5%20L155.0%2015.2%20L165.6%2014.7%20L176.3%2014.2%20L186.9%2013.5%20L197.6%2012.7%20L208.2%2011.9%20L218.8%2011.0%20L229.5%2010.0%20L240.1%209.1%20L250.7%208.1%20L261.4%207.3%20L272.0%206.5%20L282.7%207.5%20L293.3%2010.7%20L%20296.6%2015.7%20L%20293.3%2020.6%20L282.7%2024.5%20L272.0%2026.2%20L261.4%2026.1%20L250.7%2026.2%20L240.1%2026.2%20L229.5%2026.4%20L218.8%2026.6%20L208.2%2026.9%20L197.6%2027.4%20L186.9%2027.9%20L176.3%2028.6%20L165.6%2029.4%20L155.0%2030.3%20L144.4%2031.2%20L133.7%2032.2%20L123.1%2033.3%20L112.4%2034.4%20L101.8%2035.5%20L91.2%2036.6%20L80.5%2037.6%20L69.9%2038.6%20L59.3%2039.5%20L48.6%2040.3%20L38.0%2040.9%20L27.3%2039.8%20L16.7%2036.4%20Q%2011.1%2034.5%2011.1%2030.7%20Q%2011.1%2027.0%2016.7%2025.1%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-4a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20307%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20d%3D%22M8.8%2010.9%20L19.4%205.5%20L29.9%203.0%20L40.5%203.1%20L51.0%203.3%20L61.6%203.8%20L72.1%204.6%20L82.7%205.5%20L93.2%206.5%20L103.8%207.5%20L114.3%208.6%20L124.9%209.6%20L135.4%2010.4%20L146.0%2011.1%20L156.6%2011.5%20L167.1%2011.7%20L177.7%2011.7%20L188.2%2011.4%20L198.8%2010.9%20L209.3%2010.3%20L219.9%209.6%20L230.4%208.8%20L241.0%208.1%20L251.5%207.4%20L262.1%207.0%20L272.6%208.9%20L283.2%2013.8%20Q%20292.3%2020.5%20283.2%2027.1%20L272.6%2031.5%20L262.1%2033.1%20L251.5%2032.5%20L241.0%2032.0%20L230.4%2031.5%20L219.9%2031.1%20L209.3%2030.8%20L198.8%2030.6%20L188.2%2030.4%20L177.7%2030.4%20L167.1%2030.4%20L156.6%2030.5%20L146.0%2030.7%20L135.4%2030.9%20L124.9%2031.2%20L114.3%2031.5%20L103.8%2031.8%20L93.2%2032.1%20L82.7%2032.3%20L72.1%2032.5%20L61.6%2032.6%20L51.0%2032.7%20L40.5%2032.6%20L29.9%2032.5%20L19.4%2030.1%20L8.8%2024.8%20Q%20-0.3%2017.8%208.8%2010.9%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-4b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20307%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20opacity%3D%22.5%22%20d%3D%22M20.8%2019.3%20L31.5%2016.4%20L42.2%2015.3%20L52.9%2015.6%20L63.6%2016.0%20L74.3%2016.4%20L85.0%2016.8%20L95.7%2017.1%20L106.5%2017.4%20L117.2%2017.5%20L127.9%2017.5%20L138.6%2017.4%20L149.3%2017.1%20L160.0%2016.7%20L170.7%2016.1%20L181.4%2015.5%20L192.1%2014.8%20L202.8%2014.1%20L213.5%2013.4%20L224.3%2012.8%20L235.0%2012.3%20L245.7%2011.9%20L256.4%2011.6%20L267.1%2011.5%20L277.8%2011.5%20L288.5%2013.0%20L299.2%2016.1%20Q%20304.5%2020.0%20299.2%2023.8%20L288.5%2027.0%20L277.8%2028.5%20L267.1%2028.7%20L256.4%2028.9%20L245.7%2029.0%20L235.0%2029.0%20L224.3%2029.0%20L213.5%2028.9%20L202.8%2028.9%20L192.1%2028.8%20L181.4%2028.6%20L170.7%2028.5%20L160.0%2028.4%20L149.3%2028.3%20L138.6%2028.3%20L127.9%2028.3%20L117.2%2028.3%20L106.5%2028.4%20L95.7%2028.6%20L85.0%2028.8%20L74.3%2029.0%20L63.6%2029.3%20L52.9%2029.7%20L42.2%2030.0%20L31.5%2029.2%20L20.8%2026.7%20Q%2015.5%2023.0%2020.8%2019.3%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-5a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20d%3D%22M13.6%2012.3%20L24.1%207.1%20L34.6%205.1%20L45.1%205.8%20L55.6%206.5%20L66.1%207.2%20L76.6%207.9%20L87.0%208.6%20L97.5%209.1%20L108.0%209.6%20L118.5%2010.0%20L129.0%2010.4%20L139.5%2010.6%20L150.0%2010.8%20L160.5%2010.9%20L171.0%2011.0%20L181.5%2011.1%20L192.0%2011.1%20L202.5%2011.2%20L213.0%2011.4%20L223.4%2011.6%20L233.9%2011.9%20L244.4%2012.3%20L254.9%2012.7%20L265.4%2013.3%20L275.9%2016.5%20L286.4%2023.0%20A%205.6%205.6%200%200%201%20286.4%2035.6%20L275.9%2041.4%20L265.4%2043.8%20L254.9%2043.7%20L244.4%2043.4%20L233.9%2043.1%20L223.4%2042.7%20L213.0%2042.2%20L202.5%2041.6%20L192.0%2040.9%20L181.5%2040.2%20L171.0%2039.5%20L160.5%2038.7%20L150.0%2037.9%20L139.5%2037.1%20L129.0%2036.4%20L118.5%2035.6%20L108.0%2035.0%20L97.5%2034.3%20L87.0%2033.8%20L76.6%2033.3%20L66.1%2032.9%20L55.6%2032.6%20L45.1%2032.4%20L34.6%2032.2%20L24.1%2029.6%20L13.6%2023.7%20L%208.6%2018.0%20L%2013.6%2012.3%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-5b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.62%29%22%20opacity%3D%22.5%22%20d%3D%22M16.2%2015.8%20L26.9%2013.0%20L37.6%2012.0%20L48.3%2012.6%20L58.9%2013.1%20L69.6%2013.5%20L80.3%2013.9%20L91.0%2014.3%20L101.6%2014.6%20L112.3%2014.8%20L123.0%2015.0%20L133.7%2015.2%20L144.3%2015.4%20L155.0%2015.6%20L165.7%2015.8%20L176.3%2016.1%20L187.0%2016.4%20L197.7%2016.7%20L208.4%2017.1%20L219.0%2017.5%20L229.7%2018.0%20L240.4%2018.5%20L251.1%2019.1%20L261.7%2019.7%20L272.4%2020.3%20L283.1%2022.3%20L293.8%2026.2%20A%203.2%203.2%200%200%201%20293.8%2031.0%20L283.1%2034.1%20L272.4%2035.3%20L261.7%2035.0%20L251.1%2034.8%20L240.4%2034.6%20L229.7%2034.4%20L219.0%2034.3%20L208.4%2034.1%20L197.7%2034.0%20L187.0%2033.8%20L176.3%2033.6%20L165.7%2033.4%20L155.0%2033.2%20L144.3%2032.9%20L133.7%2032.5%20L123.0%2032.2%20L112.3%2031.7%20L101.6%2031.2%20L91.0%2030.7%20L80.3%2030.1%20L69.6%2029.5%20L58.9%2028.9%20L48.3%2028.3%20L37.6%2027.7%20L26.9%2025.5%20L16.2%2021.6%20L%2013.3%2018.7%20L%2016.2%2015.8%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-ms:.9s;--mk-ease:cubic-bezier(.3,.1,.25,1)}
:root[data-theme="light"]{--mk-1a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20d%3D%22M14.0%2016.0%20L24.5%2010.3%20L34.9%208.0%20L45.4%208.4%20L55.8%208.8%20L66.3%208.9%20L76.8%209.0%20L87.2%208.9%20L97.7%208.7%20L108.2%208.3%20L118.6%207.9%20L129.1%207.4%20L139.5%206.8%20L150.0%206.3%20L160.5%205.8%20L170.9%205.4%20L181.4%205.2%20L191.8%205.0%20L202.3%205.0%20L212.8%205.2%20L223.2%205.4%20L233.7%205.8%20L244.2%206.3%20L254.6%206.8%20L265.1%207.4%20L275.5%2010.6%20L286.0%2017.3%20Q%20295.0%2014.3%20295.0%2021.9%20Q%20295.0%2029.5%20286.0%2026.5%20L275.5%2032.6%20L265.1%2035.2%20L254.6%2035.2%20L244.2%2035.2%20L233.7%2035.4%20L223.2%2035.6%20L212.8%2035.8%20L202.3%2036.1%20L191.8%2036.4%20L181.4%2036.8%20L170.9%2037.2%20L160.5%2037.5%20L150.0%2037.8%20L139.5%2038.2%20L129.1%2038.4%20L118.6%2038.6%20L108.2%2038.7%20L97.7%2038.8%20L87.2%2038.8%20L76.8%2038.7%20L66.3%2038.5%20L55.8%2038.3%20L45.4%2038.0%20L34.9%2037.7%20L24.5%2034.6%20L14.0%2028.0%20A%206.0%206.0%200%200%201%2014.0%2016.0%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-1b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20opacity%3D%22.5%22%20d%3D%22M16.5%2019.6%20L27.1%2016.1%20L37.8%2014.5%20L48.4%2014.4%20L59.1%2014.3%20L69.8%2014.1%20L80.4%2013.8%20L91.1%2013.5%20L101.7%2013.2%20L112.4%2012.9%20L123.0%2012.6%20L133.7%2012.3%20L144.3%2012.2%20L155.0%2012.1%20L165.7%2012.1%20L176.3%2012.2%20L187.0%2012.4%20L197.6%2012.6%20L208.3%2012.9%20L218.9%2013.2%20L229.6%2013.5%20L240.2%2013.8%20L250.9%2014.1%20L261.6%2014.3%20L272.2%2014.4%20L282.9%2016.1%20L293.5%2019.7%20Q%20298.7%2017.9%20298.7%2023.1%20Q%20298.7%2028.2%20293.5%2026.4%20L282.9%2029.9%20L272.2%2031.4%20L261.6%2031.2%20L250.9%2031.0%20L240.2%2030.8%20L229.6%2030.6%20L218.9%2030.4%20L208.3%2030.2%20L197.6%2030.0%20L187.0%2029.8%20L176.3%2029.7%20L165.7%2029.6%20L155.0%2029.6%20L144.3%2029.6%20L133.7%2029.7%20L123.0%2029.8%20L112.4%2029.9%20L101.7%2030.1%20L91.1%2030.3%20L80.4%2030.5%20L69.8%2030.7%20L59.1%2031.0%20L48.4%2031.2%20L37.8%2031.3%20L27.1%2029.9%20L16.5%2026.4%20A%203.5%203.5%200%200%201%2016.5%2019.6%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-2a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20d%3D%22M12.2%2017.2%20L22.8%2013.0%20L33.4%2010.8%20L44.0%2010.4%20L54.6%209.7%20L65.2%208.9%20L75.8%208.0%20L86.4%207.2%20L97.0%206.4%20L107.6%205.9%20L118.2%205.6%20L128.8%205.5%20L139.4%205.8%20L150.0%206.4%20L160.6%207.3%20L171.2%208.5%20L181.8%209.8%20L192.4%2011.3%20L203.0%2012.8%20L213.6%2014.2%20L224.2%2015.5%20L234.8%2016.6%20L245.4%2017.4%20L256.0%2018.0%20L266.6%2018.2%20L277.2%2020.0%20L287.8%2024.0%20Q%20295.8%2028.1%20287.8%2032.2%20L277.2%2036.5%20L266.6%2038.3%20L256.0%2038.0%20L245.4%2037.5%20L234.8%2036.9%20L224.2%2036.2%20L213.6%2035.3%20L203.0%2034.4%20L192.4%2033.5%20L181.8%2032.5%20L171.2%2031.5%20L160.6%2030.5%20L150.0%2029.6%20L139.4%2028.8%20L128.8%2028.0%20L118.2%2027.4%20L107.6%2026.9%20L97.0%2026.6%20L86.4%2026.4%20L75.8%2026.3%20L65.2%2026.3%20L54.6%2026.5%20L44.0%2026.8%20L33.4%2027.1%20L22.8%2025.5%20L12.2%2021.5%20L%208.4%2019.4%20L%2012.2%2017.2%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-2b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20opacity%3D%22.5%22%20d%3D%22M15.4%2015.7%20L26.2%2012.8%20L36.9%2011.3%20L47.6%2010.9%20L58.4%2010.6%20L69.1%2010.4%20L79.9%2010.3%20L90.6%2010.4%20L101.3%2010.8%20L112.1%2011.3%20L122.8%2011.9%20L133.5%2012.8%20L144.3%2013.7%20L155.0%2014.7%20L165.7%2015.7%20L176.5%2016.7%20L187.2%2017.6%20L197.9%2018.4%20L208.7%2019.0%20L219.4%2019.4%20L230.1%2019.6%20L240.9%2019.7%20L251.6%2019.6%20L262.4%2019.3%20L273.1%2019.0%20L283.8%2019.7%20L294.6%2021.8%20Q%20299.2%2023.8%20294.6%2025.7%20L283.8%2028.2%20L273.1%2029.3%20L262.4%2029.4%20L251.6%2029.5%20L240.9%2029.6%20L230.1%2029.7%20L219.4%2029.8%20L208.7%2029.8%20L197.9%2029.8%20L187.2%2029.8%20L176.5%2029.6%20L165.7%2029.4%20L155.0%2029.1%20L144.3%2028.7%20L133.5%2028.3%20L122.8%2027.7%20L112.1%2027.1%20L101.3%2026.5%20L90.6%2025.8%20L79.9%2025.1%20L69.1%2024.4%20L58.4%2023.6%20L47.6%2023.0%20L36.9%2022.3%20L26.2%2020.6%20L15.4%2017.6%20L%2013.2%2016.6%20L%2015.4%2015.7%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-3a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20d%3D%22M14.4%2024.2%20L24.8%2016.3%20L35.3%2012.2%20L45.7%2011.0%20L56.1%209.9%20L66.6%209.0%20L77.0%208.2%20L87.4%207.6%20L97.8%207.2%20L108.3%207.0%20L118.7%207.0%20L129.1%207.0%20L139.6%207.1%20L150.0%207.3%20L160.4%207.4%20L170.9%207.5%20L181.3%207.5%20L191.7%207.3%20L202.2%206.9%20L212.6%206.3%20L223.0%205.6%20L233.4%204.7%20L243.9%203.6%20L254.3%202.5%20L264.7%201.2%20L275.2%203.0%20L285.6%208.4%20L%20291.4%2013.1%20L%20285.6%2017.9%20L275.2%2025.3%20L264.7%2029.3%20L254.3%2030.4%20L243.9%2031.7%20L233.4%2033.0%20L223.0%2034.5%20L212.6%2036.0%20L202.2%2037.4%20L191.7%2038.8%20L181.3%2040.2%20L170.9%2041.4%20L160.4%2042.5%20L150.0%2043.4%20L139.6%2044.1%20L129.1%2044.7%20L118.7%2045.0%20L108.3%2045.2%20L97.8%2045.2%20L87.4%2045.0%20L77.0%2044.8%20L66.6%2044.4%20L56.1%2044.0%20L45.7%2043.6%20L35.3%2043.3%20L24.8%2040.0%20L14.4%2033.2%20Q%204.8%2030.0%204.8%2028.7%20Q%204.8%2027.4%2014.4%2024.2%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-3b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20opacity%3D%22.5%22%20d%3D%22M16.7%2025.1%20L27.3%2020.5%20L38.0%2018.1%20L48.6%2017.6%20L59.3%2017.1%20L69.9%2016.8%20L80.5%2016.5%20L91.2%2016.3%20L101.8%2016.2%20L112.4%2016.1%20L123.1%2016.0%20L133.7%2015.8%20L144.4%2015.5%20L155.0%2015.2%20L165.6%2014.7%20L176.3%2014.2%20L186.9%2013.5%20L197.6%2012.7%20L208.2%2011.9%20L218.8%2011.0%20L229.5%2010.0%20L240.1%209.1%20L250.7%208.1%20L261.4%207.3%20L272.0%206.5%20L282.7%207.5%20L293.3%2010.7%20L%20296.6%2015.7%20L%20293.3%2020.6%20L282.7%2024.5%20L272.0%2026.2%20L261.4%2026.1%20L250.7%2026.2%20L240.1%2026.2%20L229.5%2026.4%20L218.8%2026.6%20L208.2%2026.9%20L197.6%2027.4%20L186.9%2027.9%20L176.3%2028.6%20L165.6%2029.4%20L155.0%2030.3%20L144.4%2031.2%20L133.7%2032.2%20L123.1%2033.3%20L112.4%2034.4%20L101.8%2035.5%20L91.2%2036.6%20L80.5%2037.6%20L69.9%2038.6%20L59.3%2039.5%20L48.6%2040.3%20L38.0%2040.9%20L27.3%2039.8%20L16.7%2036.4%20Q%2011.1%2034.5%2011.1%2030.7%20Q%2011.1%2027.0%2016.7%2025.1%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-4a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20307%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20d%3D%22M8.8%2010.9%20L19.4%205.5%20L29.9%203.0%20L40.5%203.1%20L51.0%203.3%20L61.6%203.8%20L72.1%204.6%20L82.7%205.5%20L93.2%206.5%20L103.8%207.5%20L114.3%208.6%20L124.9%209.6%20L135.4%2010.4%20L146.0%2011.1%20L156.6%2011.5%20L167.1%2011.7%20L177.7%2011.7%20L188.2%2011.4%20L198.8%2010.9%20L209.3%2010.3%20L219.9%209.6%20L230.4%208.8%20L241.0%208.1%20L251.5%207.4%20L262.1%207.0%20L272.6%208.9%20L283.2%2013.8%20Q%20292.3%2020.5%20283.2%2027.1%20L272.6%2031.5%20L262.1%2033.1%20L251.5%2032.5%20L241.0%2032.0%20L230.4%2031.5%20L219.9%2031.1%20L209.3%2030.8%20L198.8%2030.6%20L188.2%2030.4%20L177.7%2030.4%20L167.1%2030.4%20L156.6%2030.5%20L146.0%2030.7%20L135.4%2030.9%20L124.9%2031.2%20L114.3%2031.5%20L103.8%2031.8%20L93.2%2032.1%20L82.7%2032.3%20L72.1%2032.5%20L61.6%2032.6%20L51.0%2032.7%20L40.5%2032.6%20L29.9%2032.5%20L19.4%2030.1%20L8.8%2024.8%20Q%20-0.3%2017.8%208.8%2010.9%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-4b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%200%20307%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20opacity%3D%22.5%22%20d%3D%22M20.8%2019.3%20L31.5%2016.4%20L42.2%2015.3%20L52.9%2015.6%20L63.6%2016.0%20L74.3%2016.4%20L85.0%2016.8%20L95.7%2017.1%20L106.5%2017.4%20L117.2%2017.5%20L127.9%2017.5%20L138.6%2017.4%20L149.3%2017.1%20L160.0%2016.7%20L170.7%2016.1%20L181.4%2015.5%20L192.1%2014.8%20L202.8%2014.1%20L213.5%2013.4%20L224.3%2012.8%20L235.0%2012.3%20L245.7%2011.9%20L256.4%2011.6%20L267.1%2011.5%20L277.8%2011.5%20L288.5%2013.0%20L299.2%2016.1%20Q%20304.5%2020.0%20299.2%2023.8%20L288.5%2027.0%20L277.8%2028.5%20L267.1%2028.7%20L256.4%2028.9%20L245.7%2029.0%20L235.0%2029.0%20L224.3%2029.0%20L213.5%2028.9%20L202.8%2028.9%20L192.1%2028.8%20L181.4%2028.6%20L170.7%2028.5%20L160.0%2028.4%20L149.3%2028.3%20L138.6%2028.3%20L127.9%2028.3%20L117.2%2028.3%20L106.5%2028.4%20L95.7%2028.6%20L85.0%2028.8%20L74.3%2029.0%20L63.6%2029.3%20L52.9%2029.7%20L42.2%2030.0%20L31.5%2029.2%20L20.8%2026.7%20Q%2015.5%2023.0%2020.8%2019.3%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-5a:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20d%3D%22M13.6%2012.3%20L24.1%207.1%20L34.6%205.1%20L45.1%205.8%20L55.6%206.5%20L66.1%207.2%20L76.6%207.9%20L87.0%208.6%20L97.5%209.1%20L108.0%209.6%20L118.5%2010.0%20L129.0%2010.4%20L139.5%2010.6%20L150.0%2010.8%20L160.5%2010.9%20L171.0%2011.0%20L181.5%2011.1%20L192.0%2011.1%20L202.5%2011.2%20L213.0%2011.4%20L223.4%2011.6%20L233.9%2011.9%20L244.4%2012.3%20L254.9%2012.7%20L265.4%2013.3%20L275.9%2016.5%20L286.4%2023.0%20A%205.6%205.6%200%200%201%20286.4%2035.6%20L275.9%2041.4%20L265.4%2043.8%20L254.9%2043.7%20L244.4%2043.4%20L233.9%2043.1%20L223.4%2042.7%20L213.0%2042.2%20L202.5%2041.6%20L192.0%2040.9%20L181.5%2040.2%20L171.0%2039.5%20L160.5%2038.7%20L150.0%2037.9%20L139.5%2037.1%20L129.0%2036.4%20L118.5%2035.6%20L108.0%2035.0%20L97.5%2034.3%20L87.0%2033.8%20L76.6%2033.3%20L66.1%2032.9%20L55.6%2032.6%20L45.1%2032.4%20L34.6%2032.2%20L24.1%2029.6%20L13.6%2023.7%20L%208.6%2018.0%20L%2013.6%2012.3%20Z%22%2F%3E%3C%2Fsvg%3E');--mk-5b:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2044%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba%280%2C126%2C247%2C.42%29%22%20opacity%3D%22.5%22%20d%3D%22M16.2%2015.8%20L26.9%2013.0%20L37.6%2012.0%20L48.3%2012.6%20L58.9%2013.1%20L69.6%2013.5%20L80.3%2013.9%20L91.0%2014.3%20L101.6%2014.6%20L112.3%2014.8%20L123.0%2015.0%20L133.7%2015.2%20L144.3%2015.4%20L155.0%2015.6%20L165.7%2015.8%20L176.3%2016.1%20L187.0%2016.4%20L197.7%2016.7%20L208.4%2017.1%20L219.0%2017.5%20L229.7%2018.0%20L240.4%2018.5%20L251.1%2019.1%20L261.7%2019.7%20L272.4%2020.3%20L283.1%2022.3%20L293.8%2026.2%20A%203.2%203.2%200%200%201%20293.8%2031.0%20L283.1%2034.1%20L272.4%2035.3%20L261.7%2035.0%20L251.1%2034.8%20L240.4%2034.6%20L229.7%2034.4%20L219.0%2034.3%20L208.4%2034.1%20L197.7%2034.0%20L187.0%2033.8%20L176.3%2033.6%20L165.7%2033.4%20L155.0%2033.2%20L144.3%2032.9%20L133.7%2032.5%20L123.0%2032.2%20L112.3%2031.7%20L101.6%2031.2%20L91.0%2030.7%20L80.3%2030.1%20L69.6%2029.5%20L58.9%2028.9%20L48.3%2028.3%20L37.6%2027.7%20L26.9%2025.5%20L16.2%2021.6%20L%2013.3%2018.7%20L%2016.2%2015.8%20Z%22%2F%3E%3C%2Fsvg%3E')}
/* r804: the same stroke on FIVE surfaces - Lia's sidebar items and chat rows,
   the App Tools rail, the Settings nav, the Relay folder tabs. One rule set,
   one selector list per state, so a sixth surface is one line here and its
   old fill removed at home. The groups below: the rows, their lifted
   children, the two layers, the lit layers (static), the armed ones (drawn). */
body.ws-ai #sidebar .ainav__item, body.ws-ai #sidebar .ainav__chatrow, .ai-apps__tab, .setx-nav__item, .jtab{position:relative}
body.ws-ai #sidebar .ainav__item > *, body.ws-ai #sidebar .ainav__chatrow > *, .ai-apps__tab > *, .setx-nav__item > *, .jtab > *{position:relative;z-index:1}
body.ws-ai #sidebar .ainav__item::before, body.ws-ai #sidebar .ainav__chatrow::before, .ai-apps__tab::before, .setx-nav__item::before, .jtab::before,
body.ws-ai #sidebar .ainav__item::after, body.ws-ai #sidebar .ainav__chatrow::after, .ai-apps__tab::after, .setx-nav__item::after, .jtab::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:var(--mka) no-repeat 0 50%/100% 108%;
  opacity:0;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}
/* r807: ::after is the second pass, hidden from the RIGHT so it can come back from there */
body.ws-ai #sidebar .ainav__item::after, body.ws-ai #sidebar .ainav__chatrow::after, .ai-apps__tab::after, .setx-nav__item::after, .jtab::after{background-image:var(--mkb);clip-path:inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%)}
@keyframes lia-mk-draw{0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}48%,100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
@keyframes lia-mk-back{0%,52%{clip-path:inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
/* lit = both layers fully drawn, STATIC. A reload, a background repaint, a tab
   coming back into view: none of them replays the hand. */
body.ws-ai #sidebar .ainav__item.is-active::before, body.ws-ai #sidebar .ainav__chatrow.on::before, .ai-apps__tab.is-on::before, .setx-nav__item.is-active::before, .jtab.is-on::before,
body.ws-ai #sidebar .ainav__item.is-active::after, body.ws-ai #sidebar .ainav__chatrow.on::after, .ai-apps__tab.is-on::after, .setx-nav__item.is-active::after, .jtab.is-on::after{opacity:1;clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
/* the hand moves ONLY inside the window a pointer opens, and ONLY on the
   surface the pointer touched: shell.js sets html[data-mk-arm] to a space-
   separated list of surface names (nav apps setx jtab) on pointerdown and
   clears it 900ms later. r805: a single global arm let a click on Storage
   inside App Tools replay the sidebar row behind it, and a click in the
   Settings popup replay everything under the popup. Each surface reads only
   its own token. No will-change (r805): the layer promotion and demotion
   under the arm left stale slivers of the stroke on neighbouring rows, and
   the arm already keeps the animation rare enough. The unlit layers are
   opacity:0 as well as clipped, so nothing can survive a frame. */
html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__item.is-active::before, html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__chatrow.on::before, html[data-mk-arm~="apps"] .ai-apps__tab.is-on::before, html[data-mk-arm~="setx"] .setx-nav__item.is-active::before, html[data-mk-arm~="jtab"] .jtab.is-on::before{animation:lia-mk-draw var(--mk-ms) var(--mk-ease) both}
html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__item.is-active::after, html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__chatrow.on::after, html[data-mk-arm~="apps"] .ai-apps__tab.is-on::after, html[data-mk-arm~="setx"] .setx-nav__item.is-active::after, html[data-mk-arm~="jtab"] .jtab.is-on::after{animation:lia-mk-back var(--mk-ms) var(--mk-ease) both}
/* r820: a row lit at the moment of the press holds still under the arm; only what becomes lit draws */
.mk-hold::before,.mk-hold::after{animation:none!important}
/* the fill goes on every surface; the brightening each surface already had stays, declared at home (r803b) */
body.ws-ai #sidebar .ainav__item.is-active, body.ws-ai #sidebar .ainav__item.is-active:hover{background:none;color:var(--nav-sel-tx,#fff)}
body.ws-ai #sidebar .ainav__chatrow.on{background:none}
body.ws-ai #sidebar .ainav__chatrow.on .ainav__chat{background:none;color:var(--nav-sel-tx,#fff)}
body.ws-ai #sidebar .ainav__chatrow.on .ainav__chatic{color:var(--nav-sel-tx,#fff)}
html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__item.is-active, html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__chatrow.on .ainav__chat, html[data-mk-arm~="nav"] body.ws-ai #sidebar .ainav__chatrow.on .ainav__chatic{transition:color var(--mk-ms) var(--mk-ease)}
/* r806 (Egor, mockup variant 3): hover is the same stroke in the row's own
   ink. The WHOLE file (both paths, .30) is used as a MASK over the text colour
   at .22 on ::before only - the shape is the marker's and the grey is the
   theme's, one image for both themes. Static, no draw: hover is a pencil
   under the marker, not a second hand. ::after stays hidden on hover. */
/* r819 (Egor): the hover stroke exists only where a pointer can hover. On a phone
   a :hover rule that shows content makes iOS spend the first tap on the hover and
   the second on the click - the chat rows needed two taps, the nav items did not
   because their target is the hovered element itself. */
@media (hover:hover){
body.ws-ai #sidebar .ainav__item:not(.is-active):hover::before, body.ws-ai #sidebar .ainav__chatrow:not(.on):hover::before, .ai-apps__tab:not(.is-on):hover::before, .setx-nav__item:not(.is-active):hover::before, .jtab:not(.is-on):hover::before{
  opacity:.22;clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);
  background:var(--text);-webkit-mask:var(--mk) no-repeat 0 50%/100% 108%;mask:var(--mk) no-repeat 0 50%/100% 108%}
body.ws-ai #sidebar .ainav__item:hover, body.ws-ai #sidebar .ainav__chatrow:hover, .ai-apps__tab:hover, .setx-nav__item:hover{background:none}
}
/* one pattern per item, for good: --mk is the whole file (hover mask), --mka / --mkb its two paths */
body.ws-ai #sidebar [data-ai-new]{--mk:var(--mk-1);--mka:var(--mk-1a);--mkb:var(--mk-1b)}
body.ws-ai #sidebar [data-ai-rules]{--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
body.ws-ai #sidebar [data-ai-journal]{--mk:var(--mk-3);--mka:var(--mk-3a);--mkb:var(--mk-3b)}
body.ws-ai #sidebar [data-ai-pop="projects"]{--mk:var(--mk-4);--mka:var(--mk-4a);--mkb:var(--mk-4b)}
body.ws-ai #sidebar [data-ai-pop="apps"]{--mk:var(--mk-5);--mka:var(--mk-5a);--mkb:var(--mk-5b)}
body.ws-ai #sidebar .ainav__recent .ainav__chatrow:nth-child(5n+1){--mk:var(--mk-3);--mka:var(--mk-3a);--mkb:var(--mk-3b)}
body.ws-ai #sidebar .ainav__recent .ainav__chatrow:nth-child(5n+2){--mk:var(--mk-1);--mka:var(--mk-1a);--mkb:var(--mk-1b)}
body.ws-ai #sidebar .ainav__recent .ainav__chatrow:nth-child(5n+3){--mk:var(--mk-5);--mka:var(--mk-5a);--mkb:var(--mk-5b)}
body.ws-ai #sidebar .ainav__recent .ainav__chatrow:nth-child(5n+4){--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
body.ws-ai #sidebar .ainav__recent .ainav__chatrow:nth-child(5n+5){--mk:var(--mk-4);--mka:var(--mk-4a);--mkb:var(--mk-4b)}
.ai-apps__tab[data-apps-tab="apps"]{--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
.ai-apps__tab[data-apps-tab="tools"]{--mk:var(--mk-4);--mka:var(--mk-4a);--mkb:var(--mk-4b)}
.ai-apps__tab[data-apps-tab="storage"]{--mk:var(--mk-1);--mka:var(--mk-1a);--mkb:var(--mk-1b)}
.setx-nav__item{--mk:var(--mk-3);--mka:var(--mk-3a);--mkb:var(--mk-3b)}
.setx-nav__item[data-setx="general"]{--mk:var(--mk-1);--mka:var(--mk-1a);--mkb:var(--mk-1b)}
.setx-nav__item[data-setx="account"]{--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
.setx-nav__item[data-setx="billing"]{--mk:var(--mk-3);--mka:var(--mk-3a);--mkb:var(--mk-3b)}
.setx-nav__item[data-setx="usage"]{--mk:var(--mk-4);--mka:var(--mk-4a);--mkb:var(--mk-4b)}
.setx-nav__item[data-setx="mcp"]{--mk:var(--mk-5);--mka:var(--mk-5a);--mkb:var(--mk-5b)}
.setx-nav__item[data-setx="relay-folders"]{--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
.jtabs .jtab:nth-child(5n+1){--mk:var(--mk-2);--mka:var(--mk-2a);--mkb:var(--mk-2b)}
.jtabs .jtab:nth-child(5n+2){--mk:var(--mk-4);--mka:var(--mk-4a);--mkb:var(--mk-4b)}
.jtabs .jtab:nth-child(5n+3){--mk:var(--mk-1);--mka:var(--mk-1a);--mkb:var(--mk-1b)}
.jtabs .jtab:nth-child(5n+4){--mk:var(--mk-5);--mka:var(--mk-5a);--mkb:var(--mk-5b)}
.jtabs .jtab:nth-child(5n+5){--mk:var(--mk-3);--mka:var(--mk-3a);--mkb:var(--mk-3b)}

/* ── r1003b (Egor): the marker is OFF, and every line above it stays ─────────
   "вместо просто выделенных пунктов мы чертим маркер" - back to the plain lit
   row of r802 and earlier, on all five surfaces. Nothing above is deleted:
   the patterns, the two layers, the keyframes, the arm and the per-item
   assignments are all still here and still the only owner of the effect. This
   is a switch, not a removal, and `html[data-marker="on"]` turns the hand back
   on with one attribute.

   WHY `content:none` AND NOT `display:none` OR `opacity:0`. Without a
   `content`, a pseudo-element generates no box at all, so there is nothing for
   the lit rules, the armed keyframes or the hover mask to paint - one
   declaration switches off every state of the effect instead of three. An
   opacity of 0 would leave the boxes, the animations would still run under the
   arm, and the next reader would have to find all three places to be sure.

   AND IT TAKES THE HOVER STROKE WITH IT, which is the part that matters beyond
   the look. r819 measured that a :hover rule which reveals CONTENT costs iOS
   the first tap - it spends one on the hover and one on the click - and fixed
   it by hiding the rule behind (hover:hover). Any surface that reports
   hover:hover and is still driven by a finger gets the two taps back, and a
   chat opened from New is where Egor sees it. With no pseudo-element there is
   no content to reveal. NOT yet reproduced headless: a probe went New -> chat
   through the real handlers and the lit row, the URL and the drawn stroke were
   all correct on the FIRST press, so this is the mechanism that fits, not a
   mechanism that was measured failing.

   The fills below are r803's own list, restored from the revision that removed
   them, in the file that owns the row now rather than in the three files r803
   emptied. --nav-sel is the slab, --surface-2 the hover, both unchanged since
   r102. */
html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__item::before, html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__chatrow::before, html:not([data-marker="on"]) .ai-apps__tab::before, html:not([data-marker="on"]) .setx-nav__item::before, html:not([data-marker="on"]) .jtab::before, html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__item::after, html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__chatrow::after, html:not([data-marker="on"]) .ai-apps__tab::after, html:not([data-marker="on"]) .setx-nav__item::after, html:not([data-marker="on"]) .jtab::after{content:none}
html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__item.is-active, html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__chatrow.on, html:not([data-marker="on"]) .ai-apps__tab.is-on, html:not([data-marker="on"]) .setx-nav__item.is-active, html:not([data-marker="on"]) .jtab.is-on{background:var(--nav-sel,#30302f)}
html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__item:not(.is-active):hover, html:not([data-marker="on"]) body.ws-ai #sidebar .ainav__chatrow:not(.on):hover, html:not([data-marker="on"]) .ai-apps__tab:not(.is-on):hover, html:not([data-marker="on"]) .setx-nav__item:not(.is-active):hover, html:not([data-marker="on"]) .jtab:not(.is-on):hover{background:var(--surface-2)}




/* the AI chat frame follows the collapsed sidebar width already via var(--sidebar-w) */

/* r103: dropdown standard EVERYWHERE (chat, leads, creatives, topbars):
   #383835 surface (--dd-bg), WHITE text & icons (--text), no check marks,
   the current row is a solid --nav-sel highlight like the sidebar. */
.lia-sel__menu { color: var(--text); }
.lia-sel__menu .lia-sel__item { color: var(--text); }
.lia-sel__menu .lia-sel__item i { color: var(--text); }
.lia-sel__menu .lia-sel__item .ph-check { display: none !important; }
.lia-sel__menu .lia-sel__item.is-current { background: var(--nav-sel, #30302f); color: var(--text); }
.acct-switch__menu { background: var(--dd-bg, #383835) !important; color: var(--text); }
.acct-switch__menu .acct-switch__item { color: var(--text); }
.acct-switch__menu .acct-switch__item i { color: var(--text); }
.acct-switch__menu .ph-check { display: none !important; }
.acct-switch__menu .acct-switch__item.is-current { background: var(--nav-sel, #30302f); }
.export-dd__menu { background: var(--dd-bg, #383835) !important; color: var(--text); border-color: var(--line-2); }
.export-dd__item { color: var(--text) !important; }
.export-dd__item i { color: var(--text) !important; }
/* r103: the calendar goes the other way round — panel as dark as the sidebar,
   buttons/days on the chat background */
.dp-panel { background: var(--ink, #181817); }
.dp-panel .dp-day { color: var(--text); background: var(--canvas-bg, #1a1a19); }
.dp-panel .dp-day.is-disabled { background: none; color: var(--text-4); opacity: .38; cursor: default; }
.dp-panel .btn, .dp-panel .dp-preset { background: var(--canvas-bg, #1a1a19); color: var(--text); }
/* r104: selection must stay BLUE — the dark-day restyle above erased it */
.dp-panel .dp-day.is-sel { background: var(--accent, #007EF7) !important; color: #fff !important; }
/* r145: the JS puts .is-range on the days BETWEEN the picks — this rule said
   .in-range, so the dark-panel day background always won and the span never
   showed. Semi-transparent brand blue per Egor. */
.dp-panel .dp-day.is-range { background: rgba(0,126,247,.20) !important; }
.dp-day.is-range { background: rgba(0,126,247,.20); }
/* r145: month-forward at the newest allowed month renders like the future days */
.dp-cal__nav:disabled { opacity: .35; cursor: default; }
.dp-panel #dp-apply, .dp-panel .btn--primary { background: var(--accent, #007EF7) !important; color: #fff !important; }
/* r104: account menu — group heads are PLAIN (no dark band), the current
   account is a dark row with WHITE text (no blue), the menu is narrow and
   long names marquee on hover like the sidebar chats */
.acct-switch__menu { max-width: 264px; }
.acct-switch__group-head { background: none !important; }
.acct-switch__item.is-current { background: var(--nav-sel, #30302f) !important; }
.acct-switch__item.is-current .acct-switch__item-name { color: var(--text) !important; }
.acct-switch__item-name { max-width: 200px; overflow: hidden; white-space: nowrap; }
.acct-switch__item-name > span { display: inline-block; white-space: nowrap; transition: transform .2s linear; }
/* r104: metric chips follow the ai-chip standard */
.metric-chip {
  font: 500 11px/1 var(--font-sans);
  color: var(--accent, #007EF7);
  background: var(--chip-bg, #232321);
  border: 1px solid var(--chip-line, #343432);
  border-radius: 11px;
}
:root { --chip-bg: #232321; --chip-line: #343432; }
:root[data-theme="light"] { --chip-bg: #efeeeb; --chip-line: var(--line-2); }

/* ============================ INVARIANT (safety net) ====================
   ws-ai sidebar width is CONSTANT. If any future @media tries to change
   --sidebar-w on narrow viewports (devtools!), this block wins. Do NOT
   remove. History: the bug shipped 3 times via unscoped width media. */
body.ws-ai:not(.is-collapsed) { --sidebar-w: 292px !important; }   /* r625: TWIN of the :root value and of ai.js - all three carry the same number */

/* r108: the Liaison a-mark with a self-drawing smile — the ONE loading
   indicator across the app (Egor: no blue rings anywhere). */
@keyframes liaDraw { 0% { stroke-dashoffset: 160; } 45% { stroke-dashoffset: 0; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -160; } }
.lia-amark .sm { stroke-dasharray: 160; animation: liaDraw 2.2s linear infinite; }
.lia-amark--still .sm, .st.done .lia-amark .sm { animation: none; stroke-dashoffset: 0; }

/* r136 INVARIANT: ws-ai never shows the shell topbar. Both ws-ai screens
   (ai, maps) are hideTopbar:true, but that flag only applies inside
   loadScreen — AFTER the screen module downloads and runs. On a cold boot
   the topbar (sync + account + date) rendered and sat visible for the whole
   window. body.ws-ai is set synchronously in shell.js before first paint,
   so this rule closes the gap from frame one. */
body.ws-ai #topbar { display: none !important; }

/* ── r296 · connect-Meta card in the chat + the first-run popup ──────────
   Emitted by the runner on error_class meta_not_connected, and by boot()
   when /meta/connection-state says should_prompt. Accent is the brand blue
   only; red is reserved for the expired state, where it is a danger signal. */
.lia-connect{margin-top:12px;max-width:430px;padding:15px 16px;border-radius:11px;
  background:rgba(255,255,255,0.032);border:1px solid var(--line-2)}
.lia-connect__t{font-family:var(--font-display,inherit);font-size:13.5px;font-weight:600;margin-bottom:5px;color:var(--text)}
.lia-connect__m{font-size:12.5px;color:var(--text-2);margin-bottom:13px;line-height:1.5}
.lia-connect__b{display:inline-block;font-size:13.5px;font-weight:500;line-height:1;
  padding:10px 17px;border-radius:9px;background:var(--accent);color:#fff;text-decoration:none;transition:.14s}
.lia-connect__b:hover{filter:brightness(1.09)}
.lia-connect__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.lia-cx{position:fixed;inset:0;z-index:9000;background:rgba(8,10,18,0.55);
  display:flex;align-items:center;justify-content:center;padding:16px}
.lia-cx__d{width:100%;max-width:412px;padding:24px 24px 20px;border-radius:14px;
  background:var(--dd-bg,#383835);border:1px solid var(--line-2);box-shadow:0 18px 48px rgba(0,0,0,0.46)}
.lia-cx__e{font-family:var(--font-display,inherit);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.lia-cx__e.is-danger{color:#E5484D}
.lia-cx__t{font-family:var(--font-display,inherit);font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}
.lia-cx__m{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:18px}
.lia-cx__l{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line-2)}
.lia-cx__l li{font-size:13px;color:var(--text-2);padding:9px 0;border-bottom:1px solid var(--line-2)}
.lia-cx__l b{color:var(--text);font-weight:500}
.lia-cx__a{display:flex;gap:9px;justify-content:flex-end}
.lia-cx__btn{font-size:13.5px;font-weight:500;border-radius:9px;padding:9px 17px;
  border:1px solid transparent;cursor:pointer;transition:.14s;font-family:inherit}
.lia-cx__btn--p{background:var(--accent);color:#fff}
.lia-cx__btn--p:hover{filter:brightness(1.09)}
.lia-cx__btn--g{background:transparent;color:var(--text-2);border-color:var(--line-2)}
.lia-cx__btn--g:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
.lia-cx__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .lia-cx{animation:lia-cx-fade 140ms ease-out}
  .lia-cx__d{animation:lia-cx-pop 180ms cubic-bezier(.2,.8,.2,1)}
}
@keyframes lia-cx-fade{from{opacity:0}to{opacity:1}}
@keyframes lia-cx-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* r313: shared dialling codes (+1 NANP, +7 RU/KZ) are shown as the code, not
   as a guessed country. Muted so they read as "known but not resolved". */
.cc-badge--shared { opacity: .62; letter-spacing: 0; }

/* r335: the main-ad-account picker in Settings → Account. One control: choosing
   a row IS the action, there is no confirm button. */
.setx-sel{height:34px;min-width:220px;max-width:100%;padding:0 12px;border-radius:9px;
  background:var(--card,var(--surface-2));border:1px solid var(--line-2);color:var(--text);
  font:500 13px var(--font-sans);cursor:pointer}
.setx-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the account chip while its default is still loading */
[data-ai-accchip].is-loading [data-accchip-t]{
  display:inline-block;min-width:104px;height:11px;border-radius:4px;
  background:rgba(255,255,255,.09);animation:ai-chip-pulse 1.1s ease-in-out infinite }
@keyframes ai-chip-pulse{0%,100%{opacity:.5}50%{opacity:.85}}

/* r341: the per-field editors on a write card sit on the same grid as the name
   and text rows - the button select was noticeably taller than the inputs. */
.bd-card__name select,
.bd-card__name input{height:30px;font:400 12.5px var(--font-sans);padding:0 10px;
  border-radius:8px;background:var(--card,var(--surface-2));border:1px solid var(--line-2);color:var(--text)}
.bd-card__name select{max-width:190px;cursor:pointer}
.bd-card__name select:focus-visible,
.bd-card__name input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* r342: one grid for every editor on a write card - label left, control right,
   all the same 30px height. The button select used to be visibly taller than
   the inputs beside it. */
.bd-card__fld{display:flex;align-items:center;gap:10px;margin-top:8px}
/* r787: a class rule with display:flex BEATS the browser's [hidden] rule, so
   `capRow.hidden = true` set an attribute that decided nothing and the Cap
   row was visible on Lowest cost too, where it means nothing. The repo knows
   this trap by name (ai.js:14790, r181) and keeps targeted resets for a dozen
   classes; .bd-card__fld was simply not among them. Found by measuring
   getComputedStyle in a browser, not by reading - the attribute is set
   correctly and every static check passes. */
.bd-card__fld[hidden]{display:none !important}
.bd-card__fld > span{flex:0 0 96px;font:500 10.5px var(--font-sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3)}
.bd-card__fldc{flex:1;display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.bd-card__fld input,.bd-card__fld select{height:30px;font:400 12.5px var(--font-sans);padding:0 10px;
  border-radius:8px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);min-width:0}
.bd-card__fld input{flex:1 1 180px}
.bd-card__fld select{flex:0 0 168px;cursor:pointer}
.bd-card__fld input:focus-visible,.bd-card__fld select:focus-visible{
  outline:1px solid var(--accent);outline-offset:0}
.bd-card__ctaval{flex:1 1 160px}
.bd-card__note{font:400 10.5px var(--font-sans);color:var(--text-4)}
.bd-card__note--wide{margin:6px 0 0 106px}

/* r342: link chips carry the whole URL, so they wrap instead of truncating. */
.ai__chip--url{max-width:100%;white-space:normal;height:auto;min-height:20px;
  padding:2px 8px;text-align:left;overflow-wrap:anywhere}

/* r343: ONE class for every control on a write card. lia-sel__btn is shared
   with the rest of the app and carries a taller frame, so a card select stood
   out next to the inputs beside it. Scoped here, nothing else can override it. */
.bd-card__ctl{height:30px;font:400 12.5px var(--font-sans);padding:0 10px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);min-width:0;box-sizing:border-box}
select.bd-card__ctl{flex:0 0 168px;cursor:pointer;-webkit-appearance:none;appearance:none;
  padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input.bd-card__ctl{flex:1 1 180px}
.bd-card__ctl:focus-visible{outline:1px solid var(--accent);outline-offset:0}

/* r345 (P5.2): the audience strip under the map. Deliberately compact - geo is
   chosen on the map itself, so age and gender are a narrow line beneath it
   rather than two more full-width form rows. */
.bd-card__aud{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.bd-card__audl{font:500 10.5px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.bd-card__auds{font:400 11px var(--font-sans);color:var(--text-4)}
.bd-card__audn{width:52px;height:26px;text-align:center;font:400 12px var(--font-sans);
  border-radius:7px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  -moz-appearance:textfield}
.bd-card__audn::-webkit-outer-spin-button,.bd-card__audn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bd-card__audn:focus-visible{outline:1px solid var(--accent);outline-offset:0}
.bd-card__seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:2px}
.bd-card__seg button{border:0;background:none;padding:3px 9px;border-radius:6px;cursor:pointer;
  font:500 11px var(--font-sans);color:var(--text-3)}
.bd-card__seg button.is-on{background:var(--accent);color:#fff}

/* r346: what a new ad inherits from its ad set. Read-only - the settings live
   on the ad set, this only reports them so the audience is visible without
   leaving the chat. */

/* r347: tabs on the ad-set card. Only ad sets get them - a campaign is four
   fields and an ad has no audience of its own. */
.bd-card__tabs{display:flex;gap:1px;margin:2px 0 9px;border-bottom:1px solid var(--line)}
.bd-card__tab{padding:6px 12px;font:500 12px var(--font-sans);color:var(--text-3);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer}
.bd-card__tab.is-on{color:var(--text);border-bottom-color:var(--accent)}
.bd-card__tab:hover{color:var(--text-2)}

/* r348 (Egor): ONE geometry for every control on a write card. Selects, text
   inputs, number inputs and the segmented toggles all sit at 30px on the same
   grid - no borrowed widths, no control louder than its neighbours. Explicitly
   overrides lia-sel__btn, which is shared with the rest of the app and taller. */
.bd-card .lia-sel__btn,
.bd-card__fld .lia-sel__btn{height:30px;padding:0 10px;border-radius:8px;
  font:400 12.5px var(--font-sans);color:var(--text)}
.bd-card__ctl--num{flex:0 0 76px;text-align:center;-moz-appearance:textfield}
.bd-card__ctl--num::-webkit-outer-spin-button,
.bd-card__ctl--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* the segment matches the 30px row rather than sitting proud of it */
.bd-card__fld .bd-card__seg{height:30px;align-items:center}
.bd-card__fld .bd-card__seg button{height:24px;line-height:24px;padding:0 10px}

/* r349: read-only audience chips + settings rows.
   Age is chosen on the map, so its chip reports rather than duplicates - one
   value, one place to edit. Gender keeps a control because the map has no room
   for it. The three targeting editors became rows: as equal buttons they read
   like a toolbar and hid what was actually set. */
.bd-card__sums{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bd-card__sum{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font:400 11.5px var(--font-sans);
  color:var(--text-2);cursor:default}
.bd-card__sum b{color:var(--text);font-weight:500}
.bd-card__sum i{font-style:normal;color:var(--text-4);font-size:10px}
.bd-card__sum--act{cursor:pointer;border-color:var(--line-2);background:rgba(255,255,255,.06);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-card__sum--act:hover{border-color:var(--accent);color:var(--text)}
.bd-card__sum--sel select{background:none;border:0;color:var(--text);font:500 11.5px var(--font-sans);
  cursor:pointer;padding:0 2px}
/* r356: .bd-card__hlp removed - its markup left with the tooltips in r354. */
/* the segment matches the selects beside it instead of running wider */
.bd-card__fld .bd-card__seg{flex:0 0 190px}
.bd-card__fld select.bd-card__ctl{flex:0 0 190px}

/* r350: info icons and locks removed entirely in r354; their rules left with
   them (r356). */
/* (6) cap and schedule keep the same width as every other control */
.bd-card__fld [data-card-sched]{flex:0 0 190px}
.bd-card__fld [data-card-sched] button[disabled]{opacity:.45;cursor:not-allowed}
/* (8) the attribution list was clipping its last option */
.bd-card__fld select.bd-card__ctl{max-height:none;line-height:1.2;padding-top:0;padding-bottom:0}

/* r350: the map jumped and flickered when switching tabs - it was being
   re-measured on every pane change. Fixed height and contained paint keep it
   still; the edit hint sits INSIDE the map rather than reflowing below it. */
.bd-card__geo{contain:layout paint;min-height:150px}
.bd-card__geomap{height:150px !important;contain:strict}
[data-tabpane]{contain:layout}

/* r351: the CAP field stretched to 582px. `input.bd-card__ctl` (tag + class)
   outweighs `.bd-card__ctl--num` (class alone), so the narrow width never
   applied - the inspector showed it plainly. Matching specificity fixes it. */
input.bd-card__ctl--num{flex:0 0 76px}
/* the segment and its row stop reserving space they do not use */
.bd-card__fld [data-card-sched]{flex:0 0 auto}
.bd-card__fld .bd-card__seg{flex:0 0 auto}
.bd-card__fld .bd-card__seg button{padding:0 12px}

/* r351 (Egor): tooltips on HOVER, never on click. Light-on-dark as before, but
   wrapping to several lines instead of one long strip. The icon sits with the
   control, not next to the label - that is where the question is asked. */

/* r352: three bugs from one careless pass. */

/* r352: the label column was a hard 96px, so a short word like "Name" left a
   visible hole before its input. Auto width with a floor keeps the rows aligned
   without stranding the short ones. */
.bd-card__fld > span{flex:0 0 auto;min-width:84px}

/* r353: ONE tooltip rule, written once (removed with the tooltips in r354). */

/* r354: label column sized to its content. The 84px floor still stranded short
   words like "Name" - the inspector showed the span itself at 84px with the
   input starting well past it. Rows stay readable without a fixed gutter. */
.bd-card__fld > span{flex:0 0 auto;min-width:0;margin-right:2px}
.bd-card__fld{gap:12px}

/* r679: the section head of the chat list, in FRAME ZERO. These three rules
   live in screens/ai.js as well, but ai.js arrives after the cached nav is
   already on screen - so on a reload the arrow rendered as an unstyled block
   button: white, full width, sitting under the label. AGENTS: frame zero owns
   what must not flicker. Same shape as the quick-chat icon fix (r505). */
.ainav__sechead{display:flex;align-items:center;width:100%}
.ainav__sechead .ainav__sec{width:auto;flex:1 1 auto;min-width:0;margin-top:0}
.ainav__secgo{flex:0 0 22px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--text-3);cursor:pointer;border-radius:6px;opacity:0;transition:opacity .12s,background .12s}
.ainav__secgo > i{font-size:12px}
.ainav__sechead:hover .ainav__secgo,.ainav__secgo:focus-visible{opacity:1}
.ainav__secgo:hover{background:var(--surface-2);color:var(--text)}
/* r679: the first head in the list must not add its own top margin on top of
   the list's 28px lead-in. With a Pinned section present the gap looked right
   and without one it looked like a hole. */
body.ws-ai .ainav__lists > :first-child{margin-top:0}
body.ws-ai .ainav__sechead{margin-top:6px}
body.ws-ai .ainav__lists > .ainav__sechead:first-child{margin-top:0}

/* r716: the hover tooltip, moved with its renderer from ai.js to the shell so
   Settings can use it too. Fixed and on the body, because an ancestor that
   scrolls clips anything inside it - see r696. */
.ai__wtip{position:fixed;z-index:9700;white-space:nowrap;background:var(--tip-bg,#383835);color:var(--tip-tx,#fbfbf9);border:1px solid var(--line-2);border-radius:7px;padding:4px 8px;font:600 10.5px var(--font-sans);box-shadow:0 6px 18px -10px rgba(0,0,0,.5);pointer-events:none}
input,textarea,select{text-indent:1px}
/* r845 (Egor, still clipped): r841 gave the ink a pixel and TOOK IT BACK with
   a negative margin, which put the overhang right back outside the clipping
   parent. Measured from the file: the lean is 54 units of 1000, so 2px covers
   it to 32px type. The text moves 2px right; nothing is cut. */
.bd-card__sum,.ai__chip,.jbub__who,.ainav__cttl,.tk-card__t,.ainav__chat span,.ai-fw__title{padding-left:2px}

/* r848: the footer clips too */
.profile__name,.profile__plan{padding-left:2px}

/* r1034: Nunito on the sidebar (#sidebar: .ainav is only a class prefix, no element wears it) (its own --font-sans, so every rule that names the token follows) and on the chat title */
/* r1034b: the app is Nunito now; what Lia writes keeps the old faces, for now */
.ai__atext,.ai__thinkbody{--font-sans:'Inter',system-ui,sans-serif;--font-display:'Inter Tight','Inter',sans-serif;--font-mono:'Inter',system-ui,sans-serif}
html .ai__head h1{font-family:var(--font-brand);font-weight:800}

/* r1034b: a Phosphor <i> now carries the set's glyph inside it, keeping its classes (every rule and lookup by .ph-NAME still finds it) and its 1em box (every font-size rule still sizes it); Phosphor's own glyph is switched off */
i.lia-phi::before{content:none!important}i.lia-phi>svg.lia-ph{width:1em!important;height:1em!important;flex:0 0 1em!important;vertical-align:-.125em;display:inline-block}
/* r1034b: the sidebar head's two buttons at the rows' size */
body.ws-ai #sidebar .ainav__ic .lia-ico,#sidebar .ainav__ic .lia-ico{width:18px;height:18px;flex:0 0 18px}   /* r1034c (Egor): smaller still - their glyphs fill more of the box than a row's */
/* r1035b: the single-day picker (an end date): no presets, one month */
.dp-overlay.dp-single .dp-presets{display:none!important}
.dp-overlay.dp-single .dp-cal+.dp-cal{display:none!important}

/* r1037b (Egor): the Liaison logo is back in the sidebar head; r1037's "Lia" word is withdrawn */

/* r1050c (Egor: "in the sidebar a trace of the marker stays, from when the rows were underlined with it"): it is not
   the marker (off since r1003b) - it is the browser's own focus ring around a row's button, drawn round the button and
   its menu, after a click or a menu choice moved focus there. The ring goes; the active row's fill already says where you are. */
body.ws-ai #sidebar .ainav__chatrow :focus, body.ws-ai #sidebar .ainav__item:focus, body.ws-ai #sidebar .ainav__chatrow:focus{outline:none}