/* ═══════════════════════════════════════
   1IT Admin Panel — Dark Premium Theme
   WordPress-like CMS with sidebar nav
   ═══════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  --bg-body: #0f1117;
  --bg-sidebar: #151821;
  --bg-card: #1a1d27;
  --bg-input: #1e2130;
  --bg-hover: #252836;
  --bg-active: #2a2d3a;
  --border: #2a2d3a;
  --border-light: #353848;
  --text-primary: #e4e6eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-muted: rgba(99, 102, 241, 0.15);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --radius: 8px;
  --radius-lg: 12px;
  --sidebar-width: 260px;
  --header-height: 56px;
  --transition: 0.2s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ═══════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-body);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}

.login-wrapper {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.login-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.login-theme-toggle:hover,
.login-theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  width: 56px;
  height: 56px;
  background: var(--accent-muted);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: var(--accent);
}

.login-logo.has-image,
.sidebar-logo.has-image {
  background: transparent;
  border: 1px solid var(--border);
  overflow: hidden;
}

.login-logo img,
.sidebar-logo img,
.sidebar-user .avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-user .avatar.has-image {
  overflow: hidden;
  background: transparent;
}

.sidebar-user .avatar img {
  object-fit: cover;
}

.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.login-header p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.login-card label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.login-card .form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

.login-card .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.login-card .form-group {
  margin-bottom: 20px;
}

.login-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.login-error.show { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.4;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  width: 100%;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-active);
  border-color: var(--border-light);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.24);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════
   APP LAYOUT — Sidebar + Main
   ═══════════════════════════════════════ */

.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-height);
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.sidebar-brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Site selector in sidebar */
.site-selector {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.site-selector select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.site-selector select:focus {
  border-color: var(--accent);
}

/* Nav menu */
.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-section {
  padding: 8px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid transparent;
  font-size: 14px;
}

.sidebar-logo.has-image {
  padding: 2px;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-muted);
  border-left-color: var(--accent);
}

.nav-item i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-item .badge {
  margin-left: auto;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

.sidebar-user:hover {
  background: var(--bg-hover);
}

.sidebar-user .avatar {
  width: 32px;
  height: 32px;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-user .user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user .user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-user .user-role {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Main Content Area ─── */
.main-content {
  flex: 1;
  /**
   * `min-width: 0` — не косметика, а защита раскладки от собственного содержимого.
   *
   * У flex-элемента ширина по умолчанию не может стать меньше содержимого (`min-width: auto`).
   * Одна длинная неразрывная строка — ответ чужого API об ошибке, ссылка, идентификатор — растягивала
   * ВЕСЬ рабочий экран: появлялась горизонтальная полоса на всю страницу, шапка и меню уезжали.
   * Найдено на проде: строка ошибки Google Ads в таблице подключений сломала экран аналитики.
   * С `min-width: 0` широкий блок прокручивается ВНУТРИ себя, а страница остаётся на месте.
   */
  min-width: 0;
  margin-left: var(--sidebar-width);
  /**
   * Отступ под ФИКСИРОВАННУЮ шапку. Правило для него было написано (`.main { margin-top:
   * var(--header-height) }` в appdashboard-main.css), но в разметке кабинета стоит `.main-content`,
   * а не `.main`, — то есть оно не применялось НИКОГДА. Содержимое всё это время начиналось под
   * шапкой, и спасали только большие внутренние отступы: замер показал зазор 6px на десктопе и
   * −12px на телефоне, где отступы меньше. Именно так заголовок «CRM Command Center» и уехал под
   * меню.
   */
  margin-top: var(--header-height);
  /* Иначе 100vh + шапка дают вертикальную прокрутку на каждом экране. */
  min-height: calc(100vh - var(--header-height));
  /**
   * Верхний внутренний отступ снят: раньше он компенсировал наезд на шапку, а теперь отступ даёт
   * `margin-top`. Оставь оба — и над каждым заголовком появилось бы 62px пустоты вместо 24px
   * (замерено). Боковые и нижний отступы не трогаем: их задаёт та же строка `padding` ниже.
   */
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-sidebar);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

/* Content area */
.content-area {
  flex: 1;
  /* Та же защита, что и у .main-content: содержимое не имеет права расширять страницу. */
  min-width: 0;
  max-width: 100%;
  padding: 24px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Sites grid */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.site-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.site-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.site-card .site-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.site-card .site-info { flex: 1; min-width: 0; }

.site-card .site-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.site-card .site-path {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.site-card .site-langs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lang-badge {
  background: var(--bg-hover);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════
   PAGES LIST
   ═══════════════════════════════════════ */

.pages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.page-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.page-item i {
  color: var(--text-muted);
  font-size: 16px;
}

.page-item .page-name {
  font-weight: 500;
  flex: 1;
}

.page-item .page-path {
  font-size: 12px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════
   BLOCK EDITOR
   ═══════════════════════════════════════ */

.editor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  height: calc(100vh - var(--header-height) - 48px);
}

.editor-layout.no-preview {
  grid-template-columns: 1fr;
}

.editor-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.editor-toolbar .toolbar-title {
  font-size: 15px;
  font-weight: 600;
  margin-right: auto;
}

.blocks-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

/* Block card */
.block-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  transition: all var(--transition);
}

.block-card.expanded {
  border-color: var(--accent);
}

.block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.block-header:hover {
  background: var(--bg-hover);
  border-radius: var(--radius-lg);
}

.block-header .block-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.block-header .block-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.block-header .block-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 4px;
}

.block-header .block-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  font-size: 12px;
}

.block-card.expanded .block-chevron {
  transform: rotate(180deg);
}

.block-body {
  padding: 0 18px 18px;
  display: none;
  border-top: 1px solid var(--border);
  margin: 0 18px;
  padding-top: 16px;
}

.block-card.expanded .block-body {
  display: block;
}

/* ─── Form fields ─── */
.field-group {
  margin-bottom: 18px;
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field-label .field-required {
  color: var(--danger);
  font-size: 11px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  cursor: pointer;
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.field-hint code {
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--accent);
}

/* ─── Image upload ─── */
.image-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-input);
}

.image-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.image-upload-zone img {
  max-width: 200px;
  max-height: 120px;
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.image-upload-zone .upload-text {
  color: var(--text-muted);
  font-size: 13px;
}

.image-upload-zone .upload-text i {
  display: block;
  font-size: 24px;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════
   LIVE PREVIEW
   ═══════════════════════════════════════ */

.preview-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
}

.preview-toolbar .preview-url {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-toolbar .device-btns {
  display: flex;
  gap: 2px;
}

.preview-frame {
  flex: 1;
  border: none;
  background: #fff;
  width: 100%;
}

/* ═══════════════════════════════════════
   SEO PANEL
   ═══════════════════════════════════════ */

.seo-container {
  max-width: 800px;
}

/* Google snippet preview */
.google-preview {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.google-preview-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.google-preview .gp-url {
  font-size: 14px;
  color: #70757a;
  font-family: var(--font-sans);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-preview .gp-url .gp-favicon {
  width: 26px;
  height: 26px;
  background: #f1f3f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-preview .gp-title {
  font-size: 20px;
  color: #1a0dab;
  font-family: var(--font-sans);
  line-height: 1.3;
  cursor: pointer;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.google-preview .gp-title:hover {
  text-decoration: underline;
}

.google-preview .gp-description {
  font-size: 14px;
  color: #4d5156;
  font-family: var(--font-sans);
  line-height: 1.58;
  word-wrap: break-word;
}

/* Character counters */
.char-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  float: right;
}

.char-counter.warning { color: var(--warning); }
.char-counter.danger { color: var(--danger); }

.seo-field-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.seo-field-group .field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ═══════════════════════════════════════
   MEDIA LIBRARY
   ═══════════════════════════════════════ */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.media-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
}

.media-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.media-item .media-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-hover);
  display: block;
}

.media-item .media-name {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 24px;
}

.media-upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.media-upload-area i {
  font-size: 36px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}

.media-upload-area p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ═══════════════════════════════════════
   SETTINGS PAGE
   ═══════════════════════════════════════ */

.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.settings-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-header i {
  color: var(--accent);
  font-size: 18px;
}

.settings-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.settings-body {
  padding: 20px;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ═══════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.3s ease;
  min-width: 280px;
  max-width: 420px;
}

.toast.toast-success { border-color: color-mix(in srgb, var(--success) 36%, var(--border)); }
.toast.toast-danger { border-color: color-mix(in srgb, var(--danger) 36%, var(--border)); }
.toast.toast-warning { border-color: color-mix(in srgb, var(--warning) 36%, var(--border)); }
.toast.toast-info { border-color: color-mix(in srgb, var(--info) 36%, var(--border)); }

.toast .toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast.toast-success .toast-icon { color: var(--success); }
.toast.toast-danger .toast-icon { color: var(--danger); }
.toast.toast-warning .toast-icon { color: var(--warning); }
.toast.toast-info .toast-icon { color: var(--info); }

.toast .toast-text { flex: 1; color: var(--text-primary); }

.toast .toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   LOADING & EMPTY STATES
   ═══════════════════════════════════════ */

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  gap: 12px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 1024px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  .mobile-menu-btn {
    display: block;
  }

  .content-area {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sites-grid {
    grid-template-columns: 1fr;
  }

  .settings-row {
    grid-template-columns: 1fr;
  }

  .editor-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Mobile sidebar overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .sidebar.open + .sidebar-overlay {
    display: block;
  }
}

/* ═══════════════════════════════════════
   BILLING & PROFILE
   ═══════════════════════════════════════ */

.billing-wrap,
.profile-wrap {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Reminder banner ─── */
.billing-reminder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.billing-reminder-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.billing-reminder-body { flex: 1; min-width: 200px; }
.billing-reminder-title { font-size: 13px; font-weight: 600; color: var(--warning); margin-bottom: 2px; }
.billing-reminder-sub   { font-size: 12px; color: var(--text-secondary); }

/* ─── Section ─── */
.billing-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.billing-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}
.billing-section-hd h3 { font-size: 14px; font-weight: 600; margin: 0; }
.billing-section-hd p  { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }

.billing-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}

/* ─── Table ─── */
.billing-table-wrap { overflow-x: auto; }
.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.billing-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.billing-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.billing-table tbody tr:last-child td { border-bottom: none; }
.billing-table tbody tr.row-pending { background: rgba(245, 158, 11, 0.04); }
.billing-table tbody tr:hover { background: var(--bg-hover); }
.td-period  { font-weight: 500; color: var(--text-primary); }
.td-inv code {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-active);
  padding: 2px 6px;
  border-radius: 4px;
}
.td-amount strong { font-weight: 600; }
.td-date { color: var(--text-secondary); }
.td-action { text-align: right; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.status-paid       { background: rgba(34,197,94,0.12);  color: var(--success); }
.status-pending    { background: rgba(245,158,11,0.12); color: var(--warning); }
.status-processing { background: rgba(99,102,241,0.12); color: var(--accent);  }
.status-overdue    { background: rgba(239,68,68,0.12);  color: var(--danger);  }

.btn-table-dl {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
}
.btn-table-dl:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Service cards ─── */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px;
}
.service-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition);
}
.service-card--highlight {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.08), 0 8px 24px rgba(99,102,241,0.08);
}
.service-card-head { display: flex; align-items: center; gap: 12px; }
.service-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-muted);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.service-card-icon--green { background: rgba(34,197,94,0.12); color: var(--success); }
.service-card-title { font-size: 14px; font-weight: 700; }
.service-card-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.service-card-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-muted);
  color: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}
.service-card-tag--green { background: rgba(34,197,94,0.12); color: var(--success); }
.service-card-price { display: flex; align-items: baseline; gap: 4px; }
.price-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.price-value--green { color: var(--success); }
.price-note { font-size: 13px; color: var(--text-muted); }
.service-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.service-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.service-features li i { color: var(--accent); font-size: 13px; }
.service-active-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(34,197,94,0.1);
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(34,197,94,0.2);
}
.btn-block { width: 100%; justify-content: center; }
.btn-accent {
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: all var(--transition);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-accent:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ─── Profile ─── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-active);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background var(--transition);
}
.profile-avatar-btn:hover { background: var(--accent-hover); }
.profile-header-name    { font-size: 18px; font-weight: 700; }
.profile-header-company { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-header-role    { font-size: 12px; color: var(--text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 5px; }

.profile-form { padding: 20px; }
.profile-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.field-input-wrap { position: relative; }
.profile-divider {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin: 8px 0 12px;
}

/* ═══════════════════════════════════════
   LANDING CMS
   ═══════════════════════════════════════ */

.cms-editor-root {
  max-width: 900px;
}

.cms-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

#cms-page-select {
  width: min(240px, 100%);
}

/* Lang tabs */
.cms-lang-tabs {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cms-lang-tab {
  position: relative;
  padding: 8px 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.04em;
}

.cms-lang-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.cms-lang-tab.active {
  color: var(--accent);
  background: var(--accent-muted);
}

.cms-saved-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-left: 5px;
  vertical-align: middle;
  margin-top: -2px;
}

/* Sections list */
.cms-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Grid 2-col */
.cms-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.cms-grid-2 .field-group {
  margin-bottom: 0;
}

/* Array helpers */
.cms-array-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cms-array-header .field-label {
  margin-bottom: 0;
}

.cms-array-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cms-arr-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cms-arr-row .form-input {
  flex: 1;
  margin-bottom: 0;
}

.cms-arr-remove {
  flex-shrink: 0;
  border-color: transparent;
  color: var(--text-muted);
}

.cms-arr-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(239,68,68,0.08);
}

.cms-page-object,
.cms-page-array {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms-page-group,
.cms-page-array-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.cms-page-group > h4,
.cms-page-array-head {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-page-array-head,
.cms-page-media-row,
.cms-page-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cms-page-image-preview {
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  object-fit: cover;
}

.cms-page-media-row {
  justify-content: flex-start;
  margin-top: 8px;
}

.cms-page-toggle {
  justify-content: flex-start;
}

@media (max-width: 680px) {
  #cms-page-select,
  .cms-editor-header > div {
    width: 100%;
  }

  .cms-editor-header > div:last-child {
    flex-wrap: wrap;
  }
}

/* Tuple row */
.cms-tuple-row {
  align-items: center;
}

.cms-tuple-inputs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.cms-tuple-inputs .form-input:first-child {
  flex: 2;
}

.cms-tuple-inputs .form-input:last-child {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
}

/* Integrations */
.integrations-admin {
  max-width: 1180px;
  margin: 0 auto;
}

.integrations-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.integrations-head .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.integrations-head h1 {
  margin: 0 0 8px;
  font-size: 26px;
}

.integrations-head p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
}

.integrations-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.integration-group h2 {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.integration-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.integration-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.integration-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.integration-title > i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  color: var(--accent-hover);
  background: var(--accent-muted);
  border-radius: var(--radius);
  font-size: 18px;
}

.integration-title h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.integration-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.integration-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.integration-status.status-connected {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.integration-status.status-error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.integration-status.status-not_connected {
  background: rgba(156, 163, 175, 0.12);
  color: var(--text-secondary);
}

.integration-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.integration-fields .form-group {
  margin: 0;
}

.integration-fields .form-group span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.integration-fields textarea.form-input {
  min-height: 116px;
  resize: vertical;
}

.integration-fields .form-group:has(textarea),
.integration-check {
  grid-column: 1 / -1;
}

.integration-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.integration-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.integration-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: var(--radius);
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  font-size: 13px;
}

.integration-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.integration-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.integration-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* Leads */
.leads-admin {
  max-width: 1240px;
  margin: 0 auto;
}

.leads-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.leads-head .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.leads-head h1 {
  margin: 0 0 8px;
  font-size: 26px;
}

.leads-head p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
}

.leads-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px;
  gap: 12px;
  margin-bottom: 14px;
}

.lead-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
}

.lead-search i {
  color: var(--text-muted);
}

.lead-search input {
  width: 100%;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
}

.lead-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lead-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
}

.lead-stat.active,
.lead-stat:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
  color: var(--text-primary);
}

.lead-stat strong {
  color: var(--text-primary);
  font-size: 18px;
}

.leads-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.35fr);
  gap: 14px;
  align-items: start;
}

.lead-list,
.lead-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lead-list {
  overflow: hidden;
}

.lead-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.lead-row:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.lead-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lead-row-main {
  min-width: 0;
}

.lead-row-main strong,
.lead-row-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-row-main span,
.lead-row-side time {
  color: var(--text-muted);
  font-size: 12px;
}

.lead-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.lead-detail {
  padding: 18px;
}

.lead-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.lead-detail-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.lead-detail-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.lead-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lead-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(156, 163, 175, 0.12);
  color: var(--text-secondary);
}

.lead-status-new { background: rgba(59, 130, 246, 0.14); color: #93c5fd; }
.lead-status-contacted { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.lead-status-qualified { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
.lead-status-won { background: rgba(34, 197, 94, 0.14); color: var(--success); }
.lead-status-lost { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.lead-status-spam { background: rgba(107, 114, 128, 0.18); color: #d1d5db; }

.lead-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lead-contact-item {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.lead-contact-item span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.lead-contact-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 13px;
}

.lead-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lead-section h3 {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.lead-message {
  margin: 0;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.lead-section pre {
  overflow: auto;
  max-height: 220px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Quiz Answers Component ───────────────────────────── */
.quiz-answers-section {
  position: relative;
}

.quiz-section-header-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-muted, rgba(49, 92, 246, 0.12));
  color: var(--accent, #315cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.quiz-cards-grid {
  margin-top: 4px;
}

.quiz-answer-card {
  background: var(--bg-card, #1a1d27);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.quiz-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(circle at 15% 20%, var(--card-glow, rgba(49, 92, 246, 0.08)) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.quiz-answer-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #315cf6) 45%, var(--border));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent, #315cf6) 25%, transparent);
}

.quiz-answer-card:hover .quiz-card-glow {
  opacity: 1;
}

.quiz-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-input, rgba(255, 255, 255, 0.06));
  color: var(--accent, #315cf6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.quiz-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quiz-card-value-box {
  background: var(--bg-input, #1e2130);
  border: 1px solid var(--border);
  min-height: 42px;
  display: flex;
  align-items: center;
}

.quiz-card-value {
  font-size: 13.5px;
  color: var(--text-primary, #ffffff);
  line-height: 1.4;
  word-break: break-word;
}

.quiz-toggle-raw-btn {
  font-size: 11px;
  font-weight: 600;
}

.quiz-toggle-raw-btn.active {
  background: var(--accent, #315cf6);
  color: #fff;
  border-color: var(--accent, #315cf6);
}

.quiz-copy-btn {
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.quiz-copy-btn:hover {
  opacity: 1;
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.automation-item {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.automation-item.ok {
  border-color: rgba(34, 197, 94, 0.28);
}

.automation-item.error {
  border-color: rgba(239, 68, 68, 0.28);
}

.automation-item span,
.automation-item small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.automation-item strong {
  display: block;
  margin: 3px 0;
  color: var(--text-primary);
}

/* ── Lead Attribution Section ─────────────────────────── */
.lead-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lead-section-title h3 {
  margin: 0 0 3px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.lead-section-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.attribution-mode {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-muted, rgba(49, 92, 246, 0.1));
  color: var(--accent, #315cf6);
  border: 1px solid color-mix(in srgb, var(--accent, #315cf6) 30%, transparent);
  white-space: nowrap;
}

.lead-attribution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.lead-attribution-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lead-attribution-grid label span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lead-attribution-grid input,
.lead-attribution-grid select {
  width: 100%;
  min-height: 34px;
  padding: 4px 9px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.lead-attribution-grid input:focus,
.lead-attribution-grid select:focus {
  border-color: var(--accent, #315cf6);
}

.lead-attribution-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.lead-attribution-foot i {
  margin-right: 3px;
}

/* ── Lead Collaboration (Tags & Comments) ─────────────── */
.lead-collaboration {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.lead-collaboration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lead-collaboration-head h3 {
  margin: 0 0 3px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.lead-collaboration-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 24px;
}

.lead-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--tag-color, #6E45E2) 40%, transparent);
  background: color-mix(in srgb, var(--tag-color, #6E45E2) 12%, transparent);
  color: var(--tag-color, #6E45E2);
  white-space: nowrap;
}

.lead-tag i {
  font-size: 7px;
  flex-shrink: 0;
}

.lead-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin-left: 2px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  transition: opacity 0.15s;
}

.lead-tag button:hover {
  opacity: 1;
}

.lead-tag-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.lead-tag-picker select {
  flex: 1;
}

.lead-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.lead-comment {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.lead-comment.is-instruction {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.05);
}

.lead-comment header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.lead-comment header strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.lead-comment header time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.lead-comment p {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.lead-comment-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-comment-compose textarea {
  min-height: 80px;
  resize: vertical;
}

.lead-comment-compose > .btn {
  align-self: flex-end;
}

/* Brand settings */
.brand-settings-admin {
  max-width: 980px;
  margin: 0 auto;
}

.settings-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.settings-page-head .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-page-head h1 {
  margin: 0 0 8px;
  font-size: 26px;
}

.settings-page-head p {
  max-width: 680px;
  margin: 0;
  color: var(--text-secondary);
}

.brand-settings-body {
  display: grid;
  gap: 16px;
}

.brand-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-image-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.brand-image-preview {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg-body);
  color: var(--text-muted);
  overflow: hidden;
}

.brand-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-image-controls {
  min-width: 0;
}

.brand-image-controls .form-input {
  margin-bottom: 8px;
}

.brand-image-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Dashboard */
.admin-dashboard,
.user-settings-admin {
  max-width: 1180px;
  margin: 0 auto;
}

.dash-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.dash-hero .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dash-hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.dash-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
}

.dash-body {
  display: grid;
  gap: 16px;
}

.dash-analytics { display: grid; gap: 12px; }
.dash-analytics > .dash-panel-head { margin-bottom: 0; padding: 4px 2px; }
.dash-panel-head .eyebrow { margin: 0 0 3px; color: var(--accent-hover); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dash-panel-head .eyebrow + h2 { font-size: 20px; }
.dash-panel-actions { display: flex; gap: 8px; }
.dash-analytics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dash-analytics-card { min-height: 122px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.dash-analytics-card-top { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.dash-analytics-card-top i { color: var(--accent-hover); font-size: 16px; }
.dash-analytics-card strong { display: block; margin-top: 18px; font-size: 26px; }
.dash-analytics-card small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; }
.dash-analytics-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; align-items: stretch; }
.dash-muted { color: var(--text-muted); font-size: 12px; }
.dash-analytics-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; color: var(--text-muted); font-size: 11px; }
.dash-analytics-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dash-analytics-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.dash-analytics-legend i.visits, .dash-trend-bars i.visits { background: var(--accent); }
.dash-analytics-legend i.visitors, .dash-trend-bars i.visitors { background: #4cc9f0; }
.dash-analytics-legend i.form-views, .dash-trend-bars i.form-views { background: #f5b942; }
.dash-analytics-legend i.requests, .dash-trend-bars i.requests { background: var(--success); }
.dash-trend { min-height: 152px; display: grid; grid-template-columns: repeat(14, minmax(18px, 1fr)); gap: 7px; align-items: end; }
.dash-trend-day { min-width: 0; display: grid; gap: 6px; align-items: end; text-align: center; }
.dash-trend-day small { color: var(--text-muted); font-size: 10px; }
.dash-trend-bars { height: 120px; display: flex; align-items: end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--border); }
.dash-trend-bars i { display: block; width: 5px; min-height: 2px; border-radius: 2px 2px 0 0; }
.dash-breakdown-list { display: grid; gap: 15px; padding: 5px 0; }
.dash-breakdown-row { display: grid; gap: 7px; }
.dash-breakdown-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.dash-breakdown-row strong { color: var(--text-primary); text-transform: capitalize; }
.dash-breakdown-row span { color: var(--text-muted); }
.dash-bar-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--bg-input); }
.dash-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.dash-sources-panel { padding-bottom: 10px; }
.dash-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dash-source-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); font-size: 12px; }
.dash-source-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-source-row span i { margin-right: 6px; color: var(--accent-hover); }
.dash-source-row strong { font-size: 13px; }
.dash-source-row small { color: var(--text-muted); }

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-metric,
.dash-panel,
.dash-action-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)), var(--bg-card);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.dash-metric:hover,
.dash-action-card:hover,
.integration-card:hover,
.lead-row:hover {
  transform: translateY(-1px);
  border-color: var(--border-light);
}

.dash-metric {
  min-height: 118px;
  padding: 18px;
  display: grid;
  align-content: space-between;
}

.dash-metric i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 18px;
}

.dash-metric span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dash-metric strong {
  font-size: 30px;
}

.dash-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: start;
}

.dash-panel {
  padding: 16px;
}

.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dash-panel-head h2 {
  margin: 0;
  font-size: 16px;
}

.dash-lead-row,
.dash-action-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.dash-lead-row {
  padding: 12px;
  margin-bottom: 8px;
}

.dash-lead-row span,
.dash-action-card span {
  min-width: 0;
}

.dash-lead-row strong,
.dash-lead-row small,
.dash-action-card strong,
.dash-action-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-lead-row small,
.dash-action-card small {
  color: var(--text-muted);
  font-size: 12px;
}

.dash-lead-row em {
  flex: 0 0 auto;
  color: var(--accent-hover);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.dash-integration-list {
  display: grid;
  gap: 8px;
}

.dash-integration {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.dash-integration span {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.dash-integration strong {
  color: var(--text-muted);
  font-size: 12px;
}

.dash-integration.ok strong { color: var(--success); }
.dash-integration.error strong { color: var(--danger); }

.dash-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-action-card {
  justify-content: flex-start;
  padding: 14px;
}

.dash-action-card i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: var(--radius);
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 18px;
}

.integration-cards-focused {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.integration-card {
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.integration-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

/* User settings */
.user-settings-body {
  display: grid;
  gap: 16px;
}

.user-profile-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.user-avatar-preview {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--accent-muted);
  color: var(--accent-hover);
  font-size: 28px;
  font-weight: 800;
  overflow: hidden;
}

.user-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.user-profile-fields .brand-image-buttons {
  grid-column: 1 / -1;
}

.twofa-box,
.twofa-setup {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  margin-bottom: 14px;
}

.twofa-box i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 19px;
}

.twofa-box.enabled i {
  color: var(--success);
  background: rgba(34, 197, 94, 0.12);
}

.twofa-box strong,
.twofa-setup strong {
  display: block;
}

.twofa-box p,
.twofa-setup p {
  margin: 3px 0 0;
  color: var(--text-muted);
}

.twofa-setup {
  align-items: flex-start;
}

.twofa-setup img {
  width: 136px;
  height: 136px;
  border-radius: var(--radius);
  background: #fff;
}

.twofa-setup code {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent-hover);
  overflow-wrap: anywhere;
}

/* Obj row (nested block-card) */
.cms-obj-row {
  margin-bottom: 0 !important;
  border-color: var(--border-light) !important;
}

.cms-obj-row .block-header {
  padding: 10px 14px;
}

.cms-obj-row .block-body {
  padding-top: 12px;
  padding-bottom: 14px;
}

/* Popups & widgets */
.widgets-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.widgets-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(34, 197, 94, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.widgets-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widgets-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.widgets-list-panel,
.widget-form-card,
.widget-preview-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.widgets-list-panel {
  position: sticky;
  top: 82px;
  overflow: hidden;
}

.widgets-list-head,
.widget-preview-head,
.widget-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.widgets-list-head span,
.widget-preview-head span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.widget-preview-head small {
  color: var(--text-muted);
}

.widgets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.widget-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.widget-list-item:hover,
.widget-list-item.active {
  transform: translateY(-1px);
  border-color: var(--accent-muted);
  background: var(--bg-hover);
}

.widget-kind-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 17px;
}

.widget-list-item strong,
.widget-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-list-item strong {
  font-size: 13px;
}

.widget-list-item small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.widget-list-item em {
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.widget-list-item em.is-on {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.widget-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 18px;
  align-items: start;
}

.widget-form-card {
  padding-bottom: 18px;
}

.widget-form-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.widget-form-card > .field-group,
.widget-form-card > .cms-grid-2,
.widget-editor-actions {
  margin: 14px 18px 0;
}

.widget-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
}

.widget-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.widget-toggle span {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.18s ease;
}

.widget-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}

.widget-toggle input:checked + span {
  background: var(--accent);
}

.widget-toggle input:checked + span::after {
  transform: translateX(18px);
}

.widget-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.widget-preview-card {
  overflow: hidden;
}

.widget-preview-stage {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    repeating-linear-gradient(45deg, var(--bg-secondary), var(--bg-secondary) 10px, var(--bg-input) 10px, var(--bg-input) 20px);
}

.landing-popup-card.preview,
.landing-popup-card {
  width: min(360px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.38);
}

.landing-popup-card.preview {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.landing-popup-card.preview.bottom-left {
  left: 16px;
  right: auto;
}

.landing-popup-card.preview.center {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.landing-popup-card img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.landing-popup-copy span {
  display: inline-flex;
  margin-bottom: 5px;
  color: #86efac;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-popup-copy h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.landing-popup-copy p {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.55;
}

.landing-widget-frame iframe {
  width: 100%;
  min-height: 220px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

/* Cookie banner CMS */
.cookie-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cookie-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(245, 158, 11, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.cookie-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cookie-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 18px;
  align-items: stretch;
}

.cookie-design-panel,
.cookie-preview-panel,
.cookie-copy-panel {
  overflow: hidden;
}

.cookie-preview-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.cookie-preview-stage {
  min-height: 360px;
  position: relative;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    repeating-linear-gradient(45deg, var(--bg-secondary), var(--bg-secondary) 10px, var(--bg-input) 10px, var(--bg-input) 20px);
}

.cookie-lang-tabs {
  margin-bottom: 16px;
}

.cookie-preview-banner {
  width: min(100%, 420px);
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), transparent),
    rgba(10, 16, 31, 0.94);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.38);
}

.cookie-preview-banner.bottom-left {
  left: 16px;
  transform: none;
}

.cookie-preview-banner.bottom-right {
  left: auto;
  right: 16px;
  transform: none;
}

.cookie-preview-banner.top-center {
  top: 16px;
  bottom: auto;
}

.cookie-preview-banner.solid {
  background: #111827;
}

.cookie-preview-banner.minimal {
  padding: 12px;
  background: rgba(17, 24, 39, 0.82);
}

.cookie-preview-banner.blue {
  border-color: rgba(59, 130, 246, 0.5);
}

.cookie-preview-banner.amber {
  border-color: rgba(245, 158, 11, 0.5);
}

.cookie-preview-banner.slate {
  border-color: rgba(148, 163, 184, 0.45);
}

.cookie-preview-copy {
  display: grid;
  gap: 8px;
}

.cookie-preview-headline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cookie-preview-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.cookie-preview-banner.blue .cookie-preview-icon {
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
}

.cookie-preview-banner.amber .cookie-preview-icon {
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.cookie-preview-banner.slate .cookie-preview-icon {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

.cookie-preview-copy p {
  margin: 0;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 1.55;
}

.cookie-preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}

.cookie-preview-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Store & contacts */
.store-admin,
.notifications-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.store-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.contact-command {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.12), transparent 36%),
    linear-gradient(160deg, var(--bg-card), var(--bg-secondary));
  box-shadow: var(--shadow-sm);
}

.contact-hero .eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-hero h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: 0;
}

.contact-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-hero-actions {
  display: flex;
  gap: 8px;
}

.contact-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.contact-metric {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.contact-metric > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 18px;
}

.contact-metric span,
.contact-metric small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.contact-metric span {
  font-weight: 800;
  text-transform: uppercase;
}

.contact-metric strong {
  display: block;
  color: var(--text-primary);
  font-size: 28px;
}

.contact-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.contact-funnel-step {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.contact-funnel-step:hover,
.contact-funnel-step.active {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.contact-funnel-step span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-funnel-step strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}

.contact-funnel-step em {
  position: absolute;
  right: 12px;
  top: 36px;
  color: var(--text-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.contact-funnel-step b {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
}

.tone-blue { --stage: #3b82f6; }
.tone-amber { --stage: #f59e0b; }
.tone-violet { --stage: #8b5cf6; }
.tone-green { --stage: #22c55e; }
.tone-slate { --stage: #94a3b8; }

.tone-blue b,
.tone-blue.contact-funnel-step b { background: #3b82f6; }
.tone-amber b,
.tone-amber.contact-funnel-step b { background: #f59e0b; }
.tone-violet b,
.tone-violet.contact-funnel-step b { background: #8b5cf6; }
.tone-green b,
.tone-green.contact-funnel-step b { background: #22c55e; }
.tone-slate b,
.tone-slate.contact-funnel-step b { background: #94a3b8; }

.contact-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px auto;
  gap: 12px;
}

.contact-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.contact-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contact-view-toggle button.active,
.contact-view-toggle button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.contact-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.contact-empty-state {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px;
  color: var(--text-secondary);
  text-align: center;
}

.contact-empty-state > i {
  color: var(--accent-hover);
  font-size: 32px;
}

.contact-empty-state h3 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 18px;
}

.contact-empty-state p {
  max-width: 48ch;
  margin: 0 0 6px;
  line-height: 1.5;
}

.contact-main,
.contact-inspector {
  min-height: 540px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.contact-main {
  overflow: hidden;
}

.contact-main.is-board {
  overflow-x: auto;
  overflow-y: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

.contact-board-pro {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 0;
  overflow-x: auto;
}

.pro-stage {
  min-height: 540px;
  padding: 12px;
  border-right: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    var(--bg-card);
}

.pro-stage:last-child {
  border-right: 0;
}

.pro-stage.is-over {
  background: var(--accent-muted);
}

.pro-stage header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pro-stage header span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.pro-stage header i {
  color: var(--stage);
}

.pro-stage header strong {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--bg-input);
  font-size: 12px;
}

.pro-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.pro-card:hover,
.pro-card.active {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--bg-hover);
}

.pro-card-top,
.pro-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contact-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 999px;
  color: var(--accent-hover);
  background: var(--accent-muted);
  font-size: 12px;
  font-weight: 900;
}

.contact-avatar-lg {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  font-size: 18px;
}

.pro-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-card p {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-card-meta {
  display: grid;
  gap: 5px;
}

.pro-card-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-card footer small,
.pro-card footer em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}

.pro-card footer em {
  color: var(--accent-hover);
  font-weight: 800;
}

.contact-table {
  display: grid;
}

.contact-table-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(180px, 0.9fr) minmax(130px, 0.65fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.contact-table-row:hover,
.contact-table-row.active {
  background: var(--bg-hover);
}

.contact-table-row strong,
.contact-table-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-table-row small,
.contact-table-row > span:not(:first-child) {
  color: var(--text-muted);
  font-size: 12px;
}

.contact-inspector {
  overflow: hidden;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  pointer-events: none;
}

.contact-modal.is-open {
  display: block;
  pointer-events: auto;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    rgba(3, 8, 18, 0.62);
  backdrop-filter: blur(8px);
  animation: contactBackdropIn 180ms ease both;
}

.contact-inspector-modal {
  position: absolute;
  top: 50%;
  right: clamp(18px, 4vw, 64px);
  width: min(620px, calc(100vw - 36px));
  max-height: min(86vh, 860px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateY(-50%);
  animation: contactModalIn 220ms cubic-bezier(.16, 1, .3, 1) both;
}

.contact-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.contact-inspector-scroll {
  min-height: 0;
  overflow: auto;
  padding-bottom: 18px;
}

@keyframes contactBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes contactModalIn {
  from {
    opacity: 0;
    transform: translate3d(18px, -50%, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
  }
}

.contact-inspector-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stage) 18%, transparent), transparent),
    var(--bg-secondary);
}

.contact-inspector-head span {
  display: block;
  color: var(--stage);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.contact-inspector-head h2 {
  margin: 4px 0 2px;
  font-size: 20px;
}

.contact-inspector-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.contact-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.contact-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 18px 0;
}

.contact-inspector .lead-section {
  margin-left: 18px;
  margin-right: 18px;
}

.contacts-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(34, 197, 94, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.notifications-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(168, 85, 247, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.store-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 18px;
}

.store-preview-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.store-preview-stage {
  min-height: 420px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    var(--bg-secondary);
}

.store-preview-block {
  display: grid;
  gap: 12px;
}

.store-preview-block > span {
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.store-preview-block h3,
.store-preview-block p {
  margin: 0;
}

.store-preview-block p {
  color: var(--text-muted);
}

.store-preview-products {
  display: grid;
  gap: 10px;
}

.store-preview-products article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.store-preview-products em {
  color: var(--accent-hover);
  font-style: normal;
  font-weight: 900;
}

.store-preview-products small {
  color: var(--text-muted);
}

.store-array-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.store-link-row {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
}

.contacts-admin .contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
}

.contacts-admin .contacts-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(260px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  min-width: 0;
}

.contacts-admin .contact-stage {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.contacts-admin .contact-stage.is-over {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.contacts-admin .contact-stage header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.contacts-admin .contact-stage-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
}

.contacts-admin .contact-stage header span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.contacts-admin .contact-stage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.contacts-admin .contact-stage-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
  padding: 16px;
}

.contacts-admin .contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: grab;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.contacts-admin .contact-card:hover,
.contacts-admin .contact-card.active {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.contacts-admin .contact-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.contacts-admin .contact-card-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.contacts-admin .contact-card-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-admin .contact-card-company {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-admin .contact-card-message {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--bg-input);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-admin .contact-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.contacts-admin .contact-card-date {
  font-size: 11.5px;
  color: var(--text-muted);
}

.contacts-admin .contact-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.notifications-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.notification-card {
  cursor: pointer;
}

.notification-card .settings-body {
  display: grid;
  gap: 14px;
}

.notification-card p,
.muted-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.notification-interval {
  grid-column: span 3;
}

.floating-editor-panel {
  overflow: hidden;
}

.floating-editor-grid,
.client-portal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 18px;
  align-items: start;
}

.floating-preview-card,
.portal-preview-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.floating-preview-stage {
  min-height: 480px;
  position: relative;
  display: block;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 20%, rgba(132, 99, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    var(--bg-secondary);
}

.floating-editor-form {
  display: grid;
  gap: 14px;
}

.floating-editor-subhead {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-card) 82%, var(--accent-muted));
}

.floating-editor-subhead span {
  color: var(--text-primary);
  font-weight: 800;
}

.floating-editor-subhead small {
  color: var(--text-muted);
  line-height: 1.45;
}

.floating-site-preview {
  position: absolute;
  display: grid;
  gap: 12px;
  max-width: min(360px, calc(100% - 36px));
}

.floating-site-preview.is-bottom-right {
  right: 18px;
  bottom: 18px;
  justify-items: end;
}

.floating-site-preview.is-bottom-left {
  left: 18px;
  bottom: 18px;
  justify-items: start;
}

.floating-site-preview.is-top-right {
  top: 18px;
  right: 18px;
  justify-items: end;
}

.floating-site-preview.is-top-left {
  top: 18px;
  left: 18px;
  justify-items: start;
}

.floating-preview-panel {
  width: min(340px, 100%);
  padding: 18px;
  border: 1px solid rgba(139, 114, 255, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent),
    rgba(8, 18, 36, 0.96);
  color: #f7f8ff;
  box-shadow:
    0 24px 80px rgba(2, 6, 23, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.floating-preview-slots {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.floating-preview-slots span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid rgba(198, 211, 255, 0.16);
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  color: #f7f8ff;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-preview-contact-icon,
.floating-preview-contact-icon svg {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.floating-preview-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 10px;
}

.floating-preview-ai-btn,
.floating-preview-round-btn {
  height: 52px;
  border: 1px solid rgba(139, 114, 255, 0.28);
  color: #f7f8ff;
  background: rgba(11, 20, 38, 0.92);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.36);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.floating-preview-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  font-weight: 850;
}

.floating-preview-ai-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #8f6bff, #5e8cff);
  box-shadow: 0 8px 18px rgba(120, 100, 255, 0.34);
}

.floating-preview-ai-icon svg {
  width: 18px;
  height: 18px;
}

.floating-preview-round-btn {
  width: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 18px;
}

.floating-preview-ai-btn:hover,
.floating-preview-round-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(170, 150, 255, 0.58);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.44);
}

.client-portal-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.client-portal-head {
  background:
    radial-gradient(circle at 82% 12%, rgba(14, 165, 233, 0.14), transparent 28%),
    linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
}

.portal-lang-tabs {
  margin: 12px 0 16px;
}

.portal-preview-card {
  min-height: 430px;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  background:
    radial-gradient(circle at 22% 8%, rgba(59, 130, 246, 0.14), transparent 30%),
    var(--bg-secondary);
}

.portal-preview-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-primary);
}

.portal-preview-brand i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-hover);
  background: var(--accent-muted);
}

.portal-preview-card h2 {
  margin: 8px 0 0;
  font-size: 24px;
  letter-spacing: 0;
}

.portal-preview-card p,
.portal-preview-card small {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.portal-dashboard-editor {
  margin-top: 18px;
}

@media (max-width: 600px) {
  .cms-grid-2 {
    grid-template-columns: 1fr;
  }
  .cms-lang-tab {
    padding: 8px 14px;
  }
  .integrations-head,
  .integration-card-head,
  .integration-actions {
    flex-direction: column;
  }
  .integration-fields {
    grid-template-columns: 1fr;
  }
  .integration-buttons {
    justify-content: flex-start;
  }
  .leads-head,
  .lead-detail-head {
    flex-direction: column;
  }
  .leads-toolbar,
  .leads-layout,
  .lead-contact-grid,
  .automation-grid,
  .settings-page-head,
  .dash-hero,
  .dash-analytics-grid,
  .dash-analytics-layout,
  .dash-metrics,
  .dash-layout,
  .dash-actions,
  .user-profile-grid,
  .user-profile-fields,
  .widgets-shell,
  .widget-editor-grid,
  .cookie-layout,
  .store-layout,
  .contacts-admin .contacts-layout,
  .contact-metrics,
  .contact-funnel,
  .contact-toolbar,
  .contact-workspace,
  .contact-inspector-grid,
  .notifications-grid,
  .floating-editor-grid,
  .client-portal-layout,
  .brand-settings-grid,
  .brand-image-field {
    grid-template-columns: 1fr;
  }
  .dash-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-interval {
    grid-column: auto;
  }
  .contact-board-pro,
  .contacts-admin .contacts-board {
    grid-template-columns: repeat(5, minmax(220px, 1fr));
  }
  .settings-page-head,
  .dash-hero,
  .widgets-actions,
  .widget-editor-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .widgets-list-panel {
    position: static;
  }
}

/* Client management and audit logs */
.admin-list {
  display: grid;
  gap: 10px;
}

.admin-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.admin-row:hover,
.admin-row.active {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.admin-row strong,
.admin-row span {
  display: block;
}

.admin-row strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.admin-row span {
  color: var(--text-muted);
  font-size: 12px;
}

.admin-row-meta {
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.log-row {
  cursor: default;
}

.log-summary {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.log-details {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.log-details summary {
  cursor: pointer;
  color: var(--accent);
}

.log-details pre {
  max-width: min(760px, 100%);
  max-height: 220px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-input));
}

.metric-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-muted);
  color: var(--accent-hover);
}

.metric-value {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.metric-label {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .admin-row,
  .admin-row-meta {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .admin-row {
    flex-direction: column;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   2026 Admin Refresh — crisp control room UI
   ═══════════════════════════════════════ */
:root {
  --bg-body: #080c12;
  --bg-sidebar: #0d131c;
  --bg-card: #111925;
  --bg-input: #0b1119;
  --bg-hover: #172231;
  --bg-active: #1b2a3b;
  --border: #263544;
  --border-light: #3a5062;
  --text-primary: #f5f8fb;
  --text-secondary: #b8c2cc;
  --text-muted: #748391;
  --accent: #35d2f2;
  --accent-hover: #83ecff;
  --accent-muted: rgba(53, 210, 242, 0.13);
  --success: #5ee39a;
  --warning: #f4bd57;
  --danger: #ff6b7a;
  --info: #74a7ff;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-card: 0 18px 58px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.26);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 6%, rgba(53, 210, 242, 0.12), transparent 34vw),
    radial-gradient(circle at 18% 92%, rgba(116, 167, 255, 0.08), transparent 30vw),
    linear-gradient(180deg, #080c12 0%, #0a1018 48%, #080c12 100%);
}

body:not(.login-page)::before {
  content: none;
}

.login-page {
  background:
    radial-gradient(circle at 50% 18%, rgba(53, 210, 242, 0.16), transparent 32vw),
    linear-gradient(135deg, #070b11, #0e1721 58%, #080c12);
}

.login-card {
  border-color: rgba(93, 224, 250, 0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17,25,37,.96), rgba(11,17,25,.96));
  box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.04);
  animation: adminFadeUp .5s ease both;
}

.login-logo,
.sidebar-logo,
.stat-card .stat-icon,
.metric-icon,
.block-header .block-icon,
.dash-metric i,
.dash-action-card i,
.integration-title > i,
.contact-avatar {
  border: 1px solid rgba(53, 210, 242, 0.22);
  background: linear-gradient(135deg, rgba(53,210,242,.18), rgba(116,167,255,.08));
  color: var(--accent-hover);
}

.btn,
.btn-icon,
.form-input,
.form-select,
.form-textarea,
.site-selector select {
  border-radius: 6px;
}

.btn-primary {
  color: #051118;
  background: linear-gradient(135deg, var(--accent), #82edff);
  box-shadow: 0 10px 28px rgba(53, 210, 242, 0.2);
}

.btn-primary:hover {
  color: #051118;
  background: linear-gradient(135deg, #83ecff, #35d2f2);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-icon {
  background: rgba(17,25,37,.88);
  border-color: var(--border);
}

.btn-secondary:hover,
.btn-icon:hover {
  border-color: rgba(53,210,242,.45);
  background: #142232;
  transform: translateY(-1px);
}

.form-input,
.form-select,
.form-textarea,
.site-selector select,
.login-card .form-input {
  background: rgba(8,13,20,.92);
  border-color: #2b3b4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.site-selector select:focus,
.login-card .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53,210,242,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(13,19,28,.98), rgba(9,14,21,.98)),
    var(--bg-sidebar);
  border-right-color: rgba(74, 96, 113, 0.42);
  box-shadow: 18px 0 60px rgba(0,0,0,.22);
}

.sidebar-header,
.sidebar-footer,
.topbar {
  border-color: rgba(74,96,113,.34);
}

.sidebar-logo {
  box-shadow: 0 0 28px rgba(53,210,242,.14);
}

.sidebar-brand {
  letter-spacing: .01em;
}

.nav-section {
  padding-top: 14px;
  color: #6f8191;
  font-size: 10px;
  letter-spacing: .12em;
}

.nav-item {
  position: relative;
  margin: 1px 10px;
  padding: 10px 12px;
  border-left: 0;
  border-radius: 6px;
}

.nav-item:hover {
  background: rgba(53,210,242,.07);
}

.nav-item.active {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(53,210,242,.18), rgba(116,167,255,.08));
  box-shadow: inset 0 0 0 1px rgba(53,210,242,.22), 0 10px 26px rgba(0,0,0,.16);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.topbar {
  height: 64px;
  background: rgba(10,16,24,.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}

.topbar-title {
  font-size: 18px;
  font-weight: 800;
}

.content-area {
  padding: 30px;
}

.stat-card,
.site-card,
.page-item,
.block-card,
.preview-panel,
.dash-panel,
.dash-metric,
.dash-action-card,
.dash-analytics-card,
.integration-card,
.lead-stat,
.lead-list,
.lead-detail,
.widgets-list-panel,
.widget-form-card,
.widget-preview-card,
.admin-row,
.metric-card,
.portal-preview-panel,
.portal-preview-card,
.contact-card,
.contact-inspector,
.contacts-board,
.billing-table-wrap,
.service-card {
  border-color: rgba(74,96,113,.42);
  background: linear-gradient(180deg, rgba(17,25,37,.96), rgba(13,19,29,.96));
  box-shadow: var(--shadow-soft);
}

.stat-card,
.site-card,
.page-item,
.block-card,
.dash-panel,
.dash-metric,
.dash-action-card,
.dash-analytics-card,
.integration-card,
.lead-stat,
.admin-row,
.metric-card,
.service-card {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.stat-card:hover,
.site-card:hover,
.page-item:hover,
.block-card:hover,
.dash-metric:hover,
.dash-action-card:hover,
.dash-analytics-card:hover,
.integration-card:hover,
.lead-stat:hover,
.admin-row:hover,
.metric-card:hover,
.service-card:hover {
  border-color: rgba(53,210,242,.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.empty-state,
.loading-state {
  border: 1px solid rgba(74,96,113,.34);
  border-radius: 8px;
  background: rgba(11,17,25,.76);
}

.spinner {
  border-color: rgba(53,210,242,.16);
  border-top-color: var(--accent);
}

.toast {
  border-color: rgba(74,96,113,.44);
  background: rgba(17,25,37,.96);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
}

.admin-dashboard {
  display: grid;
  gap: 20px;
  animation: adminFadeUp .42s ease both;
}

.dash-hero,
.widgets-head,
.integrations-head,
.leads-head,
.settings-page-head,
.contacts-admin .contacts-head,
.client-portal-head {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74,96,113,.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15,37,51,.96) 0%, rgba(16,24,35,.96) 55%, rgba(18,28,40,.96) 100%);
  box-shadow: var(--shadow-card);
}

.dash-hero::before,
.widgets-head::before,
.integrations-head::before,
.leads-head::before,
.settings-page-head::before,
.contacts-admin .contacts-head::before,
.client-portal-head::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(110deg, transparent 18%, rgba(53,210,242,.11) 48%, transparent 74%);
  pointer-events: none;
}

.dash-hero h1,
.integrations-head h1,
.leads-head h1,
.settings-page-head h1,
.widgets-head h1 {
  letter-spacing: 0;
  text-wrap: balance;
}

.eyebrow,
.dash-hero .eyebrow,
.dash-panel-head .eyebrow,
.integrations-head .eyebrow,
.leads-head .eyebrow,
.messenger-inbox-heading .eyebrow {
  color: var(--accent-hover);
  letter-spacing: .12em;
}

.dash-analytics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.dash-analytics-card {
  min-height: 138px;
  padding: 17px;
  position: relative;
  overflow: hidden;
}

.dash-analytics-card::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(53,210,242,.17);
  background: rgba(53,210,242,.06);
  transform: rotate(18deg);
}

.dash-analytics-card strong {
  font-size: 31px;
  line-height: 1;
}

.dash-analytics-layout {
  gap: 16px;
}

.dash-panel {
  padding: 20px;
}

.dash-panel-head {
  gap: 16px;
  margin-bottom: 18px;
}

.dash-panel-head h2 {
  font-size: 21px;
  letter-spacing: 0;
}

.dash-trend {
  min-height: 188px;
  gap: 8px;
}

.dash-trend-bars {
  height: 150px;
  border-bottom-color: rgba(74,96,113,.48);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.018));
}

.dash-trend-bars i {
  width: 6px;
  box-shadow: 0 0 16px rgba(53,210,242,.16);
  transition: filter .18s ease;
}

.dash-trend-day:hover .dash-trend-bars i {
  filter: brightness(1.22);
}

.dash-bar-track {
  height: 8px;
  background: rgba(8,13,20,.9);
}

.dash-bar-track i {
  background: linear-gradient(90deg, var(--accent), #83ecff);
  box-shadow: 0 0 18px rgba(53,210,242,.25);
}

.dash-source-row,
.dash-lead-row,
.dash-integration {
  border-color: rgba(74,96,113,.36);
  background: rgba(8,13,20,.54);
}

.dash-source-row:hover,
.dash-lead-row:hover,
.dash-integration:hover {
  border-color: rgba(53,210,242,.4);
  background: rgba(20,34,50,.82);
}

.dash-metrics,
.dash-layout,
.dash-actions {
  gap: 16px;
}

.dash-metric {
  min-height: 128px;
  align-content: start;
}

.dash-metric strong {
  font-size: 34px;
}

.dash-action-card {
  min-height: 88px;
}

.integration-status {
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.lead-status {
  border-radius: 999px;
}

.billing-table,
.contact-table {
  border-collapse: separate;
  border-spacing: 0;
}

.billing-table thead th,
.contact-table-row:first-child,
.product-head {
  background: rgba(8,13,20,.82);
}

.billing-table tbody tr:hover,
.contact-table-row:hover {
  background: rgba(53,210,242,.055);
}

.modal-content,
.editor-panel,
.content-card,
.cms-lang-tabs,
.nested,
.array-item {
  border-color: rgba(74,96,113,.42);
  background: linear-gradient(180deg, rgba(17,25,37,.96), rgba(13,19,29,.96));
}

@keyframes adminFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1280px) {
  .dash-analytics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .content-area {
    padding: 18px;
  }
  .topbar {
    height: 58px;
  }
  .dash-analytics-grid,
  .dash-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .dash-analytics-grid,
  .dash-source-grid {
    grid-template-columns: 1fr;
  }
  .dash-trend {
    overflow-x: auto;
    grid-template-columns: repeat(14, minmax(30px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════
   Attribution Analytics — signal room
   ═══════════════════════════════════════ */
.attr-shell {
  --attr-purple: var(--accent, #6e45e2);
  --attr-purple-soft: var(--accent-light, #f0ecff);
  --attr-cyan: #1597b0;
  --attr-green: var(--success, #0f9f6e);
  --attr-amber: var(--warning, #b7791f);
  display: grid;
  gap: 18px;
  width: min(100%, 1680px);
  margin: 0 auto;
  padding: 4px 0 42px;
  color: var(--text-primary);
}
.attr-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 420px);
  gap: 36px;
  min-height: 258px;
  padding: clamp(24px, 3.2vw, 42px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--attr-purple), transparent 82%), transparent 38%),
    radial-gradient(circle at 92% 115%, color-mix(in srgb, var(--attr-cyan), transparent 86%), transparent 34%),
    var(--bg-card);
  box-shadow: 0 26px 70px -48px rgba(30, 82, 170, 0.42);
}
.attr-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -35%;
  width: 34%;
  opacity: 0.56;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--attr-purple), transparent 88%), transparent);
  transform: skewX(-14deg);
  animation: attr-scan 8s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes attr-scan { 45%, 100% { transform: translateX(405%) skewX(-14deg); } }
.attr-hero-copy { align-self: end; }
.attr-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; color: var(--attr-purple); font: 700 11px/1 var(--mono-font); letter-spacing: .09em; }
.attr-hero h1 { max-width: 760px; margin: 0; color: var(--text-primary); font-size: clamp(34px, 4.2vw, 62px); line-height: .98; letter-spacing: -.035em; }
.attr-hero p { max-width: 68ch; margin: 18px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
.attr-coverage { display: grid; grid-template-columns: minmax(120px, 220px) auto 1fr; gap: 10px; align-items: center; max-width: 650px; margin-top: 25px; color: var(--text-muted); font-size: 11px; }
.attr-coverage > span { position: relative; height: 5px; overflow: hidden; border-radius: 5px; background: var(--border-light); }
.attr-coverage > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--coverage); border-radius: inherit; background: var(--attr-purple); }
.attr-coverage strong { color: var(--text-primary); font-size: 12px; }
.attr-controls { align-self: end; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-card), transparent 8%); }
.attr-control-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 8px; background: var(--bg-input); }
.attr-control-group:nth-child(2) { grid-template-columns: repeat(2, 1fr); }
.attr-control-group button,
.attr-sync,
.attr-primary,
.attr-quiet { min-height: 44px; border: 0; border-radius: 6px; font: 700 12px/1.2 inherit; cursor: pointer; transition: transform .22s cubic-bezier(.22, 1, .36, 1), background-color .22s, color .22s, box-shadow .22s; }
.attr-control-group button { background: transparent; color: var(--text-muted); }
.attr-control-group button:hover { color: var(--text-primary); }
.attr-control-group button.active { background: var(--bg-card); color: var(--attr-purple); box-shadow: 0 6px 18px -14px rgba(30, 82, 170, .6); }
.attr-sync,
.attr-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--attr-purple); color: #fff; }
.attr-sync:hover,
.attr-primary:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--attr-purple), #000 12%); box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--attr-purple), transparent 25%); }
.attr-controls > small { color: var(--text-muted); text-align: center; font-size: 10px; }
.attr-connections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.attr-connection { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 10px; gap: 12px; align-items: center; min-height: 68px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); text-align: left; cursor: pointer; transition: transform .22s cubic-bezier(.22, 1, .36, 1), border-color .22s, box-shadow .22s; }
.attr-connection:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--attr-purple), var(--border) 55%); box-shadow: 0 18px 36px -30px rgba(30, 82, 170, .55); }
.attr-connection > i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: var(--attr-purple-soft); color: var(--attr-purple); font-size: 17px; }
.attr-connection > span { display: grid; gap: 4px; min-width: 0; }
.attr-connection strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attr-connection small { color: var(--text-muted); font-size: 10px; }
.attr-connection > b { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted), transparent 88%); }
.attr-connection.is-connected > b { background: var(--attr-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--attr-green), transparent 86%); }
.attr-connection.is-partial > b { background: var(--attr-amber); }
.attr-connection.is-error > b { background: var(--danger); }
.attr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.attr-kpis article { position: relative; display: grid; min-height: 132px; align-content: start; padding: 17px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); transition: transform .22s cubic-bezier(.22, 1, .36, 1), border-color .22s, box-shadow .22s; }
.attr-kpis article:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--attr-purple), var(--border) 58%); box-shadow: 0 20px 38px -32px rgba(30, 82, 170, .6); }
.attr-kpis article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }
.attr-kpis article > div i { color: var(--attr-purple); font-size: 15px; }
.attr-kpis article > strong { margin-top: 17px; font-size: clamp(25px, 2.3vw, 36px); line-height: 1; letter-spacing: -.025em; }
.attr-kpis article > small { margin-top: 8px; color: var(--text-muted); font-size: 10px; }
.attr-kpis article > em { position: absolute; right: 12px; bottom: 10px; color: var(--attr-purple); font: 700 9px/1 var(--font-mono); font-style: normal; text-transform: uppercase; }
.attr-funnel,
.attr-panel { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.attr-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.attr-section-head h2 { margin: 0; color: var(--text-primary); font-size: 18px; letter-spacing: -.018em; }
.attr-section-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; }
.attr-model-note { padding: 6px 9px; border-radius: 999px; background: var(--attr-purple-soft); color: var(--attr-purple); font: 700 10px/1 var(--font-mono); white-space: nowrap; }
.attr-funnel-path { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; }
.attr-funnel-path > i { color: var(--text-muted); text-align: center; }
.attr-funnel-path article { position: relative; display: grid; min-height: 106px; align-content: center; padding: 16px; overflow: hidden; border-radius: 9px; background: var(--bg-input); }
.attr-funnel-path article::after { content: ""; position: absolute; inset: auto 0 0; width: var(--stage); height: 3px; background: var(--attr-purple); }
.attr-funnel-path span { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.attr-funnel-path strong { margin-top: 8px; font-size: 27px; line-height: 1; }
.attr-funnel-path small { margin-top: 7px; color: var(--text-muted); font-size: 10px; }
.attr-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(420px, .9fr); gap: 18px; }
.attr-legend { display: flex; gap: 12px; color: var(--text-muted); font-size: 10px; }
.attr-legend span { display: flex; align-items: center; gap: 5px; }
.attr-legend i { width: 8px; height: 8px; border-radius: 2px; }
.attr-legend .session { background: var(--attr-purple); }
.attr-legend .lead { background: var(--attr-cyan); }
.attr-chart { display: grid; grid-template-columns: repeat(var(--columns), minmax(11px, 1fr)); gap: 5px; height: 260px; align-items: end; padding-top: 12px; overflow: hidden; }
.attr-chart-day { display: grid; grid-template-rows: 220px 24px; gap: 5px; min-width: 0; }
.attr-chart-day > div { display: flex; align-items: end; justify-content: center; gap: 2px; height: 100%; border-bottom: 1px solid var(--border); }
.attr-chart-day i { display: block; width: min(9px, 45%); min-height: 3px; border-radius: 4px 4px 1px 1px; transform-origin: bottom; animation: attr-bars .7s cubic-bezier(.22, 1, .36, 1) both; }
.attr-chart-day i.session { background: var(--attr-purple); }
.attr-chart-day i.lead { background: var(--attr-cyan); }
@keyframes attr-bars { from { clip-path: inset(100% 0 0); } to { clip-path: inset(0); } }
.attr-chart-day > span { overflow: hidden; color: var(--text-muted); font: 600 8px/1 var(--font-mono); text-align: center; text-overflow: clip; white-space: nowrap; }
.attr-channel-list { display: grid; }
.attr-channel-list article { position: relative; display: grid; grid-template-columns: 24px minmax(110px, 1fr) repeat(4, minmax(52px, auto)); gap: 10px; align-items: center; min-height: 62px; padding: 9px 0; border-bottom: 1px solid var(--border-light); }
.attr-channel-list article:last-child { border-bottom: 0; }
.attr-channel-list article > b { color: var(--text-muted); font: 700 10px/1 var(--font-mono); }
.attr-channel-list article > div { display: grid; gap: 3px; min-width: 0; }
.attr-channel-list article > div strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attr-channel-list article > div small { color: var(--text-muted); font-size: 9px; }
.attr-channel-list article > span { display: grid; gap: 4px; font-size: 10px; font-weight: 700; text-align: right; }
.attr-channel-list article > span small { color: var(--text-muted); font-size: 8px; font-weight: 500; }
.attr-channel-list article > i { position: absolute; inset: auto auto 0 24px; width: var(--share); max-width: calc(100% - 24px); height: 1px; background: var(--attr-purple); }
.attr-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); }
.attr-quiet:hover { transform: translateY(-1px); border-color: var(--attr-purple); color: var(--attr-purple); }
.attr-table-wrap { overflow-x: auto; }
.attr-table-wrap table { width: 100%; min-width: 930px; border-collapse: collapse; font-size: 11px; }
.attr-table-wrap th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 9px; font-weight: 700; text-align: right; text-transform: uppercase; letter-spacing: .05em; }
.attr-table-wrap th:first-child,
.attr-table-wrap th:nth-child(2),
.attr-table-wrap td:first-child,
.attr-table-wrap td:nth-child(2) { text-align: left; }
.attr-table-wrap td { padding: 13px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); text-align: right; }
.attr-table-wrap td:first-child { display: grid; gap: 4px; color: var(--text-primary); }
.attr-table-wrap td:first-child small { color: var(--text-muted); font: 500 9px/1 var(--font-mono); }
.attr-table-wrap tbody tr:hover { background: var(--bg-input); }
.attr-roas { display: inline-flex; min-width: 48px; justify-content: center; padding: 5px 7px; border-radius: 6px; background: var(--bg-input); color: var(--text-muted); font-weight: 700; }
.attr-roas.positive { background: color-mix(in srgb, var(--attr-green), transparent 88%); color: var(--attr-green); }
.attr-journey-list { display: grid; }
.attr-journey-list article { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.4fr) minmax(130px, auto); gap: 18px; align-items: center; min-height: 82px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.attr-journey-list article:last-child { border-bottom: 0; }
.attr-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.attr-person > b { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 9px; background: var(--attr-purple-soft); color: var(--attr-purple); font-size: 11px; }
.attr-person > span,
.attr-route,
.attr-outcome { display: grid; gap: 4px; min-width: 0; }
.attr-person strong,
.attr-person small,
.attr-route span,
.attr-route strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-person strong { font-size: 12px; }
.attr-person small,
.attr-route small,
.attr-outcome small { color: var(--text-muted); font-size: 9px; }
.attr-route { grid-template-columns: minmax(100px, auto) 18px minmax(120px, 1fr); align-items: center; }
.attr-route > i { color: var(--attr-purple); font-size: 11px; }
.attr-route > span { color: var(--text-secondary); font-size: 10px; }
.attr-route > strong { font-size: 11px; }
.attr-route > small { grid-column: 1 / -1; }
.attr-outcome { justify-items: end; }
.attr-outcome > span { padding: 4px 7px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.attr-outcome > span.is-won { background: color-mix(in srgb, var(--attr-green), transparent 88%); color: var(--attr-green); }
.attr-outcome > span.is-lost { background: color-mix(in srgb, var(--danger), transparent 90%); color: var(--danger); }
.attr-empty-inline,
.attr-error { display: flex; align-items: center; gap: 16px; min-height: 130px; padding: 20px; border-radius: 9px; background: var(--bg-input); }
.attr-empty-inline > i,
.attr-error > i { color: var(--attr-purple); font-size: 28px; }
.attr-empty-inline strong,
.attr-error strong { font-size: 13px; }
.attr-empty-inline p,
.attr-error p { max-width: 70ch; margin: 5px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.attr-error { min-height: 170px; border: 1px solid color-mix(in srgb, var(--danger), var(--border) 64%); }
.attr-error > i { color: var(--danger); }
.attr-error .attr-primary { margin-left: auto; padding: 0 18px; }
.attr-loading { min-height: 420px; place-items: center; align-content: center; text-align: center; }
.attr-loading-mark { display: flex; align-items: end; gap: 4px; width: 52px; height: 42px; margin-bottom: 10px; }
.attr-loading-mark span { width: 14px; border-radius: 3px 3px 1px 1px; background: var(--attr-purple); animation: attr-load 1.2s ease-in-out infinite alternate; }
.attr-loading-mark span:nth-child(1) { height: 35%; }
.attr-loading-mark span:nth-child(2) { height: 85%; animation-delay: -.4s; }
.attr-loading-mark span:nth-child(3) { height: 58%; animation-delay: -.8s; }
@keyframes attr-load { to { height: 100%; opacity: .42; } }
.attr-loading strong { font-size: 14px; }
.attr-loading small { margin-top: -10px; color: var(--text-muted); }

@media (max-width: 1260px) {
  .attr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attr-main-grid { grid-template-columns: 1fr; }
  .attr-connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .attr-hero { grid-template-columns: 1fr; min-height: 0; }
  .attr-controls { width: 100%; }
  .attr-funnel-path { grid-template-columns: 1fr; gap: 8px; }
  .attr-funnel-path > i { transform: rotate(90deg); }
  .attr-journey-list article { grid-template-columns: 1fr auto; }
  .attr-route { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 620px) {
  .attr-shell { gap: 12px; }
  .attr-hero,
  .attr-panel,
  .attr-funnel { padding: 17px; border-radius: 10px; }
  .attr-hero h1 { font-size: 36px; }
  .attr-coverage { grid-template-columns: 1fr auto; }
  .attr-coverage > div { grid-column: 1 / -1; }
  .attr-connections,
  .attr-kpis { grid-template-columns: 1fr 1fr; }
  .attr-connection { grid-template-columns: 36px minmax(0, 1fr) 9px; padding: 9px; }
  .attr-connection > i { width: 36px; height: 36px; }
  .attr-kpis article { min-height: 118px; padding: 14px; }
  .attr-chart { gap: 2px; }
  .attr-chart-day > span { transform: rotate(-60deg); transform-origin: top center; }
  .attr-channel-list article { grid-template-columns: 20px minmax(100px, 1fr) repeat(2, minmax(50px, auto)); }
  .attr-channel-list article > span:nth-of-type(1),
  .attr-channel-list article > span:nth-of-type(4) { display: none; }
  .attr-section-head { align-items: flex-start; flex-direction: column; }
  .attr-quiet { width: 100%; }
  .attr-journey-list article { grid-template-columns: 1fr; }
  .attr-outcome { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; }
  .attr-route { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .attr-hero::after,
  .attr-chart-day i,
  .attr-loading-mark span { animation: none; }
  .attr-control-group button,
  .attr-sync,
  .attr-primary,
  .attr-quiet,
  .attr-connection,
  .attr-kpis article { transition: none; }
}

/* Standalone dashboard/editor compatibility */
.dashboard-standalone .standalone-shell {
  width: min(1220px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 24px 0 46px;
}

.standalone-topbar,
.navbar {
  min-height: 64px;
  margin-bottom: 22px;
  padding: 0 18px;
  border: 1px solid rgba(74,96,113,.42);
  border-radius: 8px;
  background: rgba(10,16,24,.84);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.standalone-brand,
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-weight: 800;
}

.standalone-brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), #83ecff);
  color: #051118;
  box-shadow: 0 0 24px rgba(53,210,242,.18);
}

.standalone-hero {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.standalone-sites {
  padding: 22px;
}

.row.sites-grid,
.sites-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px !important;
}

.sites-grid > [class*="col"] {
  width: auto;
  padding: 0;
}

.site-card h5 {
  margin: 2px 0 4px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.site-card .site-url {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.badge,
.lang-badge,
.badge-langs .badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(74,96,113,.45);
  border-radius: 999px;
  background: rgba(8,13,20,.82);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.badge-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.container {
  max-width: 1220px;
}

.bg-dark {
  background: rgba(10,16,24,.84);
}

.text-light {
  color: var(--text-primary);
}

.text-muted,
.form-label {
  color: var(--text-muted);
}

.nav-tabs {
  border-bottom-color: rgba(74,96,113,.42);
  gap: 6px;
}

.nav-tabs .nav-link {
  border: 1px solid rgba(74,96,113,.34);
  border-bottom-color: rgba(74,96,113,.34);
  border-radius: 6px 6px 0 0;
  background: rgba(11,17,25,.64);
  color: var(--text-secondary);
  font-weight: 700;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-color: rgba(53,210,242,.42);
}

.nav-tabs .nav-link.active {
  color: var(--accent-hover);
  background: rgba(17,25,37,.96);
  border-color: rgba(53,210,242,.44);
}

.tab-content {
  border-color: rgba(74,96,113,.42);
  background: linear-gradient(180deg, rgba(17,25,37,.96), rgba(13,19,29,.96));
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
}

.d-none {
  display: none !important;
}

.d-flex {
  display: flex !important;
}

.gap-2 {
  gap: 8px !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

@media (max-width: 700px) {
  .standalone-hero,
  .standalone-topbar,
  .navbar {
    align-items: stretch;
    flex-direction: column;
    padding-block: 14px;
  }
}

/* ============================================================
   FrontDesk AI admin redesign: clinic operations cockpit
   ============================================================ */

:root {
  --bg-body: #F7F8FC;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-hover: #F1F4FA;
  --bg-active: #F0ECFF;
  --border: #DDE3EF;
  --border-light: #C7D0E2;
  --text-primary: #0B1633;
  --text-secondary: #33415F;
  --text-muted: #66728A;
  --accent: #6E45E2;
  --accent-hover: #5331BA;
  --accent-muted: rgba(110, 69, 226, 0.10);
  --success: #0F9F6E;
  --warning: #B7791F;
  --danger: #D14343;
  --info: #2563EB;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-card: 0 20px 48px rgba(30, 82, 170, 0.12);
  --shadow-soft: 0 10px 28px rgba(30, 82, 170, 0.08);
}

html[data-theme='dark'] {
  --bg-body: #081123;
  --bg-sidebar: #0A1428;
  --bg-card: #0E1A33;
  --bg-input: #14213D;
  --bg-hover: #14213D;
  --bg-active: rgba(110, 69, 226, 0.18);
  --border: #243452;
  --border-light: #354A70;
  --text-primary: #F5F7FB;
  --text-secondary: #A9B4CA;
  --text-muted: #7C8BA8;
  --accent: #8D72F7;
  --accent-hover: #A894FF;
  --accent-muted: rgba(141, 114, 247, 0.16);
  --success: #4AC79B;
  --warning: #D7A546;
  --danger: #F07171;
  --info: #78A7FF;
  --shadow-card: 0 24px 54px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.26);
}

body,
.login-page {
  background: var(--bg-body);
  background-image: none;
  color: var(--text-primary);
}

body:not(.login-page)::before,
.dash-hero::before,
.widgets-head::before,
.integrations-head::before,
.leads-head::before,
.settings-page-head::before,
.contacts-admin .contacts-head::before,
.client-portal-head::before,
.dash-analytics-card::after {
  display: none;
}

.login-card,
.sidebar,
.topbar,
.stat-card,
.site-card,
.page-item,
.block-card,
.preview-panel,
.dash-panel,
.dash-metric,
.dash-action-card,
.dash-analytics-card,
.integration-card,
.lead-stat,
.lead-list,
.lead-detail,
.widgets-list-panel,
.widget-form-card,
.widget-preview-card,
.admin-row,
.metric-card,
.portal-preview-panel,
.portal-preview-card,
.contact-card,
.contact-inspector,
.contacts-board,
.billing-table-wrap,
.service-card,
.dash-hero,
.widgets-head,
.integrations-head,
.leads-head,
.settings-page-head,
.contacts-admin .contacts-head,
.client-portal-head,
.empty-state,
.loading-state,
.toast,
.tab-content {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: none;
  backdrop-filter: none;
}

.login-card,
.dash-hero {
  box-shadow: var(--shadow-soft);
}

.login-logo,
.sidebar-logo,
.stat-card .stat-icon,
.metric-icon,
.block-header .block-icon,
.dash-metric i,
.dash-action-card i,
.integration-title > i,
.contact-avatar {
  border: 1px solid rgba(110, 69, 226, 0.22);
  background: var(--accent-muted);
  color: var(--accent);
  box-shadow: none;
}

.btn,
.btn-icon,
.form-input,
.form-select,
.form-textarea,
.site-selector select {
  border-radius: 6px;
}

.btn {
  min-height: 38px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.btn:focus-visible,
.btn-icon:focus-visible,
.nav-item:focus-visible,
.sidebar-user:focus-visible,
.mobile-menu-btn:focus-visible,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 3px solid rgba(110, 69, 226, 0.18);
  outline-offset: 2px;
}

.btn-primary {
  color: #FFFFFF;
  background: var(--accent);
  box-shadow: 0 12px 28px rgba(110, 69, 226, 0.20);
}

.btn-primary:hover {
  color: #FFFFFF;
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-icon,
.nav-tabs .nav-link {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.btn-secondary:hover,
.btn-icon:hover,
.nav-tabs .nav-link:hover {
  border-color: var(--accent);
  background: var(--bg-active);
  color: var(--accent);
  transform: translateY(-1px);
}

.form-input,
.form-select,
.form-textarea,
.site-selector select,
.login-card .form-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.site-selector select:focus,
.login-card .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 69, 226, 0.14);
}

.app-layout {
  background: var(--bg-body);
}

.sidebar {
  border-right: 1px solid var(--border);
  border-radius: 0;
}

.sidebar-header,
.sidebar-footer,
.topbar,
.nav-tabs {
  border-color: var(--border);
}

.sidebar-brand,
.topbar-title,
.dash-hero h1,
.integrations-head h1,
.leads-head h1,
.settings-page-head h1,
.widgets-head h1,
.dash-panel-head h2,
.dash-analytics-card strong {
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.sidebar-brand small,
.nav-section,
.dash-hero p,
.integrations-head p,
.leads-head p,
.settings-page-head p,
.widgets-head p,
.dash-muted,
.dash-analytics-card small,
.dash-analytics-card span,
.dash-metric span,
.dash-action-card small,
.text-muted,
.form-label {
  color: var(--text-muted);
}

.nav-section {
  padding: 14px 16px 5px;
  font-size: 10px;
  letter-spacing: .08em;
}

.nav-item {
  width: calc(100% - 20px);
  margin: 1px 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font: inherit;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  color: var(--accent);
  background: var(--bg-active);
  box-shadow: inset 0 0 0 1px rgba(110, 69, 226, 0.16);
}

.nav-item.active::before {
  display: none;
}

.topbar {
  height: 64px;
  border-width: 0 0 1px;
  border-radius: 0;
}

.topbar-title {
  font-size: 17px;
  font-weight: 760;
}

.content-area {
  padding: 28px;
}

.stat-card,
.site-card,
.page-item,
.block-card,
.dash-panel,
.dash-metric,
.dash-action-card,
.dash-analytics-card,
.integration-card,
.lead-stat,
.admin-row,
.metric-card,
.service-card,
.contact-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.stat-card:hover,
.site-card:hover,
.page-item:hover,
.block-card:hover,
.dash-metric:hover,
.dash-action-card:hover,
.dash-analytics-card:hover,
.integration-card:hover,
.lead-stat:hover,
.admin-row:hover,
.metric-card:hover,
.service-card:hover,
.contact-card:hover {
  border-color: rgba(110, 69, 226, 0.34);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.empty-state,
.loading-state {
  color: var(--text-muted);
}

.empty-state i,
.loading-state i,
.dash-analytics-card-top i,
.dash-panel-head i,
.dash-action-card i {
  color: var(--accent);
}

.spinner {
  border-color: rgba(110, 69, 226, 0.14);
  border-top-color: var(--accent);
}

.skeleton-stack {
  width: min(460px, 100%);
  display: grid;
  gap: 10px;
}

.skeleton-stack i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-hover), var(--bg-active), var(--bg-hover));
  background-size: 200% 100%;
  animation: adminSkeleton 1.1s ease-in-out infinite;
}

.skeleton-stack i:nth-child(2) { width: 74%; }
.skeleton-stack i:nth-child(3) { width: 52%; }

@keyframes adminSkeleton {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.toast {
  box-shadow: var(--shadow-card);
}

.admin-dashboard {
  display: grid;
  gap: 18px;
  animation: adminFadeUp .22s ease both;
}

.dash-hero h1,
.integrations-head h1,
.leads-head h1,
.settings-page-head h1,
.widgets-head h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
}

.eyebrow,
.dash-hero .eyebrow,
.dash-panel-head .eyebrow,
.integrations-head .eyebrow,
.leads-head .eyebrow {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(110, 69, 226, 0.18);
  border-radius: 999px;
  background: var(--accent-muted);
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: none;
}

.dash-analytics {
  display: grid;
  gap: 16px;
}

.dash-analytics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dash-analytics-card {
  min-height: 128px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.dash-analytics-card strong {
  font-size: 30px;
  line-height: 1;
}

.dash-analytics-layout,
.dash-layout {
  gap: 16px;
}

.dash-panel {
  padding: 18px;
}

.dash-panel-head {
  gap: 16px;
  margin-bottom: 16px;
}

.dash-panel-head h2 {
  font-size: 20px;
}

.dash-trend-bars {
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}

.dash-trend-bars i {
  width: 6px;
  box-shadow: none;
  transition: filter .18s ease;
}

.dash-analytics-legend i.visitors,
.dash-trend-bars i.visitors { background: #2563EB; }
.dash-analytics-legend i.form-views,
.dash-trend-bars i.form-views { background: #B7791F; }
.dash-analytics-legend i.requests,
.dash-trend-bars i.requests { background: var(--accent); }
.dash-analytics-legend i.visits,
.dash-trend-bars i.visits { background: #66728A; }

.dash-bar-track {
  height: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-hover);
}

.dash-bar-track i {
  background: var(--accent);
  box-shadow: none;
}

.dash-source-row,
.dash-lead-row,
.dash-integration,
.dash-breakdown-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.dash-lead-row,
.dash-action-card {
  min-height: 58px;
}

.dash-lead-row:hover,
.dash-lead-row:focus-visible,
.dash-action-card:hover,
.dash-action-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-active);
}

.dash-integration.ok strong,
.status-active,
.lead-status-won {
  color: var(--success);
}

.dash-integration.error strong,
.lead-status-lost {
  color: var(--danger);
}

.billing-table,
.contact-table,
table,
.billing-table th,
.billing-table td,
.contact-table-row,
th,
td {
  border-color: var(--border);
}

@media (max-width: 900px) {
  .dash-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-area {
    padding: 18px;
  }
}

@media (max-width: 600px) {
  .dash-analytics-grid,
  .dash-layout,
  .dash-analytics-layout {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}
/* Living cockpit polish: subtle depth, assembly and clearer states */
.main-content,
.content-area {
  scroll-behavior: smooth;
}

.topbar,
.dash-panel,
.dash-action-card,
.dash-analytics-card,
.stat-card,
.site-card,
.block-card,
.settings-section,
.billing-section,
.service-card,
.integration-card,
.widgets-list-panel,
.widget-form-card,
.widget-preview-card,
.cookie-design-panel,
.cookie-preview-panel,
.cookie-copy-panel,
.pro-card,
.lead-section,
.editor-panel,
.preview-panel {
  transform: translate3d(0, 0, 0);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.dash-panel,
.dash-action-card,
.dash-analytics-card,
.stat-card,
.site-card,
.block-card,
.settings-section,
.billing-section,
.service-card,
.integration-card,
.widgets-list-panel,
.widget-form-card,
.widget-preview-card,
.cookie-design-panel,
.cookie-preview-panel,
.cookie-copy-panel,
.pro-card,
.lead-section,
.editor-panel,
.preview-panel {
  animation: admin-panel-assemble 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.dash-panel:nth-child(2),
.dash-action-card:nth-child(2),
.dash-analytics-card:nth-child(2),
.stat-card:nth-child(2),
.site-card:nth-child(2),
.block-card:nth-child(2),
.integration-card:nth-child(2),
.service-card:nth-child(2),
.pro-card:nth-child(2) {
  animation-delay: 45ms;
}

.dash-panel:nth-child(3),
.dash-action-card:nth-child(3),
.dash-analytics-card:nth-child(3),
.stat-card:nth-child(3),
.site-card:nth-child(3),
.block-card:nth-child(3),
.integration-card:nth-child(3),
.service-card:nth-child(3),
.pro-card:nth-child(3) {
  animation-delay: 90ms;
}

.dash-panel:hover,
.dash-action-card:hover,
.dash-analytics-card:hover,
.stat-card:hover,
.site-card:hover,
.block-card:hover,
.settings-section:hover,
.billing-section:hover,
.service-card:hover,
.integration-card:hover,
.widgets-list-panel:hover,
.widget-form-card:hover,
.widget-preview-card:hover,
.cookie-design-panel:hover,
.cookie-preview-panel:hover,
.cookie-copy-panel:hover,
.pro-card:hover,
.lead-section:hover,
.editor-panel:hover,
.preview-panel:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 14%, transparent);
}

.nav-item {
  position: relative;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.nav-item::after {
  content: "";
  position: absolute;
  inset: 6px 8px 6px auto;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-item:hover,
.nav-item.active {
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.nav-item:hover::after,
.nav-item.active::after {
  opacity: 1;
  transform: scaleY(1);
}

.btn,
button,
.form-input,
select,
textarea {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.btn:hover,
button:not(:disabled):hover {
  transform: translateY(-1px);
}

.form-input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.dash-trend-bars span,
.dash-trend-bars i,
.progress-fill,
.bar-fill {
  animation: admin-bar-grow 760ms cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: bottom;
}

@keyframes admin-panel-assemble {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes admin-bar-grow {
  from {
    transform: scaleY(.2);
    opacity: .55;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .dash-panel,
  .dash-action-card,
  .dash-analytics-card,
  .stat-card,
  .site-card,
  .block-card,
  .settings-section,
  .billing-section,
  .service-card,
  .integration-card,
  .widgets-list-panel,
  .widget-form-card,
  .widget-preview-card,
  .cookie-design-panel,
  .cookie-preview-panel,
  .cookie-copy-panel,
  .pro-card,
  .lead-section,
  .editor-panel,
  .preview-panel,
  .nav-item,
  .btn,
  button,
  .dash-trend-bars span,
  .dash-trend-bars i,
  .progress-fill,
  .bar-fill {
    animation: none;
    transition-duration: 1ms;
    transform: none !important;
  }
}

/* 2026 Admin color pass: richer state color without losing operator calm. */
:root {
  --accent: #7c5cff;
  --accent-hover: #9b83ff;
  --accent-muted: rgba(124, 92, 255, 0.16);
  --accent-soft: rgba(124, 92, 255, 0.09);
  --color-blue: #55a7ff;
  --color-blue-soft: rgba(85, 167, 255, 0.13);
  --color-green: #35d07f;
  --color-green-soft: rgba(53, 208, 127, 0.13);
  --color-amber: #f4b84b;
  --color-amber-soft: rgba(244, 184, 75, 0.14);
  --color-red: #ff6b7a;
  --color-red-soft: rgba(255, 107, 122, 0.13);
  --color-rose: #ff6f9f;
  --color-rose-soft: rgba(255, 111, 159, 0.12);
  --shadow-color-lift: 0 18px 48px rgba(124, 92, 255, 0.13);
}

/* ═══════════════════════════════════════
   APPDASHBOARD PRO 1-TO-1 THEME DESIGN SYSTEM
   ═══════════════════════════════════════ */
:root,
html[data-theme='light'] {
  --background-color: #f4f7fb;
  --default-color: #273447;
  --heading-color: #111827;
  --accent-color: var(--accent);
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --muted-color: #687789;
  --light-color: #9aa8b8;
  --border-color: #dbe4ef;
  --border-color-light: #eaf0f7;
  --border-color-dark: #c6d2df;
  --success-color: #0f9b7a;
  --success-color-light: #dff8f0;
  --warning-color: #c87914;
  --warning-color-light: #fff0d7;
  --danger-color: #e05264;
  --danger-color-light: #fde5ea;
  --info-color: #0c9dc8;
  --info-color-light: #ddf4fb;
  --nav-color: var(--default-color);
  --header-bg: #ffffff;
  --header-shadow: 0 10px 35px -28px rgb(22 34 51 / 0.45);
  --header-border: var(--border-color);
  --sidebar-bg: #ffffff;
  --sidebar-border: #d9e2ec;
  --sidebar-color: #324152;
  --sidebar-muted-color: #8190a2;
  --sidebar-text: var(--sidebar-color);
  --sidebar-text-muted: var(--sidebar-muted-color);
  --sidebar-hover-bg: #edf3ff;
  --sidebar-active-bg: var(--accent);
  --sidebar-active-color: #ffffff;
  --table-header-bg: #f7f9fc;
  --table-hover-bg: #eef4ff;
  --table-stripe-bg: #fbfdff;
  --input-bg: #ffffff;
  --input-border: var(--border-color);
}

html[data-theme='dark'] {
  --background-color: #0e1524;
  --default-color: #d8e0e7;
  --heading-color: #f3f6f9;
  --accent-color: var(--accent);
  --surface-color: #182235;
  --contrast-color: #ffffff;
  --muted-color: #9aa8b9;
  --light-color: #728196;
  --border-color: #2b3a50;
  --border-color-light: #202b3d;
  --border-color-dark: #43536a;
  --success-color: #34d399;
  --success-color-light: rgb(52 211 153 / 0.14);
  --warning-color: #f4b95b;
  --warning-color-light: rgb(244 185 91 / 0.15);
  --danger-color: #fb7185;
  --danger-color-light: rgb(251 113 133 / 0.15);
  --info-color: #22d3ee;
  --info-color-light: rgb(34 211 238 / 0.14);
  --nav-color: var(--default-color);
  --header-bg: #182235;
  --header-shadow: 0 10px 35px -28px rgb(0 0 0 / 0.6);
  --header-border: var(--border-color);
  --sidebar-bg: #182235;
  --sidebar-border: #2b3a50;
  --sidebar-color: #d8e0e7;
  --sidebar-muted-color: #8190a2;
  --sidebar-hover-bg: #202c44;
  --sidebar-active-bg: var(--accent);
  --sidebar-active-color: #ffffff;
  --table-header-bg: #1f2b42;
  --table-hover-bg: #23314b;
  --table-stripe-bg: #1b263b;
  --input-bg: #1f2b42;
  --input-border: var(--border-color);
}

body {
  background-color: var(--background-color);
  color: var(--default-color);
  font-family: var(--default-font, "Inter", sans-serif);
}

.card {
  background-color: var(--surface-color);
  border-color: var(--border-color);
  color: var(--default-color);
}

.card-header {
  background-color: var(--surface-color);
  border-bottom-color: var(--border-color);
  color: var(--heading-color);
}

.topbar, header.header, header.topbar {
  background-color: var(--header-bg);
  border-bottom-color: var(--header-border);
  box-shadow: var(--header-shadow);
}

.sidebar {
  background-color: var(--sidebar-bg);
  border-right-color: var(--sidebar-border);
}

.sidebar .nav-link, .sidebar .nav-item {
  color: var(--sidebar-color);
}

.sidebar .nav-link:hover, .sidebar .nav-item:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--accent-color);
}

.sidebar .nav-link.active, .sidebar .nav-item.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-color);
}

.table {
  color: var(--default-color);
  border-color: var(--border-color);
}

.table-light, thead.table-light tr, thead.table-light th {
  background-color: var(--table-header-bg);
  color: var(--heading-color);
  border-color: var(--border-color);
}

.form-control, .form-select {
  background-color: var(--input-bg);
  color: var(--default-color);
  border-color: var(--input-border);
}

.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--default-color);
  border-color: var(--input-focus-border, var(--accent-color));
}

.modal-content {
  background-color: var(--surface-color);
  color: var(--default-color);
  border-color: var(--border-color);
}

.modal-header, .modal-footer {
  border-color: var(--border-color);
}

.dropdown-menu {
  background-color: var(--surface-color);
  color: var(--default-color);
  border-color: var(--border-color);
}

.dropdown-item {
  color: var(--default-color);
}

.dropdown-item:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--accent-color);
}

.text-heading {
  color: var(--heading-color);
}

/* ═══════════════════════════════════════
   SOFT BADGES & NOTIFICATION DOTS (LIGHT / DARK)
   ═══════════════════════════════════════ */
.badge-soft-primary, .bg-primary-subtle {
  background-color: #e0e7ff !important;
  color: var(--accent) !important;
}
.badge-soft-success, .bg-success-subtle {
  background-color: #dff8f0 !important;
  color: #0f9b7a !important;
}
.badge-soft-warning, .bg-warning-subtle {
  background-color: #fff0d7 !important;
  color: #c87914 !important;
}
.badge-soft-danger, .bg-danger-subtle {
  background-color: #fde5ea !important;
  color: #e05264 !important;
}
.badge-soft-info, .bg-info-subtle {
  background-color: #ddf4fb !important;
  color: #0c9dc8 !important;
}
.badge-soft-secondary, .bg-secondary-subtle {
  background-color: #eaf0f7 !important;
  color: #52637a !important;
}

[data-theme='dark'] .badge-soft-primary, [data-theme='dark'] .bg-primary-subtle {
  background-color: rgba(109, 136, 255, 0.2) !important;
  color: #8da2ff !important;
}
[data-theme='dark'] .badge-soft-success, [data-theme='dark'] .bg-success-subtle {
  background-color: rgba(52, 211, 153, 0.2) !important;
  color: #34d399 !important;
}
[data-theme='dark'] .badge-soft-warning, [data-theme='dark'] .bg-warning-subtle {
  background-color: rgba(244, 185, 91, 0.2) !important;
  color: #f4b95b !important;
}
[data-theme='dark'] .badge-soft-danger, [data-theme='dark'] .bg-danger-subtle {
  background-color: rgba(251, 113, 133, 0.2) !important;
  color: #fb7185 !important;
}
[data-theme='dark'] .badge-soft-info, [data-theme='dark'] .bg-info-subtle {
  background-color: rgba(34, 211, 238, 0.2) !important;
  color: #22d3ee !important;
}
[data-theme='dark'] .badge-soft-secondary, [data-theme='dark'] .bg-secondary-subtle {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #a0aec0 !important;
}

.badge.bg-danger {
  background-color: #e05264 !important;
  color: #ffffff !important;
}
.badge.bg-primary {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}
.badge.bg-success {
  background-color: #0f9b7a !important;
  color: #ffffff !important;
}
.badge.bg-warning {
  background-color: #c87914 !important;
  color: #ffffff !important;
}

.header-action {
  color: var(--default-color);
  background-color: transparent;
  border-color: transparent;
}
.header-action:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--accent-color);
}
.header-action .badge {
  border: 2px solid var(--header-bg);
}

.login-logo,
.sidebar-logo,
.stat-card .stat-icon,
.metric-icon,
.block-header .block-icon,
.dash-metric i,
.dash-action-card i,
.integration-title > i,
.contact-avatar {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--color-blue-soft) 74%, transparent));
  color: var(--accent-hover);
}

.sidebar-logo,
.standalone-brand span {
  background: linear-gradient(135deg, var(--accent), #55a7ff);
  color: #fff;
  box-shadow: 0 14px 34px rgba(124, 92, 255, 0.18);
}

.btn-primary,
.btn-accent {
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 64%, white 8%);
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.25), transparent 28%),
    linear-gradient(135deg, var(--accent), #5f8dff);
  box-shadow: 0 14px 34px rgba(124, 92, 255, 0.22);
}

.btn-primary:hover,
.btn-accent:hover {
  color: #fff;
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.3), transparent 28%),
    linear-gradient(135deg, var(--accent-hover), var(--accent));
}

.btn-secondary:hover,
.btn-icon:hover,
.mobile-menu-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.nav-section {
  color: color-mix(in srgb, var(--text-muted) 78%, var(--accent));
}

.nav-item i {
  color: color-mix(in srgb, var(--text-muted) 76%, var(--accent));
}

.nav-item:hover {
  background: var(--accent-soft);
}

.nav-item:hover i,
.nav-item.active i {
  color: var(--accent-hover);
}

.nav-item.active {
  background:
    linear-gradient(135deg, var(--accent-muted), color-mix(in srgb, var(--color-blue-soft) 70%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 12px 28px rgba(124, 92, 255, 0.10);
}

.nav-item.active::before {
  background: linear-gradient(180deg, var(--accent), var(--color-blue));
  box-shadow: 0 0 16px rgba(124, 92, 255, 0.34);
}

.dash-hero,
.widgets-head,
.integrations-head,
.leads-head,
.settings-page-head,
.contacts-admin .contacts-head,
.client-portal-head {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background:
    radial-gradient(circle at 88% 10%, var(--accent-muted), transparent 30%),
    radial-gradient(circle at 8% 100%, var(--color-blue-soft), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 96%, var(--accent)), var(--bg-card));
}

.dash-hero::before,
.widgets-head::before,
.integrations-head::before,
.leads-head::before,
.settings-page-head::before,
.contacts-admin .contacts-head::before,
.client-portal-head::before {
  background: linear-gradient(110deg, transparent 18%, color-mix(in srgb, var(--accent) 13%, transparent) 48%, transparent 74%);
}

.eyebrow,
.dash-hero .eyebrow,
.dash-panel-head .eyebrow,
.integrations-head .eyebrow,
.leads-head .eyebrow {
  color: var(--accent-hover);
}

.dash-analytics-card:nth-child(1),
.dash-metric:nth-child(1),
.stat-card:nth-child(1),
.contact-metric:nth-child(1) {
  --card-accent: var(--color-blue);
  --card-accent-soft: var(--color-blue-soft);
}

.dash-analytics-card:nth-child(2),
.dash-metric:nth-child(2),
.stat-card:nth-child(2),
.contact-metric:nth-child(2) {
  --card-accent: var(--accent);
  --card-accent-soft: var(--accent-soft);
}

.dash-analytics-card:nth-child(3),
.dash-metric:nth-child(3),
.stat-card:nth-child(3),
.contact-metric:nth-child(3) {
  --card-accent: var(--color-amber);
  --card-accent-soft: var(--color-amber-soft);
}

.dash-analytics-card:nth-child(4),
.dash-metric:nth-child(4),
.stat-card:nth-child(4),
.contact-metric:nth-child(4) {
  --card-accent: var(--color-green);
  --card-accent-soft: var(--color-green-soft);
}

.dash-analytics-card:nth-child(5),
.contact-metric:nth-child(5) {
  --card-accent: var(--color-rose);
  --card-accent-soft: var(--color-rose-soft);
}

.dash-analytics-card:nth-child(6),
.contact-metric:nth-child(6) {
  --card-accent: var(--color-red);
  --card-accent-soft: var(--color-red-soft);
}

.dash-analytics-card,
.dash-metric,
.stat-card,
.contact-metric {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, var(--border));
}

.dash-analytics-card::after {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 26%, transparent);
  background: color-mix(in srgb, var(--card-accent-soft, var(--accent-soft)) 84%, transparent);
}

.dash-analytics-card:hover,
.dash-metric:hover,
.stat-card:hover,
.contact-metric:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 44%, var(--border));
  box-shadow: var(--shadow-color-lift);
}

.dash-analytics-card-top i,
.dash-metric i,
.stat-card .stat-icon,
.contact-metric i {
  color: var(--card-accent, var(--accent-hover));
  background: color-mix(in srgb, var(--card-accent-soft, var(--accent-soft)) 90%, transparent);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 24%, transparent);
}

.dash-analytics-card strong,
.dash-metric strong,
.stat-card .stat-value,
.contact-metric strong {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--card-accent, var(--accent)));
}

.dash-analytics-legend i.visits,
.dash-trend-bars i.visits,
.dash-bar-track i {
  background: linear-gradient(180deg, var(--accent), #9b83ff);
}

.dash-analytics-legend i.visitors,
.dash-trend-bars i.visitors {
  background: linear-gradient(180deg, var(--color-blue), #8cc5ff);
}

.dash-analytics-legend i.form-views,
.dash-trend-bars i.form-views {
  background: linear-gradient(180deg, var(--color-amber), #ffd27a);
}

.dash-analytics-legend i.requests,
.dash-trend-bars i.requests {
  background: linear-gradient(180deg, var(--color-green), #7ee6ad);
}

.dash-bar-track {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    var(--bg-input);
}

.dash-bar-track i {
  background: linear-gradient(90deg, var(--accent), var(--color-blue));
  box-shadow: 0 8px 18px rgba(124, 92, 255, 0.18);
}

.dash-source-row span i {
  color: var(--color-blue);
}

.dash-source-row:hover,
.dash-lead-row:hover,
.dash-integration:hover,
.contact-card:hover,
.contact-table-row:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background:
    linear-gradient(135deg, var(--accent-soft), transparent),
    var(--bg-hover);
}

.lead-status,
.status-badge,
.integration-status,
.billing-plan-badge,
.service-active-badge {
  border: 1px solid currentColor;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.lead-status-new,
.tone-blue .lead-status,
.contact-funnel-step.tone-blue {
  background: var(--color-blue-soft);
  color: #8cc5ff;
}

.lead-status-contacted,
.status-pending,
.tone-amber .lead-status,
.contact-funnel-step.tone-amber {
  background: var(--color-amber-soft);
  color: var(--color-amber);
}

.lead-status-qualified,
.lead-status-processing,
.status-processing,
.tone-purple .lead-status,
.contact-funnel-step.tone-purple {
  background: var(--accent-muted);
  color: var(--accent-hover);
}

.lead-status-won,
.status-paid,
.integration-status.status-connected,
.tone-green .lead-status,
.contact-funnel-step.tone-green {
  background: var(--color-green-soft);
  color: var(--color-green);
}

.lead-status-lost,
.lead-status-overdue,
.status-overdue,
.integration-status.status-error,
.tone-red .lead-status,
.contact-funnel-step.tone-red {
  background: var(--color-red-soft);
  color: var(--color-red);
}

.lead-status-spam,
.integration-status.status-not_connected {
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-secondary);
}

.dash-integration.ok {
  border-color: color-mix(in srgb, var(--color-green) 30%, var(--border));
}

.dash-integration.error {
  border-color: color-mix(in srgb, var(--color-red) 30%, var(--border));
}

.dash-integration.ok strong {
  color: var(--color-green);
}

.dash-integration.error strong {
  color: var(--color-red);
}

.contact-funnel-step {
  border-color: color-mix(in srgb, currentColor 22%, var(--border));
}

.contact-funnel-step.active,
.contact-funnel-step:hover {
  box-shadow: 0 14px 32px color-mix(in srgb, currentColor 16%, transparent);
}

.contact-funnel-step b {
  background: currentColor;
  opacity: 0.88;
}

.pro-card.active,
.contact-table-row.active,
.lead-row.active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 58%),
    var(--bg-card);
  box-shadow: 0 18px 44px rgba(124, 92, 255, 0.12);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.site-selector select:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-theme='light'] .login-card,
html[data-theme='light'] .stat-card,
html[data-theme='light'] .site-card,
html[data-theme='light'] .page-item,
html[data-theme='light'] .block-card,
html[data-theme='light'] .preview-panel,
html[data-theme='light'] .dash-panel,
html[data-theme='light'] .dash-metric,
html[data-theme='light'] .dash-action-card,
html[data-theme='light'] .dash-analytics-card,
html[data-theme='light'] .integration-card,
html[data-theme='light'] .lead-stat,
html[data-theme='light'] .lead-list,
html[data-theme='light'] .lead-detail,
html[data-theme='light'] .widgets-list-panel,
html[data-theme='light'] .widget-form-card,
html[data-theme='light'] .widget-preview-card,
html[data-theme='light'] .admin-row,
html[data-theme='light'] .metric-card,
html[data-theme='light'] .portal-preview-panel,
html[data-theme='light'] .portal-preview-card,
html[data-theme='light'] .contact-card,
html[data-theme='light'] .contact-inspector,
html[data-theme='light'] .contacts-board,
html[data-theme='light'] .billing-table-wrap,
html[data-theme='light'] .service-card,
html[data-theme='light'] .modal-content,
html[data-theme='light'] .editor-panel,
html[data-theme='light'] .content-card,
html[data-theme='light'] .cms-lang-tabs,
html[data-theme='light'] .nested,
html[data-theme='light'] .array-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.96));
}

html[data-theme='light'] .topbar,
html[data-theme='light'] .standalone-topbar,
html[data-theme='light'] .navbar {
  background: rgba(255,255,255,0.88) !important;
}

html[data-theme='light'] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.98)),
    var(--bg-sidebar);
}

html[data-theme='light'] .btn-secondary,
html[data-theme='light'] .btn-icon,
html[data-theme='light'] .form-input,
html[data-theme='light'] .form-select,
html[data-theme='light'] .form-textarea,
html[data-theme='light'] .site-selector select,
html[data-theme='light'] .login-card .form-input {
  background: #fff;
}

/* ==========================================================================
   1it.pro Admin Operator Clarity Layer
   Inspired by the working density of serwisue.pl admin: clear status color,
   tighter controls, visible focus and useful motion only.
   ========================================================================== */

:root {
  --admin-operator-accent: var(--accent);
  --admin-operator-blue: var(--color-blue);
  --admin-operator-red: var(--color-red);
  --admin-operator-green: var(--color-green);
  --admin-operator-amber: var(--color-amber);
  --admin-operator-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --admin-operator-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 10%, transparent);
}

.admin-app,
.admin-login,
.admin-loading {
  background:
    radial-gradient(circle at 12% -12%, color-mix(in srgb, var(--admin-operator-blue) 12%, transparent), transparent 34%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--admin-operator-red) 8%, transparent), transparent 28%),
    var(--bg-primary);
}

.admin-app::before {
  opacity: 0.08;
}

.admin-app aside button,
.admin-top button,
.dash-actions button,
.crm-actions button,
.contacts-toolbar button,
.profile-save,
.profile-delete,
.integration-primary,
.widgets-heading > button,
.toast,
.modal-content,
.form-input,
.form-select,
.form-textarea,
.admin-field input,
.admin-field textarea,
.image-field > input,
.contacts-search input,
.contacts-search select {
  border-radius: 8px;
}

.admin-app aside button {
  min-height: 44px;
  border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.admin-app aside button:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    var(--bg-hover);
  transform: translateX(2px);
}

.admin-app aside button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 74%),
    var(--bg-active);
  box-shadow: inset 3px 0 var(--accent), var(--admin-operator-shadow);
}

.admin-app aside button:focus-visible,
.admin-top a:focus-visible,
.admin-top button:focus-visible,
.dash-actions button:focus-visible,
.crm-actions button:focus-visible,
.contact-row:focus-visible,
.page-list button:focus-visible,
.widgets-heading > button:focus-visible,
.profile-save:focus-visible,
.profile-delete:focus-visible,
.toast .toast-close:focus-visible {
  outline: none;
  box-shadow: var(--admin-operator-ring);
}

.dash-hero,
.dashboard-hero,
.crm-intro,
.contacts-toolbar,
.integration-heading,
.widgets-heading {
  position: relative;
  overflow: hidden;
}

.dash-hero::after,
.dashboard-hero::after,
.crm-intro::after,
.contacts-toolbar::after,
.integration-heading::after,
.widgets-heading::after {
  content: '';
  position: absolute;
  inset: auto 18px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--admin-operator-red), transparent);
  opacity: 0.58;
  pointer-events: none;
}

.dash-panel,
.dash-kpis article,
.dash-metric,
.dash-analytics-card,
.crm-card,
.contact-card,
.contact-profile,
.contacts-board,
.contacts-table,
.integration-card,
.widgets-list article,
.content-editor,
.page-list,
.product-editor,
.payment-panel section {
  border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}

.dash-panel:hover,
.dash-kpis article:hover,
.dash-metric:hover,
.dash-analytics-card:hover,
.crm-card:hover,
.contact-card:hover,
.contact-table-row:hover,
.contact-row:hover,
.integration-card:hover,
.widgets-list article:hover,
.product-row:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--admin-operator-shadow);
}

.dash-actions button,
.crm-actions button,
.contacts-search button,
.recent-leads button,
.integration-mini-list button {
  min-height: 44px;
}

.status-badge,
.lead-status,
.integration-status,
.billing-plan-badge,
.service-active-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 760;
}

.lead-status-new,
.status-new {
  color: var(--admin-operator-blue);
  background: color-mix(in srgb, var(--admin-operator-blue) 13%, transparent);
}

.lead-status-qualified,
.status-qualified {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.lead-status-won,
.status-paid,
.status-success {
  color: var(--admin-operator-green);
  background: color-mix(in srgb, var(--admin-operator-green) 14%, transparent);
}

.lead-status-overdue,
.status-overdue,
.status-error {
  color: var(--admin-operator-red);
  background: color-mix(in srgb, var(--admin-operator-red) 12%, transparent);
}

.status-pending,
.lead-status-contacted {
  color: var(--admin-operator-amber);
  background: color-mix(in srgb, var(--admin-operator-amber) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .admin-app aside button,
  .dash-panel,
  .dash-kpis article,
  .dash-metric,
  .crm-card,
  .contact-card,
  .integration-card {
    transition: none;
  }
}

/* ==========================================================================
   Admin final composition pass: warmer light theme, compact cockpit hero,
   clearer sidebar buttons and one subtle status shimmer.
   ========================================================================== */

html[data-theme='light'] {
  --bg-body: #f3f1ec;
  --bg-sidebar: #e7e3da;
  --bg-card: #fffdf8;
  --bg-input: #f6f3ed;
  --bg-hover: #eee8dc;
  --bg-active: #ebe3ff;
  --border: #d7d0c4;
  --border-light: #c7bfb2;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #706a62;
  --shadow-card: 0 22px 56px rgba(70, 61, 47, 0.12);
  --shadow-soft: 0 14px 38px rgba(70, 61, 47, 0.09);
}

html[data-theme='light'] body,
html[data-theme='light'] .admin-app,
html[data-theme='light'] .admin-login,
html[data-theme='light'] .admin-loading {
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 92, 255, 0.10), transparent 34vw),
    radial-gradient(circle at 88% 8%, rgba(210, 77, 87, 0.055), transparent 30vw),
    linear-gradient(180deg, #f6f3ed 0%, #ebe7df 48%, #f6f3ed 100%);
}

html[data-theme='light'] .admin-app > aside,
html[data-theme='light'] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.86), rgba(231, 227, 218, 0.96)),
    var(--bg-sidebar);
  border-right-color: rgba(125, 111, 91, 0.28);
}

html[data-theme='light'] .admin-top,
html[data-theme='light'] .topbar {
  background: rgba(255, 253, 248, 0.86) !important;
  border-bottom-color: rgba(125, 111, 91, 0.22) !important;
}

.admin-app aside nav {
  gap: 7px;
}

.admin-app aside button,
.nav-item {
  min-height: 44px;
  border-radius: 9px;
  font-weight: 740;
}

html[data-theme='light'] .admin-app aside button,
html[data-theme='light'] .nav-item {
  color: #273447 !important;
  background: transparent;
  font-weight: 500;
  transition: all 0.2s ease;
}

html[data-theme='light'] .admin-app aside button:hover,
html[data-theme='light'] .nav-item:hover {
  color: var(--accent) !important;
  background: #edf3ff !important;
}

html[data-theme='light'] .admin-app aside button:hover i,
html[data-theme='light'] .nav-item:hover i,
html[data-theme='light'] .nav-item:hover span {
  color: var(--accent) !important;
}

html[data-theme='light'] .admin-app aside button.active,
html[data-theme='light'] .nav-item.active {
  color: #ffffff !important;
  background: var(--accent) !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(49, 92, 246, 0.25);
}

html[data-theme='light'] .admin-app aside button.active i,
html[data-theme='light'] .nav-item.active i,
html[data-theme='light'] .nav-item.active span {
  color: #ffffff !important;
}

.header-action {
  position: relative;
}

.header-action .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  background: #e05264 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(224, 82, 100, 0.4);
}

/* ── Collapsed Sidebar System ─────────────────────────── */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar {
    width: 76px !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.sidebar-collapsed .header {
    left: 76px !important;
    width: calc(100% - 76px) !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.sidebar-collapsed .main-content {
    margin-left: 76px !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.sidebar-collapsed .sidebar-brand,
  body.sidebar-collapsed .sidebar-nav .nav-section,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .sidebar-user .user-info {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-header {
    justify-content: center !important;
    padding: 16px 8px !important;
  }

  body.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px !important;
  }

  body.sidebar-collapsed .sidebar-user {
    justify-content: center !important;
    padding: 8px !important;
  }

  body.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding: 10px 0 !important;
    width: 46px !important;
    min-height: 46px !important;
    margin: 4px auto !important;
  }

  body.sidebar-collapsed .nav-item i {
    font-size: 20px !important;
    margin: 0 !important;
  }
}

.dash-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 236px;
  padding: clamp(26px, 3.2vw, 44px);
  border-radius: 12px;
}

.dash-hero h1 {
  max-width: 780px;
  margin: 10px 0 12px;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.dash-hero p {
  max-width: 680px;
  line-height: 1.58;
}

.dash-hero > .btn,
.dash-hero #dashRefresh {
  width: auto;
  min-width: 188px;
  max-width: 230px;
  align-self: start;
  justify-self: end;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 9px;
  white-space: nowrap;
}

.dash-hero::before {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--accent) 20%, transparent) 43%, color-mix(in srgb, var(--admin-operator-red) 10%, transparent) 56%, transparent 78%);
  opacity: 0.58;
  transform: translateX(-18%);
  animation: adminHeroSheen 7.5s ease-in-out infinite;
  pointer-events: none;
}

.dash-hero > * {
  position: relative;
  z-index: 1;
}

@keyframes adminHeroSheen {
  0%, 100% { transform: translateX(-22%); opacity: 0.42; }
  50% { transform: translateX(18%); opacity: 0.72; }
}

html[data-theme='light'] .dash-hero,
html[data-theme='light'] .dashboard-hero {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(238, 232, 220, 0.88)),
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, 0.14), transparent 30%) !important;
  border-color: rgba(124, 92, 255, 0.20);
}

html[data-theme='light'] .dash-panel,
html[data-theme='light'] .dash-kpis article,
html[data-theme='light'] .dash-metric,
html[data-theme='light'] .dash-analytics-card,
html[data-theme='light'] .crm-card,
html[data-theme='light'] .contact-card,
html[data-theme='light'] .contact-profile,
html[data-theme='light'] .contacts-board,
html[data-theme='light'] .contacts-table,
html[data-theme='light'] .integration-card,
html[data-theme='light'] .widgets-list article,
html[data-theme='light'] .content-editor,
html[data-theme='light'] .page-list,
html[data-theme='light'] .product-editor,
html[data-theme='light'] .payment-panel section {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(250, 247, 239, 0.94));
  border-color: rgba(125, 111, 91, 0.22);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
  .dash-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dash-hero > .btn,
  .dash-hero #dashRefresh {
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }
}

.dash-hero::before {
  display: block !important;
}

html[data-theme='light'] .admin-app > aside,
html[data-theme='light'] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.86), rgba(231, 227, 218, 0.96)),
    var(--bg-sidebar) !important;
}

html[data-theme='light'] .dash-hero,
html[data-theme='light'] .dashboard-hero {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(238, 232, 220, 0.88)),
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, 0.14), transparent 30%) !important;
}

html[data-theme='dark'] .dash-hero,
html[data-theme='dark'] .dashboard-hero {
  background:
    linear-gradient(135deg, rgba(14, 26, 51, 0.96), rgba(8, 13, 27, 0.94)),
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, 0.18), transparent 30%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dash-hero::before {
    display: none !important;
    animation: none;
  }
}

/* Final cockpit polish: lighter frames, cleaner status panel, readable charts. */
.leads-head,
.contacts-admin .contacts-head,
.contact-hero,
.widgets-head,
.settings-page-head,
.integrations-head,
.dash-hero,
.dashboard-hero {
  padding-bottom: clamp(34px, 3.4vw, 48px);
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.14) !important;
}

.leads-head::before,
.contacts-admin .contacts-head::before,
.contact-hero::before,
.widgets-head::before,
.settings-page-head::before,
.integrations-head::before,
.dash-hero::before,
.dashboard-hero::before {
  opacity: 0.42;
}

.dash-status-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dash-status-panel:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

.dash-status-panel .dash-breakdown-list {
  gap: 18px;
}

.dash-status-panel .dash-breakdown-row {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dash-status-panel .dash-breakdown-row > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 8px;
}

.dash-status-panel .dash-breakdown-row strong,
.dash-status-panel .dash-breakdown-row span {
  min-width: 0;
}

.dash-status-panel .dash-bar-track {
  height: 10px;
  border: 0 !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-input)) !important;
  overflow: hidden;
}

.dash-status-panel .dash-bar-track i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--admin-operator-blue)) !important;
}

.dash-trend-panel {
  overflow: visible;
}

.dash-trend-panel .dash-trend {
  min-height: 218px;
  padding-bottom: 68px;
  overflow: visible;
}

.dash-trend-panel .dash-trend-day {
  position: relative;
  min-width: 28px;
  overflow: visible;
}

.dash-trend-panel .dash-trend-bars {
  min-height: 150px;
  border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
}

.dash-trend-panel .dash-trend-day small {
  position: absolute;
  left: 50%;
  bottom: -58px;
  width: max-content;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text-primary));
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center;
}

html[data-theme='light'] .leads-head,
html[data-theme='light'] .contacts-admin .contacts-head,
html[data-theme='light'] .contact-hero,
html[data-theme='light'] .widgets-head,
html[data-theme='light'] .settings-page-head,
html[data-theme='light'] .integrations-head,
html[data-theme='light'] .dash-hero,
html[data-theme='light'] .dashboard-hero {
  border-color: rgba(124, 92, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 44px rgba(70, 61, 47, 0.10) !important;
}

html[data-theme='light'] .dash-status-panel {
  background: transparent !important;
}

html[data-theme='light'] .dash-status-panel .dash-bar-track {
  background: rgba(217, 210, 199, 0.72) !important;
}

@media (max-width: 760px) {
  .dash-trend-panel .dash-trend {
    grid-template-columns: repeat(14, minmax(18px, 1fr));
    gap: 5px;
    padding-bottom: 62px;
  }

  .dash-trend-panel .dash-trend-day small {
    bottom: -54px;
    font-size: 9px;
  }
}

/* CRM workspace: real operator surfaces for pipeline, tasks and finance. */
.crm-workspace {
  display: grid;
  gap: 18px;
}

.crm-workspace-head {
  margin-bottom: 0;
}

.crm-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent) 26%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 74%, transparent);
  box-shadow: var(--shadow-soft);
}

.crm-tabs button,
.crm-tabs [data-crm-mode] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px;
  padding: 0 16px !important;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 760;
  cursor: pointer;
}

.crm-tabs button:hover,
.crm-tabs button.active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
    color-mix(in srgb, var(--bg-input) 74%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent);
}

.crm-workspace-body {
  min-width: 0;
}

/* ── Kanban Board ─────────────────────────────────────────── */
.crm-kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  align-items: flex-start;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.crm-kanban::-webkit-scrollbar { height: 5px; }
.crm-kanban::-webkit-scrollbar-track { background: transparent; }
.crm-kanban::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.crm-stage,
.crm-task-column,
.crm-task-composer,
.crm-finance-empty,
.crm-finance-chart {
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-card) 86%, var(--bg-body)));
  box-shadow: var(--shadow-soft);
}

.crm-stage {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.crm-stage.is-over {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent), var(--bg-card);
}

/* Tone accent top border */
.crm-stage[data-tone="primary"]   { border-top: 3px solid var(--accent); }
.crm-stage[data-tone="success"]   { border-top: 3px solid var(--success); }
.crm-stage[data-tone="warning"]   { border-top: 3px solid var(--warning); }
.crm-stage[data-tone="danger"]    { border-top: 3px solid var(--danger); }
.crm-stage[data-tone="info"]      { border-top: 3px solid var(--info); }
.crm-stage[data-tone="secondary"] { border-top: 3px solid var(--border-light); }

/* Column header */
.crm-stage-header,
.crm-stage header,
.crm-task-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.crm-stage-header > span,
.crm-stage header span,
.crm-task-column header span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-stage-header > span i,
.crm-stage header span i { font-size: 14px; opacity: 0.65; flex-shrink: 0; }

.crm-stage-header > strong,
.crm-stage header strong,
.crm-task-column header strong {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}

/* Stage list */
.crm-stage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 1;
  min-height: 100px;
}

.crm-task-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
}

/* Empty column */
.crm-stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 12px;
  color: var(--text-muted);
  font-size: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px;
  opacity: 0.6;
  pointer-events: none;
}

.crm-stage-empty i { font-size: 20px; }

.crm-stage-add-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  line-height: 1;
}

.crm-stage-add-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

/* Lead card */
.crm-lead-card,
.crm-task-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-input) 72%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  cursor: grab;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.crm-lead-card:hover,
.crm-task-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* Card top row: avatar + info + actions */
.crm-card-top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.crm-card-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  letter-spacing: 0.03em;
}

.crm-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-card-info strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.crm-card-info span {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons — reveal on hover */
.crm-card-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 140ms ease;
}

.crm-lead-card:hover .crm-card-actions,
.crm-lead-card:focus-within .crm-card-actions { opacity: 1; }

.crm-card-actions button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.crm-card-actions button:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--accent-hover);
}

.crm-card-actions button.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  color: var(--danger);
}

/* Always show actions on touch devices */
@media (hover: none) {
  .crm-card-actions { opacity: 1; }
}

/* Card meta row */
.crm-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.crm-card-meta .deal-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
}

.crm-card-meta .no-deal {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.crm-card-meta .task-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.crm-card-meta .task-count.has-tasks { color: var(--warning); }

/* Legacy footer / task-meta support */
.crm-lead-card footer,
.crm-task-card footer,
.crm-task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crm-card-top strong,
.crm-task-card strong {
  min-width: 0;
  color: var(--text-primary);
  line-height: 1.25;
}

.crm-lead-card p,
.crm-task-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.crm-task-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  color: var(--text-muted);
  font-size: 12px;
}

.crm-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.crm-lead-card footer em {
  color: var(--accent-hover);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.crm-lead-card footer button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-primary);
  font-weight: 740;
}

.crm-task-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

.crm-task-layout > .col-12.col-lg-4 {
  flex: 0 0 340px !important;
  max-width: 340px !important;
  width: 340px !important;
  min-width: 300px !important;
}

.crm-task-layout > .col-12.col-lg-8 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.crm-task-composer {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.crm-task-composer h2 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 20px;
}

.crm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crm-task-column {
  min-height: 360px;
  padding: 12px;
}

.crm-task-card {
  cursor: default;
}

.crm-task-card.is-overdue {
  border-color: color-mix(in srgb, var(--admin-operator-red) 42%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--admin-operator-red) 10%, transparent), transparent),
    color-mix(in srgb, var(--bg-input) 74%, transparent);
}

.crm-task-card footer .form-input {
  min-height: 34px;
  max-width: 150px;
  padding-block: 0;
}

.crm-empty-mini {
  display: grid;
  min-height: 86px;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.crm-finance-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 46px);
}

.crm-finance-empty h2 {
  margin: 8px 0 10px;
  color: var(--text-primary);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.crm-finance-empty p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.crm-finance-hint {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.crm-finance-hint span {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.crm-finance {
  display: grid;
  gap: 16px;
}

.crm-finance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.crm-money-chart {
  display: grid;
  gap: 12px;
}

.crm-money-row {
  display: grid;
  grid-template-columns: minmax(160px, .32fr) minmax(0, 1fr) minmax(88px, auto);
  gap: 14px;
  align-items: center;
}

.crm-money-row span,
.crm-money-row strong {
  min-width: 0;
}

.crm-money-row span {
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-money-row > div {
  display: grid;
  gap: 5px;
}

.crm-money-row i {
  display: block;
  height: 9px;
  min-width: 4px;
  border-radius: 999px;
}

.crm-money-row i.revenue {
  background: linear-gradient(90deg, var(--accent), var(--admin-operator-blue));
}

.crm-money-row i.cost {
  background: linear-gradient(90deg, var(--admin-operator-red), var(--admin-operator-amber));
}

html[data-theme='light'] .crm-stage,
html[data-theme='light'] .crm-task-column,
html[data-theme='light'] .crm-task-composer,
html[data-theme='light'] .crm-finance-empty,
html[data-theme='light'] .crm-finance-chart,
html[data-theme='light'] .crm-tabs {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(250, 247, 239, 0.94));
  border-color: rgba(125, 111, 91, 0.22);
}

@media (max-width: 1100px) {
  .crm-task-layout,
  .crm-finance-empty {
    grid-template-columns: 1fr;
  }

  .crm-task-composer {
    position: relative;
    top: auto;
  }

  .crm-task-list,
  .crm-finance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .crm-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .crm-tabs button {
    white-space: nowrap;
  }

  .crm-form-grid,
  .crm-task-list,
  .crm-finance-kpis,
  .crm-money-row {
    grid-template-columns: 1fr;
  }
}

/* Final unified admin page headers: prevents clipped badges/copy and keeps all workspaces aligned. */
.dash-hero,
.leads-head,
.contact-hero,
.widgets-head,
.cookie-head,
.settings-page-head,
.crm-workspace-head,
.client-portal-head,
.store-head,
.notifications-head,
.integrations-head,
.dashboard-hero {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 24px !important;
  min-height: 172px !important;
  margin: 0 0 24px !important;
  padding: 30px 32px 34px !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent) 26%) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 96%, var(--accent) 4%), var(--bg-card)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.13) !important;
}

.dash-hero > div:first-child,
.leads-head > div:first-child,
.contact-hero > div:first-child,
.widgets-head > div:first-child,
.cookie-head > div:first-child,
.settings-page-head > div:first-child,
.crm-workspace-head > div:first-child,
.client-portal-head > div:first-child,
.store-head > div:first-child,
.notifications-head > div:first-child,
.integrations-head > div:first-child,
.dashboard-hero > div:first-child {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 0;
}

.dash-hero .eyebrow,
.leads-head .eyebrow,
.contact-hero .eyebrow,
.widgets-head .eyebrow,
.cookie-head .eyebrow,
.settings-page-head .eyebrow,
.crm-workspace-head .eyebrow,
.client-portal-head .eyebrow,
.store-head .eyebrow,
.notifications-head .eyebrow,
.integrations-head .eyebrow,
.dashboard-hero .eyebrow,
.messenger-inbox-heading .eyebrow {
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 6px 11px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  color: color-mix(in srgb, var(--accent) 78%, #ffffff 22%);
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  white-space: nowrap;
}

.dash-hero h1,
.leads-head h1,
.contact-hero h1,
.widgets-head h1,
.cookie-head h1,
.settings-page-head h1,
.crm-workspace-head h1,
.client-portal-head h1,
.store-head h1,
.notifications-head h1,
.integrations-head h1,
.dashboard-hero h1,
.messenger-inbox-heading h1 {
  max-width: min(920px, 100%);
  margin: 0 !important;
  color: var(--text-primary);
  font-size: clamp(32px, 2.35vw, 48px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
}

.dash-hero p:not(.eyebrow),
.leads-head p:not(.eyebrow),
.contact-hero p:not(.eyebrow),
.widgets-head p:not(.eyebrow),
.cookie-head p:not(.eyebrow),
.settings-page-head p:not(.eyebrow),
.crm-workspace-head p:not(.eyebrow),
.client-portal-head p:not(.eyebrow),
.store-head p:not(.eyebrow),
.notifications-head p:not(.eyebrow),
.integrations-head p:not(.eyebrow),
.dashboard-hero p:not(.eyebrow),
.messenger-inbox-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 !important;
  color: var(--text-secondary);
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.dash-hero > .btn,
.dash-hero #dashRefresh,
.leads-head .lead-detail-actions,
.contact-hero-actions,
.widgets-head .widgets-actions,
.cookie-head > .btn,
.settings-page-head > .btn,
.crm-workspace-head > .btn,
.client-portal-head > .btn,
.store-head > .btn,
.notifications-head > .btn,
.integrations-head > .btn,
.dashboard-hero > .btn {
  position: static !important;
  justify-self: end;
  align-self: start;
  margin: 0 !important;
  min-height: 48px;
}

.leads-head .lead-detail-actions,
.contact-hero-actions,
.widgets-head .widgets-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  max-width: min(520px, 100%);
}

.leads-head .lead-detail-actions .btn,
.contact-hero-actions .btn,
.widgets-head .widgets-actions .btn {
  min-height: 48px;
}

html[data-theme='light'] .dash-hero,
html[data-theme='light'] .leads-head,
html[data-theme='light'] .contact-hero,
html[data-theme='light'] .widgets-head,
html[data-theme='light'] .cookie-head,
html[data-theme='light'] .settings-page-head,
html[data-theme='light'] .crm-workspace-head,
html[data-theme='light'] .client-portal-head,
html[data-theme='light'] .store-head,
html[data-theme='light'] .notifications-head,
html[data-theme='light'] .integrations-head,
html[data-theme='light'] .dashboard-hero {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.99), rgba(248, 244, 236, 0.96)) !important;
  border-color: rgba(125, 111, 91, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 38px rgba(70, 61, 47, 0.10) !important;
}

html[data-theme='light'] .dash-hero .eyebrow,
html[data-theme='light'] .leads-head .eyebrow,
html[data-theme='light'] .contact-hero .eyebrow,
html[data-theme='light'] .widgets-head .eyebrow,
html[data-theme='light'] .cookie-head .eyebrow,
html[data-theme='light'] .settings-page-head .eyebrow,
html[data-theme='light'] .crm-workspace-head .eyebrow,
html[data-theme='light'] .client-portal-head .eyebrow,
html[data-theme='light'] .store-head .eyebrow,
html[data-theme='light'] .notifications-head .eyebrow,
html[data-theme='light'] .integrations-head .eyebrow,
html[data-theme='light'] .dashboard-hero .eyebrow,
html[data-theme='light'] .messenger-inbox-heading .eyebrow {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fffaf1);
}

@media (max-width: 900px) {
  .dash-hero,
  .leads-head,
  .contact-hero,
  .widgets-head,
  .cookie-head,
  .settings-page-head,
  .crm-workspace-head,
  .client-portal-head,
  .store-head,
  .notifications-head,
  .integrations-head,
  .dashboard-hero {
    grid-template-columns: 1fr;
    min-height: 0 !important;
    padding: 24px !important;
  }

  .dash-hero > .btn,
  .dash-hero #dashRefresh,
  .leads-head .lead-detail-actions,
  .contact-hero-actions,
  .widgets-head .widgets-actions,
  .cookie-head > .btn,
  .settings-page-head > .btn,
  .crm-workspace-head > .btn,
  .client-portal-head > .btn,
  .store-head > .btn,
  .notifications-head > .btn,
  .integrations-head > .btn,
  .dashboard-hero > .btn {
    justify-self: stretch;
    width: 100%;
  }

  .leads-head .lead-detail-actions,
  .contact-hero-actions,
  .widgets-head .widgets-actions {
    justify-content: stretch;
  }

  .leads-head .lead-detail-actions .btn,
  .contact-hero-actions .btn,
  .widgets-head .widgets-actions .btn {
    flex: 1 1 180px;
  }
}

/* ═══════════════════════════════════════
   APP DASHBOARD PRO - CALENDAR COLOR OVERRIDES
   ═══════════════════════════════════════ */
.event-primary { background: #e0e7ff; color: #3730a3; }
.event-success { background: #dcfce7; color: #166534; }
.event-warning { background: #fef3c7; color: #92400e; }
.event-danger { background: #fee2e2; color: #991b1b; }
.event-info { background: #e0f2fe; color: #075985; }

[data-theme='dark'] .event-primary { background: rgba(99, 102, 241, 0.25); color: #a5b4fc; }
[data-theme='dark'] .event-success { background: rgba(34, 197, 94, 0.25); color: #86efac; }
[data-theme='dark'] .event-warning { background: rgba(245, 158, 11, 0.25); color: #fde68a; }
[data-theme='dark'] .event-danger { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
[data-theme='dark'] .event-info { background: rgba(14, 165, 233, 0.25); color: #7dd3fc; }

.event-color-picker .event-color-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
}
.event-color-picker .event-color-option:hover {
  transform: scale(1.1);
}

/* Admin layout normalization: predictable controls and compact work surfaces. */
.login-card .btn-primary {
  width: 100%;
}

.content-area .btn-primary:not(.w-100) {
  width: auto;
}

.field-group {
  display: block;
  min-width: 0;
}

.page-app,
.leads-admin-page,
.contacts-command-center,
.widgets-admin,
.cookie-admin,
.workspace-settings-admin,
.integrations-admin {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

.cms-editor-root {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

.cms-page-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.cms-page-nav-panel {
  position: sticky;
  top: 82px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.cms-page-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-page-nav-head small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.cms-page-nav {
  display: grid;
  gap: 5px;
  padding: 8px;
}

.cms-page-nav-btn {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.cms-page-nav-btn:hover {
  border-color: var(--border);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cms-page-nav-btn.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: var(--accent-muted);
  color: var(--accent-hover);
}

.cms-page-nav-btn > i:first-child {
  color: currentColor;
  text-align: center;
}

.cms-page-nav-btn > i:last-child {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}

.cms-page-editor {
  min-width: 0;
}

.cms-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.cms-editor-title {
  min-width: 0;
}

.cms-editor-title .eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-editor-title h1 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.cms-editor-title p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.cms-editor-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cms-crm-guide {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary);
}

.cms-crm-guide > i {
  margin-top: 2px;
  color: var(--accent-hover);
  font-size: 16px;
}

.cms-crm-guide > div {
  display: grid;
  gap: 3px;
}

.cms-crm-guide strong {
  color: var(--text-primary);
  font-size: 13px;
}

.cms-crm-guide span {
  max-width: 70ch;
  font-size: 12px;
  line-height: 1.5;
}

/* Activity log archive */
.activity-logs-admin {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

.activity-log-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.activity-log-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}

.activity-log-panel-head h2 {
  margin: 0 0 3px;
  color: var(--text-primary);
  font-size: 17px;
  letter-spacing: 0;
}

.activity-log-panel-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.activity-log-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 190px));
  gap: 10px;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
}

.activity-log-search {
  position: relative;
  display: block;
  min-width: 0;
}

.activity-log-search > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.activity-log-search .form-input {
  width: 100%;
  padding-left: 38px;
}

.activity-log-list {
  display: grid;
}

.activity-log-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

.activity-log-row:hover {
  background: var(--bg-hover);
}

.activity-log-main {
  min-width: 0;
}

.activity-log-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.activity-log-title strong {
  color: var(--text-primary);
  font-size: 14px;
  text-transform: capitalize;
}

.activity-log-category {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.activity-log-context,
.activity-log-ip {
  color: var(--text-muted);
  font-size: 12px;
}

.activity-log-summary {
  max-width: 100%;
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.activity-log-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 1px;
  white-space: nowrap;
}

.activity-log-status {
  min-width: 68px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
}

.activity-log-status.status-success { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.activity-log-status.status-warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.activity-log-status.status-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

.activity-log-details {
  margin-top: 7px;
}

.activity-log-details summary {
  width: max-content;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.activity-log-details summary i {
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.16s ease;
}

.activity-log-details[open] summary i {
  transform: rotate(90deg);
}

.activity-log-details pre {
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.activity-log-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: var(--text-muted);
  font-size: 12px;
}

.activity-log-footer[hidden] {
  display: none;
}

/* Contact avatars */
.contact-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.contact-avatar-sm {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 11px;
}

.contact-avatar-lg {
  width: 58px;
  height: 58px;
  min-width: 58px;
  font-size: 18px;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.contact-avatar-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-hover);
}

.contact-avatar-editor strong,
.contact-avatar-editor span {
  display: block;
}

.contact-avatar-editor strong {
  margin-bottom: 2px;
  color: var(--text-primary);
  font-size: 13px;
}

.contact-avatar-editor span {
  color: var(--text-muted);
  font-size: 11px;
}

@media (max-width: 560px) {
  .contact-avatar-editor {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .activity-log-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-log-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .activity-log-toolbar {
    grid-template-columns: 1fr;
  }

  .activity-log-search {
    grid-column: auto;
  }

  .activity-log-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }

  .activity-log-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .activity-log-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .cms-page-shell {
    grid-template-columns: 1fr;
  }

  .cms-page-nav-panel {
    position: static;
  }

  .cms-page-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cms-page-nav {
    grid-template-columns: 1fr;
  }

  .cms-editor-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cms-editor-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .cms-editor-actions .btn {
    flex: 1 1 130px;
  }
}

.admin-page-heading,
.settings-page-head.admin-page-heading {
  position: relative;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 24px !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 20px 22px !important;
  overflow: visible !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

.admin-page-heading::before,
.admin-page-heading::after {
  display: none !important;
}

.admin-page-heading > div:first-child,
.settings-page-head.admin-page-heading > div:first-child {
  min-width: 0;
  display: block;
  padding: 0;
}

.admin-page-heading .eyebrow,
.settings-page-head.admin-page-heading .eyebrow {
  width: max-content !important;
  max-width: 100%;
  min-height: 0;
  display: inline-flex !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--accent-hover);
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.admin-page-heading h1,
.settings-page-head.admin-page-heading h1 {
  margin: 0 0 6px !important;
  color: var(--text-primary) !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.admin-page-heading p:not(.eyebrow),
.settings-page-head.admin-page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 !important;
  color: var(--text-secondary);
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

.admin-page-heading > .btn,
.admin-page-heading > div:last-child:not(:first-child) {
  flex: 0 0 auto;
}

.admin-page-heading .widgets-actions,
.admin-page-heading .lead-detail-actions,
.admin-page-heading .contact-hero-actions {
  width: auto;
  max-width: 520px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-page-heading .btn {
  min-height: 40px;
  padding: 9px 14px;
}

.cookie-copy-panel .settings-body > .field-group,
.cookie-copy-panel .form-textarea {
  width: 100%;
}

/* Integrations Center */
.integrations-admin {
  max-width: 1480px;
}

.integrations-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.integration-category-panel {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.integration-category-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.integration-category-nav {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.integration-category-btn {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.integration-category-btn:hover {
  border-color: var(--border-light);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.integration-category-btn.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--accent-muted);
  color: var(--accent-hover);
}

.integration-category-btn > i:first-child {
  text-align: center;
}

.integration-category-arrow {
  color: var(--text-muted);
  font-size: 11px;
}

.integration-context-head {
  margin-bottom: 14px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--border);
}

.integration-context-head .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.integration-context-head h2 {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: 22px;
  letter-spacing: 0;
}

.integration-context-head p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.integration-ownership-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-muted) 58%, var(--bg-card));
}

.integration-ownership-callout__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--accent-hover);
  font-size: 21px;
}

.integration-ownership-callout__copy { min-width: 0; }

.integration-ownership-callout__copy h3 {
  margin: 0 0 3px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.integration-ownership-callout__copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.integration-ownership-callout__action {
  min-height: 40px;
  white-space: nowrap;
}

/* Telegram Bot Settings */
.telegram-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 22px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.telegram-settings-tabs .btn {
  min-height: 40px;
  border-radius: 8px;
}

.telegram-customer-flow__intro {
  display: grid;
  gap: 3px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.telegram-customer-flow__intro strong {
  color: var(--text-primary);
  font-size: 14px;
}

.telegram-customer-flow .telegram-settings-section + .telegram-settings-section {
  border-top: 1px solid var(--border);
}

.telegram-settings-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
  gap: 20px;
  align-items: start;
}

.telegram-settings-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.telegram-settings-section + .telegram-settings-section {
  border-top: 1px solid var(--border);
}

.telegram-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  background: color-mix(in srgb, var(--bg-card) 90%, var(--bg-hover));
}

.telegram-section-head h3,
.telegram-preview-heading h3 {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.telegram-section-head p,
.telegram-preview-heading p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.telegram-section-body {
  padding: 4px 22px 22px;
}

.telegram-basics-grid,
.telegram-notification-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.telegram-copy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.telegram-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
}

.telegram-field small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

.telegram-field textarea {
  resize: vertical;
  min-height: 82px;
}

.telegram-toggle-field {
  min-height: 70px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
}

.telegram-toggle-field > div,
.telegram-notification-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.telegram-toggle-field strong,
.telegram-notification-head strong,
.telegram-lead-field strong,
.telegram-list-empty strong {
  color: var(--text-primary);
  font-size: 13px;
}

.telegram-toggle-field span,
.telegram-notification-head span,
.telegram-list-empty span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.telegram-connection-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.telegram-connection-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}

.telegram-connection-status.is-connected {
  color: var(--success);
}

.telegram-connection-status.is-connected > span {
  background: var(--success);
}

.telegram-connection-status.is-error {
  color: var(--danger);
}

.telegram-connection-status.is-error > span {
  background: var(--danger);
}

.telegram-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.telegram-section-actions .btn,
.telegram-row-actions .btn,
.telegram-section-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.telegram-repeat-list {
  display: grid;
  padding-top: 0;
}

.telegram-repeat-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
}

.telegram-repeat-row + .telegram-repeat-row {
  border-top: 1px solid var(--border);
}

.telegram-repeat-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.telegram-repeat-content {
  min-width: 0;
}

.telegram-repeat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
  margin-bottom: 12px;
}

.telegram-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr) 96px;
  gap: 12px;
  margin-bottom: 12px;
}

.telegram-repeat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.telegram-row-actions,
.telegram-inline-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telegram-inline-switch {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.telegram-inline-switch .form-check {
  min-height: 0;
  margin: 0;
  padding-left: 2.5em;
}

/* .telegram-settings-workspace form switches inherit from unified .form-switch rule */

.telegram-list-empty,
.telegram-settings-empty,
.telegram-settings-loading {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
}

.telegram-list-empty > i,
.telegram-settings-empty > i {
  color: var(--accent);
  font-size: 22px;
}

.telegram-list-empty > div,
.telegram-settings-empty {
  display: grid;
  gap: 3px;
}

.telegram-settings-empty {
  justify-items: center;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  text-align: center;
}

.telegram-lead-fields {
  display: grid;
  margin-bottom: 18px;
  border-top: 1px solid var(--border);
}

.telegram-lead-field {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.telegram-lead-field-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(160px, 1fr);
  align-items: center;
  gap: 12px;
}

.telegram-notification-list {
  display: grid;
}

.telegram-notification-row {
  padding: 18px 0;
}

.telegram-notification-row + .telegram-notification-row {
  border-top: 1px solid var(--border);
}

.telegram-notification-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.telegram-notification-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--accent-muted);
  color: var(--accent-hover);
}

.telegram-event-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.telegram-event-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.telegram-event-toggles input {
  accent-color: var(--accent);
}

.telegram-section-error {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 11%, var(--bg-card));
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

.telegram-preview-column {
  min-width: 0;
}

.telegram-preview-sticky {
  position: sticky;
  top: 76px;
}

.telegram-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.telegram-preview-health {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-secondary);
}

.telegram-preview-health.is-ready {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: color-mix(in srgb, var(--success) 7%, var(--bg-card));
}

.telegram-preview-health.is-problem {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--bg-card));
}

.telegram-preview-health.is-off {
  background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-card));
}

.telegram-preview-health-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 12px;
}

.telegram-preview-health.is-ready .telegram-preview-health-title > i {
  color: var(--success);
}

.telegram-preview-health.is-problem .telegram-preview-health-title > i {
  color: var(--danger);
}

.telegram-preview-health p,
.telegram-preview-health ul {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.telegram-preview-health ul {
  display: grid;
  gap: 3px;
  padding-left: 17px;
}

.telegram-preview-health-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.telegram-preview-health-meta span {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.telegram-phone {
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.telegram-phone-top {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.telegram-phone-top > i {
  color: var(--text-secondary);
}

.telegram-phone-top > div {
  display: grid;
  gap: 1px;
}

.telegram-phone-top strong {
  font-size: 13px;
}

.telegram-phone-top span {
  color: var(--text-muted);
  font-size: 10px;
}

.telegram-bot-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-card) !important;
  font-size: 16px !important;
}

.telegram-chat {
  height: min(560px, calc(100vh - 260px));
  min-height: 430px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 12px;
  background: color-mix(in srgb, var(--bg-body) 78%, var(--accent-muted));
}

.telegram-day-label {
  align-self: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
}

.telegram-scenario-step {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 5px 0 1px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  color: var(--text-secondary);
}

.telegram-scenario-step > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 800;
}

.telegram-scenario-step > div {
  display: grid;
  gap: 1px;
}

.telegram-scenario-step strong {
  color: var(--text-primary);
  font-size: 11px;
}

.telegram-scenario-step small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.telegram-scenario-step > i {
  color: var(--success);
  font-size: 12px;
}

.telegram-scenario-step.is-off > i {
  color: var(--text-muted);
}

.telegram-scenario-step.is-problem > i {
  color: var(--danger);
}

.telegram-bubble {
  position: relative;
  max-width: 84%;
  padding: 9px 10px 15px;
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
}

.telegram-bubble.is-user {
  align-self: flex-end;
  background: var(--accent-muted);
}

.telegram-bubble.is-problem {
  border: 1px solid color-mix(in srgb, var(--danger) 56%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
}

.telegram-bubble p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.telegram-bubble time {
  position: absolute;
  right: 7px;
  bottom: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.telegram-bubble.is-new {
  animation: telegram-preview-response 180ms ease-out both;
}

.telegram-preview-buttons {
  width: min(88%, 290px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.telegram-preview-buttons.is-stacked {
  grid-template-columns: 1fr;
}

.telegram-preview-buttons button,
.telegram-contact-button,
.telegram-preview-back {
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.telegram-preview-buttons button:hover,
.telegram-contact-button:hover,
.telegram-preview-back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.telegram-contact-button {
  align-self: stretch;
}

.telegram-preview-hidden,
.telegram-preview-skipped,
.telegram-preview-captured {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 8px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-hover) 68%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.telegram-preview-hidden > i,
.telegram-preview-skipped > i,
.telegram-preview-captured > i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--text-muted);
}

.telegram-preview-captured strong {
  color: var(--text-primary);
}

.telegram-preview-hidden {
  opacity: 0.82;
}

.telegram-preview-skipped.is-problem,
.telegram-preview-captured.is-problem {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
  color: var(--danger);
}

.telegram-preview-skipped.is-problem > i,
.telegram-preview-captured.is-problem > i {
  color: var(--danger);
}

.telegram-preview-back {
  align-self: center;
  margin-top: auto;
  box-shadow: none;
}

.telegram-composer {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
}

@keyframes telegram-preview-response {
  from { transform: translateY(4px); opacity: 0.72; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 1260px) {
  .telegram-settings-workspace {
    grid-template-columns: 1fr;
  }

  .telegram-preview-column {
    grid-row: 1;
  }

  .telegram-settings-editor {
    grid-row: 2;
  }

  .telegram-preview-sticky {
    position: static;
  }

  .telegram-phone {
    max-width: 420px;
  }

  .telegram-chat {
    height: 520px;
  }
}

@media (max-width: 720px) {
  .telegram-settings-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .telegram-settings-tabs .btn {
    flex: 1 1 140px;
  }

  .telegram-customer-flow__intro {
    padding-left: 16px;
    padding-right: 16px;
  }

  .telegram-settings-editor {
    grid-row: 1;
  }

  .telegram-preview-column {
    grid-row: 2;
  }

  .telegram-section-head,
  .telegram-repeat-footer,
  .telegram-notification-head {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .telegram-basics-grid,
  .telegram-copy-grid,
  .telegram-notification-fields,
  .telegram-repeat-grid,
  .telegram-menu-grid {
    grid-template-columns: 1fr;
  }

  .telegram-section-head,
  .telegram-section-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .telegram-lead-field {
    grid-template-columns: 1fr 1fr;
  }

  .telegram-lead-field-copy {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .telegram-row-actions,
  .telegram-section-actions {
    width: 100%;
  }

  .telegram-row-actions .btn,
  .telegram-section-actions .btn {
    flex: 1 1 130px;
    justify-content: center;
  }

  .telegram-phone {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-bubble.is-new {
    animation: none;
  }
}

/* Workspace settings */
#crmCreateLeadModal {
  z-index: 1060;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg-body) 82%, transparent);
}

.workspace-currency-section {
  margin-bottom: 22px;
}

.workspace-currency-copy {
  max-width: 72ch;
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.workspace-currency-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.workspace-currency-option {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
}

.workspace-currency-option:hover {
  border-color: var(--border-light);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.workspace-currency-option:focus-within {
  outline: 3px solid var(--accent-muted);
  outline-offset: 2px;
}

.workspace-currency-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.workspace-currency-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.workspace-currency-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 750;
}

.workspace-currency-option.is-selected .workspace-currency-symbol {
  background: var(--accent);
  color: var(--bg-body);
}

.workspace-currency-option strong,
.workspace-currency-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-currency-option strong {
  color: var(--text-primary);
  font-size: 13px;
}

.workspace-currency-option small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.workspace-currency-option > i {
  color: var(--accent);
  opacity: 0;
}

.workspace-currency-option.is-selected > i {
  opacity: 1;
}

.workspace-currency-preview {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.workspace-currency-preview strong {
  color: var(--text-primary);
  font-size: 17px;
}

.workspace-currency-preview small {
  margin-left: auto;
  color: var(--text-secondary);
}

.workspace-menu-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.workspace-menu-section {
  margin: 0;
  overflow: hidden;
}

.workspace-menu-section .settings-header > span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}

.workspace-menu-list {
  display: grid;
}

.workspace-menu-item {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.workspace-menu-item:last-child {
  border-bottom: 0;
}

.workspace-menu-item:hover {
  background: var(--bg-hover);
}

.sidebar-nav .nav-item[hidden],
.sidebar-nav .nav-section[hidden] {
  display: none !important;
}

.workspace-branding-section {
  margin-bottom: 22px;
}

.workspace-branding-section .brand-image-hint {
  display: block;
  margin: 2px 0 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.settings-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.settings-section-label small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

/* Client Portal CMS follows the same navigation/editor model as Landing CMS. */
.client-portal-cms-header {
  flex-wrap: wrap;
}

.client-portal-cms-header .cms-editor-title {
  flex: 1 1 320px;
}

.client-portal-cms-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.portal-language-indicator,
.portal-access-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.portal-language-indicator i {
  color: var(--accent-hover);
}

.portal-access-toggle {
  cursor: pointer;
}

.portal-access-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.portal-access-toggle > i {
  position: relative;
  width: 30px;
  height: 18px;
  flex: 0 0 30px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-hover);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.portal-access-toggle > i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 160ms ease, background-color 160ms ease;
}

.portal-access-toggle input:checked ~ i {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.portal-access-toggle input:checked ~ i::after {
  transform: translateX(12px);
  background: var(--accent);
}

.portal-access-toggle input:focus-visible ~ i {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.client-portal-editor-body {
  min-width: 0;
}

.client-portal-editor-body .card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm) !important;
}

.client-portal-editor-body .card h5 {
  color: var(--text-primary) !important;
  letter-spacing: 0;
}

.client-portal-editor-body .card h5 > i {
  color: var(--accent-hover);
}

.portal-login-preview {
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  .client-portal-cms-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .portal-language-indicator,
  .portal-access-toggle {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.workspace-menu-item strong,
.workspace-menu-item small {
  display: block;
}

.workspace-menu-item strong {
  color: var(--text-primary);
  font-size: 13px;
}

.workspace-menu-item small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.workspace-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
}

.workspace-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.workspace-switch i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-input);
}

.workspace-switch i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.workspace-switch input:checked + i {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.workspace-switch input:checked + i::after {
  background: var(--accent-hover);
  transform: translateX(16px);
}

.workspace-switch input:focus-visible + i {
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.workspace-settings-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.workspace-settings-foot .btn {
  margin-left: auto;
}

@media (max-width: 980px) {
  .integrations-shell {
    grid-template-columns: 1fr;
  }

  .integration-category-panel {
    position: static;
    max-height: none;
  }

  .integration-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-page-heading,
  .settings-page-head.admin-page-heading {
    display: grid !important;
    grid-template-columns: 1fr;
    padding: 18px !important;
  }

  .admin-page-heading > .btn,
  .admin-page-heading .widgets-actions,
  .admin-page-heading .lead-detail-actions,
  .admin-page-heading .contact-hero-actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
  }

  .admin-page-heading .widgets-actions .btn,
  .admin-page-heading .lead-detail-actions .btn,
  .admin-page-heading .contact-hero-actions .btn {
    flex: 1 1 150px;
  }

  .workspace-menu-groups,
  .workspace-currency-options,
  .integration-category-nav,
  .cms-grid-2 {
    grid-template-columns: 1fr;
  }

  .workspace-currency-preview {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workspace-currency-preview small {
    width: 100%;
    margin-left: 0;
  }

  .workspace-settings-foot {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workspace-settings-foot .btn {
    width: 100%;
    margin-left: 0;
  }

  .integration-category-content,
  .integration-section-head,
  .integration-section-head p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .integration-ownership-callout {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-ownership-callout__action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .integration-category-nav {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
  }

  .integration-category-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
  }

  .integration-category-btn .integration-category-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.22s ease;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 23, 42, 0.48);
  }

  body.sidebar-open .sidebar-overlay {
    display: block !important;
  }

  .header {
    left: 0 !important;
    width: 100% !important;
  }

  .main-content {
    margin-left: 0 !important;
  }
}
.event-color-picker .event-color-option.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--accent-color, #315cf6);
}

/* ═══════════════════════════════════════
   FIX FOR SELECT DROPDOWN CHEVRONS (image.png)
   ═══════════════════════════════════════ */
select,
select.form-select,
select.form-input,
.form-select,
.form-input select,
.field-group select,
.modal-content select,
.admin-field select,
.card select {
  background-color: var(--bg-input, #0f172a) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* ═══════════════════════════════════════
   OPERATING DASHBOARD INTERACTIVE ENHANCEMENTS
   ═══════════════════════════════════════ */
.dashboard-kpi-card,
.dashboard-stage-card,
.dashboard-activity-item,
.dashboard-quick-action {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-kpi-card:hover,
.dashboard-stage-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
  box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--accent) 20%, transparent);
}

.dashboard-kpi-card:active,
.dashboard-stage-card:active {
  transform: translateY(-1px) scale(0.99);
}

.dashboard-activity-item {
  padding: 8px 12px;
  border-radius: 8px;
}

.dashboard-activity-item:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
  transform: translateX(4px);
}

.dashboard-quick-action {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
}

.dashboard-quick-action:hover {
  background: var(--bg-active, rgba(110, 69, 226, 0.1));
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.dashboard-chart-wrap {
  position: relative;
  overflow: hidden;
}

.dashboard-chart-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dashboard-chart-wrap .chart-dot {
  cursor: pointer;
  transition: r 0.2s ease, fill 0.2s ease;
}

.dashboard-chart-wrap .chart-dot:hover {
  r: 7;
  fill: #6e45e2;
  filter: drop-shadow(0 0 6px rgba(110, 69, 226, 0.8));
}


/* ═══════════════════════════════════════════════════════════════
   FINAL LAYOUT FIX — Icons & Text Normalization
   Resolves conflicts between appdashboard-main.css and admin.css.
   Scoped to NON-ERP shells: the ERP shell (.app-layout) is themed
   entirely by crm-theme.css via #sidebar, so these legacy overrides
   must not reach it. Without the scope, the !important declarations
   below override the #sidebar-scoped design tokens (icon sizes,
   colours, border-radii, active backgrounds) and break the ERP
   visual identity.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Sidebar nav-item: isolate from appdashboard .nav-item ─── */
body:not(.app-layout) .sidebar-nav > button.nav-item,
body:not(.app-layout) .sidebar-nav > .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: calc(100% - 20px) !important;
  margin: 1px 10px !important;
  padding: 10px 12px !important;
  border: none !important;
  border-left: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--default-font, 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
  position: relative !important;
  box-shadow: none !important;
  min-height: 42px !important;
}

body:not(.app-layout) .sidebar-nav > button.nav-item::before,
body:not(.app-layout) .sidebar-nav > button.nav-item::after,
body:not(.app-layout) .sidebar-nav > .nav-item::before,
body:not(.app-layout) .sidebar-nav > .nav-item::after {
  display: none !important;
}

body:not(.app-layout) .sidebar-nav > button.nav-item:hover,
body:not(.app-layout) .sidebar-nav > .nav-item:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06)) !important;
  color: var(--text-primary) !important;
  transform: translateX(2px) !important;
}

body:not(.app-layout) .sidebar-nav > button.nav-item.active,
body:not(.app-layout) .sidebar-nav > .nav-item.active {
  color: #fff !important;
  background: var(--accent, #6366f1) !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item {
  color: #374151 !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item:hover {
  color: var(--accent, #315cf6) !important;
  background: #edf3ff !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item.active {
  color: #ffffff !important;
  background: var(--accent, #315cf6) !important;
  box-shadow: 0 4px 12px rgba(49, 92, 246, 0.25) !important;
}

/* ─── Sidebar nav-item icons: consistent size and alignment ─── */
body:not(.app-layout) .sidebar-nav > button.nav-item > i,
body:not(.app-layout) .sidebar-nav > .nav-item > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
  color: inherit !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ─── Sidebar nav-item text span ─── */
body:not(.app-layout) .sidebar-nav > button.nav-item > span,
body:not(.app-layout) .sidebar-nav > .nav-item > span {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* ─── Sidebar nav section headings ─── */
body:not(.app-layout) .sidebar-nav > .nav-section {
  display: block !important;
  padding: 14px 16px 5px !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted, #6b7280) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ─── Sidebar footer user block ─── */
body:not(.app-layout) .sidebar-footer .sidebar-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body:not(.app-layout) .sidebar-footer .sidebar-user .avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body:not(.app-layout) .sidebar-footer .sidebar-user .user-info {
  flex: 1 !important;
  min-width: 0 !important;
}

body:not(.app-layout) .sidebar-footer .sidebar-user .user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.app-layout) .sidebar-footer .sidebar-user .user-role {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}

body:not(.app-layout) .sidebar-footer .sidebar-user > i {
  flex-shrink: 0 !important;
  font-size: 14px !important;
}

/* ─── Header icon buttons ─── */
.header .header-action,
.header button.header-action,
.header .header-action > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
}

.header .header-action i,
.header button.header-action i {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ─── Header notification badge ─── */
.header .header-action .badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 14px !important;
  text-align: center !important;
  border-radius: 50px !important;
}

.header .header-notification-count[hidden] {
  display: none !important;
}

.notification-dropdown .header-notifications-panel {
  width: min(360px, calc(100vw - 24px));
  margin-top: 10px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.header-notifications-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.header-notifications-head h6,
.header-notifications-head span {
  display: block;
  margin: 0;
}

.header-notifications-head h6 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.header-notifications-head span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.header .header-notifications-close,
.header .header-notification-dismiss {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-muted) !important;
}

.header .header-notifications-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
}

.header .header-notification-dismiss {
  width: 28px !important;
  height: 28px !important;
  border-radius: 5px !important;
}

.header .header-notifications-close:hover,
.header .header-notification-dismiss:hover {
  border-color: var(--border) !important;
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.header-notification-list {
  max-height: 340px;
  overflow-y: auto;
}

.header-notification-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.header-notification-item:hover {
  background: var(--bg-hover);
}

.header-notification-item > i {
  font-size: 17px;
  text-align: center;
}

.header-notification-copy {
  min-width: 0;
}

.header-notification-copy strong,
.header-notification-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-notification-copy strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.header-notification-copy span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.header-notifications-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

.header-notifications-empty[hidden] {
  display: none !important;
}

.header-notifications-empty i {
  margin-bottom: 4px;
  font-size: 24px;
}

.header-notifications-empty strong {
  color: var(--text-primary);
  font-size: 13px;
}

.header-notifications-empty span {
  font-size: 12px;
}

.header-notifications-footer {
  display: flex;
  justify-content: flex-end;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

.header-notifications-footer button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
}

.header-notifications-footer button:hover {
  color: var(--accent);
}

.header-notifications-footer button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.headerNotificationsToggle.is-active,
#headerNotificationsToggle.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-muted) !important;
  color: var(--accent-hover) !important;
}

@media (max-width: 576px) {
  .notification-dropdown .header-notifications-panel {
    position: fixed !important;
    top: 58px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto;
    margin: 0;
    transform: none !important;
  }
}

/* ─── Header user dropdown: avatar and text ─── */
.header .avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.header .user-name {
  line-height: 1.2 !important;
}

.header .user-name strong {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.header .user-name small {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* ─── Header search icon fix ─── */
.header .search-form button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
}

.header .search-form button i {
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* ─── Login page icon fix ─── */
.login-page .login-logo i {
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.login-page .btn i {
  font-size: 16px !important;
  line-height: 1 !important;
  margin-right: 6px !important;
}

.login-page .login-theme-toggle i {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ─── Sidebar brand: consistent text ─── */
.sidebar .sidebar-brand {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.sidebar .sidebar-brand small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  line-height: 1.3 !important;
}

/* ─── Sidebar logo mark: consistent size ─── */
.sidebar .sidebar-logo {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

/* ─── Sidebar header: fix height alignment ─── */
.sidebar .sidebar-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: var(--header-height, 56px) !important;
  min-height: var(--header-height, 56px) !important;
  padding: 16px 20px !important;
}

/* ─── Sidebar collapsed mode icon fix ─── */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar-nav > button.nav-item,
  body.sidebar-collapsed .sidebar-nav > .nav-item {
    justify-content: center !important;
    padding: 10px 0 !important;
    width: 46px !important;
    min-height: 46px !important;
    margin: 4px auto !important;
    overflow: visible !important;
  }

  body.sidebar-collapsed .sidebar-nav > button.nav-item > i,
  body.sidebar-collapsed .sidebar-nav > .nav-item > i {
    font-size: 20px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
  }

  body.sidebar-collapsed .sidebar-nav > button.nav-item > span,
  body.sidebar-collapsed .sidebar-nav > .nav-item > span {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar-nav > .nav-section {
    display: none !important;
  }
}

/* ─── Dashboard standalone: icon spacing ─── */
.dashboard-standalone .standalone-brand span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

.dashboard-standalone .standalone-topbar button i,
.dashboard-standalone .standalone-hero a i {
  font-size: 16px !important;
  line-height: 1 !important;
  margin-right: 4px !important;
}

/* ─── Toast icon fix ─── */
.toast-container .toast i {
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ─── Generic icon baseline fix for all admin views ─── */
.content-area i.bi,
.content-area i.ri,
.content-area i[class^="ph-"],
.content-area i[class^="lucide-"],
.content-area i.fas,
.content-area i.far,
.content-area i.fab {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* ─── Dropdown menu icon alignment ─── */
.dropdown-menu i {
  display: inline-flex !important;
  align-items: center !important;
  width: 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ─── Empty state / Loading state text fix ─── */
.empty-state,
.loading-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.empty-state i,
.loading-state i {
  font-size: 48px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

/* ─── Fix button icon vertical alignment everywhere ─── */
.btn > i,
button > i {
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* ─── Mobile menu button icon ─── */
.sidebar-toggle i {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   Dashboard v2 — Dark Glassmorphism Premium Design
   Real-time metrics, animated charts, micro-interactions
   ═══════════════════════════════════════════════════════════ */

.dashboard-v2 {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1440px;
  margin: 0 auto;
}

/* ── Header ──────────────────────────── */
.dash-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.dash-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.dash-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────── */
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.dash-btn i { font-size: 0.85rem; }
.dash-btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border);
}
.dash-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(99,102,241,0.15);
}
.dash-btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.dash-btn-outline:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}

/* ── KPI Cards Grid (top 6) ─────────── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.dash-kpi {
  cursor: pointer;
}
.dash-kpi-inner {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  transition: all 0.25s ease;
  height: 100%;
}
.dash-kpi-inner:hover {
  transform: translateY(-3px);
  border-color: var(--border-light);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.dash-kpi-glow {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.12;
  transition: opacity 0.3s;
  pointer-events: none;
}
.dash-kpi-inner:hover .dash-kpi-glow { opacity: 0.25; }
.dash-tone-cyan .dash-kpi-glow { background: #38bdf8; }
.dash-tone-blue .dash-kpi-glow { background: #3b82f6; }
.dash-tone-amber .dash-kpi-glow { background: #f59e0b; }
.dash-tone-emerald .dash-kpi-glow { background: #10b981; }
.dash-tone-violet .dash-kpi-glow { background: #8b5cf6; }
.dash-tone-info .dash-kpi-glow { background: #06b6d4; }
.dash-tone-primary .dash-kpi-glow { background: var(--accent); }
.dash-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.dash-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.dash-kpi-icon {
  font-size: 1rem;
  opacity: 0.5;
  color: var(--text-muted);
}
.dash-kpi-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.dash-kpi-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ── Stat Cards (bottom 4) ───────────── */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.dash-stat { cursor: pointer; }
.dash-stat-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: all 0.25s ease;
}
.dash-stat-inner:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.dash-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.dash-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.dash-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.dash-stat-icon.dash-tone-primary {
  background: rgba(99,102,241,0.12);
  color: var(--accent);
}
.dash-stat-icon.dash-tone-amber {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
}
.dash-stat-icon.dash-tone-emerald {
  background: rgba(16,185,129,0.12);
  color: #10b981;
}
.dash-stat-icon.dash-tone-info {
  background: rgba(6,182,212,0.12);
  color: #06b6d4;
}
.dash-stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

/* ── Cards ───────────────────────────── */
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color 0.3s;
}
.dash-card:hover { border-color: var(--border-light); }
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.dash-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.dash-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ── Two Column Layout ───────────────── */
.dash-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0.75rem;
}

/* ── Legend ───────────────────────────── */
.dash-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Chart ───────────────────────────── */
.dash-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  padding-top: 1rem;
  min-height: 230px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.dash-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 28px;
}
.dash-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 200px;
}
.dash-bar {
  width: 4px;
  border-radius: 2px;
  height: 3px;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dash-bar.dash-bar-animate { height: var(--h); }
.dash-bar-visits { background: #38bdf8; }
.dash-bar-visitors { background: #0284c7; }
.dash-bar-opens { background: #f59e0b; }
.dash-bar-requests { background: #10b981; }
.dash-bar-label {
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 0.4rem;
  white-space: nowrap;
}
.dash-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 200px;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}
.dash-chart-empty i { font-size: 2rem; opacity: 0.4; }

/* ── Status bars ─────────────────────── */
.dash-status-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dash-status-row {
  cursor: pointer;
  transition: transform 0.15s;
}
.dash-status-row:hover { transform: translateX(2px); }
.dash-status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}
.dash-status-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-status-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-progress {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.dash-progress-bar {
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Sources ─────────────────────────── */
.dash-sources-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.dash-source-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  min-width: 200px;
  flex: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.dash-source-chip:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
}
.dash-source-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dash-source-info i { color: var(--accent); font-size: 1.1rem; }
.dash-source-info span { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.dash-source-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.dash-source-badge small {
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.15rem;
}

/* ── Lead items ──────────────────────── */
.dash-leads-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dash-lead-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.dash-lead-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateX(3px);
}
.dash-lead-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-lead-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.dash-lead-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 0.5rem;
  color: var(--border-light);
}
.dash-lead-time { opacity: 0.7; }

/* ── Health rows ─────────────────────── */
.dash-health-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dash-health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.dash-health-row:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateX(3px);
}
.dash-health-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

/* ── Badges ──────────────────────────── */
.dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.dash-badge-info { background: rgba(56,189,248,0.12); color: #38bdf8; }
.dash-badge-warning { background: rgba(245,158,11,0.12); color: #f59e0b; }
.dash-badge-primary { background: rgba(99,102,241,0.12); color: #818cf8; }
.dash-badge-success { background: rgba(34,197,94,0.12); color: #22c55e; }
.dash-badge-danger { background: rgba(239,68,68,0.12); color: #ef4444; }
.dash-badge-muted { background: rgba(107,114,128,0.12); color: #9ca3af; }

/* ── Empty state ─────────────────────── */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.dash-empty i { font-size: 1.8rem; opacity: 0.35; }

/* ── Shimmer loading skeleton ────────── */
.dash-shimmer-header { margin-bottom: 1rem; }
.dash-shimmer-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.dash-shimmer {
  flex: 1;
  height: 100px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-lg);
  animation: dash-shimmer 1.5s ease-in-out infinite;
}
.dash-shimmer-title { height: 40px; max-width: 300px; }
.dash-shimmer-wide { flex: 1.6; height: 280px; }
.dash-shimmer-narrow { flex: 1; height: 280px; }
.dash-shimmer-full { flex: 1; height: 80px; }

@keyframes dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ──────────────────────── */
@media (max-width: 1200px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dashboard-v2 { padding: 1rem; gap: 1rem; }
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-title { font-size: 1.35rem; }
  .dash-kpi-value { font-size: 1.5rem; }
  .dash-stat-value { font-size: 1.75rem; }
  .dash-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .dash-kpi-grid { grid-template-columns: 1fr 1fr; }
  .dash-stat-grid { grid-template-columns: 1fr; }
  .dash-legend { gap: 0.4rem; }
  .dash-legend-item { font-size: 0.6rem; }
}

/* ── Light theme overrides ───────────── */
[data-theme="light"] .dash-kpi-inner,
[data-theme="light"] .dash-card,
[data-theme="light"] .dash-stat-inner {
  background: #fff;
  border-color: #e5e7eb;
}
[data-theme="light"] .dash-kpi-inner:hover,
[data-theme="light"] .dash-card:hover,
[data-theme="light"] .dash-stat-inner:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-lead-item,
[data-theme="light"] .dash-health-row,
[data-theme="light"] .dash-source-chip {
  background: #f9fafb;
  border-color: #e5e7eb;
}
[data-theme="light"] .dash-lead-item:hover,
[data-theme="light"] .dash-health-row:hover,
[data-theme="light"] .dash-source-chip:hover {
  background: #f3f4f6;
  border-color: var(--accent);
}
[data-theme="light"] .dash-progress {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
}

/* ── Email Client Styles ─────────────── */
.email-folder-item {
  transition: background 0.15s, color 0.15s;
  color: var(--text-muted, #9ca3af);
  font-size: 0.88rem;
}
.email-folder-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-heading, #fff);
}
.email-folder-item.active {
  background: rgba(49,92,246,0.18) !important;
  color: var(--accent-color, #315cf6) !important;
  font-weight: 600;
}
.email-row {
  transition: background 0.12s;
}
.email-row:hover {
  background: rgba(255,255,255,0.04) !important;
}
.email-unread {
  background: rgba(49,92,246,0.06) !important;
}
.email-unread:hover {
  background: rgba(49,92,246,0.10) !important;
}
[data-theme="light"] .email-folder-item { color: #374151; }
[data-theme="light"] .email-folder-item.active { background: rgba(49,92,246,0.10) !important; }

/* Mail and Telegram connection states */
.email-live-state,
.messenger-live-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.email-live-state i,
.messenger-live-state i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}
.email-live-state.is-checking i,
.messenger-live-state.is-checking i { background: var(--text-muted); }
.email-live-state.is-ready i,
.messenger-live-state.is-ready i { background: #20b486; box-shadow: 0 0 0 4px rgba(32,180,134,.12); }
.email-live-state.is-error i,
.messenger-live-state.is-error i { background: #e05264; box-shadow: 0 0 0 4px rgba(224,82,100,.12); }
.messenger-webhook-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(100%, 440px);
  padding: 12px 14px;
  margin: 4px 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.45;
}
.messenger-webhook-note strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.messenger-webhook-note.is-ready { background: rgba(32,180,134,.08); border-color: rgba(32,180,134,.24); }
.messenger-webhook-note.is-ready > i { color: #20b486; }
.messenger-webhook-note.is-error { background: rgba(224,82,100,.08); border-color: rgba(224,82,100,.24); }
.messenger-webhook-note.is-error > i { color: #e05264; }

.page-email .email-layout { background: var(--bg-card); box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.page-email .email-sidebar { scrollbar-width: thin; overflow-y: auto; }
.page-email .email-folder-item { min-height: 40px; padding-inline: 12px !important; border-radius: 10px !important; font-weight: 560; }
.page-email .email-folder-item i { width: 18px; color: var(--text-muted); }
.page-email .email-folder-item.active i { color: var(--accent-color, #315cf6); }
[data-theme="light"] .page-email .email-sidebar { background: #fbfcff !important; }
[data-theme="light"] .page-email .email-main,
[data-theme="light"] .page-email .email-list-toolbar { background: #fff !important; }
[data-theme="light"] .page-email .email-row:hover { background: #f6f8fc; }
[data-theme="light"] .page-email .email-row.email-unread { background: #f4f7ff; }
[data-theme="light"] .email-row:hover { background: #f9fafb !important; }
[data-theme="light"] .email-unread { background: rgba(49,92,246,0.04) !important; }

.page-email .email-list-toolbar {
  min-height: 62px;
  gap: 14px;
}
.page-email .email-toolbar-selection,
.page-email .email-toolbar-search {
  min-width: 0;
}
.page-email .email-select-all {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-end: 2px;
  border-radius: 8px;
  cursor: pointer;
}
.page-email .email-select-all:hover {
  background: rgba(110, 69, 226, 0.1);
}
.page-email .email-select-all:has(input:focus-visible) {
  outline: 3px solid rgba(110, 69, 226, 0.22);
  outline-offset: 1px;
}
.page-email .email-select-all .form-check-input,
.page-email .email-select-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.page-email .email-bulk-actions {
  margin-inline-start: 4px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--border);
}
.page-email .email-selected-count {
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}
.page-email .email-row.email-selected,
.page-email .email-row.email-selected.email-unread {
  background: rgba(110, 69, 226, 0.14) !important;
}
.page-email .email-row.email-selected:hover {
  background: rgba(110, 69, 226, 0.18) !important;
}
[data-theme="light"] .page-email .email-row.email-selected,
[data-theme="light"] .page-email .email-row.email-selected.email-unread {
  background: #f0ecff !important;
}
[data-theme="light"] .page-email .email-row.email-selected:hover {
  background: #e8e1ff !important;
}

@media (max-width: 991.98px) {
  .page-email .email-list-toolbar {
    align-items: stretch !important;
    flex-direction: column;
  }
  .page-email .email-toolbar-selection,
  .page-email .email-toolbar-search {
    width: 100%;
  }
  .page-email .email-toolbar-search .input-group {
    width: min(100%, 360px) !important;
  }
  .page-email .email-toolbar-search > .text-muted {
    margin-inline-start: auto;
  }
}

@media (max-width: 575.98px) {
  .page-email .email-toolbar-selection {
    flex-wrap: wrap;
  }
  .page-email .email-bulk-actions {
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 0 0;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
  }
  .page-email .email-bulk-actions .btn-danger {
    margin-inline-start: auto;
  }
}

/* ═══════════════════════════════════════
   INVOICE DOCUMENT STUDIO
   ═══════════════════════════════════════ */
.invoice-module {
  --invoice-canvas: var(--bg-body, #F7F8FC);
  --invoice-surface: var(--bg-card, #FFFFFF);
  --invoice-muted-surface: var(--bg-input, #F1F4FA);
  --invoice-ink: var(--text-primary, #0B1633);
  --invoice-muted: var(--text-muted, #66728A);
  --invoice-line: var(--border, #DDE3EF);
  --invoice-purple: var(--accent-color, #6E45E2);
  color: var(--invoice-ink);
  max-width: 1540px;
  margin: 0 auto;
}

.invoice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  margin-bottom: 28px;
}

.invoice-head h1 {
  margin: 4px 0 7px;
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  letter-spacing: -0.025em;
  color: var(--invoice-ink);
}

.invoice-head p,
.invoice-register-head p,
.invoice-form-section > div:first-child p,
.invoice-create-intro p {
  margin: 0;
  max-width: 68ch;
  color: var(--invoice-muted);
}

.invoice-kicker {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--invoice-purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.invoice-head-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.invoice-workflow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--invoice-line);
  background: var(--invoice-surface);
  border-radius: 12px;
  overflow: hidden;
}

.invoice-workflow-step {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 10px;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--invoice-line);
  background: transparent;
  color: var(--invoice-ink);
  text-align: left;
  cursor: pointer;
}

.invoice-workflow-step:last-child { border-right: 0; }
.invoice-workflow-step:hover { background: var(--invoice-muted-surface); }
.invoice-workflow-step:focus-visible { outline: 3px solid color-mix(in srgb, var(--invoice-purple) 28%, transparent); outline-offset: -3px; }
.invoice-workflow-step.active { background: color-mix(in srgb, var(--invoice-purple) 9%, var(--invoice-surface)); }
.invoice-workflow-step > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--invoice-muted-surface);
  color: var(--invoice-muted);
  font-weight: 750;
}
.invoice-workflow-step.active > span { background: var(--invoice-purple); color: #FFFFFF; }
.invoice-workflow-step strong { font-size: 0.86rem; }
.invoice-workflow-step small { color: var(--invoice-muted); font-size: 0.72rem; }

.invoice-summary {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
  border: 1px solid var(--invoice-line);
  border-radius: 12px;
  background: var(--invoice-surface);
}
.invoice-summary > div { flex: 1 1 0; padding: 18px 22px; border-right: 1px solid var(--invoice-line); }
.invoice-summary > div:last-child { border-right: 0; }
.invoice-summary span,
.invoice-summary small { display: block; color: var(--invoice-muted); }
.invoice-summary span { margin-bottom: 3px; font-size: 0.75rem; }
.invoice-summary strong { display: block; font-size: 1.25rem; letter-spacing: -0.02em; }
.invoice-summary small { margin-top: 2px; font-size: 0.7rem; }

.invoice-register {
  border: 1px solid var(--invoice-line);
  border-radius: 12px;
  background: var(--invoice-surface);
  overflow: hidden;
}
.invoice-register-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--invoice-line);
}
.invoice-register-head h2,
.invoice-form-section h2,
.invoice-create-intro h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--invoice-ink); }
.invoice-register-head p { font-size: 0.78rem; }
.invoice-search {
  display: flex;
  align-items: center;
  width: min(340px, 100%);
  border: 1px solid var(--invoice-line);
  border-radius: 7px;
  background: var(--invoice-muted-surface);
  color: var(--invoice-muted);
}
.invoice-search i { padding-left: 12px; }
.invoice-search input { width: 100%; padding: 10px 12px; border: 0; outline: 0; background: transparent; color: var(--invoice-ink); }
.invoice-search:focus-within { border-color: var(--invoice-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invoice-purple) 15%, transparent); }

.invoice-table-wrap { overflow-x: auto; }
.invoice-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.invoice-table th { padding: 11px 18px; background: var(--invoice-muted-surface); color: var(--invoice-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.045em; text-align: left; }
.invoice-table td { padding: 15px 18px; border-top: 1px solid var(--invoice-line); vertical-align: middle; }
.invoice-table tbody tr:hover { background: color-mix(in srgb, var(--invoice-purple) 4%, transparent); }
.invoice-table td strong,
.invoice-table td small,
.invoice-table td span { display: block; }
.invoice-table td small { margin-top: 3px; color: var(--invoice-muted); font-size: 0.7rem; }
.invoice-number { padding: 0; border: 0; background: transparent; color: var(--invoice-purple); font-weight: 750; cursor: pointer; }
.invoice-number:hover { text-decoration: underline; }
.invoice-row-actions { width: 104px; text-align: right; }
.invoice-row-actions > div { display: flex; justify-content: flex-end; gap: 6px; }

.invoice-status {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--invoice-muted-surface);
  color: var(--invoice-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.invoice-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.invoice-status.status-ready { color: #5331BA; background: #F0ECFF; }
.invoice-status.status-sent { color: #33415F; background: #F1F4FA; }
.invoice-status.status-paid { color: #0F9F6E; background: color-mix(in srgb, #0F9F6E 11%, #FFFFFF); }
.invoice-status.status-overdue { color: #D14343; background: color-mix(in srgb, #D14343 10%, #FFFFFF); }
.invoice-status.status-void { color: #66728A; text-decoration: line-through; }

.invoice-empty,
.invoice-error-state,
.invoice-loading {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.invoice-empty h3,
.invoice-error-state h2 { margin: 16px 0 6px; color: var(--invoice-ink); }
.invoice-empty p,
.invoice-error-state p,
.invoice-loading span { max-width: 52ch; margin: 0 0 20px; color: var(--invoice-muted); }
.invoice-empty-sheet,
.invoice-error-state > i { display: grid; place-items: center; width: 72px; height: 88px; border: 1px solid var(--invoice-line); border-radius: 8px; background: var(--invoice-surface); color: var(--invoice-purple); font-size: 1.8rem; box-shadow: 8px 10px 28px rgba(30, 82, 170, 0.12); }
.invoice-loading { gap: 10px; }

.invoice-studio,
.invoice-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 24px;
  align-items: start;
}
.invoice-template-form,
.invoice-create-form {
  border: 1px solid var(--invoice-line);
  border-radius: 12px;
  background: var(--invoice-surface);
  overflow: hidden;
}
.invoice-form-section {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  padding: 25px;
  border-bottom: 1px solid var(--invoice-line);
}
.invoice-form-section > div:first-child p { font-size: 0.76rem; }
.invoice-form-section:has(#invoiceItems),
.invoice-form-section:has(#templateCustomFields) { grid-template-columns: 1fr; }
.invoice-form-section:has(#invoiceItems) > div:first-child,
.invoice-form-section:has(#templateCustomFields) > div:first-child { display: flex; justify-content: space-between; gap: 20px; }
.invoice-form-section:has(#invoiceItems) > div:first-child p,
.invoice-form-section:has(#templateCustomFields) > div:first-child p { max-width: 46ch; text-align: right; }
.invoice-form-fields { min-width: 0; }
.invoice-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.invoice-field,
.template-custom-row label,
.invoice-item-row label { display: block; min-width: 0; margin-bottom: 12px; }
.invoice-field > span,
.template-custom-row label > span,
.invoice-item-row label > span { display: block; margin-bottom: 6px; color: var(--invoice-muted); font-size: 0.71rem; font-weight: 700; }
.invoice-field input,
.invoice-field textarea,
.invoice-field select,
.template-custom-row input,
.invoice-item-row input,
.invoice-detail-actions select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--invoice-line);
  border-radius: 6px;
  outline: 0;
  background: var(--invoice-muted-surface);
  color: var(--invoice-ink);
}
.invoice-field textarea { resize: vertical; }
.invoice-field input:focus,
.invoice-field textarea:focus,
.invoice-field select:focus,
.template-custom-row input:focus,
.invoice-item-row input:focus,
.invoice-detail-actions select:focus { border-color: var(--invoice-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invoice-purple) 14%, transparent); }
.invoice-field-wide { grid-column: 1 / -1; }
.invoice-input-suffix { display: flex; align-items: center; }
.invoice-input-suffix input { border-radius: 6px 0 0 6px; }
.invoice-input-suffix em { align-self: stretch; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--invoice-line); border-left: 0; border-radius: 0 6px 6px 0; color: var(--invoice-muted); font-style: normal; }
.invoice-workspace-currency { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--invoice-line); border-radius: 6px; background: var(--invoice-muted-surface); }
.invoice-workspace-currency > b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--invoice-purple); color: var(--invoice-paper); }
.invoice-workspace-currency span { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.invoice-workspace-currency strong { color: var(--invoice-ink); font-size: 0.78rem; }
.invoice-workspace-currency small { color: var(--invoice-muted); font-size: 0.68rem; }
.invoice-automation-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--invoice-line); border-radius: 8px; background: var(--invoice-muted-surface); color: var(--invoice-muted); font-size: 0.72rem; line-height: 1.45; }
.invoice-automation-note i { color: var(--invoice-purple); font-size: 0.9rem; }
.invoice-color-input { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 10px; border: 1px solid var(--invoice-line); border-radius: 6px; background: var(--invoice-muted-surface); }
.invoice-color-input input { width: 34px; min-height: 28px; padding: 0; border: 0; }
.invoice-color-input code { color: var(--invoice-muted); }
.invoice-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 18px 25px; }
.invoice-form-actions > span { flex: 1; color: var(--invoice-muted); font-size: 0.77rem; }

.template-custom-fields { display: grid; gap: 8px; margin-bottom: 10px; }
.template-custom-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) auto 38px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--invoice-line); border-radius: 8px; background: var(--invoice-muted-surface); }
.template-custom-row label { margin: 0; }
.template-custom-check { display: flex !important; align-items: center; gap: 7px; min-height: 40px; white-space: nowrap; color: var(--invoice-muted); font-size: 0.72rem; }
.template-custom-check input { width: auto; min-height: 0; }

.invoice-template-preview,
.invoice-builder-preview { position: sticky; top: 82px; }
.invoice-preview-label { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--invoice-muted); font-size: 0.72rem; }
.invoice-preview-label span { font-weight: 750; color: var(--invoice-ink); }
.invoice-template-preview > div:last-child,
.invoice-builder-preview > div:last-child { padding: 22px; border: 1px solid var(--invoice-line); border-radius: 12px; background: var(--invoice-muted-surface); }

.invoice-paper {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  padding: 0 28px 22px;
  background: #FFFFFF;
  color: #0B1633;
  box-shadow: 10px 18px 42px rgba(30, 82, 170, 0.12);
  overflow: hidden;
}
.invoice-paper header { display: flex; justify-content: space-between; margin: 0 -28px 22px; padding: 24px 28px; background: var(--invoice-accent, #6E45E2); color: #FFFFFF; }
.invoice-paper header > div { display: flex; flex-direction: column; }
.invoice-paper header strong { font-size: 1rem; }
.invoice-paper header b { font-size: 1.2rem; letter-spacing: 0.03em; }
.invoice-paper header small,
.invoice-paper header span { color: color-mix(in srgb, #FFFFFF 78%, transparent); font-size: 0.58rem; }
.invoice-paper header > div:last-child { align-items: flex-end; }
.invoice-paper-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.invoice-paper-parties > div { display: flex; min-width: 0; flex-direction: column; }
.invoice-paper-parties em { margin-bottom: 6px; color: var(--invoice-accent, #6E45E2); font-size: 0.5rem; font-style: normal; font-weight: 800; letter-spacing: 0.06em; }
.invoice-paper-parties strong { font-size: 0.68rem; }
.invoice-paper-parties span { white-space: pre-line; color: #66728A; font-size: 0.54rem; }
.invoice-paper-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; padding: 10px; border-radius: 6px; background: #F1F4FA; }
.invoice-paper-meta span { display: flex; flex-direction: column; }
.invoice-paper-meta small { color: #66728A; font-size: 0.46rem; }
.invoice-paper-meta b { font-size: 0.58rem; }
.invoice-paper-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) 38px 96px; gap: 8px; align-items: center; padding: 8px 10px; font-size: 0.52rem; }
.invoice-paper-lines > div:first-child { background: #0B1633; color: #FFFFFF; }
.invoice-paper-lines > div:not(:first-child) { border-bottom: 1px solid #DDE3EF; }
.invoice-paper-lines > div > :nth-child(n+2) { text-align: right; }
.invoice-paper-total { display: flex; justify-content: space-between; align-items: center; width: 55%; margin: 18px 0 16px auto; padding: 10px 12px; border-radius: 6px; background: var(--invoice-accent, #6E45E2); color: #FFFFFF; font-size: 0.62rem; }
.invoice-paper-total strong { font-size: 0.78rem; }
.invoice-paper-custom { display: flex; gap: 14px; padding-top: 12px; border-top: 1px solid #DDE3EF; }
.invoice-paper-custom span { display: flex; flex-direction: column; color: #66728A; font-size: 0.48rem; }
.invoice-paper-custom b { color: #33415F; }
.invoice-paper footer { position: absolute; right: 28px; bottom: 16px; left: 28px; color: #66728A; font-size: 0.48rem; text-align: center; }

.invoice-create-intro { display: flex; justify-content: space-between; gap: 24px; padding: 25px; border-bottom: 1px solid var(--invoice-line); }
.invoice-create-intro > div:first-child > span { color: var(--invoice-purple); font-size: 0.7rem; font-weight: 750; text-transform: uppercase; }
.invoice-safe-note { display: flex; gap: 10px; width: 240px; color: var(--invoice-muted); font-size: 0.72rem; }
.invoice-safe-note i { color: #0F9F6E; font-size: 1.1rem; }
.invoice-buyer-fields { display: contents; }
.invoice-items-editor { display: grid; gap: 8px; margin-bottom: 10px; }
.invoice-item-row { display: grid; grid-template-columns: minmax(140px, 2fr) 52px 68px 82px 58px 36px; gap: 7px; align-items: end; padding: 9px; border: 1px solid var(--invoice-line); border-radius: 8px; background: var(--invoice-muted-surface); }
.invoice-item-row label { margin: 0; }
.invoice-item-row > strong { grid-column: 1 / 6; align-self: center; padding-top: 7px; border-top: 1px solid var(--invoice-line); text-align: right; font-size: 0.75rem; }

.invoice-detail-bar,
.invoice-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.invoice-detail-bar > div { display: flex; align-items: center; gap: 10px; }
.invoice-detail-bar > div small { color: var(--invoice-muted); }
.invoice-detail-actions { justify-content: flex-end; padding: 12px; border: 1px solid var(--invoice-line); border-radius: 10px; background: var(--invoice-surface); }
.invoice-detail-actions label { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--invoice-muted); font-size: 0.75rem; }
.invoice-detail-actions select { min-width: 130px; }
.invoice-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.invoice-detail-document { padding: clamp(24px, 4vw, 54px); border: 1px solid var(--invoice-line); background: #FFFFFF; color: #0B1633; box-shadow: 10px 18px 42px rgba(30, 82, 170, 0.12); }
.invoice-document-head { display: flex; justify-content: space-between; margin: calc(clamp(24px, 4vw, 54px) * -1) calc(clamp(24px, 4vw, 54px) * -1) 42px; padding: 34px clamp(24px, 4vw, 54px); background: var(--invoice-accent, #6E45E2); color: #FFFFFF; }
.invoice-document-head > div { display: flex; flex-direction: column; }
.invoice-document-head > div:last-child { align-items: flex-end; }
.invoice-document-head strong { font-size: 1.3rem; }
.invoice-document-head b { font-size: 1.7rem; }
.invoice-document-head small,
.invoice-document-head span { color: color-mix(in srgb, #FFFFFF 78%, transparent); }
.invoice-document-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 34px; }
.invoice-document-parties > div { display: flex; flex-direction: column; }
.invoice-document-parties span { margin-bottom: 8px; color: var(--invoice-purple); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; }
.invoice-document-parties p { color: #66728A; line-height: 1.7; }
.invoice-document-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; padding: 16px; border-radius: 8px; background: #F1F4FA; }
.invoice-document-meta span { display: flex; flex-direction: column; }
.invoice-document-meta small { color: #66728A; }
.invoice-document-lines { width: 100%; border-collapse: collapse; }
.invoice-document-lines th { padding: 12px 10px; background: #0B1633; color: #FFFFFF; font-size: 0.68rem; text-align: right; text-transform: uppercase; }
.invoice-document-lines th:first-child,
.invoice-document-lines td:first-child { text-align: left; }
.invoice-document-lines td { padding: 14px 10px; border-bottom: 1px solid #DDE3EF; text-align: right; }
.invoice-document-lines td small { display: block; color: #66728A; }
.invoice-document-totals { width: min(340px, 100%); margin: 28px 0 36px auto; }
.invoice-document-totals span,
.invoice-document-totals > strong { display: flex; justify-content: space-between; padding: 8px 12px; }
.invoice-document-totals span { color: #66728A; }
.invoice-document-totals > strong { margin-top: 6px; border-radius: 6px; background: #6E45E2; color: #FFFFFF; font-size: 1rem; }
.invoice-document-custom { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-bottom: 30px; padding: 18px; background: #F7F8FC; }
.invoice-document-custom span { display: flex; flex-direction: column; }
.invoice-document-custom small { color: #66728A; }
.invoice-document-terms { padding-top: 22px; border-top: 1px solid #DDE3EF; }
.invoice-document-terms p { color: #66728A; }
.invoice-detail-aside { display: grid; gap: 12px; position: sticky; top: 80px; }
.invoice-detail-aside section { padding: 18px; border: 1px solid var(--invoice-line); border-radius: 10px; background: var(--invoice-surface); }
.invoice-detail-aside section > span { color: var(--invoice-muted); font-size: 0.68rem; text-transform: uppercase; }
.invoice-detail-aside h3 { margin: 6px 0; color: var(--invoice-ink); font-size: 0.95rem; }
.invoice-detail-aside p { color: var(--invoice-muted); font-size: 0.75rem; line-height: 1.6; }
.invoice-detail-aside a { font-size: 0.75rem; font-weight: 700; }

.invoice-email-modal { border: 1px solid var(--invoice-line); background: var(--invoice-surface); color: var(--invoice-ink); }
.invoice-email-modal .modal-header > div > span { color: var(--invoice-purple); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.invoice-email-modal h2 { margin: 2px 0 0; font-size: 1.15rem; }
.invoice-attachment { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--invoice-line); border-radius: 8px; background: var(--invoice-muted-surface); }
.invoice-attachment > i:first-child { color: #D14343; font-size: 1.5rem; }
.invoice-attachment > i:last-child { margin-left: auto; color: #0F9F6E; }
.invoice-attachment div { display: flex; flex-direction: column; }
.invoice-attachment span { color: var(--invoice-muted); font-size: 0.7rem; }
#invoiceEmailState { margin-top: 10px; color: var(--invoice-muted); font-size: 0.75rem; }

@media (max-width: 1180px) {
  .invoice-studio,
  .invoice-builder { grid-template-columns: 1fr; }
  .invoice-template-preview,
  .invoice-builder-preview { position: static; }
  .invoice-template-preview > div:last-child,
  .invoice-builder-preview > div:last-child { max-width: 680px; margin: 0 auto; }
  .invoice-detail-layout { grid-template-columns: 1fr; }
  .invoice-detail-aside { position: static; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .invoice-head { grid-template-columns: 1fr; }
  .invoice-head-actions { justify-content: stretch; }
  .invoice-head-actions .btn { flex: 1; }
  .invoice-workflow { grid-template-columns: 1fr; }
  .invoice-workflow-step { border-right: 0; border-bottom: 1px solid var(--invoice-line); }
  .invoice-summary { flex-direction: column; }
  .invoice-summary > div { border-right: 0; border-bottom: 1px solid var(--invoice-line); }
  .invoice-summary > div:last-child { border-bottom: 0; }
  .invoice-register-head { align-items: stretch; flex-direction: column; }
  .invoice-form-section { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .invoice-form-section:has(#invoiceItems) > div:first-child,
  .invoice-form-section:has(#templateCustomFields) > div:first-child { display: block; }
  .invoice-form-section:has(#invoiceItems) > div:first-child p,
  .invoice-form-section:has(#templateCustomFields) > div:first-child p { text-align: left; }
  .invoice-field-row { grid-template-columns: 1fr; }
  .template-custom-row { grid-template-columns: 1fr; }
  .template-custom-check { min-height: 28px; }
  .invoice-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-item-description { grid-column: 1 / -1; }
  .invoice-item-row > strong { grid-column: 1 / -1; margin: 0; text-align: left; }
  .invoice-create-intro { flex-direction: column; }
  .invoice-safe-note { width: auto; }
  .invoice-detail-actions { align-items: stretch; flex-direction: column; }
  .invoice-detail-actions label { margin-right: 0; }
  .invoice-detail-layout { display: block; }
  .invoice-detail-aside { grid-template-columns: 1fr; margin-top: 16px; }
  .invoice-document-parties { grid-template-columns: 1fr; gap: 20px; }
  .invoice-document-lines { min-width: 620px; }
  .invoice-detail-document { overflow-x: auto; }
}

/* ═══════════════════════════════════════
   Messenger Inbox
   ═══════════════════════════════════════ */
.messenger-inbox-admin { width: 100%; min-width: 0; }
.header-notification-item[data-view] { cursor: pointer; }
.header-notification-item[data-view]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.messenger-inbox-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.messenger-inbox-heading h1 { margin: 3px 0 4px; color: var(--text-primary); font-size: clamp(1.55rem, 2vw, 2rem); letter-spacing: -0.025em; }
.messenger-inbox-heading p { margin: 0; color: var(--text-secondary); }
.messenger-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.messenger-live-state i { background: var(--success); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.38); }
.messenger-inbox-shell { display: grid; grid-template-columns: minmax(300px, 350px) minmax(0, 1fr); min-height: 680px; height: calc(100vh - 174px); max-height: 900px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; }
.messenger-conversation-rail { display: flex; min-width: 0; flex-direction: column; background: var(--bg-card); border-right: 1px solid var(--border); }
.messenger-rail-toolbar { padding: 16px 14px 12px; border-bottom: 1px solid var(--border); }
.messenger-search { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 0 12px; background: var(--bg-input); border: 1px solid transparent; border-radius: 10px; color: var(--text-muted); }
.messenger-search:focus-within { border-color: var(--accent); box-shadow: 0 2px 10px var(--accent-muted); color: var(--accent); }
.messenger-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; }
.messenger-search input::placeholder { color: var(--text-secondary); }
.messenger-channel-filters { display: flex; gap: 5px; margin-top: 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.messenger-channel-filters::-webkit-scrollbar { display: none; }
.messenger-channel-filter { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.messenger-channel-filter:hover { background: var(--bg-hover); color: var(--text-primary); }
.messenger-channel-filter.active { background: var(--accent-muted); color: var(--accent); }
.messenger-channel-filter:focus-visible,
.messenger-conversation-row:focus-visible,
.messenger-mobile-back:focus-visible,
.messenger-thread-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.messenger-rail-summary { display: flex; justify-content: space-between; align-items: center; min-height: 45px; padding: 0 16px; color: var(--text-secondary); font-size: 12px; border-bottom: 1px solid var(--border); }
.messenger-rail-summary strong { color: var(--text-primary); font-size: 13px; }
.messenger-rail-summary span { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--bg-input); text-align: center; }
.messenger-conversation-list { flex: 1; min-height: 0; overflow-y: auto; }
.messenger-conversation-row { display: flex; width: 100%; gap: 12px; align-items: center; min-height: 80px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background-color 160ms ease; }
.messenger-conversation-row:hover { background: var(--bg-hover); }
.messenger-conversation-row.active { background: var(--accent-muted); }
.messenger-contact-avatar { position: relative; display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--bg-active); color: var(--text-primary); font-size: 13px; font-weight: 750; letter-spacing: -0.01em; }
.messenger-contact-avatar.is-large { flex-basis: 46px; width: 46px; height: 46px; }
.messenger-channel-dot { position: absolute; right: -3px; bottom: -2px; display: grid; width: 20px; height: 20px; place-items: center; border: 2px solid var(--bg-card); border-radius: 50%; color: #fff; font-size: 10px; font-style: normal; }
.messenger-channel-dot.is-telegram { background: #168bd2; }
.messenger-channel-dot.is-whatsapp { background: #25d366; }
.messenger-channel-dot.is-viber { background: #665cac; }
.messenger-channel-dot.is-facebook,
.messenger-channel-dot.is-messenger { background: #1769d2; }
.messenger-channel-dot.is-turbosms { background: #b86d0b; }
.messenger-channel-dot.is-website { background: #087f68; }
.messenger-conversation-copy { display: block; flex: 1; min-width: 0; }
.messenger-conversation-top,
.messenger-conversation-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.messenger-conversation-top strong,
.messenger-conversation-bottom > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-conversation-top strong { font-size: 13px; font-weight: 650; }
.messenger-conversation-row.unread .messenger-conversation-top strong { font-weight: 800; }
.messenger-conversation-top time { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.messenger-conversation-bottom { margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.messenger-conversation-bottom b,
#messengerInboxBadge { display: inline-grid; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; }
#messengerInboxBadge { margin-left: auto; }
.messenger-list-loading,
.messenger-list-state { display: flex; min-height: 220px; padding: 28px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--text-secondary); text-align: center; }
.messenger-list-state > i { color: var(--text-muted); font-size: 30px; }
.messenger-list-state strong { color: var(--text-primary); }
.messenger-list-state span { max-width: 28ch; font-size: 12px; }
.messenger-list-state.is-error > i { color: var(--danger); }
.messenger-thread-pane { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg-body); }
.messenger-thread-header { display: flex; min-width: 0; min-height: 72px; align-items: center; gap: 12px; padding: 12px 18px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.messenger-thread-header > div { min-width: 0; flex: 1; }
.messenger-thread-header h2 { margin: 0 0 3px; overflow: hidden; color: var(--text-primary); font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.messenger-thread-header div > span { display: block; overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-mobile-back,
.messenger-thread-more { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.messenger-mobile-back { display: none; }
.messenger-thread-more:hover { background: var(--bg-hover); color: var(--text-primary); }
.messenger-message-timeline { min-height: 0; padding: 24px clamp(18px, 4vw, 54px); overflow-y: auto; overscroll-behavior: contain; }
.messenger-day-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-muted); font-size: 11px; }
.messenger-day-divider::before,
.messenger-day-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.messenger-day-divider span { flex: 0 0 auto; }
.messenger-message { display: flex; margin: 7px 0; }
.messenger-message.outgoing { justify-content: flex-end; }
.messenger-message-bubble { max-width: min(72%, 620px); padding: 10px 12px 7px; border-radius: 13px 13px 13px 4px; background: var(--bg-input); color: var(--text-primary); box-shadow: 0 3px 12px rgba(3, 7, 18, 0.12); }
.messenger-message.outgoing .messenger-message-bubble { border-radius: 13px 13px 4px 13px; background: var(--accent); color: #fff; }
.messenger-message-bubble p { margin: 0; line-height: 1.48; overflow-wrap: anywhere; }
.messenger-message-bubble > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.messenger-message-bubble > span { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; color: var(--text-secondary); font-size: 10px; }
.messenger-message.outgoing .messenger-message-bubble > span { color: rgba(255,255,255,0.78); }
.messenger-thread-empty { display: flex; grid-row: 1 / -1; padding: 36px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.messenger-empty-mark { display: grid; width: 64px; height: 64px; margin-bottom: 18px; place-items: center; border-radius: 16px; background: var(--accent-muted); color: var(--accent); font-size: 27px; }
.messenger-thread-empty h2 { margin: 0 0 7px; color: var(--text-primary); font-size: 18px; }
.messenger-thread-empty p { max-width: 46ch; margin: 0 0 18px; color: var(--text-secondary); }
.messenger-composer { padding: 14px 18px 16px; background: var(--bg-card); border-top: 1px solid var(--border); }
.messenger-composer textarea { display: block; width: 100%; min-height: 44px; max-height: 140px; padding: 11px 12px; resize: none; border: 1px solid var(--border-light); border-radius: 10px; outline: 0; background: var(--bg-input); color: var(--text-primary); font: inherit; line-height: 1.45; }
.messenger-composer textarea:focus { border-color: var(--accent); box-shadow: 0 2px 10px var(--accent-muted); }
.messenger-composer textarea::placeholder { color: var(--text-secondary); }
.messenger-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 9px; }
.messenger-composer-footer > span { color: var(--text-muted); font-size: 11px; }
.messenger-composer-footer kbd { padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-body); color: var(--text-secondary); font-family: inherit; font-size: 10px; box-shadow: 0 1px 2px rgba(3, 7, 18, 0.15); }
.messenger-reply-unavailable { display: flex; align-items: center; gap: 10px; min-height: 46px; color: var(--text-secondary); font-size: 12px; }
.messenger-reply-unavailable i { color: var(--info); font-size: 17px; }
.messenger-heading-actions .is-loading i,
.messenger-thread-more:active i { animation: messenger-spin 700ms linear infinite; }
@keyframes messenger-spin { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
  .messenger-inbox-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .messenger-heading-actions { width: 100%; justify-content: flex-start; }
  .messenger-live-state { margin-right: auto; padding-left: 0; }
  .messenger-inbox-shell { height: calc(100vh - 236px); min-height: 610px; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  /* Fill the space between the top bar and the fixed bottom nav with a flex column instead of a
     viewport-height guess: the old calc(100vh - 228px) ignored the tall stacked heading and the
     bottom nav, so the shell overflowed the screen and buried the composer behind the nav. */
  .messenger-inbox-admin { padding-top: 10px; display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 70px - var(--crm-bottom-nav-h) - env(safe-area-inset-bottom)); }
  .messenger-inbox-heading { flex: none; }
  .messenger-inbox-shell { position: relative; display: block; flex: 1 1 auto; height: auto; min-height: 0; }
  .messenger-conversation-rail { height: 100%; border-right: 0; }
  .messenger-thread-pane { position: absolute; inset: 0; z-index: 2; height: 100%; }
  .messenger-thread-pane:has(.messenger-thread-empty) { display: none; }
  .messenger-mobile-back { display: grid; }
  .messenger-message-timeline { padding-inline: 14px; }
  .messenger-message-bubble { max-width: 86%; }
  .messenger-composer-footer > span { display: none; }
  .messenger-composer-footer { justify-content: flex-end; }
  .messenger-heading-actions .btn { flex: 1; }
}

@media (max-width: 479.98px) {
  .messenger-inbox-heading p { display: none; }
  .messenger-live-state { width: 100%; min-height: 24px; }
  .messenger-inbox-shell { border-radius: 10px; }
  .messenger-channel-filter span { display: none; }
  .messenger-channel-filter { width: 34px; justify-content: center; padding: 0; }
  .messenger-channel-filter:first-child { width: auto; padding: 0 10px; }
  .messenger-channel-filter:first-child span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .messenger-channel-filter,
  .messenger-conversation-row { transition: none; }
  .messenger-heading-actions .is-loading i,
  .messenger-thread-more:active i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM-inspired operator layer
   Rich semantic color, stronger depth, and tactile states across the admin UI.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #ff5263;
  --accent-hover: #ff7a86;
  --accent-muted: rgba(255, 82, 99, 0.14);
  --success: #35d48a;
  --warning: #f5bd4f;
  --danger: #ff5263;
  --info: #66a8ff;
  --success-muted: rgba(53, 212, 138, 0.14);
  --warning-muted: rgba(245, 189, 79, 0.15);
  --danger-muted: rgba(255, 82, 99, 0.14);
  --info-muted: rgba(102, 168, 255, 0.14);
  --shadow-color: rgba(1, 5, 12, 0.52);
}

body:not(.login-page) {
  background:
    radial-gradient(circle at 84% 2%, rgba(255, 82, 99, 0.09), transparent 26rem),
    radial-gradient(circle at 8% 88%, rgba(53, 212, 138, 0.055), transparent 24rem),
    radial-gradient(circle at 52% 42%, rgba(245, 189, 79, 0.035), transparent 34rem),
    var(--bg-body);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(16, 20, 31, 0.99), rgba(10, 13, 21, 0.99)),
    var(--bg-sidebar);
  border-right-color: rgba(255, 82, 99, 0.2);
  box-shadow: 18px 0 70px rgba(0, 0, 0, 0.26);
}

.sidebar-logo,
.login-logo {
  background: var(--accent-muted);
  border: 1px solid rgba(255, 82, 99, 0.34);
  color: var(--accent-hover);
  box-shadow: 0 0 30px rgba(255, 82, 99, 0.14);
}

.nav-section {
  color: color-mix(in srgb, var(--warning) 72%, var(--text-muted));
  letter-spacing: 0.14em;
}

.nav-item {
  position: relative;
  margin: 2px 10px;
  border-radius: 8px;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.nav-item:hover {
  background: rgba(255, 82, 99, 0.08);
  color: var(--text-primary);
  transform: translateX(2px);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 82, 99, 0.24), rgba(245, 189, 79, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 82, 99, 0.26), 0 12px 28px rgba(0, 0, 0, 0.2);
}

.nav-item.active::before {
  background: var(--accent);
  box-shadow: 0 0 16px rgba(255, 82, 99, 0.72);
}

.topbar,
.header {
  background: color-mix(in srgb, var(--bg-body) 86%, transparent);
  border-bottom-color: rgba(255, 82, 99, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.header-context .badge,
.header-logo-mark {
  background: var(--accent-muted) !important;
  color: var(--accent-hover) !important;
  border-color: rgba(255, 82, 99, 0.25);
}

.btn,
.btn-icon,
.form-input,
.form-select,
.form-textarea,
.site-selector select {
  border-radius: 7px;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #e33c52);
  box-shadow: 0 12px 28px rgba(255, 82, 99, 0.22);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 16px 34px rgba(255, 82, 99, 0.3);
  transform: translateY(-1px);
}

.btn-secondary:hover,
.btn-icon:hover,
.btn-outline-secondary:hover {
  border-color: rgba(245, 189, 79, 0.5);
  color: var(--warning);
  background: rgba(245, 189, 79, 0.08);
  transform: translateY(-1px);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.site-selector select:focus,
.login-card .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stat-card,
.site-card,
.page-item,
.block-card,
.preview-panel,
.dash-panel,
.dash-metric,
.dash-action-card,
.dash-card,
.dash-kpi-inner,
.dash-stat-inner,
.dash-analytics-card,
.integration-card,
.lead-stat,
.lead-list,
.lead-detail,
.metric-card,
.admin-row,
.service-card,
.contact-card,
.contacts-board,
.billing-table-wrap {
  border-color: rgba(116, 132, 153, 0.28);
  background: linear-gradient(180deg, rgba(22, 28, 41, 0.97), rgba(14, 18, 28, 0.97));
  box-shadow: 0 18px 54px -34px var(--shadow-color);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.stat-card:hover,
.site-card:hover,
.page-item:hover,
.block-card:hover,
.dash-metric:hover,
.dash-action-card:hover,
.dash-card:hover,
.dash-kpi-inner:hover,
.dash-stat-inner:hover,
.dash-analytics-card:hover,
.integration-card:hover,
.lead-stat:hover,
.metric-card:hover,
.admin-row:hover,
.service-card:hover {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  box-shadow: 0 24px 52px -32px rgba(255, 82, 99, 0.3);
  transform: translateY(-3px);
}

.stat-card:nth-child(3n + 1) .stat-icon,
.dash-metric:nth-child(3n + 1) i,
.dash-kpi-inner:nth-child(3n + 1) i { color: var(--accent); }
.stat-card:nth-child(3n + 2) .stat-icon,
.dash-metric:nth-child(3n + 2) i,
.dash-kpi-inner:nth-child(3n + 2) i { color: var(--warning); }
.stat-card:nth-child(3n) .stat-icon,
.dash-metric:nth-child(3n) i,
.dash-kpi-inner:nth-child(3n) i { color: var(--success); }

.stat-icon,
.metric-icon,
.block-header .block-icon,
.dash-metric i,
.dash-action-card i,
.integration-title > i,
.contact-avatar {
  background: var(--accent-muted);
  border: 1px solid rgba(255, 82, 99, 0.26);
}

.status-paid,
.status-success,
.status-connected,
.lead-status.status-new,
.lead-status.status-qualified,
.badge-success {
  background: var(--success-muted) !important;
  border-color: rgba(53, 212, 138, 0.38) !important;
  color: var(--success) !important;
}

.status-pending,
.status-processing,
.status-warning,
.badge-warning {
  background: var(--warning-muted) !important;
  border-color: rgba(245, 189, 79, 0.42) !important;
  color: var(--warning) !important;
}

.status-overdue,
.status-danger,
.status-error,
.badge-danger {
  background: var(--danger-muted) !important;
  border-color: rgba(255, 82, 99, 0.42) !important;
  color: var(--danger) !important;
}

.integration-status.status-connected::before,
.messenger-live-state i,
.attr-connection.is-connected > b {
  box-shadow: 0 0 0 4px rgba(53, 212, 138, 0.12), 0 0 16px rgba(53, 212, 138, 0.44);
}

.messenger-live-state i {
  animation: adminStatusPulse 2.6s ease-in-out infinite;
}

.toast.toast-success { border-color: rgba(53, 212, 138, 0.48); box-shadow: 0 16px 40px rgba(53, 212, 138, 0.14); }
.toast.toast-warning { border-color: rgba(245, 189, 79, 0.5); box-shadow: 0 16px 40px rgba(245, 189, 79, 0.12); }
.toast.toast-danger { border-color: rgba(255, 82, 99, 0.5); box-shadow: 0 16px 40px rgba(255, 82, 99, 0.14); }

.dash-bar-track i { background: linear-gradient(90deg, var(--accent), var(--warning)); box-shadow: 0 0 18px rgba(255, 82, 99, 0.24); }
.dash-trend-bars i.visits { background: var(--accent); }
.dash-trend-bars i.visitors { background: var(--info); }
.dash-trend-bars i.form-views { background: var(--warning); }
.dash-trend-bars i.requests { background: var(--success); }

@keyframes adminStatusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.62; transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .messenger-live-state i { animation: none; }
}

/* Keep the same semantic palette readable when the operator switches to light mode. */
html[data-theme='light'] {
  --bg-body: #f7f8fc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f1f4fa;
  --bg-hover: #fff1f2;
  --bg-active: #ffe4e7;
  --border: #e1e5ee;
  --border-light: #cfd7e5;
  --text-primary: #172033;
  --text-secondary: #526078;
  --text-muted: #718097;
  --shadow-color: rgba(30, 52, 92, 0.18);
}

html[data-theme='light'] body:not(.login-page) {
  background:
    radial-gradient(circle at 84% 2%, rgba(255, 82, 99, 0.08), transparent 26rem),
    radial-gradient(circle at 8% 88%, rgba(53, 212, 138, 0.06), transparent 24rem),
    var(--bg-body);
}

html[data-theme='light'] .sidebar {
  box-shadow: 12px 0 38px rgba(30, 52, 92, 0.08);
}

html[data-theme='light'] .sidebar-nav > button.nav-item,
html[data-theme='light'] .sidebar-nav > .nav-item {
  color: var(--text-secondary) !important;
}

html[data-theme='light'] .sidebar-nav > button.nav-item:hover,
html[data-theme='light'] .sidebar-nav > .nav-item:hover {
  color: var(--accent) !important;
  background: var(--accent-muted) !important;
}

html[data-theme='light'] .sidebar-nav > button.nav-item.active,
html[data-theme='light'] .sidebar-nav > .nav-item.active {
  color: #fff !important;
  background: var(--accent) !important;
  box-shadow: 0 8px 20px rgba(255, 82, 99, 0.22) !important;
}

html[data-theme='light'] .stat-card,
html[data-theme='light'] .site-card,
html[data-theme='light'] .page-item,
html[data-theme='light'] .block-card,
html[data-theme='light'] .preview-panel,
html[data-theme='light'] .dash-panel,
html[data-theme='light'] .dash-metric,
html[data-theme='light'] .dash-action-card,
html[data-theme='light'] .dash-card,
html[data-theme='light'] .dash-kpi-inner,
html[data-theme='light'] .dash-stat-inner,
html[data-theme='light'] .dash-analytics-card,
html[data-theme='light'] .integration-card,
html[data-theme='light'] .lead-stat,
html[data-theme='light'] .lead-list,
html[data-theme='light'] .lead-detail,
html[data-theme='light'] .metric-card,
html[data-theme='light'] .admin-row,
html[data-theme='light'] .service-card,
html[data-theme='light'] .contact-card,
html[data-theme='light'] .contacts-board,
html[data-theme='light'] .billing-table-wrap {
  background: #fff;
  box-shadow: 0 18px 46px -34px rgba(30, 52, 92, 0.32);
}

/* Final specificity pass: the shared AppDashboard rules use !important. */
.sidebar-nav > button.nav-item:hover,
.sidebar-nav > .nav-item:hover {
  background: rgba(255, 82, 99, 0.08) !important;
  color: var(--text-primary) !important;
}

.sidebar-nav > button.nav-item.active,
.sidebar-nav > .nav-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), #e33c52) !important;
  box-shadow: 0 8px 22px rgba(255, 82, 99, 0.28) !important;
}

.sidebar-nav > button.nav-item.active > i,
.sidebar-nav > button.nav-item.active > span,
.sidebar-nav > .nav-item.active > i,
.sidebar-nav > .nav-item.active > span {
  color: #fff !important;
}

html[data-theme='light'] .sidebar-nav > button.nav-item:hover,
html[data-theme='light'] .sidebar-nav > .nav-item:hover {
  background: var(--accent-muted) !important;
  color: var(--accent) !important;
}

html[data-theme='light'] .sidebar-nav > button.nav-item.active,
html[data-theme='light'] .sidebar-nav > .nav-item.active {
  background: linear-gradient(135deg, var(--accent), #e33c52) !important;
  box-shadow: 0 8px 22px rgba(255, 82, 99, 0.22) !important;
}

/* CRM-style navigation signals: each workspace family gets a quiet semantic tint. */
.sidebar-nav > .nav-item:nth-of-type(3n + 1) > i { color: var(--accent) !important; }
.sidebar-nav > .nav-item:nth-of-type(3n + 2) > i { color: var(--warning) !important; }
.sidebar-nav > .nav-item:nth-of-type(3n) > i { color: var(--success) !important; }
.sidebar-nav > .nav-item.active > i { color: #fff !important; }

/* Users & Access workspace ported from the CRM operator surface. */
.access-page { display: grid; gap: 18px; color: var(--text-primary); }
.access-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border)); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-soft); }
.access-hero h1 { margin: 7px 0 6px; font-size: clamp(25px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.035em; }
.access-hero p { max-width: 720px; margin: 0; color: var(--text-secondary); }
.access-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.access-readonly { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.access-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--info) 34%, var(--border)); border-radius: var(--radius); background: var(--info-muted); color: var(--text-secondary); }
.access-notice > i { color: var(--info); font-size: 18px; }
.access-notice strong, .access-notice span { display: block; }
.access-notice span { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.access-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.access-summary-card { display: flex; align-items: center; gap: 13px; min-height: 112px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: inset 0 3px 0 var(--tone), var(--shadow-soft); }
.access-summary-card.tone-red { --tone: var(--danger); --tone-soft: var(--danger-muted); }
.access-summary-card.tone-yellow { --tone: var(--warning); --tone-soft: var(--warning-muted); }
.access-summary-card.tone-blue { --tone: var(--info); --tone-soft: var(--info-muted); }
.access-summary-card.tone-green { --tone: var(--success); --tone-soft: var(--success-muted); }
.access-summary-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--tone-soft); color: var(--tone); font-size: 20px; }
.access-summary-card strong, .access-summary-card span, .access-summary-card small { display: block; }
.access-summary-card strong { font-size: 23px; line-height: 1; }
.access-summary-card div > span { margin-top: 5px; font-weight: 700; }
.access-summary-card small { margin-top: 2px; color: var(--text-muted); }
.access-workspace { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-soft); }
.access-tabs { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--bg-input); }
.access-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 13px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-secondary); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.access-tab:hover { border-color: var(--border); color: var(--text-primary); background: var(--bg-card); }
.access-tab.active { border-color: color-mix(in srgb, var(--danger) 34%, var(--border)); color: var(--danger); background: var(--danger-muted); }
.access-tab b { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--bg-active); color: var(--text-secondary); font-size: 11px; text-align: center; }
.access-panel { min-width: 0; padding: 20px; }
.access-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.access-panel-header h2 { margin: 0 0 3px; font-size: 19px; }
.access-panel-header p { margin: 0; color: var(--text-muted); }
.access-table-wrap, .permission-matrix-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.access-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.access-table th { padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.access-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.access-table tbody tr:last-child td { border-bottom: 0; }
.access-table tbody tr:hover td { background: color-mix(in srgb, var(--bg-hover) 65%, transparent); }
.access-table tr.is-inactive { opacity: .62; }
.access-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.access-person { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.access-person strong, .access-person span { display: block; }
.access-person div > span { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.access-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: 10px; background: var(--danger-muted); color: var(--danger); font-size: 12px; font-weight: 800; }
.access-role-badge, .access-group-chip, .access-status, .access-2fa { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.access-role-badge { border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border)); background: var(--warning-muted); color: var(--warning); }
.access-group-chip { margin: 2px 4px 2px 0; border: 1px solid color-mix(in srgb, var(--info) 32%, var(--border)); background: var(--info-muted); color: var(--info); }
.access-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.access-status.active { color: var(--success); }
.access-status.inactive { color: var(--text-muted); }
.access-2fa { margin-left: 5px; background: var(--success-muted); color: var(--success); }
.access-date, .access-muted { color: var(--text-muted); font-size: 12px; }
.permission-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: -7px 0 14px; color: var(--text-muted); font-size: 11px; }
.permission-legend span { display: inline-flex; align-items: center; gap: 5px; }
.permission-legend span:first-child i { color: var(--success); }
.permission-legend span:nth-child(2) i { color: var(--text-muted); }
.permission-legend span:nth-child(3) i { color: var(--warning); }
.permission-matrix { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.permission-matrix th, .permission-matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.permission-matrix tr > *:last-child { border-right: 0; }
.permission-matrix thead th { position: sticky; top: 0; z-index: 3; min-width: 145px; padding: 12px 10px; background: var(--bg-input); color: var(--text-primary); text-align: center; }
.permission-matrix .permission-name-column { left: 0; z-index: 4; min-width: 300px; text-align: left; }
.permission-matrix tbody > tr > th { position: sticky; left: 0; z-index: 2; width: 300px; padding: 10px 13px; background: var(--bg-card); text-align: left; }
.permission-matrix tbody > tr > th strong, .permission-matrix tbody > tr > th span, .permission-matrix tbody > tr > th code { display: block; }
.permission-matrix tbody > tr > th strong { font-size: 12px; }
.permission-matrix tbody > tr > th span { margin-top: 2px; color: var(--text-muted); font-size: 10px; font-weight: 400; }
.permission-matrix tbody > tr > th code { width: max-content; margin-top: 4px; padding: 1px 4px; border-radius: 3px; background: var(--bg-input); color: var(--text-muted); font-size: 9px; }
.permission-matrix td { padding: 8px; background: var(--bg-card); text-align: center; }
.permission-matrix tr:hover td, .permission-matrix tr:hover > th { background: var(--bg-hover); }
.permission-matrix .permission-category th { position: static; padding: 8px 13px; background: color-mix(in srgb, var(--warning-muted) 65%, var(--bg-input)); color: var(--warning); font-size: 10px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.matrix-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-strong, #cbd5e1);
  border-radius: 7px;
  background: var(--bg-card);
  color: transparent;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  margin: 0 auto;
  user-select: none;
}

.matrix-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.matrix-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.matrix-check .matrix-check-icon,
.matrix-check span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.65);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.matrix-check.is-granted,
.matrix-check:has(input:checked) {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
}

.matrix-check.is-granted .matrix-check-icon,
.matrix-check.is-granted span,
.matrix-check:has(input:checked) .matrix-check-icon,
.matrix-check:has(input:checked) span {
  opacity: 1 !important;
  transform: scale(1) !important;
  color: #ffffff !important;
}

.matrix-check.locked,
.matrix-check.is-locked {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #d97706 !important;
  cursor: not-allowed !important;
}

.matrix-check.locked .matrix-check-icon,
.matrix-check.locked span,
.matrix-check.is-locked .matrix-check-icon,
.matrix-check.is-locked span {
  opacity: 1 !important;
  transform: scale(1) !important;
  color: #d97706 !important;
}

html[data-theme='dark'] .matrix-check.locked span,
html[data-theme='dark'] .matrix-check.is-locked span {
  color: #fbbf24 !important;
}

.matrix-check:not(.locked):not(.is-locked):not(.is-granted):not(:has(input:checked)):hover {
  border-color: #10b981;
  background: var(--bg-hover);
}

.matrix-role { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.matrix-role i { color: var(--warning); font-size: 10px; }
.access-primary-action { align-self: center; white-space: nowrap; }
.access-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(8, 12, 22, .68); backdrop-filter: blur(8px); }
.access-dialog { width: min(620px, 100%); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-card); box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.access-dialog > header, .access-dialog > form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.access-dialog > header h2 { margin: 0; font-size: 18px; }
.access-dialog > header p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.access-dialog > header button { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.access-dialog-body { padding: 22px; }
.access-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.access-form-grid label { display: grid; gap: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.access-form-grid label small { color: var(--text-muted); font-weight: 400; }
.access-form-grid .span-2 { grid-column: 1 / -1; }
.access-dialog > form > footer { justify-content: flex-end; border-top: 1px solid var(--border); border-bottom: 0; }
@media (max-width: 620px) { .access-form-grid { grid-template-columns: 1fr; } .access-form-grid .span-2 { grid-column: auto; } .access-hero { flex-wrap: wrap; } }

/* Shared modal action rhythm: secondary actions stay compact while the
   primary action has a readable target without stretching across the dialog. */
.modal-dialog { width: min(760px, calc(100% - 32px)); max-width: 760px; margin: 1.5rem auto; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 18px 22px 22px; }
.modal-footer .btn { width: auto !important; min-width: 116px; min-height: 46px; flex: 0 0 auto !important; padding: 0 20px; }
.modal-footer .btn-primary { min-width: 190px; }
@media (max-width: 640px) {
  .modal-dialog { width: min(100% - 20px, 560px); margin: 10px auto; }
  .modal-footer { justify-content: stretch; }
  .modal-footer .btn, .modal-footer .btn-primary { flex: 1 1 160px !important; min-width: 0; }
}
.access-empty { display: grid; min-height: 300px; place-content: center; justify-items: center; text-align: center; }
.access-empty > i { color: var(--warning); font-size: 34px; }
.access-empty h3 { margin: 10px 0 4px; }
.access-empty p { max-width: 430px; margin: 0; color: var(--text-muted); }
.access-loading, .access-error { min-height: 330px; display: grid; place-content: center; grid-template-columns: auto minmax(0, 330px); align-items: center; gap: 12px; color: var(--text-secondary); }
.access-error > i { color: var(--danger); font-size: 28px; }
@media (max-width: 980px) { .access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .access-hero, .access-panel-header { align-items: stretch; flex-direction: column; } .access-summary { grid-template-columns: 1fr; } .access-panel { padding: 14px; } }

/*
  THESIS: Authentication is the secure threshold to the operating workspace, not a generic card on an empty canvas.
  OWN-WORLD: Deep ink, warm signal coral, crisp white controls, hairline structure, and compact operational typography.
  STORY: Identify, verify when required, then enter one controlled system for leads, files, conversations and automation.
  FIRST VIEWPORT: Credentials occupy the quiet left rail; a large connected-system map owns the right field; 2FA becomes a focused standalone step.
  FORM: Cloudflare-inspired split access layout, adapted to 1it.pro's established admin language and real authentication states.
*/
[hidden] { display: none !important; }

.login-page {
  display: block;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #070a11;
}

.login-page .login-theme-toggle {
  top: 22px;
  right: 24px;
  z-index: 30;
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(8, 11, 18, .78);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(420px, 38vw) minmax(0, 1fr);
  min-height: 100vh;
  background: #070a11;
  color: #f7f8fc;
}

.auth-login-pane {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 72px clamp(32px, 5vw, 88px);
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: #0b0e15;
}

.auth-login-inner {
  width: min(100%, 430px);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(72px, 11vh, 128px);
  color: #fff;
}

.auth-brand:hover { color: #fff; }
.auth-brand .login-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0;
  border: 1px solid rgba(255, 121, 71, .36);
  border-radius: 10px;
  background: rgba(255, 92, 48, .12);
  color: #ff7947;
  box-shadow: none;
}
.auth-brand .login-logo img { object-fit: contain; }
.auth-brand strong,
.auth-brand small { display: block; }
.auth-brand strong { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.auth-brand small { margin-top: 2px; color: #8f9aae; font-size: 11px; }

.auth-form-heading {
  margin: 0 0 36px;
  text-align: left;
}
.auth-kicker,
.auth-story-label {
  display: block;
  margin-bottom: 13px;
  color: #ff7947;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-form-heading h1,
.auth-verify-card h1 {
  margin: 0 0 12px;
  color: #f7f8fc;
  font-size: clamp(29px, 2.3vw, 40px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.auth-form-heading p,
.auth-verify-card > p {
  max-width: 42ch;
  margin: 0;
  color: #9ca7ba;
  font-size: 14px;
  line-height: 1.6;
}

.auth-form .form-group { margin-bottom: 22px; }
.login-page .auth-form label {
  margin-bottom: 8px;
  color: #c8cfdb;
  font-size: 12px;
  font-weight: 650;
}
.login-page .auth-form .form-input {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #303846;
  border-radius: 8px;
  background: #111722;
  color: #f7f8fc;
  font-size: 14px;
  box-shadow: none;
}
.login-page .auth-form .form-input::placeholder { color: #717d91; }
.login-page .auth-form .form-input:focus {
  border-color: #ff7947;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 121, 71, .15);
}
.auth-password-field { position: relative; }
.auth-password-field .form-input { padding-right: 48px !important; }
.auth-password-field button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #919bad;
  cursor: pointer;
}
.auth-password-field button:hover,
.auth-password-field button:focus-visible { color: #ff7947; outline: 2px solid rgba(255, 121, 71, .3); }

.login-page .auth-submit {
  width: 100%;
  min-height: 50px;
  justify-content: space-between;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  background: #f45a2a;
  color: #fff;
  box-shadow: 0 14px 32px rgba(244, 90, 42, .2);
}
.login-page .auth-submit:hover,
.login-page .auth-submit:focus-visible {
  background: #ff7043;
  color: #fff;
  box-shadow: 0 18px 38px rgba(244, 90, 42, .28);
}
.login-page .auth-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.login-page .auth-submit i { margin: 0 !important; }

.login-page .login-error {
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 104, 104, .36);
  border-radius: 8px;
  background: rgba(255, 82, 99, .1);
  color: #ff909a;
  font-size: 12px;
  line-height: 1.45;
}
.auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 28px 0 0;
  color: #737f93;
  font-size: 11px;
  line-height: 1.5;
}
.auth-security-note i { margin-top: 1px; color: #59c895; }

.auth-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(68px, 8vw, 132px);
  background: #f45a2a;
  color: #160b08;
}
.auth-story::after {
  content: '';
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: min(60vw, 840px);
  aspect-ratio: 1;
  border: 1px solid rgba(31, 12, 5, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(31, 12, 5, .04), 0 0 0 140px rgba(31, 12, 5, .035);
}
.auth-story-copy { position: relative; z-index: 2; max-width: 700px; }
.auth-story-label { color: rgba(31, 12, 5, .66); }
.auth-story h2 {
  max-width: 720px;
  margin: 0 0 18px;
  color: #180b07;
  font-size: clamp(42px, 5vw, 82px);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: .98;
}
.auth-story-copy p {
  max-width: 54ch;
  margin: 0;
  color: rgba(31, 12, 5, .72);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
}

.auth-system-map {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  height: clamp(330px, 38vh, 470px);
  margin: 32px auto;
}
.auth-system-core,
.auth-system-node {
  position: absolute;
  display: flex;
  align-items: center;
  border: 1px solid rgba(31, 12, 5, .26);
  background: #0c0e13;
  color: #f7f8fc;
  box-shadow: 0 22px 50px rgba(92, 28, 8, .22);
}
.auth-system-core {
  top: 50%;
  left: 50%;
  width: min(320px, 48%);
  min-height: 108px;
  padding: 24px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
}
.auth-system-core > i {
  display: grid;
  width: 48px;
  height: 48px;
  margin-right: 14px;
  place-items: center;
  border-radius: 10px;
  background: #f45a2a;
  color: #fff;
  font-size: 22px;
}
.auth-system-core span,
.auth-system-core strong { display: block; }
.auth-system-core span { color: #8994a8; font-size: 11px; }
.auth-system-core strong { margin-left: auto; color: #5bd39b; font-size: 12px; }
.auth-system-node {
  min-width: 130px;
  height: 54px;
  gap: 9px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
}
.auth-system-node i { color: #ff7947; font-size: 16px; }
.node-leads { top: 6%; left: 2%; }
.node-files { top: 8%; right: 2%; }
.node-automation { bottom: 7%; left: 0; }
.node-security { right: 0; bottom: 5%; }
.auth-system-line {
  position: absolute;
  z-index: -1;
  width: 28%;
  height: 22%;
  border-color: rgba(31, 12, 5, .44);
  border-style: solid;
}
.line-a { top: 24%; left: 20%; border-width: 1px 0 0 1px; border-radius: 14px 0 0; }
.line-b { top: 26%; right: 20%; border-width: 1px 1px 0 0; border-radius: 0 14px 0 0; }
.line-c { bottom: 22%; left: 20%; border-width: 0 0 1px 1px; border-radius: 0 0 0 14px; }
.line-d { right: 20%; bottom: 21%; border-width: 0 1px 1px 0; border-radius: 0 0 14px; }
.auth-story-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 12, 5, .22);
  color: rgba(31, 12, 5, .7);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.auth-story-status span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.auth-story-status i { width: 7px; height: 7px; border-radius: 50%; background: #143a25; }

.auth-shell.is-verifying { display: grid; grid-template-columns: 1fr; place-items: center; padding: 28px; background: #070a11; }
.auth-verify-view { width: 100%; }
.auth-verify-card {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 62px);
  border: 1px solid #2b3442;
  border-radius: 16px;
  background: #0d1119;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
}
.auth-verify-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgba(244, 90, 42, .13);
  color: #ff7947;
  font-size: 21px;
}
.auth-verify-card > p strong { color: #dce1ea; font-weight: 650; }
.auth-verify-card form { margin-top: 36px; }
.otp-inputs { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 12px; margin-bottom: 22px; }
.otp-inputs input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  border: 1px solid #3a4351;
  border-radius: 10px;
  background: #080b11;
  color: #fff;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 720;
  text-align: center;
  caret-color: #ff7947;
}
.otp-inputs input:focus { border-color: #ff7947; outline: 3px solid rgba(255, 121, 71, .14); outline-offset: 2px; }
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  border: 0;
  background: transparent;
  color: #9ca7ba;
  font-size: 12px;
  cursor: pointer;
}
.auth-back:hover,
.auth-back:focus-visible { color: #ff7947; outline: none; }

.header-user-avatar.has-image {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: transparent !important;
}
.header-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

html[data-theme='light'] .login-page,
html[data-theme='light'] .auth-shell { background: #f5f6f8; }
html[data-theme='light'] .auth-login-pane { border-right-color: #d9dde5; background: #fff; }
html[data-theme='light'] .auth-brand,
html[data-theme='light'] .auth-brand:hover,
html[data-theme='light'] .auth-form-heading h1,
html[data-theme='light'] .auth-verify-card h1 { color: #11151d; }
html[data-theme='light'] .auth-brand small,
html[data-theme='light'] .auth-form-heading p,
html[data-theme='light'] .auth-verify-card > p,
html[data-theme='light'] .auth-security-note { color: #5f6978; }
html[data-theme='light'] .login-page .auth-form label { color: #323a47; }
html[data-theme='light'] .login-page .auth-form .form-input { border-color: #cbd1da; background: #fff; color: #11151d; }
html[data-theme='light'] .auth-password-field button { color: #5f6978; }
html[data-theme='light'] .auth-shell.is-verifying { background: #f5f6f8; }
html[data-theme='light'] .auth-verify-card { border-color: #d7dce4; background: #fff; box-shadow: 0 28px 70px rgba(32, 39, 52, .13); }
html[data-theme='light'] .auth-verify-card > p strong { color: #252c38; }
html[data-theme='light'] .otp-inputs input { border-color: #c7cdd7; background: #f8f9fb; color: #11151d; }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: minmax(360px, 46vw) minmax(0, 1fr); }
  .auth-story { padding: 72px 42px 42px; }
  .auth-story h2 { font-size: clamp(36px, 5.5vw, 58px); }
  .auth-system-map { height: 360px; }
  .auth-system-core { width: 62%; }
  .auth-system-node { min-width: 112px; }
}

@media (max-width: 760px) {
  .login-page .login-theme-toggle { top: 16px; right: 16px; }
  .auth-shell { display: block; }
  .auth-login-pane { min-height: 100vh; padding: 68px 24px 42px; border-right: 0; }
  .auth-login-inner { width: min(100%, 460px); }
  .auth-brand { margin-bottom: 72px; }
  .auth-story { display: none; }
  .auth-shell.is-verifying { display: grid; padding: 18px; }
  .auth-verify-card { padding: 32px 22px; }
  .otp-inputs { gap: 7px; }
  .otp-inputs input { border-radius: 8px; }
}

@media (max-width: 420px) {
  .auth-login-pane { padding-inline: 18px; }
  .auth-brand { margin-bottom: 58px; }
  .auth-form-heading h1,
  .auth-verify-card h1 { font-size: 28px; }
  .otp-inputs { gap: 5px; }
  .otp-inputs input { min-height: 48px; aspect-ratio: auto; font-size: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-system-core { animation: authCoreEnter .62s cubic-bezier(.16, 1, .3, 1) both; }
  .auth-system-node { animation: authNodeEnter .68s cubic-bezier(.16, 1, .3, 1) both; }
  .node-files { animation-delay: .06s; }
  .node-automation { animation-delay: .12s; }
  .node-security { animation-delay: .18s; }
  .auth-verify-card { animation: authVerifyEnter .42s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes authCoreEnter { from { transform: translate(-50%, -46%) scale(.97); filter: blur(5px); } }
@keyframes authNodeEnter { from { transform: translateY(12px); opacity: .2; filter: blur(4px); } }
@keyframes authVerifyEnter { from { transform: translateY(14px) scale(.985); opacity: .4; filter: blur(5px); } }

/* ═══════════════════════════════════════════════════════════════════════════
   Light theme consolidation — one quiet, readable operator surface.
   This final scoped layer intentionally resolves legacy light-theme overrides.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme='light'] {
  --bg-body: #f4f6fa;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f7f8fb;
  --bg-hover: #f1f3f7;
  --bg-active: #fff0ed;
  --border: #e2e6ee;
  --border-light: #cdd4df;
  --border-strong: #b8c2d0;
  --text-primary: #111827;
  --text-secondary: #3f4b5f;
  --text-muted: #657289;
  --accent: #e84f3d;
  --accent-hover: #cf3f30;
  --accent-muted: #fff0ed;
  --success: #168862;
  --success-muted: #e9f7f1;
  --warning: #a46608;
  --warning-muted: #fff5df;
  --danger: #c83e48;
  --danger-muted: #fff0f1;
  --info: #3867d6;
  --info-muted: #edf2ff;
  --shadow-card: 0 8px 24px rgba(35, 49, 76, .06);
  --shadow-soft: 0 4px 16px rgba(35, 49, 76, .055);
  color-scheme: light;
}

html[data-theme='light'] body:not(.login-page) {
  background: var(--bg-body) !important;
  background-image: none !important;
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='light'] body:not(.login-page) :is(h1, h2, h3, h4, h5, h6, strong, .text-heading) {
  color: var(--text-primary);
}

html[data-theme='light'] body:not(.login-page) :is(p, small, .text-secondary) {
  color: var(--text-secondary);
}

html[data-theme='light'] body:not(.login-page) :is(.text-muted, .field-hint, .form-text) {
  color: var(--text-muted) !important;
}

html[data-theme='light'] body:not(.login-page) .extra-small {
  font-size: 11.5px !important;
  line-height: 1.45;
}

html[data-theme='light'] .header,
html[data-theme='light'] .topbar,
html[data-theme='light'] .standalone-topbar {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 1px 0 rgba(18, 29, 50, .02) !important;
  backdrop-filter: blur(14px);
}

html[data-theme='light'] .header :is(.header-logo, #topbarTitle, .user-name strong) {
  color: var(--text-primary) !important;
}

html[data-theme='light'] .header :is(.search-form, .header-action, .header-user-dropdown > button) {
  border-color: var(--border) !important;
  background: #fff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme='light'] .header .search-form input {
  color: var(--text-primary);
}

html[data-theme='light'] .header .search-form input::placeholder { color: #7b879a; }

html[data-theme='light'] .sidebar {
  border-right: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: none !important;
}

html[data-theme='light'] .sidebar-header,
html[data-theme='light'] .sidebar-footer {
  border-color: var(--border) !important;
  background: #fff;
}

html[data-theme='light'] .sidebar-brand,
html[data-theme='light'] .sidebar-user .user-name { color: var(--text-primary) !important; }
html[data-theme='light'] .sidebar-brand small,
html[data-theme='light'] .sidebar-user .user-role { color: var(--text-muted) !important; }

html[data-theme='light'] .nav-section {
  margin-top: 15px;
  color: #768196 !important;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .09em;
}

html[data-theme='light'] .sidebar-nav > button.nav-item,
html[data-theme='light'] .sidebar-nav > .nav-item {
  min-height: 40px;
  margin: 2px 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent !important;
  color: #465269 !important;
  font-size: 12.5px;
  font-weight: 580;
  box-shadow: none !important;
}

html[data-theme='light'] .sidebar-nav > .nav-item > i {
  width: 18px;
  color: #647187 !important;
  font-size: 15px;
}

html[data-theme='light'] .sidebar-nav > button.nav-item:hover,
html[data-theme='light'] .sidebar-nav > .nav-item:hover {
  border-color: #e8ebf1;
  background: #f6f7fa !important;
  color: var(--text-primary) !important;
  transform: none;
}

html[data-theme='light'] .sidebar-nav > button.nav-item:hover > i,
html[data-theme='light'] .sidebar-nav > .nav-item:hover > i { color: var(--accent) !important; }

html[data-theme='light'] .sidebar-nav > button.nav-item.active,
html[data-theme='light'] .sidebar-nav > .nav-item.active {
  border-color: #ffd8d2 !important;
  background: var(--accent-muted) !important;
  color: #b83227 !important;
  font-weight: 680;
  box-shadow: none !important;
}

html[data-theme='light'] .sidebar-nav > button.nav-item.active::before,
html[data-theme='light'] .sidebar-nav > .nav-item.active::before {
  background: var(--accent);
  box-shadow: none;
}

html[data-theme='light'] .sidebar-nav > button.nav-item.active > i,
html[data-theme='light'] .sidebar-nav > button.nav-item.active > span,
html[data-theme='light'] .sidebar-nav > .nav-item.active > i,
html[data-theme='light'] .sidebar-nav > .nav-item.active > span { color: #b83227 !important; }

html[data-theme='light'] .main-content {
  background: transparent;
}

html[data-theme='light'] :is(
  .dash-hero, .dashboard-hero, .leads-head, .contacts-admin .contacts-head,
  .contact-hero, .widgets-head, .cookie-head, .settings-page-head,
  .integrations-head, .crm-workspace-head, .client-portal-head, .store-head,
  .notifications-head
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='light'] :is(
  .stat-card, .site-card, .page-item, .block-card, .preview-panel,
  .dash-panel, .dash-metric, .dash-action-card, .dash-card, .dash-kpi-inner,
  .dash-stat-inner, .dash-analytics-card, .integration-card, .lead-stat,
  .lead-list, .lead-detail, .metric-card, .admin-row, .service-card,
  .contact-card, .contact-inspector, .contacts-board, .billing-table-wrap,
  .crm-stage, .crm-task-column, .crm-task-composer, .crm-finance-empty,
  .crm-finance-chart, .crm-tabs, .access-workspace, .access-summary-card,
  .settings-section, .modal-content, .dropdown-menu, .toast
) {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme='light'] :is(.dash-metric, .metric-card, .lead-stat, .access-summary-card) {
  min-height: 108px;
}

html[data-theme='light'] :is(.dash-panel, .dash-analytics-card, .billing-table-wrap, .access-workspace) {
  box-shadow: var(--shadow-card) !important;
}

html[data-theme='light'] .crm-tabs {
  padding: 7px !important;
  gap: 4px !important;
}

html[data-theme='light'] .crm-tabs [data-crm-mode] {
  min-height: 38px;
  padding-inline: 14px !important;
  border-color: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

html[data-theme='light'] .crm-tabs [data-crm-mode]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

html[data-theme='light'] .crm-tabs [data-crm-mode].active {
  border-color: #ffd8d2;
  background: var(--accent-muted);
  color: #b83227;
  box-shadow: none;
}

html[data-theme='light'] :is(.crm-stage, .crm-task-column) {
  background: #fafbfc !important;
}

html[data-theme='light'] :is(.crm-lead-card, .crm-task-card, .crm-empty-mini) {
  border-color: var(--border);
  background: #fff;
  background-image: none;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(35, 49, 76, .04);
}

html[data-theme='light'] :is(.form-input, .form-select, .form-textarea, input, select, textarea) {
  border-color: var(--border-light);
  background: #fff;
  color: var(--text-primary);
  box-shadow: none;
}

html[data-theme='light'] :is(.form-input, .form-select, .form-textarea, input, textarea)::placeholder {
  color: #7b879a;
  opacity: 1;
}

html[data-theme='light'] :is(.form-input, .form-select, .form-textarea, input, select, textarea):focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 79, 61, .13);
}

html[data-theme='light'] :is(.btn-secondary, .btn-icon, .btn-outline-secondary, .btn-light) {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme='light'] :is(.btn-secondary, .btn-icon, .btn-outline-secondary, .btn-light):hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  transform: none;
}

html[data-theme='light'] .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(232, 79, 61, .18);
}

html[data-theme='light'] .btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  box-shadow: 0 8px 20px rgba(232, 79, 61, .22);
}

html[data-theme='light'] :is(.alert, .access-notice) {
  border-color: #cfdaf7;
  background: var(--info-muted);
  color: #274c9c;
}

html[data-theme='light'] :is(table, .table, .access-table, .permission-matrix) {
  color: var(--text-secondary);
}

html[data-theme='light'] :is(table, .table, .access-table, .permission-matrix) thead th {
  border-color: var(--border);
  background: #f7f8fa;
  color: #566279;
  font-size: 10.5px;
  font-weight: 740;
  letter-spacing: .045em;
}

html[data-theme='light'] :is(table, .table, .access-table, .permission-matrix) tbody td {
  border-color: #e8ebf0;
  background: #fff;
  color: var(--text-secondary);
}

html[data-theme='light'] :is(table, .table, .access-table, .permission-matrix) tbody tr:hover td {
  background: #fafbfc;
}

html[data-theme='light'] :is(.dropdown-item, .dropdown-header) { color: var(--text-secondary); }
html[data-theme='light'] .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
html[data-theme='light'] .dropdown-divider { border-color: var(--border); }

html[data-theme='light'] :is(.badge.bg-dark, .lead-status, .access-role-badge) {
  font-weight: 650;
}

html[data-theme='light'] :is(.page-title, .crm-workspace-head h1, .settings-page-head h1, .dash-hero h1) {
  color: var(--text-primary);
  font-weight: 720;
  letter-spacing: -.025em;
}

html[data-theme='light'] :is(.crm-workspace-head p, .settings-page-head p, .dash-hero p) {
  color: var(--text-muted);
  font-size: 13.5px;
}

@media (max-width: 767px) {
  html[data-theme='light'] body:not(.login-page) { font-size: 13.5px; }
  html[data-theme='light'] .main-content { padding-inline: 14px; }
  html[data-theme='light'] .sidebar-nav > button.nav-item,
  html[data-theme='light'] .sidebar-nav > .nav-item { font-size: 13px; }
}

/* Light operator shell: keep the navigation dark while work surfaces stay light.
   Scoped to non-ERP shells — the ERP shell overrides these via #sidebar in crm-theme.css. */
html[data-theme='light'] {
  --light-sidebar-bg: #1e293b;
  --light-sidebar-border: rgba(255, 255, 255, .08);
  --light-sidebar-text: #cbd5e1;
  --light-sidebar-muted: #7f91ad;
  --light-sidebar-hover: rgba(255, 255, 255, .075);
}

html[data-theme='light'] body:not(.app-layout) :is(.sidebar, .sidebar-header, .sidebar-nav, .sidebar-footer) {
  background: var(--light-sidebar-bg) !important;
  background-image: none !important;
  border-color: var(--light-sidebar-border) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar {
  border-right: 0 !important;
  box-shadow: 12px 0 32px rgba(15, 23, 42, .10) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar :is(.sidebar-brand, .sidebar-user .user-name) {
  color: #f8fafc !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar :is(.sidebar-brand small, .sidebar-user .user-role, .nav-section) {
  color: var(--light-sidebar-muted) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--light-sidebar-text) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item:hover,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item:hover {
  border-color: transparent !important;
  background: var(--light-sidebar-hover) !important;
  color: #fff !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item:nth-of-type(3n + 1) > i {
  color: #8b5cf6 !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item:nth-of-type(3n + 2) > i {
  color: #d98a08 !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item:nth-of-type(3n) > i {
  color: #0f9f73 !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item.active,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #7146ee, #df3c64) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(152, 61, 171, .30) !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item.active::before,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item.active::before {
  display: none !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item.active > i,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > button.nav-item.active > span,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item.active > i,
html[data-theme='light'] body:not(.app-layout) .sidebar-nav > .nav-item.active > span {
  color: #fff !important;
}

html[data-theme='light'] body:not(.app-layout) .sidebar-footer .sidebar-user > i {
  color: var(--light-sidebar-muted) !important;
}

/* Light-theme status chips: override the legacy dark badge base at its source. */
html[data-theme='light'] .badge.bg-secondary,
html[data-theme='light'] .badge.bg-dark,
html[data-theme='light'] .badge.bg-dark-subtle {
  border-color: #cbd6e6 !important;
  background: #eaf0f7 !important;
  color: #33415f !important;
}

html[data-theme='light'] .badge.bg-white {
  border-color: #d7deea !important;
  background: #fff !important;
  color: var(--accent) !important;
}

html[data-theme='light'] .btn-primary .badge.bg-white {
  border-color: rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--accent-hover) !important;
}

html[data-theme='light'] .badge.bg-blue-subtle.text-blue {
  border-color: #cbd9ff !important;
  background: #edf2ff !important;
  color: #3154b8 !important;
}

html[data-theme='light'] .badge.bg-amber-subtle.text-amber {
  border-color: #f1d7a8 !important;
  background: #fff5df !important;
  color: #8a5709 !important;
}

html[data-theme='light'] .badge.bg-violet-subtle.text-violet {
  border-color: #d9cff8 !important;
  background: #f2effd !important;
  color: #5e3fb1 !important;
}

html[data-theme='light'] .badge.bg-green-subtle.text-green {
  border-color: #bde4d4 !important;
  background: #e9f7f1 !important;
  color: #117451 !important;
}

html[data-theme='light'] .badge.bg-slate-subtle.text-slate {
  border-color: #d6dde8 !important;
  background: #f0f3f7 !important;
  color: #465269 !important;
}

html[data-theme='light'] .email-row .avatar-circle {
  color: #fff !important;
}

/* Task status choices are chips; a primary choice must not inherit login width. */
#taskStatusBar .btn,
#taskStatusBar .btn-primary {
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
  padding-inline: 16px;
}

/* CRM task queue: quick status changes with completed work kept separately. */
.crm-task-quick-status {
  --task-status-color: var(--warning);
  --task-status-bg: var(--warning-muted);
  position: relative;
  display: inline-flex;
  min-width: 132px;
  align-items: center;
}

.crm-task-quick-status.status-primary {
  --task-status-color: var(--accent);
  --task-status-bg: var(--accent-muted);
}

.crm-task-quick-status.status-danger {
  --task-status-color: var(--danger);
  --task-status-bg: var(--danger-muted);
}

.crm-task-quick-status.status-success {
  --task-status-color: var(--success);
  --task-status-bg: var(--success-muted);
}

.crm-task-quick-status select {
  width: 100%;
  min-height: 34px;
  appearance: none;
  padding: 6px 30px 6px 11px;
  border: 1px solid color-mix(in srgb, var(--task-status-color) 35%, var(--border));
  border-radius: 999px;
  outline: 0;
  background: var(--task-status-bg);
  color: var(--task-status-color);
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}

.crm-task-quick-status select:hover {
  border-color: color-mix(in srgb, var(--task-status-color) 65%, var(--border));
}

.crm-task-quick-status select:focus-visible {
  border-color: var(--task-status-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-status-color) 16%, transparent);
}

.crm-task-quick-status > i {
  position: absolute;
  right: 11px;
  color: var(--task-status-color);
  font-size: 10px;
  pointer-events: none;
}

.crm-completed-tasks {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.crm-completed-tasks > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.crm-completed-tasks > summary::-webkit-details-marker { display: none; }

.crm-completed-tasks > summary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.crm-completed-tasks > summary:focus-visible {
  outline: 3px solid var(--accent-muted);
  outline-offset: -3px;
}

.crm-completed-tasks > summary > span:first-child {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 0;
}

.crm-completed-tasks > summary > span:first-child > i {
  grid-row: 1 / span 2;
  color: var(--success);
}

.crm-completed-tasks > summary strong { color: var(--text-primary); }

.crm-completed-tasks > summary small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 11px;
}

.crm-completed-count {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--success-muted);
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
}

.crm-completed-tasks[open] > summary {
  border-bottom: 1px solid var(--border);
}

.crm-completed-body .c-task-row {
  background: color-mix(in srgb, var(--success-muted) 28%, var(--bg-card));
}

.crm-task-mobile-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.crm-task-mobile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
}

.crm-task-mobile-card:focus-within,
.crm-task-mobile-card:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: var(--bg-hover);
}

.crm-task-mobile-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.crm-task-mobile-card__head > div { min-width: 0; }

.crm-task-mobile-card h3 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.35;
}

.crm-task-mobile-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.crm-task-mobile-card__lead,
.crm-task-mobile-card__lead.is-empty,
.crm-task-mobile-card__meta {
  color: var(--text-muted);
  font-size: 12px;
}

.crm-task-mobile-card__lead {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font: inherit;
  font-weight: 650;
}

.crm-task-mobile-card__lead:hover { text-decoration: underline; }

.crm-task-mobile-card__meta,
.crm-task-mobile-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.crm-task-mobile-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.crm-task-mobile-card__actions {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.crm-task-mobile-card__actions .btn:last-child { margin-left: auto; }

@media (max-width: 700px) {
  .crm-completed-tasks > summary small { display: none; }
  .crm-task-quick-status { min-width: 118px; }
  .crm-task-mobile-card__head { align-items: stretch; flex-direction: column; }
  .crm-task-mobile-card .crm-task-quick-status { width: 100%; }
}

/* ── Sidebar Branding Contrast ───────────────────────────── */
.crm-footer-branding,
.sidebar-footer .crm-footer-branding,
html[data-theme='light'] .crm-footer-branding,
html[data-theme='light'] .sidebar-footer .crm-footer-branding {
  padding: 12px 8px 4px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  opacity: 0.9 !important;
}

.crm-footer-branding span,
.sidebar-footer .crm-footer-branding span,
html[data-theme='light'] .crm-footer-branding span,
html[data-theme='light'] .sidebar-footer .crm-footer-branding span {
  font-weight: 700 !important;
  color: #38bdf8 !important;
}

/* ── Sidebar Dark Scrollbar ───────────────────────────────── */
.sidebar,
.sidebar-nav,
#sidebar,
#sidebarNav,
.app-sidebar {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
#sidebar::-webkit-scrollbar,
#sidebarNav::-webkit-scrollbar,
.app-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track,
#sidebarNav::-webkit-scrollbar-track,
.app-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb,
#sidebarNav::-webkit-scrollbar-thumb,
.app-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 6px !important;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover,
#sidebarNav::-webkit-scrollbar-thumb:hover,
.app-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.38) !important;
}

/* ── Form Switches — unified: 44x24px, gray OFF, indigo ON ───────── */
.form-switch {
  padding-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
}

.form-switch .form-check-input {
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #e2e8f0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 2px center !important;
  background-size: 18px 18px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06) !important;
  transition: background-position 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.form-switch .form-check-input:checked {
  border-color: #4f46e5 !important;
  background-color: #4f46e5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-position: right 2px center !important;
  box-shadow: 0 0 0 0 transparent !important;
}

.form-switch .form-check-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22) !important;
}

.form-switch .form-check-input:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

html[data-theme='dark'] .form-switch .form-check-input,
[data-theme='dark'] .form-switch .form-check-input {
  border-color: #334155 !important;
  background-color: #1e293b !important;
}

html[data-theme='dark'] .form-switch .form-check-input:checked,
[data-theme='dark'] .form-switch .form-check-input:checked {
  border-color: #6366f1 !important;
  background-color: #6366f1 !important;
}

html[data-theme='dark'] .form-switch .form-check-input:focus,
[data-theme='dark'] .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28) !important;
}

/* ── Integration Cards & Sleek Status Badges ──────────────── */
.integration-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.integration-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.integration-status-badge.status-not-connected,
.integration-status-badge.status-not_connected {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

.integration-status-badge.status-connected {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}

.integration-status-badge.status-configured {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
}

.integration-status-badge.status-error {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}

/* ── Integration Card Identity & Icon (No white lines or stretching) ── */
.integration-card-identity {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  background: transparent !important;
}

.integration-card-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

html[data-theme='dark'] .integration-card-icon,
body:not([data-theme='light']) .integration-card-icon {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

.integration-card-identity h3 {
  margin: 0 0 4px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}

.integration-card-identity p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
}

/* ── Primary Connect Button Contrast (Orange + White text) ── */
.btn-connect-primary,
.btn-connect-primary:link,
.btn-connect-primary:visited,
.integration-card-actions .btn-connect-primary {
  background: #ea580c !important;
  background-color: #ea580c !important;
  border-color: #ea580c !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease-in-out !important;
  text-shadow: none !important;
}

.btn-connect-primary:hover,
.btn-connect-primary:focus,
.btn-connect-primary:active,
.integration-card-actions .btn-connect-primary:hover {
  background: #c2410c !important;
  background-color: #c2410c !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
}

.integration-card-actions .btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
  font-weight: 500 !important;
}

.integration-card-actions .btn-outline-secondary:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

.integration-card-actions .btn-link.text-danger {
  color: #ef4444 !important;
  font-weight: 500 !important;
}

.integration-card-actions .btn-link.text-danger:hover {
  color: #dc2626 !important;
  text-decoration: underline !important;
}

/* ── Settings: Brand Studio & Live Preview ────────────────── */
.brand-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: flex-start;
}

@media (max-width: 960px) {
  .brand-studio-layout {
    grid-template-columns: 1fr;
  }
}

.brand-copy-fields {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.brand-assets-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.brand-assets-heading strong {
  font-size: 14px;
  color: var(--text-primary);
}

.brand-assets-heading span {
  font-size: 12px;
  color: var(--text-muted);
}

.brand-asset-list {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.brand-asset-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.brand-asset-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
}

.brand-asset-info {
  flex: 1;
  min-width: 0;
}

.brand-asset-info strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-primary);
}

.brand-asset-info small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.brand-preview-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.brand-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

.brand-preview-heading span {
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brand-preview-window {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-body);
}

.brand-preview-browser {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}

.brand-preview-browser > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  display: inline-block;
}

.brand-preview-browser > span:nth-child(1) { background: #ef4444; }
.brand-preview-browser > span:nth-child(2) { background: #f59e0b; }
.brand-preview-browser > span:nth-child(3) { background: #10b981; }

.brand-preview-tab {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-primary);
}

.brand-preview-app {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 180px;
}

.brand-preview-sidebar {
  background: #1e293b;
  color: #cbd5e1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}

.brand-preview-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-preview-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #38bdf8;
  flex-shrink: 0;
  display: inline-block;
}

.brand-preview-identity strong {
  display: block;
  font-size: 10px;
  color: #f8fafc;
  line-height: 1.1;
}

.brand-preview-identity small {
  display: block;
  font-size: 8px;
  color: #94a3b8;
}

.brand-preview-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 10px;
}

.brand-preview-nav.is-active {
  background: #3b82f6;
  color: #ffffff;
}

.brand-preview-content {
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
}

.brand-preview-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.brand-preview-main {
  padding: 12px;
  flex: 1;
}

.brand-preview-main small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.brand-preview-main strong {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.brand-preview-main p {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.3;
}

.brand-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-preview-lines span {
  height: 6px;
  border-radius: 3px;
  background: var(--border-light);
}

.brand-preview-lines span:nth-child(1) { width: 85%; }
.brand-preview-lines span:nth-child(2) { width: 65%; }
.brand-preview-lines span:nth-child(3) { width: 45%; }

.brand-preview-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Workspace Currency & Menu Settings ───────────────────── */
.workspace-currency-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.workspace-currency-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.workspace-currency-option.is-selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

.workspace-currency-option input[type="radio"] {
  display: none;
}

.workspace-currency-symbol {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.workspace-currency-option.is-selected .workspace-currency-symbol {
  background: #ef4444;
  color: #ffffff;
}

.workspace-currency-preview {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.workspace-currency-preview strong {
  font-size: 17px;
  color: var(--text-primary);
}

/* ── Documentation Platform ──────────────────────────────── */
.docs-admin {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 24px;
  min-height: calc(100vh - 160px);
}

@media (max-width: 1100px) {
  .docs-admin {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .docs-on-page {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .docs-admin {
    grid-template-columns: 1fr;
  }
}

.docs-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.docs-sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
}

.docs-sidebar-title i {
  font-size: 22px;
  color: var(--accent);
}

.docs-sidebar-title small,
.docs-sidebar-title span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.docs-search {
  position: relative;
  display: block;
}

.docs-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.docs-search input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  font-size: 13px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
}

#docsNavigation section {
  margin-bottom: 14px;
}

#docsNavigation section > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#docsNavigation button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}

#docsNavigation button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

#docsNavigation button.is-active {
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 600;
}

.docs-reader {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  line-height: 1.6;
}

.docs-reader h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.docs-lead {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.docs-reader h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.docs-reader p,
.docs-reader ul,
.docs-reader ol {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.docs-reader ul,
.docs-reader ol {
  padding-left: 20px;
}

.docs-callout,
.docs-warning,
.docs-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin: 18px 0;
  font-size: 13px;
}

.docs-callout {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  color: #0369a1;
}

.docs-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #b45309;
}

.docs-note {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.docs-code {
  position: relative;
  background: #0f172a;
  color: #f8fafc;
  padding: 14px 16px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 12.5px;
  overflow-x: auto;
  margin: 16px 0;
}

.docs-code code {
  color: #38bdf8;
}

.docs-code button {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.docs-model,
.docs-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-hover);
  border-radius: 8px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.docs-steps {
  display: grid;
  gap: 14px;
  padding-left: 0;
  list-style: none;
  counter-reset: step-count;
}

.docs-steps > li {
  counter-increment: step-count;
  display: flex;
  gap: 12px;
}

.docs-steps > li::before {
  content: counter(step-count);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.docs-endpoints > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.docs-endpoints b.is-get { color: #10b981; font-weight: 700; }
.docs-endpoints b.is-post { color: #3b82f6; font-weight: 700; }

.docs-on-page {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: fit-content;
}

.docs-on-page strong {
  font-size: 13px;
  color: var(--text-primary);
}

.docs-on-page nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-on-page a {
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
}

.docs-on-page a:hover {
  color: var(--accent);
}

/* ── Developer APIs & Webhooks ────────────────────────────── */
.developer-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.developer-endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.developer-endpoint > div span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.developer-endpoint > div strong {
  font-size: 16px;
  color: var(--accent);
  font-family: monospace;
}

.developer-endpoint > div small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.developer-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.developer-tabs button {
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.developer-tabs button:hover {
  color: var(--text-primary);
}

.developer-tabs button.is-active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  font-weight: 600;
}

.developer-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.developer-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.developer-section-head h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.developer-section-head p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.developer-create-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.developer-create-row label {
  flex: 1;
}

.developer-create-row label span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.developer-secret {
  background: #0f172a;
  color: #f8fafc;
  padding: 14px 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  font-family: monospace;
}

.developer-secret strong {
  display: block;
  font-size: 12px;
  color: #38bdf8;
}

.developer-secret small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
}

.developer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.developer-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.developer-list-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-muted);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.developer-deliveries {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/**
 * Метки событий и адресов. Класс использовался разметкой вебхуков, но стилей у него не было
 * вовсе — список приезжал слитным текстом. Цвета только из переменных темы: светлая плашка,
 * зашитая цветом, уже уезжала в прод и была нечитаема на тёмной.
 */
.developer-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.developer-event-chips span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  /* Адрес эндпоинта длинный: без переноса он растягивает карточку и ломает раскладку. */
  word-break: break-all;
}

.developer-notes {
  margin: 14px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.developer-notes strong {
  color: var(--text-primary);
}

.developer-code {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.6;
  /* Команда не переносится по словам, поэтому прокрутка — у самого блока, а не у страницы:
     горизонтальная полоса на всём экране кабинета выглядит как поломка вёрстки. */
  overflow-x: auto;
  white-space: pre;
}

.developer-deliveries h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* ── Notes Workspace Module ──────────────────────────────── */
.notes-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.notes-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  display: flex;
  align-items: center;
  margin: 0;
}

.notes-search i {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.notes-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
  transition: all var(--transition);
}

.notes-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

#notesCount {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-hover);
  border-radius: 9999px;
  border: 1px solid var(--border);
}

.notes-list {
  display: grid;
  gap: 14px;
}

.note-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.note-row:hover,
.note-row:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.note-row-main h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.note-row-main p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-row footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.note-row footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-secondary);
}

.note-row footer time {
  margin-left: auto;
}

.note-row footer i.bi-chevron-right {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.note-row:hover footer i.bi-chevron-right {
  color: var(--accent);
  transform: translateX(3px);
}

.notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.notes-empty i {
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0.85;
}

.notes-empty h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.notes-empty p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 320px;
}

/* ── Note Dialog / Editor Modal ──────────────────────────── */
.note-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1050;
  animation: fadeIn 0.15s ease-out;
}

.note-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.note-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}

.note-dialog header span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 2px;
}

.note-dialog header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.note-dialog-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.note-dialog-body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.note-dialog-body input,
.note-dialog-body textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  transition: all var(--transition);
}

.note-dialog-body input:focus,
.note-dialog-body textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.note-dialog-body textarea {
  resize: vertical;
  min-height: 160px;
}

.note-audit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-muted);
}

.note-audit span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.note-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  gap: 12px;
}

.note-dialog footer > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Main Theme Accent Switch: Indigo / Royal Blue Accent
   ═══════════════════════════════════════════════════════════════ */
:root {
  --accent: #4f46e5;
  --accent-hover: #6366f1;
  --accent-muted: rgba(79, 70, 229, 0.14);
}

html[data-theme='light'] {
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-muted: #eef2ff;
  --bg-active: #eef2ff;
}

/* ── Sidebar Active Item & Logo ── */
.sidebar-logo,
.login-logo {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-color: rgba(99, 102, 241, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.sidebar-nav > button.nav-item.active,
.sidebar-nav > .nav-item.active,
html[data-theme='light'] .sidebar-nav > button.nav-item.active,
html[data-theme='light'] .sidebar-nav > .nav-item.active {
  border-color: transparent;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}

.sidebar-nav > button.nav-item.active > i,
.sidebar-nav > button.nav-item.active > span,
.sidebar-nav > .nav-item.active > i,
.sidebar-nav > .nav-item.active > span,
html[data-theme='light'] .sidebar-nav > button.nav-item.active > i,
html[data-theme='light'] .sidebar-nav > button.nav-item.active > span,
html[data-theme='light'] .sidebar-nav > .nav-item.active > i,
html[data-theme='light'] .sidebar-nav > .nav-item.active > span {
  color: #ffffff;
}

/* ── Primary Action Buttons (Connect, Save, Create) ── */
.btn-primary,
.btn-connect-primary,
.btn-connect-primary:link,
.btn-connect-primary:visited,
.integration-card-actions .btn-connect-primary,
[data-save-roles],
[data-save-group],
#saveWorkspaceSettings {
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease-in-out !important;
  text-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-connect-primary:hover,
.btn-connect-primary:focus,
.btn-connect-primary:active,
.integration-card-actions .btn-connect-primary:hover,
[data-save-roles]:hover,
[data-save-group]:hover,
#saveWorkspaceSettings:hover {
  background: #4338ca !important;
  background-color: #4338ca !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

/* ── Integrations Category Navigation ── */
.integration-category-btn.active,
html[data-theme='light'] .integration-category-btn.active {
  border-color: #818cf8 !important;
  background: #e0e7ff !important;
  color: #1e1b4b !important;
  font-weight: 700 !important;
}

.integration-category-btn.active > span,
.integration-category-btn.active > i,
.integration-category-btn.active .integration-category-arrow,
html[data-theme='light'] .integration-category-btn.active > span,
html[data-theme='light'] .integration-category-btn.active > i,
html[data-theme='light'] .integration-category-btn.active .integration-category-arrow {
  color: #1e1b4b !important;
  font-weight: 700 !important;
}

html[data-theme='dark'] .integration-category-btn.active,
body:not([data-theme='light']) .integration-category-btn.active {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.28) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

html[data-theme='dark'] .integration-category-btn.active > span,
html[data-theme='dark'] .integration-category-btn.active > i,
html[data-theme='dark'] .integration-category-btn.active .integration-category-arrow,
body:not([data-theme='light']) .integration-category-btn.active > span,
body:not([data-theme='light']) .integration-category-btn.active > i,
body:not([data-theme='light']) .integration-category-btn.active .integration-category-arrow {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── Switches (Modules & Settings) — see unified rule above ── */

/* ── Tabs & Indicators ── */
.developer-tabs button.is-active,
.access-tab.active {
  color: #4f46e5 !important;
  border-bottom-color: #4f46e5 !important;
}

html[data-theme='dark'] .developer-tabs button.is-active,
html[data-theme='dark'] .access-tab.active {
  color: #818cf8 !important;
  border-bottom-color: #818cf8 !important;
}

.workspace-currency-option.is-selected {
  border-color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.06) !important;
}

.workspace-currency-option.is-selected .workspace-currency-symbol {
  background: #4f46e5 !important;
  color: #ffffff !important;
}

/* ── Client Portal & Dialog Modal ────────────────────────── */
.client-dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease-out;
}

.client-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.client-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-dialog form {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  margin: 0;
}

.client-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  flex-shrink: 0;
}

.client-dialog-head span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 3px;
}

.client-dialog-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.client-dialog-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.client-dialog-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.client-dialog-body .integration-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.client-dialog-body .integration-fields .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-dialog-body .integration-fields .form-group span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.client-dialog-body .integration-fields .form-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
  transition: all var(--transition);
}

.client-dialog-body .integration-fields .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.client-dialog-body .integration-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  margin-top: 4px;
}

.client-dialog-body .form-group:has(#newclientPassword) {
  grid-column: 1 / -1;
}

.client-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  flex-shrink: 0;
}

.dash-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
}

.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dash-panel-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  width: 100%;
}

.client-row:hover,
.client-row.active {
  border-color: var(--accent);
  background: var(--accent-muted);
}

/* ── Content Area & Page Header Spacing ── */
.content-area {
  padding: 24px 28px;
}

.page-header,
.admin-page-heading,
.settings-page-head,
.integrations-head {
  padding-top: 4px;
}

/* ── Calendar Polish ── */
.page-calendar {
  width: 100%;
}

.page-calendar .page-header {
  margin-bottom: 24px;
}

.calendar-app {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}