/* TabTrips WhatsApp Inbox — premium design tokens */

:root,
[data-theme="atelier"] {
  color-scheme: light;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Code", "SF Mono", ui-monospace, monospace;

  /* Default: warm ivory / deep teal / soft sage */
  --bg: #f7f5f0;
  --bg-elevated: #ffffff;
  --sidebar: #fbfaf7;
  --list-bg: #ffffff;
  --chat-bg: #efeae2;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(24, 59, 58, 0.05) 1px, transparent 0);
  --surface: #ffffff;
  --surface-2: #f3f1eb;
  --surface-3: #dceae4;

  --text: #183b3a;
  --text-secondary: #3f5d5b;
  --muted: #5f7875;
  --faint: #8aa09c;

  --line: #ddd6c8;
  --line-strong: #c9c0b0;

  --brand: #183b3a;
  --accent: #1f6f6a;
  --accent-hover: #185853;
  --accent-soft: #dceae4;
  --accent-ink: #ffffff;
  --accent-mint: #c5ddd5;
  --muted-green: #5b8e85;

  --in: #ffffff;
  --in-border: #ddd6c8;
  /* Chat bubbles keep familiar WhatsApp-like greens inside the thread only */
  --out: #dcf8c6;
  --out-border: #c5ebad;

  --ok: #2f7d5b;
  --ok-soft: #e8f5ef;
  --warn: #b45309;
  --warn-soft: #fff7ed;
  --danger: #b42318;
  --danger-soft: #fef3f2;

  --shadow-xs: 0 1px 2px rgba(24, 59, 58, 0.04);
  --shadow-sm: 0 1px 2px rgba(24, 59, 58, 0.05), 0 1px 3px rgba(24, 59, 58, 0.04);
  --shadow-md: 0 8px 24px rgba(24, 59, 58, 0.08);
  --shadow-lg: 0 16px 40px rgba(24, 59, 58, 0.11);

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --control-h: 34px;

  --sidebar-w: 220px;
  --sidebar-collapsed-w: 72px;
  --list-w: 328px;
  --context-w: 288px;
  --topbar-h: 52px;
  --shell-bp-tablet: 1024px;
  --shell-bp-mobile: 860px;

  --focus: 0 0 0 3px rgba(31, 111, 106, 0.28);
  --ease: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-theme: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --backdrop-scrim: rgba(24, 59, 58, 0.42);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --z-dropdown: 20;
  --z-drawer: 30;
  --z-toast: 40;
  --z-scrim: 25;
  --z-nav: 35;
}

/* Preserved navy / blue palette for users who already chose Light */
[data-theme="light"],
[data-theme="navy"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-elevated: #ffffff;
  --sidebar: #ffffff;
  --list-bg: #ffffff;
  --chat-bg: #e8eef8;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(16, 24, 39, 0.045) 1px, transparent 0);
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e8eef6;
  --text: #111827;
  --text-secondary: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #d8dee9;
  --line-strong: #c5cddc;
  --brand: #101827;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #dbeafe;
  --accent-ink: #ffffff;
  --accent-mint: #bfdbfe;
  --in: #ffffff;
  --in-border: #d8dee9;
  --out: #dcf8c6;
  --out-border: #c5ebad;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --shadow-xs: 0 1px 2px rgba(16, 24, 39, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 39, 0.05), 0 1px 3px rgba(16, 24, 39, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 39, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 39, 0.12);
  --focus: 0 0 0 3px rgba(37, 99, 235, 0.28);
  --backdrop-scrim: rgba(16, 24, 39, 0.42);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1413;
  --bg-elevated: #15201e;
  --sidebar: #101a18;
  --list-bg: #121c1a;
  --chat-bg: #0a1211;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(197, 221, 213, 0.07) 1px, transparent 0);
  --surface: #15201e;
  --surface-2: #1b2926;
  --surface-3: #243632;

  --text: #eef5f2;
  --text-secondary: #b7c9c4;
  --muted: #8aa39d;
  --faint: #6b837e;

  --line: #2a3c38;
  --line-strong: #3a524c;

  --brand: #dceae4;
  --accent: #5b8e85;
  --accent-hover: #7aa99f;
  --accent-soft: #1e3531;
  --accent-ink: #0c1413;
  --accent-mint: #2f5a52;

  --in: #1a2825;
  --in-border: #314540;
  --out: #134e4a;
  --out-border: #1f6f68;

  --ok: #34d399;
  --ok-soft: #0f3d2e;
  --warn: #fbbf24;
  --warn-soft: #422006;
  --danger: #f87171;
  --danger-soft: #450a0a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.52);

  --focus: 0 0 0 3px rgba(91, 142, 133, 0.35);
  --backdrop-scrim: rgba(4, 10, 9, 0.58);
}

[data-theme="ocean"] {
  color-scheme: light;
  --bg: #f0f7fb;
  --bg-elevated: #ffffff;
  --sidebar: #f7fbfe;
  --list-bg: #ffffff;
  --chat-bg: #e7f1f7;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(12, 74, 110, 0.05) 1px, transparent 0);
  --surface: #ffffff;
  --surface-2: #f1f7fb;
  --surface-3: #e4eef5;
  --text: #0c2a3d;
  --text-secondary: #3d5d73;
  --muted: #5f7f94;
  --faint: #8aa3b5;
  --line: #d7e5ef;
  --line-strong: #bcd2e1;
  --brand: #0e7490;
  --accent: #0e7490;
  --accent-hover: #0a5f75;
  --accent-soft: #e0f5fa;
  --accent-ink: #ffffff;
  --accent-mint: #cffafe;
  --in: #ffffff;
  --in-border: #d7e5ef;
  --out: #d9f3f8;
  --out-border: #b6e4ed;
  --ok: #0f766e;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --focus: 0 0 0 3px rgba(14, 116, 144, 0.28);
  --backdrop-scrim: rgba(12, 42, 61, 0.42);
}

[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #070b14;
  --bg-elevated: #0f1624;
  --sidebar: #0a1020;
  --list-bg: #0d1422;
  --chat-bg: #080d18;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.07) 1px, transparent 0);
  --surface: #121a2b;
  --surface-2: #172236;
  --surface-3: #1e2b43;
  --text: #e8eef8;
  --text-secondary: #a8b6cd;
  --muted: #8494ad;
  --faint: #64748b;
  --line: #243148;
  --line-strong: #334860;
  --brand: #38bdf8;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-soft: #12324a;
  --accent-ink: #082f49;
  --accent-mint: #0c4a6e;
  --in: #152033;
  --in-border: #273549;
  --out: #0f3a4d;
  --out-border: #155e75;
  --ok: #34d399;
  --ok-soft: #064e3b;
  --warn: #fbbf24;
  --warn-soft: #422006;
  --danger: #f87171;
  --danger-soft: #450a0a;
  --focus: 0 0 0 3px rgba(56, 189, 248, 0.32);
  --backdrop-scrim: rgba(2, 6, 18, 0.62);
}

[data-theme="sand"] {
  color-scheme: light;
  --bg: #f3f1ec;
  --bg-elevated: #fffcf7;
  --sidebar: #f8f5ef;
  --list-bg: #fffcf7;
  --chat-bg: #ebe6dc;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(68, 64, 60, 0.05) 1px, transparent 0);
  --surface: #fffcf7;
  --surface-2: #f4efe6;
  --surface-3: #ebe4d8;
  --text: #1c1917;
  --text-secondary: #57534e;
  --muted: #78716c;
  --faint: #a8a29e;
  --line: #e7e0d4;
  --line-strong: #d6cec0;
  --brand: #3f6212;
  --accent: #4d7c0f;
  --accent-hover: #3f6212;
  --accent-soft: #ecfccb;
  --accent-ink: #ffffff;
  --accent-mint: #d9f99d;
  --in: #fffcf7;
  --in-border: #e7e0d4;
  --out: #e8f5c8;
  --out-border: #d4e8a4;
  --ok: #15803d;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --focus: 0 0 0 3px rgba(77, 124, 15, 0.28);
  --backdrop-scrim: rgba(28, 25, 23, 0.42);
}

[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --sidebar: #050505;
  --list-bg: #0a0a0a;
  --chat-bg: #000000;
  --chat-pattern: none;
  --surface: #111111;
  --surface-2: #1a1a1a;
  --surface-3: #262626;
  --text: #ffffff;
  --text-secondary: #e5e5e5;
  --muted: #d4d4d4;
  --faint: #a3a3a3;
  --line: #404040;
  --line-strong: #737373;
  --brand: #22c55e;
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --accent-soft: #14532d;
  --accent-ink: #052e16;
  --accent-mint: #166534;
  --in: #171717;
  --in-border: #525252;
  --out: #14532d;
  --out-border: #22c55e;
  --ok: #4ade80;
  --ok-soft: #14532d;
  --warn: #facc15;
  --warn-soft: #422006;
  --danger: #f87171;
  --danger-soft: #7f1d1d;
  --focus: 0 0 0 3px rgba(74, 222, 128, 0.45);
  --backdrop-scrim: rgba(0, 0, 0, 0.72);
}

[data-theme="forest"] {
  color-scheme: dark;
  --bg: #0a120e;
  --bg-elevated: #101a14;
  --sidebar: #0c1510;
  --list-bg: #0e1712;
  --chat-bg: #09110d;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(134, 239, 172, 0.07) 1px, transparent 0);
  --surface: #142019;
  --surface-2: #1a2920;
  --surface-3: #223529;
  --text: #e8f5ec;
  --text-secondary: #a7c4b2;
  --muted: #7f9e8c;
  --faint: #5f7a6b;
  --line: #274033;
  --line-strong: #365644;
  --brand: #34d399;
  --accent: #34d399;
  --accent-hover: #6ee7b7;
  --accent-soft: #123528;
  --accent-ink: #052e1c;
  --accent-mint: #14532d;
  --in: #17261d;
  --in-border: #2a4033;
  --out: #14532d;
  --out-border: #166534;
  --ok: #4ade80;
  --ok-soft: #14532d;
  --warn: #fbbf24;
  --warn-soft: #422006;
  --danger: #f87171;
  --danger-soft: #450a0a;
  --focus: 0 0 0 3px rgba(52, 211, 153, 0.32);
  --backdrop-scrim: rgba(2, 10, 6, 0.62);
}

[data-theme="ember"] {
  color-scheme: light;
  --bg: #faf6f3;
  --bg-elevated: #fffaf7;
  --sidebar: #fcf8f5;
  --list-bg: #fffaf7;
  --chat-bg: #f3ebe5;
  --chat-pattern: radial-gradient(circle at 1px 1px, rgba(124, 45, 18, 0.05) 1px, transparent 0);
  --surface: #fffaf7;
  --surface-2: #f7efe9;
  --surface-3: #efe4db;
  --text: #1c1410;
  --text-secondary: #6b4f42;
  --muted: #8a6d5f;
  --faint: #b29586;
  --line: #eadfd6;
  --line-strong: #d8c6b8;
  --brand: #c2410c;
  --accent: #ea580c;
  --accent-hover: #c2410c;
  --accent-soft: #ffedd5;
  --accent-ink: #ffffff;
  --accent-mint: #fed7aa;
  --in: #fffaf7;
  --in-border: #eadfd6;
  --out: #ffedd5;
  --out-border: #fdba74;
  --ok: #15803d;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --focus: 0 0 0 3px rgba(234, 88, 12, 0.28);
  --backdrop-scrim: rgba(28, 20, 16, 0.42);
}

html[data-density="compact"] {
  --control-h: 30px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --list-w: 300px;
  --context-w: 268px;
}
html[data-density="compact"] .conversation-item { padding: 8px 10px; }
html[data-density="compact"] .bubble { padding: 7px 10px; }
html[data-ui-scale="small"] body { font-size: 13px; }
html[data-ui-scale="small"] { --control-h: 30px; }
html[data-ui-scale="large"] body { font-size: 15.5px; }
html[data-ui-scale="large"] { --control-h: 38px; }
html[data-chat-pattern="off"] { --chat-pattern: none; }
html[data-reduce-motion="on"] .theme-animating,
html[data-reduce-motion="on"] .theme-animating body,
html[data-reduce-motion="on"] .theme-animating .app {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html.theme-animating,
  html.theme-animating body,
  html.theme-animating .app {
    transition: none !important;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html.theme-animating,
html.theme-animating body,
html.theme-animating .app {
  transition:
    background-color var(--ease-theme),
    color var(--ease-theme),
    border-color var(--ease-theme);
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.error { color: var(--danger); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.mobile-only { display: none !important; }

button, input, textarea, select {
  font: inherit;
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 9px 12px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--accent);
}
button {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
button.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}
button.secondary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: var(--shadow-xs);
}
.btn-send svg { margin: 0; }
.icon-ghost, .composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  border: none;
}
.icon-ghost:hover:not(:disabled),
.composer-tool:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.composer-template-btn {
  width: auto;
  min-width: var(--control-h);
  height: 36px;
  gap: 6px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.composer-template-btn svg { flex: 0 0 auto; }
.composer-tool-label {
  line-height: 1;
  white-space: nowrap;
}
.composer-template-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent-mint));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.composer-template-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.composer-template-btn.is-needed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-sm);
  animation: template-need-pulse 1.8s ease-in-out 2;
}
.composer-template-btn.is-needed:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}
.composer-template-btn.is-needed .composer-tool-label::after {
  content: none;
}
@keyframes template-need-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-sm); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-sm); }
}
.btn-send-template {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-send-template.is-needed {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}
.composer.is-template-only .btn-send {
  opacity: 0.45;
}
.composer.is-template-only textarea {
  border-style: dashed;
}

/* ===== Shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns var(--ease);
}
.app.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr);
}
.app.sidebar-collapsed .brand-text,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .account-meta,
.app.sidebar-collapsed .env-pill,
.app.sidebar-collapsed .conn-status,
.app.sidebar-collapsed .account-email,
.app.sidebar-collapsed .account-name {
  display: none !important;
}
.app.sidebar-collapsed .brand {
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.app.sidebar-collapsed .sidebar-top {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
}
.app.sidebar-collapsed .sidebar-collapse {
  margin-left: 0;
  width: 28px;
  height: 28px;
}
.app.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
  width: 100%;
}
.app.sidebar-collapsed .nav-rail {
  padding: 4px 6px 10px;
}
.app.sidebar-collapsed .sidebar-footer {
  padding: 8px 6px 10px;
  gap: 6px;
}
.app.sidebar-collapsed .sidebar-footer-row {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.app.sidebar-collapsed .theme-toggle {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.app.sidebar-collapsed .account-profile-btn {
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 auto;
  overflow: visible;
}
.app.sidebar-collapsed .account-profile-btn .account-meta {
  display: none !important;
}
.app.sidebar-collapsed .brand-logo {
  width: 30px;
  height: 30px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  z-index: 4;
}
.sidebar-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 10px;
  min-width: 0;
}
.sidebar-collapse {
  width: 28px; height: 28px; padding: 0; margin-left: auto;
  background: transparent; color: var(--muted); border: none;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.sidebar-collapse:hover { color: var(--text); background: var(--surface-2); }
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.brand-logo,
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  object-fit: cover;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.brand-mark {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.04em;
  border-radius: 9px;
}
.brand-text { display: grid; min-width: 0; line-height: 1.15; }
.brand-text strong { font-size: 13.5px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; color: var(--muted); }
.env-pill {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line));
  flex: 0 0 auto;
}
.sidebar-top .env-pill { margin-left: 0; }

.nav-rail {
  display: grid;
  gap: 2px;
  padding: 4px 10px 10px;
  flex: 1 1 auto;
  overflow: auto;
  align-content: start;
}
.nav-group {
  display: grid;
  gap: 2px;
  margin: 0 0 6px;
}
.nav-group-label {
  margin: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.app.sidebar-collapsed .nav-group-label {
  display: none;
}
.nav-divider {
  height: 1px;
  margin: 8px 8px;
  background: var(--line);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: 9px;
  padding: 8px 10px;
  font-weight: 500;
  font-size: 13.5px;
  min-height: 38px;
  position: relative;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-item.active .nav-ico { color: var(--accent); }
.nav-item[hidden],
.nav-item.is-capability-hidden { display: none !important; }
.nav-ico { flex: 0 0 auto; opacity: 0.88; }
.nav-item .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sidebar-workspace {
  display: grid;
  gap: 4px;
  padding: 0 10px 10px;
  min-width: 0;
}
.sidebar-workspace-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 2px;
}
.sidebar-workspace select {
  width: 100%;
  min-height: var(--control-h);
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 550;
}
.app.sidebar-collapsed .sidebar-workspace { display: none; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop-scrim);
  z-index: calc(var(--z-nav) - 1);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.sidebar-backdrop:hover { background: var(--backdrop-scrim); }

.sidebar-footer {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  min-width: 0;
  overflow: visible;
}
.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.conn-status {
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}
.conn-status.warn { color: var(--warn); font-weight: 600; }

/* Compact elegant theme switcher — 34px icon button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
  box-shadow: none;
  font-weight: 500;
  transition: background var(--ease-theme), border-color var(--ease-theme), color var(--ease-theme);
}
.theme-toggle:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--accent);
}
/* Show the destination theme icon (moon → dark, sun → light) */
[data-theme="light"] .theme-sun,
[data-theme="ocean"] .theme-sun,
[data-theme="sand"] .theme-sun,
[data-theme="ember"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon,
[data-theme="midnight"] .theme-moon,
[data-theme="contrast"] .theme-moon,
[data-theme="forest"] .theme-moon { display: none; }

.account-profile-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-h);
  height: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-weight: 500;
  box-shadow: none;
  overflow: visible;
  transition: background var(--ease-theme), border-color var(--ease-theme), color var(--ease-theme);
}
.account-profile-btn:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: inherit;
}
.account-profile-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--accent);
}
.account-profile-btn .avatar {
  margin: 0;
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  pointer-events: none;
}
.account-meta,
.account-profile-btn .account-email {
  /* Name/email live in the hover card so the footer never overflows. */
  display: none !important;
}
.account-name {
  font-size: 12px;
  font-weight: 600;
}
.account-hover-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 168px;
  max-width: min(260px, 70vw);
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md, 0 10px 28px rgba(15, 23, 42, 0.16));
  display: grid;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 60;
  text-align: left;
}
.account-hover-card strong {
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-hover-card span {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-profile-btn:hover .account-hover-card,
.account-profile-btn:focus-visible .account-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.app.sidebar-collapsed .account-profile-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.app.sidebar-collapsed .account-profile-btn .avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.app.sidebar-collapsed .account-hover-card {
  left: calc(100% + 10px);
  right: auto;
  bottom: 50%;
  transform: translateY(50%) translateX(-4px);
}
.app.sidebar-collapsed .account-profile-btn:hover .account-hover-card,
.app.sidebar-collapsed .account-profile-btn:focus-visible .account-hover-card {
  transform: translateY(50%) translateX(0);
}

.profile-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}
.profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}
.profile-page-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-info-dl {
  margin: 0;
  display: grid;
  gap: 8px;
}
.profile-info-dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.profile-info-dl dt { margin: 0; }
.profile-info-dl dd { margin: 0; font-weight: 600; color: var(--text); text-align: right; }
.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.profile-card-head h2 { margin: 0; }
.profile-edit-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.profile-account-actions {
  display: grid;
  gap: 8px;
}
.profile-logout-form { margin: 4px 0 0; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 700; font-size: 13px;
  flex: 0 0 auto;
  letter-spacing: -0.02em;
}
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }

.main-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  flex: 0 0 auto;
  min-height: var(--topbar-h);
}
.topbar.topbar-compact {
  /* Inbox has its own panes — keep a slim utility strip only */
  min-height: 40px;
  padding: 6px 14px;
}
.topbar.topbar-compact .topbar-copy { display: none; }
.topbar-leading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.topbar-nav-toggle:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.topbar-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-crumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.topbar-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.topbar-sub { line-height: 1.3; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}
.topbar-wallet {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topbar .theme-toggle { flex: 0 0 auto; }

/* Shared shell primitives (UI-1) */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tt-badge.tone-ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.tt-badge.tone-warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); }
.tt-badge.tone-danger { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.tt-badge.tone-accent { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.tt-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.tt-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.view {
  padding: 20px 22px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  flex: 1;
}
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
}
.page-header h1 { margin: 0 0 4px; font-size: 1.25rem; letter-spacing: -0.03em; font-weight: 700; }
.page-header .muted { margin: 0; max-width: 52ch; }
.page-header h2,
.module-panel h2,
.analytics-panel h2,
.analytics-notes-card h2,
.analytics-section-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.module-subhead {
  margin: 18px 0 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.main-stage.stage-inbox { background: var(--list-bg); }

/* Metrics / Analytics / Dashboard shared */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.analytics-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--line-strong);
}
.metric-card.tone-ok::before { background: var(--ok); }
.metric-card.tone-warn::before { background: var(--warn); }
.metric-card.tone-danger::before { background: var(--danger); }
.metric-card.tone-muted::before { background: var(--faint); }
.metric-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.metric-card-hero {
  min-height: 112px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) 0%, var(--surface) 58%);
  padding: 16px;
}
.metric-card-hero .metric-value {
  font-size: 1.65rem;
  letter-spacing: -0.04em;
}
.metric-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric-value {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.metric-card.is-unavailable .metric-value {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--faint);
  letter-spacing: -0.01em;
}
.metric-note {
  margin-top: auto;
  line-height: 1.35;
}

.module-split,
.analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 14px;
  margin: 0 0 18px;
  align-items: stretch;
}
.module-panel,
.analytics-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
.business-profile-panel {
  grid-column: 1 / -1;
  gap: 0;
}
.business-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.business-profile-head h2 { margin: 0 0 4px; }
.business-profile-head .muted { margin: 0; }
.business-profile-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.business-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.biz-section-label {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.biz-section-label:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.biz-field {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.biz-field-full { grid-column: 1 / -1; }
.biz-field-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
}
.biz-field input,
.biz-field select,
.biz-field textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.biz-field input,
.biz-field select { height: 36px; }
.biz-field textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.4;
}
.biz-field input:focus,
.biz-field select:focus,
.biz-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--focus);
  background: var(--surface);
}
.business-setup-card {
  grid-column: 1 / -1;
  box-shadow: var(--shadow-sm);
}
.business-setup-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
}
.business-setup-status-row p { margin: 0; }
.business-setup-progress {
  margin: 0 0 12px;
}
.business-setup-progress-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.business-setup-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width var(--ease);
}
.business-setup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.biz-step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.biz-step-tab .biz-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 700;
}
.biz-step-tab.is-active,
.business-setup-steps [aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  font-weight: 650;
}
.biz-step-tab.is-done .biz-step-num {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
}
.business-setup-pane .campaign-step-intro { margin-bottom: 12px; }
.business-setup-pane .module-subhead { margin: 0 0 4px; }
.business-setup-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.business-setup-foot-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}
#business-setup-badge.is-confirmed {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
}
.biz-review-item.is-missing {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 22%, var(--line));
}
.biz-field-label abbr {
  text-decoration: none;
  color: var(--danger);
  font-weight: 700;
}
@media (max-width: 720px) {
  .business-setup-steps { grid-template-columns: 1fr 1fr; }
  .biz-step-label { font-size: 0.8rem; }
}
.setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}
.setup-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
}
.setup-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
}
.setup-check {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.setup-check h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.setup-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 800px) {
  .setup-layout { grid-template-columns: 1fr; }
}
.setup-assist-panel {
  margin-top: 18px;
}
.setup-assist-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.setup-assist-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}
.setup-assist-item {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.biz-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
}
.biz-check input {
  margin-top: 3px;
}
.business-setup-review {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  margin-top: 8px;
}
.business-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.business-profile-foot .btn-sm {
  min-height: 34px;
  padding: 0 14px;
}
@media (max-width: 720px) {
  .business-profile-form { grid-template-columns: 1fr; }
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.settings-card-head h2 { margin: 0 0 4px; }
.settings-card-head .muted { margin: 0; }
.settings-card-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.settings-card-badge.tone-ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok-soft) 80%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
}
.settings-card-badge.tone-warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn-soft) 80%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
}
.settings-card-badge.tone-fail {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 80%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}
.settings-card-tip {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.settings-label-chips {
  min-height: 36px;
  align-content: flex-start;
}
.settings-qr-list {
  display: grid;
  gap: 8px;
}
.qr-settings-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.qr-settings-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.qr-shortcut-pill {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent-hover);
}
.settings-billing-panel {
  grid-column: 1 / -1;
}
.wallet-stage { display: grid; gap: 14px; }
.wallet-stage-head { align-items: flex-start; }
.wallet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface));
  overflow: hidden;
  position: relative;
}
.wallet-hero.is-loading { opacity: 0.7; }
.wallet-hero.wallet-hero-flash {
  animation: wallet-hero-flash 0.85s ease;
}
@keyframes wallet-hero-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wallet-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.wallet-coin-stack {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}
.wallet-coin {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6d365, #d4a017 55%, #b8860b);
  border: 2px solid color-mix(in srgb, #fff 35%, #d4a017);
  box-shadow: 0 6px 14px rgba(180, 120, 20, 0.28);
}
.wallet-coin-a { left: 4px; top: 18px; z-index: 1; }
.wallet-coin-b { left: 18px; top: 6px; z-index: 2; animation: wallet-coin-float 2.8s ease-in-out infinite; }
.wallet-coin-c { left: 30px; top: 22px; z-index: 3; animation: wallet-coin-float 2.8s ease-in-out 0.4s infinite; }
@keyframes wallet-coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.wallet-hero-copy { min-width: 0; display: grid; gap: 2px; }
.wallet-hero-balance {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
}
.wallet-hero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: center;
}
.wallet-metric {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  min-width: 0;
}
.wallet-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.wallet-metric strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
  word-break: break-word;
}
.wallet-topup-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
}
.wallet-topup-copy strong { display: block; margin-bottom: 2px; }
.wallet-topup-copy p { margin: 0; }
.wallet-topup-cta.is-busy { opacity: 0.75; }
.settings-topup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.settings-topup-row .biz-field {
  flex: 1 1 140px;
  max-width: 180px;
}
.settings-topup-row .btn-sm {
  height: 36px;
  padding: 0 14px;
}
.wallet-pending:empty { display: none; }
.wallet-pending {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--surface);
}
.wallet-section { display: grid; gap: 8px; }
.wallet-section .module-subhead { margin: 0; }
.wallet-section-hint { margin: 0; }
@media (max-width: 720px) {
  .wallet-hero { grid-template-columns: 1fr; }
  .wallet-hero-side { grid-template-columns: 1fr 1fr; }
}
.settings-plans-list {
  display: grid;
  gap: 8px;
}
.plan-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.plan-card-row.is-current {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.wallet-ledger {
  max-height: 240px;
  overflow: auto;
}
.settings-channel-copy { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}
.settings-toggle-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.settings-toggle-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.settings-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-help-ids { display: grid; gap: 8px; }
.settings-id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
}
.settings-id-grid > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.settings-id-grid dt {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-id-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  word-break: break-word;
}
.settings-help-raw {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 0 10px;
}
.settings-help-raw summary {
  cursor: pointer;
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
}
.settings-help-raw[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.settings-help-raw .report-pre {
  margin: 0 0 10px;
  max-height: 180px;
  overflow: auto;
  font-size: 11px;
}
@media (max-width: 720px) {
  .wallet-metrics { grid-template-columns: 1fr; }
  .settings-topup-row .biz-field { max-width: none; }
}
.appearance-panel {
  grid-column: 1 / -1;
  gap: 4px;
}
.appearance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.appearance-head h2 { margin: 0 0 4px; }
.appearance-head .muted { margin: 0; }
.appearance-hint { margin: 0 0 10px; }
.appearance-preview {
  margin: 10px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.appearance-preview-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.appearance-preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.appearance-preview-dot:nth-child(1) { background: #f87171; }
.appearance-preview-dot:nth-child(2) { background: #fbbf24; }
.appearance-preview-dot:nth-child(3) { background: #34d399; }
.appearance-preview-title {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.appearance-preview-chat {
  display: grid;
  gap: 8px;
  padding: 14px 12px;
  background-color: var(--chat-bg);
  background-image: var(--chat-pattern);
  background-size: 14px 14px;
}
.appearance-preview-bubble {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.35;
  border: 1px solid transparent;
}
.appearance-preview-bubble.in {
  justify-self: start;
  background: var(--in);
  color: var(--text);
  border-color: var(--in-border);
  border-bottom-left-radius: 4px;
}
.appearance-preview-bubble.out {
  justify-self: end;
  background: var(--out);
  color: var(--text);
  border-color: var(--out-border);
  border-bottom-right-radius: 4px;
}
.appearance-block { margin-top: 14px; }
.appearance-block .module-subhead { margin: 0 0 8px; }
.appearance-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.appearance-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.theme-swatch {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  padding: 8px;
  margin: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease), transform var(--ease);
}
.theme-swatch:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.theme-swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), var(--focus);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: var(--text);
}
.theme-swatch-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.theme-swatch-preview > i {
  display: block;
  height: 100%;
  background: var(--swatch-a, #fff);
}
.theme-swatch-preview > i:nth-child(2) { background: var(--swatch-b, #eee); }
.theme-swatch-preview > i:nth-child(3) { background: var(--swatch-c, #ddd); }
.theme-swatch-preview > i:nth-child(4) { background: var(--swatch-d, #ccc); }
.theme-preview-atelier { --swatch-a: #f7f5f0; --swatch-b: #ffffff; --swatch-c: #dceae4; --swatch-d: #1f6f6a; }
.theme-preview-light { --swatch-a: #f3f6fb; --swatch-b: #ffffff; --swatch-c: #dbeafe; --swatch-d: #2563eb; }
.theme-preview-navy { --swatch-a: #f3f6fb; --swatch-b: #ffffff; --swatch-c: #dbeafe; --swatch-d: #101827; }
.theme-preview-dark { --swatch-a: #0c1413; --swatch-b: #15201e; --swatch-c: #1e3531; --swatch-d: #5b8e85; }
.theme-preview-ocean { --swatch-a: #f0f7fb; --swatch-b: #ffffff; --swatch-c: #e0f5fa; --swatch-d: #d9f3f8; }
.theme-preview-midnight { --swatch-a: #070b14; --swatch-b: #121a2b; --swatch-c: #12324a; --swatch-d: #0f3a4d; }
.theme-preview-sand { --swatch-a: #f3f1ec; --swatch-b: #fffcf7; --swatch-c: #ecfccb; --swatch-d: #e8f5c8; }
.theme-preview-forest { --swatch-a: #0a120e; --swatch-b: #142019; --swatch-c: #123528; --swatch-d: #14532d; }
.theme-preview-ember { --swatch-a: #faf6f3; --swatch-b: #fffaf7; --swatch-c: #ffedd5; --swatch-d: #fdba74; }
.theme-preview-contrast { --swatch-a: #000; --swatch-b: #111; --swatch-c: #14532d; --swatch-d: #22c55e; }
.theme-swatch-label { font-size: 12px; line-height: 1.2; color: var(--text-secondary); }
.theme-swatch[aria-pressed="true"] .theme-swatch-label { color: var(--text); }
.appearance-seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-2);
  padding: 3px;
}
.appearance-seg-btn {
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 650;
  font-size: 12.5px;
  padding: 7px 10px;
  min-height: calc(var(--control-h) - 2px);
}
.appearance-seg-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
}
.appearance-seg-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-xs);
}
#appearance-status { margin: 14px 0 0; }
@media (max-width: 900px) {
  .appearance-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appearance-controls { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .appearance-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appearance-head { flex-direction: column; }
}
.analytics-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}
.analytics-panel-head .muted { margin: 0; }
.analytics-section { margin: 0 0 18px; }
.analytics-section-title { margin-bottom: 10px; color: var(--text-secondary); }
.analytics-notes-card { margin-bottom: 8px; }
.analytics-notes-card p { margin: 6px 0 0; line-height: 1.5; }
.analytics-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.analytics-insights {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
  line-height: 1.45;
}
.analytics-insights.hidden { display: none; }
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  gap: 2px;
}
.segmented-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.segmented-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.analytics-inbox-grid {
  margin-bottom: 4px;
}
.analytics-secondary {
  margin-top: 0;
}
.analytics-mix {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.analytics-mix-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.analytics-mix-bar .mix-template {
  background: color-mix(in srgb, var(--accent) 78%, #1d4ed8);
}
.analytics-mix-bar .mix-text {
  background: color-mix(in srgb, var(--ok) 70%, #0f766e);
}
.analytics-mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.swatch-template {
  background: color-mix(in srgb, var(--accent) 78%, #1d4ed8);
}
.swatch-text {
  background: color-mix(in srgb, var(--ok) 70%, #0f766e);
}
.analytics-list { min-height: 48px; }
.analytics-list-empty { margin: 0; }
.analytics-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.analytics-rank li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.analytics-rank-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--text);
}
.analytics-rank-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.analytics-spend {
  display: grid;
  gap: 4px;
}
.analytics-spend strong {
  font-size: 0.85rem;
}
.analytics-spend p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.92;
}
.analytics-header #analytics-updated {
  white-space: nowrap;
}
.chart-bars-compact .chart-values { display: none; }
.chart-bars-compact .chart-label {
  font-size: 9px;
  transform: rotate(-55deg);
  transform-origin: top left;
  width: 42px;
  margin-top: 10px;
  white-space: nowrap;
}
.chart-bars-compact {
  min-height: 220px;
  padding-bottom: 28px;
  gap: 3px;
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 200px;
  padding: 8px 4px 0;
  flex: 1;
}
.chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
}
.chart-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 10px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;
}
.chart-stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: 100%;
  flex: 1;
  min-height: 120px;
  padding: 0 2px;
  border-radius: 8px 8px 0 0;
  background:
    repeating-linear-gradient(
      to top,
      transparent 0,
      transparent calc(25% - 1px),
      color-mix(in srgb, var(--line) 80%, transparent) calc(25% - 1px),
      color-mix(in srgb, var(--line) 80%, transparent) 25%
    );
}
.chart-stack .bar {
  display: block;
  width: 42%;
  max-width: 18px;
  min-width: 8px;
  border-radius: 6px 6px 2px 2px;
  transition: height 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar-in {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
}
.bar-out {
  background: linear-gradient(180deg, #86efac, var(--ok));
}
[data-theme="dark"] .bar-out {
  background: linear-gradient(180deg, #34d399, #059669);
}
.chart-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.chart-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.swatch-in { background: var(--accent); }
.swatch-out { background: var(--ok); }
.chart-summary { margin: 12px 0 0; }

.status-stack {
  display: grid;
  gap: 8px;
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid transparent;
  font-size: 13px;
}
.status-row strong {
  font-variant-numeric: tabular-nums;
}

.delivery-funnel {
  display: grid;
  gap: 12px;
}
.funnel-row {
  display: grid;
  gap: 5px;
}
.funnel-meta {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
}
.funnel-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.funnel-count {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.funnel-pct { min-width: 2.5rem; text-align: right; }
.funnel-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.funnel-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.funnel-row.tone-ok .funnel-fill { background: var(--ok); }
.funnel-row.tone-danger .funnel-fill { background: var(--danger); }
.funnel-row.tone-warn .funnel-fill { background: var(--warn); }
.funnel-row.tone-muted .funnel-fill { background: var(--faint); }
.funnel-note { margin: 0; }
.delivery-empty {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.shortcut-list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.btn-block { width: 100%; justify-content: center; }

@media (max-width: 1100px) {
  .analytics-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .module-split,
  .analytics-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .analytics-hero {
    grid-template-columns: 1fr;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chart-bars {
    gap: 4px;
    min-height: 170px;
  }
  .chart-values { display: none; }
  .funnel-meta {
    grid-template-columns: 1fr auto;
  }
  .funnel-pct { display: none; }
}

/* Shared panels */
.callout, .warn-callout, .panel, .stack .item, .card, .status-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-xs);
}
.warn-callout {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  color: var(--warn);
}
.cards, .status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.card strong { display: block; font-size: 22px; margin-top: 6px; }
.overview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
}
.overview-checked { margin: 0; white-space: nowrap; }
.overview-distinctions .distinctions-title {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.distinctions-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.card-kicker { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.card-summary { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--text); }
.card-checked, .card-note { margin: 0 0 6px; }
.card-state { font-size: 1.05rem; font-weight: 700; margin: 8px 0; }
.status-card.state-ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.status-card.state-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.status-card.state-fail { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.status-card.state-unknown,
.status-card.state-neutral { border-color: var(--line); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}
.status-badge.state-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); }
.status-badge.state-ok .status-dot { background: var(--ok); }
.status-badge.state-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); }
.status-badge.state-warn .status-dot { background: var(--warn); }
.status-badge.state-fail { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); }
.status-badge.state-fail .status-dot { background: var(--danger); }
.status-badge.state-unknown .status-dot,
.status-badge.state-neutral .status-dot { background: var(--faint); }
.card-evidence {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.card-evidence summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.card-evidence summary::-webkit-details-marker { display: none; }
.card-evidence summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--ease);
}
.card-evidence[open] summary::before { transform: rotate(90deg); }
.evidence-pre {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow: auto;
  color: var(--text-secondary);
}
.pill, .status-pill, .count-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 650;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.pill.state-ok, .status-pill.approved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.pill.state-warn, .status-pill.pending { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.pill.state-unknown { color: var(--muted); }
.status-pill.rejected { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.login-brand { padding: 0; margin-bottom: 4px; }
.login-title { margin: 8px 0 0; font-size: 1.2rem; letter-spacing: -0.02em; }
.filters, .test-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.filters label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.stack { display: grid; gap: 10px; margin-top: 12px; }
.panel label { display: grid; gap: 6px; margin-bottom: 10px; }
.table-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.data-table th { color: var(--muted); background: var(--surface-2); position: sticky; top: 0; }
.code-block {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; overflow: auto; white-space: pre-wrap; font-size: 12px; font-family: var(--mono);
}
.test-summary { padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; border: 1px solid var(--line); }
.test-summary.state-ok { background: var(--ok-soft); }
.test-summary.state-warn { background: var(--warn-soft); }
.tpl-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.health-actions { padding: 0 0 12px; }
.confirm-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.confirm-row input { width: auto; margin-top: 2px; }

/* ===== Inbox layout ===== */
.view.inbox-layout {
  display: grid;
  grid-template-columns: var(--list-w) minmax(0, 1fr) var(--context-w);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "alert alert alert"
    "list chat context";
  gap: 0;
  padding: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  flex: 1;
  background: var(--list-bg);
}
.view.inbox-layout.context-collapsed {
  grid-template-columns: var(--list-w) minmax(0, 1fr);
  grid-template-areas:
    "alert alert"
    "list chat";
}
.view.inbox-layout.context-collapsed .context-pane { display: none; }

#inbox-alert, .status-banner {
  grid-area: alert;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--warn-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
  color: var(--warn);
}
.status-banner.level-critical {
  background: var(--danger-soft);
  border-bottom-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  color: var(--danger);
}
.status-banner.level-info {
  background: var(--surface-2);
  border-bottom-color: var(--line);
  color: var(--text-secondary);
}
.status-banner .banner-action {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 10px;
}

.list-pane {
  grid-area: list;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--list-bg);
}
.chat-pane {
  grid-area: chat;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--chat-pattern), var(--chat-bg);
  background-size: 16px 16px, auto;
}
.context-pane {
  grid-area: context;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
  transition: transform var(--ease), opacity var(--ease);
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 4px;
  flex: 0 0 auto;
}
.list-heading { display: flex; align-items: baseline; gap: 8px; }
.list-heading h2 { margin: 0; font-size: 15px; letter-spacing: -0.02em; font-weight: 700; }
.btn-new {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px;
  padding: 0 11px; font-size: 12px; border-radius: var(--radius-pill);
}

.list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px 14px 4px;
  align-items: center;
}
.search-wrap {
  position: relative;
  min-width: 0;
}
.search-wrap .search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none;
}
.search-wrap input {
  width: 100%;
  height: var(--control-h);
  padding: 0 34px 0 34px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border-color: transparent;
}
.search-wrap input:focus {
  background: var(--surface);
  border-color: var(--accent);
}
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
}
.search-clear:hover { background: var(--surface-3); color: var(--text); }

.inbox-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 8px 12px;
  min-width: 0;
}
.chip-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chip-filters::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  height: 26px;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}
.chip:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.chip.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: transparent;
}
.inbox-filter-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.filter-tool-btn {
  height: 26px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.filter-tool-btn:hover { color: var(--text); background: var(--surface-2); }
.filter-tool-btn[aria-expanded="true"] {
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--accent-soft);
}
.filter-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.filter-badge.hidden { display: none; }
.filter-clear-btn { color: var(--text); }
.filter-clear-btn.hidden { display: none; }
.inbox-filters-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 10px;
}
.inbox-filters-panel.hidden { display: none; }
.inbox-filters-panel .filter-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
}
.inbox-filters-panel select {
  width: 100%;
  min-width: 0;
  height: 28px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .inbox-filters-panel { grid-template-columns: 1fr; }
}

.start-conv-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 0 14px 8px;
  align-items: center;
}
.start-conv-form input { width: 100%; min-width: 0; height: var(--control-h); }
.filter-row {
  display: flex; gap: 8px; align-items: center;
  padding: 0 14px 10px; margin: 0;
}
.filter-row input { width: auto; }
.filter-row-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
}
.filter-row-inline input { width: auto; margin: 0; accent-color: var(--accent); }

.conversation-list {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  border-top: 1px solid var(--line);
}
.conversation-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--ease);
}
.conversation-item:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.conversation-item.active {
  background: color-mix(in srgb, var(--accent-soft) 85%, var(--surface));
  color: var(--text);
}
.conversation-item .conv-main { min-width: 0; display: grid; gap: 2px; }
.conversation-item .conv-top {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.conversation-item .conv-name {
  font-weight: 650; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversation-item .conv-time {
  color: var(--faint); font-size: 11px; flex: 0 0 auto;
}
.conversation-item .conv-preview {
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.biz-line-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 1px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biz-line-chip.is-secondary {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
}
.composer-route {
  color: var(--text);
  font-weight: 650;
}
.conversation-item .conv-side {
  display: grid; justify-items: end; gap: 6px; padding-top: 2px;
}
.conversation-item .avatar { width: 40px; height: 40px; font-size: 13px; }
.badge {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); min-width: 18px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; text-align: center;
}
.dot-fail {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft);
}
.dot-hold {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent);
}
.synth-tag {
  font-size: 10px; font-weight: 650; color: var(--warn);
  letter-spacing: 0.02em;
}

/* Chat */
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  flex: 0 0 auto;
  position: relative;
  z-index: 8;
  overflow: visible;
}
.chat-identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.chat-id-text { min-width: 0; }
.chat-header h2 {
  margin: 0; font-size: 14.5px; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }

.care-window-banner {
  position: absolute;
  top: 58px;
  right: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(260px, calc(100% - 24px));
  pointer-events: none;
}
.care-window-banner.hidden { display: none; }
.care-window-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.care-window-chip:hover { filter: brightness(0.98); }
.care-window-chip[aria-expanded="true"] {
  box-shadow: var(--shadow-sm);
}
.care-window-label {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: none;
}
.care-window-countdown {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  line-height: 1;
}
.care-window-banner.window-closed .care-window-countdown,
.care-window-banner.is-collapsed.window-closed .care-window-countdown {
  display: none;
}
.care-window-banner.is-collapsed.window-open .care-window-label,
.care-window-banner.is-collapsed.window-expiring .care-window-label {
  display: none;
}
.care-window-panel {
  pointer-events: auto;
  width: min(240px, calc(100vw - 48px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  font-size: 11.5px;
}
.care-window-panel.hidden { display: none; }
.care-window-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 16%, var(--surface));
  overflow: hidden;
}
.care-window-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: currentColor;
  transition: width 900ms linear;
}
.care-window-meta {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}
.care-window-closes {
  opacity: 0.85;
  font-size: 11px;
}
.care-window-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.care-window-banner.window-closed .care-window-chip,
.care-window-banner.window-closed .care-window-panel {
  background: color-mix(in srgb, var(--warn-soft) 88%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  color: var(--warn);
}
.care-window-banner.window-open .care-window-chip,
.care-window-banner.window-open .care-window-panel {
  background: color-mix(in srgb, var(--ok-soft) 88%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
  color: var(--ok);
}
.care-window-banner.window-expiring .care-window-chip,
.care-window-banner.window-expiring .care-window-panel {
  background: color-mix(in srgb, var(--warn-soft) 88%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  color: var(--warn);
}
.care-details-btn {
  background: transparent; border: none; color: inherit;
  font-size: 11px; font-weight: 650; padding: 0 4px; text-decoration: underline;
}
.care-template-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.care-template-btn:hover {
  background: var(--accent-hover);
}

.messages {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-sep {
  align-self: center;
  margin: 10px 0;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.bubble {
  position: relative;
  max-width: min(68%, 520px);
  width: fit-content;
  padding: 8px 12px 6px;
  border-radius: 18px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bubble.in {
  align-self: flex-start;
  background: var(--in);
  border-color: var(--in-border);
  border-bottom-left-radius: 4px;
}
.bubble.out {
  align-self: flex-end;
  background: var(--out);
  border-color: var(--out-border);
  border-bottom-right-radius: 4px;
}
.bubble.grouped { margin-top: 2px; }
.bubble.grouped.in { border-top-left-radius: 10px; }
.bubble.grouped.out { border-top-right-radius: 10px; }
.bubble-body {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 14.5px;
}
.bubble-media {
  display: block;
  margin: 0 0 0.45rem;
  max-width: min(280px, 72vw);
}
.bubble-media-image {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--surface-2);
}
.bubble-media-image img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #0f141908;
}
/* Author display:block must not override the hidden attribute (broken Photo icon). */
.bubble-media-image img[hidden] {
  display: none !important;
}
.bubble-media-loading,
.bubble-media-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
}
.bubble-media-loading.hidden,
.bubble-media-error.hidden { display: none !important; }
.bubble-media-retry { margin: 0; }
.bubble-media-video video {
  display: block;
  width: 100%;
  max-height: 320px;
  border-radius: 10px;
  background: #0f1419;
}
.bubble-media-audio audio {
  width: min(260px, 70vw);
}
.bubble-media-file {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.bubble-media-file:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.bubble-media-badge {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
  color: var(--accent-hover);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.bubble-media-name {
  font-size: 0.86rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble-media-file .muted {
  grid-column: 2;
}
.meta {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 10.5px;
  color: var(--muted);
  min-height: 16px;
}
.bubble.in .meta { justify-content: flex-start; }
.bubble-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 600;
}
.bubble-status.is-failed { color: var(--danger); }
.bubble-status.is-read { color: var(--accent); }

/* TabTrips delivery ticks — WhatsApp-inspired, not a clone */
.msg-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  line-height: 0;
  flex: 0 0 auto;
}
.msg-tick-accepted,
.msg-tick-sent { color: var(--muted); }
.msg-tick-delivered { color: var(--text-secondary); }
.msg-tick-read {
  color: #53bdeb;
}
[data-theme="dark"] .msg-tick-read {
  color: #6ec9f0;
}
.msg-tick-pending,
.msg-tick-unknown { color: var(--faint); opacity: 0.95; }
.msg-tick-failed { color: var(--danger); }
.tick-svg { display: block; }

.dot-pending {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.bubble-actions {
  position: absolute;
  top: -10px;
  right: 6px;
  display: none;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 2px;
}
.bubble:hover .bubble-actions,
.bubble:focus-within .bubble-actions { display: flex; }
.bubble-actions button {
  width: 28px; height: 26px; padding: 0;
  background: transparent; color: var(--muted); border: none;
  border-radius: 6px; font-size: 11px; font-weight: 650;
}
.bubble-actions button:hover { background: var(--surface-2); color: var(--text); }

button.bubble-fail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  background: var(--danger-soft); color: var(--danger);
  font-size: 10px; font-weight: 800; cursor: help;
}
.bubble-fail-hint {
  margin-top: 4px; font-size: 11px; color: var(--danger); line-height: 1.3;
  cursor: pointer; list-style: none;
}
.bubble-fail-hint::-webkit-details-marker { display: none; }
.bubble-fail-details { margin-top: 4px; }
.bubble-fail-full {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble-fail-tooltip {
  position: fixed; z-index: 1000;
  padding: 10px 12px; border-radius: 8px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  color: var(--danger); font-size: 12px; line-height: 1.4;
  white-space: pre-wrap; max-width: min(420px, calc(100vw - 24px));
  box-shadow: var(--shadow-lg);
  /* Shared popover: ignore pointer so outside-click dismiss always works. */
  pointer-events: none;
}
.bubble-fail-tooltip[hidden] { display: none !important; }
.bubble.out.is-failed-msg {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--out-border));
}
.bubble.out.is-held-msg {
  /* Soft lock — do not look like a hard Failed error bubble. */
  border-color: var(--out-border);
}
.bubble-hold-details { margin-top: 2px; }
.bubble-hold-hint {
  display: inline-block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bubble-hold-hint:hover,
.bubble-hold-details[open] > .bubble-hold-hint {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bubble-hold-hint::-webkit-details-marker { display: none; }
.bubble-hold-full {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  align-items: end;
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  z-index: 2;
}
.composer-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding-bottom: 2px;
}
.composer-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-self: stretch;
}
.composer-input-wrap {
  position: relative;
  min-width: 0;
}
.composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  max-height: 200px;
  resize: none;
  overflow-y: auto;
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.45;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-sizing: border-box;
  field-sizing: content;
}
.composer textarea:focus {
  background: var(--bg-elevated);
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.composer-hint {
  padding-left: 4px;
  font-size: 11px;
  opacity: 0.85;
}
.composer.is-composer-blocked textarea,
.composer.is-composer-blocked .btn-send {
  opacity: 0.55;
  cursor: not-allowed;
}
.composer.is-composer-blocked .composer-hint .composer-route {
  color: var(--warn, #b45309);
  font-weight: 600;
}
.composer .btn-send {
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
}

.empty {
  padding: 32px 20px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}
.empty-illust {
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent);
}
.chat-empty-state { margin: auto; }

.toast {
  margin: 8px 14px 0; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, var(--line));
  color: var(--text);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
  animation: toast-in 180ms ease;
}
.toast.error {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  color: var(--danger);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Context / CRM panel */
.context-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--line); min-height: 50px;
}
.context-header h2 {
  margin: 0; font-size: 13px; font-weight: 650;
  letter-spacing: -0.01em; color: var(--text); text-transform: none;
}
.context-profile {
  padding: 20px 16px 16px;
  display: grid; justify-items: center; text-align: center; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.context-profile .profile-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.context-profile .profile-phone { color: var(--muted); font-size: 13px; }
.context-profile .profile-status {
  margin-top: 4px;
  font-size: 11px; font-weight: 650;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-secondary);
}
.ctx-section {
  border-bottom: 1px solid var(--line);
}
.ctx-section summary {
  cursor: pointer;
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}
.ctx-section summary::-webkit-details-marker { display: none; }
.ctx-section summary:hover { color: var(--text); background: var(--surface-2); }
.ctx-body { padding: 0 16px 14px; }
.ctx-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.ctx-row:last-child { border-bottom: none; }
.ctx-row dt { color: var(--muted); font-size: 12px; }
.ctx-row dd { margin: 0; word-break: break-word; color: var(--text); }
.context-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }

/* Dialogs / login */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  width: min(520px, 94vw);
  padding: 0;
  box-shadow: var(--shadow-lg);
}
.template-form { display: grid; gap: 12px; padding: 20px; }
.dialog-head h3 { margin: 0 0 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* In-app confirm — replaces browser window.confirm */
#app-confirm-dialog.app-confirm-dialog,
dialog.app-confirm-dialog {
  width: min(400px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(15, 23, 42, 0.18));
}
dialog.app-confirm-dialog::backdrop {
  background: color-mix(in srgb, #0b1220 48%, transparent);
  backdrop-filter: blur(2px);
}
.app-confirm-form {
  display: grid;
  gap: 14px;
  padding: 20px 20px 16px;
  justify-items: center;
  text-align: center;
}
.app-confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
}
.app-confirm-dialog.is-danger .app-confirm-icon {
  background: color-mix(in srgb, #fee2e2 80%, var(--surface));
  color: #b91c1c;
  border-color: color-mix(in srgb, #ef4444 30%, var(--line));
}
.app-confirm-dialog.is-neutral .app-confirm-icon {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.app-confirm-head {
  display: grid;
  gap: 6px;
  max-width: 34ch;
}
.app-confirm-head h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.app-confirm-head p {
  margin: 0;
  line-height: 1.45;
}
.app-confirm-actions {
  width: 100%;
  justify-content: stretch;
  gap: 8px;
}
.app-confirm-actions .secondary,
.app-confirm-actions .btn-primary,
.app-confirm-actions .app-confirm-ok {
  flex: 1 1 0;
  justify-content: center;
  min-height: 36px;
}
.app-confirm-ok.is-danger,
.app-confirm-dialog.is-danger .app-confirm-ok {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.app-confirm-ok.is-danger:hover,
.app-confirm-dialog.is-danger .app-confirm-ok:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Send-template dialog — clean two-column layout */
#template-dialog.tpl-send-dialog,
dialog.tpl-send-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: hidden;
}
.tpl-send-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  max-height: calc(100vh - 28px);
}
.tpl-send-layout .tpl-dialog-head {
  padding: 16px 18px 12px;
}
.tpl-send-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.tpl-send-main {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px 16px;
  overflow: auto;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.tpl-send-preview-pane {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px 16px;
  background: var(--surface-2);
  overflow: auto;
}
.tpl-send-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tpl-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tpl-search-row input[type="search"] {
  flex: 1;
  min-width: 0;
}
.tpl-template-list {
  display: grid;
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.tpl-template-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tpl-template-option:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent-soft, #dbeafe) 35%, var(--surface));
}
.tpl-template-option.is-selected {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft, #dbeafe) 55%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}
.tpl-opt-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tpl-opt-main strong {
  font-size: 13px;
  word-break: break-word;
}
.tpl-opt-meta,
.tpl-opt-snippet {
  font-size: 12px;
  color: var(--muted);
}
.tpl-opt-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-picker-empty { margin: 0; padding: 12px; }
.tpl-send-meta-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.tpl-send-meta-title {
  font-weight: 700;
  font-size: 14px;
  word-break: break-word;
}
.tpl-send-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.tpl-send-meta-flags { margin: 0; }
.tpl-send-hint { margin: -2px 0 0; }
.tpl-send-fields {
  display: grid;
  gap: 10px;
}
.tpl-send-fields-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tpl-send-field {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, var(--muted));
}
.tpl-send-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tpl-send-field input {
  width: 100%;
  font: inherit;
  font-weight: 500;
  color: var(--ink, var(--text));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 40px;
  box-sizing: border-box;
}
.tpl-send-field input:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: var(--focus, 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent));
}
.tpl-send-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tpl-send-context-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tpl-phone-frame {
  padding: 14px 12px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.tpl-phone-frame .tpl-phone-bubble.preview,
.tpl-phone-frame #template-preview {
  margin: 0;
  min-height: 96px;
}
.tpl-phone-frame .wa-preview-bubble {
  background: #dcf8c6;
  color: #0f172a;
  border-radius: 12px;
  padding: 10px 12px 8px;
  display: grid;
  gap: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.tpl-phone-frame .wa-preview-body {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13.5px;
}
.tpl-phone-frame .wa-preview-footer {
  font-size: 11.5px;
  color: #475569;
}
.tpl-phone-frame .wa-preview-time {
  justify-self: end;
  font-size: 10.5px;
  color: #64748b;
}
.danger-text { color: var(--danger) !important; }
.sr-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 820px) {
  .tpl-send-body {
    grid-template-columns: 1fr;
  }
  .tpl-send-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .tpl-template-list { max-height: 160px; }
}
.preview-label { margin-top: 2px; }
.preview {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-height: 48px;
  white-space: pre-wrap;
}
.login-body {
  display: grid;
  place-items: center;
  overflow: auto;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
    var(--bg);
}
.login-theme {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
}
.login-card {
  width: min(400px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-lg);
}
.login-card label,
.auth-panel label,
.auth-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.login-card input,
.auth-panel input:not(.auth-otp-digit) {
  background: var(--surface);
  border: 1px solid var(--line);
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.login-card input:focus,
.auth-panel input:not(.auth-otp-digit):focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.login-lead { margin: 0; font-size: 0.92rem; line-height: 1.5; max-width: 36ch; }
.login-submit { width: 100%; margin-top: 4px; min-height: 48px; }

/* Split auth shell — login / signup / reset */
.auth-shell {
  place-items: stretch;
  padding: 0;
  background: var(--bg);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  min-height: 100vh;
  width: 100%;
}
.auth-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
  padding: clamp(1.6rem, 4.2vw, 3rem);
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--brand) 88%, #0a1f1e) 0%,
      color-mix(in srgb, var(--brand) 72%, #144744) 48%,
      color-mix(in srgb, var(--accent) 55%, #0f2f2d) 100%);
  color: #f3faf8;
  border-right: 1px solid color-mix(in srgb, #fff 10%, transparent);
  min-width: 0;
}
.auth-promo-glow {
  position: absolute;
  inset: -20% auto auto -10%;
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #7dd3c7 35%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
  animation: auth-glow-drift 14s ease-in-out infinite alternate;
}
.auth-promo-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 18%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
  pointer-events: none;
}
.auth-promo > *:not(.auth-promo-glow):not(.auth-promo-grid) { position: relative; z-index: 1; }
.auth-promo-brand {
  text-decoration: none;
  color: inherit;
  width: fit-content;
}
.auth-promo-brand .brand-sub { color: color-mix(in srgb, #fff 70%, transparent); }
.auth-promo-brand .brand-logo {
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 25%, transparent);
}
.auth-mark {
  margin: 0 0 0.35rem;
  font-family: "Sora", var(--font);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.auth-promo-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fe0d6;
}
.auth-promo-title {
  margin: 0 0 0.65rem;
  font-family: "Sora", var(--font);
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #fff;
  max-width: 16ch;
  font-weight: 600;
}
.auth-promo-lead {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 78%, transparent);
  max-width: 34ch;
}
.auth-promo-list,
.auth-promo-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.auth-promo-list li,
.auth-promo-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.4;
  color: color-mix(in srgb, #fff 86%, transparent);
}
.auth-promo-list li::before,
.auth-promo-points li::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.12rem;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a2f2c' stroke-width='2.2'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E")
    center / 0.72rem no-repeat,
    #9fe0d6;
  flex: 0 0 auto;
}
.auth-promo-visual {
  margin-top: auto;
  max-width: 380px;
  transform: translateY(8px);
  opacity: 0;
  animation: auth-panel-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}
.auth-mini-chat {
  background: color-mix(in srgb, #061816 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  backdrop-filter: blur(10px);
  display: grid;
  gap: 0.55rem;
}
.auth-mini-head {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.auth-mini-head strong { display: block; font-size: 0.88rem; color: #fff; }
.auth-mini-head > div span { font-size: 0.72rem; color: color-mix(in srgb, #fff 62%, transparent); }
.auth-mini-av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: #9fe0d6;
  color: #0a2f2c;
}
.auth-mini-live {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 650;
  color: #9fe0d6;
}
.auth-mini-bubble {
  max-width: 92%;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  animation: auth-bubble-in 560ms ease forwards;
}
.auth-mini-bubble.in {
  justify-self: start;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  color: #f5fffc;
}
.auth-mini-bubble.out {
  justify-self: end;
  background: #1f6f6a;
  border: 1px solid color-mix(in srgb, #9fe0d6 30%, transparent);
  color: #fff;
  animation-delay: 0.45s;
}
.auth-mini-chip {
  justify-self: end;
  font-size: 0.7rem;
  font-weight: 650;
  color: #0a2f2c;
  background: #9fe0d6;
  border-radius: 8px;
  padding: 0.3rem 0.65rem;
  opacity: 0;
  animation: auth-bubble-in 560ms ease 0.9s forwards;
}
.auth-promo-foot {
  margin: 0;
  max-width: 38ch;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 68%, transparent);
}
.auth-promo-foot a {
  color: #9fe0d6;
  font-weight: 650;
  text-decoration: none;
}
.auth-promo-foot a:hover { text-decoration: underline; }

.auth-panel {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.6rem, 4.5vw, 3rem) clamp(1.35rem, 4vw, 2.75rem);
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  background:
    radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg-elevated);
}
.auth-panel-enter {
  opacity: 0;
  transform: translateY(14px);
  animation: auth-panel-in 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.auth-panel-brand {
  display: none;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  font-family: "Sora", var(--font);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  width: fit-content;
}
.auth-panel-head { display: grid; gap: 0.4rem; margin-bottom: 0.15rem; }
.auth-welcome {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.auth-panel .login-title {
  margin: 0;
  font-family: "Sora", var(--font);
  font-size: clamp(1.7rem, 2.4vw, 2.05rem);
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--text);
}
.auth-switch { margin: 0.15rem 0 0; }
.auth-switch a,
.auth-bottom-switch a,
.auth-switch-links a,
.auth-field-link {
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}
.auth-switch a:hover,
.auth-bottom-switch a:hover,
.auth-switch-links a:hover,
.auth-field-link:hover { text-decoration: underline; }
.auth-bottom-switch {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
}
.auth-form { display: grid; gap: 0.95rem; }
.auth-field-label { font-weight: 650; color: var(--text); font-size: 0.84rem; }
.auth-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.auth-field-link { font-size: 0.8rem; }
.auth-field-hint { margin: -2px 0 0; }
.auth-password-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}
.auth-password-wrap input { width: 100%; }
.auth-password-toggle {
  height: 48px;
  padding: 0 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.auth-password-toggle:hover { color: var(--text); background: var(--surface); }
.auth-password-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.auth-pw-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.auth-pw-meter span {
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 180ms ease;
}
.auth-pw-meter span.is-on { background: var(--accent); }
.auth-pw-meter span.is-on[data-level="1"] { background: #c2410c; }
.auth-pw-meter span.is-on[data-level="2"] { background: #b45309; }
.auth-pw-meter span.is-on[data-level="3"] { background: var(--accent); }
.auth-pw-meter span.is-on[data-level="4"] { background: var(--ok, #15803d); }
.auth-pw-label { margin: 0; min-height: 1.1em; }
.auth-actions { display: grid; gap: 0.6rem; margin-top: 0.2rem; }
.auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 12px;
  transition: transform 140ms ease, filter 140ms ease;
}
.auth-cta:hover:not(:disabled):not(.is-loading) { transform: translateY(-1px); }
.auth-cta:active:not(:disabled) { transform: translateY(0); }
.auth-footer-links { margin: 0.15rem 0 0; text-align: center; }
.auth-alert {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #b91c1c) 30%, var(--line));
  background: color-mix(in srgb, var(--danger, #b91c1c) 8%, var(--surface));
}
.auth-panel .callout {
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.auth-panel .callout p { margin: 0.35rem 0 0; }
.auth-signed-in {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
}
.auth-signed-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 750;
  background: var(--accent-soft);
  color: var(--accent);
}
.auth-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.auth-steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.auth-steps li.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft);
}
.auth-steps li.is-done {
  color: var(--ok, var(--accent));
  border-color: color-mix(in srgb, var(--ok, var(--accent)) 32%, var(--line));
}
.auth-step-num {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 750;
  background: color-mix(in srgb, currentColor 14%, transparent);
  flex: 0 0 auto;
}
.auth-step-label { line-height: 1.2; }
.auth-cta-row {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.35rem;
  width: 100%;
}
.auth-success-callout {
  border-color: color-mix(in srgb, var(--ok, var(--accent)) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--ok, var(--accent)) 8%, var(--surface-2)) !important;
}
.auth-exists-callout {
  border-color: color-mix(in srgb, var(--warn, #b45309) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--warn, #b45309) 8%, var(--surface-2)) !important;
}
.auth-verify-banner {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  margin-bottom: 0.35rem;
  animation: auth-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-verify-title {
  margin: 0;
  font-weight: 750;
  color: var(--text);
  font-size: 0.92rem;
}
.auth-text-btn {
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-code-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  min-height: 0 !important;
}
.auth-otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.15rem 0 0.25rem;
}
.auth-otp-digit {
  width: 100%;
  min-height: 54px !important;
  text-align: center;
  font-family: "Sora", var(--font);
  font-size: 1.3rem !important;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--text);
  caret-color: var(--accent);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}
.auth-otp-digit:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
}
.auth-otp-digit:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) !important;
}
.auth-otp-digit.has-value {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)) !important;
}
#signup-credentials.is-locked {
  opacity: 0.78;
  pointer-events: none;
}
#signup-credentials.is-locked .auth-password-toggle {
  pointer-events: none;
}
.auth-resend {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 650;
}
.auth-resend.is-waiting {
  opacity: 0.85;
  cursor: default;
}
.auth-panel .btn-primary.is-loading,
.auth-panel .secondary.is-loading,
.auth-panel .btn-google.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

@keyframes auth-bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-panel-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8%, 10%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mini-bubble,
  .auth-mini-chip,
  .auth-panel-enter,
  .auth-promo-visual,
  .auth-promo-glow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-promo {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
    padding-bottom: 1.35rem;
    min-height: auto;
  }
  .auth-mark { font-size: 1.65rem; }
  .auth-promo-title { max-width: none; font-size: 1.35rem; }
  .auth-promo-lead { max-width: none; }
  .auth-promo-visual { display: none; }
  .auth-promo-list { display: none; }
  .auth-panel-brand { display: inline-flex; }
  .auth-panel {
    max-width: 520px;
    padding-top: 1.5rem;
    padding-bottom: 2.25rem;
  }
  .auth-otp { gap: 0.35rem; }
  .auth-otp-digit { min-height: 48px !important; font-size: 1.1rem !important; }
}
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.btn-google:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}
.btn-google:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-google.is-loading,
.btn-google[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
  cursor: progress;
}
.btn-google-icon { flex-shrink: 0; }
.google-hint { margin: 0; line-height: 1.4; }
.google-unavailable { margin-bottom: 4px; }
.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.login-divider span { padding: 0 2px; }
.env-badge, .env-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--line);
}
.env-badge.staging, .env-chip.staging {
  background: var(--ok-soft); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
}

/* Contact drawer scrim — never styled as an accent button */
.context-backdrop,
button.context-backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--backdrop-scrim);
  color: transparent;
  cursor: pointer;
  box-shadow: none;
  font-weight: 400;
  opacity: 1;
}
.context-backdrop:hover,
button.context-backdrop:hover,
.context-backdrop:focus-visible,
button.context-backdrop:hover:not(:disabled) {
  background: var(--backdrop-scrim);
  filter: none;
  box-shadow: none;
}
.context-backdrop[hidden] {
  display: none !important;
}

.context-profile .profile-skeleton {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-4) var(--space-3);
}
.skeleton-line,
.skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 45%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.skeleton-line {
  height: 12px;
  width: 70%;
}
.skeleton-line.short { width: 42%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-avatar { animation: none; }
}

.ctx-state {
  padding: var(--space-3);
  color: var(--muted);
  font-size: 13px;
}
.ctx-state.error { color: var(--danger); }

/* Responsive — keep CSS drawer BP aligned with JS CONTEXT_DRAWER_BP (1280) */
@media (max-width: 1280px) {
  .view.inbox-layout {
    grid-template-columns: var(--list-w) minmax(0, 1fr);
    grid-template-areas:
      "alert alert"
      "list chat";
  }
  .context-pane {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 92vw);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
  }
  .view.inbox-layout.context-drawer-open .context-pane {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .view.inbox-layout.context-drawer-open .context-backdrop {
    display: block;
  }
}

@media (max-width: 860px) {
  body { overflow: auto; }
  .mobile-only { display: inline-flex !important; }
  .app {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  .app.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 88vw);
    max-width: 100%;
    z-index: var(--z-nav);
    border-right: 1px solid var(--line);
    border-bottom: none;
    transform: translateX(-105%);
    transition: transform var(--ease);
    box-shadow: var(--shadow-lg);
    background: var(--sidebar);
  }
  .app.nav-open .sidebar {
    transform: none;
  }
  .app.nav-open .sidebar-backdrop {
    display: block;
  }
  .sidebar-top {
    flex: 0 0 auto;
  }
  .sidebar-collapse { display: none; }
  .app.sidebar-collapsed .sidebar-workspace { display: grid; }
  .nav-rail {
    display: grid;
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px 10px 10px;
    gap: 2px;
  }
  .nav-group-label { display: block !important; }
  .nav-item {
    white-space: nowrap;
    justify-content: flex-start;
    width: 100%;
  }
  .nav-label,
  .brand-text,
  .account-meta,
  .env-pill,
  .conn-status {
    display: initial !important;
  }
  .sidebar-footer {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    margin-top: auto;
  }
  .sidebar-footer-row {
    flex-direction: row;
    justify-content: flex-start;
    min-width: 0;
  }
  .topbar-nav-toggle { display: inline-flex; }
  .topbar .theme-toggle { display: none; }
  .topbar.topbar-compact .topbar-copy { display: grid; }
  .topbar.topbar-compact .topbar-sub,
  .topbar.topbar-compact .topbar-crumb { display: none; }
  .view.inbox-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "alert"
      "list";
    height: calc(100vh - 140px);
    min-height: 480px;
  }
  .view.inbox-layout.mobile-chat {
    grid-template-areas:
      "alert"
      "chat";
  }
  .view.inbox-layout.mobile-chat .list-pane { display: none; }
  .view.inbox-layout:not(.mobile-chat) .chat-pane { display: none; }
  .list-pane { border-right: none; }
  .bubble { max-width: min(88%, 520px); }
  .split { grid-template-columns: 1fr; }
  .composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px 10px 12px;
    gap: 8px;
  }
  .composer textarea {
    min-height: 64px;
    max-height: 160px;
    padding: 10px 12px;
  }
  .composer-hint { display: none; }
  .composer-template-btn {
    padding: 0 10px 0 8px;
    height: 34px;
  }
  .composer-template-btn.is-needed .composer-tool-label { display: inline; }
  .btn-send span { display: none; }
  .btn-send-template span { display: none; }
  .btn-send-template { padding: 7px 9px; }
  .connect-layout { grid-template-columns: 1fr; }
  .connect-actions { flex-direction: column; align-items: stretch; }
  .connect-tenant-label { min-width: 0; width: 100%; }
}

/* —— Connect / Embedded Signup —— */
.connect-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.connect-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-xs);
}
.connect-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.connect-panel h2,
.connect-panel h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.connect-points {
  margin: 0.85rem 0 1rem;
  padding-left: 1.15rem;
  line-height: 1.55;
}
.connect-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.connect-actions-secondary { margin-top: 1rem; }
.connect-tenant-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 180px;
  flex: 1 1 160px;
}
.connect-tenant-label select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--text);
}
.btn-primary {
  appearance: none;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--ease), opacity var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.status-pill.state-ok { background: var(--ok-soft); color: var(--ok); }
.status-pill.state-warn { background: var(--warn-soft); color: var(--warn); }
.status-pill.state-fail { background: var(--danger-soft); color: var(--danger); }
.status-pill.state-unknown,
.status-pill.state-neutral { background: var(--surface-3); color: var(--muted); }
.connect-details {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}
.connect-details > div {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) 1fr;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.connect-details dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.connect-details dd {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
  font-family: var(--mono);
}
.connect-empty {
  padding: 1rem 0;
  text-align: left;
}
.connect-list-panel { margin-top: 0.25rem; }
.connect-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.connect-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.connect-card .mono { font-family: var(--mono); font-size: 0.8rem; }

.connect-help {
  margin: 0.65rem 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 0;
}
.connect-help summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.connect-help summary::-webkit-details-marker { display: none; }
.connect-help summary::before { content: "▸ "; color: var(--faint); }
.connect-help[open] summary::before { content: "▾ "; }
.connect-help .connect-points {
  margin: 0;
  padding: 0 12px 10px 28px;
}

.templates-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.templates-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.templates-header .secondary,
.templates-header .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.studio-context {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  margin: 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft, #e8eefc) 35%, var(--surface)) 0%, var(--surface) 100%);
  font-size: 12.5px;
  box-shadow: var(--shadow-xs);
}
.studio-context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.studio-context-label { color: var(--muted); font-weight: 600; }
.studio-context-sep { color: var(--faint); }
.studio-waba-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 650;
}
.studio-connection-label select {
  min-width: min(280px, 70vw);
  margin-left: 6px;
}
.studio-connection-hint { margin: 0; }
.studio-phone-note { margin: 0; }
.studio-connect-gate {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent-soft, #e8eefc) 45%, var(--surface));
  border-radius: var(--radius);
}
.studio-connect-gate .btn-primary,
.studio-empty-catalogue .btn-primary,
.tpl-library-error .btn-primary {
  margin-top: 10px;
}
.studio-empty-catalogue {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 36px 20px;
  margin: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 65%, var(--surface));
}
.studio-waba-badge.is-disconnected {
  border-style: dashed;
  color: var(--muted);
  font-weight: 600;
}
.studio-waba-badge.is-attention {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
  background: var(--warn-soft);
  color: var(--warn);
}
#studio-connection.is-unselected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.studio-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.studio-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.studio-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent, #2563eb);
}
.studio-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(110px, 0.7fr));
  gap: 10px;
  margin-bottom: 12px;
}
.studio-library-panel { margin-top: 0; }
.studio-library-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.studio-library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: none;
}
.studio-library-toolbar .studio-search {
  position: relative;
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 280px;
}
.studio-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  display: inline-flex;
  pointer-events: none;
}
.studio-library-toolbar .studio-search input {
  padding-left: 30px;
  width: 100%;
}
.studio-library-toolbar .studio-filter {
  display: block;
  margin: 0;
  font-weight: 500;
}
.studio-library-toolbar .studio-filter select {
  min-width: 120px;
  font-weight: 500;
}
.studio-library-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.tpl-library-wrap { min-height: 180px; }
.tpl-library-scroll {
  overflow-x: auto;
  max-height: min(62vh, 640px);
}
.tpl-library-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tpl-library-table th,
.tpl-library-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tpl-library-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.tpl-library-table .tpl-col-check {
  width: 36px;
  padding-right: 0;
}
.tpl-library-table .tpl-col-name,
.tpl-library-table .tpl-col-lang {
  white-space: normal;
  min-width: 160px;
}
.tpl-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  padding: 0;
  cursor: pointer;
}
.tpl-library-row { cursor: pointer; }
.tpl-library-row:hover,
.tpl-library-row.is-selected {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.tpl-name-cell { display: grid; gap: 4px; }
.tpl-name-text {
  font-weight: 650;
  color: var(--ink);
  word-break: break-word;
}
.tpl-row-actions {
  display: none;
  gap: 10px;
  align-items: center;
}
.tpl-library-row:hover .tpl-row-actions,
.tpl-library-row.is-selected .tpl-row-actions,
.tpl-library-row:focus-within .tpl-row-actions {
  display: flex;
}
.tpl-row-actions .linkish {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tpl-row-actions .linkish:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tpl-snippet {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
}
.tpl-status-badge.tone-ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
}
.tpl-status-badge.tone-warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}
.tpl-status-badge.tone-fail {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.tpl-quality-bar {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.tpl-quality-bar.tone-high { background: #22c55e; }
.tpl-quality-bar.tone-med { background: #eab308; }
.tpl-quality-bar.tone-low { background: #ef4444; }
.tpl-quality-bar.tone-unknown { background: var(--faint); }
.tpl-library-footer {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
}
.tpl-library-empty {
  padding: 28px 16px;
  text-align: center;
}
.tpl-library-loading,
.tpl-library-error {
  padding: 20px 16px;
  margin: 12px;
}
.tpl-library-loading {
  display: grid;
  gap: 4px;
}
.tpl-library-error.warn-callout {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius);
}
.studio-library-draft-hint {
  margin: 12px;
}
.connect-setup-checklist {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
}
.connect-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.connect-checklist-head .module-subhead { margin: 0; }
.connect-checklist {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.connect-check-item {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.connect-check-item:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.connect-check-item.is-done {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok-soft, #dcfce7) 45%, var(--surface));
}
.connect-check-item.is-todo {
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 28%, var(--line));
}
.connect-check-item summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.connect-check-item summary::-webkit-details-marker { display: none; }
.connect-check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
  background: color-mix(in srgb, var(--warn, #f59e0b) 18%, var(--surface));
  color: color-mix(in srgb, var(--warn, #b45309) 80%, var(--ink));
}
.connect-check-item.is-done .connect-check-mark {
  background: color-mix(in srgb, var(--ok) 22%, var(--surface));
  color: var(--ok);
}
.connect-check-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.connect-check-copy strong { font-size: 0.95rem; }
.connect-check-status {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 3px;
}
.connect-check-item.is-done .connect-check-status { color: var(--ok); }
.connect-check-item.is-todo .connect-check-status { color: color-mix(in srgb, var(--warn, #b45309) 85%, var(--ink)); }
.connect-check-detail {
  display: grid;
  gap: 10px;
  padding: 0 0.85rem 0.85rem 2.6rem;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  margin-top: 0;
  padding-top: 0.7rem;
}
.connect-check-detail p { margin: 0; font-size: 13px; line-height: 1.45; }
.connect-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.connect-checklist-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.is-spotlight {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: connect-spotlight-pulse 1.4s ease;
}
@keyframes connect-spotlight-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .is-spotlight { animation: none; }
}
.connect-health-panel {
  margin: 1rem 0 1.25rem;
}
.connect-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.connect-health-checks {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.connect-health-checks li {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.connect-health-checks li[data-status="passed"] {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}
.connect-health-checks li[data-status="failed"],
.connect-health-checks li[data-status="expired"],
.connect-health-checks li[data-status="action_required"] {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}
.connect-health-checks li[data-status="pending"],
.connect-health-checks li[data-status="unavailable"] {
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
}
.connect-health-recovery {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 50%, var(--surface));
}
.connect-health-recovery ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
.connect-activity-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.connect-activity-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.tpl-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.tpl-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
button.tpl-tag-chip {
  cursor: pointer;
  font: inherit;
}
.studio-step-errors {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
  font-size: 12.5px;
}
.tpl-timeline {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tpl-timeline li {
  position: relative;
  padding: 8px 10px 8px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  display: grid;
  gap: 2px;
}
.tpl-timeline li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}
.tpl-timeline li.is-done::before { background: var(--ok); }
.tpl-timeline li.is-current::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.tpl-detail-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
}
.tpl-detail-dialog::backdrop {
  background: color-mix(in srgb, #0b1220 45%, transparent);
}
.tpl-detail-layout { display: grid; }
.tpl-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.tpl-detail-kicker { margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.tpl-detail-head h3 { margin: 0; font-size: 1.15rem; word-break: break-word; }
.tpl-detail-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 16px 18px 18px;
}
.tpl-detail-preview-pane {
  display: grid;
  gap: 8px;
  align-content: start;
}
.tpl-detail-main { display: grid; gap: 10px; align-content: start; }
.tpl-detail-tags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tpl-detail-tags-row input { flex: 1 1 160px; min-width: 140px; }
.tpl-detail-actions { justify-content: flex-start; flex-wrap: wrap; }
.tpl-detail-delete-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.danger-outline {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line)) !important;
}
.tpl-var-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 4px;
}
@media (max-width: 900px) {
  .studio-library-toolbar-actions { margin-left: 0; width: 100%; }
  .studio-library-toolbar-actions .btn-primary,
  .studio-library-toolbar-actions .secondary { flex: 1; justify-content: center; }
  .tpl-detail-body { grid-template-columns: 1fr; }
}
.studio-toolbar label,
.studio-editor label {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.studio-toolbar input,
.studio-toolbar select,
.studio-editor input,
.studio-editor select,
.studio-editor textarea {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 8px 10px;
}
.studio-search input { width: 100%; }
.studio-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 16px;
  align-items: start;
}
.studio-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.studio-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.studio-step {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.studio-step.done {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.studio-step.active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--line));
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface));
}
.studio-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.studio-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.studio-var-manager {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.studio-var-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.studio-var-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.studio-var-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.studio-issue-row {
  display: grid;
  gap: 8px;
}
.studio-issue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.studio-issue .btn-fix {
  justify-self: start;
}
.studio-issue .field-help {
  margin: 0;
}
.field-flash {
  animation: studio-field-flash 1.4s ease;
}
@keyframes studio-field-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow: none; }
}
.studio-btn-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.studio-type-card {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 148px;
  box-shadow: var(--shadow-xs);
}
.studio-type-card:hover,
.studio-type-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--focus);
}
.studio-type-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.studio-type-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.studio-type-card strong {
  font-size: 15px;
}
.studio-type-card span {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}
.studio-type-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.studio-button-card {
  display: grid;
  gap: 10px;
}
.studio-button-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.studio-button-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.studio-button-type select {
  font-weight: 600;
  min-width: 140px;
}
#studio-connection {
  margin-left: 6px;
  max-width: 220px;
}
.studio-reorder {
  display: inline-flex;
  gap: 4px;
}
.studio-media-progress {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.tpl-send-context {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@media (max-width: 900px) {
  .studio-btn-picker { grid-template-columns: 1fr; }
}
.studio-buttons { display: grid; gap: 10px; }
.studio-button-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: grid;
  gap: 8px;
  background: var(--surface-2);
}
.studio-button-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.studio-validation { display: grid; gap: 8px; }
.studio-lifecycle {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  gap: 4px;
}
.studio-lifecycle[data-state="catalogue_verified"],
.studio-lifecycle[data-state="approved"],
.studio-lifecycle[data-state="pending_review"],
.studio-lifecycle[data-state="meta_accepted"] {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: var(--ok-soft);
}
.studio-lifecycle[data-state="failed"] {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: var(--danger-soft);
}
.studio-lifecycle[data-state="accepted_unverified"],
.studio-lifecycle[data-state="submitting"] {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: var(--warn-soft);
}
.studio-lifecycle-ok { color: var(--ok); margin: 0; }
.studio-lifecycle-warn { color: var(--warn); margin: 0; }
.studio-issue {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.4;
}
.studio-issue.error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: var(--danger-soft);
}
.studio-issue.warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: var(--warn-soft);
}
.studio-issue.ok {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: var(--ok-soft);
}
.studio-issue.info { background: var(--surface-2); }
.studio-submit-actions,
.studio-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.studio-preview-pane {
  position: sticky;
  top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.studio-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.wa-preview-frame {
  --wa-ink: #111b21;
  --wa-muted: #667781;
  --wa-action: #027a5a;
  --wa-chrome: #008069;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #54656f 22%, transparent);
  background-color: #e5ddd5;
  background-image:
    linear-gradient(180deg, var(--wa-chrome) 0%, var(--wa-chrome) 56px, transparent 56px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23cbbfaf' stroke-width='1.2' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M22 34c8-10 22-8 26 2'/%3E%3Ccircle cx='48' cy='28' r='3'/%3E%3Cpath d='M70 42h18M79 33v18'/%3E%3Cpath d='M108 30c6 0 10 5 10 11s-4 11-10 11-10-5-10-11 4-11 10-11z'/%3E%3Cpath d='M140 38c8 2 12 10 8 16s-14 6-18 0'/%3E%3Cpath d='M28 78c4-8 16-10 22-2'/%3E%3Cpath d='M62 86l8-12 8 12'/%3E%3Cpath d='M96 72h20v14H96z'/%3E%3Cpath d='M132 78c6-8 18-6 20 4'/%3E%3Cpath d='M24 124c10-2 16 8 10 14'/%3E%3Cpath d='M58 130c0-8 8-14 16-14'/%3E%3Cpath d='M98 118l14 8-14 8z'/%3E%3Cpath d='M132 126c8 0 14 6 14 12'/%3E%3Cpath d='M40 158c6-6 16-4 18 4'/%3E%3Cpath d='M78 162h22'/%3E%3Cpath d='M120 150c8 4 10 14 2 18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
  background-repeat: no-repeat, repeat;
  min-height: 360px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wa-preview-chrome {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #f5f6f6;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}
.wa-preview-chrome-meta {
  display: grid;
  line-height: 1.15;
  gap: 2px;
}
.wa-preview-chrome-name {
  font-size: 14px;
  font-weight: 700;
}
.wa-preview-chrome-status {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.wa-preview-bubble-wrap {
  padding: 18px 14px 22px;
  min-height: 280px;
}
.wa-preview-bubble {
  position: relative;
  max-width: min(92%, 320px);
  margin-right: auto;
  background: #fff;
  color: var(--wa-ink);
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 1.5px rgba(11, 20, 26, 0.14);
  font-size: 13.5px;
  line-height: 1.45;
  overflow: hidden;
}
.wa-preview-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 10px;
  height: 10px;
  background: #fff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.wa-preview-bubble-main {
  padding: 10px 12px 6px;
}
.wa-preview-header {
  font-weight: 700;
  margin-bottom: 4px;
}
.wa-preview-media {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin: -2px -4px 8px;
  border-radius: 8px;
  background: #f0f2f5;
  color: #3b4a54;
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
}
.wa-preview-media-image,
.wa-preview-media-video {
  background: #111b21;
  padding: 0;
}
.wa-preview-media-image img,
.wa-preview-media-video video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  background: #111b21;
}
.wa-preview-media-empty {
  background: #f0f2f5;
  color: #54656f;
  font-weight: 600;
  text-align: center;
  padding: 22px 12px;
  border: 1px dashed color-mix(in srgb, #667781 35%, transparent);
}
.wa-preview-media-doc {
  background: #fff;
  color: #111b21;
  padding: 14px 12px;
  gap: 6px;
  justify-items: start;
}
.wa-preview-media-tag {
  margin: -4px 0 8px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #667781;
}
.wa-preview-body {
  word-break: break-word;
  white-space: normal;
}
.wa-preview-placeholder {
  color: var(--wa-muted);
}
.wa-preview-body strong { font-weight: 700; }
.wa-preview-body em { font-style: italic; }
.wa-preview-body s { text-decoration: line-through; }
.wa-preview-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(11, 20, 26, 0.06);
  border-radius: 4px;
  padding: 0 3px;
}
.wa-preview-footer {
  margin-top: 6px;
  color: var(--wa-muted);
  font-size: 12px;
}
.wa-preview-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.wa-preview-time {
  color: var(--wa-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.wa-preview-buttons {
  display: grid;
  border-top: 1px solid #e9edef;
}
.wa-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--wa-action);
  text-align: center;
  padding: 11px 10px;
  font-size: 13.5px;
  font-weight: 650;
  border-top: 1px solid #e9edef;
}
.wa-preview-btn:first-child {
  border-top: 0;
}
.wa-preview-btn-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.wa-preview-empty {
  padding: 48px 18px;
  text-align: center;
  color: #54656f;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  border: 1px dashed rgba(84, 101, 111, 0.35);
}
.studio-preview-note { margin: 0; }
.studio-preview-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  vertical-align: middle;
}
.wa-preview-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25);
}
.studio-step-hint { margin: -4px 0 0; }
.studio-draft-banner {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, var(--line));
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface));
  font-size: 12.5px;
  color: var(--ink);
}
.req-mark {
  color: var(--danger, #b42318);
  font-weight: 700;
}
.field-help {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}
.field-status {
  margin: 2px 0 0;
  min-height: 1.1em;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.field-status.error { color: var(--danger, #b42318); }
.field-status.ok { color: var(--ok, #067647); }
.field-invalid {
  border-color: color-mix(in srgb, var(--danger, #b42318) 55%, var(--line)) !important;
  outline: 2px solid color-mix(in srgb, var(--danger, #b42318) 25%, transparent);
}
.studio-media-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.studio-media-drop {
  border: 1.5px dashed color-mix(in srgb, var(--accent, #2563eb) 40%, var(--line));
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.studio-media-drop:hover,
.studio-media-drop:focus-visible,
.studio-media-drop.dragover {
  border-color: var(--accent, #2563eb);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--surface));
}
.studio-media-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.studio-btn-guide {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.studio-guide-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 8px 10px;
}
.studio-guide-card summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.studio-guide-card[open] summary { margin-bottom: 6px; }
.studio-mini-preview {
  margin: 8px 0;
  max-width: 240px;
  display: grid;
  gap: 4px;
}
.studio-mini-bubble {
  background: #d9fdd3;
  color: #111b21;
  border-radius: 8px 8px 4px 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1);
}
.studio-mini-btn {
  background: #fff;
  color: #027eb5;
  text-align: center;
  border-radius: 8px;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid rgba(11, 20, 26, 0.08);
}
.studio-mini-cta { color: #027eb5; }
.studio-mini-url {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}
.studio-review-summary {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.studio-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.studio-review-grid .span-2 { grid-column: 1 / -1; }
.studio-review-grid span.muted {
  display: block;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.studio-review-grid strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  word-break: break-word;
}
.studio-review-body {
  white-space: pre-wrap;
  font-weight: 500 !important;
}
.studio-drafts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.studio-empty-drafts {
  text-align: center;
  padding: 28px 16px !important;
  display: grid;
  gap: 12px;
  justify-items: center;
}
[data-theme="dark"] .wa-preview-frame {
  --wa-chrome: #1f2c34;
  background-color: #0b141a;
  background-image:
    linear-gradient(180deg, var(--wa-chrome) 0%, var(--wa-chrome) 56px, transparent 56px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%231f2c34' stroke-width='1.2' stroke-linecap='round' opacity='0.9'%3E%3Cpath d='M22 34c8-10 22-8 26 2'/%3E%3Ccircle cx='48' cy='28' r='3'/%3E%3Cpath d='M70 42h18M79 33v18'/%3E%3Cpath d='M108 30c6 0 10 5 10 11s-4 11-10 11-10-5-10-11 4-11 10-11z'/%3E%3Cpath d='M140 38c8 2 12 10 8 16s-14 6-18 0'/%3E%3Cpath d='M28 78c4-8 16-10 22-2'/%3E%3Cpath d='M62 86l8-12 8 12'/%3E%3Cpath d='M96 72h20v14H96z'/%3E%3Cpath d='M132 78c6-8 18-6 20 4'/%3E%3Cpath d='M24 124c10-2 16 8 10 14'/%3E%3Cpath d='M58 130c0-8 8-14 16-14'/%3E%3Cpath d='M98 118l14 8-14 8z'/%3E%3Cpath d='M132 126c8 0 14 6 14 12'/%3E%3Cpath d='M40 158c6-6 16-4 18 4'/%3E%3Cpath d='M78 162h22'/%3E%3Cpath d='M120 150c8 4 10 14 2 18'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .wa-preview-bubble,
[data-theme="dark"] .wa-preview-bubble::before,
[data-theme="dark"] .wa-preview-btn {
  background: #202c33;
  color: #e9edef;
}
[data-theme="dark"] .wa-preview-btn {
  color: #00a884;
  border-top-color: #2a3942;
}
[data-theme="dark"] .wa-preview-buttons {
  border-top-color: #2a3942;
}
[data-theme="dark"] .wa-preview-footer,
[data-theme="dark"] .wa-preview-time,
[data-theme="dark"] .wa-preview-media-tag,
[data-theme="dark"] .wa-preview-placeholder {
  color: #8696a0;
}
[data-theme="dark"] .wa-preview-empty {
  background: rgba(32, 44, 51, 0.72);
  color: #8696a0;
  border-color: rgba(134, 150, 160, 0.35);
}
.studio-subhead {
  margin: 0 0 6px;
  font-size: 15px;
}
.tpl-stack { margin-top: 0; }
.tpl-card, .stack .item.tpl-card {
  padding: 12px 14px;
}
.tpl-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.tpl-card-title strong {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-body-preview {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  line-height: 1.4;
  max-height: 4.5em;
  overflow: hidden;
}
.tpl-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 960px) {
  .studio-editor-layout,
  .studio-toolbar,
  .studio-row-2 { grid-template-columns: 1fr; }
  .studio-preview-pane { position: static; }
}

/* Inbox CRM — status, labels, quick replies */
.nav-item[href] {
  text-decoration: none;
  color: inherit;
}
.chat-crm-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.crm-control select,
.chip-filters select {
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  padding: 0 0.45rem;
}
.chat-labels-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 4px 14px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}
.chat-labels-bar.hidden { display: none; }
.label-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.label-chip,
.label-chip-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--text) 4%);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label-chip::before,
.label-chip-mini::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}
.label-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label-chip-x {
  flex: 0 0 auto;
  margin-left: 1px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.45;
  line-height: 1;
}
.label-chip:hover .label-chip-x { opacity: 0.9; }
.label-chip-mini {
  cursor: default;
  max-width: 110px;
  padding: 2px 8px 2px 6px;
  font-size: 10.5px;
  pointer-events: none;
}
.label-chip.color-slate,
.label-chip-mini.color-slate {
  background: #eef2f7;
  color: #334155;
  border-color: #94a3b8;
}
.label-chip.color-teal,
.label-chip-mini.color-teal {
  background: #ccfbf1;
  color: #0f766e;
  border-color: #14b8a6;
}
.label-chip.color-amber,
.label-chip-mini.color-amber {
  background: #fef3c7;
  color: #b45309;
  border-color: #f59e0b;
}
.label-chip.color-rose,
.label-chip-mini.color-rose {
  background: #ffe4e6;
  color: #be123c;
  border-color: #fb7185;
}
.label-chip.color-emerald,
.label-chip-mini.color-emerald {
  background: #d1fae5;
  color: #047857;
  border-color: #10b981;
}
.label-chip.color-blue,
.label-chip-mini.color-blue {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #3b82f6;
}
.label-chip.color-violet,
.label-chip-mini.color-violet {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #8b5cf6;
}
.label-chip.color-red,
.label-chip-mini.color-red {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #ef4444;
}
.label-chip.color-orange,
.label-chip-mini.color-orange {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fb923c;
}
.label-chip.color-lime,
.label-chip-mini.color-lime {
  background: #ecfccb;
  color: #3f6212;
  border-color: #84cc16;
}
.label-chip.color-cyan,
.label-chip-mini.color-cyan {
  background: #cffafe;
  color: #0e7490;
  border-color: #22d3ee;
}
.label-picker {
  position: relative;
  flex: 0 0 auto;
  z-index: 9;
}
.chat-crm-actions .label-picker { margin-left: 0; }
.label-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  max-width: 168px;
  padding: 0 12px 0 10px;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
  color: var(--accent-hover);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.label-add-btn-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-add-btn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}
.label-add-btn-dot[hidden] { display: none !important; }
.label-add-btn-dot.color-slate { background: #64748b; }
.label-add-btn-dot.color-teal { background: #14b8a6; }
.label-add-btn-dot.color-amber { background: #f59e0b; }
.label-add-btn-dot.color-rose { background: #f43f5e; }
.label-add-btn-dot.color-emerald { background: #10b981; }
.label-add-btn-dot.color-blue { background: #3b82f6; }
.label-add-btn-dot.color-violet { background: #8b5cf6; }
.label-add-btn-dot.color-red { background: #ef4444; }
.label-add-btn-dot.color-orange { background: #fb923c; }
.label-add-btn-dot.color-lime { background: #84cc16; }
.label-add-btn-dot.color-cyan { background: #22d3ee; }
.label-add-btn svg { flex: 0 0 auto; color: currentColor; }
.label-add-btn:hover:not(:disabled),
.label-add-btn[aria-expanded="true"] {
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 92%, var(--surface));
  box-shadow: var(--shadow-sm);
}
.label-add-btn.has-label.color-slate {
  background: #eef2f7; color: #334155; border-color: #94a3b8;
}
.label-add-btn.has-label.color-teal {
  background: #ccfbf1; color: #0f766e; border-color: #14b8a6;
}
.label-add-btn.has-label.color-amber {
  background: #fef3c7; color: #b45309; border-color: #f59e0b;
}
.label-add-btn.has-label.color-rose {
  background: #ffe4e6; color: #be123c; border-color: #fb7185;
}
.label-add-btn.has-label.color-emerald {
  background: #d1fae5; color: #047857; border-color: #10b981;
}
.label-add-btn.has-label.color-blue {
  background: #dbeafe; color: #1d4ed8; border-color: #3b82f6;
}
.label-add-btn.has-label.color-violet {
  background: #ede9fe; color: #6d28d9; border-color: #8b5cf6;
}
.label-add-btn.has-label.color-red {
  background: #fee2e2; color: #b91c1c; border-color: #ef4444;
}
.label-add-btn.has-label.color-orange {
  background: #ffedd5; color: #c2410c; border-color: #fb923c;
}
.label-add-btn.has-label.color-lime {
  background: #ecfccb; color: #3f6212; border-color: #84cc16;
}
.label-add-btn.has-label.color-cyan {
  background: #cffafe; color: #0e7490; border-color: #22d3ee;
}
.label-add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.label-picker-menu {
  /* Portaled to document.body + position:fixed in JS so chat-header
     backdrop-filter / chat-pane overflow cannot clip or hide it. */
  position: fixed;
  z-index: 1200;
  width: min(280px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 16px));
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(15, 23, 42, 0.18));
  display: grid;
  gap: 4px;
  overflow: auto;
  box-sizing: border-box;
}
.label-picker-menu.hidden,
.label-picker-menu[hidden] { display: none !important; }
.label-picker-hint {
  padding: 2px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.label-picker-list {
  display: grid;
  gap: 2px;
  max-height: none;
  overflow: visible;
}
.label-picker-empty {
  padding: 8px 8px 4px;
  font-size: 12px;
  color: var(--muted);
}
.label-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.label-picker-item:hover,
.label-picker-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.label-picker-item.is-on {
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
}
.label-picker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-picker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}
.label-picker-dot.color-teal { background: #14b8a6; }
.label-picker-dot.color-amber { background: #f59e0b; }
.label-picker-dot.color-rose { background: #f43f5e; }
.label-picker-dot.color-emerald { background: #10b981; }
.label-picker-dot.color-blue { background: #3b82f6; }
.label-picker-dot.color-violet { background: #8b5cf6; }
.label-picker-dot.color-slate { background: #64748b; }
.label-picker-dot.color-red { background: #ef4444; }
.label-picker-dot.color-orange { background: #fb923c; }
.label-picker-dot.color-lime { background: #84cc16; }
.label-picker-dot.color-cyan { background: #22d3ee; }
.label-picker-check {
  margin-left: auto;
  min-width: 14px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
}
.label-picker-create {
  width: 100%;
  margin-top: 2px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: transparent;
  color: var(--accent-hover);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.label-picker-create:hover:not(:disabled) { background: var(--surface-2); }
.label-picker-create:disabled { opacity: 0.45; cursor: not-allowed; }
.label-create-form {
  display: grid;
  gap: 6px;
  padding: 6px 2px 2px;
  border-top: 1px solid var(--line);
}
.label-create-form.hidden { display: none; }
.label-create-form input,
.label-create-form select {
  width: 100%;
  height: 30px;
  font-size: 12px;
}
.label-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  align-items: center;
}
.label-create-row .btn-sm,
.label-create-row .secondary {
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
}
.workflow-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 650;
  background: var(--surface-3);
  color: var(--text-secondary);
}
.workflow-pill.workflow-open { background: var(--accent-soft); color: var(--accent-hover); }
.workflow-pill.workflow-pending { background: var(--warn-soft); color: var(--warn); }
.workflow-pill.workflow-resolved { background: var(--ok-soft); color: var(--ok); }
.conv-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.15rem;
}
.composer-qr-btn {
  width: auto;
  min-width: var(--control-h);
  height: 36px;
  gap: 6px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.composer-qr-btn svg { flex: 0 0 auto; color: var(--muted); }
.composer-qr-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.composer-qr-btn:hover:not(:disabled) svg { color: var(--accent); }
.composer-qr-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.composer-qr-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent-hover);
}
.composer-qr-btn[aria-expanded="true"] svg { color: var(--accent); }

.quick-reply-wrap {
  position: relative;
}
.qr-manager-dialog {
  width: min(440px, calc(100vw - 1.5rem));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: 0;
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}
.qr-manager-dialog::backdrop {
  background: color-mix(in srgb, #0f1419 35%, transparent);
}
.qr-manager-layout {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem 0.9rem;
  max-height: min(70vh, 520px);
}
.qr-manager-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.qr-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.1rem 0.15rem 0.2rem;
}
.qr-menu-head strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.qr-menu-head p {
  margin: 0.15rem 0 0;
  line-height: 1.35;
}
.qr-menu-head code {
  font-size: 0.78em;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: var(--surface-2);
}
.qr-menu-toolbar {
  display: flex;
  gap: 0.4rem;
}
.qr-menu-toolbar input {
  flex: 1;
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0 0.65rem;
}
.qr-menu-toolbar input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.qr-menu-list {
  overflow: auto;
  max-height: min(42vh, 280px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qr-menu-status {
  margin: 0.1rem 0 0;
  padding: 0 0.15rem;
}
.quick-reply-item {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.quick-reply-item:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.qr-insert {
  display: grid;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.qr-insert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.qr-insert-top strong {
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qr-shortcut-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
  color: var(--accent-hover);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.qr-item-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.15rem 0.15rem 0.15rem 0;
  opacity: 0.55;
}
.quick-reply-item:hover .qr-item-actions { opacity: 1; }
.qr-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
/* Compact slash autocomplete — sits above the textarea, never covers typing */
.qr-slash-menu {
  position: absolute;
  left: 8px;
  right: auto;
  bottom: calc(100% + 8px);
  width: min(260px, 72vw);
  max-height: 180px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #000);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md), 0 10px 24px color-mix(in srgb, #000 14%, transparent);
  z-index: calc(var(--z-dropdown, 40) + 5);
  pointer-events: auto;
}
.qr-slash-menu.hidden { display: none; }
.qr-slash-label {
  margin: 2px 6px 4px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.qr-slash-item {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
  cursor: pointer;
}
.qr-slash-item:hover,
.qr-slash-item.is-active {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent-soft));
}
.qr-slash-name {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}
.qr-slash-snippet {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-slash-empty {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.qr-dialog {
  width: min(440px, calc(100vw - 1.5rem));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: 0;
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}
.qr-dialog-form {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.05rem;
}
.qr-dialog .dialog-head h3 { margin: 0 0 0.2rem; }
.qr-dialog .dialog-head p { margin: 0; }
.qr-field { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.86rem; }
.qr-field input,
.qr-field textarea {
  font-weight: 400;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0.55rem 0.65rem;
}
.qr-field input:focus,
.qr-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.qr-field-help {
  margin: -0.25rem 0 0;
  line-height: 1.4;
}
#qr-form-error .linkish {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-hover, var(--accent));
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  cursor: pointer;
}
.qr-field-help code {
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--surface-2);
}
.qr-settings-row {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.qr-settings-row:last-child { border-bottom: 0; }
.qr-settings-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .composer-qr-btn .composer-tool-label { display: none; }
  .composer-qr-btn {
    width: var(--control-h);
    min-width: var(--control-h);
    padding: 0;
    border-radius: var(--radius-sm);
  }
  .qr-slash-menu {
    left: 0;
    width: min(240px, 88vw);
    max-height: 160px;
  }
}

/* ===== Campaigns ===== */
.campaigns-header { margin-bottom: 14px; }
.campaign-gate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 0 0 16px;
}
.campaign-gate-copy { min-width: 0; }
.campaign-gate-copy strong { display: block; margin-bottom: 2px; }
.campaign-gate-copy p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.campaign-gate-pill {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.campaign-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.campaign-stat {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.campaign-stat-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.campaign-stat strong {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.campaign-list {
  display: grid;
  gap: 12px;
}
.campaign-card {
  display: grid;
  gap: 14px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.campaign-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.campaign-card-top { min-width: 0; }
.campaign-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.campaign-card-title strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.campaign-card-desc {
  margin: 0;
  line-height: 1.4;
}
.campaign-card-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.campaign-card-meta > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.campaign-card-meta .meta-label,
.campaign-send-summary .meta-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}
.campaign-card-meta strong,
.campaign-send-summary strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.campaign-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.campaign-status.tone-ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
}
.campaign-status.tone-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
}
.campaign-status.tone-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}
.campaign-status.tone-muted {
  background: var(--surface-2);
  color: var(--muted);
}
.campaign-empty {
  margin-top: 12px;
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}
.campaign-empty .btn-primary { margin-top: 12px; }

.campaign-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), box-shadow var(--ease), opacity var(--ease);
}
.campaign-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.campaign-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.campaign-send-btn.btn-sm {
  padding: 7px 12px;
  font-size: 12.5px;
}

#campaign-wizard.campaign-wizard-dialog,
#campaign-send-dialog.campaign-send-dialog {
  width: min(720px, 96vw);
  max-height: min(90vh, 880px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
#campaign-send-dialog.campaign-send-dialog {
  width: min(520px, 94vw);
}
.campaign-form,
.campaign-send-form {
  display: grid;
  gap: 0;
}
.tpl-dialog-head,
.campaign-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 45%, var(--surface)), var(--surface));
}
.tpl-dialog-head h3,
.campaign-wizard-head h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.campaign-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.campaign-steps-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.campaign-steps-rail li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  position: relative;
}
.campaign-steps-rail li .camp-step-num {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 750;
  color: var(--muted);
}
.campaign-steps-rail li.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}
.campaign-steps-rail li.active .camp-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.campaign-steps-rail li.done .camp-step-num {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  color: var(--ok);
}
.campaign-step-body {
  padding: 18px 20px 8px;
  min-height: 280px;
}
.campaign-step {
  display: grid;
  gap: 12px;
}
.campaign-step-intro h4 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}
.campaign-step-intro .muted { margin: 0; }
.campaign-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.campaign-form input,
.campaign-form select,
.campaign-form textarea {
  width: 100%;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: var(--control-h);
  box-sizing: border-box;
}
.campaign-form textarea { min-height: 84px; resize: vertical; }
.campaign-form input:focus,
.campaign-form select:focus,
.campaign-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.campaign-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.campaign-inline-actions {
  display: flex;
  justify-content: flex-start;
}
.campaign-template-preview-wrap {
  display: grid;
  gap: 8px;
}
.campaign-template-preview-wrap .preview,
.tpl-phone-bubble.preview {
  background:
    linear-gradient(180deg, #e7f0ea, #dce8e1);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 72px;
  color: #0f172a;
  white-space: pre-wrap;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme="dark"] .campaign-template-preview-wrap .preview,
[data-theme="dark"] .tpl-phone-bubble.preview {
  background: linear-gradient(180deg, #1a2a27, #15231f);
  color: var(--text);
}
.audience-preview,
.review-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.campaign-panel-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.campaign-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.campaign-mini-stat {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}
.campaign-mini-stat span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}
.campaign-mini-stat strong {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.campaign-recipient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.campaign-recipient-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
}
.campaign-cost-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.campaign-cost-value {
  display: block;
  margin-top: 2px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--faint);
}
.campaign-review-hero {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.campaign-review-name {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 2px 0 4px;
}
.campaign-review-count {
  text-align: right;
  flex: 0 0 auto;
}
.campaign-review-count strong {
  display: block;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.campaign-send-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}
.campaign-send-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.campaign-send-panel-head .muted { margin: 4px 0 0; }
.campaign-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.campaign-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
}
.campaign-checklist li span:last-child {
  display: grid;
  gap: 1px;
}
.campaign-checklist .check-mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
  margin-top: 1px;
}
.campaign-checklist li.is-ok .check-mark {
  background: var(--ok-soft);
  color: var(--ok);
}
.campaign-checklist li.is-blocked .check-mark {
  background: var(--warn-soft);
  color: var(--warn);
}
.campaign-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  bottom: 0;
}
.campaign-dialog-actions-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}
.campaign-send-body {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
}
.campaign-send-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.campaign-send-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.campaign-send-result {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.campaign-send-result.is-blocked {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  color: var(--warn);
}
.campaign-send-result.is-ok {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
  color: var(--ok);
}
.campaign-send-result ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 900px) {
  .campaign-summary,
  .campaign-card-meta,
  .campaign-filter-grid,
  .campaign-metric-row,
  .campaign-send-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campaign-steps-rail .camp-step-label { display: none; }
}
@media (max-width: 640px) {
  .campaign-summary,
  .campaign-card-meta,
  .campaign-filter-grid,
  .campaign-metric-row,
  .campaign-send-summary {
    grid-template-columns: 1fr;
  }
  .campaign-gate { flex-direction: column; }
  .campaign-review-hero { flex-direction: column; }
  .campaign-review-count { text-align: left; }
  .campaign-dialog-actions { flex-wrap: wrap; }
}

/* Scrollbars — restrained */
.conversation-list,
.messages,
.context-pane,
.nav-rail,
.view {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--faint) 55%, transparent) transparent;
}
.conversation-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.context-pane::-webkit-scrollbar,
.nav-rail::-webkit-scrollbar,
.view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.conversation-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.context-pane::-webkit-scrollbar-thumb,
.nav-rail::-webkit-scrollbar-thumb,
.view::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--faint) 45%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Getting-started + SaaS settings helpers */
.onboarding-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0.75rem 1rem 0;
  padding: 0.9rem 1rem;
}
.onboarding-banner.hidden { display: none; }
.onboarding-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
}
.onboarding-steps li.is-done { color: var(--ok, #1b7f4a); }
.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.settings-topup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 0.6rem 0;
}
.settings-topup-row input { width: 7rem; }
.plan-card-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--faint) 50%, transparent);
}
.plan-card-row:last-child { border-bottom: 0; }
.invite-token {
  display: block;
  word-break: break-all;
  margin: 0.4rem 0;
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--faint) 25%, transparent);
  border-radius: 6px;
  font-size: 0.8rem;
}
.camp-csv-label { display: grid; gap: 0.35rem; margin: 0.75rem 0 0.25rem; }
.team-role-select { max-width: 11rem; }

/* ===== UI-2: Overview / Inbox / Contacts / Templates / Setup ===== */
.view-shell {
  max-width: 1180px;
}
.dashboard-layout.view-shell,
.contacts-layout.view-shell,
.setup-view-shell {
  max-width: 1180px;
}
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dashboard-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.dashboard-health-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.dashboard-health-card strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}
.dashboard-health-card .tt-badge { align-self: flex-start; margin-top: 4px; }
.dashboard-kpis-hero {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 12px;
}
.dashboard-loading {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-loading-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-loading .tt-skeleton {
  height: 88px;
  border-radius: var(--radius);
}
.shortcut-list {
  display: grid;
  gap: 8px;
}
.shortcut-list .secondary {
  justify-content: flex-start;
  text-align: left;
}
.module-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.module-panel-head h2 { margin: 0; }

/* Contacts CRM */
.contacts-honesty {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.contacts-honesty strong { display: block; margin-bottom: 2px; }
.contacts-honesty p { margin: 0; }
.contacts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.contacts-toolbar .header-actions,
.contacts-toolbar .module-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 0;
}
.contacts-toolbar input[type="search"] {
  min-width: min(240px, 100%);
  background: var(--bg);
}
.contacts-table .data-table tbody tr {
  cursor: pointer;
}
.contacts-table .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.contacts-table .data-table tbody tr:focus-visible {
  outline: none;
  box-shadow: inset var(--focus);
}
.contact-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.contact-name-cell .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.contacts-empty-state {
  margin-top: 8px;
}

/* Setup Center */
.setup-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.setup-progress-track {
  flex: 1 1 160px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--line);
}
.setup-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width var(--ease);
}
.setup-check-grid {
  display: grid;
  gap: 10px;
}
.setup-check {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.setup-check h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.setup-check-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.setup-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
}
.setup-status.tone-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.setup-status.tone-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); }
.setup-status.tone-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.setup-status.tone-accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.setup-assist-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.setup-assist-item + .setup-assist-item { margin-top: 0; }
.setup-assist-list {
  gap: 10px;
}
.setup-assist-panel {
  margin-top: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Inbox polish */
.list-header {
  padding: 14px 14px 6px;
}
.inbox-filter-bar {
  padding-inline: 10px;
}
.chip {
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.chip.active {
  background: var(--accent-soft);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.conversation-item.active {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--list-bg));
  box-shadow: inset 3px 0 0 var(--accent);
}
.chat-empty-state {
  max-width: 320px;
  padding: 24px 16px;
}
.chat-empty-state .empty-illust {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.context-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
}
.ctx-section summary {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Template Studio shell */
.templates-header {
  margin-bottom: 12px;
}
.studio-tabs {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
  width: fit-content;
  max-width: 100%;
}
.studio-tab {
  border-radius: var(--radius-pill);
}
.studio-tab.active {
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  font-weight: 650;
}
.studio-library-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

@media (max-width: 900px) {
  .dashboard-loading-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-hero,
  .dashboard-kpis-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dashboard-loading-row { grid-template-columns: 1fr; }
  .contacts-toolbar { padding: 10px; }
  .studio-tabs { width: 100%; }
  .studio-tab { flex: 1; }
}

/* ===== UI-3: Broadcast / Automation / Analytics / Reports / Team / Settings / Billing / Connect ===== */
.campaigns-layout .campaigns-list-heading,
.automation-layout .module-subhead {
  margin: 4px 0 10px;
}
.campaigns-layout .campaign-summary {
  margin-bottom: 18px;
}

.rules-list {
  display: grid;
  gap: 10px;
}
.rule-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.rule-card-main { min-width: 0; flex: 1 1 220px; }
.rule-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.automation-empty { margin-top: 8px; }
.automation-footer-actions { margin-top: 4px; }

.analytics-layout .analytics-hero { margin-bottom: 14px; }
.analytics-notes-card {
  margin-top: 14px;
  padding: 14px 16px;
}

.reports-cards { display: grid; gap: 12px; }
.reports-meta { margin-bottom: 2px; }
.reports-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.reports-card h2 { margin: 0 0 10px; font-size: 0.95rem; }
.reports-dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.reports-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.reports-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.reports-dl dt { color: var(--muted); font-size: 0.82rem; }
.reports-dl dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.reports-notes { margin: 4px 0 0; }
.reports-raw {
  margin-top: 14px;
  padding: 12px 14px;
}
.reports-raw summary {
  cursor: pointer;
  font-weight: 650;
}
.reports-raw .report-pre {
  margin: 10px 0 0;
  max-height: 320px;
  overflow: auto;
}

.team-seats { margin: 0 0 14px; }
.team-seats-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.team-seats-card.is-limit {
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface));
}
.team-seats-card strong { display: block; margin-bottom: 2px; }
.team-seats-card p { margin: 0; }
.team-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
  gap: 16px;
  align-items: start;
}
.team-side { display: grid; gap: 12px; }
.team-role-guide {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
}
.team-table .avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.settings-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.settings-rail {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.settings-rail-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.settings-rail-item:hover { background: var(--surface-2); color: var(--text); }
.settings-rail-item.active {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.settings-panel-focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: box-shadow 0.8s var(--ease);
}
.billing-layout .settings-billing-panel {
  max-width: 820px;
}

.connect-honesty {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.connect-honesty strong { display: block; margin-bottom: 2px; }
.connect-honesty p { margin: 0; }
.connect-view .connect-panel {
  box-shadow: var(--shadow-xs);
}

@media (max-width: 960px) {
  .team-layout-grid,
  .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-rail {
    position: static;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .campaign-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .campaign-summary,
  .campaign-card-meta {
    grid-template-columns: 1fr 1fr;
  }
  .rule-actions { width: 100%; }
}

/* ===== Setup Center polish + UI-5 ===== */
.setup-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.setup-quick-fixes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}
.setup-groups { display: grid; gap: 18px; }
.setup-group-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.setup-check {
  display: grid;
  gap: 6px;
}
.setup-check.needs-action {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line));
  box-shadow: var(--shadow-xs);
}
.setup-check-reason { margin: 0; }
.setup-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.setup-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.setup-next-card h2 { margin-top: 0; }
.setup-limits {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
}
.setup-assist-form .btn-primary { justify-self: start; }

/* UI-5: focus / motion / density helpers */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.btn-primary:focus-visible,
.secondary:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.setup-fix-btn:focus-visible {
  box-shadow: var(--focus);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.tt-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.tt-skip-link:focus {
  left: 12px;
  top: 12px;
}
@media (max-width: 800px) {
  .setup-layout { grid-template-columns: 1fr; }
  .setup-side { order: -1; }
  .setup-filter-bar { width: 100%; }
}

/* ===== Setup Center journey v2 ===== */
.setup-layout-v2 { gap: 20px; }
.setup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.8fr);
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-sm);
}
.setup-hero-title {
  margin: 8px 0 6px;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
.setup-hero-actions,
.setup-hero-meter { display: grid; gap: 10px; }
.setup-hero-actions { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); align-items: center; }
.setup-section-label {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.setup-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.setup-path-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.setup-path-card.is-current {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.setup-path-card.is-done {
  background: color-mix(in srgb, var(--ok-soft) 35%, var(--surface));
}
.setup-path-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.setup-path-card.is-done .setup-path-num {
  background: var(--ok-soft);
  color: var(--ok);
}
.setup-path-body { min-width: 0; display: grid; gap: 6px; }
.setup-path-body h3 { margin: 0; font-size: 1rem; }
.setup-details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}
.setup-details summary {
  cursor: pointer;
  font-weight: 650;
  padding: 4px 2px;
}
.setup-details[open] summary { margin-bottom: 10px; }
.setup-check-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.setup-check.is-compact {
  padding: 10px 12px;
  gap: 4px;
}
.setup-check.is-compact h3 { font-size: 0.92rem; }
@media (max-width: 960px) {
  .setup-hero { grid-template-columns: 1fr; }
  .setup-path-grid { grid-template-columns: 1fr; }
}

/* ===== Dashboard home + Plans marketplace (20261030-dash1) ===== */
.topbar-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  cursor: pointer;
  color: inherit;
}
.topbar-wallet-add {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink, var(--accent));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}
.topbar-plans-btn { white-space: nowrap; }
.topbar-profile-btn { padding: 2px; border-radius: 999px; }
.dash-home.view-shell { max-width: 1280px; }
.dash-header { align-items: flex-start; }
.dash-status-strip {
  margin: 6px 0 0;
  letter-spacing: 0.01em;
  line-height: 1.45;
}
.dash-status-strip strong { font-weight: 700; color: var(--ink); }
.dash-live { color: var(--ok) !important; }
.dash-pending { color: var(--warn, #b45309) !important; }
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 16px;
  align-items: start;
}
.dash-main-col, .dash-side-col { display: grid; gap: 14px; min-width: 0; }
.dash-setup-card .dash-setup-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.dash-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; margin: 0 0 4px; }
.dash-setup-tips { margin: 8px 0; padding-left: 1.1rem; }
.dash-reward-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-reward-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}
.dash-reward-item.is-done { border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.dash-reward-step { font-size: 11px; font-weight: 700; color: var(--muted); }
.dash-faq { display: grid; gap: 8px; }
.dash-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  background: var(--surface);
}
.dash-faq-item summary { cursor: pointer; font-weight: 650; }
.dash-faq-item[open] summary { margin-bottom: 6px; }
.dash-faq-item p { margin: 0 0 8px; }
.dash-tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.dash-tutorial-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  cursor: pointer;
  display: grid;
  gap: 4px;
}
.dash-tutorial-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.dash-channel-card .dash-channel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-phone { font-size: 1.15rem; font-weight: 750; margin: 0 0 4px; letter-spacing: -0.02em; }
.dash-credit-grid {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.dash-credit {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.dash-trial-banner {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.dash-tool-list { display: grid; gap: 8px; }
.dash-tool {
  text-align: left;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  color: inherit;
}
.dash-tool:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.dash-metrics-split { margin-top: 2px; }

.plans-marketplace { display: grid; gap: 14px; margin-bottom: 16px; }
.plans-current-status:empty { display: none; }
.plans-current-status {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 28%, var(--line));
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--ok, #16a34a) 12%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 40%, var(--surface)), var(--surface));
}
.plans-current-status-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.plans-current-status-top h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.plans-current-status-top p { margin: 0; }
.plans-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, #16a34a 88%, var(--text));
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--line));
}
.plans-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plans-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-secondary, var(--muted));
}
.plans-feature-chip.is-on {
  border-color: color-mix(in srgb, #16a34a 30%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
  color: color-mix(in srgb, #16a34a 75%, var(--text));
}
.plans-feature-chip.is-off { opacity: 0.72; }
.plan-tier-card.is-current {
  border-color: color-mix(in srgb, #16a34a 45%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, #16a34a 8%, var(--surface)), var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, #16a34a 18%, transparent);
}
.plan-tier-card.is-lower {
  opacity: 0.78;
}
.plan-tier-card.is-lower:hover {
  transform: none;
  box-shadow: var(--shadow-xs);
}
.plan-tier-actions .plan-cta-spacer {
  display: block;
  min-height: 36px;
}
.plan-tier-actions .btn-current {
  cursor: default;
  pointer-events: none;
  background: color-mix(in srgb, #16a34a 88%, #0f766e);
  border-color: transparent;
  color: #fff;
}
.plan-tier-actions .btn-upgrade {
  background: var(--accent);
}
.wallet-topup-card.is-focus-pulse {
  animation: wallet-hero-flash 0.9s ease;
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.plans-trial-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}
.plans-cycle-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  margin: 0 auto;
}
.plans-cycle-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 650;
  color: var(--muted);
}
.plans-cycle-btn.is-active {
  background: var(--accent);
  color: var(--accent-ink, #fff);
}
.plans-cycle-save { font-size: 11px; opacity: 0.9; margin-left: 4px; }
.plans-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.plan-tier-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  position: relative;
}
.plan-tier-card.is-recommended,
.plan-tier-card.is-chosen {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.plan-tier-top { display: flex; justify-content: space-between; gap: 8px; }
.plan-tier-top h3 { margin: 4px 0 0; font-size: 1.05rem; }
.plan-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 22%, var(--surface));
  color: #92400e;
}
.plan-tier-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  color: var(--accent);
  flex: 0 0 auto;
}
.plan-tier-card.is-chosen .plan-tier-radio {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.plan-tier-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.plan-tier-features { margin: 0; padding-left: 1.05rem; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); flex: 1; }
.plan-tier-actions { display: grid; gap: 6px; margin-top: 4px; }
.plans-fair-use { margin: 0; }

.trial-congrats-dialog {
  border: 0;
  border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: min(560px, 94vw);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.18));
}
.trial-congrats-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.trial-congrats-close {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 22px;
}
.trial-congrats-dialog { position: relative; }
.trial-congrats-hero { font-size: 42px; text-align: center; line-height: 1; margin-bottom: 8px; }
.trial-congrats-dialog h2 {
  margin: 0 0 8px;
  text-align: center;
  color: var(--accent);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.trial-congrats-dialog > .muted { text-align: center; }
.trial-congrats-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 18px 0 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.trial-congrats-divider::before,
.trial-congrats-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.trial-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.trial-feature-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}
.trial-feature-card strong { display: block; margin-bottom: 2px; font-size: 13px; }
.trial-feature-card p { margin: 0; }

@media (max-width: 960px) {
  .dash-grid { grid-template-columns: 1fr; }
  .plans-trial-banner { flex-direction: column; align-items: stretch; }
  .trial-feature-grid { grid-template-columns: 1fr; }
  .topbar-plans-btn { display: none; }
}

/* ===== Business setup confirm celebration ===== */
.biz-success-dialog {
  border: 0;
  border-radius: 20px;
  padding: 36px 28px 24px;
  max-width: min(440px, 94vw);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  background: var(--surface);
  color: var(--ink);
}
.biz-success-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
}
.biz-success-dialog h2 {
  margin: 18px 0 8px;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--ok, #16a34a) 88%, var(--ink));
}
.biz-success-dialog > .muted { margin: 0 auto 18px; max-width: 34ch; }
.biz-success-mark {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 8px auto 0;
}
.biz-success-ring {
  width: 132px;
  height: 132px;
  transform: rotate(-90deg);
}
.biz-success-ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--ok, #16a34a) 18%, var(--line));
  stroke-width: 6;
}
.biz-success-ring-progress {
  fill: none;
  stroke: var(--ok, #16a34a);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 339;
  stroke-dashoffset: 339;
}
.biz-success-tick {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ok, #16a34a) 92%, #fff), var(--ok, #16a34a));
  color: #fff;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--ok, #16a34a) 35%, transparent),
    0 0 0 0 color-mix(in srgb, var(--ok, #16a34a) 40%, transparent);
  transform: scale(0.35);
  opacity: 0;
}
.biz-success-tick svg { width: 54px; height: 54px; }
.biz-success-tick-path {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
}
.biz-success-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.biz-success-burst span {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  opacity: 0;
  background: var(--ok, #16a34a);
}
.biz-success-burst span:nth-child(odd) { background: #22c55e; width: 6px; height: 14px; border-radius: 4px; }
.biz-success-burst span:nth-child(3n) { background: #86efac; }
.biz-success-burst span:nth-child(4n) { background: #fbbf24; }
.biz-success-burst span:nth-child(5n) { background: #38bdf8; }
.biz-success-actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.biz-success-dialog.is-playing .biz-success-ring-progress {
  animation: biz-ring-draw 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
.biz-success-dialog.is-playing .biz-success-tick {
  animation: biz-tick-pop 0.55s 0.28s cubic-bezier(.2,1.4,.3,1) forwards;
}
.biz-success-dialog.is-playing .biz-success-tick-path {
  animation: biz-tick-draw 0.45s 0.48s ease forwards;
}
.biz-success-dialog.is-playing .biz-success-burst span {
  animation: biz-confetti 1.05s 0.35s ease-out forwards;
}
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(1) { --dx: -88px; --dy: -72px; --rot: -28deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(2) { --dx: 92px; --dy: -68px; --rot: 24deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(3) { --dx: -110px; --dy: 8px; --rot: -12deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(4) { --dx: 118px; --dy: 4px; --rot: 18deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(5) { --dx: -70px; --dy: 78px; --rot: -34deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(6) { --dx: 76px; --dy: 84px; --rot: 40deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(7) { --dx: -40px; --dy: -98px; --rot: 8deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(8) { --dx: 36px; --dy: -102px; --rot: -16deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(9) { --dx: -126px; --dy: -36px; --rot: 50deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(10) { --dx: 130px; --dy: -30px; --rot: -44deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(11) { --dx: -20px; --dy: 108px; --rot: 12deg; }
.biz-success-dialog.is-playing .biz-success-burst span:nth-child(12) { --dx: 18px; --dy: 112px; --rot: -8deg; }

@keyframes biz-ring-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes biz-tick-pop {
  0% { transform: scale(0.35); opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok, #16a34a) 40%, transparent); }
  70% { transform: scale(1.08); opacity: 1; box-shadow: 0 14px 34px color-mix(in srgb, var(--ok, #16a34a) 35%, transparent), 0 0 0 18px color-mix(in srgb, var(--ok, #16a34a) 0%, transparent); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 12px 28px color-mix(in srgb, var(--ok, #16a34a) 32%, transparent), 0 0 0 0 transparent; }
}
@keyframes biz-tick-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes biz-confetti {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .biz-success-dialog.is-playing .biz-success-ring-progress,
  .biz-success-dialog.is-playing .biz-success-tick,
  .biz-success-dialog.is-playing .biz-success-tick-path,
  .biz-success-dialog.is-playing .biz-success-burst span {
    animation: none !important;
  }
  .biz-success-ring-progress { stroke-dashoffset: 0; }
  .biz-success-tick { transform: scale(1); opacity: 1; }
  .biz-success-tick-path { stroke-dashoffset: 0; }
  .biz-success-burst span { display: none; }
}

/* ===== Plans catalog v2 + checkout ===== */
.billing-layout.view-shell { max-width: 1280px; }
.plans-cycle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plans-catalog {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.plan-tier-card {
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-height: 100%;
}
.plan-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}
.plan-tier-card.is-clicking {
  animation: plan-card-pop .38s cubic-bezier(.2,1.4,.3,1);
}
.plan-tier-card.is-chosen {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
}
.plan-tier-card.is-recommended::before {
  content: "Recommended";
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
}
.plan-tier-billed { margin: -2px 0 0; }
.plan-tier-highlight {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ok, #16a34a) 12%, var(--surface));
  color: color-mix(in srgb, var(--ok, #16a34a) 70%, var(--ink));
  font-size: 12.5px;
  font-weight: 650;
}
.plan-tier-includes { margin: 0; }
.plan-feature-count { margin: 0; font-weight: 650; }
.plan-feature-scroll {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
  margin: 2px 0 4px;
  scrollbar-width: thin;
}
.plan-feature-group h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.plan-feature-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.plan-feature-group li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  align-items: start;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
}
.plan-check {
  color: var(--ok, #16a34a);
  font-weight: 800;
  line-height: 1.2;
}
.plans-addons-wrap { display: grid; gap: 8px; margin-top: 4px; }
.plans-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.plan-addon-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 45%, var(--surface));
}
.plan-addon-price { display: flex; align-items: baseline; gap: 4px; }
.wallet-quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.wallet-quick-amounts .is-active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--accent);
}
.is-pulse { animation: plan-card-pop .35s ease; }

.plan-checkout-dialog,
.plan-paid-dialog,
.wallet-paid-dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  max-width: min(460px, 94vw);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .2);
  background: var(--surface);
  color: var(--ink);
  position: relative;
}
.plan-checkout-dialog {
  max-height: min(92vh, 760px);
  overflow: hidden;
  padding: 0;
}
.plan-checkout-dialog[open] {
  display: flex;
  flex-direction: column;
}
.plan-checkout-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 12px;
  scrollbar-gutter: stable;
}
.plan-checkout-footer {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  position: sticky;
  bottom: 0;
}
.plan-paid-dialog,
.wallet-paid-dialog {
  padding: 24px;
  overflow: hidden;
}
.plan-checkout-dialog::backdrop,
.plan-paid-dialog::backdrop,
.wallet-paid-dialog::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}
.plan-checkout-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 22px;
}
.checkout-kicker { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin: 0 0 4px; }
.plan-checkout-dialog h2 { margin: 0 0 4px; letter-spacing: -0.02em; padding-right: 28px; }
.checkout-price { font-size: 1.6rem; font-weight: 800; margin: 10px 0 2px; letter-spacing: -0.03em; }
.checkout-feature-preview {
  margin: 12px 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  max-height: none;
  overflow: visible;
}
.checkout-pay-methods {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.checkout-pay-methods legend { padding: 0 4px; font-weight: 700; font-size: 12px; }
.checkout-pay-option {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.checkout-pay-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.checkout-pay-option em { font-style: normal; margin-left: 4px; }
#checkout-pay-btn.is-busy { opacity: .75; }

.pay-celebrate-dialog { text-align: center; }
.pay-celebrate-kicker {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #16a34a 85%, var(--muted));
  opacity: 0;
}
.pay-celebrate-dialog.is-playing .pay-celebrate-kicker {
  animation: pay-fade-up .45s ease .35s forwards;
}
.pay-celebrate-badge {
  display: inline-flex;
  margin: 8px auto 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, #16a34a 90%, var(--text));
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--line));
  opacity: 0;
}
.pay-celebrate-dialog.is-playing .pay-celebrate-badge {
  animation: pay-fade-up .4s ease .55s forwards;
}
.pay-celebrate-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pay-celebrate-burst span {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  background: #22c55e;
}
.pay-celebrate-dialog.is-playing .pay-celebrate-burst span {
  animation: pay-burst-fly 1.05s cubic-bezier(.15,.85,.25,1) forwards;
}
.pay-celebrate-burst span:nth-child(1) { --dx: -120px; --dy: -90px; background: #22c55e; animation-delay: .08s; }
.pay-celebrate-burst span:nth-child(2) { --dx: 110px; --dy: -100px; background: #f59e0b; animation-delay: .1s; }
.pay-celebrate-burst span:nth-child(3) { --dx: -40px; --dy: -130px; background: #38bdf8; animation-delay: .12s; }
.pay-celebrate-burst span:nth-child(4) { --dx: 70px; --dy: -70px; background: #a855f7; animation-delay: .05s; }
.pay-celebrate-burst span:nth-child(5) { --dx: -140px; --dy: -20px; background: #f97316; animation-delay: .14s; }
.pay-celebrate-burst span:nth-child(6) { --dx: 140px; --dy: -10px; background: #14b8a6; animation-delay: .16s; }
.pay-celebrate-burst span:nth-child(7) { --dx: -90px; --dy: 70px; background: #eab308; animation-delay: .18s; }
.pay-celebrate-burst span:nth-child(8) { --dx: 95px; --dy: 80px; background: #ef4444; animation-delay: .2s; }
.pay-celebrate-burst span:nth-child(9) { --dx: 0px; --dy: -150px; background: #84cc16; animation-delay: .07s; }
.pay-celebrate-burst span:nth-child(10) { --dx: -60px; --dy: 110px; background: #06b6d4; animation-delay: .22s; }
.pay-celebrate-burst span:nth-child(11) { --dx: 55px; --dy: 120px; background: #f472b6; animation-delay: .11s; }
.pay-celebrate-burst span:nth-child(12) { --dx: -160px; --dy: 40px; background: #22c55e; animation-delay: .24s; }
.pay-celebrate-burst span:nth-child(13) { --dx: 155px; --dy: 45px; background: #fbbf24; animation-delay: .09s; }
.pay-celebrate-burst span:nth-child(14) { --dx: -20px; --dy: 140px; background: #60a5fa; animation-delay: .26s; }
.pay-celebrate-burst span:nth-child(15) { --dx: 20px; --dy: -110px; background: #4ade80; animation-delay: .13s; }
.pay-celebrate-burst span:nth-child(16) { --dx: -100px; --dy: -50px; background: #fb923c; animation-delay: .15s; }
.pay-celebrate-burst span:nth-child(17) { --dx: 105px; --dy: -45px; background: #c084fc; animation-delay: .17s; }
.pay-celebrate-burst span:nth-child(18) { --dx: -75px; --dy: 30px; background: #2dd4bf; animation-delay: .19s; }
@keyframes pay-burst-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(180deg); }
}
@keyframes pay-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.plan-paid-mark {
  position: relative;
  margin: 8px auto 12px;
  width: 104px;
  height: 104px;
}
.plan-paid-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #16a34a 35%, transparent);
  transform: scale(.6);
  opacity: 0;
}
.plan-paid-dialog.is-playing .plan-paid-ring {
  animation: plan-ring-pop .7s ease forwards;
}
@keyframes plan-ring-pop {
  0% { transform: scale(.6); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}
.plan-paid-tick {
  position: relative;
  z-index: 1;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 48px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #22c55e, #16a34a);
  box-shadow: 0 14px 30px color-mix(in srgb, #16a34a 35%, transparent);
  transform: scale(.4); opacity: 0;
}
.plan-paid-dialog.is-playing .plan-paid-tick {
  animation: biz-tick-pop .55s cubic-bezier(.2,1.4,.3,1) forwards;
}
.plan-paid-dialog h2,
.wallet-paid-dialog h2 {
  margin: 8px 0 6px;
  letter-spacing: -0.03em;
  opacity: 0;
}
.plan-paid-dialog.is-playing h2,
.wallet-paid-dialog.is-playing h2 {
  animation: pay-fade-up .45s ease .28s forwards;
}
.plan-paid-dialog > .muted,
.wallet-paid-dialog > .muted {
  opacity: 0;
}
.plan-paid-dialog.is-playing > .muted,
.wallet-paid-dialog.is-playing > .muted {
  animation: pay-fade-up .4s ease .42s forwards;
}

.wallet-paid-mark {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 10px auto 8px;
}
.wallet-paid-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #f6d365 55%, transparent), transparent 70%);
  opacity: 0;
}
.wallet-paid-dialog.is-playing .wallet-paid-glow {
  animation: wallet-glow-pulse 1.2s ease .1s infinite;
}
@keyframes wallet-glow-pulse {
  0%, 100% { transform: scale(.9); opacity: .45; }
  50% { transform: scale(1.15); opacity: .9; }
}
.wallet-paid-coin {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  margin: 9px auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: #7a5200;
  background: linear-gradient(145deg, #ffe08a, #f0c14b 45%, #d4a017);
  border: 3px solid color-mix(in srgb, #fff 40%, #d4a017);
  box-shadow: 0 16px 32px rgba(180, 120, 20, 0.35);
  transform: scale(.35) rotate(-18deg);
  opacity: 0;
}
.wallet-paid-dialog.is-playing .wallet-paid-coin {
  animation: wallet-coin-pop .65s cubic-bezier(.2,1.45,.3,1) forwards;
}
@keyframes wallet-coin-pop {
  0% { transform: scale(.35) rotate(-18deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.wallet-paid-amount {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, #16a34a 80%, var(--text));
  margin: 4px 0 2px;
  opacity: 0;
}
.wallet-paid-dialog.is-playing .wallet-paid-amount {
  animation: pay-fade-up .4s ease .48s forwards, wallet-amount-bounce .55s ease .48s;
}
@keyframes wallet-amount-bounce {
  0% { transform: scale(.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.wallet-paid-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wallet-paid-rain i {
  position: absolute;
  top: -24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe08a, #d4a017);
  opacity: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.wallet-paid-dialog.is-playing .wallet-paid-rain i {
  animation: wallet-coin-fall 1.35s linear forwards;
}
.wallet-paid-rain i:nth-child(1) { left: 8%; animation-delay: .05s; }
.wallet-paid-rain i:nth-child(2) { left: 16%; animation-delay: .18s; width: 10px; height: 10px; }
.wallet-paid-rain i:nth-child(3) { left: 24%; animation-delay: .3s; }
.wallet-paid-rain i:nth-child(4) { left: 32%; animation-delay: .12s; width: 12px; height: 12px; }
.wallet-paid-rain i:nth-child(5) { left: 40%; animation-delay: .42s; }
.wallet-paid-rain i:nth-child(6) { left: 48%; animation-delay: .08s; width: 11px; height: 11px; }
.wallet-paid-rain i:nth-child(7) { left: 56%; animation-delay: .25s; }
.wallet-paid-rain i:nth-child(8) { left: 64%; animation-delay: .36s; width: 9px; height: 9px; }
.wallet-paid-rain i:nth-child(9) { left: 72%; animation-delay: .15s; }
.wallet-paid-rain i:nth-child(10) { left: 80%; animation-delay: .48s; }
.wallet-paid-rain i:nth-child(11) { left: 12%; animation-delay: .55s; width: 10px; height: 10px; }
.wallet-paid-rain i:nth-child(12) { left: 28%; animation-delay: .62s; }
.wallet-paid-rain i:nth-child(13) { left: 44%; animation-delay: .7s; width: 13px; height: 13px; }
.wallet-paid-rain i:nth-child(14) { left: 60%; animation-delay: .5s; }
.wallet-paid-rain i:nth-child(15) { left: 76%; animation-delay: .66s; width: 11px; height: 11px; }
.wallet-paid-rain i:nth-child(16) { left: 88%; animation-delay: .22s; }
.wallet-paid-rain i:nth-child(17) { left: 5%; animation-delay: .75s; }
.wallet-paid-rain i:nth-child(18) { left: 52%; animation-delay: .33s; width: 10px; height: 10px; }
.wallet-paid-rain i:nth-child(19) { left: 68%; animation-delay: .58s; }
.wallet-paid-rain i:nth-child(20) { left: 92%; animation-delay: .4s; width: 12px; height: 12px; }
@keyframes wallet-coin-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(420px) rotate(320deg); opacity: 0; }
}

.local-pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.local-pay-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.local-pay-card {
  width: min(320px, 90vw);
  padding: 28px 24px;
  border-radius: 18px;
  text-align: center;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  transform: translateY(10px) scale(.96);
  transition: transform .25s ease;
}
.local-pay-overlay.is-visible .local-pay-card {
  transform: translateY(0) scale(1);
}
.local-pay-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-top-color: var(--accent);
  animation: local-pay-spin .7s linear infinite;
}
.local-pay-overlay.is-success .local-pay-spinner {
  animation: none;
  border-color: #16a34a;
  background: #16a34a;
  position: relative;
}
.local-pay-overlay.is-success .local-pay-spinner::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.local-pay-label {
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@keyframes local-pay-spin {
  to { transform: rotate(360deg); }
}

@keyframes plan-card-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-tier-card, .plan-tier-card.is-clicking, .is-pulse,
  .plan-paid-dialog.is-playing .plan-paid-tick,
  .plan-paid-dialog.is-playing .plan-paid-ring,
  .wallet-paid-dialog.is-playing .wallet-paid-coin,
  .wallet-paid-dialog.is-playing .wallet-paid-rain i,
  .pay-celebrate-dialog.is-playing .pay-celebrate-burst span,
  .wallet-coin-b, .wallet-coin-c, .wallet-hero.wallet-hero-flash,
  .local-pay-spinner {
    animation: none !important;
    transition: none !important;
  }
  .plan-paid-tick, .wallet-paid-coin, .pay-celebrate-kicker,
  .pay-celebrate-badge, .wallet-paid-amount,
  .plan-paid-dialog h2, .wallet-paid-dialog h2,
  .plan-paid-dialog > .muted, .wallet-paid-dialog > .muted {
    transform: none; opacity: 1;
  }
}
@media (max-width: 960px) {
  .plans-catalog { grid-template-columns: 1fr; }
  .plan-feature-scroll { max-height: 220px; }
}

/* ===== Confirmed business profile summary ===== */
.business-setup-summary {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}
.business-setup-summary.hidden { display: none !important; }
.business-setup-wizard.hidden { display: none !important; }
.biz-summary-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 28%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--ok, #16a34a) 12%, var(--surface)), var(--surface));
}
.biz-summary-tick {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(160deg, #22c55e, #16a34a);
  box-shadow: 0 8px 18px color-mix(in srgb, #16a34a 28%, transparent);
  flex: 0 0 auto;
}
.biz-summary-hero .module-subhead { margin: 0 0 2px; }
.business-setup-summary-grid {
  display: grid;
  gap: 12px;
}
.biz-summary-group,
.biz-review-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}
.biz-summary-group h4,
.biz-review-group-title {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.biz-summary-items,
.biz-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.biz-summary-item,
.biz-review-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.biz-summary-item strong,
.biz-review-item div {
  font-size: 0.95rem;
  word-break: break-word;
}
.biz-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.business-setup-review {
  display: grid;
  gap: 12px;
}