@charset "UTF-8";

/* LUX CRM themes. Layout and responsive behavior remain in app.css. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f1f6ff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #edf4ff;
  --surface-hover: #e5efff;
  --surface-selected: #e3eeff;
  --line: #bfd2f3;
  --line-strong: #93b7f3;
  --line-hover: #5489e8;
  --text: #13284b;
  --muted: #4e6587;
  --faint: #607697;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-text: #ffffff;
  --accent-soft: #e6efff;
  --accent-text: #1d4ed8;
  --nav: #ffffff;
  --nav-text: #3e5679;
  --topbar: #ffffff;
  --outgoing: #e4efff;
  --outgoing-line: #91b5f1;
  --success-bg: #e9f7ef;
  --success-line: #9fd0b3;
  --success-text: #216044;
  --success-dot: #2c8b5f;
  --warning-bg: #fff5df;
  --warning-line: #dfc18b;
  --warning-text: #875a0b;
  --danger-bg: #fff0ee;
  --danger-line: #e2aaa3;
  --danger-text: #a43131;
  --danger: #a43131;
  --green: #216044;
  --warm: #875a0b;
  --neutral-dot: #6d84a8;
  --overlay: rgba(17, 36, 70, .48);
  --panel-shadow: 0 4px 18px rgba(28, 74, 145, .035);
  --floating-shadow: 0 24px 80px rgba(17, 49, 108, .18);
  --focus-ring: rgba(37, 99, 235, .22);
  --ink: var(--text);
  --white: var(--surface);
  --border: var(--line);
  --radius: 20px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #070b14;
  --surface: #101827;
  --surface-raised: #131e32;
  --surface-soft: #111f36;
  --surface-hover: #172a46;
  --surface-selected: #172f54;
  --line: #284979;
  --line-strong: #355e99;
  --line-hover: #5a91e6;
  --text: #e8f0ff;
  --muted: #a5b7d3;
  --faint: #91a8ca;
  --accent: #4f8cff;
  --accent-hover: #79a9ff;
  --primary: #2866db;
  --primary-hover: #3979ed;
  --primary-text: #ffffff;
  --accent-soft: #172d50;
  --accent-text: #9bc2ff;
  --nav: #0a1120;
  --nav-text: #b5c8e6;
  --topbar: #0c1423;
  --outgoing: #172f54;
  --outgoing-line: #3d6aab;
  --success-bg: #112e29;
  --success-line: #2c6651;
  --success-text: #94dbb7;
  --success-dot: #6bca9a;
  --warning-bg: #322817;
  --warning-line: #72542e;
  --warning-text: #efc77c;
  --danger-bg: #341c25;
  --danger-line: #8b4653;
  --danger-text: #ffa8aa;
  --danger: #ffa8aa;
  --green: #94dbb7;
  --warm: #efc77c;
  --neutral-dot: #8aa4ca;
  --overlay: rgba(0, 5, 15, .74);
  --panel-shadow: 0 4px 18px rgba(0, 0, 0, .14);
  --floating-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  --focus-ring: rgba(79, 140, 255, .28);
}

html, :root body { background: var(--canvas); color: var(--text); }
:root body { font-size: 14px; line-height: 1.5; }
:root :is(h1, h2, h3, strong) { color: var(--text); }
:root h1 { letter-spacing: -.85px; }
:root h2 { font-size: 18px; line-height: 1.4; }
:root h3 { font-size: 15px; }
:root :is(.app-shell, .main-content, .inbox-main) { background: var(--canvas); }
:root :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-ring);
}
:root a { text-underline-offset: 3px; }
:root ::selection { color: var(--primary-text); background: var(--primary); }
:root .skip-link { color: var(--accent-text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
:root :is(.muted, .eyebrow, .heading-count, .top-date, .back-link) { color: var(--muted); }
:root .eyebrow { font-size: 11px; letter-spacing: 1.35px; }
:root .page-heading p { font-size: 14px; color: var(--muted); }
:root .text-link { color: var(--accent); font-size: 13px; line-height: 1.6; }
:root .icon-button { color: var(--muted); border-radius: 12px; }
:root .icon-button:hover { color: var(--accent-text); background: var(--surface-hover); }
:root .button {
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface);
  color: var(--accent-text);
  font-size: 14px;
  min-height: 43px;
  box-shadow: 0 2px 4px rgba(22, 65, 133, .025);
}
:root .button:hover { color: var(--accent-text); background: var(--surface-hover); border-color: var(--line-hover); }
:root .button.primary { color: var(--primary-text); background: var(--primary); border-color: var(--primary); box-shadow: 0 3px 8px var(--focus-ring); }
:root .button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
:root .button.small { min-height: 37px; font-size: 12px; border-radius: 11px; }
:root .badge { font-size: 11px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface-soft); }
:root .badge-blue { color: var(--accent-text); background: var(--accent-soft); border-color: var(--line-strong); }
:root :is(.badge-green, .flash) { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
:root :is(.badge-warm, .priority-tag, .demo-badge, .flash.warning) { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
:root .demo-badge { border-radius: 10px; font-size: 11px; padding: 7px 10px; }
:root .demo-badge>span { background: var(--warning-text); }
:root .priority-tag { border: 1px solid var(--warning-line); border-radius: 8px; font-size: 11px; padding: 4px 7px; }
:root :is(.avatar, .avatar-blue, .avatar-dark) { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--line); border-radius: 13px; }
:root .avatar-sand { color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-line); }
:root :is(.small-avatar, .tiny-avatar) { border-radius: 10px; }
:root .status-dot { background: var(--neutral-dot); }
:root :is(.live-dot, .status-dot.success) { background: var(--success-dot); box-shadow: none; }

/* The light workspace is white throughout, including its navigation. */
:root .sidebar { background: var(--nav); color: var(--nav-text); border-right: 1px solid var(--line-strong); }
:root .brand { color: var(--text); }
:root .brand b { color: var(--accent); opacity: 1; font-weight: 500; }
:root .brand small { color: var(--muted); opacity: 1; font-size: 10px; letter-spacing: 1.75px; }
:root .brand-mark { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line-strong); border-radius: 11px; }
:root .brand-mark>span { color: var(--accent); }
:root .workspace-label { color: var(--muted); font-size: 10px; letter-spacing: 1.05px; }
:root .main-nav>a { color: var(--nav-text); font-size: 14px; min-height: 47px; border: 1px solid transparent; border-radius: 13px; }
:root .main-nav>a:hover { color: var(--accent-text); background: var(--surface-soft); border-color: var(--line); }
:root .main-nav>a.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--line-strong); font-weight: 600; }
:root .main-nav>a.active:before { background: var(--accent); border-radius: 0 4px 4px 0; }
:root .main-nav>a.active .icon { color: var(--accent); opacity: 1; }
:root .nav-count { color: var(--primary-text); background: var(--primary); font-size: 11px; min-width: 21px; height: 22px; line-height: 18px; border-radius: 7px; }
:root .sidebar-note { color: var(--text); font-size: 12px; }
:root .sidebar-note small { color: var(--muted); font-size: 11px; }
:root .profile { border-color: var(--line); }
:root .profile strong { color: var(--text); font-size: 12px; }
:root .profile small { color: var(--muted); font-size: 11px; }
:root .profile .icon-button { color: var(--muted); }
:root .profile .icon-button:hover { color: var(--accent); background: var(--accent-soft); }
:root .topbar { background: var(--topbar); border-color: var(--line); gap: 18px; }
:root .breadcrumb { color: var(--muted); font-size: 12px; }
:root .breadcrumb>span { color: var(--line-hover); }
:root .breadcrumb strong { color: var(--text); }
:root .global-search { color: var(--muted); min-width: 185px; }
:root .global-search input { color: var(--text); background: transparent; font-size: 12px; border-radius: 10px; }
:root .global-search input::placeholder { color: var(--muted); }
:root .global-search kbd { color: var(--muted); background: var(--surface-soft); border-color: var(--line); border-radius: 6px; font-size: 10px; }
:root .top-date { font-size: 12px; }
:root .topbar-status { gap: 12px; }

/* Theme controls are shared by the workspace and the sign-in page. */
.theme-switcher { display: inline-flex; align-items: center; gap: 3px; padding: 4px; background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 14px; flex: none; }
.theme-option { display: inline-flex; justify-content: center; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); min-width: 37px; min-height: 33px; padding: 6px 9px; font-size: 11px; font-weight: 550; line-height: 1.35; }
.theme-option .icon { width: 16px; height: 16px; }
.theme-option:hover { background: var(--surface-hover); color: var(--accent-text); }
.theme-option[aria-pressed="true"] { color: var(--accent-text); background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1px 4px rgba(12, 45, 100, .07); }
html[data-theme="dark"] .theme-option[aria-pressed="true"] { background: var(--surface-selected); }
.login-theme-switch { position: absolute; top: 29px; right: 32px; }

/* Dashboard surfaces, cards, and secondary typography. */
:root :is(.panel, .metric-card, .lead-card, .modal) { color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--panel-shadow); }
:root .metric-card:hover { border-color: var(--line-hover); }
:root :is(.panel-heading, .panel-footnote, .action-row, .visit-mini, .integration-setting, .detail-visit) { border-color: var(--line); }
:root .panel-heading p { color: var(--muted); font-size: 12px; }
:root .panel-heading>.muted { color: var(--muted); font-size: 12px; }
:root .panel-heading>.text-link { font-size: 12px; }
:root .panel-footnote { background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.75; }
:root .metric-top { color: var(--muted); font-size: 13px; line-height: 1.5; }
:root .metric-icon { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 11px; width: 32px; height: 32px; }
:root :is(.metric-icon .icon, .metric-top>.icon) { color: var(--accent); }
:root .metric-number { color: var(--text); font-weight: 650; }
:root .metric-unit { color: var(--muted); font-size: 12px; }
:root .metric-note { color: var(--muted); font-size: 11px; line-height: 1.65; }
:root .attention-card { background: var(--surface); border-color: var(--line-strong); }
:root .attention-card .metric-icon { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-line); }
:root .attention-card .metric-icon .icon { color: var(--warning-text); }
:root .attention-card .metric-number { color: var(--warning-text); }
:root .action-row:hover { background: var(--surface-soft); }
:root .action-main strong { color: var(--text); font-size: 14px; }
:root .action-main>span { color: var(--muted); font-size: 12px; }
:root .action-meta small { color: var(--muted); font-size: 11px; }
:root .action-row>.icon { color: var(--accent); }
:root .date-tile { color: var(--text); background: var(--surface-soft); border-color: var(--line-strong); border-radius: 13px; width: 48px; height: 56px; }
:root .date-tile span { color: var(--muted); font-size: 10px; }
:root .visit-mini strong { color: var(--text); font-size: 14px; }
:root .visit-mini span:not(.status-dot) { color: var(--muted); font-size: 12px; }
:root .visit-mini small { color: var(--muted); font-size: 11px; line-height: 1.6; }
:root .funnel-strip { gap: 4px; }
:root .funnel-strip b { color: var(--text); }
:root .funnel-strip span { color: var(--muted); font-size: 10px; line-height: 1.55; min-height: 34px; overflow-wrap: break-word; }
:root .funnel-strip i { background: var(--accent); border: 0; opacity: .32; height: 7px; border-radius: 5px; }
:root .funnel-strip>a:nth-child(2) i { background: var(--accent); opacity: .43; }
:root .funnel-strip>a:nth-child(3) i { background: var(--accent); opacity: .54; }
:root .funnel-strip>a:nth-child(4) i { background: var(--accent); opacity: .65; }
:root .funnel-strip>a:nth-child(5) i { background: var(--accent); opacity: .76; }
:root .funnel-strip>a:nth-child(6) i { background: var(--accent); opacity: .87; }
:root .funnel-strip>a:nth-child(7) i { background: var(--accent); opacity: 1; }
:root .integration-row strong { color: var(--text); font-size: 14px; }
:root .integration-row small { color: var(--muted); font-size: 11px; line-height: 1.6; }
:root :is(.service-logo, .avito-logo, .ai-logo, .telegram-logo) { background: var(--surface-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 12px; }
:root .empty-state { color: var(--muted); }
:root .empty-state h3 { color: var(--text); font-size: 18px; }
:root .empty-state p { color: var(--muted); font-size: 14px; }
:root .empty-state>.icon { color: var(--accent); }
:root .empty-illustration { color: var(--accent); background: var(--accent-soft); border-color: var(--line-strong); border-radius: 24px; }
:root .flash { font-size: 13px; border-radius: 13px; }
:root .flash strong { color: inherit; }
:root .flash.error { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); }
:root .panic-banner { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-line); font-size: 12px; }
:root .panic-banner strong { color: inherit; }
:root .panic-banner a { font-size: 12px; }

/* Fields, readonly states, modal forms, and native date/select controls. */
:root label { color: var(--muted); font-size: 13px; font-weight: 550; }
:root input:not([type=checkbox]):not([type=hidden]),
:root textarea,
:root select {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  min-height: 43px;
  font-size: 14px;
}
:root input::placeholder, :root textarea::placeholder { color: var(--muted); opacity: .9; }
:root :is(input, textarea, select):focus { border-color: var(--accent); }
:root input[type=checkbox] { accent-color: var(--accent); }
:root select option { color: var(--text); background: var(--surface-raised); }
:root input:not([type=checkbox]):not([type=hidden]):disabled,
:root textarea:disabled,
:root select:disabled { color: var(--muted); background: var(--surface-soft); border-color: var(--line); opacity: 1; }
:root input:-webkit-autofill,
:root input:-webkit-autofill:hover,
:root input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); caret-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface-raised) inset; }
:root .field-help { color: var(--muted); font-size: 12px; }
:root :is(.form-context, .info-note, .side-info) { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 12px; line-height: 1.75; }
:root .info-note small { font-size: 11px; }
:root .form-submit { border-color: var(--line); }
:root .form-submit>.muted { color: var(--muted); font-size: 12px; }
:root .modal { border-color: var(--line-strong); box-shadow: var(--floating-shadow); }
:root .modal::backdrop { background: var(--overlay); }
:root .modal-heading h2 { font-size: 25px; }
:root .modal-heading p { color: var(--muted); font-size: 12px; }
:root .modal-heading .eyebrow { font-size: 10px; }
:root .modal-actions { border-color: var(--line); }
:root .readonly-fieldset:disabled input,
:root .readonly-fieldset:disabled select,
:root .readonly-fieldset:disabled textarea { color: var(--muted); background: var(--surface-soft); border-color: var(--line); opacity: 1; }

/* Inbox has independent scroll areas; typography must not change their sizing. */
:root .inbox-workspace { background: var(--surface); }
:root .conversation-panel { background: var(--surface); border-color: var(--line-strong); }
:root .conversation-heading h1 { font-size: 24px; }
:root .conversation-heading h1>span { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; min-width: 26px; height: 25px; }
:root .conversation-heading p { color: var(--muted); font-size: 12px; }
:root .inbox-search { color: var(--muted); background: var(--surface-soft); border-color: var(--line-strong); border-radius: 12px; }
:root .inbox-search input { color: var(--text); font-size: 13px !important; border-radius: 12px; }
:root .inbox-filters { border-color: var(--line); gap: 5px; }
:root .inbox-filters a { color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 8px; font-size: 11px; }
:root .inbox-filters a:hover { color: var(--accent-text); background: var(--surface-soft); border-color: var(--line); }
:root .inbox-filters a.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--line-strong); }
:root .conversation-item { border-color: var(--line); }
:root .conversation-item:hover { background: var(--surface-soft); }
:root .conversation-item.selected { background: var(--surface-selected); }
:root .conversation-item.selected:before { background: var(--accent); }
:root .conversation-preview strong { color: var(--text); font-size: 14px; }
:root .conversation-preview time { color: var(--muted); font-size: 11px; }
:root .conversation-preview p { color: var(--muted); font-size: 12px; }
:root :is(.conversation-source, .mini-label) { color: var(--muted); font-size: 11px; }
:root .conversation-source { max-width: 100%; }
:root .conversation-preview .badge { font-size: 10px; border-radius: 8px; padding: 4px 6px; }
:root .unread-count { color: var(--primary-text); background: var(--primary); border-radius: 7px; font-size: 11px; padding: 3px 6px; }
:root .conversation-footer { color: var(--muted); background: var(--surface); border-color: var(--line); font-size: 11px; line-height: 1.5; text-align: center; }
:root :is(.chat-panel, .chat-empty, .chat-history) { background: var(--canvas); }
:root .chat-heading { background: var(--surface); border-color: var(--line-strong); }
:root .chat-heading h2 { color: var(--text); font-size: 16px; }
:root .chat-heading-person>span { color: var(--muted); font-size: 12px; }
:root .chat-heading .button { font-size: 11px; }
:root .chat-mode-bar { background: var(--surface-soft); border-color: var(--line); }
:root .mode-state { color: var(--muted); font-size: 11px; }
:root .chat-mode-bar .text-link { font-size: 12px; }
:root .chat-date>span { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; }
:root .message-bubble { color: var(--text); background: var(--surface); border-color: var(--line-strong); border-radius: 18px 18px 18px 7px; box-shadow: var(--panel-shadow); }
:root .outgoing .message-bubble { background: var(--outgoing); border-color: var(--outgoing-line); border-radius: 18px 18px 7px 18px; }
:root .message-author { color: var(--muted); font-size: 11px; }
:root .message-bubble p { color: var(--text); font-size: 14px; line-height: 1.75; }
:root .message-meta { color: var(--muted); font-size: 11px; }
:root .message-meta span { color: var(--muted); font-size: 10px; }
:root .message-meta .error-text { color: var(--danger-text); }
:root .system-message .message-bubble { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; }
:root .system-message .message-bubble p { color: var(--muted); font-size: 12px; }
:root .ai-draft { color: var(--text); background: var(--accent-soft); border-color: var(--line-strong); border-radius: 15px; }
:root .ai-draft>div { color: var(--accent-text); font-size: 12px; flex-wrap: wrap; }
:root .ai-draft>div strong { color: var(--accent-text); }
:root .ai-draft>div>span { color: var(--muted); font-size: 11px; }
:root .ai-draft p { color: var(--text); font-size: 13px; }
:root :is(.ai-draft>.text-link, .ai-link) { color: var(--accent-text); font-size: 12px; }
:root .composer-area { background: var(--surface); border-color: var(--line-strong); }
:root .composer-form { background: var(--surface-raised); border-color: var(--line-strong); border-radius: 15px; }
:root .composer-form textarea { color: var(--text); background: transparent; border-radius: 14px; font-size: 14px; min-height: 65px; }
:root .composer-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
:root .composer-toolbar>span { color: var(--muted); font-size: 11px; line-height: 1.5; }
:root .composer-toolbar .button { font-size: 13px; min-height: 38px; border-radius: 11px; }
:root .composer-secondary .text-link { color: var(--accent); font-size: 12px; }
:root .lead-side-panel { background: var(--surface); border-color: var(--line-strong); }
:root .lead-side-heading .eyebrow { font-size: 10px; color: var(--muted); letter-spacing: 1.05px; }
:root .lead-side-heading .icon { color: var(--accent); }
:root .lead-side-panel h2 { color: var(--text); font-size: 19px; }
:root .lead-side-location { color: var(--muted); font-size: 12px; }
:root .side-divider { background: var(--line); }
:root .side-edit-form label { color: var(--muted); font-size: 12px; }
:root .side-edit-form input, :root .side-edit-form select { font-size: 13px; min-height: 40px; }
:root .side-edit-form .button { font-size: 12px; }
:root .side-meta { font-size: 13px; }
:root .side-meta>span { color: var(--muted); font-size: 12px; }
:root .side-meta>strong { color: var(--text); }
:root .lead-side-panel>.button, :root .lead-side-panel>form>.button { font-size: 13px; }
:root .side-info { font-size: 12px; }
:root .chat-empty h2 { color: var(--text); }
:root .chat-empty p { color: var(--muted); font-size: 14px; }
:root .chat-empty .eyebrow { color: var(--muted); font-size: 11px; }

/* Leads, boards, tables, appointment details, and tasks. */
:root .segmented-control { color: var(--muted); background: var(--surface-soft); border-color: var(--line-strong); border-radius: 14px; padding: 4px; }
:root .segmented-control>a { color: var(--muted); border: 1px solid transparent; border-radius: 10px; font-size: 12px; }
:root .segmented-control>a.active { color: var(--accent-text); background: var(--surface); border-color: var(--line-strong); box-shadow: var(--panel-shadow); }
:root .filter-form select { color: var(--text); background: var(--surface); font-size: 12px; min-height: 39px; border-radius: 11px; }
:root .search-field { color: var(--muted); background: var(--surface); border-color: var(--line-strong); border-radius: 12px; }
:root .search-field input { color: var(--text); font-size: 12px !important; min-height: 38px !important; }
:root .kanban-board { scrollbar-color: var(--line-strong) transparent; }
:root .kanban-column>header { border-color: var(--line-strong); }
:root .kanban-column>header h2 { color: var(--text); font-size: 13px; }
:root .column-dot { background: var(--line-hover); }
:root .column-dot.first { background: var(--accent); }
:root .column-count { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; min-width: 23px; height: 23px; }
:root .lead-card { border-radius: 18px; }
:root .lead-card:hover { border-color: var(--line-hover); }
:root .lead-card.high-priority { border-top: 2px solid var(--line-strong); }
:root .lead-code { color: var(--muted); font-size: 11px; }
:root .lead-card h3 { color: var(--text); font-size: 15px; }
:root .lead-card>p { color: var(--muted); font-size: 13px; }
:root .lead-card-properties>span { color: var(--muted); font-size: 12px; }
:root .lead-card-properties .icon { color: var(--accent); }
:root .lead-card-source { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
:root .lead-card footer { color: var(--muted); border-color: var(--line); font-size: 11px; }
:root .lead-card footer time { color: var(--muted); font-size: 11px; }
:root :is(.empty-column, .board-footnote) { color: var(--muted); border-color: var(--line-strong); font-size: 12px; }
:root .empty-column { border-radius: 15px; }
:root .data-table { color: var(--text); }
:root .data-table thead { color: var(--muted); background: var(--surface-soft); font-size: 12px; }
:root .data-table th { color: var(--muted); }
:root .data-table td { color: var(--text); border-color: var(--line); background: var(--surface); font-size: 13px; }
:root .data-table tr:hover td { background: var(--surface-soft); }
:root .data-table td>small { color: var(--muted); font-size: 12px; }
:root .table-person strong { color: var(--text); font-size: 14px; }
:root .table-person small { color: var(--muted); font-size: 11px; }
:root .table-person:hover strong { color: var(--accent); }
:root .detail-visit strong { color: var(--text); font-size: 13px; }
:root .detail-visit p { color: var(--muted); font-size: 12px; }
:root .detail-visit small { color: var(--muted); font-size: 12px; }
:root .person-block strong { color: var(--text); font-size: 14px; }
:root .person-block small { color: var(--muted); font-size: 12px; }
:root .task-row { border-color: var(--line); }
:root .task-row strong { color: var(--text); font-size: 13px; }
:root .task-check { background: var(--surface); border-color: var(--line-strong); border-radius: 6px; width: 20px; height: 20px; }
:root .task-check .icon { color: var(--accent); }
:root .task-row small { color: var(--muted); font-size: 12px; }
:root .task-done strong { color: var(--muted); }
:root .task-empty { color: var(--muted); font-size: 13px; }
:root .new-task-form { background: var(--surface-soft); }
:root .new-task-form label { color: var(--muted); font-size: 12px; }
:root .new-task-form input { font-size: 13px; }
:root .timeline>div { border-color: var(--line-strong); }
:root .timeline-dot { background: var(--accent); border-color: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
:root .timeline strong { color: var(--text); font-size: 13px; }
:root .timeline small { color: var(--muted); font-size: 12px; }
:root .visits-summary { background: var(--surface-soft); border-color: var(--line-strong); border-radius: 18px; }
:root .visits-summary .icon { color: var(--accent); }
:root .visits-summary strong { color: var(--text); font-size: 14px; }
:root .visits-summary small { color: var(--muted); font-size: 12px; }
:root .visits-summary>.badge { color: var(--accent-text); background: var(--surface); border-color: var(--line-strong); }
:root .visit-row { border-color: var(--line); }
:root .visit-date b { color: var(--text); }
:root .visit-date span, :root .visit-date small { color: var(--muted); font-size: 11px; }
:root .visit-time { color: var(--accent-text); font-size: 16px; }
:root .visit-time small { color: var(--muted); font-size: 11px; }
:root .visit-client>a { color: var(--text); font-size: 14px; }
:root .visit-client>a:hover { color: var(--accent); }
:root .visit-client>span { color: var(--muted); font-size: 12px; }
:root .visit-client p { color: var(--muted); font-size: 12px; }
:root .visit-assignee { color: var(--muted); font-size: 12px; }
:root .visit-status-form select { color: var(--text); background: var(--surface-soft); border-color: var(--line-strong); border-radius: 11px; font-size: 12px; min-height: 38px; width: 150px; }
:root .visit-status-form .icon-button { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 11px; width: 34px; height: 38px; }

/* Analytics, integration settings, and operational controls. */
:root .analytics-notice { color: var(--muted); font-size: 12px; }
:root .analytics-notice .status-dot { background: var(--accent); }
:root .bar-row>span { color: var(--muted); font-size: 12px; width: 132px; }
:root .bar-row>b { color: var(--text); font-size: 13px; }
:root .bar-track { background: var(--surface-soft); border: 1px solid var(--line); height: 12px; border-radius: 7px; }
:root .bar-track i { background: var(--accent); border-radius: 6px; }
:root .source-breakdown>div { color: var(--text); border-color: var(--line); font-size: 13px; }
:root .source-index { color: var(--accent); font-size: 11px; }
:root .source-breakdown b { color: var(--accent-text); font-size: 18px; }
:root .integration-setting-title h3 { color: var(--text); font-size: 14px; }
:root .integration-setting-title p { color: var(--muted); font-size: 12px; }
:root .integration-setting>p { color: var(--muted); font-size: 13px; }
:root .integration-detail { color: var(--text); background: var(--surface-soft); border-color: var(--line); border-radius: 11px; font-size: 12px; }
:root .integration-detail code { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
:root .listing-settings>div { border-color: var(--line); }
:root .listing-settings strong { color: var(--text); font-size: 13px; }
:root .listing-settings small { color: var(--muted); font-size: 11px; }
:root .listing-settings .badge { font-size: 10px; }
:root .ai-control-panel>.panel-heading>.icon { color: var(--accent); }
:root .panic-control { background: var(--danger-bg); border-color: var(--danger-line); border-radius: 13px; }
:root .panic-control input { accent-color: var(--danger-text); }
:root .panic-control strong { color: var(--danger-text); font-size: 13px; }
:root .panic-control small { color: var(--danger-text); font-size: 12px; opacity: .88; }
:root .settings-fact>span { color: var(--muted); font-size: 12px; }
:root .settings-fact>strong { color: var(--text); font-size: 14px; }
:root .audit-list>div { border-color: var(--line); }
:root .audit-list span { color: var(--text); font-size: 13px; }
:root .audit-list small { color: var(--muted); font-size: 12px; }

/* The sign-in screen follows the selected theme as well. */
:root .login-body { background: var(--canvas); }
:root .login-story { background: var(--surface-soft); color: var(--text); border-right: 1px solid var(--line-strong); }
:root .login-story:after { border-color: var(--line); box-shadow: 0 0 0 60px var(--focus-ring), 0 0 0 120px rgba(37, 99, 235, .025); border-radius: 40px; opacity: .36; }
:root .login-panel { background: var(--surface); color: var(--text); padding-top: 90px; }
:root .login-story-copy .eyebrow { color: var(--muted); font-size: 11px; }
:root .login-story-copy h1 { color: var(--text); }
:root .login-story-copy h1>span { color: var(--accent); }
:root .login-story-copy>p { color: var(--muted); font-size: 15px; }
:root .login-path { color: var(--accent-text); font-size: 13px; }
:root .login-path>i { color: var(--accent); }
:root .login-story>small { color: var(--muted); font-size: 12px; }
:root .login-form-wrap>.muted { color: var(--muted); font-size: 14px; }
:root .login-form-wrap label { color: var(--muted); font-size: 13px; }
:root .login-form-wrap input { color: var(--text); background: var(--surface-raised); border-color: var(--line-strong); border-radius: 12px; min-height: 47px; font-size: 14px; }
:root .login-submit { min-height: 46px; border-radius: 13px; }
:root .login-help { color: var(--muted); font-size: 12px; }
:root .login-footer, :root .login-footer>span { color: var(--muted); font-size: 11px; }
:root .login-panel:before { color: var(--accent-text); }
:root .menu-backdrop { background: var(--overlay); }
:root .mobile-bottom-nav { background: var(--surface); color: var(--muted); border-color: var(--line-strong); box-shadow: 0 -3px 20px rgba(15, 40, 85, .045); }
:root .mobile-bottom-nav>a, :root .mobile-bottom-nav>button { color: var(--muted); border-radius: 12px; font-size: 11px; min-width: 67px; }
:root .mobile-bottom-nav .active { color: var(--accent-text); background: var(--accent-soft); }
:root .mobile-back { color: var(--accent); }

@media (max-width: 1300px) {
  :root .topbar { gap: 12px; }
  :root .global-search { min-width: 165px; }
  :root .global-search input { width: 140px !important; }
  :root .metric-top { font-size: 12px; }
  :root .metric-note { font-size: 11px; }
  :root .action-main>span { max-width: 180px; }
  :root .action-meta small { font-size: 11px; }
  :root .lead-side-panel { padding-left: 16px; padding-right: 16px; }
  :root .chat-heading .button { font-size: 11px; }
  :root .composer-toolbar>span { font-size: 11px; max-width: 145px; }
  :root .inbox-filters a { padding: 6px; }
  :root .conversation-preview .badge { font-size: 10px; }
}
@media (max-width: 1120px) {
  .topbar .theme-option-label { display: none; }
  .topbar .theme-switcher { padding: 3px; border-radius: 12px; }
  .topbar .theme-option { width: 32px; min-width: 32px; min-height: 32px; padding: 6px; border-radius: 9px; }
  :root .topbar .breadcrumb { font-size: 11px; }
  :root .topbar-status .demo-badge { font-size: 10px; }
  :root .lead-side-panel { box-shadow: var(--floating-shadow); }
  :root .lower-columns .panel-heading { padding: 18px; }
  :root .funnel-strip span { font-size: 10px; }
  :root .integration-row .badge { font-size: 10px; }
  :root .integration-row small { font-size: 11px; }
  :root .integration-setting-title .badge { font-size: 10px; }
  :root .integration-setting-title h3 { font-size: 13px; }
  :root .integration-setting-title p { font-size: 11px; }
  :root .listing-settings .badge { font-size: 10px; }
}
@media (max-width: 900px) {
  :root .conversation-item { gap: 8px; }
  :root .conversation-preview strong { font-size: 13px; }
  :root .conversation-source { max-width: 100%; width: 100%; font-size: 11px; }
  :root .conversation-preview .badge { margin-left: 0; }
  :root .conversation-preview .mini-label { margin-left: 0; font-size: 11px; }
  :root .conversation-preview time { font-size: 11px; }
  :root .chat-heading h2 { font-size: 15px; }
  :root .chat-heading-person>span { font-size: 11px; max-width: 190px; }
  :root .mode-state { font-size: 11px; }
  :root .chat-mode-bar .text-link { font-size: 11px; }
  :root .message-bubble p { font-size: 14px; }
  :root .composer-secondary .text-link { font-size: 11px; }
  :root .composer-toolbar>span { display: none; }
}
@media (max-width: 768px) {
  :root .sidebar { border-color: var(--line-strong); box-shadow: var(--floating-shadow); }
  :root .topbar { padding: 0 17px; gap: 10px; }
  :root .breadcrumb { font-size: 11px !important; }
  :root .topbar-status .demo-badge { font-size: 10px; padding: 6px 8px; }
  :root .page-heading h1 { font-size: 28px; }
  :root .page-heading p { font-size: 13px; }
  :root .page-heading .eyebrow { font-size: 10px; }
  :root .data-table th { font-size: 11px; }
  :root .data-table td { font-size: 12px; }
  :root .table-person strong { font-size: 13px; }
  :root .table-person small { font-size: 11px; }
  :root .login-panel { padding-top: 100px; }
  :root .login-panel:before { font-size: 22px; }
  .login-theme-switch { top: 27px; right: 28px; }
}
@media (max-width: 600px) {
  :root .topbar { padding: 0 15px; gap: 9px; }
  :root .topbar-start { flex: 1; min-width: 0; }
  :root .topbar .breadcrumb { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  :root .topbar .breadcrumb-context { display: none; }
  :root .topbar .breadcrumb strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  :root .topbar-status { flex: none; min-width: 0; }
  :root .topbar-status .demo-badge { display: none; }
  :root .main-content { padding-top: 24px; }
  :root .page-heading h1 { font-size: 26px; }
  :root .page-heading p { font-size: 13px; }
  :root .page-heading>.button { min-height: 41px; font-size: 13px; border-radius: 12px; }
  :root .heading-actions>.button { min-height: 40px; font-size: 12px; border-radius: 12px; }
  :root .metrics-grid { gap: 12px; }
  :root .metric-card { padding: 16px 15px; border-radius: 18px; }
  :root .metric-top { font-size: 12px; gap: 6px; align-items: flex-start; }
  :root .metric-icon { width: 25px; height: 25px; border-radius: 9px; flex: none; }
  :root .metric-number { font-size: 32px; margin-top: 12px; }
  :root .metric-note { font-size: 11px; line-height: 1.55; align-items: flex-start; }
  :root .metric-note .icon { flex: none; margin-top: 3px; }
  :root .panel-heading h2 { font-size: 17px; }
  :root .panel-heading p { font-size: 12px; }
  :root .panel-heading .text-link { font-size: 11px; }
  :root .action-row { padding: 17px 16px; gap: 9px; }
  :root .action-main strong { font-size: 13px; }
  :root .action-main>span { max-width: 140px; font-size: 11px; }
  :root .action-meta { max-width: 108px; }
  :root .action-meta .badge { font-size: 10px; padding: 5px 7px; }
  :root .action-meta small { color: var(--muted); font-size: 11px; max-width: 108px; line-height: 1.5; }
  :root .visit-mini strong { font-size: 14px; }
  :root .visit-mini small { font-size: 12px; }
  :root .funnel-strip { flex-wrap: wrap; gap: 17px 10px; }
  :root .funnel-strip>a { flex: 0 0 calc(25% - 8px); }
  :root .funnel-strip b { font-size: 23px; }
  :root .funnel-strip span { font-size: 11px; min-height: 36px; }
  :root .panel-footnote { font-size: 12px; padding: 15px 18px; }
  :root .lower-columns .integration-row .badge { font-size: 10px; }
  :root .lower-columns .integration-row small { font-size: 11px; }
  :root .form-grid, :root .modal .form-grid { gap: 14px; min-width: 0; }
  :root .form-grid>label, :root .modal .form-grid>label { min-width: 0; }
  :root .modal label, :root .detail-main label { font-size: 12px; }
  :root .modal input, :root .modal textarea, :root .modal select { font-size: 14px; min-width: 0; }
  :root .modal-heading h2 { font-size: 23px; }
  :root .modal-heading .eyebrow { font-size: 10px; }
  :root .form-submit .muted { font-size: 12px; }
  :root .modal .info-note, :root .info-note { font-size: 12px; }
  :root .detail-visit strong { font-size: 12px; }
  :root .detail-visit p { font-size: 12px; }
  :root .detail-visit>.badge { font-size: 10px; }
  :root .filter-form .search-field { border-radius: 12px; }
  :root .filter-form select { font-size: 11px; width: calc(50% - 41px); min-height: 39px; }
  :root .filter-form select[name=listing] { width: calc(50% - 41px); }
  :root .filter-form .button { font-size: 12px; min-height: 39px; }
  :root .filter-form>.text-link { font-size: 12px; }
  :root .search-field input { min-height: 41px !important; font-size: 13px !important; }
  :root .segmented-control>a { font-size: 13px; }
  :root .kanban-board { grid-auto-columns: 262px; }
  :root .kanban-column>header h2 { font-size: 13px; }
  :root .lead-card h3 { font-size: 16px; }
  :root .lead-card>p { font-size: 13px; }
  :root .lead-card-properties>span { font-size: 12px; }
  :root .lead-card-source, :root .lead-card footer { font-size: 11px; }
  :root .data-table tr { border-color: var(--line); background: var(--surface); }
  :root .data-table td { color: var(--text); font-size: 13px; background: transparent; }
  :root .data-table td:first-child { border-color: var(--line); }
  :root .data-table td:not(:first-child):before { color: var(--muted); font-size: 11px; }
  :root .data-table td>small { color: var(--muted); font-size: 12px; }
  :root .table-person strong { font-size: 14px; }
  :root .table-person small { font-size: 11px; }
  :root .visits-summary strong { font-size: 13px; }
  :root .visits-summary small { font-size: 11px; }
  :root .visit-date span, :root .visit-date small { font-size: 11px; }
  :root .visit-time { font-size: 15px; }
  :root .visit-client>a { font-size: 14px; }
  :root .visit-client>span, :root .visit-client p { font-size: 12px; }
  :root .visit-status-form select { font-size: 12px; min-height: 40px; width: 160px; }
  :root .visit-status-form .icon-button { min-height: 40px; height: 40px; width: 36px; }
  :root .analytics-notice { font-size: 12px; }
  :root .bar-row>span { font-size: 12px; width: 116px; }
  :root .bar-track { height: 10px; }
  :root .source-breakdown>div { font-size: 12px; }
  :root .source-breakdown b { font-size: 16px; }
  :root .integration-setting-title h3 { font-size: 13px; }
  :root .integration-setting-title p { font-size: 11px; }
  :root .integration-setting-title .badge { font-size: 10px; padding: 5px 6px; }
  :root .integration-setting>p { font-size: 13px; }
  :root .listing-settings strong { font-size: 13px; }
  :root .listing-settings small { font-size: 11px; }
  :root .listing-settings .badge { font-size: 10px; padding: 5px 6px; }
  :root .audit-list span { font-size: 13px; }
  :root .audit-list small { font-size: 12px; }
  :root .inbox-workspace { grid-template-columns: minmax(0, 1fr); }
  :root .conversation-heading h1 { font-size: 25px; }
  :root .conversation-heading p { font-size: 12px; }
  :root .inbox-filters a { font-size: 11px; padding: 7px 8px; }
  :root .conversation-preview strong { font-size: 15px; }
  :root .conversation-preview time { font-size: 11px; }
  :root .conversation-preview p { font-size: 13px; }
  :root .conversation-source { max-width: 100%; font-size: 11px; }
  :root .conversation-preview .badge, :root .conversation-preview .mini-label { font-size: 11px; }
  :root .conversation-preview .badge { margin-left: 0; }
  :root .conversation-footer { font-size: 11px; }
  :root .chat-heading h2 { font-size: 16px; }
  :root .chat-heading-person>span { font-size: 11px; max-width: 195px; }
  :root .chat-heading { gap: 9px; }
  :root .chat-mode-bar { padding: 9px 16px; }
  :root .mode-state { font-size: 11px; }
  :root .chat-mode-bar .text-link { font-size: 11px; }
  :root .chat-date>span { font-size: 10px; }
  :root .message-bubble { padding: 12px 14px; }
  :root .message-author { font-size: 11px; }
  :root .message-bubble p { font-size: 14px; }
  :root .message-meta { font-size: 10px; flex-wrap: wrap; }
  :root .message-meta span { font-size: 10px; }
  :root .composer-area { padding: 11px 14px 10px; }
  :root .composer-form textarea { font-size: 14px; min-height: 55px; }
  :root .composer-toolbar>span { display: none; }
  :root .composer-toolbar .button { min-height: 37px; font-size: 12px; }
  :root .composer-secondary { gap: 10px; flex-wrap: wrap; }
  :root .composer-secondary .text-link { font-size: 11px; }
  :root .lead-side-panel h2 { font-size: 21px; }
  :root .side-edit-form label { font-size: 12px; }
  :root .side-edit-form input, :root .side-edit-form select { font-size: 14px; min-height: 43px; }
  :root .side-info { font-size: 12px; }
  :root .lead-side-panel>.button, :root .lead-side-panel>form>.button { font-size: 13px; }
  :root .side-meta { font-size: 14px; }
  :root .side-meta>span { font-size: 12px; }
  :root .ai-draft p { font-size: 12px; }
  :root .panic-banner { font-size: 11px; }
  :root .panic-banner a { font-size: 11px; }
  .login-theme-switch { top: 24px; right: 23px; }
  .login-theme-switch .theme-option-label { display: none; }
  .login-theme-switch .theme-option { min-width: 34px; min-height: 33px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switcher, .theme-option { transition: none; }
}