/* ════════════════════════════════════════════════════════════════════
   CAPACOTY SHARED SIDEBAR — stylesheet (single source of truth).
   Externalized from sidebar.js's injected <style> so CSP style-src can
   drop 'unsafe-inline'. Loaded via <link>: same-origin on the hub,
   cross-origin (https://my.capacoty.app) on the v2 tool subdomains.
   ════════════════════════════════════════════════════════════════════ */
  /* ── Tokens — light + dark. Inherits [data-theme] from <html>. */
  :root {
    --caw-bg:        #f4f1ea;
    --caw-panel:     #ebebeb;
    --caw-bd:        rgba(14,21,48,.08);
    --caw-bd2:       rgba(14,21,48,.14);
    --caw-tx:        #0e1530;
    --caw-tx70:      rgba(14,21,48,.70);
    --caw-tx55:      rgba(14,21,48,.55);
    --caw-tx40:      rgba(14,21,48,.40);
    --caw-hover:     rgba(14,21,48,.06);
    --caw-active:    rgba(31,111,71,.12);
    --caw-active-fg: #1f6f47;
    --caw-accent:    #d4f564;
    --caw-tip-bg:    #0e1530;
    --caw-tip-fg:    #ffffff;
    --caw-modal-bg:  #ffffff;
    --caw-modal-tx:  #0e1530;

    --caw-sb-w:          60px;
    --caw-sb-w-expanded: 240px;
  }
  [data-theme="dark"] {
    --caw-bg:        #141414;
    --caw-panel:     #1a1a1a;
    --caw-bd:        rgba(255,255,255,.08);
    --caw-bd2:       rgba(255,255,255,.14);
    --caw-tx:        #f1efe8;
    --caw-tx70:      rgba(241,239,232,.72);
    --caw-tx55:      rgba(241,239,232,.55);
    --caw-tx40:      rgba(241,239,232,.40);
    --caw-hover:     rgba(255,255,255,.05);
    --caw-active:    rgba(78,168,123,.18);
    --caw-active-fg: #cdf075;
    --caw-accent:    #cdf075;
    --caw-tip-bg:    #f1efe8;
    --caw-tip-fg:    #0e1530;
    --caw-modal-bg:  #242424;
    --caw-modal-tx:  #f1efe8;
  }

  /* ── Sidebar shell ───────────────────────────────────────────────── */
  .caw-sb {
    position: fixed; top: 0; left: 0;
    width: var(--caw-sb-w); height: 100vh;
    background: var(--caw-panel);
    border-right: 1px solid var(--caw-bd);
    display: flex; flex-direction: column;
    z-index: 150;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--caw-tx);
    overflow: hidden;
    box-sizing: border-box;
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
  }
  .caw-sb *, .caw-sb *::before, .caw-sb *::after { box-sizing: border-box; }
  .caw-sb.caw-sb-open { width: var(--caw-sb-w-expanded); }
  .caw-sb:has(.caw-user-menu-wrap.open) { z-index: 501; }

  /* Top row — brand icon button cross-fades on hover to a panel-left
     toggle icon; click toggles the sidebar. */
  .caw-sb-top {
    height: 56px;
    display: flex; align-items: center;
    padding: 0 14px;
    flex-shrink: 0;
  }
  .caw-sb-brand {
    appearance: none; background: transparent; border: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
    position: relative;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
  }
  .caw-sb-brand:hover { background: var(--caw-hover); }
  .caw-sb-brand-icon,
  .caw-sb-brand-toggle {
    position: absolute;
    inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .18s ease, transform .22s cubic-bezier(.4, 0, .2, 1);
  }
  .caw-sb-brand-icon img {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
  }
  .caw-sb-brand-icon .caw-img-light { display: block; }
  .caw-sb-brand-icon .caw-img-dark  { display: none; }
  [data-theme="dark"] .caw-sb-brand-icon .caw-img-light { display: none; }
  [data-theme="dark"] .caw-sb-brand-icon .caw-img-dark  { display: block; }
  .caw-sb-brand-toggle {
    opacity: 0;
    transform: scale(.85);
    color: var(--caw-tx70);
  }
  .caw-sb-brand-toggle svg { width: 18px; height: 18px; }
  /* Hovering ANYWHERE in the sidebar swaps the brand icon to the toggle
     icon — signals that the whole rail is a click-target for open/close. */
  .caw-sb:hover .caw-sb-brand-icon { opacity: 0; transform: scale(.85); }
  .caw-sb:hover .caw-sb-brand-toggle { opacity: 1; transform: scale(1); color: var(--caw-tx); }

  /* Nav scroll area */
  .caw-sb-scroll {
    flex: 1;
    overflow-y: auto; overflow-x: hidden;
    padding: 4px 6px 8px;
  }
  .caw-sb-scroll::-webkit-scrollbar { width: 3px; }
  .caw-sb-scroll::-webkit-scrollbar-thumb { background: var(--caw-bd2); border-radius: 3px; }

  /* Secondary nav — anchored above user pill, shares .caw-sb-item rules */
  .caw-sb-secondary {
    flex-shrink: 0;
    padding: 6px 6px 8px;
    border-top: 1px solid var(--caw-bd);
  }

  /* Nav item — collapsed centres the icon; expanded left-aligns w/ label */
  .caw-sb-item {
    appearance: none; background: transparent; border: none;
    width: 100%; padding: 0;
    display: flex; align-items: center;
    gap: 12px;
    height: 40px;
    border-radius: 10px;
    color: var(--caw-tx70);
    cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 500;
    text-align: left;
    transition: background .12s, color .12s, padding .25s cubic-bezier(.4, 0, .2, 1);
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    justify-content: center;
  }
  .caw-sb.caw-sb-open .caw-sb-item {
    justify-content: flex-start;
    padding-left: 8px; padding-right: 10px;
  }
  .caw-sb-item:hover { background: var(--caw-hover); color: var(--caw-tx); }
  .caw-sb-item.active {
    background: var(--caw-active);
    color: var(--caw-active-fg);
  }
  .caw-sb-item.active .caw-sb-ic { color: var(--caw-active-fg); }
  .caw-sb-item:disabled,
  .caw-sb-item.disabled { cursor: not-allowed; opacity: .55; }
  .caw-sb-item:disabled:hover,
  .caw-sb-item.disabled:hover { background: transparent; color: var(--caw-tx70); }

  .caw-sb-ic {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: inherit;
  }
  .caw-sb-ic svg { width: 18px; height: 18px; }

  /* Labels and badges hidden when collapsed so the icon truly centres */
  .caw-sb-lbl,
  .caw-sb-badge { display: none; }
  .caw-sb.caw-sb-open .caw-sb-lbl {
    display: block;
    flex: 1;
    opacity: 1;
    transition: opacity .15s .06s;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .caw-sb.caw-sb-open .caw-sb-badge {
    display: inline-block;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em;
    background: var(--caw-accent); color: #0a0a0a;
    padding: 2px 7px; border-radius: 999px;
    flex-shrink: 0;
    transition: opacity .15s .1s;
  }

  /* Floating tooltip — fixed element appended to <body>, positioned via JS */
  .caw-sb-tip-floating {
    position: fixed;
    pointer-events: none;
    transform: translateY(-50%) translateX(-6px);
    opacity: 0;
    background: var(--caw-tip-bg);
    color: var(--caw-tip-fg);
    font-size: 11.5px; font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    transition: opacity .15s, transform .2s cubic-bezier(.4, 0, .2, 1);
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    letter-spacing: -.005em;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .caw-sb-tip-floating.caw-show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition-delay: .15s;
  }

  /* Footer — user pill */
  .caw-sb-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--caw-bd);
    padding: 8px 8px 10px;
    position: relative;
  }

  /* ── User menu trigger (new pill — avatar + name + plan + chev) ─── */
  .caw-user-menu-wrap {
    position: static;
    display: block;
  }
  .caw-user-menu-btn {
    appearance: none; background: transparent;
    border: 1px solid transparent;
    width: 100%;
    padding: 6px 8px 6px 6px;
    border-radius: 12px;
    display: flex; align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
    color: var(--caw-tx);
    justify-content: flex-start;
  }
  .caw-user-menu-btn:hover {
    background: var(--caw-hover);
    border-color: var(--caw-bd);
  }
  /* Collapsed: hide name+chev, centre avatar */
  .caw-sb:not(.caw-sb-open) .caw-user-menu-btn { justify-content: center; padding: 6px; }
  .caw-sb:not(.caw-sb-open) .caw-user-menu-name,
  .caw-sb:not(.caw-sb-open) .caw-user-menu-chevron { display: none; }

  /* Lime avatar — keeps the marketing accent */
  #caw-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    background: var(--caw-accent); color: #0a0a0a;
    letter-spacing: -.02em; line-height: 1;
  }
  .caw-user-menu-name {
    flex: 1; min-width: 0;
    overflow: hidden;
    text-align: left;
    display: flex; flex-direction: column;
  }
  .caw-user-menu-name .caw-user-name-top {
    font-size: 12.5px; font-weight: 600;
    color: var(--caw-tx);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .caw-user-menu-name .caw-user-name-sub {
    font-size: 10.5px; color: var(--caw-tx55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
  }
  .caw-user-menu-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--caw-tx40);
    flex-shrink: 0;
    transition: color .15s, transform .15s;
  }
  .caw-user-menu-chevron svg { width: 14px; height: 14px; }
  .caw-user-menu-btn:hover .caw-user-menu-chevron { color: var(--caw-tx); }

  /* ── User dropdown — centred modal popup (PRESERVED) ────────────── */
  .caw-user-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(14,21,48,.45);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    z-index: 499;
    transition: opacity .22s ease;
  }
  body.caw-user-modal-open .caw-user-modal-backdrop {
    opacity: 1; pointer-events: auto;
  }
  .caw-user-dropdown {
    display: none; position: fixed;
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: 380px; max-width: calc(100vw - 32px);
    max-height: min(85vh, 720px);
    z-index: 500;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 80px -20px rgba(14,21,48,.40), 0 12px 32px -12px rgba(14,21,48,.18);
    border: 1px solid rgba(14,21,48,.10);
    overflow: hidden;
    color: #0e1530;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .caw-user-menu-wrap.open .caw-user-dropdown {
    display: block;
    animation: cawUserModalIn .22s cubic-bezier(.34, 1.2, .64, 1) both;
  }
  @keyframes cawUserModalIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .caw-ud-hero {
    background: #0e1530; color: #ffffff;
    padding: 22px 22px 18px;
    background-image: radial-gradient(circle at 85% 20%, rgba(47,130,255,.10) 0%, transparent 60%);
  }
  .caw-ud-hero-row { display: flex; align-items: flex-start; gap: 14px; }
  .caw-ud-hero-info { flex: 1; min-width: 0; }
  .caw-ud-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 600; flex-shrink: 0;
    background: #dde4ff; color: #1a3edf;
    margin-bottom: 10px; letter-spacing: -.01em;
  }
  .caw-ud-name {
    font-size: 16px; font-weight: 500; color: #ffffff;
    letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .caw-ud-email { font-size: 12px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .caw-ud-ahpra { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
  .caw-ud-ring { flex-shrink: 0; width: 72px; height: 72px; position: relative; margin-top: -2px; }
  .caw-ud-ring svg { transform: rotate(-90deg); display: block; }
  .caw-ud-ring .caw-ring-bg { fill: none; stroke: rgba(244,240,231,.14); stroke-width: 6; }
  .caw-ud-ring .caw-ring-fg { fill: none; stroke: url(#cawUdRingGrad); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
  .caw-ud-ring .caw-ring-fg.warn   { stroke: #fbbf24; }
  .caw-ud-ring .caw-ring-fg.danger { stroke: #ff8a6b; }
  .caw-ud-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1;
  }
  .caw-ud-ring-num { font-size: 19px; font-weight: 500; color: #ffffff; letter-spacing: -.02em; }
  .caw-ud-ring-cap { font-size: 9px; color: rgba(255,255,255,.7); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
  .caw-ud-meta-row { display: flex; gap: 8px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
  .caw-ud-pill {
    font-size: 10px; padding: 3px 10px;
    border-radius: 999px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(47,130,255,.18); color: #7ab8f5;
  }
  .caw-ud-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .caw-ud-pill.trialing  { background: rgba(252,255,168,.18); color: #f5eeaa; }
  .caw-ud-pill.past_due  { background: rgba(254,226,226,.22); color: #fca5a5; }
  .caw-ud-pill.cancelled { background: rgba(244,240,231,.10); color: rgba(255,255,255,.7); }
  .caw-ud-renews { font-size: 11px; color: rgba(255,255,255,.7); }
  .caw-ud-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px;
    border-bottom: 1px solid rgba(14,21,48,.10);
    background: #ffffff;
  }
  .caw-ud-action {
    padding: 12px 14px; border-radius: 18px; background: #fbfaf6;
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; border: 1px solid transparent;
    transition: all .15s;
    font-family: inherit; text-align: left; width: 100%;
  }
  .caw-ud-action:hover { background: #ffffff; border-color: rgba(14,21,48,.10); transform: translateY(-1px); }
  .caw-ud-action:disabled { opacity: .55; cursor: not-allowed; transform: none; }
  .caw-ud-action:disabled:hover { background: #fbfaf6; border-color: transparent; transform: none; }
  .caw-ud-action svg { color: #2a50f3; flex-shrink: 0; }
  .caw-ud-action-t { font-size: 12.5px; font-weight: 600; color: #0e1530; letter-spacing: -.005em; }
  .caw-ud-action-d { font-size: 11px; color: rgba(14,21,48,.62); line-height: 1.35; }
  .caw-ud-action.warn { background: #fcffa8; border-color: rgba(251,191,36,.4); }
  .caw-ud-action.warn:hover { background: #f8fb95; border-color: #f59e0b; }
  .caw-ud-action.warn svg { color: #92400e; }
  .caw-ud-action.warn .caw-ud-action-t { color: #6b4a00; }
  .caw-ud-action.warn .caw-ud-action-d { color: #8b6200; }
  .caw-ud-logout {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; font-family: inherit;
    font-size: 13px; color: #a42a2a;
    cursor: pointer; transition: background .12s;
    border: none; background: none; width: 100%; text-align: left;
    font-weight: 500;
  }
  .caw-ud-logout:hover { background: #fef2f2; }
  .caw-ud-logout svg { flex-shrink: 0; color: #a42a2a; }

  /* ── Tool-picker modal ──────────────────────────────────────────── */
  .caw-modal-picker-backdrop {
    position: fixed; inset: 0;
    background: rgba(14,21,48,.45);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    z-index: 200;
    transition: opacity .2s ease;
  }
  [data-theme="dark"] .caw-modal-picker-backdrop { background: rgba(0,0,0,.72); }
  body.caw-tool-picker-open .caw-modal-picker-backdrop {
    opacity: 1; pointer-events: auto;
  }
  .caw-modal-picker {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    width: 620px; max-width: calc(100vw - 32px);
    max-height: min(86vh, 720px);
    background: var(--caw-modal-bg);
    color: var(--caw-modal-tx);
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(14,21,48,.40),
                0 12px 32px -12px rgba(14,21,48,.18);
    border: 1px solid var(--caw-bd);
    z-index: 210;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.2, .64, 1);
    overflow: hidden;
    display: flex; flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  body.caw-tool-picker-open .caw-modal-picker {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
  .caw-modal-picker-head {
    padding: 22px 24px 14px;
    display: flex; align-items: flex-start; gap: 12px;
    border-bottom: 1px solid var(--caw-bd);
  }
  .caw-modal-picker-head-info { flex: 1; min-width: 0; }
  .caw-modal-picker-title {
    font-size: 17px; font-weight: 600;
    letter-spacing: -.01em;
    color: var(--caw-modal-tx);
    margin-bottom: 2px;
  }
  .caw-modal-picker-sub {
    font-size: 12.5px;
    color: var(--caw-tx55);
  }
  .caw-modal-picker-close {
    appearance: none; background: transparent; border: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--caw-tx55); cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .caw-modal-picker-close:hover { background: var(--caw-hover); color: var(--caw-modal-tx); }
  .caw-modal-picker-close svg { width: 16px; height: 16px; }
  .caw-modal-picker-grid {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
  }
  .caw-modal-picker-tool {
    appearance: none; background: transparent;
    border: 1px solid var(--caw-bd);
    border-radius: 14px;
    padding: 14px;
    display: flex; flex-direction: column;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, transform .12s;
    position: relative;
  }
  .caw-modal-picker-tool:hover {
    background: var(--caw-hover);
    border-color: var(--caw-bd2);
    transform: translateY(-1px);
  }
  .caw-modal-picker-tool:disabled {
    cursor: not-allowed; opacity: .6;
  }
  .caw-modal-picker-tool:disabled:hover { transform: none; background: transparent; border-color: var(--caw-bd); }
  .caw-modal-picker-tool-ic {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
  }
  .caw-modal-picker-tool-ic svg { width: 20px; height: 20px; }
  .caw-modal-picker-tool-ic--ask    { background: #c8e814; color: #1a1a18; }
  .caw-modal-picker-tool-ic--fca    { background: #327e58; }
  .caw-modal-picker-tool-ic--at     { background: #7b3aa6; }
  .caw-modal-picker-tool-ic--hal    { background: #6db8e8; }
  .caw-modal-picker-tool-ic--pr     { background: #ea893a; }
  .caw-modal-picker-tool-ic--chm    { background: #b794d4; color: #2b1d3a; }
  .caw-modal-picker-tool-ic--sah    { background: #2fb8a3; }
  .caw-modal-picker-tool-ic--access { background: #6e7a8a; }
  .caw-modal-picker-tool-ic--athm   { background: #4a6fa1; }
  .caw-modal-picker-tool-name {
    font-size: 13.5px; font-weight: 600;
    color: var(--caw-modal-tx);
    letter-spacing: -.005em;
  }
  .caw-modal-picker-tool-desc {
    font-size: 11.5px;
    color: var(--caw-tx55);
    line-height: 1.4;
  }
  .caw-modal-picker-tool-soon {
    position: absolute;
    top: 12px; right: 12px;
    font-size: 9px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--caw-hover);
    color: var(--caw-tx55);
    padding: 2px 7px; border-radius: 999px;
  }

  /* ── Feedback + support + account modals (PRESERVED) ────────────── */
  .caw-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 600;
    align-items: center; justify-content: center; padding: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .caw-modal-overlay.open { display: flex; }
  .caw-modal-box {
    background: #ffffff; border-radius: 14px;
    padding: 26px 26px 22px; width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    color: #0e1530;
  }
  .caw-modal-box.feedback { max-width: 460px; }
  .caw-modal-box.support  { max-width: 460px; }
  .caw-modal-box.account  { max-width: 420px; }
  .caw-modal-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
  }
  .caw-modal-title { font-size: 16px; font-weight: 700; color: #0e1530; }
  .caw-modal-close {
    background: none; border: none; cursor: pointer;
    color: rgba(14,21,48,.42); font-size: 20px; line-height: 1; padding: 2px 6px;
  }
  .caw-modal-desc { font-size: 13px; color: rgba(14,21,48,.62); margin-bottom: 14px; line-height: 1.6; }
  .caw-modal-text {
    width: 100%; border: 1px solid rgba(14,21,48,.20); border-radius: 8px;
    padding: 10px 13px; font-size: 13.5px; font-family: inherit;
    color: #0e1530; background: #ebecef; resize: vertical; outline: none;
  }
  .caw-modal-err { font-size: 12.5px; color: #dc2626; margin-top: 8px; display: none; }
  .caw-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
  .caw-btn {
    font-family: inherit; font-weight: 600; font-size: 13.5px;
    padding: 10px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: all .15s;
  }
  .caw-btn-ghost { background: transparent; border-color: rgba(14,21,48,.14); color: #0e1530; }
  .caw-btn-ghost:hover { background: rgba(14,21,48,.05); }
  .caw-btn-primary { background: #2a50f3; color: #ffffff; }
  .caw-btn-primary:hover { background: #1a3edf; }
  .caw-btn-primary:disabled { opacity: .6; cursor: default; }

  /* Toast */
  .caw-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: #ffffff; color: #0e1530;
    border: 1px solid rgba(14,21,48,.10);
    padding: 10px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 999; opacity: 0; transform: translateY(10px);
    transition: all .3s; pointer-events: none; max-width: 320px; line-height: 1.5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  /* ── Tool-page layout shim ────────────────────────────────────────
     On pages with a left-edge .steps panel (fca/at/hal/pr/chm/sah):
       1. Reduce the tool's own --sidebar-w (was 280) → 240.
       2. Push .steps / .app-header / .app-layout right by 60px (the
          collapsed partial width) — just enough to clear the rail.
       3. When the partial is OPEN it OVERLAYS the steps panel via a
          higher z-index + drop shadow — the workspace stays put. */
  body.caw-tool-page {
    --sidebar-w: 240px;
  }
  body.caw-tool-page #pages-content,
  body.caw-tool-page #step-content {
    zoom: 0.9;
  }
  body.caw-tool-page .steps {
    left: var(--caw-sb-w) !important;
    width: var(--sidebar-w) !important;
  }
  body.caw-tool-page .app-header {
    left: calc(var(--caw-sb-w) + var(--sidebar-w)) !important;
    width: calc(100% - var(--caw-sb-w) - var(--sidebar-w)) !important;
  }
  body.caw-tool-page .app-layout {
    margin-left: calc(var(--caw-sb-w) + var(--sidebar-w)) !important;
  }
  /* Open partial sits flush against the page; the workspace shifts to
     follow (page-local rules drive the shift + transition). */
  .caw-sb.caw-sb-open { z-index: 200; }

  /* ════════════════════════════════════════════════════════════════
     Mobile chrome (≤ 767px)
     Hide desktop sidebar; render sticky topbar + slide-in drawer.
     Drawer header keeps the existing dark-hero identity block.
     Drawer nav uses the new item list (Workspace / My drafts /
     Ask Capacoty / Search drafts, then the secondary group).
     ════════════════════════════════════════════════════════════════ */
  .caw-topbar,
  .caw-m-drawer,
  .caw-m-drawer-overlay,
  .caw-m-toolbar,
  .caw-m-stickyfoot,
  .caw-m-sheet,
  .caw-m-sheet-scrim { display: none; }

  @media (max-width: 767px) {
    .caw-sb { display: none !important; }
    .caw-sb-tip-floating { display: none !important; }
    .caw-user-modal-backdrop { display: none !important; }
    body.caw-user-modal-open { overflow: auto !important; }

    .caw-topbar {
      position: sticky; top: 0; z-index: 100;
      display: flex; align-items: center;
      height: 56px;
      padding: 0 8px;
      background: rgba(251,250,246,.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(14,21,48,.10);
      gap: 4px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .caw-topbar-btn {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border: 0; background: transparent;
      border-radius: 10px;
      cursor: pointer;
      color: #0e1530;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-topbar-btn:active { background: rgba(14,21,48,.06); }
    .caw-topbar-btn svg { width: 22px; height: 22px; }
    .caw-topbar-brand {
      height: 28px; width: auto;
      display: block;
      object-fit: contain;
    }
    .caw-topbar-spacer { flex: 1; }
    .caw-topbar-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: #d4f564; color: #0a0a0a;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      border: 0; cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .caw-m-drawer-overlay {
      display: block;
      position: fixed; inset: 0;
      background: rgba(14,21,48,.45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 1000;
      opacity: 0; pointer-events: none;
      transition: opacity .22s ease;
    }
    body.caw-m-drawer-open .caw-m-drawer-overlay {
      opacity: 1; pointer-events: auto;
    }
    .caw-m-drawer {
      display: flex; flex-direction: column;
      position: fixed; top: 0; left: 0;
      width: 86%; max-width: 360px; height: 100%;
      background: #fbfaf6;
      z-index: 1001;
      transform: translateX(-100%);
      transition: transform .26s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 12px 0 32px -8px rgba(14,21,48,.30);
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: #0e1530;
    }
    body.caw-m-drawer-open .caw-m-drawer { transform: translateX(0); }

    .caw-m-dh {
      background: #0e1530;
      color: #fff;
      padding: 18px 16px 16px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .caw-m-dh::before {
      content: '';
      position: absolute; top: -30px; right: -30px;
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(205,240,117,.30) 0%, transparent 70%);
      pointer-events: none;
    }
    .caw-m-dh-close {
      position: absolute; top: 12px; right: 12px;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border: 0; background: rgba(255,255,255,.10); color: #fff;
      border-radius: 50%;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      z-index: 1;
    }
    .caw-m-dh-close svg { width: 14px; height: 14px; }
    .caw-m-dh-row {
      display: flex; align-items: center; gap: 12px;
      position: relative; z-index: 1;
    }
    .caw-m-dh-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background: #d4f564; color: #0a0a0a;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 700;
      flex-shrink: 0;
    }
    .caw-m-dh-info { min-width: 0; flex: 1; padding-right: 40px; }
    .caw-m-dh-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .caw-m-dh-email {
      font-size: 11.5px; color: rgba(255,255,255,.62);
      margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .caw-m-dh-pillrow {
      display: flex; gap: 8px; margin-top: 12px;
      align-items: center; flex-wrap: wrap;
      position: relative; z-index: 1;
    }
    .caw-m-dh-pill {
      font-size: 10px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 9px; border-radius: 999px;
      background: rgba(94,232,176,.18); color: #5ee8b0;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .caw-m-dh-pill::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
    }
    .caw-m-dh-pill.trialing  { background: rgba(252,255,168,.20); color: #f5eeaa; }
    .caw-m-dh-pill.past_due  { background: rgba(254,226,226,.22); color: #fca5a5; }
    .caw-m-dh-pill.cancelled { background: rgba(244,240,231,.12); color: rgba(255,255,255,.7); }
    .caw-m-dh-quota { font-size: 11.5px; color: rgba(255,255,255,.70); }

    .caw-m-dnav {
      flex: 1; overflow-y: auto;
      padding: 8px 8px 12px;
      -webkit-overflow-scrolling: touch;
    }
    .caw-m-dnav-section {
      font-size: 9.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .14em;
      color: rgba(14,21,48,.42);
      padding: 12px 12px 4px;
    }
    .caw-m-dnav-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px;
      border-radius: 10px;
      cursor: pointer;
      color: #0e1530;
      font-size: 14.5px; font-weight: 500;
      font-family: inherit;
      background: none; border: 0;
      width: 100%; text-align: left;
      min-height: 48px;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-m-dnav-item:active { background: rgba(14,21,48,.06); }
    .caw-m-dnav-item.active {
      background: rgba(42,80,243,.08);
      color: #2a50f3;
      font-weight: 600;
    }
    .caw-m-dnav-item.active .caw-m-dnav-ic {
      background: #2a50f3;
      color: #fff;
      border-color: #2a50f3;
    }
    .caw-m-dnav-ic {
      width: 32px; height: 32px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 9px;
      background: #ffffff;
      border: 1px solid rgba(14,21,48,.10);
      color: rgba(14,21,48,.60);
    }
    .caw-m-dnav-ic svg { width: 17px; height: 17px; }
    .caw-m-dnav-arr {
      margin-left: auto;
      color: rgba(14,21,48,.42);
      flex-shrink: 0;
    }
    .caw-m-dnav-arr svg { width: 14px; height: 14px; }
    .caw-m-dnav-meta {
      margin-left: auto;
      font-size: 9.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em;
      color: rgba(14,21,48,.42);
      padding: 3px 7px;
      background: #ebecef;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .caw-m-dnav-item.disabled {
      opacity: .45; pointer-events: none;
    }

    .caw-m-df {
      border-top: 1px solid rgba(14,21,48,.10);
      padding: 10px 8px 12px;
      background: #ffffff;
      flex-shrink: 0;
    }
    .caw-m-df-logout {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      padding: 11px 12px;
      border: 0; background: transparent;
      color: #a42a2a;
      font-size: 13px; font-weight: 600;
      font-family: inherit;
      border-radius: 10px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-m-df-logout:active { background: #fef2f2; }
    .caw-m-df-logout svg { width: 15px; height: 15px; }

    /* Tool-picker modal on narrow screens — 2 cols and tighter padding */
    .caw-modal-picker {
      width: calc(100vw - 24px);
      border-radius: 16px;
    }
    .caw-modal-picker-grid {
      grid-template-columns: 1fr 1fr;
      padding: 10px;
      gap: 8px;
    }

    /* ════════════════════════════════════════════════════════════
       Mobile TOOL chrome — only on report tools (body.caw-tool-page).
       Hide the desktop .app-header + .steps. Render sticky toolbar +
       bottom sheet + sticky Prev/Next footer. Picker introspects the
       tool's existing .step-item DOM so the rollout is zero-config.
       ════════════════════════════════════════════════════════════ */
    body.caw-tool-page .app-header,
    body.caw-tool-page .steps,
    body.caw-tool-page .steps-mobile-dropdown,
    body.caw-tool-page .steps-mobile-btn,
    body.caw-tool-page .steps-mobile-panel { display: none !important; }

    body.caw-tool-page .app-layout {
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      grid-template-columns: 1fr !important;
    }
    body.caw-tool-page #pages-content,
    body.caw-tool-page #step-content {
      padding: 14px 14px 100px !important;
    }

    .caw-m-toolbar { display: none; }
    body.caw-tool-page .caw-m-toolbar {
      display: flex;
      position: sticky; top: 56px; z-index: 99;
      background: #ffffff;
      border-bottom: 1px solid rgba(14,21,48,.10);
      padding: 10px 12px 12px;
      flex-direction: column; gap: 8px;
    }
    .caw-m-toolbar-row1 { display: flex; align-items: center; gap: 8px; }
    .caw-m-tool-pill {
      font-size: 11px; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--app, #2a50f3);
      background: rgba(0,0,0,.05);
      padding: 4px 10px; border-radius: 999px;
    }
    .caw-m-step-pick {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      border: 1px solid rgba(14,21,48,.10);
      background: #fbfaf6;
      border-radius: 14px;
      padding: 10px 14px;
      font-family: inherit;
      color: #0e1530;
      cursor: pointer;
      min-height: 56px;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-m-step-pick:active { background: #ebecef; }
    .caw-m-step-num {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--app, #2a50f3);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
      flex-shrink: 0;
    }
    .caw-m-step-text { flex: 1; min-width: 0; text-align: left; }
    .caw-m-step-cap {
      display: block;
      font-size: 10px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(14,21,48,.42);
      margin-bottom: 1px;
    }
    .caw-m-step-title {
      display: block;
      font-size: 15px; font-weight: 600; letter-spacing: -.005em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .caw-m-step-arr { color: rgba(14,21,48,.42); flex-shrink: 0; }
    .caw-m-step-arr svg { width: 16px; height: 16px; display: block; }
    .caw-m-progress {
      height: 4px;
      background: rgba(14,21,48,.08);
      border-radius: 4px;
      overflow: hidden;
      margin-top: -2px;
    }
    .caw-m-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #5ee8b0, var(--app, #2a50f3));
      width: 0%;
      border-radius: 4px;
      transition: width .4s ease;
    }

    .caw-m-stickyfoot { display: none; }
    body.caw-tool-page .caw-m-stickyfoot {
      display: flex;
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(14,21,48,.10);
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      gap: 8px;
      z-index: 50;
    }
    .caw-m-stickyfoot button {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 13px 14px;
      border-radius: 14px;
      font-size: 14.5px; font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      min-height: 48px;
      border: 1px solid transparent;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-m-stickyfoot .caw-m-prev {
      background: #fff;
      border-color: rgba(14,21,48,.10);
      color: #0e1530;
      flex: 0 0 auto;
      padding: 13px 16px;
    }
    .caw-m-stickyfoot .caw-m-prev:disabled { opacity: .35; pointer-events: none; }
    .caw-m-stickyfoot .caw-m-next {
      flex: 1;
      background: var(--app, #2a50f3);
      border-color: var(--app, #2a50f3);
      color: #fff;
      min-width: 0;
    }
    .caw-m-stickyfoot .caw-m-next:disabled { opacity: .55; pointer-events: none; }
    .caw-m-stickyfoot .caw-m-next span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .caw-m-stickyfoot svg { width: 16px; height: 16px; flex-shrink: 0; }

    .caw-m-sheet-scrim, .caw-m-sheet { display: none; }
    body.caw-tool-page .caw-m-sheet-scrim {
      display: block;
      position: fixed; inset: 0;
      background: rgba(14,21,48,.45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 200;
      opacity: 0; pointer-events: none;
      transition: opacity .22s ease;
    }
    body.caw-m-sheet-open .caw-m-sheet-scrim {
      opacity: 1; pointer-events: auto;
    }
    body.caw-tool-page .caw-m-sheet {
      display: flex; flex-direction: column;
      position: fixed; left: 0; right: 0; bottom: 0;
      background: #ffffff;
      border-radius: 24px 24px 0 0;
      z-index: 201;
      transform: translateY(100%);
      transition: transform .26s cubic-bezier(.4, 0, .2, 1);
      max-height: 78%;
      box-shadow: 0 -20px 40px -10px rgba(14,21,48,.25);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    body.caw-m-sheet-open .caw-m-sheet { transform: translateY(0); }
    .caw-m-sheet-handle {
      width: 36px; height: 4px;
      background: rgba(14,21,48,.18);
      border-radius: 4px;
      margin: 10px auto 6px;
      flex-shrink: 0;
    }
    .caw-m-sheet-head {
      padding: 6px 18px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(14,21,48,.10);
      flex-shrink: 0;
    }
    .caw-m-sheet-title {
      font-size: 16px; font-weight: 700; letter-spacing: -.005em;
      color: #0e1530;
    }
    .caw-m-sheet-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(14,21,48,.06); color: #0e1530;
      border: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .caw-m-sheet-close svg { width: 14px; height: 14px; }
    .caw-m-sheet-list {
      flex: 1; overflow-y: auto;
      padding: 8px 8px 18px;
      -webkit-overflow-scrolling: touch;
    }
    .caw-m-sheet-section {
      font-size: 9.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .14em;
      color: rgba(14,21,48,.42);
      padding: 12px 12px 4px;
    }
    .caw-m-sheet-item {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      font-size: 14.5px;
      color: #0e1530;
      width: 100%;
      background: none; border: 0;
      text-align: left;
      min-height: 48px;
      -webkit-tap-highlight-color: transparent;
    }
    .caw-m-sheet-item:active { background: rgba(14,21,48,.06); }
    .caw-m-sheet-item.active {
      background: rgba(42,80,243,.10);
      color: var(--app, #2a50f3);
      font-weight: 700;
    }
    .caw-m-sheet-num {
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(14,21,48,.06); color: rgba(14,21,48,.42);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      flex-shrink: 0;
      border: 1.5px solid transparent;
    }
    .caw-m-sheet-item.done .caw-m-sheet-num,
    .caw-m-sheet-item.active .caw-m-sheet-num {
      background: var(--app, #2a50f3);
      color: #fff;
      border-color: var(--app, #2a50f3);
    }
    .caw-m-sheet-item.done .caw-m-sheet-num span { display: none; }
    .caw-m-sheet-item.done .caw-m-sheet-num::after { content: '✓'; font-size: 13px; }
    .caw-m-sheet-item-lbl { flex: 1; min-width: 0; }
  }

  /* ── H2: classes replacing former inline style="" attributes ──
     (so any page loading sidebar.js can drop 'unsafe-inline' from style-src) */
  .caw-hidden { display: none !important; }
  .caw-flex-1 { flex: 1; }
  .caw-flex-2 { flex: 2; }
  .caw-acct-head { margin-bottom: 0; }
  .caw-acct-head-row { display: flex; align-items: center; gap: 12px; }
  .caw-acct-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(42,80,243,.10);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .caw-acct-desc { margin-top: 14px; margin-bottom: 20px; }
