/* === DESIGN TOKENS === */
    :root {
      /* Brand */
      --brand: #2D5A3D;
      --brand-light: #3A7350;
      --brand-dim: rgba(45,90,61,0.10);
      --brand-subtle: rgba(45,90,61,0.06);
      --brand-glow: rgba(45,90,61,0.18);

      /* Page surfaces */
      --bg: #F5F4EE;
      --bg-card: #FFFFFF;
      --surface: #FFFFFF;
      --surface-2: #EFEEE6;
      --surface-sunk: #FAF9F4;
      --off-white: #EFEDE3;

      /* Sidebar — both legacy and new names kept as synonyms */
      --sidebar: #0F1612;
      --sidebar-bg: #0F1612;
      --sidebar-hi: #1A241D;
      --sidebar-fg: #9BA7A0;
      --sidebar-text: #9BA7A0;
      --sidebar-fg-hi: #F5F4EE;
      --sidebar-text-active: #F5F4EE;
      --sidebar-accent: #6FBE86;
      --sidebar-hover-bg: rgba(255,255,255,0.04);
      --sidebar-active-bg: rgba(111,190,134,0.08);

      /* Ink scale */
      --text: #0E1511;
      --text-dim: #5C6962;
      --text-muted: #8C9590;

      /* Rules */
      --border: #E7E4D8;
      --border-light: #EFEDE3;

      /* Status */
      --hot: #B8471A;
      --hot-dim: rgba(184,71,26,0.12);
      --warm: #A07A1F;
      --warm-dim: rgba(160,122,31,0.12);
      --red: #B42318;
      --red-dim: rgba(180,35,24,0.10);

      /* Preserved accents (used in existing CSS) */
      --accent: #D4A44C;
      --yellow: #7A5900;
      --yellow-dim: rgba(196,144,0,0.1);
      --green: #059669;
      --green-dim: rgba(5,150,105,0.1);
      --blue: #2D5A3D;
      --blue-dim: rgba(45,90,61,0.07);

      /* Shadows */
      --shadow-xs: 0 1px 0 rgba(20,28,24,0.04);
      --shadow-sm: 0 1px 2px rgba(20,28,24,0.05), 0 1px 1px rgba(20,28,24,0.03);
      --shadow-md: 0 6px 20px -6px rgba(20,28,24,0.10), 0 2px 4px rgba(20,28,24,0.04);
      --shadow-lg: 0 20px 48px -12px rgba(20,28,24,0.14), 0 8px 16px rgba(20,28,24,0.06);

      /* Radius */
      --radius: 12px;
      --radius-sm: 8px;
      --radius-lg: 16px;

      /* Typography: Families */
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --heading: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

      /* Typography: Scale */
      --text-xs: 11px;
      --text-sm: 12px;
      --text-base: 14px;
      --text-lg: 16px;
      --text-xl: 18px;
      --text-2xl: 24px;
      --text-3xl: 30px;

      /* Spacing */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 64px;

      /* Motion */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --duration-fast: 120ms;
      --duration-base: 200ms;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; }
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

    button {
      padding: var(--space-2) var(--space-4);
      transition: all 0.2s var(--ease-out);
    }

    button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    /* ── GLOBAL FORM FOCUS STATES ────────────── */
    input, textarea, select {
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }
    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
    }
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
    }

    body {
      font-family: var(--font);
      font-feature-settings: 'kern' 1, 'liga' 1;
      -webkit-font-smoothing: antialiased;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── APP SHELL ─────────────────────────── */
    #app-shell {
      display: flex;
      min-height: 100vh;
    }
    #sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 260px;
      overflow-y: auto;
      border-right: none;
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      z-index: 100;
    }
    #main-content {
      margin-left: 260px;
      flex: 1;
      min-height: 100vh;
      padding: 0;
      background: var(--bg);
    }
    /* Page header inside main content */
    .page-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 20px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 10;
      box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.04);
      min-height: 72px;
    }
    .page-header h1 {
      font-family: var(--heading);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--text);
      line-height: 1.2;
    }
    .page-header-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 3px;
      font-weight: 400;
    }
    .page-content {
      padding: 28px 32px 48px;
      max-width: 1100px;
    }
    #bottom-bar { display: none; }

    .sidebar-header {
      padding: 16px 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .logo-mark {
      width: 36px;
      height: 36px;
      background: var(--brand);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .sidebar-biz-name {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: -0.02em;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.3;
      color: var(--sidebar-fg-hi);
      margin: 0 0 3px;
    }
    .sidebar-plan-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 7px;
      background: var(--sidebar-hi);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--sidebar-fg);
    }
    .sidebar-plan-badge::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--sidebar-accent);
      flex-shrink: 0;
    }
    .plan-essentials { background: var(--sidebar-hi); color: var(--sidebar-fg); }
    .plan-professional { background: rgba(45,90,61,0.3); color: #6EE7B7; }
    .plan-full_stack { background: rgba(212,164,76,0.15); color: #FCD34D; }
    .plan-business { background: rgba(212,164,76,0.15); color: #FCD34D; }

    .sidebar-account-btn {
      background: none;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      padding: 6px 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #9CA3AF;
    }
    .sidebar-account-btn:hover { border-color: rgba(255,255,255,0.3); color: #F9FAFB; }

    .sidebar-section-label {
      font-family: var(--heading);
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      padding: 16px 16px 8px 16px;
      margin-top: 8px;
    }
    .sidebar-section-label:first-child { margin-top: 0; }
    /* alias — new labels use the same style */
    .nav-section-label {
      font-family: var(--heading);
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      padding: 16px 16px 8px 16px;
      margin-top: 8px;
    }
    .nav-section-label:first-child { margin-top: 0; }
    .sidebar-nav {
      flex: 1;
      padding: var(--space-2) 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      margin: 1px 8px;
      border: none;
      background: none;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      color: var(--sidebar-text);
      cursor: pointer;
      min-height: 40px;
      width: calc(100% - 16px);
      text-align: left;
      transition: all var(--duration-fast) var(--ease-out);
      position: relative;
    }
    .nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-fg-hi); }
    .nav-item.active {
      background: var(--sidebar-active-bg);
      color: var(--sidebar-fg-hi);
      font-weight: 600;
      border-left: none;
      position: relative;
    }
    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--sidebar-accent);
    }
    .nav-item svg { opacity: 0.7; }
    .nav-item.active svg, .nav-item:hover svg { opacity: 1; }
    .nav-item .lock-icon {
      margin-left: auto;
      opacity: 0.5;
    }

    /* ── TOPBAR ──────────────────────────── */
    .dashboard-topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 10px 24px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 64px;
    }
    .topbar-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .topbar-breadcrumb {
      font-family: var(--font);
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.01em;
      margin: 0;
    }
    .topbar-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
    }
    .topbar-title {
      font-family: var(--heading);
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.02em;
      margin: 0;
    }
    .topbar-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 9px 3px 7px;
      background: var(--brand-subtle);
      color: var(--brand);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .topbar-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--brand);
      box-shadow: 0 0 0 2px var(--brand-glow);
    }
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .topbar-range-group {
      display: inline-flex;
      background: var(--surface-2);
      border-radius: 999px;
      padding: 2px;
      gap: 0;
    }
    .topbar-range-btn {
      padding: 5px 12px;
      border: 0;
      background: transparent;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-dim);
      border-radius: 999px;
      cursor: pointer;
      transition: all 150ms ease;
    }
    .topbar-range-btn.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-xs);
    }
    .topbar-icon-btn {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      color: var(--text-dim);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 150ms ease;
      position: relative;
    }
    .topbar-icon-btn:hover {
      background: var(--surface-2);
      color: var(--text);
    }
    .topbar-help-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: var(--brand-dim);
      color: var(--brand);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 150ms ease;
    }
    .topbar-help-btn:hover {
      background: var(--brand-glow);
      color: var(--brand-light);
    }
    .topbar-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius-sm);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 150ms ease;
    }
    .topbar-cta:hover {
      background: var(--brand-light);
    }

    @media (max-width: 767px) {
      .dashboard-topbar { display: none; }
    }

    /* ── VIEW PANELS ──────────────────────── */
    .view-panel { display: none; }
    .view-panel.active { display: block; }
    .view-stub { padding: 40px 0; }

    /* ── BOTTOM BAR (mobile) ─────────────── */
    @media (max-width: 767px) {
      #app-shell { display: block; }
      #sidebar { display: none; }
      #main-content {
        margin-left: 0;
        padding: 0 0 calc(64px + env(safe-area-inset-bottom));
      }
      #bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -1px 6px rgba(0,0,0,0.06);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
      }
      .bottom-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 44px;
        min-height: 44px;
        padding: var(--space-1) var(--space-2);
        border: none;
        background: none;
        font-family: var(--font);
        font-size: 11px;
        font-weight: 500;
        color: var(--text-dim);
        cursor: pointer;
        position: relative;
      }
      .bottom-tab.active { color: var(--brand); font-weight: 600; }
      .bottom-tab .lock-icon {
        position: absolute;
        top: 2px;
        right: 2px;
        opacity: 0.5;
      }
    }
    @media (min-width: 768px) {
      .bottom-tab { display: none; }
    }

    /* ── UPGRADE MODAL ───────────────────── */
    .upgrade-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(0,0,0,0.4);
      align-items: center;
      justify-content: center;
    }
    .upgrade-modal-overlay.visible { display: flex; }
    .upgrade-modal {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-6) var(--space-5);
      max-width: 420px;
      width: 90%;
      text-align: center;
      position: relative;
      box-shadow: var(--shadow-lg);
    }
    .upgrade-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: var(--text-dim);
      padding: var(--space-1);
    }
    .upgrade-modal-icon { margin-bottom: var(--space-4); }
    .upgrade-modal-title {
      font-family: var(--heading);
      font-size: 20px;
      font-weight: 600;
      margin-bottom: var(--space-2);
    }
    .upgrade-modal-desc {
      font-size: var(--text-base);
      color: var(--text-dim);
      line-height: 1.5;
      margin-bottom: 20px;
    }
    @media (max-width: 767px) {
      .upgrade-modal-overlay.visible {
        align-items: stretch;
      }
      .upgrade-modal {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .live-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: var(--text-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: var(--brand-dim);
      color: var(--brand);
    }
    .live-dot {
      width: 6px;
      height: 6px;
      background: var(--brand);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ── TEST DRIVE BANNER ─────────────────── */
    .test-drive-banner {
      display: none;
      margin: 0 0 var(--space-4);
    }
    .test-drive-banner.visible { display: block; }
    .tdb-card {
      background: var(--brand-dim);
      border: 1px solid rgba(45, 90, 61, 0.15);
      border-radius: var(--radius);
      padding: 20px 24px;
    }
    .tdb-title {
      font-family: var(--heading);
      font-size: var(--text-lg);
      font-weight: 600;
      margin-bottom: var(--space-1);
    }
    .tdb-desc {
      font-size: var(--text-base);
      color: var(--text-dim);
      margin-bottom: var(--space-3);
      line-height: 1.5;
    }
    .tdb-progress {
      height: 6px;
      background: rgba(45, 90, 61, 0.12);
      border-radius: 3px;
      margin-bottom: 6px;
      overflow: hidden;
    }
    .tdb-progress-fill {
      height: 100%;
      background: var(--brand);
      border-radius: 3px;
      transition: width 0.5s var(--ease-out);
    }
    .tdb-pct {
      font-size: var(--text-xs);
      color: var(--text-dim);
      font-family: var(--mono);
      margin-bottom: var(--space-3);
    }
    .tdb-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2);
    }
    .tdb-btn {
      padding: 8px 18px;
      border-radius: 8px;
      font-family: var(--font);
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s var(--ease-out);
    }
    .tdb-btn-primary {
      background: var(--brand);
      color: #fff;
    }
    .tdb-btn-primary:hover { background: var(--brand-light); }
    .tdb-btn-ghost {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .tdb-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

    /* ── STAT CARDS ────────────────────────── */
    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      text-align: center;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
    }
    .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand); }
    .stat-card:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
    .stat-card.active-stat { border-color: var(--brand); border-width: 2px; }
    .stat-value {
      font-size: var(--text-2xl);
      font-weight: 700;
      font-family: var(--heading);
      letter-spacing: -0.03em;
      text-align: left;
    }
    .stat-label {
      font-size: var(--text-xs);
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: var(--space-1);
    }
    .stat-value.bookings { color: var(--hot); }
    .stat-value.convos { color: var(--text); }
    .stat-value.appts { color: var(--brand); }

    /* ── INNER TAB PANELS ─────────────────── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── CARDS ──────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      margin-bottom: var(--space-3);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: all var(--duration-base) var(--ease-out);
    }
    .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(45,90,61,0.25); }
    .card:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
    .card.highlighted { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-dim); }
    .coming-soon-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 64px 32px;
      text-align: center;
      max-width: 560px;
      margin: 48px auto;
      box-shadow: var(--shadow-sm);
    }
    .coming-soon-card .cs-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 24px;
      color: var(--brand);
      opacity: 0.6;
    }
    .coming-soon-card h2 {
      font-family: var(--heading);
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 8px;
      letter-spacing: -0.02em;
    }
    .coming-soon-card p {
      font-family: var(--font);
      font-size: 14px;
      color: var(--text-dim);
      line-height: 1.5;
      margin: 0;
    }
    .coming-soon-card .cs-badge {
      display: inline-block;
      margin-top: 24px;
      padding: 6px 12px;
      background: var(--brand-subtle);
      color: var(--brand);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
    }
    .card[data-qual="hot"] { border-left: 4px solid var(--hot); }
    .card[data-qual="warm"] { border-left: 4px solid var(--accent); }
    .card[data-qual="cold"] { border-left: 4px solid var(--border); }
    .card-row {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }
    .card-left {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 0;
      flex: 1;
    }
    .card-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
    }
    .card-avatar.hot { background: var(--hot-dim); color: var(--hot); }
    .card-avatar.warm { background: var(--warm-dim); color: var(--warm); }
    .card-avatar.cold { background: var(--surface-2); color: var(--text-dim); }
    .card-avatar.brand { background: var(--brand-dim); color: var(--brand); }
    .card-info { min-width: 0; flex: 1; }
    .card-name {
      font-weight: 600;
      font-size: var(--text-base);
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-sub {
      font-size: var(--text-sm);
      color: var(--text-dim);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-meta {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
      margin-left: var(--space-3);
    }
    .badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 100px;
      white-space: nowrap;
    }
    .badge.hot { background: var(--hot-dim); color: var(--hot); }
    .badge.warm { background: var(--warm-dim); color: var(--warm); }
    .badge.cold { background: var(--surface-2); color: var(--text-muted); }
    .badge.pending { background: var(--hot-dim); color: var(--hot); }
    .badge.completed { background: rgba(45,90,61,0.12); color: var(--brand); }
    .badge.shared { background: var(--yellow-dim); color: var(--yellow); }
    .badge.confirmed { background: var(--green-dim); color: var(--green); }
    .badge.denied { background: var(--red-dim); color: var(--red); }
    .badge.cancelled { background: var(--red-dim); color: var(--red); }
    .card-time {
      font-size: var(--text-xs);
      color: var(--text-dim);
      font-family: var(--mono);
      white-space: nowrap;
    }
    .card-phone {
      font-size: var(--text-xs);
      color: var(--text-dim);
      font-weight: 400;
      margin-left: var(--space-2);
    }
    .convo-summary {
      color: var(--brand);
      font-weight: 500;
    }
    .convo-date-picker {
      height: 36px;
      padding: var(--space-1) var(--space-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: var(--text-sm);
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
    }
    .convo-date-picker:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .date-range-bar {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 0;
      flex-wrap: wrap;
    }
    .convo-detail-header {
      padding: var(--space-3);
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .convo-detail-header .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .convo-detail-header .detail-label {
      font-size: var(--text-sm);
      color: var(--text-dim);
      font-weight: 500;
    }
    .convo-detail-header .detail-value {
      font-size: var(--text-sm);
      font-weight: 500;
    }

    /* ── EXPANDABLE DETAIL ─────────────────── */
    .card-detail {
      display: none;
      border-top: 1px solid var(--border);
      padding: var(--space-4);
    }
    .card.expanded .card-detail { display: block; }

    /* ── MESSAGES ───────────────────────────── */
    .msg-thread {
      max-height: 360px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-1) 0;
      margin-bottom: var(--space-3);
    }
    .msg {
      /* Cap bubble width so wide viewports don't stretch messages into single long lines.
         640px ≈ comfortable chat reading measure (SMS/iMessage range). */
      max-width: min(85%, 640px);
      padding: 10px 14px;
      border-radius: 14px;
      font-size: var(--text-base);
      line-height: 1.5;
      animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .msg.inbound {
      background: var(--surface-2);
      border-bottom-left-radius: 4px;
      align-self: flex-start;
    }
    .msg.outbound {
      background: var(--brand);
      color: var(--bg);
      border-bottom-right-radius: 4px;
      align-self: flex-end;
    }
    .msg.owner {
      background: var(--green-dim);
      border: 1px solid rgba(45, 90, 61, 0.2);
      border-bottom-right-radius: 4px;
      align-self: flex-end;
    }
    .msg-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: var(--space-1);
      font-family: var(--mono);
    }
    .msg.outbound .msg-meta,
    .msg.owner .msg-meta {
      color: rgba(250, 250, 248, 0.7);
    }
    /* Inline customer-sent photos. Rendered as a flex grid (1-3 per row),
       capped height keeps the conversation thread scannable. Click opens
       the full image in a new tab — no fancy lightbox needed yet. */
    .msg-images {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1);
      margin-top: var(--space-1);
    }
    .msg-image-link {
      display: block;
      line-height: 0;
      border-radius: var(--radius-sm);
      overflow: hidden;
      max-width: 220px;
      max-height: 220px;
    }
    .msg-image-thumb {
      width: 100%;
      height: 100%;
      max-width: 220px;
      max-height: 220px;
      object-fit: cover;
      display: block;
      background: rgba(0, 0, 0, 0.04);
      transition: opacity 0.15s var(--ease-out);
    }
    .msg-image-link:hover .msg-image-thumb {
      opacity: 0.9;
    }

    /* ── BOOKING ACTIONS ───────────────────── */
    .booking-actions {
      padding: var(--space-4);
      border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .form-row {
      display: flex;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .form-group {
      flex: 1;
    }
    .form-group label {
      display: block;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: var(--space-1);
    }
    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--font);
      font-size: var(--text-base);
      background: var(--surface);
      color: var(--text);
    }
    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
    }
    .form-group textarea {
      resize: vertical;
      min-height: 50px;
      font-size: var(--text-base);
    }
    .btn-row {
      display: flex;
      gap: var(--space-2);
    }
    .btn {
      flex: 1;
      padding: 10px 16px;
      border-radius: 8px;
      font-family: var(--font);
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s var(--ease-out);
      border: none;
      text-align: center;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-primary { background: var(--brand); color: #fff; }
    .btn-primary:hover:not(:disabled) { background: var(--brand-light); }
    .btn-danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
    .btn-danger:hover:not(:disabled) { background: var(--red-dim); }
    .btn-accent { background: var(--hot); color: #fff; }
    .btn-accent:hover:not(:disabled) { background: #c96a3e; }
    .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
    .btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
    .or-divider {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin: var(--space-3) 0;
      color: var(--text-dim);
      font-size: var(--text-xs);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .or-divider::before,
    .or-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .error-banner {
      display: none;
      background: rgba(204,68,68,0.08);
      border: 1px solid rgba(204,68,68,0.2);
      border-radius: 8px;
      padding: var(--space-2) var(--space-3);
      margin-bottom: var(--space-3);
      font-size: var(--text-base);
      color: var(--red);
    }
    .error-banner.visible { display: block; }

    /* ── THREAD CONTENT WRAPPER ────────────── */
    #convThreadContent {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }
    /* ── TAKEOVER BAR ──────────────────────── */
    .takeover-bar {
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }
    /* Cap buttons on wide viewports so they read as CTAs, not banners. */
    .takeover-bar > button { max-width: 340px; }
    .chat-input-bar {
      display: none;
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--border);
      justify-content: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }
    .chat-input-bar.active { display: flex; }
    .chat-input-bar > .chat-input { max-width: 580px; }
    .chat-input {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--text);
      font-family: var(--font);
      font-size: var(--text-base);
      outline: none;
    }
    .chat-input:focus { border-color: var(--brand); }
    .btn-send {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 18px;
      cursor: pointer;
      font-family: var(--font);
      font-weight: 600;
      font-size: var(--text-base);
    }
    .btn-send:hover { background: var(--brand-light); }

    /* ── CONVERSATIONS TWO-PANEL LAYOUT ────── */
    .conv-two-panel {
      display: grid;
      grid-template-columns: 340px 1fr;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      /* Fills the space below the sticky dashboard-topbar (52px). */
      height: calc(100dvh - 52px);
      min-height: 320px;
    }
    /* When the conversations panel is active the setup-compact strip is not
       relevant and its height would push the conv-two-panel partially off screen.
       Hide it via the :has() selector (Chrome 105+, Safari 15.4+, FF 121+). */
    #main-content:has(#view-conversations.active) #setupCompactMount,
    #main-content:has(#view-conversations.active) #testDriveBanner,
    #main-content:has(#view-conversations.active) #analyticsBar {
      display: none !important;
    }
    /* Hide analytics bar on all non-overview views */
    #main-content:has(#view-customers.active) #analyticsBar,
    #main-content:has(#view-pipeline.active) #analyticsBar,
    #main-content:has(#view-integrations.active) #analyticsBar,
    #main-content:has(#view-settings.active) #analyticsBar,
    #main-content:has(#view-support.active) #analyticsBar {
      display: none !important;
    }
    .conv-list-panel {
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border);
      overflow: hidden;
      background: var(--surface);
    }
    .conv-list-panel .filter-bar {
      border-bottom: 1px solid var(--border);
      padding: var(--space-2) var(--space-3);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .conv-qual-filter {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .conv-qual-btn {
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-dim);
      font-family: var(--font);
      transition: all 0.15s var(--ease-out);
      white-space: nowrap;
    }
    .conv-qual-btn:hover { border-color: var(--brand); color: var(--brand); }
    .conv-qual-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    .conv-qual-btn.active-hot { background: var(--hot); color: #fff; border-color: var(--hot); }
    .conv-qual-btn.active-warm { background: var(--accent,#D4A44C); color: #fff; border-color: var(--accent,#D4A44C); }
    /* "Needs Review" chip: amber border/text in idle state so it visually telegraphs */
    /* "something needs attention" without being as loud as a hot lead.                */
    .conv-qual-btn-review { border-color: var(--accent,#D4A44C); color: var(--accent,#D4A44C); }
    .conv-qual-btn-review:hover { border-color: var(--accent,#D4A44C); color: var(--accent,#D4A44C); background: rgba(212,164,76,0.08); }
    .conv-qual-btn-review.active { background: var(--accent,#D4A44C); color: #fff; border-color: var(--accent,#D4A44C); }
    .conv-list-panel .date-range-bar {
      border-bottom: 1px solid var(--border);
      padding: var(--space-2) var(--space-3);
      flex-shrink: 0;
    }
    .conv-list-panel #convosList {
      flex: 1;
      overflow-y: auto;
    }
    .conv-list-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      min-height: 72px;
      position: relative;
      transition: background 0.12s;
    }
    .conv-list-item:hover { background: var(--surface-2); }
    .conv-list-item.active {
      background: var(--brand-dim);
      border-left: 3px solid var(--brand);
    }
    .conv-thread-panel {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      overflow: hidden;
      min-height: 0;
    }
    /* ── DETAILS PANE (3rd column, customer card) ── */
    .conv-details-panel {
      display: none; /* Hidden by default; shown at ≥1400px via media query below */
      flex-direction: column;
      background: var(--surface);
      border-left: 1px solid var(--border);
      overflow-y: auto;
      min-height: 0;
    }
    .cust-card-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-dim);
      gap: var(--space-2);
      padding: var(--space-6);
      text-align: center;
    }
    .cust-card-header {
      padding: var(--space-4);
      border-bottom: 1px solid var(--border);
    }
    .cust-card-name {
      font-family: var(--heading);
      font-weight: 600;
      font-size: var(--text-xl);
      letter-spacing: -0.01em;
      margin-bottom: 2px;
      word-break: break-word;
    }
    .cust-card-phone {
      font-family: var(--mono);
      font-size: var(--text-sm);
      color: var(--text-dim);
      text-decoration: none;
    }
    .cust-card-phone:hover { color: var(--brand); }
    .cust-card-section {
      padding: var(--space-4);
      border-bottom: 1px solid var(--border);
    }
    .cust-card-section:last-child { border-bottom: none; }
    .cust-card-section-title {
      font-family: var(--heading);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: var(--space-3);
    }
    .cust-card-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-3);
      padding: 4px 0;
      font-size: var(--text-sm);
    }
    .cust-card-row + .cust-card-row { margin-top: 2px; }
    .cust-card-row .label { color: var(--text-muted); flex-shrink: 0; }
    .cust-card-row .value {
      color: var(--text);
      text-align: right;
      word-break: break-word;
    }
    .cust-card-notes {
      width: 100%;
      min-height: 96px;
      padding: var(--space-3);
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      font-size: var(--text-sm);
      line-height: 1.5;
      resize: vertical;
      outline: none;
      transition: border-color 0.15s;
    }
    .cust-card-notes:focus { border-color: var(--brand); }
    .cust-card-notes-status {
      margin-top: var(--space-2);
      font-size: var(--text-xs);
      color: var(--text-muted);
      min-height: 16px;
    }
    .cust-card-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-4);
    }
    .cust-card-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s;
    }
    .cust-card-action:hover { border-color: var(--brand); color: var(--brand); }
    .cust-card-action[disabled] { opacity: 0.5; pointer-events: none; }
    @media (min-width: 1400px) {
      .conv-two-panel {
        grid-template-columns: 340px 1fr 360px;
      }
      .conv-details-panel { display: flex; }
    }
    .conv-thread-header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }
    .conv-back-btn {
      display: none;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--brand);
      font-family: var(--font);
      font-size: var(--text-sm);
      font-weight: 600;
      padding: 0;
    }
    .conv-thread-messages {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      /* Center the message column on wide viewports so customer+AI bubbles
         sit close enough to read as a real chat, not mirrored columns. */
      padding: var(--space-4) max(var(--space-4), calc((100% - 900px) / 2));
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    /* Pin short threads to the bottom (chat-UX). When content overflows,
       margin-top: auto collapses to 0 and scroll behaves normally. */
    .conv-thread-messages > .msg:first-child { margin-top: auto; }
    .conv-empty-thread {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-dim);
      gap: var(--space-2);
      padding: var(--space-6);
      text-align: center;
    }
    .escalation-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      display: inline-block;
    }
    /* Unread indicator — bold name + green dot */
    .conv-list-item.unread .conv-item-name { font-weight: 700; }
    .conv-list-item.unread::after {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--brand);
      border-radius: 50%;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    /* Job cross-link pill */
    .conv-job-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-sm);
      color: var(--brand);
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
    }
    .conv-job-link:hover { text-decoration: underline; }
    @media (max-width: 767px) {
      .conv-two-panel {
        grid-template-columns: 1fr;
        /* topbar hidden on mobile; account only for bottom-bar (56px + safe-area). */
        height: calc(100dvh - 56px - env(safe-area-inset-bottom));
      }
      .conv-list-panel {
        border-right: none;
      }
      .conv-list-panel.hidden,
      .conv-thread-panel.hidden {
        display: none;
      }
      .conv-back-btn {
        display: inline-flex;
      }
    }

    /* ── DETAIL ROWS ───────────────────────── */
    .detail-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      font-size: var(--text-base);
      border-bottom: 1px solid var(--border);
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-label { color: var(--text-dim); font-weight: 500; }
    .detail-value { font-weight: 600; text-align: right; }

    /* ── EMPTY / LOADING ───────────────────── */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
    }
    .empty-icon { width: 44px; height: 44px; background: var(--brand-subtle); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; }
    .empty-icon svg { width: 22px; height: 22px; stroke: var(--brand); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .empty-title {
      font-family: var(--heading);
      font-size: var(--text-xl);
      font-weight: 600;
      margin-bottom: var(--space-2);
    }
    .empty-desc {
      font-size: var(--text-base);
      color: var(--text-dim);
      max-width: 320px;
      margin: 0 auto;
      line-height: 1.5;
    }
    .empty-state-premium {
      text-align: center;
      padding: 80px var(--space-5);
    }
    .empty-icon-lg {
      width: 64px;
      height: 64px;
      background: var(--brand-dim);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-5);
    }
    .empty-icon-lg svg {
      width: 32px;
      height: 32px;
      stroke: var(--brand);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .empty-state-premium .empty-title {
      font-family: var(--heading);
      font-size: var(--text-xl);
      font-weight: 600;
      margin-bottom: var(--space-2);
    }
    .empty-state-premium .empty-desc {
      font-size: var(--text-base);
      color: var(--text-dim);
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.6;
    }
    .empty-action-hint {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      color: var(--brand);
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
    }
    .empty-action-hint::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand);
      opacity: 0.5;
    }
    .skeleton-convo-item { height: 72px; margin-bottom: var(--space-2); border-radius: var(--radius); }
    .overview-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-3);
    }
    /* ── Stats empty placeholder (shown when new business has no stats yet) ── */
    .stats-empty-placeholder {
      text-align: center;
      padding: var(--space-5) var(--space-4);
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.5;
    }
    .loading { text-align: center; padding: 60px 20px; }
    .spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--border);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto var(--space-4);
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── FILTER BAR ────────────────────────── */
    .filter-bar {
      display: flex;
      gap: 6px;
      margin-bottom: var(--space-4);
    }
    .filter-btn {
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-dim);
      font-family: var(--font);
      transition: all 0.2s var(--ease-out);
    }
    .filter-btn:hover { border-color: var(--brand); color: var(--brand); }
    .filter-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

    /* ── RESPONSIVE ─────────────────────────── */
    @media (max-width: 600px) {
      .stat-card { padding: 10px 8px; }
      .stat-value { font-size: 20px; }
      .form-row { flex-direction: column; gap: var(--space-2); }
    }

    /* ── TEAM MANAGEMENT ────────────────── */
    .team-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-4);
      margin-bottom: var(--space-3);
    }
    .team-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-3);
    }
    .team-name {
      font-weight: 600;
      font-size: var(--text-lg);
    }
    .team-phone {
      color: var(--text-dim);
      font-size: var(--text-base);
      font-family: var(--mono);
    }
    .team-role {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .team-role.admin {
      background: var(--brand-dim);
      color: var(--brand);
    }
    .team-role.member {
      background: var(--surface-2);
      color: var(--text-dim);
    }
    .team-role.invited {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .perm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
    }
    .perm-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      background: var(--surface-2);
      border-radius: 8px;
      font-size: var(--text-sm);
    }
    .perm-toggle label {
      cursor: pointer;
      user-select: none;
    }
    .perm-toggle input[type="checkbox"] {
      accent-color: var(--brand);
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .team-card { box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
    .team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand); }
    .team-card:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
    .team-card.expanded { border-color: var(--brand); }
    .team-card-header { cursor: pointer; }
    .team-card-detail { display: none; margin-top: var(--space-3); }
    .team-card.expanded .team-card-detail { display: block; }
    .team-card.expanded .team-card-header { margin-bottom: 0; }
    .profile-row { display: flex; gap: var(--space-2); margin-bottom: 10px; }
    .profile-row input, .profile-row select {
      flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
      font-family: var(--font); font-size: var(--text-base); background: var(--surface-2);
    }
    .profile-row select { max-width: 130px; }
    .btn-save-profile {
      background: var(--brand); color: #fff; border: none; padding: 6px 14px;
      border-radius: 8px; font-size: var(--text-base); font-weight: 600; cursor: pointer;
      margin-bottom: 10px;
    }
    .btn-save-profile:hover { background: var(--brand-light); }
    .btn-remove-member {
      background: none;
      border: 1px solid var(--red);
      color: var(--red);
      padding: 4px 10px;
      border-radius: 6px;
      font-size: var(--text-sm);
      cursor: pointer;
      margin-top: 10px;
    }
    .btn-remove-member:hover {
      background: var(--red-dim);
    }
    @media (max-width: 600px) {
      .perm-grid { grid-template-columns: 1fr; }
    }

    /* ── SAVE TOAST ───────────────────────── */
    .save-toast {
      position: fixed;
      bottom: 24px; right: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 4px solid var(--brand);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      padding: 14px 18px;
      font-family: var(--font);
      font-size: 14px;
      color: var(--text);
      z-index: 9999;
      max-width: 360px;
      opacity: 0; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
      transform: translateY(16px);
      pointer-events: none;
    }
    .save-toast.visible { opacity: 1; transform: translateY(0); }

    /* ── SETUP (hero / compact / steps) — 3-state renderer for Phase 31 ── */
    .setup-hero {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 28px;
      margin-bottom: var(--space-6);
    }
    .setup-hero .hero-title {
      font-family: var(--heading);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.15;
      color: var(--text);
      margin: 8px 0 8px;
      letter-spacing: -0.01em;
    }
    .setup-hero .hero-sub {
      font-family: var(--font);
      font-weight: 400;
      font-size: 15px;
      color: var(--text-dim);
      line-height: 1.5;
      margin-bottom: 24px;
    }
    .setup-hero .steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .step-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      padding: 18px;
      transition: border-color 0.2s var(--ease-out);
    }
    .step-card.expanded {
      border: 2px solid var(--brand);
      padding: 22px;
    }
    .step-head {
      display: flex;
      flex-direction: row;
      gap: 14px;
      align-items: center;
    }
    .step-check {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 14px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .step-check.done {
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
    }
    .step-meta { flex: 1; min-width: 0; }
    .step-meta-title {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 16px;
      color: var(--text);
      line-height: 1.3;
    }
    .step-meta-desc {
      font-family: var(--font);
      font-weight: 400;
      font-size: 14px;
      color: var(--text-dim);
      margin-top: 2px;
      line-height: 1.4;
    }

    .step-body {
      display: none;
      flex-direction: column;
      gap: 14px;
      padding-top: 14px;
      margin-top: 14px;
      border-top: 1px solid var(--border-light);
    }
    .step-card.expanded .step-body { display: flex; }
    .step-body .actions {
      display: flex;
      flex-direction: row;
      gap: 10px;
      flex-wrap: wrap;
    }
    .step-body .btn-primary {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px 18px;
      min-height: 44px;
      font-family: var(--heading);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.18s var(--ease-out);
    }
    .step-body .btn-primary:hover { background: var(--brand-light); }
    .step-body .btn-ghost {
      background: transparent;
      color: var(--text-dim);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 18px;
      min-height: 44px;
      font-family: var(--heading);
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
    }
    .step-body .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

    /* Plan 31-04: body hint copy (Inter, muted) */
    .step-hint {
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-dim);
      margin: 0 0 14px;
    }
    .step-hint strong { color: var(--text); font-weight: 600; }
    .step-body .actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
    .step-body .actions .btn { min-height: 44px; } /* thumb-zone tap target */

    /* Meet-your-AI context block — surfaces critical Settings sections inline */
    .met-agent-context {
      margin: 4px 0 16px;
      padding: 14px 14px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .met-agent-context .context-intro {
      font-family: var(--font);
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-dim);
      margin: 0 0 10px;
    }
    .context-links { display: flex; flex-direction: column; gap: 8px; }
    .context-link {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: left;
      padding: 10px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--font);
      transition: border-color 0.15s, box-shadow 0.15s;
      min-height: 56px; /* thumb-zone tap target */
    }
    .context-link:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,90,61,0.06); }
    .context-link:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,90,61,0.2); }
    .context-link-text { flex: 1; min-width: 0; }
    .context-link-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
    .context-link-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
    .context-link-arrow { font-size: 20px; color: var(--text-dim); flex-shrink: 0; line-height: 1; }

    /* Compact bar — mounts between #testDriveBanner and #analyticsBar */
    .setup-compact {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 20px;
      margin: 12px 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
    }
    .setup-compact:hover {
      border-color: var(--brand-light);
      background: var(--bg-card);
    }
    .sc-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }
    .sc-meta-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }
    .sc-meta-title {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 14px;
      color: var(--text);
    }
    .sc-meta-count {
      font-family: var(--heading);
      font-weight: 500;
      font-size: 13px;
      color: var(--text-dim);
    }
    .sc-finish {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 13px;
      color: var(--brand);
      margin-left: auto;
      white-space: nowrap;
    }
    .sc-dismiss {
      width: 26px;
      height: 26px;
      border: none;
      background: transparent;
      color: var(--text-dim);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.18s var(--ease-out);
    }
    .sc-dismiss:hover { background: var(--border-light); }

    /* ── Phase 32 — Regression bar ──────────────────────────────────────
       Renders ONLY when computeSetupState(ov) === 'hidden' AND at least
       one ov.regression_flags entry is truthy. Mounts in #regressionBarMount
       (first child of .overview-page-content, above the AI status banner).
       NOT dismissible (REGR-05) — has no close affordance, only disappears
       when the underlying regression signal flips back to false.

       Uses only var(--hot) / var(--hot-dim) tokens — NEVER hardcode amber. */
    #regressionBarMount:empty { display: none; }
    .regression-bar {
      display: block;
      margin: 0 0 16px;
      background: var(--hot-dim);
      border: 1px solid var(--hot);
      border-left: 4px solid var(--hot);
      border-radius: 12px;
      padding: 14px 20px;
      box-sizing: border-box;
    }
    .regression-bar-content {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .regression-bar-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--hot);
    }
    .regression-bar-text {
      flex: 1;
      min-width: 200px;
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
    }
    .regression-bar-text strong {
      font-family: var(--heading);
      font-weight: 700;
      color: var(--hot);
      display: block;
      margin-bottom: 2px;
      font-size: 15px;
    }
    .regression-bar-cta {
      flex-shrink: 0;
      padding: 10px 20px;
      min-height: 44px;
      background: var(--hot);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: var(--heading);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .regression-bar-cta:hover { filter: brightness(0.92); }
    .regression-bar-cta:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    @media (max-width: 600px) {
      .regression-bar { margin: 0 0 12px; padding: 12px 14px; }
      .regression-bar-content { gap: 10px; }
      .regression-bar-cta { width: 100%; }
    }

    /* Shared progress-block — identical shape to onboard.html Plan 31-01 handoff */
    .progress-block { margin-bottom: 12px; }
    .progress-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
    }
    .progress-kicker {
      font-family: var(--heading);
      font-weight: 500;
      font-size: 12px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .progress-count {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 13px;
      color: var(--brand);
    }
    .progress-track {
      height: 6px;
      background: var(--border-light);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      height: 100%;
      background: var(--brand);
      border-radius: 3px;
      transition: width 400ms var(--ease-out);
    }
    .setup-compact .progress-track { height: 4px; }

    /* ── SETUP DRAWER + BOTTOM SHEET (Plan 31-03) ────────────────────────
       CSS-driven breakpoint: mobile <768px uses bottom sheet, desktop ≥768px
       uses right-side drawer. No JS matchMedia — resizing swaps cleanly.
       Both mount simultaneously in DOM and toggle `.open` together; @media
       rule determines which is actually painted. Motion uses iOS-native
       curve (0.32, 0.72, 0, 1) — feels correct on mobile sheets. Respects
       prefers-reduced-motion. Z-index 150/160 coexists with save-toast
       (9999), completed-prompt (500), job-modal (400), account overlay (200). */
    .setup-scrim {
      position: fixed;
      inset: 0;
      background: rgba(13, 17, 23, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1);
      z-index: 150;
    }
    .setup-scrim.open {
      opacity: 1;
      pointer-events: auto;
    }

    .setup-drawer,
    .setup-sheet {
      position: fixed;
      background: var(--surface);
      z-index: 160;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
      will-change: transform;
    }

    /* Mobile default — bottom sheet */
    .setup-drawer { display: none; }
    .setup-sheet {
      left: 0;
      right: 0;
      bottom: 0;
      max-height: 85vh;
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
      box-shadow: 0 -8px 28px rgba(13, 17, 23, 0.12);
    }
    .setup-sheet.open { transform: translateY(0); }
    .setup-sheet .sheet-handle {
      align-self: center;
      width: 44px;
      height: 5px;
      border-radius: 3px;
      background: linear-gradient(180deg, #e8e8e4 0%, #d4d4d0 100%);
      margin: 10px 0 8px;
      flex-shrink: 0;
    }

    /* Desktop — right-side drawer */
    @media (min-width: 768px) {
      .setup-sheet { display: none; }
      .setup-drawer {
        display: flex;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 90vw);
        transform: translateX(100%);
        box-shadow: -12px 0 32px rgba(13, 17, 23, 0.08);
      }
      .setup-drawer.open { transform: translateX(0); }
    }

    .setup-drawer-head,
    .setup-sheet-head {
      position: sticky;
      top: 0;
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid transparent;
      transition: border-color 160ms var(--ease-out);
      z-index: 1;
      flex-shrink: 0;
    }
    .setup-drawer-body.scrolled ~ .setup-drawer-head,
    .setup-drawer-body.scrolled + .setup-drawer-head,
    .setup-drawer.body-scrolled .setup-drawer-head,
    .setup-sheet.body-scrolled .setup-sheet-head {
      border-bottom-color: var(--border-light);
    }
    .setup-drawer-title,
    .setup-sheet-title {
      font-family: var(--heading);
      font-weight: 600;
      font-size: 18px;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .setup-close {
      border: none;
      background: transparent;
      color: var(--text-dim);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
    }
    .setup-close:hover {
      background: var(--border-light);
      color: var(--text);
    }
    .setup-close:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      background: var(--border-light);
    }

    .setup-drawer-body,
    .setup-sheet-body {
      flex: 1;
      overflow-y: auto;
      padding: 18px 22px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      -webkit-overflow-scrolling: touch;
    }
    /* Staggered reveal of step cards when drawer/sheet opens.
       pointer-events:none during animation prevents taps on cards
       that haven't reached their final position yet. */
    .setup-drawer.open .setup-drawer-body > .step-card,
    .setup-sheet.open .setup-sheet-body > .step-card {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      animation: setupCardReveal 320ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    .setup-drawer.open .setup-drawer-body > .step-card:nth-child(1),
    .setup-sheet.open .setup-sheet-body > .step-card:nth-child(1)  { animation-delay: 80ms; }
    .setup-drawer.open .setup-drawer-body > .step-card:nth-child(2),
    .setup-sheet.open .setup-sheet-body > .step-card:nth-child(2)  { animation-delay: 130ms; }
    .setup-drawer.open .setup-drawer-body > .step-card:nth-child(3),
    .setup-sheet.open .setup-sheet-body > .step-card:nth-child(3)  { animation-delay: 180ms; }
    @keyframes setupCardReveal {
      to { opacity: 1; transform: translateY(0); pointer-events: auto; }
    }

    /* Ensure all interactive elements in the setup sheet are immediately tappable
       after animation completes. touch-action:manipulation removes the 300ms
       double-tap-to-zoom delay on mobile without disabling other gestures. */
    .setup-drawer-body button,
    .setup-drawer-body a,
    .setup-drawer-body [role="button"],
    .setup-sheet-body button,
    .setup-sheet-body a,
    .setup-sheet-body [role="button"] {
      touch-action: manipulation;
    }
    /* Explicit min tap target for all setup-sheet buttons */
    .setup-sheet-body .btn,
    .setup-drawer-body .btn,
    .setup-sheet-body .context-link,
    .setup-drawer-body .context-link {
      min-height: 44px;
    }

    /* Body scroll lock helper — applied to <body> while open.
       iOS Safari fix: position:fixed instead of overflow:hidden.
       overflow:hidden on body blocks pointer events on fixed-position children
       (the sheet z-index:160) in some iOS versions, making buttons untappable.
       position:fixed + top preserves scroll position and allows touch events
       to reach the sheet normally. */
    body.setup-open {
      position: fixed;
      width: 100%;
      overflow-y: scroll; /* keep scrollbar width, prevent layout shift */
    }

    /* Honor prefers-reduced-motion — kill transitions + stagger reveals */
    @media (prefers-reduced-motion: reduce) {
      .setup-scrim,
      .setup-drawer,
      .setup-sheet,
      .setup-close,
      .setup-drawer-head,
      .setup-sheet-head {
        transition: none !important;
      }
      .setup-drawer.open .setup-drawer-body > .step-card,
      .setup-sheet.open .setup-sheet-body > .step-card {
        animation: none !important;
        opacity: 1;
        transform: none;
      }
    }

    /* ── SETTINGS TAB — GRID + DETAIL ── */
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }
    .settings-grid-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      cursor: pointer;
      transition: all 0.2s var(--ease-out);
      position: relative;
    }
    .settings-grid-card:hover {
      border-color: var(--brand);
      box-shadow: 0 4px 16px rgba(45,90,61,0.1);
      transform: translateY(-2px);
    }
    .sgc-icon {
      width: 44px; height: 44px;
      background: var(--brand-dim);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      transition: background 0.2s;
    }
    .settings-grid-card:hover .sgc-icon { background: rgba(45,90,61,0.12); }
    .sgc-icon svg { width: 22px; height: 22px; stroke: var(--brand); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .sgc-name { font-family: var(--heading); font-weight: 600; font-size: var(--text-sm); color: var(--text); margin-bottom: 4px; }
    .sgc-status { font-size: var(--text-xs); color: var(--text-dim); line-height: 1.4; }
    .sgc-arrow { position: absolute; top: 20px; right: 16px; color: var(--border); transition: color 0.2s; }
    .settings-grid-card:hover .sgc-arrow { color: var(--brand); }
    .settings-team-link {
      margin-top: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s var(--ease-out);
    }
    .settings-team-link:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(45,90,61,0.1); }
    .settings-team-link-left { display: flex; align-items: center; gap: 12px; }
    .settings-team-link-left svg { width: 20px; height: 20px; stroke: var(--brand); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

    /* Detail view */
    .settings-detail { display: none; animation: settingsSlideIn 0.25s ease; }
    .settings-detail.active { display: block; }
    @keyframes settingsSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
    .settings-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: var(--text-sm); }
    .settings-breadcrumb a { color: var(--brand); text-decoration: none; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }
    .settings-breadcrumb a:hover { text-decoration: underline; }
    .settings-breadcrumb .current { color: var(--text); font-weight: 600; }

    /* Settings detail nav — replaces the old chevron-link breadcrumb. The
       prominent pill button is the primary back affordance; the breadcrumb
       trail sits below as orientation. Hit area is ~36px tall vs the old
       14px chevron click target. */
    .settings-detail-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 20px;
    }
    .settings-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      line-height: 1;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }
    .settings-back-btn:hover {
      background: var(--surface-2);
      border-color: var(--text);
      color: var(--text);
    }
    .settings-back-btn:active { transform: translateX(-1px); }
    .settings-back-btn:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .settings-back-btn svg { flex-shrink: 0; color: var(--text-dim); }
    .settings-back-btn:hover svg { color: var(--text); }
    .settings-breadcrumb-trail {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: var(--text-xs);
      color: var(--text-dim);
      padding-left: 2px;
    }
    .settings-breadcrumb-trail .settings-breadcrumb-sep { color: var(--text-dim); opacity: 0.6; }
    .settings-breadcrumb-trail .current { color: var(--text); font-weight: 600; }
    @media (max-width: 767px) {
      .settings-back-btn { padding: 10px 14px 10px 10px; font-size: 14px; }
    }
    .settings-detail-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .settings-detail-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 14px;
    }
    .settings-detail-header .sgc-icon { margin-bottom: 0; }
    .settings-detail-header h3 { font-family: var(--heading); font-size: 18px; font-weight: 700; margin: 0; }
    .settings-detail-header p { font-size: var(--text-sm); color: var(--text-dim); margin: 2px 0 0; }
    .settings-detail-body { padding: 24px; }
    .settings-detail-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

    /* Form fields (shared) */
    .settings-field { margin-bottom: var(--space-3); }
    .settings-field label {
      display: block; font-size: var(--text-xs); font-weight: 600;
      color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-1);
    }
    .settings-field input, .settings-field textarea, .settings-field select {
      width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
      font-family: var(--font); font-size: var(--text-base); background: var(--bg); color: var(--text); outline: none;
      transition: border-color 0.15s;
    }
    .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus {
      border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,90,61,0.08);
    }
    .settings-field textarea { min-height: 60px; resize: vertical; }
    .settings-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 600px) { .settings-field-row { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
    .settings-save {
      background: var(--brand); color: var(--bg); border: none; padding: 10px 24px;
      border-radius: 8px; font-family: var(--heading); font-weight: 600; font-size: var(--text-base);
      cursor: pointer; transition: background 0.15s;
    }
    .settings-save:hover { background: var(--brand-light); }
    .settings-save:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Services cards */
    .svc-card {
      background: var(--surface);
      border: 1px solid var(--border-light, #f0f0ec);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 12px;
      position: relative;
      transition: border-color 0.15s;
    }
    .svc-card:hover { border-color: var(--border); }
    .svc-card:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,90,61,0.06); }
    .svc-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .svc-card-num {
      font-family: var(--heading);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--text-dim);
      background: var(--bg);
      padding: 2px 8px;
      border-radius: 4px;
    }
    .svc-remove-btn {
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: var(--text-sm);
      padding: 4px 8px;
      border-radius: 6px;
      transition: all 0.15s;
    }
    .svc-remove-btn:hover { background: rgba(220,53,69,0.08); color: var(--red, #dc3545); }
    .svc-card-fields {
      display: grid;
      grid-template-columns: 1fr 120px 90px;
      gap: 10px;
    }
    @media (max-width: 600px) { .svc-card-fields { grid-template-columns: 1fr; } }
    .svc-card-fields .settings-field { margin-bottom: 0; }
    .svc-add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 14px;
      border: 2px dashed var(--border-light, #f0f0ec);
      border-radius: var(--radius);
      background: none;
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text-dim);
      font-family: var(--heading);
      margin-top: 4px;
      transition: all 0.15s;
    }
    .svc-add-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-dim); }

    /* Hours grid */
    .hours-grid { display: flex; flex-direction: column; gap: 8px; }
    .hours-day-row {
      display: grid;
      grid-template-columns: 100px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border-light, #f0f0ec);
      border-radius: var(--radius);
      transition: border-color 0.15s;
    }
    .hours-day-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,90,61,0.06); }
    .hours-day-row.is-closed { opacity: 0.5; }
    .hours-day-row .day-label {
      font-family: var(--heading);
      font-weight: 600;
      font-size: var(--text-sm);
      color: var(--text);
    }
    .hours-time-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hours-day-row input[type="time"] {
      padding: 8px 10px;
      border: 1px solid var(--border-light, #f0f0ec);
      border-radius: 8px;
      font-family: var(--font);
      font-size: var(--text-sm);
      background: var(--bg);
      color: var(--text);
      max-width: 130px;
      outline: none;
      transition: border-color 0.15s;
    }
    .hours-day-row input[type="time"]:focus { border-color: var(--brand); }
    .hours-day-row input[type="time"]:disabled { opacity: 0.4; cursor: not-allowed; }
    .hours-time-sep { color: var(--text-dim); font-size: var(--text-sm); font-weight: 500; }
    .hours-closed-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-xs);
      font-weight: 500;
      color: var(--text-dim);
      white-space: nowrap;
    }
    @media (max-width: 600px) {
      .hours-day-row { grid-template-columns: 1fr; gap: 8px; }
      .hours-day-row .day-label { font-size: var(--text-base); }
    }

    /* FAQ rows */
    .faq-row { padding: var(--space-2); background: var(--bg); border-radius: 8px; margin-bottom: 6px; }
    .faq-row input, .faq-row textarea { margin-bottom: var(--space-1); }
    .faq-row textarea { min-height: 40px; font-size: var(--text-base); }

    /* Notification toggles */
    .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--text-base); }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-switch { position: relative; width: 40px; height: 22px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: 0.2s var(--ease-out); }
    .toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s var(--ease-out); }
    .toggle-switch input:checked + .toggle-slider { background: var(--brand); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

    /* ── ACCOUNT PANEL ─────────────────── */
    .account-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,0.3);
    }
    .account-overlay.visible { display: block; }
    .account-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(400px, 90vw);
      background: var(--bg);
      z-index: 201;
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 0.25s var(--ease-out);
      box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    }
    .account-overlay.visible .account-panel { transform: translateX(0); }
    .account-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--bg);
    }
    .account-panel-header h2 {
      font-family: var(--heading);
      font-size: var(--text-xl);
      font-weight: 600;
    }
    .account-close {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: var(--text-dim);
      padding: var(--space-1);
    }
    .account-section {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .account-section h3 {
      font-family: var(--heading);
      font-size: var(--text-base);
      font-weight: 600;
      margin-bottom: 10px;
    }
    .account-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      font-size: var(--text-base);
    }
    .account-row .label { color: var(--text-dim); }
    .account-row .value { font-weight: 600; }
    .account-btn {
      display: block;
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      font-family: var(--font);
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      border: none;
      margin-top: var(--space-2);
    }
    .account-btn.primary { background: var(--brand); color: #fff; }
    .account-btn.primary:hover { background: var(--brand-light); }
    .account-btn.outline { background: none; border: 1px solid var(--border); color: var(--text); }
    .account-btn.outline:hover { border-color: var(--brand); color: var(--brand); }

    /* ── ANALYTICS BAR ─────────────────── */
    .analytics-bar {
      margin: 0 0 var(--space-4);
      display: none;
    }
    .analytics-bar.visible { display: block; }
    .analytics-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-2);
    }
    .analytics-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      text-align: center;
    }
    .analytics-stat .a-val {
      font-size: var(--text-xl);
      font-weight: 700;
      font-family: var(--heading);
    }
    .analytics-stat .a-label {
      font-size: 10px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-top: 2px;
    }
    .analytics-stat .a-trend {
      font-size: 10px;
      font-weight: 600;
      margin-top: 2px;
    }
    .a-trend.up { color: var(--brand); }
    .a-trend.down { color: var(--red); }
    .a-trend.flat { color: var(--text-dim); }
    @media (max-width: 600px) {
      .analytics-inner { grid-template-columns: repeat(2, 1fr); }
      .account-panel { width: 100vw; }
    }

    /* ── SKELETON LOADING ────────────────────── */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, var(--surface-2) 25%, #E8E8E3 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: var(--radius-sm);
    }
    .skeleton-stat { height: 100px; border-radius: var(--radius); }
    .skeleton-feed-item { height: 56px; margin-bottom: var(--space-2); border-radius: 8px; }
    .skeleton-chart { height: 160px; border-radius: var(--radius); }

    /* ── OVERVIEW STAT CARDS ─────────────────── */
    .overview-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
      margin-bottom: var(--space-5);
    }
    @media (max-width: 767px) {
      .overview-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
      }
    }
    .stat-card-v2 {
      padding: 24px;
      border-right: 1px solid var(--border);
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      border-top: none;
      position: relative;
      cursor: pointer;
      transition: background var(--duration-base) var(--ease-out);
    }
    .stat-card-v2:last-child { border-right: none; }
    .stat-card-v2.accent-brand { border-top: 3px solid var(--brand); }
    .stat-card-v2.accent-hot { border-top: 3px solid var(--hot); }
    .stat-card-v2:hover { background: rgba(0,0,0,0.015); }
    @media (max-width: 767px) {
      .stat-card-v2 { padding: 16px; }
      .stat-card-v2:nth-child(2n) { border-right: none; }
      .stat-card-v2:nth-child(n+3) { border-top: 1px solid var(--border); }
    }
    .stat-card-v2 .stat-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: var(--space-2);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stat-card-v2 .stat-icon {
      width: 36px; height: 36px;
      background: var(--brand-dim);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .stat-card-v2 .stat-icon svg {
      width: 16px; height: 16px;
      stroke: var(--brand); fill: none;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    }
    .stat-card-v2 .stat-value {
      font-family: var(--heading);
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1;
      margin: 10px 0 6px;
    }
    .stat-card-v2 .stat-compare {
      font-size: 12px;
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .stat-compare.up { color: var(--green); }
    .stat-compare.down { color: var(--red); }
    .stat-compare.flat { color: var(--text-dim); }
    .trend-arrow { vertical-align: middle; margin-right: 2px; position: relative; top: -1px; }

    /* ── STAT CARD DELTA PILL + SPARKLINE ───── */
    .delta-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 999px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
    }
    .delta-pill.pill-up { background: var(--brand-subtle); color: var(--brand); }
    .delta-pill.pill-down { background: var(--red-dim); color: var(--red); }
    .delta-pill.pill-flat { background: var(--surface-2); color: var(--text-dim); }
    .spark-row {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 32px;
      margin-top: 10px;
    }
    .spark-bar {
      flex: 1;
      background: var(--brand-dim);
      border-radius: 2px;
      transition: background 150ms ease;
      min-height: 2px;
    }
    .stat-card-v2:hover .spark-bar { background: var(--brand-subtle); }
    .stat-card-v2 .stat-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
    }

    /* ── OVERVIEW CONTENT SECTIONS ─────────────── */
    .overview-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      margin-bottom: 20px;
    }
    .overview-section-header {
      padding: 16px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .overview-section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
    }
    .overview-section-body {
      padding: 12px 0 4px;
    }

    /* Activity Feed */
    .activity-feed { display: flex; flex-direction: column; gap: var(--space-2); }
    .feed-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      padding: 14px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border-light);
      transition: background 150ms ease;
    }
    .feed-item:last-child { border-bottom: none; }
    .feed-item:hover { background: rgba(0,0,0,0.018); cursor: pointer; }
    .feed-emoji {
      width: 32px; height: 32px; background: var(--brand-subtle); border-radius: 8px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      margin-top: 2px;
    }
    .feed-emoji svg {
      width: 16px; height: 16px; stroke: var(--brand); fill: none;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    }
    .feed-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .feed-primary { font-size: var(--text-base); font-weight: 500; color: var(--text); line-height: 1.4; }
    .feed-secondary { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.3; }
    .feed-time { font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; font-family: var(--mono); margin-left: auto; flex-shrink: 0; padding-top: 2px; }

    /* Chart */
    .chart-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-4);
    }

    /* AI Value Card */
    .ai-value-card {
      background: linear-gradient(135deg, rgba(45,90,61,0.06) 0%, rgba(45,90,61,0.02) 100%);
      border: 1px solid rgba(45,90,61,0.15);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }
    .ai-value-icon {
      width: 52px; height: 52px; background: var(--brand); border-radius: 12px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .ai-value-icon svg {
      width: 26px; height: 26px; stroke: #ffffff; fill: none;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    }
    .ai-value-title { font-family: var(--heading); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); }
    .ai-value-stat { font-size: var(--text-base); font-weight: 500; }
    .ai-value-revenue { font-size: var(--text-base); color: var(--brand); font-weight: 600; margin-top: 2px; }

    /* Hot Lead Banner */
    .hotlead-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, rgba(217,119,6,0.08) 0%, rgba(217,119,6,0.04) 100%);
      border: 1px solid rgba(217,119,6,0.25);
      border-radius: var(--radius-lg);
      padding: 14px 20px;
      margin-bottom: 20px;
    }
    .hotlead-banner-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .hotlead-banner-icon {
      width: 38px; height: 38px;
      background: rgba(217,119,6,0.12);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--hot);
      flex-shrink: 0;
    }
    .hotlead-banner-title {
      font-family: var(--heading);
      font-size: 14px;
      font-weight: 600;
      color: #92400E;
    }
    .hotlead-banner-sub {
      font-size: 12px;
      color: #B45309;
      margin-top: 2px;
    }
    .hotlead-banner-btn {
      background: var(--hot);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      padding: 8px 16px;
      font-family: var(--heading);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 150ms ease;
    }
    .hotlead-banner-btn:hover {
      background: #B45309;
      transform: translateY(-1px);
    }

    /* AI Value Card Premium */
    .ai-value-card-premium {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 24px;
      background: linear-gradient(135deg, rgba(45,90,61,0.07) 0%, rgba(45,90,61,0.02) 100%);
      border: 1px solid rgba(45,90,61,0.15);
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
    }
    .ai-value-card-icon {
      width: 48px; height: 48px;
      background: rgba(45,90,61,0.12);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      color: var(--brand);
      flex-shrink: 0;
    }
    .ai-value-card-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--brand);
      margin-bottom: 4px;
    }
    .ai-value-card-amount {
      font-family: var(--heading);
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--brand);
      line-height: 1;
      margin-bottom: 4px;
    }
    .ai-value-card-desc {
      font-size: 13px;
      color: var(--text-dim);
    }

    /* Upcoming Appointments */
    .upcoming-list { display: flex; flex-direction: column; gap: var(--space-2); }
    .upcoming-item {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-3);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .upcoming-date { font-size: var(--text-sm); color: var(--text-dim); font-family: var(--mono); white-space: nowrap; min-width: 140px; }
    .upcoming-service { font-size: var(--text-base); font-weight: 500; }
    .upcoming-phone { font-size: var(--text-sm); color: var(--text-dim); }

    /* Pending Bookings (legacy — superseded by .attention-inbox) */
    .overview-pending { background: var(--yellow-dim); border: 1px solid var(--yellow); border-radius: var(--radius); padding: 16px; }

    /* ── Attention Inbox ─────────────────────────────
       Unified surface that replaces the hot-lead banner + the standalone
       Pending Booking Requests card. Single ranked list of everything that
       needs the owner's attention, sorted by urgency (hot leads first,
       then booking requests by age). */
    .attention-inbox {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      margin-bottom: 20px;
      overflow: hidden;
    }
    .attention-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-light);
      gap: 12px;
    }
    .attention-head-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .attention-head-title {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    .attention-head-count {
      background: var(--hot-dim);
      color: var(--hot);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
      line-height: 1;
    }
    .attention-head-count.calm {
      background: var(--brand-subtle);
      color: var(--brand);
    }
    .attention-head-meta {
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .attention-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      transition: background 120ms ease;
      box-shadow: inset 3px 0 0 transparent;
    }
    .attention-row:last-child { border-bottom: none; }
    .attention-row:hover { background: var(--surface-sunk); }
    .attention-row.urgent { box-shadow: inset 3px 0 0 var(--hot); }
    .attention-row.standard { box-shadow: inset 3px 0 0 var(--accent); }
    .attention-row .meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
      flex: 1;
    }
    .attention-row .top {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .attention-row .name {
      font-weight: 600;
      color: var(--text);
      font-size: 14px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .attention-row .ctx {
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .attention-row .timestamp {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .attention-row .right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .attention-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .attention-pill.hot { background: var(--hot-dim); color: var(--hot); }
    .attention-pill.booking { background: rgba(212,164,76,0.18); color: #8a6a2c; }
    .attention-pill .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
    }
    .attention-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--surface-2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 13px;
      color: var(--text-dim);
      flex-shrink: 0;
      border: 1px solid var(--border-light);
    }
    .attention-avatar.hot { background: var(--hot-dim); color: var(--hot); border-color: transparent; }
    .attention-avatar.brand { background: var(--brand-dim); color: var(--brand); border-color: transparent; }
    .attention-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      font-family: var(--font);
      cursor: pointer;
      border: 1px solid transparent;
      transition: 150ms ease;
      white-space: nowrap;
    }
    .attention-btn.primary { background: var(--brand); color: #fff; }
    .attention-btn.primary:hover { background: var(--brand-light); }
    .attention-btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
    .attention-btn.ghost:hover { background: var(--surface-2); }

    @media (max-width: 640px) {
      .attention-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
      }
      .attention-row .meta { flex: 1 1 100%; min-width: 0; }
      .attention-row .right { width: 100%; justify-content: flex-end; }
      .attention-head { padding: 12px 16px; }
      .attention-head-meta { display: none; }
    }

    /* ── AI Profile ───────────────────────────────────
       Replaces the old Recent Activity card in the bottom-left of
       Overview. Shows a curated subset of Settings sections so the owner
       can see (a) what their AI is trained on, and (b) what's incomplete
       (red dot). Each row deeplinks to the matching Settings panel. */
    .ai-profile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      overflow: hidden;
    }
    .ai-profile-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-light);
      gap: 12px;
    }
    .ai-profile-head-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .ai-profile-title {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    .ai-profile-agent {
      background: var(--brand-subtle);
      color: var(--brand);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 6px;
      line-height: 1;
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ai-profile-toggle {
      font-size: 12px;
      color: var(--brand);
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px 6px;
      border-radius: 6px;
      font-family: var(--font);
    }
    .ai-profile-toggle:hover {
      background: var(--brand-subtle);
    }
    .ai-profile-intro {
      padding: 12px 18px 10px;
      color: var(--text-dim);
      font-size: 12.5px;
      line-height: 1.5;
      border-bottom: 1px solid var(--border-light);
    }
    .profile-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      transition: background 120ms ease;
      background: transparent;
      border-left: none;
      border-right: none;
      border-top: none;
      width: 100%;
      text-align: left;
      font-family: var(--font);
      color: var(--text);
    }
    .profile-row:last-child { border-bottom: none; }
    .profile-row:hover { background: var(--surface-sunk); }
    .profile-row:hover .profile-arrow { color: var(--brand); transform: translateX(2px); }
    .profile-icon {
      width: 18px; height: 18px;
      flex-shrink: 0;
      color: var(--text-muted);
    }
    .profile-row .body { flex: 1; min-width: 0; }
    .profile-row .title {
      font-weight: 600;
      font-size: 13.5px;
      color: var(--text);
      display: flex;
      align-items: center;
    }
    .profile-row .sub {
      color: var(--text-dim);
      font-size: 12.5px;
      margin-top: 2px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    .profile-arrow {
      color: var(--text-muted);
      font-size: 16px;
      transition: 150ms ease;
      flex-shrink: 0;
      line-height: 1;
    }
    .profile-dot {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(184,71,26,0.18);
      margin-left: 8px;
      flex-shrink: 0;
    }
    .profile-dot.header-rollup {
      margin-left: 4px;
      vertical-align: 1px;
    }

    /* ── Upcoming Appointments — vertical stack ─────────
       Old layout pinned the date to a 140px-wide left column, which
       squeezed the service name into 3-line wraps in the narrow right
       column on Overview. New layout puts the service name on top
       (primary scan target) with date + phone underneath. */
    .upcoming-item {
      display: block;
      padding: 14px 18px;
      background: var(--surface);
      border: none;
      border-bottom: 1px solid var(--border-light);
      border-radius: 0;
    }
    .upcoming-item:last-child { border-bottom: none; }
    .upcoming-list {
      gap: 0;
      display: block;
    }
    .upcoming-service {
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      margin-bottom: 4px;
    }
    .upcoming-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .upcoming-date {
      color: var(--text-dim);
      font-weight: 500;
      min-width: 0;
      white-space: nowrap;
    }
    .upcoming-meta .upcoming-phone::before {
      content: "·";
      margin-right: 8px;
      color: var(--border);
    }
    .upcoming-phone {
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* Empty States — uses primary definition from main style block */

    /* Overview container */
    #overview-container { padding: 20px; max-width: 900px; margin: 0 auto; }
    @media (max-width: 767px) {
      #overview-container { padding: 16px; }
      .upcoming-date { min-width: auto; }
    }

    /* Demo Banner */

    /* ── PIPELINE VIEW ──────────────────────────── */
    #pipeline-container { overflow: hidden; }

    /* Kanban board — desktop */
    .kanban-board {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-3);
      padding: var(--space-4);
      min-height: 400px;
      overflow-x: auto;
    }
    .kanban-column {
      background: var(--surface-2);
      border-radius: var(--radius);
      padding: var(--space-3);
      min-width: 160px;
    }
    .kanban-column-header {
      font-family: var(--heading);
      font-weight: 600;
      font-size: var(--text-sm);
      color: var(--text-primary);
      padding: var(--space-2) 0;
      border-bottom: 2px solid var(--brand);
      margin-bottom: var(--space-3);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .kanban-column-count {
      background: var(--brand);
      color: white;
      font-size: var(--text-xs);
      padding: 2px 8px;
      border-radius: 12px;
    }

    /* Job cards */
    .job-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-3);
      margin-bottom: var(--space-2);
      cursor: pointer;
      transition: box-shadow 0.2s ease, transform 0.15s ease;
    }
    .job-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }
    .job-card-name {
      font-weight: 600;
      font-size: var(--text-sm);
      color: var(--text-primary);
      margin-bottom: var(--space-1);
    }
    .job-card-service {
      font-size: var(--text-xs);
      color: var(--text-dim);
      margin-bottom: var(--space-2);
    }
    .job-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-xs);
      color: var(--text-dim);
    }
    .job-card-value {
      font-weight: 600;
      color: var(--brand);
    }

    /* Status left-border color indicators */
    .job-card[data-status="lead"]        { border-left: 3px solid #3a7350; }
    .job-card[data-status="quoted"]      { border-left: 3px solid #D4A44C; }
    .job-card[data-status="booked"]      { border-left: 3px solid #2D5A3D; }
    .job-card[data-status="in_progress"] { border-left: 3px solid #1a6b3a; }
    .job-card[data-status="completed"]   { border-left: 3px solid #595959; }
    .job-card[data-status="lost"]        { border-left: 3px solid #c0392b; }

    /* Mobile grouped list */
    @media (max-width: 767px) {
      .kanban-board { display: none; }
      .pipeline-mobile-list { display: block; }
    }
    @media (min-width: 768px) {
      .pipeline-mobile-list { display: none; }
    }
    .pipeline-group {
      margin-bottom: var(--space-3);
    }
    .pipeline-group-header {
      font-family: var(--heading);
      font-weight: 600;
      font-size: var(--text-sm);
      padding: var(--space-3) var(--space-4);
      background: var(--surface-2);
      border-radius: var(--radius);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }
    .pipeline-group-header .chevron {
      transition: transform 0.2s ease;
    }
    .pipeline-group.collapsed .chevron {
      transform: rotate(-90deg);
    }
    .pipeline-group.collapsed .pipeline-group-items {
      display: none;
    }
    .pipeline-group-items {
      padding: var(--space-2) 0;
    }

    /* Drag-and-drop states */
    .job-card.dragging { opacity: 0.5; }
    .kanban-column.drag-over {
      background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
      border: 2px dashed var(--brand);
    }

    /* New job flash animation (Realtime INSERT) */
    @keyframes job-flash {
      0%   { background-color: color-mix(in srgb, var(--brand) 30%, var(--surface)); }
      100% { background-color: var(--surface); }
    }
    .job-card.new-job {
      animation: job-flash 2s ease-out;
    }

    /* Read-only mode (essentials tier) */
    .pipeline-read-only .job-card { cursor: default; }
    .pipeline-read-only .job-card:hover { box-shadow: none; transform: none; }
    .pipeline-upgrade-prompt {
      background: var(--surface-2);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: var(--space-4);
      text-align: center;
      margin-bottom: var(--space-4);
      color: var(--text-dim);
      font-size: var(--text-sm);
    }
    .pipeline-upgrade-prompt strong {
      display: block;
      color: var(--text-primary);
      font-family: var(--heading);
      font-weight: 600;
      margin-bottom: var(--space-1);
    }

    /* Customers Demo */
    #customers-container { padding: 20px; max-width: 900px; margin: 0 auto; }
    @media (max-width: 767px) { #customers-container { padding: 16px; } }
    .customers-table { width: 100%; border-collapse: collapse; }
    .customers-table th { text-align: left; font-family: var(--heading); font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px; border-bottom: 2px solid var(--border); cursor: pointer; user-select: none; }
    .customers-table th:hover { color: var(--text-primary); }
    .customers-table td { font-size: var(--text-base); padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .customers-table tr:last-child td { border-bottom: none; }
    .customers-table tbody tr { cursor: pointer; transition: background 0.15s var(--ease-out, ease); }
    .customers-table tbody tr:hover { background: var(--surface-2); }
    .customers-table .sort-arrow { font-size: 10px; margin-left: 4px; }
    @media (max-width: 767px) { .customers-table .hide-mobile { display: none; } }
    .customer-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--text-xs); font-weight: 600; }
    .customer-status.active { background: var(--green-dim); color: var(--green); }
    .customer-status.inactive { background: var(--surface-2); color: var(--text-dim); }
    .cust-upgrade-card { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-4); text-align: center; color: var(--text-dim); font-size: var(--text-sm); }
    .cust-upgrade-card strong { display: block; color: var(--text-primary); font-family: var(--heading); font-weight: 600; font-size: 16px; margin-bottom: var(--space-1); }
    .cust-upgrade-card p { margin: 0 0 var(--space-3); }
    .cust-upgrade-card .lock-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--surface); border-radius: 50%; border: 1px solid var(--border); margin-bottom: var(--space-2); }
    .cust-upgrade-card .lock-icon svg { width: 24px; height: 24px; stroke: var(--text-dim); }

    /* ── CUSTOMER CARD LIST ──────────────────── */
    .customer-card-list { display: flex; flex-direction: column; gap: 8px; }
    .customer-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: border-color 0.15s var(--ease-out, ease), box-shadow 0.15s var(--ease-out, ease), transform 0.15s var(--ease-out, ease);
      cursor: pointer;
      box-shadow: var(--shadow-xs);
    }
    .customer-card:hover {
      border-color: var(--brand-dim);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
      background: var(--bg-card);
    }
    .customer-card:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
    .customer-avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--heading);
      font-weight: 700;
      color: #fff;
      font-size: 15px;
      flex-shrink: 0;
      letter-spacing: -0.01em;
    }
    .customer-card-body { flex: 1; min-width: 0; }
    .customer-card-row1 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }
    .customer-card-name {
      font-family: var(--heading);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .customer-status-badge {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }
    .customer-status-badge.hot { background: var(--hot-dim); color: var(--hot); }
    .customer-status-badge.warm { background: var(--warm-dim); color: var(--warm); }
    .customer-status-badge.cold { background: var(--surface-2); color: var(--text-muted); }
    .customer-card-conv-count {
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap;
      margin-left: auto;
      flex-shrink: 0;
    }
    .customer-card-meta {
      font-size: 12px;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .customer-card-meta .mono { font-family: var(--mono); font-size: 11px; }
    .customer-card-row3 { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
    @media (max-width: 767px) {
      .customer-card { padding: 12px 14px; }
      .customer-card-conv-count { margin-left: 0; }
    }

    /* ── CUSTOMER DETAIL DRAWER ─────────────── */
    .cust-detail-overlay { display:none; position:fixed; inset:0; z-index:200; }
    .cust-detail-overlay.visible { display:flex; justify-content:flex-end; }
    .cust-detail-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.3); }
    .cust-detail-drawer {
      position:relative; width:440px; max-width:100%; height:100%;
      background:var(--surface); overflow-y:auto;
      box-shadow:-4px 0 24px rgba(0,0,0,0.12);
      animation: slideInRight 0.2s var(--ease-out, ease);
    }
    @keyframes slideInRight { from { transform:translateX(100%); } to { transform:translateX(0); } }
    @media (max-width:767px) {
      .cust-detail-drawer { width:100%; }
    }
    .cust-detail-header {
      position:sticky; top:0; background:var(--surface); z-index:1;
      padding:16px 20px; border-bottom:1px solid var(--border);
      display:flex; justify-content:space-between; align-items:center;
    }
    .cust-detail-tabs {
      display:flex; border-bottom:1px solid var(--border); padding:0 20px;
    }
    .cust-detail-tab {
      padding:10px 16px; font-family:var(--heading); font-size:var(--text-sm);
      font-weight:600; color:var(--text-dim); cursor:pointer; border:none;
      background:none; border-bottom:2px solid transparent;
      transition: color 0.15s var(--ease-out, ease), border-color 0.15s var(--ease-out, ease);
    }
    .cust-detail-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
    .cust-detail-body { padding:20px; }
    .cust-detail-field { margin-bottom:16px; }
    .cust-detail-label {
      font-family:var(--heading); font-size:var(--text-xs); font-weight:600;
      color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em;
      margin-bottom:4px; display:flex; align-items:center; gap:8px;
    }
    .cust-detail-input {
      width:100%; padding:8px 12px; border:1px solid var(--border);
      border-radius:8px; font-size:var(--text-base); font-family:var(--font);
      background:var(--surface); transition:border-color 0.15s var(--ease-out, ease);
      box-sizing:border-box;
    }
    .cust-detail-input:focus { outline:none; border-color:var(--brand); }
    .cust-detail-textarea {
      width:100%; min-height:100px; padding:8px 12px; border:1px solid var(--border);
      border-radius:8px; font-size:var(--text-base); font-family:var(--font);
      resize:vertical; background:var(--surface); box-sizing:border-box;
    }
    .cust-detail-textarea:focus { outline:none; border-color:var(--brand); }
    .cust-save-indicator {
      font-size:var(--text-xs); color:var(--green); opacity:0;
      transition:opacity 0.2s var(--ease-out, ease);
    }
    .cust-save-indicator.visible { opacity:1; }
    .cust-history-item {
      padding:12px; border:1px solid var(--border); border-radius:8px;
      margin-bottom:8px; cursor:pointer; transition:background 0.15s var(--ease-out, ease);
    }
    .cust-history-item:hover { background:var(--surface-2); }

    /* ── JOB DETAIL MODAL ───────────────────── */
    .job-detail-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 400;
      background: rgba(0,0,0,0.4);
      align-items: center;
      justify-content: center;
    }
    .job-detail-overlay.visible { display: flex; }
    .job-detail-card {
      background: var(--surface);
      border-radius: var(--radius);
      width: 90%;
      max-width: 500px;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      position: relative;
    }
    .job-detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-5);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: 1;
    }
    .job-detail-header h3 {
      font-family: var(--heading);
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    .job-detail-close {
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: var(--text-dim);
      padding: var(--space-1);
      line-height: 1;
    }
    .job-detail-body {
      padding: var(--space-4) var(--space-5);
    }
    .job-detail-field {
      margin-bottom: var(--space-4);
    }
    .job-detail-label {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: var(--space-1);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .job-detail-save-indicator {
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: var(--brand);
      font-size: var(--text-xs);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .job-detail-save-indicator.visible { opacity: 1; }
    .job-detail-input,
    .job-detail-textarea,
    .job-detail-select {
      width: 100%;
      box-sizing: border-box;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: var(--text-base);
      font-family: var(--body);
      background: var(--surface);
      color: var(--text-primary);
      transition: border-color 0.15s;
    }
    .job-detail-input:focus,
    .job-detail-textarea:focus,
    .job-detail-select:focus {
      outline: none;
      border-color: var(--brand);
    }
    .job-detail-textarea { resize: vertical; min-height: 80px; }
    .job-detail-value-text {
      font-size: var(--text-base);
      color: var(--text-primary);
    }
    .job-detail-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: var(--text-xs);
      font-weight: 600;
      background: var(--surface-2);
      color: var(--text-dim);
    }
    .job-detail-badge.ai { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
    .job-detail-link-btn {
      display: inline-block;
      margin-top: var(--space-2);
      font-size: var(--text-sm);
      color: var(--brand);
      font-weight: 600;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      text-decoration: underline;
    }
    @media (max-width: 767px) {
      .job-detail-overlay.visible {
        align-items: stretch;
      }
      .job-detail-card {
        width: 100vw;
        max-width: none;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
      }
    }

    /* ── PROMPT MODALS (completed/lost) ──────── */
    .prompt-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0,0,0,0.5);
      align-items: center;
      justify-content: center;
    }
    .prompt-overlay.visible { display: flex; }
    .prompt-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-5);
      width: 90%;
      max-width: 380px;
      box-shadow: var(--shadow-lg);
    }
    .prompt-card h4 {
      font-family: var(--heading);
      font-size: 17px;
      font-weight: 600;
      margin: 0 0 var(--space-2);
    }
    .prompt-card p {
      font-size: var(--text-sm);
      color: var(--text-dim);
      margin: 0 0 var(--space-4);
    }
    .prompt-input,
    .prompt-textarea {
      width: 100%;
      box-sizing: border-box;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: var(--text-base);
      font-family: var(--body);
      background: var(--surface);
      color: var(--text-primary);
      margin-bottom: var(--space-4);
    }
    .prompt-textarea { min-height: 80px; resize: vertical; }
    .prompt-actions {
      display: flex;
      gap: var(--space-2);
      justify-content: flex-end;
    }

    /* ── REDUCED MOTION ──────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .stat-card-v2, .card, .team-card, .stat-card { transform: none !important; }
    }

    /* ── PREMIUM REDESIGN ADDITIONS ────────────────────────── */

    /* Overview grid: 2-column layout */
    .overview-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 20px;
      margin-bottom: 24px;
      align-items: start; /* each column only as tall as its content */
    }
    .overview-grid > * {
      min-width: 0; /* prevent bleed */
    }
    #overview-appointments-area {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }
    @media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr; } }

    /* Section headers */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    /* Section headers inside overview-section cards get proper inset padding */
    .overview-section .section-header {
      padding: 18px 20px 0;
      margin-bottom: 0;
    }
    .overview-section .section-header + * {
      margin-top: 12px;
    }
    .section-title {
      font-family: var(--heading);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      padding: 0;
    }

    /* Empty state premium */
    .empty-state-premium {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 64px 32px;
      text-align: center;
    }
    .empty-icon-lg {
      width: 64px; height: 64px;
      background: var(--brand-dim);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
    }
    .empty-icon-lg svg { width: 28px; height: 28px; stroke: var(--brand); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .empty-title-lg {
      font-family: var(--heading);
      font-size: 18px; font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .empty-desc-lg {
      font-size: 14px; color: var(--text-dim); line-height: 1.6;
      max-width: 320px;
    }
    .empty-hint {
      margin-top: 12px; font-size: 12px;
      color: var(--text-muted);
      background: var(--surface-2);
      padding: 6px 14px; border-radius: 100px;
    }

    /* Kanban columns */
    .kanban-col {
      border-radius: var(--radius-lg);
      background: var(--surface-2);
      border: 1px solid var(--border);
    }
    .kanban-col-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .kanban-col[data-status="lead"] .kanban-col-header { border-top: 3px solid #6B7280; }
    .kanban-col[data-status="quoted"] .kanban-col-header { border-top: 3px solid var(--accent); }
    .kanban-col[data-status="booked"] .kanban-col-header { border-top: 3px solid var(--brand); }
    .kanban-col[data-status="in_progress"] .kanban-col-header { border-top: 3px solid #2563EB; }
    .kanban-col[data-status="completed"] .kanban-col-header { border-top: 3px solid var(--green); }
    .kanban-col[data-status="lost"] .kanban-col-header { border-top: 3px solid var(--red); }

    /* Button refinements */
    .btn-primary {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      padding: 9px 18px;
      font-family: var(--heading);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--duration-fast) var(--ease-out);
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn-primary:hover:not(:disabled) {
      background: var(--brand-light);
      box-shadow: 0 4px 12px rgba(45,90,61,0.3);
      transform: translateY(-1px);
    }

    /* AI value card update */
    .ai-value-card {
      background: linear-gradient(135deg, rgba(45,90,61,0.06), rgba(45,90,61,0.01)) !important;
      border: 1px solid rgba(45,90,61,0.15) !important;
    }

    /* Overview container update */
    #overview-container { padding: 0; max-width: none; margin: 0; }
    .overview-page-content { padding: 24px 32px 48px; max-width: 1100px; }
    @media (max-width: 767px) {
      .overview-page-content { padding: 16px; }
      #overview-container { padding: 0; }
    }

    /* Dark sidebar: bottom logout button */
    .sidebar-logout-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: none;
      border-radius: var(--radius-sm);
      background: none;
      color: #6B7280;
      font-family: var(--font);
      font-size: var(--text-sm);
      cursor: pointer;
      text-align: left;
      transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    }
    .sidebar-logout-btn:hover { background: rgba(255,255,255,0.06); color: #F9FAFB; }

    /* Sidebar bottom border */
    .sidebar-bottom {
      padding: 8px 8px 4px;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: auto;
    }

    /* Sidebar user footer */
    .sidebar-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 150ms ease;
    }
    .sidebar-user:hover { background: var(--sidebar-hover-bg); }
    .sidebar-user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: var(--brand);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--heading);
      font-weight: 600;
      font-size: 12px;
      flex-shrink: 0;
      text-transform: uppercase;
    }
    .sidebar-user-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1;
    }
    .sidebar-user-name {
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--sidebar-fg-hi);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-user-role {
      font-family: var(--font);
      font-size: 10.5px;
      color: var(--sidebar-fg);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 0;
    }

    /* ── BOOKINGS CALENDAR DAY-VIEW ───────────────────────── */
    .bookings-toolbar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .bookings-toolbar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .bookings-nav-btn {
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: all 150ms ease;
      white-space: nowrap;
    }
    .bookings-nav-btn:hover {
      background: var(--surface-2);
      border-color: var(--brand-dim);
    }
    .bookings-nav-btn.today {
      background: var(--brand-subtle);
      color: var(--brand);
      border-color: var(--brand-dim);
    }
    .bookings-current-date {
      font-family: var(--heading);
      font-size: 18px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
      margin: 0;
      flex: 1;
      min-width: 0;
    }
    .bookings-date-picker {
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      font-family: var(--font);
      font-size: 16px;
      background: var(--surface);
      color: var(--text);
    }
    .bookings-search {
      flex: 1;
      min-width: 180px;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      font-family: var(--font);
      font-size: 16px;
      background: var(--surface);
      color: var(--text);
    }
    .bookings-search:focus {
      outline: 2px solid var(--brand);
      border-color: var(--brand);
    }
    .bookings-day-list {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .booking-day-row {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .booking-time-label {
      width: 80px;
      flex-shrink: 0;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-dim);
      padding-top: 16px;
      text-align: right;
    }
    .booking-cal-card {
      flex: 1;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-xs);
      transition: all 150ms ease;
      cursor: pointer;
      min-width: 0;
    }
    .booking-cal-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--brand-dim);
    }
    .booking-cal-card.pending { border-left: 3px solid var(--hot); }
    .booking-cal-card.confirmed { border-left: 3px solid var(--green); }
    .booking-cal-card.denied { border-left: 3px solid var(--red); }
    .booking-cal-card.shared { border-left: 3px solid var(--yellow); }
    .booking-cal-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }
    .booking-cal-avatar {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--heading);
      font-weight: 600;
      color: white;
      font-size: 13px;
      flex-shrink: 0;
    }
    .booking-cal-name {
      font-family: var(--heading);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      flex: 1;
      min-width: 0;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .booking-cal-meta {
      font-family: var(--font);
      font-size: 13px;
      color: var(--text-dim);
      padding-left: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bookings-empty-day {
      padding: 60px 20px;
      text-align: center;
    }
    .bookings-empty-day-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 16px;
      color: var(--text-muted);
      opacity: 0.45;
    }
    .bookings-empty-day-text {
      font-family: var(--heading);
      font-size: 16px;
      color: var(--text-dim);
      margin: 0 0 8px;
    }
    .bookings-empty-day-hint {
      font-family: var(--font);
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
    }
    @media (max-width: 767px) {
      .bookings-toolbar { padding: 12px 14px; }
      .bookings-current-date { font-size: 15px; }
      .booking-time-label { width: 60px; font-size: 11px; }
      .bookings-day-list { padding: 12px 14px; }
    }

    /* ── Help Drawer ─────────────────────────────────────── */
    #help-drawer-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 900;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    #help-drawer-overlay.open { display: block; }

    #help-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 901;
      width: 380px;
      background: var(--surface);
      border-left: 1px solid var(--border);
      box-shadow: -4px 0 24px rgba(0,0,0,0.1);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 260ms cubic-bezier(0.22,1,0.36,1);
      overflow: hidden;
    }
    #help-drawer.open { transform: translateX(0); }

    .help-drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .help-drawer-title {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--heading); font-size: 15px; font-weight: 700;
      color: var(--text);
    }
    .help-drawer-title svg { color: var(--brand); flex-shrink: 0; }
    .help-drawer-close {
      width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; background: transparent; color: var(--text-dim);
      border-radius: var(--radius-sm); cursor: pointer;
      transition: background 150ms, color 150ms;
    }
    .help-drawer-close:hover { background: var(--surface-2); color: var(--text); }

    .help-drawer-search-wrap {
      position: relative; padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .help-drawer-search-icon {
      position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
      color: var(--text-dim); pointer-events: none;
    }
    #help-drawer-search {
      width: 100%; padding: 8px 10px 8px 36px;
      font-family: var(--font); font-size: 13px;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--surface-2); color: var(--text);
      outline: none; transition: border-color 150ms;
    }
    #help-drawer-search:focus { border-color: var(--brand); background: var(--surface); }
    #help-drawer-search::placeholder { color: var(--text-dim); }

    #help-drawer-list {
      flex: 1; overflow-y: auto;
      padding: 8px 0;
    }
    .help-drawer-cat {
      font-family: var(--heading); font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-dim);
      padding: 10px 18px 4px;
    }
    .help-drawer-cat:first-child { padding-top: 6px; }
    .help-drawer-article {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 18px;
      cursor: pointer;
      transition: background 120ms;
      text-decoration: none;
      color: inherit;
    }
    .help-drawer-article:hover { background: var(--surface-2); text-decoration: none; }
    .help-drawer-article-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      background: var(--brand-dim); border-radius: 6px;
      display: grid; place-items: center; color: var(--brand);
    }
    .help-drawer-article-title {
      flex: 1; font-size: 13px; font-weight: 500; color: var(--text);
      line-height: 1.35;
    }
    .help-drawer-article-arr {
      color: var(--text-dim); flex-shrink: 0;
      transition: transform 150ms;
    }
    .help-drawer-article:hover .help-drawer-article-arr { transform: translateX(2px); }
    .help-drawer-no-results {
      padding: 32px 18px; text-align: center;
      font-size: 13px; color: var(--text-dim);
    }

    #help-drawer-contact {
      border-top: 1px solid var(--border);
      padding: 14px 18px;
      flex-shrink: 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .help-contact-label {
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--text-dim);
    }
    .help-contact-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 500; color: var(--brand);
    }
    .help-contact-link:hover { text-decoration: underline; }

    /* Active state on ? button */
    #help-drawer-btn.active { background: var(--brand-glow); color: var(--brand-light); }

    /* Mobile: full-screen overlay */
    @media (max-width: 760px) {
      #help-drawer {
        width: 100%; border-left: none;
        border-top: 1px solid var(--border);
        top: 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
      }
      .help-drawer-close { width: 36px; height: 36px; }
    }

    /* ── PHASE 1 MOBILE OVERRIDES ─────────────
       Phase 1 dashboard mobile UX (audit 2026-05-10).
       Kept in one block so future agents can find/audit them. */

    /* P1-2: iOS auto-zoom prevention. Inline font-size:13–14px on inputs
       was triggering 1.3× zoom on focus. Force ≥16px on mobile only.
       !important overrides inline styles; desktop unaffected. */
    @media (max-width: 767px) {
      input, select, textarea,
      .prompt-input, .prompt-textarea, .chat-input,
      .settings-field, .job-detail-input, .conv-date-picker {
        font-size: 16px !important;
      }
    }

    /* P1-3a: Mobile sub-header. Hidden on desktop, sticky on mobile.
       Carries biz name, live status, and always-visible period toggle. */
    .mobile-subheader { display: none; }
    @media (max-width: 767px) {
      .mobile-subheader {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 10px 16px 8px;
        padding-top: calc(10px + env(safe-area-inset-top));
      }
      .mobile-subheader-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
      }
      .mobile-subheader-biz {
        font-family: var(--heading);
        font-weight: 600;
        font-size: 16px;
        color: var(--text);
        letter-spacing: -0.01em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-subheader-live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-dim);
        font-weight: 500;
        flex-shrink: 0;
      }
      .mobile-subheader-help {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: var(--brand-dim);
        color: var(--brand);
        border-radius: var(--radius-sm);
        cursor: pointer;
        flex-shrink: 0;
        margin-left: auto;
        transition: all 150ms ease;
      }
      .mobile-subheader-help:hover,
      .mobile-subheader-help:active {
        background: var(--brand-glow);
        color: var(--brand-light);
      }
      .mobile-subheader .topbar-range-group {
        display: flex;
        gap: 4px;
        background: var(--surface-2);
        padding: 3px;
        border-radius: 8px;
        align-self: stretch;
      }
      .mobile-subheader .topbar-range-btn {
        flex: 1;
        min-height: 32px;
        padding: 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-dim);
        background: transparent;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }
      .mobile-subheader .topbar-range-btn.active {
        background: var(--surface);
        color: var(--text);
        font-weight: 600;
        box-shadow: var(--shadow-xs);
      }
    }

    /* P1-1a: AI status banner. Above-fold attention component on mobile.
       Three tonal variants:
         hot     — hot leads waiting (warm gold, primary)
         pending — booking requests need response
         calm    — quiet day summary */
    .ai-status-banner {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 18px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      margin-bottom: var(--space-3);
    }
    .ai-status-banner-hot {
      background: linear-gradient(135deg, var(--surface) 0%, rgba(212,164,76,0.08) 100%);
      border-color: rgba(212,164,76,0.5);
    }
    .ai-status-banner-pending {
      background: linear-gradient(135deg, var(--surface) 0%, var(--brand-subtle) 100%);
      border-color: var(--brand-glow);
    }
    .ai-status-banner-calm {
      background: var(--surface);
    }
    .ai-status-banner-title {
      font-family: var(--heading);
      font-weight: 700;
      font-size: 18px;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1.25;
    }
    .ai-status-banner-hot .ai-status-banner-title { color: #8a6520; }
    .ai-status-banner-pending .ai-status-banner-title { color: var(--brand); }
    .ai-status-banner-sub {
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.45;
    }
    .ai-status-banner-cta {
      align-self: flex-start;
      padding: 10px 16px;
      border-radius: 8px;
      border: none;
      background: var(--brand);
      color: #fff;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s var(--ease-out);
    }
    .ai-status-banner-cta:hover { background: var(--brand-light); }
    .ai-status-banner-cta:active { transform: scale(0.98); }

    /* P1-1d: Overview reorder on mobile.
       Desktop order is preserved (default order:0). On mobile, reorder via
       flex `order` so the high-signal areas (AI status, attention items,
       feed) come above the lower-signal areas (KPI stats, chart).
       NOTE: At runtime dashboard.js wraps #overview-feed-area +
       #overview-appointments-area in a .overview-grid wrapper (see
       loadOverview ~line 1007). Order rules target the wrapper, not the
       inner elements, since flex order only applies to direct children. */
    @media (max-width: 767px) {
      #overview-container .overview-page-content {
        display: flex;
        flex-direction: column;
      }
      #overview-ai-status-area              { order: 1; }
      #overview-onboarding-area             { order: 2; }
      #overview-priority-area               { order: 3; }
      #overview-hotlead-banner              { order: 4; }
      #overview-pending-area                { order: 5; }
      #overview-container .overview-grid    { order: 6; }
      #overview-stats-area                  { order: 7; }
      #overview-value-area                  { order: 8; }
      #overview-chart-area                  { order: 9; }
      /* AI status banner gets a tighter top edge against the sticky sub-header */
      #overview-ai-status-area:not(:empty) { margin-top: 12px; }
    }

    /* Conversations FAB removed 2026-05-10 — destination had no working
       create-booking flow. See docs/superpowers/plans/2026-05-10-dashboard-mobile-phase2.md */

    /* Step-done indicator inside the Setup drawer/sheet — replaces action
       buttons when the step is already complete. Keeps visual rhythm with
       the .btn but signals "no action needed" instead of looking clickable. */
    .step-done-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      background: var(--brand-subtle);
      color: var(--brand);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.01em;
    }

    /* ──────────────────────────────────────────────────────────────────────
       BOOKINGS — Week View (v2)
       All selectors are prefixed `bk-` or `bookings-` to avoid collisions
       with the dashboard's pre-existing `.block` (booking card on grid) and
       similar utility names. Tokens reused from the dashboard palette.
       ────────────────────────────────────────────────────────────────────── */
    :root {
      --bk-time-gutter: 64px;
      --bk-row-h: 60px;
      --bk-day-start: 7;
      --bk-day-end: 19;
      --bk-yellow: #D4A44C;
      --bk-yellow-dim: rgba(212,164,76,0.12);
      --bk-yellow-faint: rgba(212,164,76,0.04);
      --bk-denied: #595959;
      --bk-denied-dim: rgba(89,89,89,0.08);
      --bk-blocked: #9C9C95;
      --bk-blocked-dim: rgba(156,156,149,0.16);
      --bk-now: #DC2626;
    }

    /* ── Topbar "+ New" split button (Bookings-only) ────────── */
    .bk-new-split { position: relative; display: inline-flex; }
    .bk-new-split-inner { display: inline-flex; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,22,18,0.04); }
    .bk-new-btn-primary, .bk-new-btn-caret {
      border: 0; background: var(--brand); color: #fff;
      font-family: var(--font); font-weight: 600; font-size: 13px;
      cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
      transition: background 0.12s ease;
    }
    .bk-new-btn-primary { padding: 8px 14px; }
    .bk-new-btn-caret { padding: 8px 10px; border-left: 1px solid rgba(255,255,255,0.18); }
    .bk-new-btn-primary:hover, .bk-new-btn-caret:hover { background: var(--brand-light); }
    .bk-new-btn-caret.active { background: var(--brand-light); }

    .bk-new-menu {
      position: absolute; top: calc(100% + 6px); right: 0;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px -8px rgba(15,22,18,0.18), 0 4px 8px rgba(15,22,18,0.06);
      padding: 4px; min-width: 240px; z-index: 50;
      display: none;
    }
    .bk-new-menu.open { display: block; }
    .bk-new-menu button {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; width: 100%; background: transparent; border: 0;
      color: var(--text); font-family: var(--font); font-size: 13px;
      font-weight: 500; border-radius: 6px; text-align: left; cursor: pointer;
    }
    .bk-new-menu button:hover { background: var(--surface-2); }
    .bk-new-menu-icon {
      width: 26px; height: 26px; border-radius: 6px;
      background: var(--brand-dim); color: var(--brand);
      display: grid; place-items: center; flex-shrink: 0;
    }
    .bk-new-menu-icon.is-block { background: var(--bk-blocked-dim); color: var(--text-dim); }
    .bk-new-menu-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
    .bk-new-menu-label { font-weight: 600; font-size: 13px; }
    .bk-new-menu-desc { font-size: 11px; color: var(--text-dim); }

    /* ── Page-level container ──────────────────────────────── */
    #view-bookings { display: none; }
    #view-bookings.active { display: block; }
    #bookings-container { padding: 0; }

    /* Toolbar row (prev/today/next, week label, filter chips, search, date jump) */
    .bookings-toolbar-row {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 14px 32px; background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    .bookings-nav-cluster {
      display: flex; align-items: center; gap: 4px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 2px;
    }
    .bookings-nav-btn {
      border: 0; background: transparent;
      padding: 6px 10px; font-size: 13px; font-weight: 500; color: var(--text);
      border-radius: 6px;
      display: inline-flex; align-items: center; gap: 4px;
      font-family: var(--font); cursor: pointer;
      transition: background 0.12s ease;
    }
    .bookings-nav-btn:hover { background: var(--surface-2); }
    .bookings-nav-btn.today { color: var(--brand); font-weight: 600; }
    .bookings-nav-btn svg { color: var(--text-dim); }

    .bookings-week-label {
      font-family: var(--heading); font-weight: 600; font-size: 16px;
      letter-spacing: -0.01em; color: var(--text); padding: 0 8px;
    }
    .bookings-week-label .range {
      color: var(--text-dim); font-weight: 500; margin-left: 8px; font-size: 14px;
    }

    .bookings-filter-chips { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
    .bk-chip {
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text); padding: 5px 11px; font-size: 12px; font-weight: 500;
      border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font); cursor: pointer;
      transition: all 0.12s ease;
    }
    .bk-chip:hover { border-color: var(--border-strong, var(--border)); }
    .bk-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
    .bk-chip-count { color: var(--text-faint, var(--text-dim)); font-family: var(--mono); font-size: 11px; }
    .bk-chip.active .bk-chip-count { color: rgba(255,255,255,0.6); }
    .bk-chip-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
    .bk-chip-swatch.pending   { background: var(--hot, #D97706); }
    .bk-chip-swatch.shared    {
      background: repeating-linear-gradient(135deg, var(--bk-yellow) 0, var(--bk-yellow) 2px, transparent 2px, transparent 4px);
      background-color: var(--bk-yellow);
    }
    .bk-chip-swatch.confirmed { background: var(--brand); }
    .bk-chip-swatch.denied    { background: var(--bk-denied); }

    .bookings-search-wrap { position: relative; min-width: 200px; }
    .bookings-search-wrap input {
      width: 100%; padding: 7px 12px 7px 34px;
      border: 1px solid var(--border); background: var(--surface);
      border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--text); outline: 0;
      transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }
    .bookings-search-wrap input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
    .bookings-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); }

    .bookings-date-jump {
      padding: 7px 12px; border: 1px solid var(--border); background: var(--surface);
      border-radius: 8px; font-family: var(--mono); font-size: 13px; color: var(--text); font-weight: 500;
      outline: 0;
    }
    .bookings-date-jump:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

    /* ── Needs-scheduling tray ─────────────────────────────── */
    .bookings-tray { padding: 14px 32px 0; display: flex; flex-direction: column; gap: 8px; }
    .bookings-tray:empty { display: none; }
    .bk-tray-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--text); }
    .bk-tray-head h2 {
      font-family: var(--heading); font-weight: 600; font-size: 14px;
      margin: 0; letter-spacing: -0.005em;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .bk-tray-count { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
    .bk-tray-collapse {
      border: 0; background: transparent; padding: 4px 8px; border-radius: 6px;
      font-size: 12px; color: var(--text-dim); font-weight: 500; cursor: pointer;
      font-family: var(--font);
      display: inline-flex; align-items: center; gap: 4px;
      transition: background 0.12s ease, color 0.12s ease;
    }
    .bk-tray-collapse:hover { background: var(--surface-2); color: var(--text); }
    .bk-tray-track {
      display: flex; gap: 10px; overflow-x: auto;
      padding: 6px 0 14px; margin-bottom: -6px;
      scrollbar-width: thin;
    }
    .bk-tray-track::-webkit-scrollbar { height: 6px; }
    .bk-tray-track::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 3px; }
    .bk-tray-card {
      flex: 0 0 264px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--bk-yellow);
      border-radius: var(--radius, 10px);
      padding: 12px 14px;
      display: flex; flex-direction: column; gap: 6px;
      cursor: pointer; position: relative;
      transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    }
    .bk-tray-card[data-status="pending"] { border-left-color: var(--hot, #D97706); }
    .bk-tray-card[data-status="shared"] {
      background:
        repeating-linear-gradient(135deg, var(--bk-yellow-faint) 0, var(--bk-yellow-faint) 8px, transparent 8px, transparent 16px),
        var(--surface);
    }
    .bk-tray-card:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(15,22,18,0.04); }
    .bk-tray-card.stale::after {
      content: ''; position: absolute; top: 12px; right: 12px;
      width: 8px; height: 8px; border-radius: 50%; background: var(--hot, #D97706);
      box-shadow: 0 0 0 0 rgba(217,119,6,0.55);
      animation: bk-stale-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes bk-stale-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.55); }
      50%      { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
    }
    .bk-tray-card-row { display: flex; align-items: center; gap: 10px; }
    .bk-tray-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-light); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
    .bk-tray-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bk-tray-service { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bk-tray-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-faint, var(--text-dim)); }
    .bk-tray-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint, var(--text-dim)); }
    .bk-tray-meta .stale-tag { color: var(--hot, #D97706); font-weight: 600; }
    .bk-tray-cta {
      margin-top: 2px; align-self: flex-start;
      font-size: 11px; font-weight: 600; color: var(--brand);
      background: transparent; border: 0; padding: 0;
      font-family: var(--font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 3px;
    }
    .bk-tray-cta:hover { text-decoration: underline; }
    .bookings-tray.collapsed .bk-tray-head, .bookings-tray.collapsed .bk-tray-track { display: none; }
    .bk-tray-chip {
      display: none; align-self: flex-start;
      background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--hot, #D97706);
      border-radius: 999px; padding: 5px 12px 5px 10px;
      font-size: 12px; font-weight: 600; color: var(--text);
      cursor: pointer; font-family: var(--font);
      align-items: center; gap: 8px;
      transition: border-color 0.12s ease;
      margin-bottom: 8px;
    }
    .bk-tray-chip:hover { border-color: var(--border-strong, var(--border)); }
    .bk-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hot, #D97706); animation: bk-stale-pulse 2s infinite; }
    .bookings-tray.collapsed .bk-tray-chip { display: inline-flex; }

    /* ── Week grid ─────────────────────────────────────────── */
    .bookings-grid-wrap { padding: 16px 32px 32px; display: flex; flex-direction: column; }
    .bookings-week-grid {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(15,22,18,0.04);
      max-height: calc(100vh - 320px);
      display: flex; flex-direction: column;
    }
    .bk-day-head-row {
      display: grid;
      grid-template-columns: var(--bk-time-gutter) repeat(7, 1fr);
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
      flex-shrink: 0;
    }
    .bk-day-head-cell {
      padding: 12px 14px;
      border-left: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 2px;
    }
    .bk-day-head-cell:first-child { border-left: 0; }
    .bk-dh-dow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
    .bk-dh-date {
      font-family: var(--heading); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
      color: var(--text);
    }
    .bk-day-head-cell.today .bk-dh-dow, .bk-day-head-cell.today .bk-dh-date { color: var(--brand); }
    .bk-day-head-cell.today { background: linear-gradient(180deg, rgba(45,90,61,0.06), rgba(45,90,61,0.02)); }

    .bk-grid-body {
      flex: 1; overflow-y: auto; position: relative;
      display: grid;
      grid-template-columns: var(--bk-time-gutter) repeat(7, 1fr);
      background:
        repeating-linear-gradient(to bottom,
          var(--surface) 0,
          var(--surface) calc(var(--bk-row-h) - 1px),
          var(--border) calc(var(--bk-row-h) - 1px),
          var(--border) var(--bk-row-h));
    }
    .bk-grid-body::-webkit-scrollbar { width: 8px; }
    .bk-grid-body::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 4px; }
    .bk-time-col { border-right: 1px solid var(--border); background: var(--surface); position: relative; }
    .bk-time-row {
      height: var(--bk-row-h); padding: 6px 10px 0;
      text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 500;
      color: var(--text-faint, var(--text-dim)); letter-spacing: 0.02em;
    }
    .bk-day-col { position: relative; border-right: 1px solid var(--border); cursor: crosshair; }
    .bk-day-col:last-child { border-right: 0; }
    .bk-day-col.today { background: rgba(45,90,61,0.025); }
    .bk-out-of-hours {
      position: absolute; left: 0; right: 0;
      background: repeating-linear-gradient(135deg, rgba(156,156,149,0.04) 0, rgba(156,156,149,0.04) 6px, transparent 6px, transparent 12px);
      pointer-events: none; z-index: 0;
    }

    /* Now line */
    .bk-now-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--bk-now); z-index: 6; pointer-events: none; }
    .bk-now-line::before {
      content: ''; position: absolute; left: -5px; top: -4px;
      width: 9px; height: 9px; border-radius: 50%; background: var(--bk-now);
      box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
    }
    .bk-now-label {
      position: absolute; left: 8px; top: -8px;
      font-family: var(--mono); font-size: 10px; font-weight: 600;
      color: var(--bk-now); background: var(--surface); padding: 0 4px; letter-spacing: 0.02em;
    }

    /* Blocks on the grid */
    .bk-block {
      position: absolute; left: 4px; right: 4px;
      border-radius: 6px; padding: 6px 8px 7px;
      cursor: pointer; overflow: hidden;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      z-index: 2;
      display: flex; flex-direction: column; gap: 2px;
      border-left: 3px solid;
      text-align: left; background: var(--surface);
      font-family: var(--font);
      border-top: 0; border-right: 0; border-bottom: 0;
    }
    .bk-block:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(15,22,18,0.18), 0 4px 8px rgba(15,22,18,0.06); z-index: 5; }
    .bk-block:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .bk-block-time {
      font-family: var(--mono); font-size: 10.5px; font-weight: 500;
      color: var(--text-dim); letter-spacing: 0.01em;
    }
    .bk-block-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bk-block-service { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bk-block.pending   { background: rgba(217,119,6,0.10); border-color: var(--hot, #D97706); }
    .bk-block.shared    {
      background: repeating-linear-gradient(135deg, var(--bk-yellow-dim) 0, var(--bk-yellow-dim) 7px, var(--bk-yellow-faint) 7px, var(--bk-yellow-faint) 14px);
      border-color: var(--bk-yellow);
    }
    .bk-block.confirmed { background: var(--brand-dim); border-color: var(--brand); }
    .bk-block.denied    { background: var(--bk-denied-dim); border-color: var(--bk-denied); opacity: 0.72; }
    .bk-block.denied .bk-block-name { text-decoration: line-through; text-decoration-color: var(--text-faint, var(--text-dim)); }
    .bk-block.blocked {
      background: repeating-linear-gradient(135deg, var(--bk-blocked-dim) 0, var(--bk-blocked-dim) 6px, transparent 6px, transparent 12px);
      border-color: var(--bk-blocked);
      z-index: 1;   /* Sits behind bookings — blocks are background context */
    }
    .bk-block.blocked .bk-block-name { color: var(--text-dim); font-weight: 600; font-size: 12px; }
    .bk-block.blocked .bk-block-service { display: none; }
    .bk-block.blocked .bk-block-time { color: var(--text-faint, var(--text-dim)); }
    .bk-block-status-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.7; }

    /* Laned bookings: when 2+ bookings overlap, each takes a fraction of the
       column. Tighten inner padding so the truncated card still reads. */
    .bk-block.bk-block-laned { padding: 5px 6px 6px; }
    .bk-block.bk-block-laned .bk-block-service { font-size: 11px; }
    .bk-block.bk-block-laned .bk-block-time { font-size: 10px; }

    @keyframes bk-save-flash {
      0% { box-shadow: 0 0 0 0 var(--brand); }
      60% { box-shadow: 0 0 0 4px rgba(45,90,61,0.55); }
      100% { box-shadow: 0 1px 2px rgba(15,22,18,0.04); }
    }
    .bk-block.saved-flash { animation: bk-save-flash 0.7s ease-out; }

    /* ── Quick-add popover ─────────────────────────────────── */
    .bk-quick-add {
      position: fixed;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px -8px rgba(15,22,18,0.18), 0 4px 8px rgba(15,22,18,0.06);
      padding: 6px; min-width: 230px;
      z-index: 70;
      display: none;
    }
    .bk-quick-add.open { display: block; animation: bk-pop-in 0.12s ease-out; }
    @keyframes bk-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .bk-quick-add-title { font-family: var(--mono); font-size: 11px; color: var(--text-dim); padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
    .bk-quick-add button {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 10px; border: 0; background: transparent; border-radius: 6px;
      text-align: left; color: var(--text); font-family: var(--font); font-size: 13px; cursor: pointer;
    }
    .bk-quick-add button:hover { background: var(--surface-2); }
    .bk-quick-add-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--brand-dim); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
    .bk-quick-add-icon.is-block { background: var(--bk-blocked-dim); color: var(--text-dim); }

    /* ── Drawer ────────────────────────────────────────────── */
    .bk-drawer-scrim {
      position: fixed; inset: 0;
      background: rgba(15,22,18,0.32); backdrop-filter: blur(2px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 80;
    }
    .bk-drawer-scrim.open { opacity: 1; pointer-events: auto; }
    .bk-drawer {
      position: fixed; right: 0; top: 0; bottom: 0;
      width: 440px; max-width: 92vw;
      background: var(--surface); border-left: 1px solid var(--border);
      box-shadow: -16px 0 48px -16px rgba(15,22,18,0.18);
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      z-index: 90;
      display: flex; flex-direction: column;
    }
    .bk-drawer.open { transform: translateX(0); }
    .bk-drawer-head {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .bk-drawer-customer { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
    .bk-drawer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; display: grid; place-items: center; flex-shrink: 0; }
    .bk-drawer-block-icon {
      width: 40px; height: 40px; border-radius: 8px;
      background: repeating-linear-gradient(135deg, var(--bk-blocked-dim) 0, var(--bk-blocked-dim) 4px, transparent 4px, transparent 8px);
      border: 1px solid var(--border); color: var(--text-dim);
      display: grid; place-items: center; flex-shrink: 0;
    }
    .bk-drawer-name-line { display: flex; flex-direction: column; min-width: 0; }
    .bk-drawer-name { font-family: var(--heading); font-weight: 600; font-size: 17px; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bk-drawer-phone { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 2px; }
    .bk-drawer-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .bk-drawer-edit-btn {
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
      padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
      font-family: var(--font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 5px;
      transition: border-color 0.12s ease, background 0.12s ease;
    }
    .bk-drawer-edit-btn:hover { border-color: var(--text-dim); background: var(--surface-2); }
    .bk-drawer-close {
      border: 0; background: var(--surface-2);
      width: 32px; height: 32px; border-radius: 8px;
      color: var(--text-dim);
      display: grid; place-items: center; cursor: pointer;
      transition: background 0.12s ease;
    }
    .bk-drawer-close:hover { background: var(--border); color: var(--text); }

    .bk-drawer-status {
      margin: 12px 20px 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 999px;
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
      align-self: flex-start; background: rgba(217,119,6,0.10); color: var(--hot, #D97706);
      width: fit-content;
    }
    .bk-drawer-status.confirmed { background: var(--brand-dim); color: var(--brand); }
    .bk-drawer-status.shared    { background: var(--bk-yellow-dim); color: #8a6d2a; }
    .bk-drawer-status.denied    { background: var(--bk-denied-dim); color: var(--bk-denied); }
    .bk-drawer.block-mode .bk-drawer-status { display: none; }

    .bk-drawer-body { padding: 18px 20px 24px; overflow-y: auto; flex: 1; }
    .bk-drawer-section { margin-bottom: 20px; }
    .bk-drawer-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
    .bk-field-grid { display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; font-size: 13px; margin: 0; }
    .bk-field-grid dt { color: var(--text-dim); font-weight: 500; }
    .bk-field-grid dd { margin: 0; color: var(--text); font-weight: 500; }
    .bk-field-grid dd.mono { font-family: var(--mono); }

    .bk-conv-thread { display: flex; flex-direction: column; gap: 8px; }
    .bk-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
    .bk-msg.in  { background: var(--surface-sunken, var(--surface-2)); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
    .bk-msg.out { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
    .bk-msg-meta { font-size: 10.5px; color: var(--text-faint, var(--text-dim)); margin-top: 4px; font-family: var(--mono); }
    .bk-msg.out .bk-msg-meta { color: rgba(255,255,255,0.7); }

    .bk-form-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
    .bk-form-row > label { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
    .bk-input, .bk-select, .bk-textarea {
      width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
      background: var(--surface); font-family: var(--font); font-size: 13px; color: var(--text); outline: 0;
      transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }
    .bk-textarea { min-height: 60px; resize: vertical; }
    .bk-input:focus, .bk-select:focus, .bk-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
    .bk-input.mono { font-family: var(--mono); }
    .bk-form-row .time-pair { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }

    .bk-drawer-actions {
      border-top: 1px solid var(--border); padding: 14px 20px;
      display: flex; gap: 8px; background: var(--surface-2);
      align-items: center;
    }
    .bk-drawer-actions .bk-btn {
      flex: 1 1 0; min-width: 0; padding: 9px 12px; border-radius: 8px;
      font-size: 13px; font-weight: 600; border: 1px solid transparent;
      font-family: var(--font); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      white-space: nowrap;
      transition: all 0.12s ease;
    }
    .bk-btn-primary { background: var(--brand); color: #fff; }
    .bk-btn-primary:hover { background: var(--brand-light); }
    .bk-btn-ghost { background: var(--surface); border-color: var(--border) !important; color: var(--text); }
    .bk-btn-ghost:hover { border-color: var(--text-dim) !important; }
    .bk-btn-danger-ghost { background: var(--surface); border-color: var(--border) !important; color: var(--text-dim); }
    .bk-btn-danger-ghost:hover { border-color: #c0392b !important; color: #c0392b; }
    .bk-btn-delete-left {
      flex: 0 0 auto; padding: 8px 10px; border-radius: 8px;
      background: transparent; border: 1px solid var(--border); color: var(--text-dim);
      font-size: 12px; font-weight: 500; font-family: var(--font); cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      transition: border-color 0.12s ease, color 0.12s ease;
    }
    .bk-btn-delete-left:hover { border-color: #c0392b; color: #c0392b; }
    .bk-drawer-actions .spacer { flex: 1 1 auto; min-width: 0; }

    /* ── Day-list fallback (mobile + Day toggle) ───────────── */
    .bookings-day-list { display: none; padding: 16px 32px 32px; }
    .bk-mdl-item {
      background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid var(--hot, #D97706);
      border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
      display: flex; gap: 12px; align-items: center; cursor: pointer;
      transition: border-color 0.12s ease, transform 0.12s ease;
    }
    .bk-mdl-item:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-1px); }
    .bk-mdl-item[data-status="confirmed"] { border-left-color: var(--brand); }
    .bk-mdl-item[data-status="shared"]    { border-left-color: var(--bk-yellow); }
    .bk-mdl-item[data-status="denied"]    { border-left-color: var(--bk-denied); opacity: 0.7; }
    .bk-mdl-item[data-type="blocked"]     { border-left-color: var(--bk-blocked); }
    .bk-mdl-time { font-family: var(--mono); font-size: 12px; color: var(--text-dim); min-width: 60px; }
    .bk-mdl-name { font-size: 13px; font-weight: 600; }
    .bk-mdl-svc  { font-size: 12px; color: var(--text-dim); }

    /* ── Mobile (<767px) — hide grid, show day list ────────── */
    @media (max-width: 767px) {
      .bookings-toolbar-row { padding: 12px 16px; gap: 8px; }
      .bookings-search-wrap { min-width: 100%; order: 99; }
      .bookings-filter-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
      .bookings-week-grid { display: none; }
      .bookings-day-list { display: block; padding: 12px 16px 80px; }
      .bookings-grid-wrap { padding: 12px 16px 28px; }
      .bookings-tray { padding: 12px 16px 0; }
      .bk-tray-card { flex-basis: 220px; }
      .bk-new-btn-primary { padding: 8px 10px; font-size: 12px; }
      .bk-drawer { width: 100vw; }
    }

/* ── Mobile redirect banner (Task 8.1) ─────────────────────────── */
/* Shown only on mobile viewports — points users to /m PWA shell.
   Hidden above 768px via media query so desktop is unaffected.      */
.mobile-redirect-banner {
  display: none; /* JS shows it on mobile only */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--brand, #2D5A3D);
  color: var(--off-white, #F0EDE8);
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
@media (max-width: 767px) {
  .mobile-redirect-banner.mrb-visible {
    display: flex;
  }
}
.mobile-redirect-banner .mrb-text {
  flex: 1;
  font-size: 13px;
}
.mobile-redirect-banner .mrb-open {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--off-white, #F0EDE8);
  color: var(--brand, #2D5A3D);
  border: none;
  border-radius: 6px;
  font-family: var(--font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-redirect-banner .mrb-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--off-white, #F0EDE8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.75;
  -webkit-tap-highlight-color: transparent;
}
.mobile-redirect-banner .mrb-dismiss:hover { opacity: 1; }