/* Simora theme tokens (SIM-010 lane A). Generated by build_tokens.py: edit the script, not this file.
   Overrides MagicAI's HSL triplet variables so existing hsl(var(--x)) utilities pick up the SmartCRM-style look.
   Extra tokens use the --s- prefix to avoid clashing with vendor names. */
:root {
	--primary: 215.8 70.5% 35.9%;
	--primary-foreground: 220 60% 99%;
	--secondary: 216.9 41.9% 93.9%;
	--secondary-foreground: 215.7 56.8% 14.5%;
	--accent: 216 55.6% 92.9%;
	--accent-foreground: 215.9 71.9% 25.1%;
	--background: 220 37.5% 96.9%;
	--foreground: 215.7 56.8% 14.5%;
	--border: 216 30.6% 90.4%;
	--heading-background: 220 60% 99%;
	--heading-foreground: 215.7 56.8% 14.5%;
	--input-background: 220 60% 99%;
	--input-foreground: 215.7 56.8% 14.5%;
	--input-border: 217.7 15.6% 55.9%;
	--card-background: 220 60% 99%;
	--card-foreground: 215.7 56.8% 14.5%;
	--card-border: 216 30.6% 90.4%;
	--header-background: 220 60% 99%;
	--header-border: 216 30.6% 90.4%;
	--dropdown-background: 220 60% 99%;
	--dropdown-foreground: 215.7 56.8% 14.5%;
	--dropdown-border: 216 30.6% 90.4%;
	--label: 219 21.3% 36.9%;
	--surface: 216 41.7% 95.3%;
	--surface-background: 220 37.5% 96.9%;
	--clay: 216 41.7% 95.3%;
	--navbar-background: 220 60% 99%;
	--navbar-foreground: 215.7 56.8% 14.5%;
	--navbar-border: 216 30.6% 90.4%;
	--navbar-divider: 216 30.6% 90.4%;
	--navbar-background-hover: 216 41.7% 95.3%;
	--navbar-foreground-hover: 215.7 56.8% 14.5%;
	--navbar-background-active: 215.8 70.5% 35.9%;
	--navbar-foreground-active: 220 60% 99%;
	--button-border: 216 30.6% 90.4%;
	--s-muted: 216 41.7% 95.3%;
	--s-muted-foreground: 219 21.3% 36.9%;
	--s-popover: 220 60% 99%;
	--s-ring: 215.8 70.5% 35.9%;
	--s-input: 217.7 15.6% 55.9%;
	--s-sbl-bg: 220 60% 99%;
	--s-sbl-fg: 215.7 56.8% 14.5%;
	--s-sbl-muted: 219 21.3% 36.9%;
	--s-sbl-border: 216 30.6% 90.4%;
	--s-sbl-hover: 216 41.7% 95.3%;
	--s-sbl-active: 215.8 70.5% 35.9%;
	--s-sbl-active-fg: 220 60% 99%;
	--s-sbl-open: 216 55.6% 92.9%;
	--s-sbl-open-fg: 215.9 71.9% 25.1%;
	--s-sbl-search-bg: 220 37.5% 96.9%;
	--s-sbl-gold-ring: 40.7 70.6% 32%;
	--s-destructive: 350.2 85.2% 42.4%;
	--s-destructive-foreground: 220 60% 99%;
	--s-destructive-text: 350.2 85.2% 42.4%;
	--s-success: 147.6 83.5% 26.1%;
	--s-success-foreground: 220 60% 99%;
	--s-success-text: 147.5 82.9% 25.3%;
	--s-warning: 22.1 80.5% 53.7%;
	--s-warning-foreground: 215.7 56.8% 14.5%;
	--s-warning-text: 22.6 69.6% 37.5%;
	--s-attention: 41 75% 51.4%;
	--s-attention-foreground: 215.7 56.8% 14.5%;
	--s-attention-text: 40.7 70.6% 32%;
	--s-info: 215.8 70.5% 35.9%;
	--s-info-foreground: 220 60% 99%;
	--s-info-text: 215.8 70.5% 35.9%;
	--s-ai: 267.2 43.5% 43.7%;
	--s-ai-foreground: 220 60% 99%;
	--s-ai-text: 267.2 43.5% 43.7%;
	--s-chart-1: 215.8 70.5% 35.9%;
	--s-chart-2: 147.6 83.5% 26.1%;
	--s-chart-3: 40 77.9% 40.8%;
	--s-chart-4: 22.1 80.5% 53.7%;
	--s-chart-5: 267.2 43.5% 43.7%;
	--s-chart-6: 350.2 85.2% 42.4%;
	--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--card-rounded: 14px;
	--button-rounded: 8px;
	--input-rounded: 8px;
	--dropdown-rounded: 8px;
	--navbar-link-rounded: 8px;
	--card-shadow: none;
	--header-height: 56px;
	--navbar-fs: 14px;
	--s-sidebar-width: 256px;
	--s-topbar-height: 56px;
	--s-content-max: 1600px;
	--s-content-pad: 24px;
	--s-content-pad-mobile: 16px;
	--s-nav-item-height: 36px;
	--s-control-height: 36px;
	--s-control-height-sm: 32px;
	--s-bottom-nav-height: 64px;
	--s-fab-size: 48px;
	--s-brand-red: 350.2 85.2% 42.4%;
	--s-brand-green: 147.6 83.5% 26.1%;
	--s-brand-gold: 41 75% 51.4%;
	--s-brand-blue: 215.8 70.5% 35.9%;
	--s-brand-orange: 22.1 80.5% 53.7%;
	--s-brand-purple: 267.2 43.5% 43.7%;
	--s-module-home: var(--s-brand-gold);
	--s-module-command-centre: var(--s-brand-gold);
	--s-module-academy: var(--s-brand-gold);
	--s-module-crm: var(--s-brand-blue);
	--s-module-leads: var(--s-brand-blue);
	--s-module-customers: var(--s-brand-blue);
	--s-module-catalogue: var(--s-brand-blue);
	--s-module-ask-crm: var(--s-brand-purple);
	--s-module-ai-workspace: var(--s-brand-purple);
	--s-module-agents: var(--s-brand-purple);
	--s-module-approved-library: var(--s-brand-purple);
	--s-module-invoices: var(--s-brand-green);
	--s-module-payments: var(--s-brand-green);
	--s-module-lead-to-cash: var(--s-brand-green);
	--s-module-customer-success: var(--s-brand-green);
	--s-module-tasks: var(--s-brand-orange);
	--s-module-work-approvals: var(--s-brand-orange);
	--s-module-unified-inbox: var(--s-brand-orange);
	--s-module-data-privacy: var(--s-brand-red);
	--s-module-admin-security: var(--s-brand-red);
}
.theme-dark {
	--primary: 215.7 39.7% 61%;
	--primary-foreground: 216 60% 9.8%;
	--secondary: 216 49% 20%;
	--secondary-foreground: 217.5 44.4% 96.5%;
	--accent: 216 53.8% 25.5%;
	--accent-foreground: 217.5 44.4% 96.5%;
	--background: 216 60% 9.8%;
	--foreground: 217.5 44.4% 96.5%;
	--border: 215.5 39.2% 24.5%;
	--heading-background: 215.7 56.8% 14.5%;
	--heading-foreground: 217.5 44.4% 96.5%;
	--input-background: 215.7 56.8% 14.5%;
	--input-foreground: 217.5 44.4% 96.5%;
	--input-border: 217 19.5% 52.7%;
	--card-background: 215.7 56.8% 14.5%;
	--card-foreground: 217.5 44.4% 96.5%;
	--card-border: 215.5 39.2% 24.5%;
	--header-background: 215.7 56.8% 14.5%;
	--header-border: 215.5 39.2% 24.5%;
	--dropdown-background: 215.7 56.8% 14.5%;
	--dropdown-foreground: 217.5 44.4% 96.5%;
	--dropdown-border: 215.5 39.2% 24.5%;
	--label: 216 23.5% 70.8%;
	--surface: 216 49% 20%;
	--surface-background: 216 60% 9.8%;
	--clay: 216 49% 20%;
	--navbar-background: 215.7 56.8% 14.5%;
	--navbar-foreground: 217.5 44.4% 96.5%;
	--navbar-border: 215.5 39.2% 24.5%;
	--navbar-divider: 215.5 39.2% 24.5%;
	--navbar-background-hover: 216 49% 20%;
	--navbar-foreground-hover: 217.5 44.4% 96.5%;
	--navbar-background-active: 215.7 39.7% 61%;
	--navbar-foreground-active: 216 60% 9.8%;
	--button-border: 215.5 39.2% 24.5%;
	--s-muted: 216 49% 20%;
	--s-muted-foreground: 216 23.5% 70.8%;
	--s-popover: 215.7 56.8% 14.5%;
	--s-ring: 215.7 39.7% 61%;
	--s-input: 217 19.5% 52.7%;
	--s-sbl-bg: 215.7 56.8% 14.5%;
	--s-sbl-fg: 217.5 44.4% 96.5%;
	--s-sbl-muted: 216 23.5% 70.8%;
	--s-sbl-border: 215.5 39.2% 24.5%;
	--s-sbl-hover: 216 49% 20%;
	--s-sbl-active: 215.7 39.7% 61%;
	--s-sbl-active-fg: 216 60% 9.8%;
	--s-sbl-open: 216 53.8% 25.5%;
	--s-sbl-open-fg: 217.5 44.4% 96.5%;
	--s-sbl-search-bg: 216 60% 9.8%;
	--s-sbl-gold-ring: 41 75% 51.4%;
	--s-destructive: 350.2 85.2% 42.4%;
	--s-destructive-foreground: 220 60% 99%;
	--s-destructive-text: 350.5 62.6% 64.3%;
	--s-success: 147.6 83.5% 26.1%;
	--s-success-foreground: 220 60% 99%;
	--s-success-text: 147.6 29.9% 49.8%;
	--s-warning: 22.1 80.5% 53.7%;
	--s-warning-foreground: 215.7 56.8% 14.5%;
	--s-warning-text: 22.2 80.5% 57.8%;
	--s-attention: 41 75% 51.4%;
	--s-attention-foreground: 215.7 56.8% 14.5%;
	--s-attention-text: 41 75% 51.4%;
	--s-info: 215.8 70.5% 35.9%;
	--s-info-foreground: 220 60% 99%;
	--s-info-text: 215.7 39.7% 61%;
	--s-ai: 267.2 43.5% 43.7%;
	--s-ai-foreground: 220 60% 99%;
	--s-ai-text: 267.5 33.7% 64.5%;
	--s-chart-1: 215.7 39.7% 61%;
	--s-chart-2: 147.6 29.9% 49.8%;
	--s-chart-3: 41 75% 51.4%;
	--s-chart-4: 22.2 80.5% 57.8%;
	--s-chart-5: 267.5 33.7% 64.5%;
	--s-chart-6: 350.5 62.6% 64.3%;
}
/* Sidebar style: LIGHT is the default (:root above, --s-sbl-*). Navy option: class .simora-sidebar-navy on <body> (per-user setting). */
.simora-sidebar-navy {
	--navbar-background: 215.7 56.8% 14.5%;
	--navbar-foreground: 216 42.9% 93.1%;
	--navbar-border: 215.7 56.8% 14.5%;
	--navbar-divider: 215.1 27.2% 70.4%;
	--navbar-background-hover: 41 75% 51.4%;
	--navbar-foreground-hover: 215.7 56.8% 14.5%;
	--navbar-background-active: 41 75% 51.4%;
	--navbar-foreground-active: 215.7 56.8% 14.5%;
	--s-sidebar: 215.7 56.8% 14.5%;
	--s-sidebar-foreground: 216 42.9% 93.1%;
	--s-sidebar-muted: 215.1 27.2% 70.4%;
	--s-sidebar-active: 41 75% 51.4%;
	--s-sidebar-active-foreground: 215.7 56.8% 14.5%;
}
.theme-dark.simora-sidebar-navy, .theme-dark .simora-sidebar-navy {
	--navbar-background: 216 60% 9.8%;
	--navbar-foreground: 216 42.9% 93.1%;
	--navbar-border: 216 60% 9.8%;
	--navbar-divider: 215.1 27.2% 70.4%;
	--navbar-background-hover: 41 75% 51.4%;
	--navbar-foreground-hover: 215.7 56.8% 14.5%;
	--navbar-background-active: 41 75% 51.4%;
	--navbar-foreground-active: 215.7 56.8% 14.5%;
	--s-sidebar: 216 60% 9.8%;
	--s-sidebar-foreground: 216 42.9% 93.1%;
	--s-sidebar-muted: 215.1 27.2% 70.4%;
	--s-sidebar-active: 41 75% 51.4%;
	--s-sidebar-active-foreground: 215.7 56.8% 14.5%;
}

/* Generated product tokens; edit scripts/wa3/build_brand.py. */
:root {
  --l9-canvas: #f4f6fa;
  --l9-surface: #fbfcfe;
  --l9-ink: #10213a;
  --l9-muted: #eef2f8;
  --l9-muted-ink: #4a5872;
  --l9-hairline: #dfe5ee;
  --l9-control: #7d8aa0;
  --l9-blue: #1b4f9c;
  --l9-blue-ink: #fbfcfe;
  --l9-blue-tint: #e3ebf7;
  --l9-blue-deep: #12376e;
  --l9-green: #0b7a3e;
  --l9-green-text: #0b763c;
  --l9-gold: #e0a526;
  --l9-gold-text: #8b6618;
  --l9-red: #c8102e;
  --l9-red-ink: #fbfcfe;
  --l9-orange: #e8702a;
  --l9-purple: #6b3fa0;
  --l9-wa-green: #25D366;
  --l9-wa-teal: #128C7E;
  --l9-wa-dark: #075E54;
  --l9-wa-out: #D9FDD3;
  --l9-wa-in: #FBFCFE;
  --l9-wa-chat: #EFEAE2;
  --l9-wa-tint: #DDF6E9;
  --l9-wa-text: #10213A;
  --l9-wa-meta: #4A5872;
  --l9-wa-on-dark: #FBFCFE;
  --l9-wa-connected-text: #075E54;
  --l9-brand-ink: #10213A;
  --l9-navy: #10213A;
  --l9-navy-text: #F2F5FA;
}
html[data-theme="dark"], html.theme-dark {
  --l9-canvas: #0a1628;
  --l9-surface: #10213a;
  --l9-ink: #f2f5fa;
  --l9-muted: #1a2e4c;
  --l9-muted-ink: #a3b1c6;
  --l9-hairline: #263a57;
  --l9-control: #6f819e;
  --l9-blue: #7494c3;
  --l9-blue-ink: #0a1628;
  --l9-blue-tint: #1e3a64;
  --l9-blue-deep: #f2f5fa;
  --l9-green: #0b7a3e;
  --l9-green-text: #59a57c;
  --l9-gold: #e0a526;
  --l9-gold-text: #e0a526;
  --l9-red: #c8102e;
  --l9-red-ink: #fbfcfe;
  --l9-orange: #e8702a;
  --l9-purple: #6b3fa0;
  --l9-wa-green: #25D366;
  --l9-wa-teal: #128C7E;
  --l9-wa-dark: #075E54;
  --l9-wa-out: #005C4B;
  --l9-wa-in: #202C33;
  --l9-wa-chat: #0B141A;
  --l9-wa-tint: #005C4B;
  --l9-wa-text: #E9EDEF;
  --l9-wa-meta: #E9EDEF;
  --l9-wa-on-dark: #FBFCFE;
  --l9-wa-connected-text: #E9EDEF;
  --l9-brand-ink: #10213A;
  --l9-navy: #10213A;
  --l9-navy-text: #F2F5FA;
}
/* Hallmark product register: preserve native tasks; Level 9 shell, WhatsApp chat.
   Authored layer. Tokens above are generated; do not edit generated CSS. */
html:root {
  --color-paper-0: var(--l9-surface) !important;
  --color-paper-50: var(--l9-canvas) !important;
  --color-paper-100: var(--l9-muted) !important;
  --color-paper-200: var(--l9-hairline) !important;
  --color-paper-300: var(--l9-control) !important;
  --color-ink-300: var(--l9-control) !important;
  --color-ink-400: var(--l9-muted-ink) !important;
  --color-ink-500: var(--l9-muted-ink) !important;
  --color-ink-600: var(--l9-muted-ink) !important;
  --color-ink-700: var(--l9-ink) !important;
  --color-ink-800: var(--l9-ink) !important;
  --color-ink-900: var(--l9-ink) !important;
  --color-wa-deep: var(--l9-blue) !important;
  --color-wa-teal: var(--l9-blue-deep) !important;
  --color-wa-green: var(--l9-green) !important;
  --color-wa-mint: var(--l9-blue-tint) !important;
  --color-wa-bubble: var(--l9-blue-tint) !important;
  --color-wa-chat: var(--l9-canvas) !important;
  --wa-brand-text: var(--l9-blue) !important;
  --wa-brand-bg: var(--l9-blue) !important;
  --wa-brand-border: var(--l9-blue) !important;
  --wa-teal-text: var(--l9-blue-deep) !important;
  --font-sans: var(--font-body) !important;
  --font-serif: var(--font-body) !important;
}
html, body { overflow-x: clip; }
body { background: var(--l9-canvas); color: var(--l9-ink); font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6,h1 .italic,h2 .italic { font-style: normal !important; text-transform: capitalize; }
h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: 16px; line-height: 20px; font-weight: 600; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea { border-color: var(--l9-control) !important; border-radius: 8px; color: var(--l9-ink); }
button:not(.rounded-full), input, select, textarea { font-family: var(--font-body); }
:where(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--l9-blue); outline-offset: 2px; }
button:disabled, [aria-disabled=true] { cursor: not-allowed; }
button, a { -webkit-tap-highlight-color: transparent; }
table, [data-totals] { font-variant-numeric: tabular-nums; }
[data-totals] { color: var(--l9-ink) !important; }
img[src*="/branding/level9/level9-full-colour.svg"] { object-fit: contain; min-height: 24px; }
html[data-theme=dark] img[src*="/branding/level9/level9-full-colour.svg"], html.theme-dark img[src*="/branding/level9/level9-full-colour.svg"] { content: url('/branding/level9/level9-white.svg'); }
.level9-inbox-mark { width: 28px; height: 28px; flex: none; display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
/* Shell colours never inherit the WhatsApp accent. */
html body #user-rail { --rbg: var(--l9-surface) !important; --rfg: var(--l9-ink) !important; --rfgs: var(--l9-ink) !important; --rfgm: var(--l9-muted-ink) !important; --rcap: var(--l9-muted-ink) !important; --rhover: var(--l9-muted) !important; background: var(--l9-surface) !important; color: var(--l9-ink) !important; }
html #user-rail .rail-link.active { background: var(--l9-blue) !important; color: var(--l9-blue-ink) !important; }
html #user-rail .rail-link.active::before { content: none !important; }
html body #user-rail .rail-link { min-height: 36px; border-radius: 8px; font-size: 14px; }
html body #user-rail .rail-cap { font-family: var(--font-body); letter-spacing: .05em; font-size: 11px; }
html body.simora-sidebar-navy #user-rail { --rbg: var(--l9-navy) !important; --rfg: var(--l9-navy-text) !important; --rfgs: var(--l9-navy-text) !important; --rfgm: var(--l9-navy-text) !important; --rcap: var(--l9-navy-text) !important; background: var(--l9-navy) !important; color: var(--l9-navy-text) !important; }
html body.simora-sidebar-navy #user-rail .rail-link.active { background: var(--l9-gold) !important; color: var(--l9-brand-ink) !important; }
html body.simora-sidebar-navy #user-rail img { content: url('/branding/level9/level9-white.svg'); }
html body .ti-rail-omni { background: var(--l9-surface) !important; color: var(--l9-ink) !important; border-inline-end: 1px solid var(--l9-hairline); }
html body .ti-rl-btn { color: var(--l9-muted-ink) !important; }
html body .ti-rl-btn.active, html body .team-nav-btn.active { background: var(--l9-blue) !important; color: var(--l9-blue-ink) !important; }
html body .ti-rl-logo { background: var(--l9-surface) url('/branding/level9/favicon.svg') center / 32px 32px no-repeat !important; color: transparent !important; }
html body .ti-rl-logo svg { visibility: hidden; }
/* WhatsApp accent set is restricted to conversation and device surfaces. */
html body #tc-stream, html body #thread, html body .chat-paper { background-color: var(--l9-wa-chat) !important; background-image: radial-gradient(color-mix(in srgb, var(--l9-wa-dark) 9%, transparent) 1px, transparent 1px); background-size: 24px 24px; color: var(--l9-wa-text) !important; }
html body #tc-frame > main > div:first-child, html body #th-header { background: var(--l9-wa-dark) !important; color: var(--l9-wa-on-dark) !important; }
html body #tc-frame > main > div:first-child :is(.text-ink-500,.text-ink-600,.text-ink-700,.text-wa-deep), html body #th-header :is(.text-ink-500,.text-ink-600,.text-ink-700,.text-wa-deep) { color: var(--l9-wa-on-dark) !important; }
html body #tc-channel-type { background: var(--l9-wa-green) !important; color: var(--l9-brand-ink) !important; border: 1px solid var(--l9-wa-dark); }
html body #tc-send, html body #send-btn { background: var(--l9-wa-green) !important; color: var(--l9-brand-ink) !important; border: 1px solid var(--l9-wa-dark) !important; border-radius: 8px; min-height: 36px; }
html body :is(#tc-send,#send-btn):hover { background: var(--l9-wa-tint) !important; color: var(--l9-ink) !important; outline:1px solid var(--l9-blue); }
html body :is(#tc-stream,#thread) .bg-wa-mint, html body :is(#tc-stream,#thread) .bg-wa-bubble { background: var(--l9-wa-out) !important; color: var(--l9-wa-text) !important; }
html body :is(#tc-stream,#thread) .bg-wa-mint :is(.text-ink-500,.text-ink-400,.text-wa-deep), html body :is(#tc-stream,#thread) .bg-wa-bubble :is(.text-ink-500,.text-ink-400,.text-wa-deep) { color: var(--l9-wa-meta) !important; }
html body :is(#tc-stream,#thread) .bg-paper-0 { background: var(--l9-wa-in) !important; color: var(--l9-wa-text) !important; }
html body[data-page*="devices"] .bg-wa-green, html body [data-page*="devices"] .bg-wa-green { background: var(--l9-wa-green) !important; color: var(--l9-brand-ink) !important; outline: 2px solid var(--l9-wa-dark); }
@media(max-width:639px) { h1 { font-size:20px; line-height:28px; } #tc-send, #send-btn { min-width:44px; min-height:44px; } .level9-inbox-mark { width:24px; height:24px; margin-inline-end:6px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
/* Chat header controls keep explicit foregrounds on their own light surfaces. */
html body #tc-frame > main > div:first-child a { background: var(--l9-surface) !important; color: var(--l9-ink) !important; border-color: var(--l9-control) !important; }
html body #tc-frame > main > div:first-child button:focus-visible { outline-color: var(--l9-wa-green); }
html body #tc-members-list .rounded-full { background: var(--l9-blue-tint) !important; color: var(--l9-blue-deep) !important; }
html body[data-page=auth-login] .blob { display: none; }
html body[data-page=auth-login] [class*="backdrop-blur"] { backdrop-filter: none; }
/* Prepared QR presentation, activated only by the separate post-pairing hook. */
html body.level9-test-qr { background: var(--l9-canvas); color: var(--l9-ink); font-family: var(--font-body); }
html body.level9-test-qr main { background: var(--l9-surface); border-color: var(--l9-hairline); }
html body.level9-test-qr #qr { border: 4px solid var(--l9-wa-green); outline: 1px solid var(--l9-wa-dark); border-radius: 14px; padding: 12px; }
html body.level9-test-qr #refresh { background: var(--l9-wa-green); color: var(--l9-brand-ink); border: 1px solid var(--l9-wa-dark); min-height:44px; }
/* Brand-led sign-in; no unverified volume, uptime or ratings claims. */
html body[data-page=auth-login] .auth-art { background: var(--l9-navy) !important; color: var(--l9-navy-text); }
html body[data-page=auth-login] .auth-art > div:not(.level9-auth-intro), html body[data-page=auth-login] .auth-art > video, html body[data-page=auth-login] .auth-art > img { display: none !important; }
.level9-auth-intro { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:100%; max-width:560px; padding:24px; gap:24px; }
.level9-auth-intro img { width:164px; height:auto; margin-bottom:24px; }
.level9-auth-intro h1 { font-size:42px; line-height:1.12; letter-spacing:-.025em; color:var(--l9-navy-text); }
.level9-auth-intro p { color:var(--l9-navy-text); font-size:16px; line-height:1.6; max-width:44ch; }
.level9-auth-intro .level9-auth-product { color:var(--l9-navy-text); font-size:14px; letter-spacing:.05em; margin:0; }
html body[data-page=auth-login] main { background:var(--l9-surface); }
html body[data-page=auth-login] main a.lg\:hidden { display:inline-flex !important; }
html body[data-page=auth-login] main a.lg\:hidden img { height:36px; width:auto; }
html body[data-page=auth-login] main h1 { text-transform:capitalize; }
/* Long sign-in content can scroll; preserve visible space above consent. */
@media(max-width:1023px) {
  html body[data-page=auth-login] .grid.h-screen { height:auto !important; min-height:100dvh; overflow:visible !important; }
  html body[data-page=auth-login] main { min-height:100dvh; }
  html body[data-page=auth-login]:has(#wa-cookie-bar:not(.hidden)) main {
    padding-bottom:calc(40px + 180px + env(safe-area-inset-bottom));
  }
}
/* Team chat shares a full-viewport inbox grid but also has the app header. */
html body { font-size:14px; line-height:20px; }
html body > header { height:56px; box-sizing:border-box; }
html body > header > .h-16 { height:100%; }
html body[data-page=user-team-chat] #tc-frame { height:calc(100dvh - 56px) !important; }
/* Native dark-mode utilities consume the same brand surface/text roles. */
html:root body .bg-paper-0 { background-color:var(--l9-surface) !important; }
html:root body .bg-paper-50 { background-color:var(--l9-canvas) !important; }
html:root body :is(.text-ink-400,.text-ink-500,.text-ink-600) { color:var(--l9-muted-ink) !important; }
html:root body :is(.text-ink-700,.text-ink-800,.text-ink-900) { color:var(--l9-ink) !important; }
html:root body .text-paper-0 { color:var(--l9-blue-ink) !important; }
/* Component state colours must win over generic text/background utilities. */
html:root body [data-status="connected"], html:root body .pill-connected { background: var(--l9-wa-tint) !important; color: var(--l9-wa-connected-text) !important; border: 1px solid var(--l9-wa-connected-text); }
/* Both existing conversation rails default light; navy is an optional style. */
html body.simora-sidebar-navy #tc-frame > aside:first-child, html body.simora-sidebar-navy .ti-rail-omni { background:var(--l9-navy) !important; color:var(--l9-navy-text) !important; }
html body.simora-sidebar-navy :is(#tc-frame > aside:first-child,.ti-rail-omni) :is(.team-nav-btn,.ti-rl-btn,.text-ink-500,.text-ink-700,.text-ink-900) { color:var(--l9-navy-text) !important; }
html body.simora-sidebar-navy :is(#tc-frame > aside:first-child,.ti-rail-omni) :is(.team-nav-btn.active,.ti-rl-btn.active) { background:var(--l9-gold) !important; color:var(--l9-brand-ink) !important; }
/* Preserve the consent choice while keeping chat controls above its banner. */
html body:has(#wa-cookie-bar:not(.hidden)) #ti-frame { height:calc(100dvh - 112px) !important; }
html body[data-page=user-team-chat]:has(#wa-cookie-bar:not(.hidden)) #tc-frame { height:calc(100dvh - 56px - 112px) !important; }
@media(max-width:639px) {
  html body:has(#wa-cookie-bar:not(.hidden)) #ti-frame { height:calc(100dvh - 180px) !important; }
  html body[data-page=user-team-chat]:has(#wa-cookie-bar:not(.hidden)) #tc-frame { height:calc(100dvh - 56px - 180px) !important; }
}
/* WA2 owns notification disclosure behavior; this layer changes presentation only. */
html:root body .font-serif .italic { font-style:normal !important; }
html body[data-page=user-notifications-index] .font-serif { text-transform:capitalize; }
html body[data-page=user-notifications-index] .notif .unread-dot { display:none; }
html body[data-page=user-notifications-index] .notif[data-unread="1"] { background:var(--l9-blue-tint); outline:1px solid var(--l9-blue); outline-offset:-1px; }
html body[data-page=user-notifications-index] [data-stat] { color:var(--l9-ink) !important; }
/* Volume against an average is informational, not a good/bad judgement. */
html body[data-page=user-notifications-index] span:has(> [data-stat=todayDelta]),
html body[data-page=user-notifications-index] [data-stat=todayDelta] { color:var(--l9-muted-ink) !important; }
/* Preserve complete values and translated labels inside the prepared KPI cards. */
html body[data-page=user-notifications-index] [data-notif-metrics] > div {
  min-width:0;
}
html body[data-page=user-notifications-index] [data-notif-metrics] > div > div {
  flex-wrap:wrap; gap:.5rem; min-width:0;
}
html body[data-page=user-notifications-index] [data-notif-metrics] > div > div > span {
  min-width:0; max-width:100%; overflow-wrap:anywhere;
}
/* Category icons communicate their role without arbitrary vendor palette values. */
html body[data-page=user-notifications-index] .notif > span.rounded-xl {
  background:var(--l9-blue-tint) !important; color:var(--l9-blue-deep) !important;
}
html body[data-page=user-notifications-index] :is(.notif[data-cat=system],.notif[data-cat=billing]) > span.rounded-xl {
  background:color-mix(in srgb, var(--l9-gold) 14%, var(--l9-surface)) !important;
  color:var(--l9-gold-text) !important;
}
h1,h2,h3 { min-width:0; overflow-wrap:anywhere; }
/* Analytics counts carry no good/bad judgement; keep their surfaces neutral. */
html body[data-page=user-analytics-index] .stat {
  background:var(--l9-surface) !important; color:var(--l9-ink); box-shadow:none;
}
html body[data-page=user-analytics-index] .stat::before { content:none !important; }
html body[data-page=user-analytics-index] .stat-icon {
  background:var(--l9-blue-tint) !important; color:var(--l9-blue-deep) !important;
}
html body[data-page=user-analytics-index] .stat-icon svg { stroke:currentColor; }
html body[data-page=user-analytics-index] .stat-value {
  color:var(--l9-ink); font-size:24px; line-height:32px; font-weight:700;
}
html body[data-page=user-analytics-index] .lg\:col-span-5.bg-wa-deep {
  background:var(--l9-surface) !important; color:var(--l9-ink) !important;
  border:1px solid var(--l9-hairline); box-shadow:none;
}
html body[data-page=user-analytics-index] .lg\:col-span-5.bg-wa-deep > .absolute { display:none; }
html body[data-page=user-analytics-index] .lg\:col-span-5.bg-wa-deep [class*="text-paper-0"] { color:var(--l9-ink) !important; }
html body[data-page=user-analytics-index] :is(h1 .text-wa-deep,.lg\:col-span-5 .tabular-nums) { color:var(--l9-ink) !important; }
@media(max-width:639px) { html body #tc-send, html body #send-btn { min-height:44px; min-width:44px; } }
@media(max-width:639px) {
  html body button:not([role=switch]), html body a[role=button] { min-width:44px; min-height:44px; }
  html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]), html body select, html body textarea { min-height:44px; }
}
/* Illustrative chat previews use the chat palette; the surrounding form stays blue. */
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) :is(.bg-wa-deep,.bg-wa-teal) { background:var(--l9-wa-dark) !important; color:var(--l9-wa-on-dark) !important; }
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) :is(.bg-wa-deep,.bg-wa-teal) [class*="text-paper-0"] { color:var(--l9-wa-on-dark) !important; }
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) .bg-wa-chat { background-color:var(--l9-wa-chat) !important; color:var(--l9-wa-text) !important; }
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) .bg-wa-mint { background:var(--l9-wa-out) !important; color:var(--l9-wa-text) !important; }
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) .bg-paper-0 { background:var(--l9-wa-in) !important; color:var(--l9-wa-text) !important; }
html body:is([data-page=user-auto-reply-create],[data-page=user-scheduled-create]) aside:has(#pp-body) :is(.bg-wa-mint,.bg-paper-0) :is(.text-ink-500,.text-ink-400) { color:var(--l9-wa-meta) !important; }
/* Selected contacts tabs stay brand blue with a legible label and plain count. */
html body[data-page=user-contacts-index] .top-tab.filter-tab.active { background:var(--l9-blue) !important; color:var(--l9-blue-ink) !important; }
html body[data-page=user-contacts-index] .top-tab.filter-tab.active .font-mono { color:inherit !important; opacity:1 !important; }
/* Contact actions are outside the chat palette; side-tab styling stays separate. */
html body[data-page=user-contacts-index] button.bg-wa-deep:not(.side-tab) { background:var(--l9-blue) !important; color:var(--l9-blue-ink) !important; }
/* Destructive contact actions use the canonical red pair and a visible edge. */
html body[data-page=user-contacts-index] button.bg-accent-coral { background:var(--l9-red) !important; color:var(--l9-red-ink) !important; border:1px solid var(--l9-control) !important; }
/* Selected chat navigation keeps the canonical foreground in dark mode too. */
html body[data-page=user-team-chat]:not(.simora-sidebar-navy) #tc-frame .team-nav-btn.active { color:var(--l9-blue-ink) !important; }
/* On phones, keep all store links in a compact rail above the product list. */
@media(max-width:639px) {
  html body[data-page=user-store-products-index] aside[data-keep-rail] > nav { display:flex; align-items:center; gap:.25rem; max-width:100%; overflow-x:auto; }
  html body[data-page=user-store-products-index] aside[data-keep-rail] > nav > :is(a,div) { flex:0 0 auto; margin-block:0; white-space:nowrap; }
  html body[data-page=user-store-products-index] aside[data-keep-rail] > nav > a { width:auto; min-height:44px; }
  html body[data-page=user-store-products-index] aside[data-keep-rail] > nav > div.font-mono { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0; }
}
/* On phones, show the Forms list before its informational help rail. */
@media(max-width:639px) {
  html body[data-page=user-wa-forms-index] main > .grid > section { grid-row:1; }
  html body[data-page=user-wa-forms-index] main > .grid > aside { grid-row:2; }
  html body[data-page=user-wa-forms-index] main > .grid > section > div:first-child { flex-direction:column; align-items:flex-start; }
  html body[data-page=user-wa-forms-index] main > .grid > section a[href$="/create"] { min-height:44px; white-space:nowrap; }
}
/* Login placeholders use the same readable muted foreground as supporting text. */
html body[data-page=auth-login] input:is([type=email],[type=password])::placeholder { color:var(--l9-muted-ink); opacity:1; }
/* Forms summary values are factual counts, without a semantic judgment. */
html body[data-page=user-wa-forms-index] main > .grid > section > .grid > div > div.mt-2.font-serif { color:var(--l9-ink) !important; }

/* Light inbox actions own their foreground instead of inheriting the dark header. */
html body #th-header :is(#assign-btn,#ai-agent-btn,#snooze-btn,#create-deal-btn) { color: var(--l9-ink) !important; }

/* Selected sidebar counts share the readable label foreground. */
html body[data-page=user-contacts-index] .side-tab.bg-wa-deep .font-mono { color:inherit !important; }

/* Catalogue Edit links keep a full phone target beside Share and Delete. */
@media(max-width:639px) {
  html body[data-page=user-store-products-index] tbody td:last-child > a[href$="/edit"] { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; vertical-align:middle; }
}

/* Booking create links keep phone targets and avoid wrapped action labels. */
@media(max-width:639px) {
  html body[data-page=user-booking-types-index] main > div:first-child > div:last-child { flex-wrap:wrap; }
  html body[data-page=user-booking-types-index] main > div:first-child > div:last-child > a,
  html body[data-page=user-booking-types-index] main a[href$="/booking-types/create"] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; white-space:nowrap; }
}

/* Phone contact and group tasks precede their informational rail. */
@media(max-width:639px) {
  html body[data-page=user-contacts-index] main > .grid > section { grid-row:1; }
  html body[data-page=user-contacts-index] main > .grid > aside { grid-row:2; }
}

/* Ordinary contact counts carry no success or warning judgement. */
html body[data-page=user-contacts-index] main > .grid > section > .grid.grid-cols-2[class~="lg:grid-cols-4"] > div {
  background:var(--l9-surface) !important;
  border-color:var(--l9-hairline) !important;
}

/* Keep the phone response label, status and duration from crowding each other. */
@media(max-width:639px) {
  html body[data-page=user-message-history-index] main > section:first-of-type > div:last-child > div { flex-wrap:wrap; gap:.25rem .5rem; }
  html body[data-page=user-message-history-index] main > section:first-of-type > div:last-child > div > span:first-child { white-space:nowrap; }
}

/* Keep the total label distinct from its period comparison at either width. */
html body[data-page=user-message-history-index] main > section:first-of-type > div:first-child > div:first-child { flex-wrap:wrap; gap:.25rem .5rem; }
html body[data-page=user-message-history-index] main > section:first-of-type > div:first-child > div:first-child > span:first-child { white-space:nowrap; }

/* Leave room for the Groups tile focus ring when keyboard navigation scrolls. */
html body[data-page=user-contacts-index] #groupsPanel [data-new-group] { scroll-margin-block:8px; }

/* Contact navigation and import guidance use the shared neutral surface. */
html body[data-page=user-contacts-index] main > .grid > aside > .card.bg-white { background-color:var(--l9-surface) !important; }

/* The Contacts filter toolbar and list share the same neutral panel surface. */
html body[data-page=user-contacts-index] main > .grid > section > .card.bg-white { background-color:var(--l9-surface) !important; }

/* Reuse the member-avatar palette so Contacts initials stay readable. */
html body[data-page=user-contacts-index] #contactsPanel [data-contact-row] .avatar { background:var(--l9-blue-tint) !important; color:var(--l9-blue-deep) !important; }

/* The assign menu sits inside the dark chat header; give its light panel the ink foreground instead of the inherited on-dark colour. */
html body #th-header #assign-menu, html body #th-header #assign-menu :is(.menu-item:not(.text-accent-coral), .text-ink-500) { color: var(--l9-ink) !important; }