/* [project]/newsletter-app/src/app/playfair_b84ec088.module.css [app-client] (css) */
@font-face {
  font-family: playfair;
  src: url("../media/geist_400-s.p.6435ea53.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: playfair Fallback;
  src: local(Arial);
  ascent-override: 94.47%;
  descent-override: 27.73%;
  line-gap-override: 0.0%;
  size-adjust: 106.39%;
}

.playfair_b84ec088-module__JgwvdW__className {
  font-family: playfair, playfair Fallback, Georgia, Cambria, Times New Roman, Times, serif;
}

.playfair_b84ec088-module__JgwvdW__variable {
  --font-heading: "playfair", "playfair Fallback", Georgia, Cambria, Times New Roman, Times, serif;
}

/* [project]/newsletter-app/src/app/globals.scss.css [app-client] (css) */
:root {
  --black: #000;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --primary-light: #fee2e2;
  --primary-dark: #991b1b;
  --primary-text: #fff;
  --secondary: #1d4ed8;
  --secondary-hover: #1e40af;
  --secondary-light: #dbeafe;
  --success: #059669;
  --success-light: #d1fae5;
  --success-dark: #047857;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --warning-dark: #b45309;
  --error: #dc2626;
  --error-light: #fee2e2;
  --error-dark: #b91c1c;
  --info: #2563eb;
  --info-light: #dbeafe;
  --info-dark: #1d4ed8;
  --bg-primary: #fff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-elevated: #fff;
  --bg-overlay: #00000080;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #fff;
  --border-light: #e5e7eb;
  --border-default: #d1d5db;
  --border-medium: #9ca3af;
  --border-strong: #6b7280;
  --border-focus: var(--primary);
  --sidebar-bg: #f9fafb;
  --sidebar-text: #101828;
  --sidebar-text-muted: #364153;
  --sidebar-active-bg: #fef2f2;
  --sidebar-hover-bg: #0000000a;
  --sidebar-border: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 #0000000d;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-lg-xl: 16px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;
  --radius-4xl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm-xs: 6px;
  --spacing-sm: 8px;
  --spacing-sm-md: 10px;
  --spacing-md-sm: 12px;
  --spacing-md: 16px;
  --spacing-md-lg: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;
  --icon-2xl: 24px;
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 28px;
  --font-size-6xl: 32px;
  --font-size-7xl: 36px;
  --font-size-8xl: 48px;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: .15s;
  --duration-normal: .2s;
  --duration-slow: .3s;
}

[data-theme="orange"] {
  --primary: #f6821f;
  --primary-hover: #e5760d;
  --primary-light: #fff7ed;
  --primary-dark: #c2410c;
}

[data-theme="blue"] {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #dbeafe;
  --primary-dark: #1e40af;
}

[data-theme="purple"] {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #ede9fe;
  --primary-dark: #5b21b6;
}

[data-theme="green"] {
  --primary: #059669;
  --primary-hover: #047857;
  --primary-light: #d1fae5;
  --primary-dark: #065f46;
}

[data-theme="rose"], [data-theme="red"] {
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --primary-light: #fee2e2;
  --primary-dark: #991b1b;
}

[data-theme="violet"] {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #ede9fe;
  --primary-dark: #5b21b6;
}

[data-theme="teal"] {
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-light: #ccfbf1;
  --primary-dark: #115e59;
}

[data-mode="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --bg-elevated: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-muted: #6b7280;
  --border-light: #374151;
  --border-default: #4b5563;
  --border-strong: #6b7280;
  --shadow-sm: 0 1px 2px 0 #0000004d;
  --shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;
  --shadow-lg: 0 10px 15px -3px #0006, 0 4px 6px -4px #0000004d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  color: inherit;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideDownToBottom {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpFade {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.animate-fadeIn {
  animation: fadeIn var(--duration-normal) var(--ease-out-expo);
}

.animate-fadeInUp {
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
}

.animate-fadeInScale {
  animation: fadeInScale var(--duration-normal) var(--ease-out-expo);
}

.animate-slideInRight {
  animation: slideInRight var(--duration-normal) var(--ease-out-expo);
}

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-spin {
  animation: 1s linear infinite spin;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  font-size: var(--font-size-base);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

a {
  color: inherit;
  transition: color var(--duration-fast) ease;
  text-decoration: none;
}

a:hover {
  color: var(--primary);
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
  font-weight: 600;
  line-height: 1.3;
}

h1 {
  font-size: var(--font-size-5xl);
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

p {
  line-height: 1.6;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.sidebar {
  background: var(--sidebar-bg);
  width: 200px;
  color: var(--sidebar-text);
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: 1px solid var(--sidebar-border);
  flex-direction: column;
  height: 100vh;
  padding: 14px 8px;
  display: flex;
  position: fixed;
  overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-logo {
  font-family: var(--font-heading), serif;
  letter-spacing: -.01em;
  color: var(--sidebar-text);
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 16px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.sidebar-logo-icon {
  background: var(--primary);
  width: 24px;
  height: 24px;
  color: var(--white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  display: flex;
}

.sidebar-section-title {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sidebar-text-muted);
  margin-bottom: 4px;
  padding: 0 10px;
  font-weight: 600;
}

.sidebar-nav {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  display: flex;
}

.sidebar-bottom {
  border-top: 1px solid var(--sidebar-border);
  flex-direction: column;
  gap: 1px;
  margin-top: auto;
  padding-top: 10px;
  display: flex;
}

.sidebar-user {
  align-items: center;
  gap: var(--spacing-sm);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  background: none;
  margin-top: 6px;
  padding: 6px 10px;
  display: flex;
}

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

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

.sidebar-user-name {
  font-size: var(--font-size-sm);
  color: var(--sidebar-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  display: block;
  overflow: hidden;
}

.sidebar-user-email {
  font-size: var(--font-size-2xs);
  color: var(--sidebar-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.sidebar-logout {
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  background: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sidebar-logout:hover {
  background: var(--sidebar-hover-bg);
  border-color: var(--gray-300);
  color: var(--sidebar-text);
}

.sidebar-link {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--sidebar-text-muted);
  transition: all var(--duration-fast) ease;
  padding: 5px 10px;
  font-weight: 450;
  display: flex;
  position: relative;
}

.sidebar-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--primary);
  font-weight: 500;
}

.sidebar-icon {
  opacity: .7;
  width: 16px;
  height: 16px;
}

.sidebar-link.active .sidebar-icon {
  opacity: 1;
  color: var(--primary);
}

.sidebar-loading .sidebar-nav {
  padding: 6px 10px;
}

.sidebar-link-skeleton {
  background: var(--sidebar-hover-bg);
  height: 28px;
  margin-bottom: 2px;
  animation: 1.5s ease-in-out infinite skeleton-pulse;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.sidebar-group {
  margin-bottom: 2px;
}

.sidebar-group-header {
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  padding: 5px 10px;
  font-weight: 600;
  display: flex;
}

.sidebar-group-header:hover, .sidebar-group.open .sidebar-group-header {
  color: var(--sidebar-text);
}

.sidebar-group-chevron {
  transition: transform var(--duration-fast) ease;
  margin-left: auto;
}

.sidebar-group.open .sidebar-group-chevron {
  transform: rotate(180deg);
}

.sidebar-group-items {
  padding-left: 6px;
}

.sidebar-group-items .sidebar-link {
  font-size: var(--font-size-xs);
  padding: 4px 10px;
}

.sidebar-section {
  margin-bottom: 6px;
}

.sidebar-section:not(:last-child) {
  border-bottom: 1px solid var(--sidebar-border);
  padding-bottom: 6px;
}

.sidebar-section-header {
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  margin-bottom: 2px;
  padding: 6px 10px;
  font-weight: 600;
  display: flex;
}

.sidebar-section-header:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.sidebar-section.open .sidebar-section-header {
  color: var(--sidebar-text);
}

.sidebar-section-chevron {
  transition: transform var(--duration-fast) ease;
  opacity: .6;
  margin-left: auto;
}

.sidebar-section.open .sidebar-section-chevron {
  opacity: 1;
  transform: rotate(180deg);
}

.sidebar-section-content {
  padding-left: 2px;
}

.sidebar-section-content .sidebar-group {
  margin-bottom: 1px;
}

.sidebar-section-content .sidebar-group-header {
  padding: 4px 10px;
  font-size: 10px;
}

.sidebar-section-content .sidebar-group-items {
  padding-left: 2px;
}

.sidebar-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.sidebar-toggle {
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  background: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sidebar-toggle:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.sidebar-collapsed {
  width: 52px;
  padding: 12px 6px;
}

.sidebar-collapsed .sidebar-header {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  margin-bottom: 0;
  padding: 2px;
  font-size: 12px;
}

.sidebar-collapsed .sidebar-toggle {
  width: 28px;
  height: 28px;
}

.sidebar-collapsed .sidebar-section-header {
  justify-content: center;
  margin-bottom: 6px;
  padding: 6px;
}

.sidebar-collapsed .sidebar-section-header span, .sidebar-collapsed .sidebar-section-chevron {
  display: none;
}

.sidebar-collapsed .sidebar-section-content {
  padding-left: 0;
}

.sidebar-collapsed .sidebar-group-collapsed {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.sidebar-collapsed .sidebar-link-collapsed {
  width: 32px;
  height: 32px;
  color: var(--sidebar-text-muted);
  transition: all var(--duration-fast) ease;
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.sidebar-collapsed .sidebar-link-collapsed:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

.sidebar-collapsed .sidebar-link-collapsed.active {
  background: var(--sidebar-active-bg);
  color: var(--primary);
}

.sidebar-collapsed .sidebar-bottom {
  padding-top: 10px;
}

.sidebar-collapsed .sidebar-user {
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.sidebar-collapsed .sidebar-user-info {
  display: none;
}

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

.main-content {
  background: var(--bg-primary);
  min-height: 100vh;
  transition: background-color var(--duration-normal) ease;
  flex: 1;
  margin-left: 200px;
  padding: 16px 24px;
}

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

.page-header-left {
  flex: 1;
}

.page-header-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.page-title {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin-bottom: 0;
  font-weight: 600;
}

.page-subtitle {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  margin-bottom: 0;
  line-height: 1.4;
}

.section-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.section-spaced {
  margin-top: var(--spacing-sm);
}

.two-col, .detail-grid {
  gap: var(--spacing-md);
  grid-template-columns: 2fr 1fr;
  display: grid;
}

.page-breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  display: flex;
}

.page-breadcrumb-link {
  color: var(--text-tertiary);
  text-decoration: none;
}

.page-breadcrumb-link:hover {
  color: var(--text-primary);
}

.page-breadcrumb-sep {
  color: var(--gray-300);
  margin: 0 2px;
}

.page-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

.back-link {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: 6px;
  display: inline-block;
}

.page-container {
  max-width: 1200px;
  padding: var(--spacing-md);
  margin: 0 auto;
}

.table-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table {
  border-collapse: collapse;
  width: 100%;
}

.data-table th, .data-table td {
  padding: 6px var(--spacing-sm);
  text-align: left;
}

.data-table th {
  background: var(--gray-50);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-tertiary);
}

.data-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--gray-100);
}

.data-table td {
  font-size: var(--font-size-sm);
}

.data-table a {
  color: var(--primary);
  text-decoration: none;
}

.data-table a:hover {
  text-decoration: underline;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  max-width: 600px;
}

.form-group label {
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
}

.checkbox-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  display: grid;
}

.checkbox-label {
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  display: flex;
}

.checkbox-label input {
  width: auto;
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.status-message {
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  display: flex;
}

.status-message-success {
  color: var(--green-600);
}

.status-message-error {
  color: var(--red-600);
}

.status-message-warning {
  color: var(--orange-500);
}

.status-message-info {
  color: var(--blue-600);
}

.steps-list {
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-sm);
  margin: 0;
}

.steps-list li {
  margin-bottom: var(--spacing-xs);
}

.steps-list a {
  color: var(--primary);
  text-decoration: none;
}

.steps-list a:hover {
  text-decoration: underline;
}

.step-indicator {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.step-item {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-tertiary);
  display: flex;
}

.step-item.active {
  color: var(--text-primary);
}

.step-item.completed .step-circle {
  background: var(--green-600);
  color: var(--white);
}

.step-circle {
  background: var(--gray-200);
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.active .step-circle {
  background: var(--black);
  color: var(--white);
}

.step-label {
  font-size: var(--font-size-sm);
}

.step-line {
  background: var(--gray-200);
  width: 40px;
  height: 2px;
  margin: 0 var(--spacing-xs);
}

.form-actions {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  justify-content: flex-end;
  display: flex;
}

.color-input-group {
  gap: var(--spacing-sm);
  align-items: center;
  display: flex;
}

.color-input-group input[type="color"] {
  border: 1px solid var(--gray-300);
  cursor: pointer;
  width: 40px;
  height: 32px;
  padding: 0;
}

.color-input-group input[type="text"] {
  flex: 1;
}

.test-preview {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.test-preview p {
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
}

.color-swatch {
  border-radius: var(--radius-sm);
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: var(--spacing-xs);
  display: inline-block;
}

.editor-wrapper-subscriber {
  min-height: 100vh;
  margin: 0;
}

.editor-wrapper-subscriber .editor-layout {
  width: auto;
  margin: 0;
  position: fixed;
  inset: 52px 0 0;
}

.editor-wrapper-subscriber .editor-header {
  margin-left: 0;
}

.editor-wrapper-subscriber .editor-header-actions {
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  display: flex;
}

.subscriber-layout-editor-route.subscriber-layout-sidebar-closed .editor-wrapper-subscriber .editor-layout {
  left: 56px;
}

.subscriber-layout-editor-route.subscriber-layout-sidebar-closed .editor-wrapper-subscriber .editor-header {
  margin-left: 56px;
}

.editor-component-mode .canvas-add-block-btn, .editor-component-mode .canvas-add-between {
  display: none !important;
}

.subscriber-layout-editor-route.subscriber-layout-sidebar-open .editor-wrapper-subscriber .editor-layout {
  left: 240px;
}

.subscriber-layout-editor-route.subscriber-layout-sidebar-open .editor-wrapper-subscriber .editor-header {
  margin-left: 240px;
}

.editor-layout {
  grid-template-columns: 48px auto 1fr auto;
  gap: 0;
  display: grid;
  position: fixed;
  inset: 52px 0 0;
  overflow: hidden;
}

.editor-layout > * {
  min-height: 0;
}

.editor-layout.sidebar-collapsed {
  grid-template-columns: 48px 0 1fr auto;
}

.editor-layout.no-nav-rail {
  grid-template-columns: auto 1fr auto;
  left: 0;
}

.editor-layout.no-nav-rail.sidebar-collapsed {
  grid-template-columns: 0 1fr auto;
}

.editor-nav-rail {
  background: var(--gray-900);
  border-right: 1px solid var(--gray-800);
  width: 48px;
  padding: var(--spacing-sm) 0;
  align-items: center;
  gap: var(--spacing-xs);
  z-index: 30;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: visible;
}

.editor-nav-rail-item {
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  color: var(--gray-400);
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: relative;
  overflow: visible;
}

.editor-nav-rail-item:hover {
  background: var(--gray-800);
  color: var(--white);
}

.editor-nav-rail-item.active {
  background: var(--primary);
  color: var(--white);
}

.editor-nav-rail-item svg {
  width: 20px;
  height: 20px;
}

.editor-nav-rail-item[data-tooltip]:after {
  content: attr(data-tooltip);
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  background: #0f172af0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: opacity .16s, transform .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%)translateX(-4px);
  box-shadow: 0 10px 24px #0f172a29;
}

.editor-nav-rail-item[data-tooltip]:before {
  content: "";
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  background: #0f172af0;
  width: 8px;
  height: 8px;
  transition: opacity .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%)rotate(45deg);
}

.editor-nav-rail-item[data-tooltip]:hover:after, .editor-nav-rail-item[data-tooltip]:hover:before, .editor-nav-rail-item[data-tooltip]:focus-visible:after, .editor-nav-rail-item[data-tooltip]:focus-visible:before {
  opacity: 1;
}

.editor-nav-rail-item[data-tooltip]:hover:after, .editor-nav-rail-item[data-tooltip]:focus-visible:after {
  transform: translateY(-50%)translateX(0);
}

.editor-sidebar-panel {
  border-right: 1px solid var(--border-light);
  background: var(--bg-elevated);
  flex-direction: column;
  width: clamp(252px, 21vw, 360px);
  height: 100%;
  min-height: 0;
  display: flex;
}

@media (max-width: 1024px) {
  .editor-sidebar-panel {
    width: 252px;
  }
}

.editor-sidebar-panel.collapsed {
  border-right: none;
}

.editor-sidebar-panel .collapsible-panel-content {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: visible;
}

.editor-sidebar-panel .editor-sidebar {
  flex: 1;
  min-height: 0;
}

.editor-canvas {
  background: var(--gray-200);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  position: relative;
  overflow: visible auto;
}

.editor-canvas::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-canvas::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-canvas::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-canvas::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-canvas-inner {
  max-width: 100%;
  box-shadow: var(--shadow-xl);
  color: #111827;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: 36px;
  display: flex;
  position: relative;
  overflow: visible;
  background: #fff !important;
}

.canvas-block-wrapper.footer-wrapper {
  margin-top: 0;
}

.canvas-block-wrapper {
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  margin: 0;
  padding: 0;
}

.canvas-block {
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: 2px solid #0000;
  min-height: 20px;
  margin: 0;
  padding: 0;
  position: relative;
}

.canvas-block:hover {
  border-color: var(--gray-300);
}

.canvas-block.selected {
  border-color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black);
}

.canvas-block.dragging {
  opacity: .5;
  transform: scale(.98);
}

.canvas-block-actions {
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out-quart);
  pointer-events: none;
  z-index: 10;
  flex-direction: row;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
}

.canvas-block:hover .canvas-block-actions, .canvas-block.selected .canvas-block-actions {
  opacity: 1;
  pointer-events: auto;
}

.canvas-block-action {
  background: var(--white);
  border: 1px solid var(--gray-300);
  cursor: pointer;
  width: 26px;
  height: 26px;
  color: var(--gray-600);
  transition: all var(--duration-fast) var(--ease-out-quart);
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 2px 6px #0000001f;
}

.canvas-block-action:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: scale(1.1);
}

.canvas-block-action:active {
  transform: scale(.95);
}

.canvas-block-action.delete:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.canvas-drop-zone {
  height: var(--spacing-xs);
  transition: all var(--duration-normal) ease;
  background: none;
  margin: 0;
  position: relative;
}

.editor-canvas.is-dragging .canvas-drop-zone {
  height: var(--spacing-2xl);
  background: var(--gray-100);
  border: 2px dashed #0000;
}

.editor-canvas.is-dragging .canvas-drop-zone:hover, .canvas-drop-zone.active {
  background: var(--gray-100);
  border: 2px dashed var(--black);
  height: 60px;
}

.canvas-drop-zone.active:after, .editor-canvas.is-dragging .canvas-drop-zone:hover:after {
  content: "Soltar aquí";
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas-empty {
  height: 100%;
  min-height: 500px;
  color: var(--gray-400);
  text-align: center;
  background: linear-gradient(#00000005 0%, #0000 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  display: flex;
}

.canvas-empty-icon {
  font-size: var(--font-size-8xl);
  opacity: .5;
  margin-bottom: 20px;
}

.canvas-empty-title {
  color: var(--gray-600);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.canvas-empty-text {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  max-width: 300px;
  line-height: 1.5;
}

:is(.canvas-block:has(.block-footer-rendered), .canvas-block:has(.block-footer), .canvas-block:has(.block-header), .canvas-block:has(.block-header-masthead), .canvas-block:has(.block-hero), .canvas-block:has(.block-top-header), .canvas-block:has(.block-preheader), .canvas-block:has(.block-image), .canvas-block:has(.block-unsubscribe)) {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.canvas-block:has(.block-footer-rendered):hover, .canvas-block:has(.block-footer-rendered).selected, .canvas-block:has(.block-footer):hover, .canvas-block:has(.block-footer).selected, .canvas-block:has(.block-header):hover, .canvas-block:has(.block-header).selected, .canvas-block:has(.block-header-masthead):hover, .canvas-block:has(.block-header-masthead).selected, .canvas-block:has(.block-hero):hover, .canvas-block:has(.block-hero).selected, .canvas-block:has(.block-top-header):hover, .canvas-block:has(.block-top-header).selected, .canvas-block:has(.block-preheader):hover, .canvas-block:has(.block-preheader).selected, .canvas-block:has(.block-image):hover, .canvas-block:has(.block-image).selected, .canvas-block:has(.block-unsubscribe):hover, .canvas-block:has(.block-unsubscribe).selected) {
  outline: 2px solid var(--black);
  outline-offset: -2px;
  box-shadow: none !important;
  border: none !important;
}

.canvas-block:has(.block-section) {
  position: relative;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.canvas-block:has(.block-section):before {
  content: "";
  pointer-events: none;
  z-index: 1;
  border: 2px solid #14b8a6;
  position: absolute;
  inset: 0;
}

:is(.canvas-block:has(.block-section):hover, .canvas-block:has(.block-section).selected) {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

:is(.canvas-block-wrapper:has(.block-footer-rendered) .canvas-drop-zone, .canvas-block-wrapper:has(.block-footer) .canvas-drop-zone) {
  display: none;
}

:is(.canvas-block-wrapper:has(.block-top-header) .canvas-drop-zone, .canvas-block-wrapper:has(.block-preheader) .canvas-drop-zone) {
  height: 0;
}

.platform-footer-wrapper {
  width: 100%;
}

.platform-footer {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  color: var(--gray-500);
  background: var(--gray-100);
  border-top: 1px solid var(--gray-300);
  opacity: .7;
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.platform-footer-separator {
  background: var(--gray-300);
  height: 1px;
  margin-bottom: var(--spacing-md);
}

.platform-footer-branding {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: 11px;
  display: flex;
}

.platform-footer-branding strong {
  color: var(--gray-600);
  font-weight: 600;
}

.platform-footer-logo {
  opacity: .8;
  width: auto;
  height: 16px;
}

.platform-footer-address {
  margin-bottom: var(--spacing-sm);
  color: var(--gray-500);
}

.platform-footer-links {
  margin-bottom: var(--spacing-sm);
}

.platform-footer-links a {
  color: var(--gray-600);
  transition: color var(--duration-fast) ease;
  text-decoration: underline;
}

.platform-footer-links a:hover {
  color: var(--black);
}

.platform-footer-divider {
  margin: 0 var(--spacing-xs);
  color: var(--gray-300);
}

.platform-footer-disclaimer {
  color: var(--gray-400);
  max-width: 400px;
  margin: 0 auto;
  font-size: 11px;
}

.block-wrapper {
  margin: 0;
  padding: 0;
  position: relative;
}

.block-content {
  margin: 0;
  padding: 0;
}

.block-drop-zone {
  height: 0;
  transition: height var(--duration-normal) ease;
  margin: 0;
  padding: 0;
}

.block-toolbar {
  background: var(--black);
  height: 28px;
  color: var(--white);
  z-index: 10;
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  display: flex;
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
}

.block-type-label {
  text-transform: capitalize;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  display: flex;
}

.block-actions {
  align-items: center;
  gap: 2px;
  display: flex;
}

.block-action {
  width: 24px;
  height: 24px;
  color: var(--white);
  cursor: pointer;
  opacity: .8;
  transition: opacity var(--duration-fast) ease;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-action:hover {
  opacity: 1;
}

.block-action:disabled {
  opacity: .3;
  cursor: default;
}

.block-action.delete:hover {
  color: #f87171;
}

.resize-handles {
  pointer-events: none;
  opacity: 1;
  transition: opacity .15s ease-out;
  position: absolute;
  inset: 0;
}

.resize-handle {
  pointer-events: auto;
  background: var(--primary);
  border: 2px solid var(--white);
  z-index: 10;
  transition: transform .15s ease-out;
  position: absolute;
  box-shadow: 0 1px 3px #0003;
}

.resize-handle:hover {
  transform: scale(1.2);
}

.resize-handle:active {
  transform: scale(1.1);
}

.resize-handle--left, .resize-handle--right {
  border-radius: var(--radius-xs);
  cursor: ew-resize;
  width: 6px;
  height: 28px;
  top: 50%;
  transform: translateY(-50%);
}

.resize-handle--left {
  left: -4px;
}

.resize-handle--left:hover {
  transform: translateY(-50%)scale(1.2);
}

.resize-handle--right {
  right: -4px;
}

.resize-handle--right:hover {
  transform: translateY(-50%)scale(1.2);
}

.resize-handle--bottom {
  border-radius: var(--radius-xs);
  cursor: ns-resize;
  width: 28px;
  height: 6px;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.resize-handle--bottom:hover {
  transform: translateX(-50%)scale(1.2);
}

body.is-resizing {
  cursor: ew-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.is-resizing * {
  cursor: inherit !important;
}

body.is-resizing-vertical {
  cursor: ns-resize !important;
}

.resizable-block {
  margin: 0 auto;
  transition: width 50ms ease-out;
  position: relative;
}

.resizable-block.resizing {
  transition: none;
}

.alignment-guides {
  pointer-events: none;
  z-index: 100;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.alignment-guide {
  background: var(--primary);
  position: absolute;
}

.alignment-guide--vertical {
  width: 1px;
  top: 0;
  bottom: 0;
  left: var(--guide-pos);
}

.alignment-guide--vertical:before, .alignment-guide--vertical:after {
  content: "";
  background: var(--primary);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  left: -3px;
}

.alignment-guide--vertical:before {
  top: 0;
}

.alignment-guide--vertical:after {
  bottom: 0;
}

.alignment-guide--horizontal {
  height: 1px;
  left: 0;
  right: 0;
  top: var(--guide-pos);
}

.alignment-guide--horizontal:before, .alignment-guide--horizontal:after {
  content: "";
  background: var(--primary);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: -3px;
}

.alignment-guide--horizontal:before {
  left: 0;
}

.alignment-guide--horizontal:after {
  right: 0;
}

.alignment-guide--center {
  background: var(--secondary);
  opacity: .3;
}

.alignment-guide--center:before, .alignment-guide--center:after {
  background: var(--secondary);
}

.alignment-guide-label {
  color: var(--primary);
  background: var(--white);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  padding: 2px 6px;
  font-size: 10px;
  position: absolute;
  box-shadow: 0 1px 3px #0000001a;
}

.alignment-guide--vertical .alignment-guide-label {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.alignment-guide--horizontal .alignment-guide-label {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.alignment-guide--center .alignment-guide-label {
  color: var(--secondary);
}

.canvas-floating-controls {
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  gap: var(--spacing-xs);
  z-index: 50;
  display: flex;
  position: absolute;
}

.canvas-control-btn {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all .15s ease-out;
  display: flex;
  box-shadow: 0 2px 4px #00000014;
}

.canvas-control-btn:hover {
  background: var(--gray-50);
  color: var(--text-primary);
  box-shadow: 0 4px 8px #0000001f;
}

.canvas-control-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.canvas-control-btn.active:hover {
  background: var(--primary-dark);
}

.canvas-control-btn svg {
  width: 18px;
  height: 18px;
}

.canvas-control-tooltip {
  background: var(--gray-800);
  color: var(--white);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  margin-bottom: 4px;
  padding: 4px 8px;
  font-size: 11px;
  transition: opacity .15s ease-out;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-control-btn:hover .canvas-control-tooltip {
  opacity: 1;
}

.floating-toolbar {
  z-index: 100;
  background: var(--gray-900);
  border-radius: var(--radius-md);
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  animation: .15s toolbar-fade-in;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px #00000040;
}

.floating-toolbar:after {
  content: "";
  border-left: 6px solid #0000;
  border-right: 6px solid #0000;
  border-top: 6px solid var(--gray-900);
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes toolbar-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%)translateY(0);
  }
}

.floating-toolbar-btn {
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  color: var(--gray-300);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .1s;
  display: flex;
}

.floating-toolbar-btn:hover {
  background: var(--gray-700);
  color: var(--white);
}

.floating-toolbar-btn:active {
  background: var(--gray-600);
}

.floating-toolbar-sep {
  background: var(--gray-700);
  width: 1px;
  height: 18px;
  margin: 0 2px;
}

.floating-toolbar-link {
  align-items: center;
  gap: 4px;
  display: flex;
}

.floating-toolbar-link input {
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: var(--radius-sm);
  width: 180px;
  color: var(--white);
  outline: none;
  padding: 4px 8px;
  font-size: 12px;
}

.floating-toolbar-link input:focus {
  border-color: var(--gray-400);
}

.floating-toolbar-link input::placeholder {
  color: var(--gray-500);
}

.floating-toolbar-link button {
  width: 24px;
  height: 24px;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.floating-toolbar-link button:hover {
  color: var(--white);
  background: var(--gray-700);
}

.editor-header {
  z-index: 100;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  height: 48px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 768px) {
  .editor-header {
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-xs);
  }
}

.editor-header .editor-header-input {
  width: 170px;
  min-width: 120px;
  max-width: 170px;
  height: 32px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-800);
  outline: none;
  flex-shrink: 0;
  padding: 0 10px;
}

.editor-header .editor-header-input:focus {
  border-color: var(--gray-400);
}

@media (max-width: 768px) {
  .editor-header .editor-header-input {
    width: 100px;
    min-width: 80px;
    max-width: 100px;
  }

  .editor-header-subject {
    display: none;
  }
}

.editor-site-badge {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  display: inline-flex;
}

@media (max-width: 768px) {
  .editor-site-badge {
    display: none;
  }
}

.editor-header-spacer {
  flex: 1;
}

.editor-header-group, .eh-group {
  align-items: center;
  gap: 2px;
  display: flex;
}

.editor-saved-message {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

@media (max-width: 1024px) {
  .hide-mobile {
    display: none;
  }
}

.eh-icon-btn {
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.eh-icon-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
  border-color: var(--gray-200);
}

.eh-icon-btn:disabled {
  opacity: .3;
  cursor: default;
}

.eh-icon-btn:disabled:hover {
  background: none;
  border-color: #0000;
}

.eh-icon-btn--active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.eh-icon-btn--active:hover {
  background: var(--gray-800);
  border-color: var(--gray-800);
  color: var(--white);
}

.eh-btn {
  height: 32px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.eh-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

.eh-btn:disabled {
  opacity: .5;
  cursor: default;
}

.eh-btn--test {
  color: var(--gray-600);
}

.eh-btn--save {
  color: var(--gray-800);
  font-weight: 600;
}

.eh-btn--send {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  font-weight: 600;
}

.eh-btn--send:hover {
  background: var(--gray-800);
  border-color: var(--gray-800);
  color: var(--white);
}

.editor-status {
  align-items: center;
  gap: var(--spacing-sm-xs);
  padding: var(--spacing-sm-xs) var(--spacing-sm-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--white);
  background: #ffffff1a;
  display: flex;
}

.editor-status-dot {
  width: var(--spacing-sm-xs);
  height: var(--spacing-sm-xs);
  background: var(--success);
  border-radius: 50%;
}

.editor-btn-secondary {
  align-items: center;
  gap: var(--spacing-sm-xs);
  padding: var(--spacing-sm-xs) var(--spacing-sm-md);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  background: #ffffff1a;
  border: none;
  font-weight: 500;
  transition: background .15s;
  display: flex;
}

.editor-btn-secondary:hover {
  background: #fff3;
}

.editor-btn-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.editor-btn-secondary svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .editor-btn-secondary {
    padding: var(--spacing-sm-xs);
    gap: 0;
    font-size: 0;
  }

  .editor-btn-secondary svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}

.editor-btn-primary {
  align-items: center;
  gap: var(--spacing-sm-xs);
  padding: var(--spacing-sm-xs) var(--spacing-md-sm);
  background: var(--primary);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  font-weight: 600;
  transition: background .15s;
  display: flex;
}

.editor-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.editor-btn-primary:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.editor-btn-primary svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .editor-btn-primary {
    padding: var(--spacing-sm-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 768px) {
  .editor-btn-primary {
    padding: var(--spacing-sm-xs);
    gap: 0;
    font-size: 0;
  }

  .editor-btn-primary svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}

.editor-actions-panel {
  gap: var(--spacing-sm-xs);
  padding: var(--spacing-md-sm);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
}

.editor-action-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-sm-xs);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.editor-action-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
}

.editor-action-btn span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.editor-action-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
}

.editor-action-btn.primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.editor-action-btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.editor-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.settings-panel {
  padding: 0;
}

.subject-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-sm);
  display: block;
}

.personalization-section {
  margin-top: var(--spacing-lg);
}

.personalization-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.personalization-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.personalization-settings-link, .personalization-link {
  font-size: var(--font-size-sm);
  color: var(--primary);
  text-decoration: none;
}

.personalization-settings-link:hover, .personalization-link:hover {
  text-decoration: underline;
}

.personalization-badge {
  font-size: var(--font-size-2xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  background: var(--primary);
  border-radius: var(--radius-sm);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.personalization-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md-lg) 0;
  line-height: 1.5;
}

.property-links-list {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.property-link-item {
  padding: var(--spacing-sm-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.property-button-group-vertical {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.property-btn-text {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md-sm);
  font-size: var(--font-size-md);
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .15s;
}

.property-btn-text:hover {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

.properties-title {
  font-size: var(--font-size-base);
  color: var(--black);
  font-weight: 600;
}

.properties-block-type {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  display: flex;
}

.properties-block-icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  justify-content: center;
  align-items: center;
  display: flex;
}

.property-group {
  margin-bottom: 8px;
}

.property-label {
  color: var(--gray-600);
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.property-input {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  transition: border-color .15s;
}

.property-input:focus {
  border-color: var(--gray-400);
  outline: none;
}

.property-textarea {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  resize: vertical;
  width: 100%;
  min-height: 60px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.property-textarea:focus {
  border-color: var(--gray-400);
  outline: none;
}

.property-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.property-select:focus {
  border-color: var(--gray-400);
  outline: none;
}

.property-row {
  gap: var(--spacing-md-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.property-label-row {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.property-label-row .property-label {
  margin-bottom: 0;
}

.link-styles-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.link-styles-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.link-styles-btn.linked {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--gray-800);
}

.property-section-minimal {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.property-row-inline {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 28px;
  display: flex;
}

.property-label-inline {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  flex-shrink: 0;
  min-width: 50px;
}

.property-select-inline {
  max-width: 140px;
  font-size: var(--font-size-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  flex: 1;
  padding: 4px 8px;
}

.property-toggle-inline {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  overflow: hidden;
}

.property-toggle-inline button {
  font-size: var(--font-size-xs);
  background: var(--white);
  cursor: pointer;
  color: var(--gray-500);
  border: none;
  padding: 4px 10px;
}

.property-toggle-inline button.active {
  background: var(--gray-900);
  color: var(--white);
}

.property-toggle-inline button:not(:last-child) {
  border-right: 1px solid var(--gray-200);
}

.property-range-inline {
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
  max-width: 140px;
  display: flex;
}

.property-range-inline input[type="range"] {
  height: 4px;
  accent-color: var(--gray-900);
  flex: 1;
}

.property-range-inline span {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-align: right;
  min-width: 32px;
}

.property-checks-inline {
  gap: var(--spacing-md);
  display: flex;
}

.property-checks-inline label {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: flex;
}

.property-checks-inline label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gray-900);
}

.property-image-input {
  flex: 1;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  display: flex;
}

.property-image-input input[type="url"] {
  font-size: var(--font-size-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
}

.property-upload-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: var(--gray-600);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.property-upload-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.property-upload-row {
  gap: var(--spacing-xs);
  display: flex;
}

.property-upload-row .property-btn, .property-upload-row .property-upload-btn {
  width: auto;
  height: auto;
  font-size: var(--font-size-xs);
  cursor: pointer;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  font-weight: 500;
  display: flex;
}

.property-upload-row .property-btn:hover, .property-upload-row .property-upload-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.image-style-sections {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.style-section-group {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.style-section-label {
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
}

.property-color-sm {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 28px;
  height: 22px;
  padding: 2px;
}

.property-number-input {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  align-items: center;
  display: flex;
  overflow: hidden;
}

.property-number-input button {
  background: var(--gray-50);
  cursor: pointer;
  width: 22px;
  height: 22px;
  color: var(--gray-500);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.property-number-input button:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.property-number-input input {
  text-align: center;
  width: 36px;
  height: 22px;
  font-size: var(--font-size-xs);
  border: none;
}

.property-number-input input:focus {
  outline: none;
}

.property-number-input.sm input {
  width: 40px;
}

.property-toggle-sm {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 28px;
  height: 22px;
  color: var(--gray-500);
  justify-content: center;
  align-items: center;
  display: flex;
}

.property-toggle-sm.active {
  background: var(--gray-800);
  border-color: var(--gray-800);
  color: var(--white);
}

.property-padding-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
  display: grid;
}

.padding-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.padding-label {
  color: var(--gray-500);
  min-width: 32px;
  font-size: 10px;
}

.style-section {
  border-bottom: 1px solid var(--gray-200);
}

.style-section:last-child {
  border-bottom: none;
}

.style-section-header {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--white);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border: none;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: background-color .15s;
  display: flex;
}

.style-section-header:hover {
  background: var(--gray-50);
}

.style-section-title {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.style-section-icon {
  color: var(--gray-400);
  transition: transform .2s;
}

.style-section.open .style-section-icon {
  transform: rotate(180deg);
}

.style-section-content {
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.background-colors-grid {
  gap: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.background-color-item {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.background-color-label {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  font-weight: 500;
}

.newsletter-styles-panel {
  flex-direction: column;
  display: flex;
}

.selected-block-section {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.selected-block-header {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
}

.selected-block-header svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.selected-block-content {
  padding: var(--spacing-md);
}

.selected-block-content .property-group {
  margin-bottom: var(--spacing-md);
}

.selected-block-content .property-group:last-child {
  margin-bottom: 0;
}

.selected-block-content .property-label {
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.selected-block-content .property-divider {
  margin: var(--spacing-md) 0;
  background: var(--gray-200);
}

.email-design-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.email-design-header h3 {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
  font-weight: 600;
}

.email-design-header svg {
  color: var(--gray-400);
}

.mc-panel {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.mc-type-tabs {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  padding: 2px;
  display: flex;
}

.mc-type-tab {
  color: var(--gray-600);
  cursor: pointer;
  border-radius: var(--radius-xs);
  background: none;
  border: none;
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
}

.mc-type-tab:hover {
  color: var(--gray-800);
}

.mc-type-tab.active {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: 0 1px 2px #0000000d;
}

.mc-section-header {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--spacing-sm);
  padding: 8px 0;
  font-size: 10px;
  font-weight: 600;
}

.mc-group {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
}

.mc-group:last-child {
  border-bottom: none;
}

.mc-group-title {
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
  font-size: 11px;
  font-weight: 500;
}

.mc-row {
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.mc-row:last-child {
  margin-bottom: 0;
}

.mc-row-between {
  justify-content: space-between;
}

.mc-select {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-800);
  cursor: pointer;
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
}

.mc-select:focus {
  border-color: var(--primary);
  outline: none;
}

.mc-input {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
}

.mc-input:focus {
  border-color: var(--primary);
  outline: none;
}

.mc-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.mc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.mc-input-icon {
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 6px 8px;
  display: flex;
}

.mc-input-icon svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.mc-input-icon .mc-input {
  border: none;
  flex: 1;
  padding: 0;
}

.mc-input-icon .mc-input:focus {
  outline: none;
}

.mc-checkbox {
  color: var(--gray-600);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  display: flex;
}

.mc-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.mc-input-sm {
  flex: 0 0 60px;
  width: 60px;
}

.mc-label {
  color: var(--gray-600);
  min-width: 40px;
  font-size: 11px;
}

.mc-unit {
  color: var(--gray-500);
  font-size: 11px;
}

.mc-input-label {
  color: var(--gray-400);
  font-size: 10px;
}

.mc-range {
  appearance: none;
  background: var(--gray-200);
  cursor: pointer;
  border-radius: 2px;
  flex: 1;
  height: 4px;
}

.mc-range::-webkit-slider-thumb {
  appearance: none;
  background: var(--primary);
  cursor: pointer;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.mc-range::-moz-range-thumb {
  background: var(--primary);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.mc-range-value {
  color: var(--gray-600);
  text-align: right;
  min-width: 40px;
  font-size: 11px;
}

.mc-btn-group {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: flex;
  overflow: hidden;
}

.mc-btn-group.mc-btn-group-full {
  width: 100%;
}

.mc-btn-group.mc-btn-group-full .mc-btn {
  flex: 1;
  width: auto;
}

.mc-btn {
  border: none;
  border-right: 1px solid var(--gray-200);
  width: 28px;
  height: 28px;
  color: var(--gray-600);
  cursor: pointer;
  background: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.mc-btn:last-child {
  border-right: none;
}

.mc-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.mc-btn.active {
  background: var(--primary);
  color: var(--white);
}

.mc-btn.italic {
  font-style: italic;
}

.mc-row-btn {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  color: var(--gray-700);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  font-size: 12px;
  transition: all .15s;
  display: flex;
}

.mc-row-btn:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.mc-row-btn-right {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.mc-row-btn-right svg {
  color: var(--gray-400);
}

.mc-color-preview {
  border: 1px solid var(--gray-300);
  border-radius: 2px;
  width: 16px;
  height: 16px;
}

.mc-direction-btns {
  gap: var(--spacing-xs);
  display: flex;
}

.mc-direction-btn {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 11px;
  transition: all .15s;
  display: flex;
}

.mc-direction-btn:hover {
  border-color: var(--gray-400);
}

.mc-direction-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: #2563eb1a;
}

.mc-direction-btn svg {
  flex-shrink: 0;
}

.mc-row .color-picker-swatches.compact .color-picker-trigger {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  gap: 0;
  width: 28px;
  height: 28px;
  padding: 4px;
}

.mc-row .color-picker-swatches.compact .color-picker-preview {
  border-radius: 2px;
  width: 100%;
  height: 100%;
}

.mc-row .color-picker-swatches.compact svg {
  display: none;
}

.layouts-palette {
  padding: 0;
}

.layouts-section-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.layouts-section-header h4 {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  margin: 0;
  font-weight: 600;
}

.save-structure-btn {
  color: var(--white);
  background: var(--black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: opacity .15s;
  display: flex;
}

.save-structure-btn:hover:not(:disabled) {
  opacity: .85;
}

.save-structure-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.layouts-loading {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  padding: 16px;
}

.layouts-empty {
  text-align: center;
  color: var(--gray-400);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  display: flex;
}

.layouts-empty p {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.layouts-empty-hint {
  color: var(--gray-400);
  margin-top: 0;
  font-size: 11px;
}

.layouts-divider {
  background: var(--gray-200);
  height: 1px;
  margin: 16px 0;
}

.layouts-intro {
  margin-bottom: 16px;
}

.layouts-intro p {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.layout-template-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  transition: all .15s;
  display: flex;
}

.layout-template-item:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 4px #0000000f;
}

.layout-template-name {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 500;
}

.saved-structures-grid {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  display: flex;
}

.saved-structure-item {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 10px 12px;
  transition: all .15s;
  display: flex;
}

.saved-structure-item:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 4px #0000000f;
}

.saved-structure-item:hover .saved-structure-actions {
  opacity: 1;
}

.saved-structure-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.saved-structure-name {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.saved-structure-desc {
  color: var(--gray-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}

.saved-structure-meta {
  color: var(--gray-400);
  font-size: 10px;
}

.saved-structure-actions {
  opacity: 0;
  align-items: center;
  gap: 2px;
  transition: opacity .15s;
  display: flex;
}

.saved-structure-rename, .saved-structure-delete {
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all .15s;
  display: flex;
}

.saved-structure-rename:hover {
  color: var(--primary);
  background: var(--gray-100);
}

.saved-structure-delete:hover {
  color: var(--primary);
  background: #dc262614;
}

.structure-save-form {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  display: flex;
}

.structure-save-input, .structure-save-textarea {
  width: 100%;
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  resize: none;
  padding: 8px 10px;
  font-family: inherit;
}

.structure-save-input:focus, .structure-save-textarea:focus {
  border-color: var(--gray-400);
  outline: none;
}

.structure-save-textarea {
  min-height: 48px;
}

.structure-save-confirm {
  font-size: var(--font-size-sm);
  color: var(--white);
  background: var(--black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  padding: 8px;
  font-weight: 500;
  transition: opacity .15s;
}

.structure-save-confirm:hover:not(:disabled) {
  opacity: .85;
}

.structure-save-confirm:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.layouts-grid {
  gap: var(--spacing-sm-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.layout-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 12px;
  transition: all .15s;
  display: flex;
}

.layout-item:hover {
  background: var(--bg-elevated);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.layout-preview {
  font-size: var(--font-size-4xl);
  opacity: .9;
  margin-bottom: 8px;
}

.layout-name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
}

.layouts-templates-link {
  border-top: 1px solid var(--border-light);
  margin-top: 20px;
  padding-top: 20px;
}

.layouts-templates-link .editor-btn-secondary {
  justify-content: center;
  width: 100%;
}

.block-heading {
  box-sizing: border-box;
  line-height: 1.3;
  font-size: var(--text-h1-size, var(--font-size-5xl));
  font-weight: var(--text-h1-weight, 700);
  color: var(--text-h1-color, var(--theme-text, var(--black)));
  font-family: var(--text-h1-font, var(--theme-font, inherit));
  margin: 0;
  padding: 16px 32px;
}

.block-heading.h2 {
  font-size: var(--text-h2-size, 22px);
  font-weight: var(--text-h2-weight, 600);
  color: var(--text-h2-color, var(--theme-text, var(--black)));
  font-family: var(--text-h2-font, var(--theme-font, inherit));
}

.block-heading.h3 {
  font-size: var(--text-h3-size, 20px);
  font-weight: var(--text-h3-weight, 600);
  color: var(--text-h3-color, var(--theme-text, var(--black)));
  font-family: var(--text-h3-font, var(--theme-font, inherit));
}

.block-heading.h4 {
  font-size: var(--text-h4-size, 16px);
  font-weight: var(--text-h4-weight, 600);
  color: var(--text-h4-color, var(--theme-text, var(--black)));
  font-family: var(--text-h4-font, var(--theme-font, inherit));
}

.block-text {
  font-size: var(--text-p-size, 16px);
  font-weight: var(--text-p-weight, 400);
  line-height: var(--text-p-line-height, 1.7);
  letter-spacing: var(--text-p-letter-spacing, 0);
  color: var(--text-p-color, var(--theme-text, var(--gray-700)));
  font-family: var(--text-p-font, var(--theme-font, inherit));
  white-space: pre-wrap;
  padding: 8px 32px;
}

.block-text[contenteditable] {
  outline: none;
  min-height: 24px;
}

.block-text[contenteditable]:empty:before {
  content: "Type your text here...";
  color: var(--gray-400);
}

.block-image {
  border-radius: var(--img-radius, 0);
  border: var(--img-border-width, 0) solid var(--img-border-color, transparent);
  max-width: 100%;
  height: auto;
  display: block;
}

.block-image-placeholder {
  background: var(--gray-100);
  border: 2px dashed var(--gray-300);
  text-align: center;
  color: var(--gray-500);
  font-size: var(--font-size-base);
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  border-radius: 0;
  flex-direction: column;
  margin: 0;
  padding: 48px 32px;
  transition: all .2s;
  display: flex;
}

.block-image-placeholder:hover {
  background: #0066cc0d;
  border-color: #06c;
}

.block-image-placeholder.drag-over {
  background: #0066cc1a;
  border-style: solid;
  border-color: #06c;
}

.block-image-placeholder-icon {
  opacity: .8;
  font-size: 40px;
}

.block-image-placeholder-title {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  font-weight: 500;
}

.block-image-placeholder-hint {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
}

.block-button {
  background: var(--btn-bg, var(--theme-primary, var(--black)));
  color: var(--btn-color, var(--white));
  font-size: var(--btn-font-size, var(--font-size-base));
  font-weight: var(--btn-font-weight, 600);
  font-family: var(--theme-font, inherit);
  border-radius: var(--btn-radius, 0);
  text-align: center;
  letter-spacing: .3px;
  padding: 12px 32px;
  transition: all .2s;
  display: inline-block;
}

.block-button.outline {
  border: 2px solid var(--btn-bg, var(--theme-primary));
  color: var(--btn-bg, var(--theme-primary));
  background: none;
}

.block-button.small {
  font-size: calc(var(--btn-font-size, 14px)  - 2px);
  padding: 10px 20px;
}

.block-button.large {
  font-size: calc(var(--btn-font-size, 14px)  + 2px);
  padding: 16px 40px;
}

.canvas-block:has(.block-button) {
  text-align: center;
  padding: 16px 32px;
}

.block-divider {
  height: var(--divider-thickness, 1px);
  background: var(--divider-color, var(--gray-300));
  width: var(--divider-width, 100%);
  border: none;
  max-width: calc(100% - 64px);
  margin: 16px auto;
}

.block-divider.dashed {
  border-top: var(--divider-thickness, 1px) dashed var(--divider-color, var(--gray-300));
  background: none;
  height: 0;
}

.block-divider.dotted {
  border-top: var(--divider-thickness, 1px) dotted var(--divider-color, var(--gray-300));
  background: none;
  height: 0;
}

.block-spacer {
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, #0000, #0000 4px, #00000008 4px 8px);
  height: 40px;
  margin: 0;
}

.block-hero {
  text-align: center;
  color: var(--hero-text, #fff);
  background-position: center;
  background-size: cover;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
  display: flex;
}

.block-hero-category {
  background: var(--btn-bg, #111);
  color: var(--btn-color, #fff);
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 12px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.block-hero-title {
  color: var(--hero-text, inherit);
  outline: none;
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.block-hero-title:empty:before {
  content: "Tu Titular Principal";
  opacity: .5;
}

.block-hero-subtitle {
  color: var(--hero-subtitle, #ffffffb3);
  opacity: .9;
  margin: 0 0 12px;
  font-size: 18px;
}

.block-hero-excerpt {
  color: var(--hero-subtitle, #ffffffb3);
  opacity: .9;
  max-width: 600px;
  margin: 8px 0 16px;
  font-size: 16px;
  line-height: 1.5;
}

.block-hero-button {
  background: var(--btn-bg, #fff);
  color: var(--btn-color, #111);
  cursor: default;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

.block-hero-below {
  padding: 0;
  background: none !important;
}

.block-hero-below .block-hero-image {
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 200px;
}

.block-hero-below .block-hero-content-below {
  text-align: left;
  color: var(--hero-text, #111);
  padding: 24px 32px;
}

.block-hero-below .block-hero-content-below .block-hero-subtitle {
  color: var(--hero-subtitle, #666);
}

.block-hero-split {
  flex-direction: row;
  min-height: 280px;
  padding: 0;
  display: flex;
  background: none !important;
}

.block-hero-split .block-hero-split-img {
  background-color: #e5e7eb;
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
  width: 45%;
}

.block-hero-split .block-hero-split-content {
  text-align: left;
  color: var(--hero-text, #111);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 32px;
  display: flex;
}

.block-hero-split .block-hero-split-content .block-hero-subtitle {
  color: var(--hero-subtitle, #666);
}

.block-hero-minimal {
  text-align: left;
  color: var(--hero-text, #111);
  padding: 40px 32px;
  background-image: none !important;
}

.block-hero-minimal .block-hero-subtitle {
  color: var(--hero-subtitle, #666);
}

.block-hero-minimal .block-hero-title {
  font-size: 28px;
}

.block-hero-editorial {
  text-align: center;
  color: var(--hero-text, #111);
  padding: 40px 32px;
  background-image: none !important;
}

.block-hero-editorial .block-hero-title {
  letter-spacing: -.02em;
  font-size: 42px;
  font-weight: 400;
}

.block-hero-editorial .block-hero-subtitle {
  color: var(--hero-subtitle, #666);
  font-size: 18px;
}

.canvas-block:has(.block-hero) {
  padding: 0;
}

.block-callout {
  border-left: 4px solid var(--theme-primary, #06c);
  border-radius: var(--theme-radius, 0);
  font-family: var(--text-p-font, var(--theme-font, inherit));
  color: var(--text-p-color, var(--theme-text, var(--gray-700)));
  background: #0066cc0d;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 32px;
  padding: 16px 20px;
  display: flex;
}

.block-callout-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
}

.block-callout-title {
  margin-bottom: 8px;
  font-weight: 600;
  display: block;
}

.block-callout-content {
  font-size: var(--text-p-size, 16px);
  line-height: var(--text-p-line-height, 1.6);
  outline: none;
  flex: 1;
}

.block-callout-content:empty:before {
  content: "Escribe tu mensaje aquí...";
  opacity: .5;
}

.block-callout-info {
  border-left-color: var(--info);
  background: var(--info-light);
}

.block-callout-success {
  border-left-color: var(--success);
  background: var(--success-light);
}

.block-callout-warning {
  border-left-color: var(--warning);
  background: var(--warning-light);
}

.block-callout-error {
  border-left-color: var(--error);
  background: var(--error-light);
}

.block-signature {
  gap: var(--spacing-md);
  align-items: flex-start;
  margin: 0;
  padding: 8px 32px 16px;
  display: flex;
}

.block-signature.bordered, .block-signature.block-signature-bordered {
  border-top: 2px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 16px;
}

.block-signature.modern .block-signature-image, .block-signature.modern .block-signature-photo, .block-signature.block-signature-modern .block-signature-image, .block-signature.block-signature-modern .block-signature-photo {
  border-radius: 50%;
}

.block-signature.classic .block-signature-image, .block-signature.classic .block-signature-photo, .block-signature.block-signature-classic .block-signature-image, .block-signature.block-signature-classic .block-signature-photo {
  border-radius: var(--radius-sm);
}

.block-signature-image {
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.block-signature-info {
  flex: 1;
}

.block-signature-message {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin-top: 8px;
  font-style: italic;
}

.block-signature-content {
  gap: var(--spacing-md);
  align-items: flex-start;
  display: flex;
}

.block-signature-photo {
  object-fit: cover;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.block-signature-details {
  flex: 1;
}

.block-signature-name {
  color: var(--gray-900);
  outline: none;
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.block-signature-name:empty:before {
  content: "Tu Nombre";
  opacity: .5;
}

.block-signature-title {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0 0 2px;
}

.block-signature-company {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0 0 8px;
}

.block-signature-email {
  font-size: var(--font-size-md);
  color: #06c;
  margin: 0 0 2px;
}

.block-signature-phone {
  font-size: var(--font-size-md);
  color: var(--gray-600);
  margin: 0;
}

.block-signature-social {
  gap: var(--spacing-sm);
  margin-top: 12px;
  display: flex;
}

.block-signature-social-link {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  text-transform: capitalize;
}

.block-footer-rendered {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.block-footer-rendered a {
  pointer-events: none;
}

.block-footer-rendered img {
  max-width: 100%;
  height: auto;
}

.block-footer-rendered table {
  border-collapse: collapse;
}

.block-footer {
  text-align: center;
  font-family: var(--text-p-font, inherit);
  box-sizing: border-box;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 32px;
  overflow: hidden;
}

.block-footer p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.block-footer-logo-placeholder {
  background: var(--btn-bg, var(--theme-primary, var(--info)));
  color: var(--btn-color, var(--white));
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md-sm);
  font-size: var(--font-size-sm);
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-weight: 500;
  display: inline-flex;
}

.block-footer-social {
  justify-content: center;
  gap: var(--spacing-sm, 8px);
  margin-bottom: 16px;
  display: flex;
}

.block-footer-social-react {
  cursor: pointer;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px;
  display: flex;
}

.block-footer-social-react .social-icon {
  cursor: pointer;
}

.block-footer-social-react .social-icon:hover {
  opacity: .8;
  transform: scale(1.1);
}

.block-footer-social-icon {
  background: var(--btn-bg, var(--theme-primary, var(--info)));
  width: 32px;
  height: 32px;
  color: var(--btn-color, var(--white));
  font-size: var(--font-size-xl);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: inline-flex;
}

.block-footer-social-icon svg {
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.block-footer-company {
  font-size: var(--text-p-size, 14px);
  font-weight: var(--text-p-weight, 500);
  font-family: var(--text-p-font, inherit);
  color: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0 0 8px;
}

.block-footer-tagline {
  font-size: var(--text-p-size, 13px);
  font-family: var(--text-p-font, inherit);
  color: inherit;
  opacity: .9;
  margin-bottom: 8px;
}

.block-footer-address {
  color: inherit;
  opacity: .8;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0 0 16px;
  font-size: 12px;
}

.block-footer-preferences {
  color: inherit;
  opacity: .7;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.6;
}

.block-footer-link {
  cursor: pointer;
  color: var(--theme-primary, var(--info));
  text-decoration: underline;
}

.block-footer-links {
  color: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0;
  font-size: 12px;
}

.block-footer-links span {
  cursor: pointer;
  color: var(--theme-primary, var(--info));
  text-decoration: underline;
}

.block-article {
  background: var(--theme-surface, var(--white));
  border: 1px solid var(--theme-border, var(--gray-200));
  border-radius: var(--theme-radius, 0);
  font-family: var(--theme-font, inherit);
  margin: 0 32px;
  overflow: hidden;
}

.block-article.top {
  display: block;
}

.block-article.top .block-article-image img {
  aspect-ratio: 16 / 9;
  height: 160px;
}

.block-article.left, .block-article.right {
  align-items: stretch;
  gap: var(--spacing-md);
  display: flex;
}

.block-article.left .block-article-image, .block-article.right .block-article-image {
  flex-shrink: 0;
  width: 35%;
  display: flex;
}

.block-article.left .block-article-image img, .block-article.right .block-article-image img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 140px;
  max-height: 180px;
}

.block-article.left .block-article-content, .block-article.right .block-article-content {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 14px 0;
  display: flex;
}

.block-article.left .block-article-image-placeholder, .block-article.right .block-article-image-placeholder {
  aspect-ratio: 1;
  height: auto;
  min-height: 140px;
  max-height: 180px;
}

.block-article.left .block-article-excerpt, .block-article.right .block-article-excerpt {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 12px;
  display: -webkit-box;
  overflow: hidden;
}

.block-article.left .block-article-content {
  padding-right: 16px;
}

.block-article.right .block-article-image {
  order: 2;
}

.block-article.right .block-article-content {
  order: 1;
  padding-left: 16px;
}

.block-article h3 {
  color: var(--theme-text, var(--black));
  outline: none;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.block-article h3:empty:before {
  content: "Article Title";
  opacity: .5;
}

.block-article-image img {
  object-fit: cover;
  width: 100%;
  height: auto;
  transition: object-position .4s ease-in-out;
  display: block;
}

.block-article-image-placeholder {
  background: var(--gray-100);
  width: 100%;
  height: 160px;
  color: var(--gray-400);
  font-size: var(--font-size-base);
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-article-content {
  flex-direction: column;
  padding: 16px 20px;
  display: flex;
}

.block-article-category {
  font-size: var(--font-size-xs);
  color: var(--theme-primary, #06c);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: inline-block;
}

.block-article-excerpt {
  font-size: var(--font-size-md);
  color: var(--theme-text-muted, var(--gray-600));
  margin: 0 0 12px;
  line-height: 1.5;
}

.block-article-meta {
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted, var(--gray-400));
  margin: 0 0 8px;
}

.block-article-footer-row {
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
}

.block-article-date {
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted, var(--gray-400));
}

.block-article-button {
  color: var(--theme-primary, #06c);
  font-size: var(--font-size-md);
  font-weight: 500;
  font-family: var(--theme-font, inherit);
  cursor: pointer;
  background: none;
  padding: 0;
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
}

.block-article-button:hover {
  color: var(--theme-primary-dark, #0052a3);
  text-decoration: underline;
}

.block-article-button:after {
  content: " →";
}

.block-article.layout-full {
  width: calc(100% - 64px);
}

.block-article.layout-half {
  vertical-align: top;
  width: calc(50% - 48px);
  margin: 0 16px;
}

.block-article.layout-half.top {
  display: inline-block;
}

.block-article.layout-half.left, .block-article.layout-half.right {
  display: inline-flex;
}

.block-article.layout-half .block-article-image img {
  aspect-ratio: 16 / 9;
  height: 120px;
}

.block-article.layout-half h3 {
  font-size: 16px;
}

.block-article.layout-half .block-article-excerpt {
  font-size: var(--font-size-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.block-article.layout-half .block-article-content {
  padding: 12px 16px;
}

.block-article.layout-compact {
  vertical-align: top;
  width: calc(33.333% - 40px);
  margin: 0 12px;
}

.block-article.layout-compact.top {
  display: inline-block;
}

.block-article.layout-compact.left, .block-article.layout-compact.right {
  display: inline-flex;
}

.block-article.layout-compact .block-article-image img {
  aspect-ratio: 4 / 3;
  height: 100px;
}

.block-article.layout-compact h3 {
  font-size: var(--font-size-base);
  margin-bottom: 6px;
}

.block-article.layout-compact .block-article-excerpt {
  font-size: var(--font-size-xs);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.block-article.layout-compact .block-article-content {
  padding: 10px 12px;
}

.block-article.layout-compact .block-article-button {
  font-size: var(--font-size-xs);
}

.block-article.layout-compact .block-article-meta {
  font-size: var(--font-size-2xs);
}

.block-article.style-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px #00000014;
}

.block-article.style-minimal {
  box-shadow: none;
  background: none;
  border: none;
}

.block-article.style-minimal .block-article-content {
  padding: 16px 0;
}

.block-article.style-minimal h3 {
  font-weight: 500;
}

.block-article.style-newspaper {
  background: var(--white);
  border: none;
  border-bottom: 2px solid var(--black);
  border-radius: 0;
}

.block-article.style-newspaper h3 {
  letter-spacing: -.5px;
  font-family: Georgia, Times New Roman, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.block-article.style-newspaper .block-article-category {
  background: var(--black);
  color: var(--white);
  letter-spacing: 1.5px;
  border-radius: 0;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
}

.block-article.style-newspaper .block-article-excerpt {
  font-family: Georgia, Times New Roman, serif;
  font-size: var(--font-size-md);
  color: var(--gray-700);
  line-height: 1.6;
}

.block-article.style-newspaper .block-article-meta {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-top: 1px solid var(--gray-300);
  margin-top: 10px;
  padding-top: 10px;
}

.block-article.style-newspaper .block-article-button {
  color: var(--black);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
}

.block-article.style-newspaper .block-article-button:hover {
  text-decoration: underline;
}

.block-article.style-newspaper .block-article-button:after {
  content: " →";
}

.block-article.style-newspaper.layout-half h3, .block-article.style-newspaper.layout-compact h3 {
  font-size: 18px;
}

.block-article.style-newspaper.layout-compact h3 {
  font-size: var(--font-size-base);
}

.block-article.style-newspaper.left, .block-article.style-newspaper.right {
  border-bottom: none;
  border-left: 3px solid var(--black);
  gap: var(--spacing-md);
}

.block-article.style-newspaper.left .block-article-image, .block-article.style-newspaper.right .block-article-image {
  width: 40%;
}

.block-article.style-newspaper.left .block-article-content, .block-article.style-newspaper.right .block-article-content {
  padding: 14px 0;
}

.block-article.style-newspaper.left h3, .block-article.style-newspaper.right h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.block-article.style-newspaper.left .block-article-meta, .block-article.style-newspaper.right .block-article-meta {
  border-top: none;
  margin-top: 6px;
  padding-top: 0;
}

.block-article.style-newspaper.left .block-article-content {
  padding-right: 16px;
}

.block-article.style-newspaper.right {
  border-left: none;
  border-right: 3px solid var(--black);
}

.block-article.style-newspaper.right .block-article-content {
  padding-left: 16px;
}

.block-product {
  background: var(--theme-surface, var(--white));
  border: 1px solid var(--theme-border, var(--gray-200));
  border-radius: var(--theme-radius, 8px);
  font-family: var(--theme-font, inherit);
  margin: 0 32px;
  padding: 24px 32px;
  overflow: hidden;
  box-shadow: 0 2px 8px #00000014;
}

.block-product h3 {
  color: var(--theme-text, var(--black));
  outline: none;
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
}

.block-product h3:empty:before {
  content: "Product Name";
  opacity: .5;
}

.block-product.align-left {
  text-align: left;
}

.block-product.align-left .block-product-image {
  margin-left: 0;
  margin-right: auto;
}

.block-product.align-center {
  text-align: center;
}

.block-product.align-center .block-product-image {
  margin-left: auto;
  margin-right: auto;
}

.block-product.align-right {
  text-align: right;
}

.block-product.align-right .block-product-image {
  margin-left: auto;
  margin-right: 0;
}

.block-product.style-card {
  background: var(--theme-surface, var(--white));
  border: 1px solid var(--theme-border, var(--gray-200));
  box-shadow: 0 2px 8px #00000014;
}

.block-product.style-minimal {
  box-shadow: none;
  background: none;
  border: none;
  padding: 16px 32px;
}

.block-product.style-banner {
  background: var(--theme-surface, var(--white));
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 32px;
}

.block-product.style-featured {
  background: var(--theme-primary-light, #e8f4fd);
  border: 2px solid var(--theme-primary, #06c);
  box-shadow: 0 4px 12px #0000001a;
}

.block-product.style-featured .block-product-price {
  color: var(--theme-primary, #06c);
}

.block-product.layout-vertical {
  display: block;
}

.block-product.layout-vertical .block-product-image {
  margin-bottom: 16px;
}

.block-product.layout-horizontal {
  align-items: center;
  gap: var(--spacing-lg);
  text-align: left;
  padding: 0;
  display: flex;
}

.block-product.layout-horizontal .block-product-image {
  flex-shrink: 0;
  width: 40%;
  max-width: none;
  margin: 0;
}

.block-product.layout-horizontal .block-product-image img {
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 180px;
}

.block-product.layout-horizontal .block-product-content {
  flex: 1;
  padding: 24px 24px 24px 0;
}

.block-product.layout-horizontal .block-product-image-placeholder {
  border-radius: 0;
  height: 200px;
}

.block-product.layout-compact {
  align-items: center;
  gap: var(--spacing-md);
  text-align: left;
  padding: 16px;
  display: flex;
}

.block-product.layout-compact .block-product-image {
  flex-shrink: 0;
  width: 80px;
  max-width: none;
  height: 80px;
  margin: 0;
}

.block-product.layout-compact .block-product-image img {
  object-fit: cover;
  border-radius: var(--radius-lg);
  width: 80px;
  height: 80px;
}

.block-product.layout-compact .block-product-content {
  flex: 1;
}

.block-product.layout-compact h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

.block-product.layout-compact .block-product-description {
  display: none;
}

.block-product.layout-compact .block-product-pricing {
  margin-bottom: 8px;
}

.block-product.layout-compact .block-product-price {
  font-size: 20px;
}

.block-product.layout-compact .block-product-button {
  color: var(--theme-primary, #06c);
  font-size: var(--font-size-md);
  background: none;
  padding: 0;
}

.block-product.layout-compact .block-product-button:after {
  content: " →";
}

.block-product.layout-compact .block-product-image-placeholder {
  border-radius: var(--radius-lg);
  width: 80px;
  height: 80px;
}

.block-product-badge {
  color: #fff;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-block;
}

.block-product-image {
  max-width: 260px;
}

.block-product-image img {
  width: 100%;
  height: auto;
  display: block;
}

.block-product-image-placeholder {
  background: var(--gray-100);
  width: 100%;
  height: 200px;
  color: var(--gray-400);
  font-size: var(--font-size-base);
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-product-content {
  flex-direction: column;
  display: flex;
}

.block-product-description {
  font-size: var(--font-size-base);
  color: var(--theme-text-muted, var(--gray-600));
  margin: 0 0 12px;
  line-height: 1.6;
}

.block-product-pricing {
  margin: 12px 0 16px;
}

.block-product-price {
  font-size: var(--font-size-4xl);
  color: var(--theme-text, var(--black));
  font-weight: 700;
}

.block-product-original-price {
  font-size: var(--font-size-base);
  color: var(--gray-400);
  margin-left: 8px;
  text-decoration: line-through;
}

.block-product-button {
  background: var(--theme-primary, var(--black));
  color: var(--white);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--theme-font, inherit);
  border-radius: var(--theme-radius, 6px);
  cursor: default;
  border: none;
  padding: 12px 28px;
  display: inline-block;
}

.block-product-button.btn-outline {
  color: var(--theme-primary, var(--black));
  border: 2px solid var(--theme-primary, var(--black));
  background: none;
}

.block-product-button.btn-text {
  color: var(--theme-primary, var(--black));
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.block-image-group {
  flex-wrap: wrap;
  display: flex;
}

.block-image-group-item {
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.block-image-group-item img {
  border-radius: var(--radius-sm);
  width: 100%;
}

.block-image-group-placeholder {
  background: var(--gray-100);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  font-size: var(--font-size-md);
  padding: 40px 20px;
}

.block-image-group-caption {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 8px;
}

.block-header {
  background: var(--theme-surface, #fff);
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  padding: 20px 32px;
  display: flex;
}

.block-header.left {
  align-items: flex-start;
}

.block-header-logo {
  width: auto;
  max-height: 50px;
}

.block-header-logo-circle {
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
}

.block-header-logo--clickable {
  transition: opacity .15s, transform .15s;
}

.block-header-logo--clickable:hover {
  opacity: .8;
  transform: scale(1.05);
}

.block-header-logo-placeholder.clickable:hover {
  background: #8080800d;
  border-color: #80808080;
}

.block-header-logo-placeholder.clickable:hover span {
  opacity: 1 !important;
}

.block-header-title {
  font-size: var(--text-h1-size, 24px);
  font-weight: var(--text-h1-weight, 700);
  font-family: var(--text-h1-font, inherit);
  color: var(--text-h1-color, var(--theme-text, #1f2937));
  margin: 0;
}

.block-header-tagline {
  font-size: var(--text-p-size, 14px);
  font-family: var(--text-p-font, inherit);
  color: var(--text-p-color, var(--theme-text-muted, #6b7280));
  margin: 8px 0 0;
}

.block-header-text-group {
  flex-direction: column;
  display: flex;
}

.block-header.block-header--cols-2, .block-header.block-header--cols-3, .block-header.block-header--cols-4 {
  flex-direction: row;
  align-items: center;
  min-height: 50px;
}

.block-header.block-header--cols-2 .block-header-logo-circle, .block-header.block-header--cols-3 .block-header-logo-circle, .block-header.block-header--cols-4 .block-header-logo-circle {
  margin-bottom: 0;
}

.block-header-brand {
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.block-header-col {
  flex: 1;
  align-items: center;
  padding: 8px 16px;
  display: flex;
}

.block-header-col:first-child {
  justify-content: flex-start;
}

.block-header-col:last-child {
  justify-content: flex-end;
}

.block-header--cols-3 .block-header-col:nth-child(2) {
  justify-content: center;
}

.block-header-col-text {
  cursor: text;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
}

.header-resize-handle {
  cursor: col-resize;
  flex-shrink: 0;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  width: 16px;
  display: flex;
  position: relative;
}

.header-resize-handle:before {
  content: "";
  background: var(--gray-300, #d1d5db);
  width: 2px;
  transition: background .15s;
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.header-resize-handle:hover:before {
  background: var(--primary, #3b82f6);
}

.header-resize-grip {
  color: var(--gray-400, #9ca3af);
  z-index: 1;
  opacity: 0;
  align-items: center;
  transition: opacity .15s;
  display: flex;
}

.header-resize-handle:hover .header-resize-grip {
  opacity: 1;
  color: var(--primary, #3b82f6);
}

.header-height-handle {
  cursor: row-resize;
  z-index: 2;
  opacity: 0;
  justify-content: center;
  align-items: center;
  height: 8px;
  transition: opacity .2s;
  display: flex;
  position: absolute;
  bottom: -4px;
  left: 20%;
  right: 20%;
}

.block-header:hover .header-height-handle {
  opacity: 1;
}

.header-height-handle:before {
  content: "";
  background: var(--gray-300, #d1d5db);
  border-radius: 2px;
  width: 40px;
  height: 3px;
  transition: background .15s;
}

.header-height-handle:hover:before {
  background: var(--primary, #3b82f6);
}

.block-header-masthead {
  text-align: center;
  background-position: center;
  background-repeat: repeat;
  padding: 48px 32px;
  position: relative;
  overflow: hidden;
}

.block-header-masthead.pattern-waves {
  background-position: bottom;
  background-repeat: repeat-x;
}

.block-header-masthead-title {
  font-size: var(--text-h1-size, 36px);
  font-weight: 800;
  font-family: var(--text-h1-font, inherit);
  color: var(--theme-primary-text, #fff);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px #0003;
  z-index: 1;
  margin: 0 0 8px;
  position: relative;
}

.block-header-masthead-subtitle {
  font-size: var(--text-p-size, 14px);
  font-family: var(--text-p-font, inherit);
  color: var(--theme-primary-text, #fff);
  opacity: .9;
  letter-spacing: 1px;
  z-index: 1;
  margin: 0;
  position: relative;
}

.block-header-magazine {
  background: var(--theme-surface, #fff);
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  display: flex;
}

.block-header-magazine-left {
  align-items: center;
  gap: 12px;
  display: flex;
}

.block-header-magazine-icon {
  background: var(--btn-bg, var(--theme-primary, #2563eb));
  width: 40px;
  height: 40px;
  color: var(--btn-color, #fff);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.block-header-magazine-title {
  font-size: var(--text-h2-size, 18px);
  font-weight: var(--text-h2-weight, 600);
  font-family: var(--text-h2-font, inherit);
  color: var(--text-h2-color, var(--theme-text, #1f2937));
  margin: 0;
}

.block-header-magazine-tagline {
  color: var(--text-p-color, var(--theme-text-muted, #6b7280));
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  font-size: 11px;
}

.block-header-magazine-date {
  color: var(--text-p-color, var(--theme-text-muted, #6b7280));
  margin: 0;
  font-size: 12px;
}

.block-top-header {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  font-family: var(--text-p-font, inherit);
  background: var(--theme-primary, #1a1a1a);
  color: var(--theme-primary-text, #fff);
  margin: 0;
  display: flex;
}

.block-top-header.compact {
  padding: 8px 16px;
}

.block-top-header.standard {
  padding: 12px 20px;
}

.block-top-header.large {
  padding: 16px 24px;
}

.block-top-header.columns {
  gap: 0;
}

.block-top-header-text {
  font-size: var(--text-p-size, 14px);
  color: inherit;
  outline: none;
  font-weight: 500;
}

.block-top-header-text:focus {
  background: #ffffff1a;
}

.block-top-header-link {
  font-size: var(--text-p-size, 14px);
  cursor: default;
  color: inherit;
  margin-left: 4px;
  font-weight: 600;
  text-decoration: underline;
}

.block-top-header-col-link {
  font-size: var(--text-p-size, 14px);
  cursor: default;
  color: inherit;
  padding: 0 12px;
  font-weight: 500;
  text-decoration: none;
}

.block-preheader {
  background: #f0f9ff;
  border: 1px dashed #06c;
  margin: 0;
  padding: 12px 32px;
  position: relative;
}

.block-preheader-label {
  font-size: var(--font-size-xs);
  color: #06c;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  font-weight: 600;
  display: block;
}

.block-preheader-content {
  font-size: var(--font-size-md);
  color: var(--gray-600);
  font-style: italic;
  line-height: 1.5;
}

.block-preheader-content:focus {
  outline: none;
}

.block-greeting {
  color: var(--gray-800);
  margin: 0;
  padding: 16px 32px 8px;
}

.block-greeting.friendly {
  font-weight: 500;
}

.block-greeting.formal {
  font-weight: 400;
}

.block-greeting.casual {
  color: var(--gray-700);
  font-weight: 500;
}

.block-greeting div:focus {
  outline: none;
}

.block-closing {
  color: var(--gray-700);
  margin: 0;
  padding: 16px 32px 8px;
  font-size: 16px;
}

.block-closing div:focus {
  outline: none;
}

.block-sender {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  margin: 0;
  padding: 16px 32px;
  display: flex;
}

.block-sender-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.block-sender-info {
  flex: 1;
}

.block-sender-name {
  font-size: var(--font-size-base);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
}

.block-sender-email {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 2px 0 0;
}

.block-cta {
  font-family: var(--theme-font, inherit);
  margin: 0;
  padding: 32px;
}

.block-cta.boxed {
  background: var(--theme-surface, var(--gray-100));
  border: 1px solid var(--theme-border, var(--gray-200));
  margin: 8px 32px;
  padding: 32px;
}

.block-cta.cta-color-primary .block-cta-button {
  background: var(--theme-primary, var(--black));
  color: var(--white);
}

.block-cta.cta-color-primary .block-cta-button.outline {
  border: 2px solid var(--theme-primary, var(--black));
  color: var(--theme-primary, var(--black));
  background: none;
}

.block-cta.cta-color-secondary .block-cta-button {
  background: var(--theme-secondary, var(--gray-600));
  color: var(--white);
}

.block-cta.cta-color-secondary .block-cta-button.outline {
  border: 2px solid var(--theme-secondary, var(--gray-600));
  color: var(--theme-secondary, var(--gray-600));
  background: none;
}

.block-cta.cta-color-success .block-cta-button {
  background: var(--theme-success, #10b981);
  color: var(--white);
}

.block-cta.cta-color-success .block-cta-button.outline {
  border: 2px solid var(--theme-success, #10b981);
  color: var(--theme-success, #10b981);
  background: none;
}

.block-cta.cta-color-danger .block-cta-button {
  color: var(--white);
  background: #ef4444;
}

.block-cta.cta-color-danger .block-cta-button.outline {
  color: #ef4444;
  background: none;
  border: 2px solid #ef4444;
}

.block-cta.cta-color-dark .block-cta-button {
  background: var(--theme-text, var(--black));
  color: var(--white);
}

.block-cta.cta-color-dark .block-cta-button.outline {
  border: 2px solid var(--theme-text, var(--black));
  color: var(--theme-text, var(--black));
  background: none;
}

.block-cta.cta-color-gradient .block-cta-button {
  background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-secondary, #764ba2) 100%);
  color: var(--white);
}

.block-cta.cta-color-gradient .block-cta-button.outline {
  border: 2px solid var(--theme-primary, #667eea);
  color: var(--theme-primary, #667eea);
  background: none;
}

.block-cta-title {
  color: var(--theme-text, var(--gray-900));
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
}

.block-cta-title:focus {
  outline: none;
}

.block-cta-subtitle {
  color: var(--theme-text-muted, var(--gray-600));
  margin: 0 0 20px;
  font-size: 16px;
}

.block-cta-button {
  color: var(--white);
  cursor: pointer;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: all .2s;
  display: inline-block;
}

.block-cta-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.block-cta-secondary {
  font-size: var(--font-size-base);
  color: var(--theme-link, var(--gray-600));
  cursor: pointer;
  margin-left: 12px;
  text-decoration: underline;
  display: inline-block;
}

.block-unsubscribe {
  text-align: center;
  margin: 0;
  padding: 20px 32px;
}

.block-unsubscribe.bordered {
  border-top: 1px solid var(--gray-200);
  padding-top: 24px;
}

.block-unsubscribe-text {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0 0 8px;
}

.block-unsubscribe-link {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
  text-decoration: underline;
}

.block-unsubscribe-divider {
  color: var(--gray-300);
  margin: 0 8px;
}

.block-stats {
  gap: var(--spacing-md);
  font-family: var(--theme-font, inherit);
  padding: 16px 0;
  display: flex;
}

.block-stats.cards .block-stats-item {
  background: var(--theme-surface, var(--gray-100));
}

.block-stats-item {
  text-align: center;
  flex: 1;
  padding: 16px;
}

.block-stats-value {
  font-size: var(--font-size-4xl);
  color: var(--theme-primary, var(--primary));
  font-weight: 700;
}

.block-stats-label {
  font-size: var(--font-size-md);
  color: var(--theme-text, var(--gray-800));
  margin-top: 4px;
  font-weight: 600;
}

.block-stats-desc {
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted, var(--gray-500));
  margin-top: 2px;
}

.block-article-grid {
  padding: 16px 32px;
}

.block-article-grid.has-section-bg {
  padding: 0;
}

.block-article-grid-heading {
  color: var(--theme-text, var(--gray-900));
  letter-spacing: -.3px;
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
}

.block-article-grid-items {
  gap: var(--spacing-lg);
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  display: grid;
}

.block-article-grid.cols-3 .block-article-grid-items {
  gap: var(--spacing-md-lg);
  grid-template-columns: repeat(3, 1fr);
}

.block-article-grid-item {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.block-article-grid-image {
  aspect-ratio: 16 / 10;
  background: var(--gray-100);
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
}

.block-article-grid-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.block-article-grid-image:hover img {
  transform: scale(1.02);
}

.block-article-grid-placeholder {
  width: 100%;
  height: 100%;
  color: var(--gray-400);
  font-size: var(--font-size-sm);
  background: var(--gray-50);
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-article-grid-title {
  color: var(--theme-text, #000);
  letter-spacing: -.2px;
  flex-grow: 1;
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.block-article-grid-excerpt {
  font-size: var(--font-size-md);
  color: var(--theme-text-muted, var(--gray-600));
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 6px 0 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.block-article-grid-meta {
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted, var(--gray-400));
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 0;
}

.block-unknown {
  background: var(--gray-100);
  border: 1px dashed var(--gray-400);
  text-align: center;
  color: var(--gray-500);
  font-size: var(--font-size-md);
  padding: 16px;
}

.block-quote {
  background: var(--theme-surface, var(--gray-100));
  font-style: italic;
  font-size: calc(var(--text-p-size, 16px)  + 1px);
  line-height: var(--text-p-line-height, 1.6);
  color: var(--text-p-color, var(--theme-text, var(--gray-700)));
  font-family: var(--text-p-font, var(--theme-font, inherit));
  border-left: 4px solid var(--theme-primary, var(--gray-400));
  margin: 0;
  padding: 24px 32px;
}

.block-quote.modern {
  border-left: 4px solid var(--theme-primary, var(--black));
  background: none;
  padding: 0 0 0 20px;
}

.block-quote footer {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 12px;
}

.block-list {
  font-size: var(--text-p-size, 16px);
  line-height: var(--text-p-line-height, 1.6);
  color: var(--text-p-color, var(--theme-text, var(--gray-700)));
  font-family: var(--text-p-font, var(--theme-font, inherit));
  margin: 0;
  padding: 8px 32px 8px 56px;
}

.block-list li {
  margin-bottom: 8px;
}

.block-columns {
  align-items: stretch;
  gap: 0;
  min-height: 160px;
  display: flex;
  position: relative;
}

.column-resize-handle {
  cursor: col-resize;
  z-index: 5;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  width: 12px;
  display: flex;
  position: relative;
}

.column-resize-handle:before {
  content: "";
  background: var(--gray-300);
  width: 2px;
  transition: background .15s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.column-resize-handle:hover:before {
  background: var(--black);
}

.column-resize-handle:hover .column-resize-grip {
  opacity: 1;
  background: var(--black);
  color: var(--white);
}

.column-resize-handle:hover .column-resize-label {
  opacity: 1;
}

.column-resize-grip {
  background: var(--gray-400);
  width: 16px;
  height: 32px;
  color: var(--white);
  opacity: .6;
  z-index: 1;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.column-resize-label {
  color: var(--gray-500);
  opacity: 0;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 9px;
  transition: opacity .15s;
}

.block-column {
  flex-direction: column;
  flex: 1;
  transition: flex .35s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.column-drop-zone {
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border: 2px dashed #0000;
  flex-direction: column;
  flex: 1;
  transition: all .15s;
  display: flex;
}

.column-drop-zone.drag-over {
  border-color: var(--black);
  background: var(--gray-100);
}

.column-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  border: 2px dashed var(--gray-300);
  cursor: pointer;
  flex-direction: column;
  flex: 1;
  transition: all .15s;
  display: flex;
}

.column-empty:hover {
  border-color: var(--gray-500);
  background: var(--gray-50);
}

.column-empty:hover .column-empty-icon {
  color: var(--gray-600);
}

.column-empty-icon {
  border: 2px solid var(--gray-300);
  width: 36px;
  height: 36px;
  color: var(--gray-400);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.column-empty-title {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 600;
}

.column-empty-sub {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.column-empty-hint {
  color: var(--gray-400);
  text-align: center;
  margin-top: var(--spacing-xs);
  font-size: 10px;
  line-height: 1.3;
}

.nested-block {
  border: 1px solid var(--gray-200);
  background: var(--white);
  transition: border-color .15s;
  position: relative;
}

.nested-block:hover {
  border-color: var(--gray-400);
}

.nested-block:hover .nested-block-toolbar {
  opacity: 1;
}

.nested-block-toolbar {
  opacity: 0;
  z-index: 10;
  transition: opacity .15s;
  position: absolute;
  top: 2px;
  right: 2px;
}

.nested-delete-btn {
  background: var(--gray-600);
  width: 18px;
  height: 18px;
  color: var(--white);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.nested-delete-btn:hover {
  background: var(--error);
}

.column-block-picker {
  padding: var(--spacing-xs);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  flex-direction: column;
  gap: 2px;
  display: flex;
  box-shadow: 0 4px 16px #0000001f;
}

.column-picker-btn {
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  background: none;
  border: none;
  padding: 8px 10px;
  transition: all .1s;
  display: flex;
}

.column-picker-btn:hover {
  background: var(--gray-100);
  color: var(--black);
}

.column-add-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px dashed var(--gray-300);
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  padding: 4px;
  font-size: 11px;
  transition: all .15s;
  display: flex;
}

.column-add-btn:hover {
  border-color: var(--gray-500);
  color: var(--gray-600);
  background: var(--gray-50);
}

.block-social {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  padding: 16px 0;
  display: flex;
}

.block-social.small .social-icon {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-sm);
}

.block-social.small .social-icon svg {
  width: 14px;
  height: 14px;
}

.block-social.large .social-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.block-social.large .social-icon svg {
  width: 22px;
  height: 22px;
}

.social-icon {
  background: var(--black);
  width: 36px;
  height: 36px;
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: opacity .15s, transform .15s;
  display: flex;
}

.social-icon:hover {
  opacity: .8;
  transform: scale(1.1);
}

.social-icon svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.social-icon.outline {
  border: 2px solid var(--black);
  color: var(--black);
  background: none;
}

.block-video {
  background: var(--video-bg, var(--gray-100));
  padding: var(--video-pt, 12px) var(--video-pr, 24px) var(--video-pb, 12px) var(--video-pl, 24px);
  overflow: hidden;
}

.block-video-preview {
  aspect-ratio: 16 / 9;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
  color: var(--white);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.block-video-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.block-video-play {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-4xl);
  z-index: 1;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-video-label {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  text-shadow: 0 1px 3px #0009;
  max-width: 100%;
  overflow: hidden;
}

.video-thumbnail-preview {
  border: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
}

.video-thumbnail-preview .video-thumbnail-img {
  width: 100%;
  display: block;
}

.video-thumbnail-preview .video-thumbnail-badge {
  width: 32px;
  height: 32px;
  color: var(--white);
  background: #0009;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.property-label-row {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.block-video-gif {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
  position: relative;
  overflow: hidden;
}

.block-video-gif-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.block-video-gif-badge {
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  color: var(--white);
  font-size: var(--font-size-xs);
  background: #0009;
  padding: 2px 6px;
  font-weight: 600;
  position: absolute;
}

.block-video-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  border: 2px dashed var(--gray-300);
  color: var(--gray-500);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  flex-direction: column;
  display: flex;
}

.block-video-placeholder span:first-child {
  font-size: var(--font-size-6xl);
}

.gif-maker {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
}

.gif-maker-header {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
  color: var(--gray-700);
  font-weight: 600;
  display: flex;
}

.gif-maker-divider {
  background: var(--gray-200);
  height: 1px;
}

.gif-maker-upload-block {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.gif-maker-thumbnail-mode {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}

.gif-maker-thumbnail-mode summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  padding: 12px 14px;
  font-weight: 600;
  list-style: none;
}

.gif-maker-thumbnail-mode summary::-webkit-details-marker {
  display: none;
}

.gif-maker-thumbnail-body {
  padding: 0 12px 12px;
}

.gif-maker-upload {
  padding: var(--spacing-md);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gray-500);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxs);
  font-size: var(--font-size-sm);
  flex-direction: column;
  transition: border-color .2s, background .2s;
  display: flex;
}

.gif-maker-upload:hover {
  border-color: var(--primary);
  background: var(--gray-50);
}

.gif-maker-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.gif-maker-loading {
  text-align: center;
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.gif-frame-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-height: 360px;
  display: grid;
  overflow-y: auto;
}

.gif-frame-item {
  cursor: pointer;
  background: var(--white);
  opacity: .5;
  border: 2px solid #0000;
  padding: 0;
  transition: opacity .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}

.gif-frame-item.selected {
  opacity: 1;
  border-color: var(--primary);
}

.gif-frame-item:hover:not(:disabled) {
  opacity: .85;
}

.gif-frame-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

.gif-frame-label {
  color: var(--white);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #111827c7;
  border-radius: 999px;
  max-width: calc(100% - 12px);
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  bottom: 6px;
  left: 6px;
  overflow: hidden;
}

.gif-frame-check {
  background: var(--primary);
  width: 18px;
  height: 18px;
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 2px;
  right: 2px;
}

.gif-maker-controls {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.gif-maker-row {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.gif-maker-row .property-label {
  min-width: 70px;
  font-size: var(--font-size-xs);
  margin: 0;
}

.gif-maker-row .property-select {
  font-size: var(--font-size-xs);
  flex: 1;
  padding: 2px 4px;
}

.gif-maker-range {
  height: 4px;
  accent-color: var(--primary);
  flex: 1;
}

.gif-maker-value {
  text-align: right;
  min-width: 36px;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}

.gif-maker-progress {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: 20px;
  position: relative;
  overflow: hidden;
}

.gif-maker-progress-bar {
  background: var(--primary);
  opacity: .2;
  transition: width .3s;
  position: absolute;
  inset: 0;
}

.gif-maker-progress-text {
  height: 100%;
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.gif-maker-actions {
  gap: var(--spacing-xs);
  justify-content: flex-end;
  display: flex;
}

.gif-maker-preview-img {
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

.gif-maker-error {
  font-size: var(--font-size-xs);
  color: var(--danger);
  padding: var(--spacing-xs);
}

.gif-maker-active {
  color: var(--success);
  font-weight: 500;
}

.block-code {
  color: #e5e5e5;
  font-family: SF Mono, Monaco, Courier New, monospace;
  font-size: var(--font-size-md);
  background: #1a1a1a;
  margin: 0;
  padding: 16px;
  line-height: 1.5;
  overflow-x: auto;
}

.block-code code {
  font-family: inherit;
}

.block-html {
  border: 2px solid var(--gray-300);
  overflow: hidden;
}

.block-html-label {
  background: var(--gray-800);
  color: var(--white);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 12px;
  font-weight: 600;
}

.block-html-preview {
  background: var(--white);
  min-height: 40px;
  padding: 16px;
}

.block-theme-wrapper {
  font-family: var(--newsletter-font, inherit);
  color: var(--newsletter-text, inherit);
}

.block-theme-wrapper h1, .block-theme-wrapper h2, .block-theme-wrapper h3, .block-theme-wrapper h4, .block-theme-wrapper h5, .block-theme-wrapper h6 {
  font-family: var(--newsletter-heading-font, var(--newsletter-font, inherit));
  color: var(--newsletter-text, inherit);
}

.block-theme-wrapper a {
  color: var(--newsletter-primary, #2563eb);
}

.block-theme-wrapper .block-button-link {
  background-color: var(--newsletter-primary, #2563eb);
  color: var(--newsletter-primary-text, #fff);
}

.block-theme-wrapper .block-header, .block-theme-wrapper .block-footer {
  background-color: var(--newsletter-surface, #f8fafc);
  border-color: var(--newsletter-border, #e2e8f0);
}

.block-theme-wrapper .block-hero {
  background-color: var(--newsletter-surface, #f8fafc);
}

.block-theme-wrapper .block-article {
  background-color: var(--newsletter-surface, #f8fafc);
  border-color: var(--newsletter-border, #e2e8f0);
}

.block-theme-wrapper .block-text-muted, .block-theme-wrapper .block-footer-text {
  color: var(--newsletter-text-muted, #64748b);
}

.block-theme-wrapper .block-divider hr {
  border-color: var(--newsletter-border, #e2e8f0);
}

.block-sub-clickable {
  cursor: pointer;
  outline-offset: 2px;
  outline: 2px solid #0000;
  transition: outline-color .15s;
  position: relative;
}

.block-sub-clickable:hover {
  outline-color: #3b82f680;
}

.block-footer-rendered a:hover, .block-footer-rendered p:hover {
  outline-offset: 2px;
  cursor: pointer;
  outline: 2px solid #3b82f64d;
}

.editor-wrapper-subscriber .editor-sidebar, .editor-wrapper-subscriber .editor-properties {
  padding-top: 0;
}

.editor-sidebar {
  background: var(--white);
  color: var(--text-primary);
  border-right: 1px solid var(--border-light);
  z-index: 10;
  flex-direction: row;
  height: 100%;
  min-height: 0;
  transition: width .35s cubic-bezier(.35, 0, .25, 1);
  display: flex;
  box-shadow: 4px 0 12px #4c555b26;
}

.editor-sidebar-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.editor-sidebar-content {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.sidebar-tab-content {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  flex: 1;
  min-height: 0;
  padding-left: 8px;
  animation: .3s sidebarTabFadeIn;
  overflow-y: auto;
}

.sidebar-tab-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.sidebar-tab-content::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.sidebar-tab-content::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.sidebar-tab-content::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

@keyframes sidebarTabFadeIn {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0);
  }
}

.sidebar-content-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--black);
  padding: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  margin: 0;
}

.editor-sidebar-content > .newsletter-styles-panel, .editor-sidebar-content > .widget-palette, .editor-sidebar-content > .layouts-palette, .editor-sidebar-content > .editor-variables-panel, .editor-sidebar-content > .saved-structures-section, .editor-sidebar-content > .section-templates-tab, .editor-sidebar-content > .sections-tab {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden auto;
}

.editor-sidebar-content > .newsletter-styles-panel::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .widget-palette::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .layouts-palette::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .editor-variables-panel::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .saved-structures-section::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .section-templates-tab::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .sections-tab::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.editor-sidebar-content > .newsletter-styles-panel::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .widget-palette::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .layouts-palette::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .editor-variables-panel::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .saved-structures-section::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .section-templates-tab::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .sections-tab::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.editor-sidebar-content > .newsletter-styles-panel::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .widget-palette::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .layouts-palette::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .editor-variables-panel::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .saved-structures-section::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .section-templates-tab::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .sections-tab::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.editor-sidebar-content > .newsletter-styles-panel::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .widget-palette::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .layouts-palette::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .editor-variables-panel::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .saved-structures-section::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .section-templates-tab::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .sections-tab::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.editor-sidebar-content > .newsletter-styles-panel, .editor-sidebar-content > .widget-palette, .editor-sidebar-content > .layouts-palette, .editor-sidebar-content > .editor-variables-panel, .editor-sidebar-content > .saved-structures-section, .editor-sidebar-content > .section-templates-tab, .editor-sidebar-content > .sections-tab {
  padding: var(--spacing-md);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120px;
}

.editor-sidebar-content > .properties-panel {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-tabs {
  background: #f8fafb;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  width: 75px;
  min-width: 75px;
  padding: 0;
  transition: all .35s cubic-bezier(.35, 0, .25, 1);
  display: flex;
  box-shadow: inset 0 1px 10px #4c555b33;
}

.sidebar-tab {
  width: 100%;
  height: 64px;
  box-shadow: none;
  -webkit-tap-highlight-color: #0000;
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all .35s cubic-bezier(.35, 0, .25, 1);
  display: flex;
  position: relative;
}

.sidebar-tab svg {
  width: 24px;
  height: 24px;
  transition: all .35s cubic-bezier(.35, 0, .25, 1);
}

.sidebar-tab:before, .sidebar-tab:after {
  content: "";
  pointer-events: none;
  opacity: 0;
  background: none;
  width: 12px;
  height: 12px;
  transition: opacity .35s cubic-bezier(.35, 0, .25, 1);
  position: absolute;
  right: 0;
}

.sidebar-tab:before {
  box-shadow: 4px 4px 0 4px var(--white);
  border-bottom-right-radius: 12px;
  top: -12px;
}

.sidebar-tab:after {
  box-shadow: 4px -4px 0 4px var(--white);
  border-top-right-radius: 12px;
  bottom: -12px;
}

.sidebar-tab:hover {
  color: var(--black);
  background: #ffffff80;
}

.sidebar-tab:focus, .sidebar-tab:focus-visible, .sidebar-tab:active {
  box-shadow: none;
  outline: none;
}

.sidebar-tab.active {
  color: var(--black);
  background: var(--white);
}

.sidebar-tab.active:before, .sidebar-tab.active:after {
  opacity: 1;
}

.widget-grid-section {
  margin-bottom: var(--spacing-md);
}

.widget-grid-title {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-2xs);
}

.widget-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.widget-grid-item {
  padding: var(--spacing-md-sm) var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.widget-grid-item:hover {
  border-color: var(--black);
  box-shadow: var(--shadow-sm);
}

.widget-grid-item:hover .widget-grid-icon {
  color: var(--black);
}

.widget-grid-item:active {
  background: var(--gray-50);
}

.widget-grid-icon {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  margin-bottom: var(--spacing-xs);
  color: var(--gray-500);
  transition: color var(--duration-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

.widget-grid-icon svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.widget-grid-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-align: center;
}

.widget-accordion-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.widget-accordion-title {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-sm);
}

.sidebar-saved-blocks {
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.saved-blocks-header {
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.saved-blocks-intro {
  color: var(--text-secondary);
  margin: 0;
  font-size: .8125rem;
  line-height: 1.4;
}

.saved-blocks-favorites-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .8125rem;
  display: flex;
}

.saved-blocks-favorites-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
}

.saved-blocks-favorites-toggle:hover {
  color: var(--text-primary);
}

.saved-block-favorite {
  cursor: pointer;
  color: var(--text-muted);
  opacity: .5;
  transition: all var(--duration-fast) var(--ease-in-out);
  background: none;
  border: none;
  padding: .25rem;
  font-size: 1rem;
  line-height: 1;
}

.saved-block-favorite:hover {
  opacity: 1;
  transform: scale(1.1);
}

.saved-block-favorite.active {
  opacity: 1;
  color: var(--warning);
}

.saved-block-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: all var(--duration-fast);
  padding: 10px 12px;
  display: flex;
}

.saved-block-item:hover {
  border-color: var(--primary-light);
  background: var(--bg-secondary);
}

.saved-block-main {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.saved-block-description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  display: block;
  overflow: hidden;
}

.saved-block-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  display: flex;
}

.saved-block-preview-btn {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.saved-block-preview-btn:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.saved-block-preview-overlay {
  z-index: 1000;
  padding: var(--spacing-lg);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.saved-block-preview-modal {
  background: var(--white);
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px #0003;
}

.saved-block-preview-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.saved-block-preview-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.saved-block-preview-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 4px 0 0;
}

.saved-block-preview-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-4xl);
  color: var(--text-muted);
  transition: all var(--duration-fast);
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.saved-block-preview-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.saved-block-preview-body {
  padding: var(--spacing-lg);
  background: #f9fafb;
  flex: 1;
  overflow-y: auto;
}

.saved-block-preview-content {
  background: var(--white);
  padding: var(--spacing-lg);
  max-width: 100%;
  box-shadow: 0 1px 3px #0000001a;
}

.saved-block-preview-item {
  margin-bottom: var(--spacing-sm);
}

.saved-block-preview-item:last-child {
  margin-bottom: 0;
}

.saved-block-preview-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
  display: flex;
}

.saved-block-preview-cancel {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--duration-fast);
  padding: 8px 16px;
  font-weight: 500;
}

.saved-block-preview-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.saved-block-preview-insert {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: none;
  padding: 8px 20px;
  font-weight: 500;
}

.saved-block-preview-insert:hover {
  background: var(--primary-dark);
}

.saved-block-preview-category {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-hover);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
  padding: 2px 8px;
  display: flex;
}

.saved-block-preview-description {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  margin: 0;
}

.saved-block-preview-meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.saved-block-preview-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.saved-block-edit-modal {
  background: var(--white);
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px #0003;
}

.saved-block-edit-form {
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.saved-block-edit-preview {
  padding: var(--spacing-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}

.saved-block-editor-modal {
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
  flex-direction: column;
  width: 95vw;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.saved-block-editor-layout {
  background: var(--border-light);
  flex: 1;
  grid-template-columns: 280px 1fr 320px;
  gap: 1px;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.saved-block-editor-sidebar {
  background: var(--bg-primary);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.saved-block-editor-meta {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.saved-block-editor-blocks {
  padding: var(--spacing-md);
  flex: 1;
  overflow-y: auto;
}

.saved-block-editor-blocks > label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--spacing-sm);
  font-size: .75rem;
  font-weight: 600;
  display: block;
}

.saved-block-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.saved-block-list-item {
  align-items: flex-start;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--duration-fast);
  text-align: left;
  flex-direction: column;
  width: 100%;
  display: flex;
}

.saved-block-list-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.saved-block-list-item.active {
  background: var(--primary-50);
  border-color: var(--primary);
}

.saved-block-list-type {
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: .05em;
  font-size: .6875rem;
  font-weight: 600;
}

.saved-block-list-preview {
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: .8125rem;
  overflow: hidden;
}

.saved-block-editor-preview {
  background: var(--bg-secondary);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.saved-block-editor-preview > label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: .75rem;
  font-weight: 600;
  display: block;
}

.saved-block-editor-preview .saved-block-preview-content {
  padding: var(--spacing-lg);
  background: #f9fafb;
  flex: 1;
  overflow-y: auto;
}

.saved-block-editor-preview .saved-block-preview-item {
  background: var(--white);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: 2px solid #0000;
  box-shadow: 0 1px 3px #0000000d;
}

.saved-block-editor-preview .saved-block-preview-item:hover {
  box-shadow: 0 2px 8px #0000001a;
}

.saved-block-editor-preview .saved-block-preview-item.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.saved-block-editor-preview .saved-block-preview-item:last-child {
  margin-bottom: 0;
}

.saved-block-editor-panel {
  background: var(--bg-primary);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.saved-block-editor-panel > label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  font-size: .75rem;
  font-weight: 600;
  display: block;
}

.saved-block-editor-fields {
  padding: var(--spacing-md);
  gap: var(--spacing-md);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.saved-block-editor-align {
  gap: var(--spacing-xs);
  display: flex;
}

.saved-block-align-btn {
  padding: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
  flex: 1;
  font-size: .875rem;
}

.saved-block-align-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.saved-block-align-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.saved-block-color-row {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.saved-block-color-input {
  border: 1px solid var(--border-light);
  cursor: pointer;
  background: var(--bg-primary);
  width: 40px;
  height: 36px;
  padding: 2px;
}

.saved-block-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.saved-block-color-input::-webkit-color-swatch {
  border: none;
}

.saved-block-social-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.saved-block-social-item {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.saved-block-social-check {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: .875rem;
  display: flex;
}

.saved-block-social-check input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.saved-block-list-editor {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.saved-block-list-editor-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.saved-block-list-remove {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
}

.saved-block-list-remove:hover {
  background: var(--error-100);
  border-color: var(--error);
  color: var(--error);
}

.saved-block-editor-unsupported {
  padding: var(--spacing-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: .875rem;
}

.saved-block-editor-unsupported p {
  margin: 0 0 var(--spacing-sm);
}

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

  .saved-block-editor-sidebar {
    border-bottom: 1px solid var(--border-light);
  }

  .saved-block-editor-preview {
    min-height: 200px;
  }

  .saved-block-editor-panel {
    border-top: 1px solid var(--border-light);
    max-height: 300px;
  }
}

.editor-variables-panel {
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

.editor-variables-panel .variables-list {
  gap: var(--spacing-sm-xs);
  background: var(--white);
  flex-direction: column;
  padding: 12px 16px;
  display: flex;
}

.variable-tag-btn {
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  transition: all .15s;
  display: flex;
}

.variable-tag-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.variable-tag-btn code {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 2px 6px;
}

.variable-tag-btn span {
  color: var(--gray-500);
  font-size: 12px;
}

.widget-palette {
  margin-bottom: var(--spacing-lg);
}

.widget-palette-title {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-md-sm);
}

.widget-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md-sm) var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: all var(--duration-fast);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.widget-item:hover {
  border-color: var(--black);
  box-shadow: var(--shadow-sm);
}

.widget-item:active {
  cursor: grabbing;
  background: var(--gray-50);
}

.widget-icon {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  color: var(--gray-500);
  transition: color var(--duration-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

.widget-item:hover .widget-icon {
  color: var(--black);
}

.block-search {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: var(--spacing-md);
  display: flex;
}

.block-search svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.block-search:focus-within {
  border-color: var(--black);
  background: var(--white);
}

.block-search:focus-within svg:first-child {
  color: var(--black);
}

.block-search-input {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
}

.block-search-input::placeholder {
  color: var(--gray-400);
}

.block-search-clear {
  padding: var(--spacing-2xs);
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gray-500);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.block-search-clear:hover {
  background: var(--gray-300);
  color: var(--black);
}

.block-search-results {
  margin-bottom: var(--spacing-md);
}

.block-search-empty {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  padding: var(--spacing-lg) 0;
}

.email-settings-section {
  margin-bottom: 0;
}

.email-settings-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 16px;
  font-weight: 600;
  display: flex;
}

.email-settings-header svg {
  color: var(--primary);
}

.email-settings-fields {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.email-setting-field {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.email-setting-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.email-setting-input {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  width: 100%;
  color: var(--white);
  font-size: var(--font-size-md);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 10px 12px;
}

.email-setting-input:hover {
  border-color: var(--gray-600);
}

.email-setting-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .1);
  outline: none;
}

.email-setting-input::placeholder {
  color: var(--gray-500);
}

.email-setting-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.subject-input-group {
  border-top: 1px solid var(--gray-700);
  margin-top: 20px;
  padding-top: 20px;
}

.subject-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-400);
  margin-bottom: 8px;
  font-weight: 600;
  display: block;
}

.subject-input {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  width: 100%;
  color: var(--white);
  font-size: var(--font-size-md);
  padding: 12px;
}

.subject-input:focus {
  border-color: var(--gray-500);
  outline: none;
}

.subject-input::placeholder {
  color: var(--gray-500);
}

.distribution-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.distribution-option {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  padding: 10px 8px;
  transition: all .15s;
  display: flex;
}

.distribution-option:hover {
  border-color: var(--gray-400);
}

.distribution-option.active {
  border-color: var(--black);
  background: var(--white);
}

.distribution-preview {
  font-size: var(--font-size-2xs);
  color: var(--text-secondary);
  white-space: pre;
  letter-spacing: -1px;
  font-family: monospace;
}

.distribution-label {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-weight: 500;
}

.style-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.style-option {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  padding: 10px 6px;
  transition: all .15s;
  display: flex;
}

.style-option:hover {
  border-color: var(--gray-400);
}

.style-option.active {
  border-color: var(--black);
  background: var(--white);
}

.style-option-icon {
  opacity: .7;
  font-size: 18px;
}

.style-option-label {
  font-size: var(--font-size-2xs);
  color: var(--text-primary);
  font-weight: 500;
}

.layout-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.layout-option {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  padding: 10px 8px;
  transition: all .15s;
  display: flex;
}

.layout-option:hover {
  border-color: var(--gray-400);
}

.layout-option.active {
  border-color: var(--black);
  background: var(--white);
}

.layout-option-icon {
  opacity: .7;
  font-size: 20px;
}

.layout-option-label {
  font-size: var(--font-size-2xs);
  color: var(--text-primary);
  font-weight: 500;
}

.align-options {
  gap: var(--spacing-xs);
  display: flex;
}

.align-btn {
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  color: var(--text-secondary);
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 8px;
  transition: all .15s;
  display: flex;
}

.align-btn:hover {
  border-color: var(--gray-400);
  color: var(--text-primary);
}

.align-btn.active {
  border-color: var(--black);
  background: var(--white);
  color: var(--black);
}

.button-style-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.button-style-option {
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: 8px 12px;
  font-weight: 500;
  transition: all .15s;
}

.button-style-option:hover {
  border-color: var(--gray-400);
}

.button-style-option.active {
  border-color: var(--black);
  background: var(--white);
}

.article-card-style-option, .footer-style-option {
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.article-card-style-option:hover, .footer-style-option:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.selected.article-card-style-option, .selected.footer-style-option {
  border-color: var(--black);
  background: var(--gray-50);
}

.article-card-style-name, .footer-style-name {
  font-size: var(--font-size-2xs);
  color: var(--gray-700);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 500;
  overflow: hidden;
}

.footer-style-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.footer-style-option {
  padding: 8px;
}

.footer-style-option.selected .footer-style-name {
  color: var(--black);
  font-weight: 600;
}

.footer-style-preview {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-bottom: 6px;
  padding: 8px;
  display: flex;
}

.article-card-style-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.article-card-style-option {
  padding: 8px;
}

.article-card-style-option.selected .article-card-style-name {
  color: var(--black);
  font-weight: 600;
}

.article-card-style-preview {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 48px;
  margin-bottom: 6px;
  padding: 6px;
  display: flex;
  overflow: hidden;
}

.article-card-style-preview.horizontal {
  flex-direction: row;
  align-items: center;
}

.article-card-style-preview.overlay {
  justify-content: flex-end;
  position: relative;
}

.article-card-preview-image {
  flex-shrink: 0;
  width: 100%;
  height: 14px;
}

.article-card-style-preview.horizontal .article-card-preview-image {
  width: 20px;
  height: 100%;
  margin-right: 6px;
}

.article-card-preview-content {
  gap: var(--spacing-2xs);
  flex-direction: column;
  flex: 1;
  width: 100%;
  display: flex;
}

.article-card-preview-title {
  width: 70%;
  height: 4px;
}

.article-card-preview-text {
  width: 90%;
  height: 3px;
}

.article-card-preview-btn {
  width: 30%;
  height: 6px;
  margin-top: 2px;
}

.hero-style-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  display: grid;
}

.hero-style-option {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  transition: all .15s;
  display: flex;
}

.hero-style-option:hover {
  border-color: var(--gray-400);
}

.hero-style-option.selected {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.hero-mini {
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 3px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-mini.hero-mini-row {
  flex-direction: row;
}

.hero-mini-photo-hint {
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, #0000, #0000 4px, #ffffff0d 4px 8px);
  position: absolute;
  inset: 0;
}

.hero-mini-img-side {
  background: #c4c4c4;
  flex-shrink: 0;
  width: 40%;
  height: 100%;
}

.hero-mini-body {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-width: 0;
  display: flex;
}

.hero-mini-content {
  z-index: 1;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 6px 8px;
  display: flex;
  position: relative;
}

.hero-mini-bar {
  border-radius: 1px;
  flex-shrink: 0;
  display: block;
}

.hero-color-grid {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.hero-color-swatch {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: all .15s;
  display: flex;
}

.hero-color-swatch:hover {
  border-color: var(--gray-400);
  transform: scale(1.05);
}

.hero-color-swatch.active {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.hero-color-bar {
  border-radius: 1px;
  width: 18px;
  height: 3px;
  display: block;
}

.hero-color-bar.sm {
  border-radius: 1px;
  width: 12px;
  height: 4px;
}

.hero-style-name {
  color: var(--gray-700);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 9px;
  font-weight: 500;
  overflow: hidden;
}

.hero-style-option.selected .hero-style-name {
  color: var(--black);
  font-weight: 600;
}

.no-selection {
  color: var(--gray-500);
  font-size: var(--font-size-base);
  text-align: center;
  padding: 60px 20px;
}

.no-selection-icon {
  font-size: var(--font-size-6xl);
  opacity: .5;
  margin-bottom: 12px;
}

.no-selection-title {
  color: var(--gray-600);
  margin-bottom: 4px;
  font-weight: 500;
}

.no-selection-text {
  font-size: var(--font-size-md);
}

.global-styles-panel {
  padding: 16px;
}

.global-styles-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-900);
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.global-styles-subtitle {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin-bottom: 16px;
}

.global-style-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.global-style-option {
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  transition: all .15s;
  display: flex;
}

.global-style-option:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.global-style-option:hover .global-style-name {
  color: var(--gray-900);
}

.global-style-option.selected {
  border-color: var(--black);
  background: var(--gray-50);
}

.global-style-preview {
  background: #f3f4f6;
  flex-direction: column;
  width: 100%;
  height: 60px;
  margin-bottom: 6px;
  display: flex;
  overflow: hidden;
}

.global-style-name {
  font-size: var(--font-size-2xs);
  color: var(--gray-700);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 500;
  overflow: hidden;
}

.global-styles-hint {
  background: var(--gray-50);
  margin-top: 8px;
  padding: 12px;
}

.global-styles-hint p {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
  line-height: 1.5;
}

.canvas-color-picker {
  gap: var(--spacing-sm-xs);
  flex-wrap: wrap;
  display: flex;
}

.canvas-color-btn {
  border: 2px solid var(--gray-200);
  cursor: pointer;
  width: 28px;
  height: 28px;
  transition: all .15s;
  position: relative;
}

.canvas-color-btn:hover {
  border-color: var(--gray-400);
  transform: scale(1.1);
}

.canvas-color-btn.active {
  border-color: var(--black);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--black);
}

.canvas-color-custom {
  border: 2px dashed var(--gray-300);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  transition: all .15s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.canvas-color-custom:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.canvas-color-custom input[type="color"] {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
}

.canvas-color-custom-icon {
  font-size: var(--font-size-base);
  color: var(--gray-400);
  font-weight: 600;
}

.newsletter-color-controls {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.newsletter-color-row {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.newsletter-color-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.newsletter-color-input {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.newsletter-color-input .property-color {
  flex-shrink: 0;
}

.newsletter-color-input .property-input {
  flex: 1;
  min-width: 0;
}

.newsletter-color-reset {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  font-weight: 500;
  transition: all .15s;
}

.newsletter-color-reset:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.editor-canvas-inner.device-tablet, .editor-canvas-inner.device-mobile {
  overflow: hidden;
  box-shadow: 0 4px 20px #00000026;
}

.font-family-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.font-family-btn {
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  transition: all .15s;
  display: flex;
}

.font-family-btn:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.font-family-btn.active {
  border-color: var(--black);
  background: var(--gray-50);
}

.font-family-preview {
  color: var(--gray-800);
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.font-family-name {
  font-size: var(--font-size-2xs);
  color: var(--gray-500);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 500;
  overflow: hidden;
}

.font-family-btn.active .font-family-name {
  color: var(--gray-900);
  font-weight: 600;
}

.template-width-picker {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.template-width-btn {
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  transition: all .15s;
  display: flex;
}

.template-width-btn:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.template-width-btn.active {
  border-color: var(--black);
  background: var(--gray-50);
}

.template-width-preview {
  background: var(--gray-100);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16px;
  margin-bottom: 6px;
  display: flex;
  overflow: hidden;
}

.template-width-bar {
  background: var(--gray-400);
  height: 100%;
  transition: width .2s;
}

.template-width-btn.active .template-width-bar {
  background: var(--black);
}

.template-width-name {
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  margin-bottom: 2px;
  font-weight: 600;
}

.template-width-size {
  color: var(--gray-500);
  font-size: 9px;
}

.template-width-btn.active .template-width-name {
  color: var(--black);
}

.template-width-btn.active .template-width-size {
  color: var(--gray-700);
}

.template-variables-list {
  gap: var(--spacing-sm-xs);
  flex-wrap: wrap;
  display: flex;
}

.template-variable-tag {
  font-size: var(--font-size-xs);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 4px 8px;
  font-family: monospace;
}

.variables-section {
  border-top: 1px solid var(--gray-700);
  margin-top: 24px;
  padding-top: 24px;
}

.variables-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-400);
  margin-bottom: 12px;
  font-weight: 600;
}

.variable-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.variable-item {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  transition: all .15s;
  display: flex;
}

.variable-item:hover {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

.variable-item-code {
  color: var(--gray-300);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-family: monospace;
  overflow: hidden;
}

.variable-item-copy {
  font-size: var(--font-size-2xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.variable-item.copied {
  background: var(--gray-700);
  border-color: var(--white);
}

.variable-item.copied .variable-item-copy {
  color: var(--white);
}

.property-variables {
  border-top: 1px solid var(--gray-200);
  margin-top: 20px;
  padding-top: 20px;
}

.property-variables-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  margin-bottom: 10px;
  font-weight: 600;
}

.property-variable-chips {
  gap: var(--spacing-sm-xs);
  flex-wrap: wrap;
  display: flex;
}

.property-variable-chip {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  cursor: pointer;
  padding: 4px 8px;
  font-family: monospace;
  transition: all .15s;
}

.property-variable-chip:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.variables-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: 10px;
}

.image-upload-section {
  gap: var(--spacing-sm-md);
  flex-direction: column;
  margin-bottom: 16px;
  display: flex;
}

.image-upload-btn {
  cursor: pointer;
  width: 100%;
  font-size: var(--font-size-md);
  color: #fff;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-md);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  padding: 14px 18px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 8px #3b82f640;
}

.image-upload-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #3b82f659;
}

.image-upload-btn:active {
  transform: translateY(0);
}

.image-upload-icon, .image-picker-icon {
  font-size: 20px;
}

.image-picker-btn {
  cursor: pointer;
  width: 100%;
  font-size: var(--font-size-md);
  color: #374151;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-md);
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
  padding: 14px 18px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.image-picker-btn:hover {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #00000014;
}

.image-picker-btn:active {
  transform: translateY(0);
}

.image-picker-modal {
  z-index: 1100;
  background: #000000d9;
  justify-content: center;
  align-items: center;
  padding: 40px;
  display: flex;
  position: fixed;
  inset: 0;
}

.image-picker-content {
  background: var(--white);
  border: 2px solid var(--black);
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.image-picker-header {
  background: var(--black);
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.image-picker-title {
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.image-picker-close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--white);
  background: none;
  border: 2px solid #ffffff4d;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  transition: all .15s;
  display: flex;
}

.image-picker-close:hover {
  background: var(--white);
  color: var(--black);
}

.image-picker-search {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 20px;
  display: flex;
}

.image-picker-search-input {
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-300);
  background: var(--white);
  outline: none;
  flex: 1;
  padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}

.image-picker-search-input::placeholder {
  color: var(--gray-400);
}

.image-picker-search-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px #0000000d;
}

.image-picker-search-clear {
  background: var(--gray-200);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--gray-600);
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  transition: all .15s;
  display: flex;
}

.image-picker-search-clear:hover {
  background: var(--gray-300);
  color: var(--black);
}

.image-picker-categories {
  gap: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 20px;
  display: flex;
  overflow-x: auto;
}

.image-picker-category {
  font-size: var(--font-size-sm);
  background: var(--white);
  border: 1px solid var(--gray-300);
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 14px;
  transition: all .15s;
}

.image-picker-category:hover {
  border-color: var(--black);
}

.image-picker-category.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.image-picker-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.image-picker-grid {
  gap: var(--spacing-md-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.image-picker-item {
  aspect-ratio: 3 / 2;
  background: var(--gray-100);
  cursor: pointer;
  border: 2px solid #0000;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}

.image-picker-item:hover {
  border-color: var(--black);
  transform: scale(1.02);
}

.image-picker-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-picker-item-loading {
  background: var(--gray-100);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.image-picker-item-credit {
  color: var(--white);
  font-size: var(--font-size-2xs);
  opacity: 0;
  background: linear-gradient(#0000, #000000b3);
  padding: 6px 8px;
  transition: opacity .15s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.image-picker-item:hover .image-picker-item-credit {
  opacity: 1;
}

.image-picker-loading {
  color: var(--gray-500);
  font-size: var(--font-size-base);
  justify-content: center;
  align-items: center;
  padding: 60px;
  display: flex;
}

.image-picker-refresh {
  border-top: 1px solid var(--gray-200);
  justify-content: center;
  padding: 16px 20px;
  display: flex;
}

.image-picker-refresh-btn {
  background: var(--white);
  border: 2px solid var(--black);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  padding: 10px 24px;
  font-weight: 600;
  transition: all .15s;
}

.image-picker-refresh-btn:hover {
  background: var(--black);
  color: var(--white);
}

.property-image-section {
  margin-bottom: 8px;
}

.property-image-preview {
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.property-image-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.property-image-actions {
  gap: 4px;
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
}

.property-image-action-btn {
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  color: var(--white);
  cursor: pointer;
  background: #0009;
  border: none;
  justify-content: center;
  align-items: center;
  transition: background .15s;
  display: flex;
}

.property-image-action-btn:hover {
  background: #000c;
}

.property-image-empty {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  padding: 12px;
}

.property-image-empty-actions {
  gap: 6px;
  display: flex;
}

.property-image-upload-btn {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  cursor: pointer;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.property-image-upload-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-800);
}

.image-focus-grid {
  aspect-ratio: 1;
  background: var(--gray-200);
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 100px;
  padding: 4px;
  display: grid;
}

.focus-btn {
  background: var(--gray-300);
  cursor: pointer;
  border: 2px solid #0000;
  transition: all .15s;
}

.focus-btn:hover {
  background: var(--gray-400);
}

.focus-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px #0066cc4d;
}

.property-textarea.property-code {
  font-family: SF Mono, Monaco, monospace;
  font-size: var(--font-size-sm);
  color: #e5e5e5;
  border-color: var(--gray-700);
  background: #1a1a1a;
}

.template-picker {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.template-picker-header {
  text-align: center;
  margin-bottom: 40px;
}

.template-picker-nav {
  margin-bottom: 16px;
}

.template-picker-back {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  padding: 8px 16px;
  transition: all .15s;
  display: inline-flex;
}

.template-picker-back:hover {
  border-color: var(--black);
  color: var(--black);
}

.template-picker-title {
  font-size: var(--font-size-6xl);
  letter-spacing: -.5px;
  margin-bottom: 8px;
  font-weight: 700;
}

.template-picker-subtitle {
  color: var(--gray-500);
  font-size: 18px;
}

.template-picker-section {
  margin-bottom: 48px;
}

.template-picker-section-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.template-picker-section-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.template-picker-section-header .template-picker-section-title {
  margin-bottom: 0;
}

.template-picker-toggle {
  background: var(--white);
  border: 2px solid var(--black);
  font-size: var(--font-size-md);
  cursor: pointer;
  padding: 10px 20px;
  font-weight: 600;
  transition: all .15s;
}

.template-picker-toggle:hover {
  background: var(--black);
  color: var(--white);
}

.pattern-picker {
  width: 100%;
}

.pattern-picker-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}

.pattern-picker-item {
  background: var(--white);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  display: flex;
}

.pattern-picker-item:hover {
  border-color: var(--gray-400);
}

.pattern-picker-item.active {
  border-color: var(--primary);
  background: var(--primary-50);
}

.pattern-picker-preview {
  border: 1px solid var(--gray-200);
  width: 100%;
  height: 32px;
}

.pattern-picker-name {
  color: var(--gray-600);
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
}

.pattern-picker-item.active .pattern-picker-name {
  color: var(--primary);
  font-weight: 500;
}

.pattern-picker-controls {
  border-top: 1px solid var(--gray-200);
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
}

.pattern-color-toggle {
  gap: 8px;
  display: flex;
}

.pattern-color-btn {
  border: 2px solid var(--gray-200);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  flex: 1;
  padding: 8px 12px;
  font-weight: 500;
}

.pattern-color-btn.dark {
  color: #fff;
  background: #1a1a1a;
}

.pattern-color-btn.light {
  background: var(--white);
  color: #1a1a1a;
}

.pattern-color-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-100);
}

.pattern-opacity-header {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  justify-content: space-between;
  display: flex;
}

.pattern-opacity-row {
  align-items: center;
  gap: 12px;
  display: flex;
}

.pattern-opacity-slider {
  -webkit-appearance: none;
  background: var(--gray-200);
  cursor: pointer;
  flex: 1;
  height: 4px;
}

.pattern-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--primary);
  cursor: pointer;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 4px #0003;
}

.pattern-opacity-preview {
  border: 1px solid var(--gray-200);
  flex-shrink: 0;
  width: 48px;
  height: 32px;
}

.theme-selector {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.theme-btn {
  align-items: center;
  gap: var(--spacing-sm-xs);
  border: 2px solid var(--gray-300);
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  min-width: 70px;
  padding: 10px 12px;
  transition: all .15s;
  display: flex;
}

.theme-btn-name {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-600);
}

.theme-btn.active .theme-btn-name {
  color: var(--black);
  font-weight: 600;
}

.theme-color-grid {
  gap: var(--spacing-md-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.theme-color-btn {
  align-items: center;
  gap: var(--spacing-sm-md);
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  padding: 12px 16px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.theme-color-btn:hover {
  border-color: var(--border-default);
  background: var(--bg-tertiary);
}

.theme-color-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.theme-color-swatch {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px #0000001a;
}

.theme-color-name {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.theme-color-check {
  color: var(--primary);
  position: absolute;
  right: 12px;
}

.theme-mode-grid {
  gap: var(--spacing-md-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.theme-mode-btn {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  padding: 20px 16px;
  transition: all .2s;
  display: flex;
}

.theme-mode-btn:hover {
  border-color: var(--border-default);
  background: var(--bg-tertiary);
}

.theme-mode-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.theme-mode-icon {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.theme-mode-btn.active .theme-mode-icon {
  color: var(--primary);
}

.theme-mode-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.theme-switcher {
  padding: var(--spacing-md);
}

.theme-switcher-label {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.theme-switcher-grid {
  gap: var(--spacing-md);
  flex-direction: column;
  max-height: 400px;
  display: flex;
  overflow-y: auto;
}

.theme-category-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-xs);
  font-size: 11px;
  font-weight: 500;
  display: block;
}

.theme-options {
  gap: var(--spacing-xs);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.theme-option {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  transition: all .15s;
  display: flex;
}

.theme-option:hover {
  border-color: var(--primary);
  background: var(--bg-tertiary);
}

.theme-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.theme-swatch {
  width: 100%;
  height: 24px;
  display: flex;
  overflow: hidden;
}

.theme-swatch .swatch-bg {
  background: var(--swatch-bg);
  flex: 2;
}

.theme-swatch .swatch-primary {
  background: var(--swatch-primary);
  flex: 1;
}

.theme-swatch .swatch-text {
  background: var(--swatch-text);
  flex: 1;
}

.theme-name {
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 9px;
  overflow: hidden;
}

.newsletter-colors-panel {
  padding: var(--spacing-md);
}

.newsletter-colors-panel .panel-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.newsletter-colors-panel .panel-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.newsletter-colors-panel .reset-btn {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 11px;
}

.newsletter-colors-panel .reset-btn:hover {
  color: var(--primary);
  text-decoration: underline;
}

.color-fields {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.color-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.color-field-label {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.color-field-label .label-text {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
}

.color-field-label .label-hint {
  color: var(--text-muted);
  font-size: 10px;
}

.color-input-row {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.color-input-row .color-picker {
  border: 1px solid var(--border-light);
  cursor: pointer;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
}

.color-input-row .color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-input-row .color-picker::-webkit-color-swatch {
  border: none;
}

.color-input-row .color-text {
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-primary);
  flex: 1;
  padding: 6px 8px;
  font-family: monospace;
  font-size: 12px;
}

.color-input-row .color-text::placeholder {
  color: var(--text-muted);
  font-family: inherit;
}

.color-input-row .color-text:focus {
  border-color: var(--primary);
  outline: none;
}

.widget-category {
  margin-bottom: 8px;
}

.widget-category-header {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  width: 100%;
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.widget-category-header:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.widget-category-header.expanded {
  background: var(--gray-200);
  color: var(--gray-800);
  border-bottom-color: #0000;
}

.widget-category-arrow {
  font-size: 18px;
  font-weight: 400;
}

.widget-category-content {
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s;
  display: grid;
}

.widget-category-content.expanded {
  grid-template-rows: 1fr;
}

.widget-category-items {
  gap: var(--spacing-sm);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-top: none;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  transition: padding .25s;
  display: grid;
  overflow: hidden;
}

.expanded .widget-category-items {
  padding: 8px;
}

.widget-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: grab;
  color: var(--gray-700);
  text-align: center;
  flex-direction: column;
  padding: 12px 8px;
  transition: all .15s;
  display: flex;
}

.widget-item:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--black);
}

.widget-item:active {
  cursor: grabbing;
}

.widget-icon {
  background: var(--gray-100);
  width: 32px;
  height: 32px;
  color: var(--gray-600);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  display: flex;
}

.widget-item:hover .widget-icon {
  background: var(--gray-200);
  color: var(--black);
}

.widget-info {
  gap: var(--spacing-2xs);
  text-align: center;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.widget-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.widget-desc {
  font-size: var(--font-size-2xs);
  color: var(--gray-400);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: none;
  overflow: hidden;
}

.widget-item:hover .widget-desc {
  color: var(--gray-500);
}

.canvas-block-type {
  background: var(--gray-200);
  width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  opacity: 0;
  justify-content: center;
  align-items: center;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  top: 8px;
  left: 8px;
}

.canvas-block:hover .canvas-block-type, .canvas-block.selected .canvas-block-type {
  opacity: 1;
}

.canvas-block.dragging {
  opacity: .5;
  cursor: grabbing;
}

.canvas-empty-actions {
  gap: var(--spacing-sm);
  margin-top: 20px;
  display: flex;
}

.canvas-quick-add {
  background: var(--white);
  border: 2px solid var(--gray-300);
  font-size: var(--font-size-md);
  color: var(--gray-600);
  cursor: pointer;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .15s;
}

.canvas-quick-add:hover {
  border-color: var(--black);
  color: var(--black);
}

.canvas-add-wrapper {
  z-index: 20;
  position: absolute;
  bottom: 0;
  right: -48px;
}

.canvas-add-circle {
  background: var(--white);
  border: 2px solid var(--gray-300);
  width: 36px;
  height: 36px;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  box-shadow: 0 2px 6px #0000001a;
}

.canvas-add-circle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light, #3b82f614);
  box-shadow: 0 3px 10px #3b82f633;
}

.canvas-add-circle.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 3px 10px #3b82f64d;
}

.canvas-add-dropdown {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  width: 180px;
  max-height: 320px;
  padding: var(--spacing-xs);
  flex-direction: column;
  gap: 2px;
  animation: .15s dropdownFadeIn;
  display: flex;
  position: absolute;
  bottom: 44px;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 8px 24px #00000026;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%)translateY(0);
  }
}

.canvas-add-option {
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  padding: 8px 10px;
  transition: all .1s;
  display: flex;
}

.canvas-add-option:hover {
  background: var(--gray-100);
  color: var(--black);
}

.canvas-add-option svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.canvas-add-option:hover svg {
  color: var(--gray-700);
}

.no-selection-tips {
  border-top: 1px solid var(--gray-200);
  text-align: left;
  margin-top: 24px;
  padding-top: 20px;
}

.tip-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-500);
  margin-bottom: 12px;
  font-weight: 600;
}

.tip-item {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: 8px;
  display: flex;
}

.tip-item kbd {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  font-family: monospace;
  font-size: var(--font-size-xs);
  padding: 3px 6px;
  display: inline-block;
}

.article-url-fetch {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  margin-bottom: 4px;
  padding: 12px;
}

.url-fetch-row {
  gap: var(--spacing-sm);
  display: flex;
}

.url-fetch-row .property-input {
  flex: 1;
}

.fetch-btn {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-md);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: opacity .15s;
}

.fetch-btn:hover {
  opacity: .9;
}

.fetch-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.url-fetch-actions {
  gap: var(--spacing-sm);
  margin-top: 8px;
  display: flex;
}

.reset-btn, .clear-btn {
  font-size: var(--font-size-sm);
  cursor: pointer;
  flex: 1;
  padding: 6px 12px;
  font-weight: 500;
  transition: all .15s;
}

.reset-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.reset-btn:hover {
  background: var(--gray-200);
}

.clear-btn {
  border: 1px solid var(--error);
  color: var(--error);
  background: none;
}

.clear-btn:hover {
  background: var(--error);
  color: var(--white);
}

.optimize-panel {
  min-height: 0;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
  flex-direction: column;
  flex: 1 1 0;
  padding-bottom: 120px;
  display: flex;
  overflow: hidden auto;
}

.optimize-summary {
  gap: var(--spacing-sm);
  display: flex;
}

.optimize-badge {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  flex: 1;
  display: flex;
}

.optimize-badge .badge-icon {
  color: var(--gray-500);
}

.optimize-badge .badge-count {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
}

.optimize-badge.warning {
  background: var(--yellow-50);
  border: 1px solid var(--yellow-200);
}

.optimize-badge.warning .badge-icon {
  color: var(--yellow-600);
}

.optimize-badge.warning .badge-count {
  color: var(--yellow-700);
}

.optimize-badge.success {
  background: var(--green-50);
  border: 1px solid var(--green-200);
}

.optimize-badge.success .badge-icon {
  color: var(--green-600);
}

.optimize-section {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.optimize-section-header {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  display: flex;
}

.optimize-section-header .section-icon {
  color: var(--gray-500);
}

.optimize-section-header.warning .section-icon {
  color: var(--yellow-600);
}

.optimize-section-header.info .section-icon {
  color: var(--primary);
}

.optimize-issues-list, .optimize-tips-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.optimize-issue-item, .optimize-tip-item {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  border-bottom: 1px solid var(--border-light);
  display: flex;
}

.optimize-issue-item:last-child, .optimize-tip-item:last-child {
  border-bottom: none;
}

.optimize-issue-item .item-icon, .optimize-tip-item .item-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.optimize-issue-item .item-icon {
  color: var(--yellow-600);
}

.optimize-tip-item .item-icon {
  color: var(--primary);
}

.optimize-empty {
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.optimize-empty .optimize-success-icon {
  color: var(--green-500);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.optimize-empty p {
  margin: 0;
}

.optimize-link-analysis {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.optimize-link-analysis-copy {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

.optimize-analyze-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--gray-900);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: 10px 12px;
  display: inline-flex;
}

.optimize-analyze-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.optimize-analyze-button .spin {
  animation: 1s linear infinite optimize-spin;
}

.optimize-analysis-error {
  color: var(--red-600);
  font-size: var(--font-size-xs);
  margin: 0;
}

.optimize-link-results {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.optimize-link-story {
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--blue-50), var(--white));
  border: 1px solid var(--blue-100);
}

.optimize-link-story strong {
  font-size: var(--font-size-xs);
  color: var(--gray-900);
  margin-bottom: 4px;
  display: block;
}

.optimize-link-story p {
  color: var(--gray-700);
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.optimize-link-kpis {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.optimize-link-kpi {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.optimize-link-kpi .label {
  color: var(--gray-500);
  margin-bottom: 4px;
  font-size: 11px;
  display: block;
}

.optimize-link-kpi strong {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
}

.optimize-link-list, .optimize-link-warning-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.optimize-link-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.optimize-link-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  background: var(--white);
}

.optimize-link-item.warning {
  border-color: var(--yellow-300);
  background: var(--yellow-50);
}

.optimize-link-item.error {
  border-color: var(--red-300);
  background: var(--red-50);
}

.optimize-link-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  display: flex;
}

.optimize-link-row strong {
  font-size: var(--font-size-xs);
  color: var(--gray-900);
  display: block;
}

.optimize-link-row p {
  color: var(--gray-600);
  word-break: break-word;
  margin: 4px 0 0;
  font-size: 11px;
}

.optimize-link-score {
  text-align: center;
  background: var(--gray-900);
  min-width: 42px;
  color: var(--white);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  border-radius: 999px;
  padding: 4px 8px;
}

.optimize-link-meta {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.optimize-link-meta span {
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}

.optimize-link-risk {
  margin-top: var(--spacing-xs);
  width: fit-content;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
}

.optimize-link-risk-low {
  background: var(--green-50);
  color: var(--green-700);
}

.optimize-link-risk-medium {
  background: var(--yellow-50);
  color: var(--yellow-700);
}

.optimize-link-risk-high {
  background: var(--red-50);
  color: var(--red-700);
}

.optimize-link-summary, .optimize-link-recommendation {
  margin: var(--spacing-xs) 0 0;
  color: var(--gray-700);
  font-size: 11px;
  line-height: 1.5;
}

.optimize-link-warning-list {
  margin-top: var(--spacing-xs);
}

.optimize-link-warning-list li {
  color: var(--gray-700);
  padding-left: 14px;
  font-size: 11px;
  line-height: 1.45;
  position: relative;
}

.optimize-link-warning-list li:before {
  content: "";
  background: var(--yellow-600);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: 0;
}

@keyframes optimize-spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.sections-tab {
  padding: var(--spacing-sm);
}

.sections-group {
  margin-bottom: var(--spacing-xs);
}

.sections-group-header {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-sm);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  border: none;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.sections-group-header:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.sections-group-count {
  background: var(--gray-200);
  color: var(--gray-600);
  text-align: center;
  border-radius: var(--radius-sm);
  min-width: 18px;
  margin-left: auto;
  padding: 1px 5px;
  font-size: 10px;
}

.sections-group-items {
  flex-direction: column;
  gap: 0;
  animation: .2s sections-expand;
  display: flex;
  position: relative;
}

@keyframes sections-expand {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 500px;
  }
}

.sections-item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-sm) 6px 0;
  cursor: pointer;
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  text-align: left;
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  position: relative;
}

.sections-item:before {
  content: "";
  left: var(--tree-indent, 12px);
  background: var(--gray-300);
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.sections-item:after {
  content: "";
  left: var(--tree-indent, 12px);
  background: var(--gray-300);
  width: 10px;
  height: 1px;
  position: absolute;
  top: 50%;
}

.sections-item:last-child:before {
  bottom: 50%;
}

.sections-item:hover {
  background: var(--gray-100);
  color: var(--black);
}

.sections-item:hover:before, .sections-item:hover:after {
  background: var(--gray-500);
}

.sections-item.active {
  background: var(--gray-100);
  color: var(--black);
  font-weight: 500;
}

.sections-item.active:before, .sections-item.active:after {
  background: var(--black);
}

.sections-item.active .sections-item-icon {
  color: var(--black);
}

.sections-item-toggle {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  z-index: 1;
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sections-item-toggle:hover {
  color: var(--black);
}

.sections-item-icon {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
  z-index: 1;
  background: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sections-item-icon svg {
  width: 14px;
  height: 14px;
}

.sections-item-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.sections-item--sub {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  padding-top: 4px;
  padding-bottom: 4px;
}

.sections-item--sub .sections-item-icon {
  width: 14px;
  height: 14px;
}

.sections-item--sub .sections-item-icon svg {
  width: 11px;
  height: 11px;
}

.sections-item-label--sub {
  color: var(--gray-400);
  font-size: 11px;
}

.sections-empty {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-2xl) var(--spacing-md);
  color: var(--gray-400);
  text-align: center;
  font-size: var(--font-size-sm);
  flex-direction: column;
  display: flex;
}

.section-templates-tab {
  padding: var(--spacing-sm);
}

.section-templates-title {
  font-size: var(--font-size-base);
  padding: var(--spacing-xs) 0;
  margin: 0;
  font-weight: 600;
}

.section-categories {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.section-category-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  flex-direction: column;
  width: 100%;
  transition: all .15s;
  display: flex;
  overflow: hidden;
}

.section-category-card:hover {
  border-color: var(--gray-400);
  box-shadow: 0 2px 8px #00000014;
}

.section-category-preview {
  background: var(--gray-50);
  width: 100%;
  height: 80px;
  position: relative;
  overflow: hidden;
}

.section-category-iframe {
  transform-origin: top;
  pointer-events: none;
  border: none;
  width: 600px;
  height: 300px;
  margin-left: -300px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: scale(.42);
}

.section-category-bottom {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--gray-200);
  align-items: center;
  display: flex;
}

.section-category-bottom svg:last-child {
  color: var(--gray-400);
  margin-left: auto;
}

.section-category-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.section-category-label {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  font-weight: 600;
}

.section-category-count {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.section-templates-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.section-template-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  text-align: left;
  flex-direction: column;
  width: 100%;
  transition: all .15s;
  display: flex;
  overflow: hidden;
}

.section-template-card:hover {
  border-color: var(--black);
  box-shadow: 0 2px 8px #0000001a;
}

.section-template-card:hover .section-template-info {
  background: var(--gray-100);
}

.section-template-iframe-wrap {
  background: var(--gray-50);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 110px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-template-iframe {
  transform-origin: top;
  pointer-events: none;
  border: none;
  width: 600px;
  height: 400px;
  margin-left: -300px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: scale(.5);
}

.section-template-info {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--gray-200);
  transition: background .15s;
  display: flex;
}

.section-template-info svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.section-template-name {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 500;
}

.rss-import-tab {
  gap: var(--spacing-xs);
  flex-direction: column;
  height: 100%;
  display: flex;
}

.rss-import-tab__filters {
  padding: 0 var(--spacing-xs);
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.rss-import-tab__brand-selector {
  padding: 0 var(--spacing-xs);
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.rss-import-tab__brand-selector span {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
}

.rss-import-tab__brand-selector select {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  padding: 8px 10px;
}

.rss-feed-chip {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 8px;
  transition: all .15s;
}

.rss-feed-chip:hover {
  border-color: var(--primary);
}

.rss-feed-chip--active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.rss-import-tab__items {
  padding: 0 var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
  overflow-y: auto;
}

.rss-import-tab__empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  color: var(--gray-500);
  text-align: center;
  font-size: var(--font-size-sm);
  flex-direction: column;
  display: flex;
}

.rss-import-tab__hint {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.rss-import-tab__link {
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-xs);
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.rss-import-tab__link:hover {
  opacity: .92;
}

.rss-import-tab__actions {
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-top: 1px solid var(--gray-200);
  align-items: center;
  display: flex;
}

.rss-import-tab__clear {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  padding: 4px 8px;
}

.rss-import-tab__clear:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.rss-import-tab__import-btn {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-weight: 500;
  display: flex;
}

.rss-import-tab__import-btn:hover {
  opacity: .9;
}

.rss-item-card {
  align-items: flex-start;
  gap: var(--spacing-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  width: 100%;
  padding: 6px;
  transition: border-color .15s;
  display: flex;
}

.rss-item-card:hover {
  border-color: var(--primary);
}

.rss-item-card--selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--white));
}

.rss-item-card__check {
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 1px;
}

.rss-item-card--selected .rss-item-card__check {
  color: var(--primary);
}

.rss-item-card__content {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.rss-item-card__title {
  font-size: var(--font-size-xs);
  color: var(--gray-900);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.rss-item-card__excerpt {
  color: var(--gray-500);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 10px;
  display: -webkit-box;
  overflow: hidden;
}

.rss-item-card__meta {
  gap: var(--spacing-xs);
  color: var(--gray-400);
  font-size: 10px;
  display: flex;
}

.rss-item-card__thumb {
  border-radius: var(--radius-xs, 2px);
  object-fit: cover;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.simple-editor {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.simple-editor-toolbar {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  display: flex;
}

.simple-editor-toolbar-group {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xs);
  display: flex;
}

.simple-editor-toolbar-divider {
  background: var(--border);
  width: 1px;
  height: 24px;
  margin: 0 var(--spacing-xs);
}

.simple-editor-btn {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.simple-editor-btn:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.simple-editor-btn:active {
  background: var(--primary-light);
  color: var(--primary);
}

.simple-editor-content {
  padding: var(--spacing-lg);
  min-height: 300px;
  color: var(--text-primary);
  outline: none;
  font-size: 1rem;
  line-height: 1.7;
}

.simple-editor-content:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.simple-editor-content h1, .simple-editor-content h2, .simple-editor-content h3 {
  color: var(--text-primary);
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.3;
}

.simple-editor-content h1:first-child, .simple-editor-content h2:first-child, .simple-editor-content h3:first-child {
  margin-top: 0;
}

.simple-editor-content h1 {
  font-size: 2rem;
}

.simple-editor-content h2 {
  font-size: 1.5rem;
}

.simple-editor-content h3 {
  font-size: 1.25rem;
}

.simple-editor-content p {
  margin-bottom: 1em;
}

.simple-editor-content ul, .simple-editor-content ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.simple-editor-content li {
  margin-bottom: .5em;
}

.simple-editor-content blockquote {
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--primary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin: 1.5em 0;
  font-style: italic;
}

.simple-editor-content a {
  color: var(--primary);
  text-decoration: underline;
}

.simple-editor-content img {
  max-width: 100%;
  height: auto;
  margin: var(--spacing-md) 0;
}

@media (max-width: 640px) {
  .simple-editor-toolbar {
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-2xs);
  }

  .simple-editor-toolbar-divider {
    display: none;
  }

  .simple-editor-btn {
    width: 28px;
    height: 28px;
  }

  .simple-editor-btn svg {
    width: 16px;
    height: 16px;
  }

  .simple-editor-content {
    padding: var(--spacing-md);
    min-height: 200px;
  }
}

.format-ribbon {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  z-index: 20;
  flex-shrink: 0;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 38px;
  padding: 4px 8px;
  display: flex;
  position: sticky;
  top: 0;
  overflow-x: auto;
  box-shadow: 0 1px 3px #00000014;
}

.format-ribbon::-webkit-scrollbar {
  height: 0;
}

.format-ribbon {
  animation: slideDownFade var(--duration-normal) var(--ease-out-expo);
}

.format-ribbon.disabled {
  animation: slideUpFade var(--duration-fast) var(--ease-out-quart) forwards;
  pointer-events: none;
}

.ribbon-group {
  border-right: 1px solid var(--gray-100);
  flex-shrink: 0;
  align-items: center;
  gap: 1px;
  padding: 0 3px;
  display: flex;
}

.ribbon-group:last-child {
  border-right: none;
}

.ribbon-btn {
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  color: var(--gray-600);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .1s;
  display: flex;
}

.ribbon-btn:hover {
  background: var(--gray-100);
  color: var(--black);
}

.ribbon-btn:active {
  background: var(--gray-200);
}

.ribbon-dd-xs {
  width: 72px;
}

.ribbon-dd-sm {
  width: 52px;
}

.ribbon-dd-md {
  width: 84px;
}

.ribbon-dd-lg {
  width: 120px;
}

.ribbon-color-btn {
  cursor: pointer;
  width: 26px;
  height: 26px;
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.ribbon-color-btn:hover {
  background: var(--gray-100);
  color: var(--black);
}

.ribbon-color-btn input[type="color"] {
  opacity: 0;
  cursor: pointer;
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.simple-editor-modal-overlay {
  z-index: 1000;
  padding: var(--spacing-md);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.simple-editor-modal {
  background: var(--surface);
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
}

.simple-editor-modal h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  font-size: 1.125rem;
  font-weight: 600;
}

.simple-editor-modal-field {
  margin-bottom: var(--spacing-md);
}

.simple-editor-modal-field label {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-size: .875rem;
  font-weight: 500;
  display: block;
}

.simple-editor-modal-field input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--duration-fast);
  font-size: 1rem;
}

.simple-editor-modal-field input:focus {
  border-color: var(--primary);
  outline: none;
}

.simple-editor-modal-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  display: flex;
}

.simple-editor-modal-cancel {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  font-size: .875rem;
  font-weight: 500;
}

.simple-editor-modal-cancel:hover {
  background: var(--bg-secondary);
}

.simple-editor-modal-confirm {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: none;
  font-size: .875rem;
  font-weight: 500;
}

.simple-editor-modal-confirm:hover {
  background: var(--primary-dark);
}

.editor-modal-overlay {
  z-index: 1000;
  padding: var(--spacing-md);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.editor-modal {
  background: var(--white);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
}

.editor-modal-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.editor-modal-header strong {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.editor-modal-close {
  background: var(--bg-secondary);
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.editor-modal-close:hover {
  background: var(--bg-tertiary, var(--gray-200, #e5e7eb));
  color: var(--text-primary);
}

.editor-modal-body {
  padding: var(--spacing-md);
}

.editor-modal-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

.editor-modal-form {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.editor-modal-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.editor-modal-input {
  border: 1px solid var(--border-color);
  width: 100%;
  font-size: var(--font-size-sm);
  background: var(--white);
  color: var(--text-primary);
  padding: 10px 12px;
  transition: border-color .15s;
}

.editor-modal-input:focus {
  border-color: var(--primary);
  outline: none;
}

.editor-modal-input::placeholder {
  color: var(--text-tertiary);
}

.editor-modal-textarea {
  resize: vertical;
  min-height: 60px;
}

.editor-modal-btn {
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-top: var(--spacing-sm);
  border: none;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .15s;
}

.editor-modal-btn.primary {
  background: var(--primary);
  color: var(--white);
}

.editor-modal-btn.primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

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

.editor-modal-btn.secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

.editor-modal-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.editor-modal-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  display: flex;
}

.editor-modal-result {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.editor-modal-result.success {
  background: var(--success-light, #22c55e1a);
  color: var(--success);
  border: 1px solid var(--success);
}

.editor-modal-result.error {
  background: var(--error-light, #ef44441a);
  color: var(--error);
  border: 1px solid var(--error);
}

.settings-form-compact {
  gap: var(--spacing-sm);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.settings-field-compact {
  flex-direction: column;
  gap: 2px;
  width: 100%;
  display: flex;
}

.settings-field-compact label {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  display: flex;
}

.settings-input-compact {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 11px;
  transition: border-color .15s, box-shadow .15s;
}

.settings-input-compact::placeholder {
  color: var(--text-tertiary);
}

.settings-input-compact:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
  outline: none;
}

.settings-input-compact:not(:placeholder-shown) {
  border-color: var(--success);
  background: var(--success-light);
}

.social-input-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  justify-content: flex-start;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  overflow: hidden;
}

.social-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.social-input-wrapper:has(input:not(:placeholder-shown)) {
  border-color: var(--success);
  background: var(--success-light);
}

.social-prefix {
  color: var(--text-tertiary);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  padding: 6px 0 6px 8px;
  font-size: 10px;
}

.social-input {
  flex: 1;
  min-width: 0;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  padding: 6px 8px 6px 2px !important;
  font-size: 11px !important;
}

.social-input:focus {
  box-shadow: none !important;
}

.editor-settings-panel {
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

.settings-accordion[open] .settings-accordion-header:after {
  transform: rotate(180deg);
}

.settings-accordion-header {
  cursor: pointer;
  background: var(--gray-100);
  color: var(--gray-700);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.settings-accordion-header::-webkit-details-marker {
  display: none;
}

.settings-accordion-header:after {
  content: "▼";
  color: var(--gray-400);
  font-size: 8px;
  transition: transform .2s;
}

.settings-accordion-header:hover {
  background: var(--gray-200);
}

.settings-accordion-hint {
  color: var(--gray-500);
  margin-right: 6px;
  font-size: 9px;
  font-weight: 400;
}

.settings-accordion-content {
  gap: var(--spacing-sm);
  background: var(--white);
  flex-direction: column;
  padding: 10px 12px;
  display: flex;
  overflow: hidden;
}

.settings-field {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.settings-field label {
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 500;
}

.settings-field input {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  transition: border-color .15s;
}

.settings-field input:focus {
  border-color: var(--gray-500);
  outline: none;
}

.settings-field input::placeholder {
  color: var(--gray-400);
}

.settings-field-row {
  gap: var(--spacing-xs);
  width: 100%;
  display: flex;
}

.preview-modal {
  z-index: 1000;
  animation: fadeIn var(--duration-fast) var(--ease-out-quart);
  background: #00000080;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 12px;
  display: flex;
  position: fixed;
  inset: 0;
}

.preview-modal.closing {
  animation: fadeOut var(--duration-normal) var(--ease-out-quart) forwards;
}

.preview-content {
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  height: 94vh;
  animation: slideUpFromBottom var(--duration-normal) var(--ease-out-expo);
  flex-direction: column;
  align-self: center;
  display: flex;
  overflow: hidden;
  box-shadow: 0 -8px 40px #0003;
}

.closing .preview-content {
  animation: slideDownToBottom var(--duration-normal) var(--ease-out-quart) forwards;
}

.preview-header {
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  display: flex;
}

.preview-title {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  font-weight: 600;
}

.preview-close-link {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  color: var(--gray-600);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 0;
  transition: all .15s;
  display: flex;
}

.preview-close-link:before {
  content: "✕";
  font-size: 14px;
}

.preview-close-link:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.preview-toolbar {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  padding: 6px 20px;
  display: flex;
}

.preview-tabs {
  gap: var(--spacing-sm);
  display: flex;
}

.preview-tab {
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  padding: 6px 16px;
  transition: all .15s;
}

.preview-tab:hover {
  color: var(--gray-900);
}

.preview-tab.active {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.preview-send-test {
  color: var(--primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  display: flex;
}

.preview-send-test:hover {
  text-decoration: underline;
}

.preview-main {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.preview-body-wrapper {
  background: var(--gray-100);
  flex: 1;
  justify-content: center;
  padding: 16px;
  display: flex;
  overflow-y: auto;
}

.preview-body {
  background: none;
  border: 0;
  align-self: flex-start;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  transition: max-width .3s;
  display: block;
}

.preview-body-desktop {
  max-width: 900px;
}

.preview-body-mobile {
  max-width: 375px;
}

.preview-sidebar {
  border-left: 1px solid var(--gray-200);
  background: var(--white);
  width: 260px;
  min-width: 260px;
  padding: 16px;
  overflow-y: auto;
}

.preview-sidebar-title {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  text-align: center;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
  padding-bottom: 16px;
  font-weight: 600;
}

.preview-sidebar-field {
  border-bottom: 1px solid var(--gray-100);
  padding: 14px 0;
}

.preview-sidebar-label {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  margin-bottom: 4px;
  font-weight: 600;
  display: block;
}

.preview-sidebar-value {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  word-break: break-word;
  line-height: 1.4;
  display: block;
}

.preview-sidebar-value em {
  color: var(--gray-400);
  font-style: italic;
}

.editor-toolbar {
  gap: var(--spacing-xs);
  border-right: 1px solid #fff3;
  margin-right: 16px;
  padding-right: 16px;
  display: flex;
}

.editor-toolbar-btn {
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  color: var(--white);
  cursor: pointer;
  background: #ffffff1a;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.editor-toolbar-btn svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.editor-toolbar-btn:hover:not(:disabled) {
  background: #fff3;
}

.editor-toolbar-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.device-preview-toggle {
  gap: var(--spacing-2xs);
  background: #ffffff1a;
  margin-right: 16px;
  padding: 4px;
  display: flex;
}

.device-btn {
  color: #ffffff80;
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  transition: all .15s;
  display: flex;
}

.device-btn:hover {
  color: #fffc;
  background: #ffffff1a;
}

.device-btn.active {
  color: var(--white);
  background: #fff3;
}

.history-btn {
  width: 32px;
  height: 32px;
  color: var(--white);
  cursor: pointer;
  background: #ffffff1a;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.history-btn:hover:not(:disabled) {
  background: #fff3;
}

.history-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.editor-save-btn {
  background: var(--white);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  padding: 8px 20px;
  font-weight: 600;
  transition: all .15s;
}

.editor-save-btn:hover:not(:disabled) {
  background: var(--gray-100);
}

.editor-save-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.editor-save-btn.dirty {
  background: var(--primary);
  color: var(--white);
}

.editor-save-btn.dirty:hover:not(:disabled) {
  background: var(--primary-hover);
}

.editor-send-btn {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--success);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.editor-send-btn:hover {
  background: var(--success-hover, #16a34a);
}

.properties-back-btn {
  align-items: center;
  gap: var(--spacing-xs);
  border: none;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-600);
  cursor: pointer;
  text-align: left;
  width: 100%;
  animation: fadeIn var(--duration-fast) var(--ease-out-quart);
  background: none;
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.properties-back-btn:hover {
  color: var(--black);
  background: var(--gray-50);
}

.properties-panel {
  min-height: 0;
  animation: slideInRight var(--duration-normal) var(--ease-out-expo);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.properties-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.properties-header svg {
  color: var(--gray-400);
  width: 14px;
  height: 14px;
}

.properties-tabs {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  padding: 0;
  display: flex;
}

.properties-tab {
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
}

.properties-tab:hover {
  color: var(--gray-800);
  background: var(--gray-100);
}

.properties-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
  font-weight: 600;
}

.properties-header-toggle {
  width: 100%;
  padding: var(--spacing-md-sm) var(--spacing-md);
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-align: left;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: background-color .15s;
  display: flex;
}

.properties-header-toggle:hover {
  background: var(--bg-tertiary);
}

.properties-header-toggle svg {
  color: var(--text-secondary);
  width: var(--icon-md);
  height: var(--icon-md);
}

.properties-form {
  padding: 0 var(--spacing-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 80px;
  display: flex;
  overflow: hidden auto;
}

.properties-form::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.properties-form::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background: none;
}

.properties-form::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background .15s;
}

.properties-form::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.property-row {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.property-button-group, .property-btn-group {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  gap: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.property-btn {
  background: var(--white);
  border: none;
  border-right: 1px solid var(--gray-200);
  cursor: pointer;
  color: var(--gray-600);
  text-align: center;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 500;
  transition: all .15s;
}

.property-btn:last-child {
  border-right: none;
}

.property-btn svg {
  width: 16px;
  height: 16px;
}

.property-btn:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.property-btn.active {
  background: var(--black);
  color: var(--white);
}

.property-color {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  height: 28px;
  padding: 2px;
}

.property-range {
  width: 100%;
  height: var(--spacing-sm-xs);
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  appearance: none;
  cursor: pointer;
}

.property-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--icon-lg);
  height: var(--icon-lg);
  background: var(--primary);
  cursor: pointer;
  border-radius: 50%;
}

.property-range-value {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-top: var(--spacing-sm);
}

.property-checkboxes {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.property-checkbox {
  cursor: pointer;
  color: var(--gray-700);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.property-checkbox input {
  width: 14px;
  height: 14px;
  accent-color: var(--black);
}

.property-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: var(--spacing-sm-xs);
  line-height: 1.4;
}

.property-hint.property-hint-success {
  color: var(--success);
  background: var(--success-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-xs);
}

.property-hint.property-hint-warning {
  color: var(--warning, #b45309);
  margin-top: var(--spacing-xs);
}

.property-divider {
  background: var(--gray-100);
  height: 1px;
  margin: 8px 0;
}

.property-color-row {
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  display: flex;
}

.property-color-input {
  width: 36px;
  height: 28px;
  padding: var(--spacing-2xs);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--white);
}

.property-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.property-color-input::-webkit-color-swatch {
  border-radius: var(--radius-xs);
  border: none;
}

.property-color-text {
  padding: var(--spacing-sm-xs) var(--spacing-sm-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  flex: 1;
  font-family: monospace;
}

.property-color-text:focus {
  border-color: var(--primary);
  outline: none;
}

.color-picker-swatches {
  position: relative;
}

.color-picker-trigger {
  align-items: center;
  gap: var(--spacing-sm-xs);
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s;
  display: flex;
}

.color-picker-trigger:hover {
  border-color: var(--gray-400);
}

.color-picker-preview {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-xs);
  border: 1px solid var(--gray-300);
  flex-shrink: 0;
}

.color-picker-value {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  text-align: left;
  flex: 1;
}

.color-picker-dropdown {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  z-index: 100;
  width: 100%;
  max-width: 200px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  box-shadow: 0 2px 8px #0000001f;
}

.color-picker-swatches-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  display: grid;
}

.color-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  border-radius: 2px;
  width: 100%;
  padding: 0;
  transition: transform .1s;
}

.color-swatch:hover {
  z-index: 1;
  transform: scale(1.1);
}

.color-swatch.active {
  box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--primary);
}

.color-picker-header {
  border-bottom: 1px solid var(--gray-100);
  justify-content: flex-end;
  margin-bottom: 6px;
  padding-bottom: 6px;
  display: flex;
}

.color-picker-advanced-content {
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  display: flex;
}

.color-picker-native {
  cursor: pointer;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  width: 32px;
  height: 24px;
  padding: 0;
}

.color-picker-native::-webkit-color-swatch {
  border: 1px solid var(--gray-200);
  border-radius: 3px;
}

.color-picker-hex-input {
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  flex: 1;
  padding: 4px 6px;
  font-family: monospace;
  font-size: 10px;
}

.color-picker-hex-input:focus {
  border-color: var(--primary);
  outline: none;
}

.property-section-stack {
  flex-direction: column;
  display: flex;
}

.property-details, .property-details[open] > .property-summary {
  border-bottom: 1px solid var(--gray-100);
}

.property-details[open] > .property-summary:after {
  transform: rotate(180deg);
}

.property-summary {
  padding: 10px var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  list-style: none;
  transition: background .15s;
  display: flex;
}

.property-summary:hover {
  background: var(--gray-50);
}

.property-summary::-webkit-details-marker {
  display: none;
}

.property-summary:after {
  content: "›";
  color: var(--gray-400);
  font-size: 14px;
  transition: transform .2s;
  transform: rotate(90deg);
}

.property-section-inner {
  padding: var(--spacing-sm) var(--spacing-md);
  gap: var(--spacing-sm);
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.property-color-row {
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  display: flex;
}

.property-color-input {
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.property-color-input input[type="color"] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 2px;
}

.property-color-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.property-color-input input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.property-input-sm {
  flex-shrink: 1;
  width: 64px !important;
  min-width: 50px !important;
  height: 24px !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
}

.property-range-inline {
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  display: flex;
}

.property-range-inline input[type="range"] {
  appearance: none;
  background: var(--gray-200);
  cursor: pointer;
  border-radius: 2px;
  flex: 1;
  height: 4px;
}

.property-range-inline input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--black);
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.property-range-inline span {
  color: var(--gray-500);
  text-align: right;
  min-width: 32px;
  font-size: 11px;
}

.property-checks-inline {
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  display: flex;
}

.property-checks-inline label {
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: flex;
}

.property-social-row {
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 2px 0;
  transition: opacity .15s, background .15s;
  display: flex;
}

.property-social-row.dragging {
  opacity: .35;
}

.property-social-row.drag-over {
  background: var(--gray-50);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.property-social-row .property-input {
  flex: 1;
}

.property-social-drag-handle {
  color: var(--gray-300);
  cursor: grab;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.property-social-drag-handle:active {
  cursor: grabbing;
}

.property-social-drag-handle:hover {
  color: var(--gray-500);
}

.property-social-label {
  color: var(--gray-600);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}

.property-social-remove {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.property-social-remove:hover {
  color: var(--primary);
}

.social-mode-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  display: grid;
}

.social-mode-swatch {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  transition: all .15s;
  display: flex;
}

.social-mode-swatch:hover {
  border-color: var(--gray-400);
}

.social-mode-swatch.active {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.social-mode-swatch .social-mode-dot {
  background: var(--swatch-bg);
  border: var(--swatch-border);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.social-mode-swatch .social-mode-label {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 9px;
  font-weight: 500;
}

.property-row-inline {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 0;
  display: flex;
}

.property-label-inline {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  flex-shrink: 0;
  font-weight: 500;
}

.property-layout-preview {
  padding: 8px 12px;
}

.property-layout-thumb {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  justify-content: center;
  margin-bottom: 8px;
  padding: 16px;
  display: flex;
}

.property-layout-thumb-lines {
  flex-direction: column;
  gap: 5px;
  width: 60%;
  display: flex;
}

.property-layout-thumb-lines span {
  background: var(--gray-300);
  border-radius: 2px;
  width: 100%;
  height: 3px;
}

.property-layout-change {
  width: 100%;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
}

.property-layout-change:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.property-style-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 12px 8px;
  display: grid;
}

.property-style-option {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gray-600);
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 500;
  transition: all .15s;
}

.property-style-option:hover {
  border-color: var(--gray-400);
  color: var(--gray-800);
}

.property-style-option.active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.property-style-option-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.property-section-title {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
}

.property-toggle-row {
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
}

.property-toggle-switch {
  background: var(--gray-300);
  cursor: pointer;
  border: none;
  border-radius: 10px;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  transition: background .2s;
  position: relative;
}

.property-toggle-switch.active {
  background: var(--black);
}

.property-toggle-knob {
  background: var(--white);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .2s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px #0003;
}

.active .property-toggle-knob {
  transform: translateX(16px);
}

.property-padding-grid {
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  display: grid;
}

.template-bar {
  z-index: 99;
  height: 40px;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--gray-900);
  border-bottom: 1px solid var(--gray-800);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
}

.template-bar-left {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.template-bar-logo {
  border-radius: var(--radius-sm);
}

.template-bar-divider {
  background: var(--gray-700);
  width: 1px;
  height: 20px;
}

.template-bar-label {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  font-weight: 500;
}

.template-bar-right {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.template-bar-ab-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.template-bar-ab-toggle:hover {
  background: var(--gray-700);
  color: var(--white);
}

.template-bar-ab-toggle.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.template-bar-ab-toggle.active .ab-check {
  color: var(--white);
}

.template-bar-ab-wrapper {
  position: relative;
}

.template-bar-ab-settings {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  display: flex;
}

.template-bar-ab-settings:hover {
  background: var(--gray-700);
  color: var(--white);
}

.template-bar-ab-dropdown {
  width: 320px;
  padding: var(--spacing-md);
  background: var(--gray-850);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-lg);
  z-index: 100;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 8px 24px #0006;
}

.ab-dropdown-field {
  margin-bottom: var(--spacing-sm);
}

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

.ab-dropdown-field label {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-bottom: 4px;
  font-weight: 500;
  display: block;
}

.ab-dropdown-field input, .ab-dropdown-field select {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--white);
}

.ab-dropdown-field input:focus, .ab-dropdown-field select:focus {
  border-color: var(--primary);
  outline: none;
}

.ab-dropdown-field input::placeholder, .ab-dropdown-field select::placeholder {
  color: var(--gray-500);
}

.ab-dropdown-row {
  gap: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.ab-criteria-btns {
  gap: 4px;
  display: flex;
}

.ab-criteria-btns button {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  cursor: pointer;
  flex: 1;
}

.ab-criteria-btns button:hover {
  background: var(--gray-700);
}

.ab-criteria-btns button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.editor-loading {
  background: var(--white);
  min-height: 320px;
  color: var(--text-secondary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  display: flex;
}

.editor-loading-logo {
  border: 1px solid var(--border-light);
  background: linear-gradient(#fff 0%, #f8fafc 100%);
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  animation: 1.6s ease-in-out infinite editor-loading-float;
  display: inline-flex;
  box-shadow: 0 12px 28px #0f172a14;
}

.editor-loading-logo-image {
  width: 42px;
  height: auto;
  display: block;
}

.editor-loading p {
  font-size: var(--font-size-sm);
  margin: 0;
}

@keyframes editor-loading-float {
  0%, 100% {
    opacity: .92;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col, .detail-grid, .recent-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0;
    padding: 20px;
  }

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

.settings-page {
  max-width: 800px;
  animation: fadeIn var(--duration-normal) var(--ease-out-expo);
  margin: 0 auto;
}

.settings-header {
  margin-bottom: 40px;
}

.settings-back {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  transition: all var(--duration-fast) var(--ease-out-quart);
  margin-bottom: 20px;
  padding: 8px 16px;
  display: inline-flex;
}

.settings-back:hover {
  border-color: var(--black);
  color: var(--black);
}

.settings-title {
  font-size: var(--font-size-6xl);
  letter-spacing: -.5px;
  font-weight: 700;
}

.settings-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  margin-bottom: 24px;
  overflow: hidden;
}

.settings-section-header {
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  padding: 24px;
  display: flex;
}

.settings-section-info {
  flex: 1;
}

.settings-section-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.settings-section-desc {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin: 0;
}

.settings-section-body {
  gap: var(--spacing-md-lg);
  flex-direction: column;
  padding: 24px;
  display: flex;
}

.settings-card {
  background: var(--gray-100);
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  padding: 20px;
}

.settings-card-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.settings-card-desc {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0 0 16px;
  line-height: 1.5;
}

.settings-card-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}

.settings-loading {
  align-items: center;
  gap: var(--spacing-sm-md);
  color: var(--gray-500);
  font-size: var(--font-size-base);
  padding: 12px;
  display: flex;
}

.smtp-status {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.smtp-status-row {
  background: var(--white);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.smtp-status-label {
  font-size: var(--font-size-md);
  color: var(--gray-600);
}

.smtp-status-value {
  font-size: var(--font-size-md);
  font-family: SF Mono, Monaco, monospace;
  font-weight: 500;
}

.smtp-status-badge {
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-sm);
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.smtp-status-badge.connected {
  color: #16a34a;
  background: #dcfce7;
}

.smtp-status-badge.disconnected {
  color: #dc2626;
  background: #fee2e2;
}

.smtp-status-error {
  align-items: center;
  gap: var(--spacing-sm);
  color: #dc2626;
  font-size: var(--font-size-md);
  background: #fee2e2;
  padding: 12px;
  display: flex;
}

.test-email-form {
  gap: var(--spacing-md-sm);
  display: flex;
}

.settings-input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  flex: 1;
  padding: 12px 14px;
}

.settings-input:focus {
  border-color: var(--black);
  outline: none;
  box-shadow: 0 0 0 3px #0000000d;
}

.settings-btn-primary {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--black);
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  white-space: nowrap;
  border: none;
  padding: 12px 20px;
  font-weight: 500;
  display: inline-flex;
}

.settings-btn-primary:hover:not(:disabled) {
  background: var(--gray-800);
  transform: translateY(-1px);
}

.settings-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.settings-btn-outline {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--gray-300);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 10px 16px;
  font-weight: 500;
  display: inline-flex;
}

.settings-btn-outline:hover {
  border-color: var(--black);
}

.test-result {
  align-items: center;
  gap: var(--spacing-sm-md);
  font-size: var(--font-size-base);
  animation: fadeInUp var(--duration-fast) var(--ease-out-quart);
  margin-top: 12px;
  padding: 12px 16px;
  display: flex;
}

.test-result.success {
  color: #16a34a;
  background: #dcfce7;
}

.test-result.error {
  color: #dc2626;
  background: #fee2e2;
}

.code-block {
  background: var(--gray-800);
  color: var(--gray-300);
  font-family: SF Mono, Monaco, monospace;
  font-size: var(--font-size-md);
  margin: 12px 0;
  padding: 14px 16px;
  overflow-x: auto;
}

.code-block code {
  white-space: pre;
}

.env-vars {
  margin-top: 16px;
}

.env-var-title {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: 8px;
  font-weight: 600;
}

.settings-card-info a {
  color: #0284c7;
  text-decoration: underline;
}

.settings-card-info a:hover {
  color: #0369a1;
}

.cms-properties-panel {
  --cms-bg: var(--gray-50);
  --cms-bg-input: var(--white);
  --cms-bg-hover: var(--gray-100);
  --cms-bg-active: var(--gray-900);
  --cms-border: var(--gray-200);
  --cms-text: var(--gray-700);
  --cms-text-dim: var(--gray-400);
  --cms-text-bright: var(--gray-900);
  --cms-accent: var(--gray-900);
  background: var(--cms-bg);
  border-left: 1px solid var(--cms-border);
  flex-direction: column;
  width: clamp(260px, 22vw, 320px);
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .cms-properties-panel {
    display: none;
  }
}

.cms-properties-scroll {
  flex: 1;
  padding: 0 8px 60px;
  overflow: hidden auto;
}

.cms-properties-scroll::-webkit-scrollbar {
  width: 4px;
}

.cms-properties-scroll::-webkit-scrollbar-track {
  background: none;
}

.cms-properties-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--spacing-2xs);
}

.cms-panel-header {
  background: var(--cms-bg);
  border-bottom: 1px solid var(--cms-border);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.cms-panel-header .cms-panel-icon {
  background: var(--cms-border);
  border-radius: var(--radius-xs);
  width: 24px;
  height: 24px;
  color: var(--cms-text-dim);
  justify-content: center;
  align-items: center;
  display: flex;
}

.cms-panel-header .cms-panel-title {
  font-size: var(--font-size-sm);
  color: var(--cms-text-bright);
  flex: 1;
  font-weight: 600;
}

.cms-top-tabs {
  border-bottom: 1px solid var(--cms-border);
  flex-shrink: 0;
  display: flex;
}

.cms-top-tab {
  font-size: var(--font-size-sm);
  color: var(--cms-text-dim);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  padding: 9px 16px;
  font-weight: 500;
  transition: all .1s;
}

.cms-top-tab:hover {
  color: var(--cms-text);
}

.cms-top-tab.active {
  color: var(--cms-text-bright);
  border-bottom-color: var(--cms-accent);
}

.cms-element-bar {
  border-bottom: 1px solid var(--cms-border);
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 8px;
  display: flex;
  overflow-x: auto;
}

.cms-element-bar::-webkit-scrollbar {
  height: 0;
}

.cms-element-chip {
  font-size: var(--font-size-2xs);
  color: var(--cms-text-dim);
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-weight: 500;
  transition: all .1s;
  display: flex;
}

.cms-element-chip:hover {
  color: var(--cms-text);
  border-color: var(--gray-400);
}

.cms-element-chip.active {
  color: var(--white);
  background: var(--cms-bg-active);
  border-color: var(--cms-bg-active);
}

.cms-block-indicator {
  border-bottom: 1px solid var(--cms-border);
  flex-shrink: 0;
  padding: 6px 12px;
}

.cms-block-tag {
  font-size: var(--font-size-2xs);
  color: var(--cms-accent);
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  letter-spacing: .3px;
  background: #0000000a;
  padding: 2px 8px;
  font-weight: 600;
  display: inline-block;
}

.cms-block-tag:hover {
  color: var(--cms-text);
  background: var(--cms-bg-hover);
}

.cms-block-tag.active {
  color: var(--cms-text-bright);
  border-bottom-color: var(--cms-accent);
}

.cms-section {
  border-bottom: 1px solid var(--cms-border);
}

.cms-section[open] > .cms-section-header .cms-chevron {
  transform: rotate(90deg);
}

.cms-section-header {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  list-style: none;
  display: flex;
}

.cms-section-header:hover {
  background: var(--cms-bg-hover);
}

.cms-section-header::-webkit-details-marker {
  display: none;
}

.cms-section-icon {
  width: 16px;
  height: 16px;
  color: var(--cms-text-dim);
  justify-content: center;
  align-items: center;
  display: flex;
}

.cms-section-label {
  font-size: var(--font-size-xs);
  color: var(--cms-text);
  flex: 1;
  font-weight: 600;
}

.cms-chevron {
  color: var(--gray-300);
  transition: transform .12s;
}

.cms-section-body {
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px 10px;
  display: flex;
}

.cms-row {
  align-items: center;
  gap: 6px;
  min-height: 26px;
  display: flex;
}

.cms-label {
  font-size: var(--font-size-2xs);
  color: var(--cms-text-dim);
  flex-shrink: 0;
  min-width: 48px;
  font-weight: 500;
}

.cms-input {
  height: 26px;
  font-size: var(--font-size-xs);
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  background: var(--cms-bg-input);
  color: var(--cms-text);
  flex: 1;
  padding: 0 7px;
}

.cms-input:focus {
  border-color: var(--cms-accent);
  outline: none;
}

.cms-input::placeholder {
  color: var(--gray-300);
}

.cms-input-sm {
  flex: none;
  width: 48px;
}

.cms-toggle {
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  flex: 1;
  display: flex;
  overflow: hidden;
}

.cms-toggle button {
  font-size: var(--font-size-2xs);
  background: var(--cms-bg-input);
  border: none;
  border-right: 1px solid var(--cms-border);
  color: var(--cms-text-dim);
  cursor: pointer;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  font-weight: 500;
  display: flex;
}

.cms-toggle button:last-child {
  border-right: none;
}

.cms-toggle button:hover {
  background: var(--cms-bg-hover);
  color: var(--cms-text);
}

.cms-toggle button.active {
  background: var(--cms-bg-active);
  color: var(--white);
}

.cms-color {
  flex: 1;
  align-items: center;
  gap: 4px;
  display: flex;
}

.cms-color .cms-color-swatch {
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  width: 22px;
  height: 22px;
  position: relative;
  overflow: hidden;
}

.cms-color .cms-color-swatch input[type="color"] {
  opacity: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  position: absolute;
  inset: -4px;
}

.cms-color .cms-color-hex {
  height: 22px;
  font-size: var(--font-size-2xs);
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  background: var(--cms-bg-input);
  color: var(--cms-text-dim);
  flex: 1;
  padding: 0 6px;
  font-family: monospace;
}

.cms-color .cms-color-hex:focus {
  border-color: var(--cms-accent);
  outline: none;
}

.cms-range {
  flex: 1;
  align-items: center;
  gap: 6px;
  display: flex;
}

.cms-range input[type="range"] {
  appearance: none;
  background: var(--cms-border);
  border-radius: var(--spacing-2xs);
  cursor: pointer;
  flex: 1;
  height: 3px;
}

.cms-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--cms-text);
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.cms-range .cms-range-value {
  font-size: var(--font-size-2xs);
  color: var(--cms-text-dim);
  text-align: right;
  min-width: 24px;
  font-family: monospace;
}

.cms-switch {
  background: var(--gray-300);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 16px;
  padding: 0;
  transition: background .12s;
  position: relative;
}

.cms-switch:after {
  content: "";
  background: var(--white);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  transition: all .12s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #00000026;
}

.cms-switch.active {
  background: var(--cms-bg-active);
}

.cms-switch.active:after {
  transform: translateX(12px);
}

.cms-number {
  border: 1px solid var(--cms-border);
  border-radius: var(--radius-xs);
  align-items: center;
  display: flex;
  overflow: hidden;
}

.cms-number input {
  text-align: center;
  width: 36px;
  height: 22px;
  font-size: var(--font-size-2xs);
  background: var(--cms-bg-input);
  color: var(--cms-text);
  border: none;
}

.cms-number input:focus {
  outline: none;
}

.cms-number button {
  background: var(--cms-bg-hover);
  width: 18px;
  height: 22px;
  color: var(--cms-text-dim);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cms-number button:hover {
  color: var(--cms-text);
}

.cms-grid {
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  display: grid;
}

.cms-divider {
  background: var(--cms-border);
  height: 1px;
  margin: 2px 0;
}

.cms-bg-preview {
  background-image: var(--bg-preview-img);
  border-radius: var(--radius-xs);
  border: 1px solid var(--cms-border);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 60px;
}

.cms-spacing-box {
  padding: 4px 0;
}

.cms-spacing-margin {
  background: #00000008;
  border: 1px dashed #ccc;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
  display: flex;
  position: relative;
}

.cms-spacing-padding {
  background: #0000000a;
  border: 1px dashed #bbb;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 28px;
  display: flex;
  position: relative;
}

.cms-spacing-center {
  background: var(--cms-border);
  border-radius: 2px;
  width: 60px;
  height: 28px;
}

.cms-spacing-label {
  color: #aaa;
  letter-spacing: .5px;
  text-transform: uppercase;
  pointer-events: none;
  font-size: 8px;
  font-weight: 600;
  position: absolute;
  top: 2px;
  left: 6px;
}

.cms-spacing-input {
  text-align: center;
  width: 28px;
  height: 16px;
  color: var(--cms-text-dim, #999);
  background: none;
  border: none;
  outline: none;
  font-family: monospace;
  font-size: 10px;
  position: absolute;
}

.cms-spacing-input:focus {
  color: var(--cms-text-bright, #111);
  background: #0000000d;
  border-radius: 2px;
}

.cms-spacing-input.top {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.cms-spacing-input.bottom {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.cms-spacing-input.left {
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}

.cms-spacing-input.right {
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}

.global-styles-tab {
  padding: 0 0 var(--spacing-lg);
}

.global-styles-tab-header {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--cms-text-bright, #111);
  border-bottom: 1px solid var(--cms-border, #e5e5e5);
  font-weight: 600;
  display: flex;
}

.global-styles-tab-hint {
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--cms-text-dim, #999);
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.global-colors-preview {
  background: var(--preview-bg, #f3f4f6);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--cms-border, #e5e5e5);
  justify-content: center;
  align-items: center;
  min-height: 48px;
  display: flex;
}

.global-colors-preview-inner {
  background: var(--preview-surface, #fff);
  border-radius: var(--radius-xs);
  width: 70%;
  height: 28px;
  box-shadow: 0 1px 3px #00000014;
}

[data-sub-element] {
  cursor: text;
  transition: outline .1s;
}

[data-sub-element]:hover {
  outline: 1px dashed var(--gray-400);
  outline-offset: 2px;
}

.block-hero-button, .block-cta-button {
  cursor: pointer;
}

.editor-wrapper[data-active-sub] [data-sub-element]:hover {
  outline: 1px dashed var(--gray-400);
  outline-offset: 2px;
}

.editor-wrapper[data-active-sub="title"] [data-sub-element="title"], .editor-wrapper[data-active-sub="subtitle"] [data-sub-element="subtitle"], .editor-wrapper[data-active-sub="button"] [data-sub-element="button"], .editor-wrapper[data-active-sub="image"] [data-sub-element="image"], .editor-wrapper[data-active-sub="logo"] [data-sub-element="logo"], .editor-wrapper[data-active-sub="excerpt"] [data-sub-element="excerpt"], .editor-wrapper[data-active-sub="category"] [data-sub-element="category"], .editor-wrapper[data-active-sub="social"] [data-sub-element="social"], .editor-wrapper[data-active-sub="links"] [data-sub-element="links"] {
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: 2px;
}

.image-picker-tabs {
  border-bottom: 1px solid var(--border-light);
  padding: 0 var(--spacing-md);
  display: flex;
}

.image-picker-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.image-picker-tab:hover {
  color: var(--text-primary);
}

.image-picker-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.asset-gallery-tab {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.asset-gallery-toolbar {
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  display: flex;
}

.asset-gallery-search {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  display: flex;
}

.asset-gallery-search input {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
}

.asset-gallery-upload-btn {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-weight: 500;
  transition: background .15s;
  display: flex;
}

.asset-gallery-upload-btn:hover {
  background: var(--primary-hover);
}

.asset-gallery-upload-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.asset-gallery-folders {
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  gap: 4px;
  display: flex;
  overflow-x: auto;
}

.asset-gallery-folder {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  padding: 4px 10px;
  font-weight: 500;
  transition: all .15s;
}

.asset-gallery-folder:hover {
  border-color: var(--text-tertiary);
}

.asset-gallery-folder.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.asset-gallery-grid {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  overflow-y: auto;
}

.asset-gallery-item {
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-secondary);
  border: 2px solid #0000;
  flex-direction: column;
  transition: all .15s;
  display: flex;
  overflow: hidden;
}

.asset-gallery-item:hover {
  border-color: var(--primary);
}

.asset-gallery-item img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.asset-gallery-item-name {
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 6px;
  font-size: 10px;
  overflow: hidden;
}

.asset-gallery-loading, .asset-gallery-empty {
  padding: var(--spacing-xl);
  color: var(--text-tertiary);
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.asset-gallery-loading p, .asset-gallery-empty p {
  font-size: var(--font-size-sm);
}

.btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm-xs) var(--spacing-md-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  height: var(--btn-height-md);
  border: none;
  display: inline-flex;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--black);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--gray-800);
  box-shadow: var(--shadow-md);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
}

.btn-ghost {
  color: var(--text-secondary);
  background: none;
  border: none;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--black);
}

.btn-danger {
  background: var(--bg-elevated);
  color: var(--error);
  border: 1px solid var(--border-default);
}

.btn-danger:hover:not(:disabled) {
  background: var(--error-light);
  border-color: var(--error);
}

.btn-sm {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  height: var(--btn-height-sm) !important;
}

.btn-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-md);
  height: var(--btn-height-lg);
}

.btn-icon {
  padding: var(--spacing-sm-xs);
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.btn-icon:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-icon.btn-sm {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  padding: var(--spacing-xs);
}

.btn-outline {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  background: none;
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-dark {
  color: var(--white);
  background: #ffffff1a;
  border: none;
}

.btn-dark:hover:not(:disabled) {
  background: #ffffff26;
}

.btn-dark:disabled {
  opacity: .4;
}

.btn-icon-dark {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  color: var(--white);
  background: #ffffff1a;
  border: none;
  padding: 0;
}

.btn-icon-dark:hover:not(:disabled) {
  background: #ffffff26;
}

.btn-full-width {
  width: 100%;
}

.form-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 500;
  display: block;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
}

.form-input, .form-textarea {
  width: 100%;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: all var(--duration-fast) ease;
  padding: 6px 10px;
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:hover, .form-textarea:hover {
  border-color: var(--border-strong);
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.form-input--dark, .form-textarea--dark {
  color: var(--white);
  background: #ffffff1a;
  border: 1px solid #0000;
  height: 32px;
}

.form-input--dark::placeholder, .form-textarea--dark::placeholder {
  color: #ffffff80;
}

.form-input--dark:hover, .form-textarea--dark:hover {
  background: #ffffff26;
  border-color: #0000;
}

.form-input--dark:focus, .form-textarea--dark:focus {
  box-shadow: none;
  background: #ffffff26;
  border-color: #0000;
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  line-height: 1.5;
}

.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--duration-fast) ease;
}

.form-select::placeholder {
  color: var(--text-muted);
}

.form-select:hover {
  border-color: var(--border-strong);
}

.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.form-select {
  appearance: none;
  cursor: pointer;
  padding-right: var(--spacing-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-sm) center;
  background-size: 16px;
}

.form-select:disabled {
  opacity: .5;
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
}

.form-select--sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  padding-right: var(--spacing-lg);
  font-size: var(--font-size-sm);
  background-position: right var(--spacing-xs) center;
  background-size: 14px;
}

.form-select--lg {
  padding: var(--spacing-md-sm) var(--spacing-md);
  padding-right: var(--spacing-2xl);
  font-size: var(--font-size-lg);
  background-position: right var(--spacing-md-sm) center;
  background-size: 18px;
}

.form-select--inline {
  width: auto;
  min-width: 120px;
}

.form-select--compact {
  padding: var(--spacing-xs) var(--spacing-sm);
  padding-right: var(--spacing-lg);
  font-size: var(--font-size-sm);
  border-color: var(--border-light);
  background-position: right var(--spacing-xs) center;
  background-size: 12px;
}

.form-select--ghost {
  background-color: #0000;
  border-color: #0000;
}

.form-select--ghost:hover {
  background-color: var(--bg-tertiary);
  border-color: #0000;
}

.form-select--ghost:focus {
  background-color: var(--bg-primary);
  border-color: var(--primary);
}

.form-select--borderless {
  background-color: var(--bg-tertiary);
  border-color: #0000;
}

.form-select--borderless:hover {
  background-color: var(--border-light);
}

.form-select--borderless:focus {
  border-color: var(--primary);
}

.form-error {
  border-color: var(--error) !important;
  background: var(--error-light) !important;
}

.form-error:focus {
  box-shadow: 0 0 0 3px #dc262626 !important;
}

.form-error-message {
  font-size: var(--font-size-sm);
  color: var(--error);
  align-items: center;
  gap: var(--spacing-sm-xs);
  margin-top: 6px;
  display: flex;
}

.form-error-message:before {
  content: "!";
  background: var(--error);
  width: 14px;
  height: 14px;
  color: var(--white);
  font-size: var(--font-size-2xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: inline-flex;
}

.form-success-message {
  font-size: var(--font-size-sm);
  color: var(--success);
  align-items: center;
  gap: var(--spacing-sm-xs);
  margin-top: 6px;
  display: flex;
}

.form-success-message:before {
  content: "✓";
  background: var(--success);
  width: 14px;
  height: 14px;
  color: var(--white);
  font-size: var(--font-size-2xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: inline-flex;
}

.checkbox-group {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.checkbox-label {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  cursor: pointer;
  display: flex;
}

.checkbox-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--black);
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) ease;
  padding: 16px;
}

.card:hover {
  border-color: var(--border-default);
}

.card-header {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  display: flex;
}

.card-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.card-description {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.stats-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 10px;
  display: grid;
}

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) ease;
  padding: 14px;
  display: block;
}

.stat-card-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.stat-card-link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
  font-weight: 500;
}

.stat-value {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  letter-spacing: -.02em;
  font-weight: 600;
}

.metric-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: 14px;
}

.metric-value {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  font-weight: 700;
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.metric-rate {
  font-size: var(--font-size-xs);
  color: var(--primary);
  margin-top: 2px;
  font-weight: 500;
}

.action-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-decoration: none;
  transition: all .2s;
  display: block;
}

.action-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.action-card svg {
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
}

.action-card h3 {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  margin: 0 0 4px;
  font-weight: 600;
}

.action-card p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0;
}

.card-grid-2 {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.card-grid-3 {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.card-grid-4 {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.list-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  transition: border-color .2s;
  display: flex;
}

.list-card:hover {
  border-color: var(--primary);
}

.list-card h3 {
  color: var(--gray-900);
  margin: 0 0 2px;
  font-weight: 600;
}

.list-card code {
  font-size: var(--font-size-xs);
  color: var(--primary);
}

.list-card p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 4px 0 0;
}

.card-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.flex-between {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.meta-row {
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: var(--spacing-sm) 0;
  flex-wrap: wrap;
  display: flex;
}

.meta-row a, .meta-row span {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.meta-row a {
  color: var(--primary);
  text-decoration: none;
}

.meta-row a:hover {
  text-decoration: underline;
}

.stats-row {
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-100);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  display: flex;
}

.table-container {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  overflow-x: auto;
}

.data-table-shell {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th {
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: 12px 16px;
  font-weight: 600;
}

.table td {
  font-size: var(--font-size-md);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: middle;
  padding: 14px 16px;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--bg-secondary);
}

.table .align-right {
  text-align: right;
}

.table-link {
  color: var(--text-primary);
  font-weight: 500;
}

.table-link:hover {
  color: var(--primary);
}

.table-status-cell {
  text-align: center;
  color: var(--text-tertiary);
  padding: 28px 16px !important;
}

.table-pagination {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.table-pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.table-pagination-controls {
  align-items: center;
  gap: 4px;
  display: flex;
}

.table-pagination-btn {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
  padding: 6px 12px;
}

.table-pagination-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.table-pagination-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.table-pagination-num {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  width: 28px;
  height: 28px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

.table-pagination-num:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.table-pagination-num.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

@media (max-width: 768px) {
  .table-pagination {
    gap: var(--spacing-sm);
    flex-direction: column;
  }

  .table-pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.badge {
  font-size: var(--font-size-2xs);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  align-items: center;
  padding: 3px 8px;
  font-weight: 600;
  display: inline-flex;
}

.badge-draft, .badge-pending {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  color: var(--gray-600);
  box-shadow: none;
}

.badge-sent, .badge-active, .badge-success {
  background: linear-gradient(135deg, #ecfdf5 0%, var(--success-light) 100%);
  color: #065f46;
  box-shadow: none;
}

.badge-scheduled {
  color: #1e40af;
  box-shadow: none;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.badge-sending {
  background: linear-gradient(135deg, var(--warning-light) 0%, #fde68a 100%);
  color: #92400e;
  box-shadow: none;
}

.badge-failed, .badge-bounced, .badge-error {
  background: linear-gradient(135deg, #fef2f2 0%, var(--error-light) 100%);
  color: #991b1b;
  box-shadow: none;
}

.badge-unsubscribed, .badge-inactive {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  color: var(--gray-500);
  box-shadow: none;
}

.badge-warning {
  background: linear-gradient(135deg, #fffbeb 0%, var(--warning-light) 100%);
  color: var(--warning-dark);
  box-shadow: none;
}

.badge-secondary {
  color: #5b21b6;
  box-shadow: none;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.badge-info {
  color: #1e40af;
  box-shadow: none;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.alert {
  font-size: var(--font-size-sm);
  align-items: flex-start;
  gap: var(--spacing-sm);
  border-radius: var(--radius-md);
  border-left: 3px solid;
  margin-bottom: 14px;
  padding: 10px 14px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
}

.alert-error {
  color: #991b1b;
  box-shadow: none;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #ef4444;
}

.alert-success {
  color: #065f46;
  box-shadow: none;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
}

.alert-warning {
  color: #92400e;
  box-shadow: none;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #f59e0b;
}

.alert-info {
  color: #1e40af;
  box-shadow: none;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #3b82f6;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  width: 48px;
  height: 48px;
  color: var(--gray-400);
  margin: 0 auto 16px;
}

.empty-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
}

.empty-text {
  color: var(--gray-500);
  font-size: var(--font-size-base);
  margin-bottom: 10px;
}

.loading {
  opacity: .6;
  pointer-events: none;
}

.quick-actions {
  gap: var(--spacing-md-sm);
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
  display: grid;
}

.quick-action {
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--black);
  color: var(--white);
  padding: 16px;
  font-weight: 500;
  transition: background .15s;
  display: flex;
}

.quick-action:hover {
  background: var(--gray-800);
}

.recent-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.item-list {
  flex-direction: column;
  display: flex;
}

.item-row {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  display: flex;
}

.item-row:last-child {
  border-bottom: none;
}

.item-row-link {
  border-bottom: none;
  margin: 0 -12px;
  padding: 0;
  transition: background-color .15s;
}

.item-row-link:hover {
  background: var(--bg-tertiary);
}

.item-row-link + .item-row-link {
  border-top: 1px solid var(--border-light);
}

.item-row-content {
  width: 100%;
  color: inherit;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.item-title {
  color: var(--text-primary);
  font-weight: 500;
}

.item-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-top: 2px;
}

.activity-timeline {
  flex-direction: column;
  display: flex;
}

.timeline-item {
  gap: var(--spacing-md);
  padding-bottom: 20px;
  display: flex;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-connector {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.timeline-icon {
  width: 32px;
  height: 32px;
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.timeline-line {
  background: var(--border);
  flex: 1;
  width: 2px;
  min-height: 20px;
  margin-top: 8px;
}

.timeline-content {
  flex: 1;
  padding-top: 4px;
}

.timeline-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.timeline-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-top: 2px;
}

.timeline-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: 4px;
}

.tag-list {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.subscriber-tag {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  border: 1px solid;
  align-items: center;
  padding: 2px 8px;
  font-weight: 500;
  display: inline-flex;
}

.tag-category {
  margin-bottom: 14px;
}

.tag-category-header {
  align-items: center;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 6px;
  padding-bottom: 6px;
  display: flex;
}

.tag-category-icon {
  font-size: var(--font-size-sm);
}

.tag-category-name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.tag-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  transition: all .15s;
  display: flex;
}

.tag-item:hover {
  background: var(--bg-elevated);
  border-color: var(--primary);
}

.tag-item:hover .tag-item-code {
  color: var(--primary);
}

.tag-item:active {
  transform: scale(.98);
}

.tag-item.no-value {
  opacity: .7;
  border-style: dashed;
}

.tag-item.has-value .tag-item-example {
  color: var(--success);
  font-weight: 500;
}

.tag-item-info {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.tag-item-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.tag-item-example {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.tag-item-placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.tag-item-code {
  font-size: var(--font-size-2xs);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-family: SF Mono, Monaco, monospace;
  transition: color .15s;
}

.tag-code-hint {
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  font-family: SF Mono, Monaco, monospace;
  font-size: 9px;
}

.personalization-section {
  border-top: 1px solid var(--border-light);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.personalization-toggle {
  width: 100%;
  padding: var(--spacing-xs) 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.personalization-toggle svg:last-child {
  opacity: .5;
}

.personalization-toggle-left {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.personalization-content {
  padding: var(--spacing-sm) 0;
}

.personalization-example {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.personalization-example-write, .personalization-example-result {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.example-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}

.example-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.example-text mark {
  background: var(--warning-light);
  color: var(--warning-dark);
  border-radius: 2px;
  padding: 0 2px;
}

.example-text strong {
  color: var(--primary);
  font-weight: 600;
}

.example-arrow {
  color: var(--text-tertiary);
  margin: var(--spacing-xs) 0;
  align-self: center;
}

.personalization-vars {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.personalization-vars-title {
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 600;
}

.personalization-var {
  width: 100%;
  padding: 6px var(--spacing-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.personalization-var:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.personalization-var.copied {
  border-color: var(--success);
  background: var(--success-light);
}

.var-label {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-weight: 500;
}

.var-example {
  color: var(--text-tertiary);
  font-size: 10px;
}

.var-copied {
  color: var(--success);
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.personalization-tip {
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  display: flex;
}

.ab-test-settings {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  padding: 16px;
}

.ab-test-header {
  margin-bottom: 16px;
}

.ab-test-toggle-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ab-test-title {
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  display: flex;
}

.ab-test-toggle {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ab-test-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ab-test-toggle .ab-toggle-slider {
  cursor: pointer;
  background-color: var(--gray-300);
  border-radius: 24px;
  transition: all .3s;
  position: absolute;
  inset: 0;
}

.ab-test-toggle .ab-toggle-slider:before {
  content: "";
  background-color: var(--white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .3s;
  position: absolute;
  bottom: 3px;
  left: 3px;
}

.ab-test-toggle input:checked + .ab-toggle-slider {
  background-color: var(--primary);
}

.ab-test-toggle input:checked + .ab-toggle-slider:before {
  transform: translateX(20px);
}

.ab-test-toggle input:disabled + .ab-toggle-slider {
  opacity: .5;
  cursor: not-allowed;
}

.ab-test-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-top: 4px;
}

.ab-test-content {
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}

.ab-test-subjects {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  margin-bottom: 10px;
  display: flex;
}

.ab-test-subject-field {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.ab-test-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 500;
  display: flex;
}

.ab-test-variant {
  border-radius: var(--radius-sm);
  width: 20px;
  height: 20px;
  font-size: var(--font-size-xs);
  color: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.ab-test-variant-a {
  background: var(--primary);
}

.ab-test-variant-b {
  background: var(--warning);
}

.ab-test-input {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--white);
  width: 100%;
  padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s;
}

.ab-test-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.ab-test-input.ab-test-input-disabled {
  background: var(--gray-100);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.ab-test-options {
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  display: grid;
}

.ab-test-option {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.ab-test-option-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.ab-test-slider-container {
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  padding: 10px 12px;
  display: flex;
}

.ab-test-slider {
  appearance: none;
  background: var(--gray-300);
  border-radius: 3px;
  outline: none;
  flex: 1;
  height: 6px;
}

.ab-test-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--primary);
  cursor: pointer;
  width: 18px;
  height: 18px;
  box-shadow: none;
  border-radius: 50%;
}

.ab-test-slider::-moz-range-thumb {
  background: var(--primary);
  cursor: pointer;
  width: 18px;
  height: 18px;
  box-shadow: none;
  border: none;
  border-radius: 50%;
}

.ab-test-slider-value {
  font-size: var(--font-size-base);
  color: var(--primary);
  text-align: right;
  min-width: 40px;
  font-weight: 600;
}

.ab-test-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--white);
  cursor: pointer;
  width: 100%;
  color: var(--text-primary);
  padding: 10px 12px;
}

.ab-test-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.ab-test-option-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.ab-test-preview {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.ab-test-preview-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  font-weight: 600;
}

.ab-test-preview-flow {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.ab-test-flow-step {
  align-items: center;
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.ab-test-flow-icon {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.ab-test-flow-send {
  background: var(--info-light);
  color: var(--info);
}

.ab-test-flow-wait {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.ab-test-flow-winner {
  background: var(--success-light);
  color: var(--success);
}

.ab-test-flow-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
}

.ab-test-flow-detail {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.ab-test-flow-arrow {
  color: var(--gray-300);
  font-size: 20px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ab-test-preview-flow {
    flex-direction: column;
  }

  .ab-test-flow-arrow {
    transform: rotate(90deg);
  }
}

.brand-selector-section {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.brand-selector-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.brand-selector-dropdown {
  width: 100%;
  font-size: var(--font-size-md);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px 12px;
  transition: border-color .15s;
}

.brand-selector-dropdown:hover {
  border-color: var(--border-hover);
}

.brand-selector-dropdown:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
  outline: none;
}

.brand-apply-actions {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  display: flex;
}

.brand-apply-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: var(--primary);
  color: var(--white);
  border: none;
  flex: 1;
  padding: 8px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.brand-apply-btn:hover {
  background: var(--primary-dark);
}

.brand-apply-btn.brand-apply-force {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  flex: none;
}

.brand-apply-btn.brand-apply-force:hover {
  background: var(--warning-light);
  color: var(--warning);
  border-color: var(--warning);
}

.brand-apply-btn svg {
  flex-shrink: 0;
}

.brand-preview-colors {
  gap: var(--spacing-sm-xs);
  margin-top: var(--spacing-sm);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.brand-color-swatch {
  border: 2px solid var(--bg-primary);
  width: 24px;
  height: 24px;
  box-shadow: none;
  cursor: help;
  box-sizing: border-box;
}

.brand-intro {
  margin-bottom: var(--spacing-md);
}

.brand-intro p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.brand-loading {
  padding: var(--spacing-lg);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  flex-direction: column;
  display: flex;
}

.brand-loading-spinner {
  border: 2px solid var(--border-light);
  border-top-color: var(--primary);
  width: 24px;
  height: 24px;
  animation: .8s linear infinite spin;
}

.brand-error {
  padding: var(--spacing-lg);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.brand-error svg {
  color: var(--destructive);
}

.brand-empty {
  padding: var(--spacing-lg);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.brand-empty svg {
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-sm);
}

.brand-empty h4 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.brand-empty p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.brand-components-section {
  padding: 0 var(--spacing-sm);
}

.brand-components-empty {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-light);
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-components-empty svg {
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.brand-components-empty p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

.brand-components-empty-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  max-width: 200px;
  line-height: 1.4;
}

.brand-components-create-link {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--primary);
  background: var(--primary-light);
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
}

.brand-components-create-link:hover {
  background: var(--primary);
  color: #fff;
}

.brand-category {
  margin-bottom: var(--spacing-sm);
}

.brand-category-header {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  width: 100%;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.brand-category-header:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.brand-category-header.expanded {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-bottom-color: #0000;
}

.brand-category-icon {
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-category-name {
  flex: 1;
}

.brand-category-count {
  font-size: var(--font-size-xs);
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 6px;
  font-weight: 600;
}

.brand-category-toggle {
  color: var(--text-tertiary);
  font-size: 18px;
  font-weight: 400;
}

.brand-components-list {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-sm);
  gap: var(--spacing-xs);
  border-top: none;
  flex-direction: column;
  display: flex;
}

.brand-component-item {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  padding: 10px 12px;
  transition: all .15s;
  display: flex;
}

.brand-component-item:hover {
  background: var(--bg-elevated);
  border-color: var(--primary);
}

.brand-component-item:hover .brand-component-add {
  color: var(--primary);
  background: var(--primary-light);
}

.brand-component-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.brand-component-name {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.brand-component-brand {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.brand-component-default {
  color: var(--warning);
  align-items: center;
  display: flex;
}

.brand-component-add {
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  background: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.brand-theme-editor {
  margin-top: var(--spacing-md);
}

.brand-editor-section {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.brand-editor-section:last-of-type {
  border-bottom: none;
}

.brand-color-grid {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  display: grid;
}

.brand-color-input-group {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-color-input-group label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-color-input-wrapper {
  align-items: center;
  gap: var(--spacing-sm-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 4px 6px;
  display: flex;
}

.brand-color-input-wrapper input[type="color"] {
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
}

.brand-color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.brand-color-input-wrapper input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--border-light);
}

.brand-color-input-wrapper input[type="text"] {
  min-width: 0;
  height: 32px;
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  background: none;
  border: none;
  flex: 1;
  padding: 0 8px;
  font-family: monospace;
}

.brand-color-input-wrapper input[type="text"]::placeholder {
  color: var(--text-tertiary);
}

.brand-color-input-wrapper input[type="text"]:focus {
  outline: none;
}

.brand-button-style-selector {
  margin-top: var(--spacing-sm);
}

.brand-button-style-selector > label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
  display: block;
}

.brand-button-style-options {
  gap: var(--spacing-xs);
  display: flex;
}

.brand-style-option {
  font-size: var(--font-size-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  flex: 1;
  padding: 6px 10px;
  font-weight: 500;
  transition: all .15s;
}

.brand-style-option:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.brand-style-option.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.brand-editor-actions {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-save-btn {
  width: 100%;
  font-size: var(--font-size-md);
  background: var(--success);
  color: var(--white);
  cursor: pointer;
  border: none;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .15s;
}

.brand-save-btn:hover {
  background: var(--success-dark, #059669);
}

.brand-save-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.brand-save-status {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.brand-save-spinner {
  animation: .8s linear infinite spin;
}

.brand-theme-section {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  margin-bottom: var(--spacing-md);
}

.brand-theme-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-theme-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.brand-theme-link {
  font-size: var(--font-size-sm);
  color: var(--primary);
  text-decoration: none;
}

.brand-theme-link:hover {
  text-decoration: underline;
}

.brand-theme-select {
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  width: 100%;
  font-size: var(--font-size-base);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  padding: 8px 12px;
}

.brand-theme-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-theme-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
}

.brand-theme-logo {
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: #f9fafb;
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-theme-logo img {
  object-fit: contain;
  max-width: 100%;
  max-height: 48px;
}

.brand-theme-colors {
  margin-bottom: var(--spacing-md);
}

.brand-colors-label, .brand-font-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  font-weight: 500;
  display: block;
}

.brand-color-swatches {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-theme-font {
  margin-bottom: var(--spacing-md);
}

.brand-font-name {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-email-minipreview {
  margin-bottom: var(--spacing-md);
  background: #e5e7eb;
  padding: 12px;
}

.brand-preview-email {
  background: var(--brand-bg, white);
  box-shadow: none;
  font-size: var(--font-size-2xs);
  font-family: var(--brand-font, system-ui, sans-serif);
  overflow: hidden;
}

.brand-preview-header {
  background: var(--brand-header-bg, #f8f9fa);
  min-height: 32px;
  color: var(--brand-header-text, #333);
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  display: flex;
}

.brand-preview-logo {
  object-fit: contain;
  max-width: 80px;
  max-height: 20px;
}

.brand-preview-logo-placeholder {
  opacity: .5;
  letter-spacing: 1px;
  font-size: 8px;
  font-weight: 600;
}

.brand-preview-content {
  gap: var(--spacing-xs);
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.brand-preview-heading {
  font-size: var(--font-size-sm);
  color: var(--brand-heading-text, #333);
  font-weight: 600;
  font-family: var(--brand-heading-font, var(--brand-font, system-ui));
}

.brand-preview-text {
  color: var(--brand-body-text, #666);
  font-size: 9px;
}

.brand-preview-link {
  cursor: default;
  font-size: 9px;
  text-decoration: underline;
}

.brand-preview-button {
  background: var(--brand-btn-bg, #06c);
  color: var(--brand-btn-text, #fff);
  margin-top: 4px;
  padding: 4px 12px;
  font-size: 8px;
  font-weight: 500;
  display: inline-block;
}

.brand-preview-footer {
  text-align: center;
  background: var(--brand-footer-bg, #f8f9fa);
  color: var(--brand-footer-text, #666);
  padding: 6px 12px;
  font-size: 8px;
}

.brand-section-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  display: block;
}

.brand-palette-section, .brand-typography-section, .brand-button-section {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.brand-palette-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.brand-palette-item {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  padding: 6px 8px;
  display: flex;
}

.brand-palette-swatch {
  width: 24px;
  height: 24px;
  box-shadow: none;
  border: 2px solid #fff;
  flex-shrink: 0;
}

.brand-palette-info {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.brand-palette-name {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.2;
}

.brand-palette-hex {
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
  font-size: 9px;
}

.brand-typography-preview {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-font-item {
  align-items: center;
  gap: var(--spacing-sm-md);
  background: var(--bg-secondary);
  padding: 8px 10px;
  display: flex;
}

.brand-font-sample-heading, .brand-font-sample-body {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  color: var(--text-primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-font-sample-heading {
  font-size: 20px;
  font-weight: 700;
}

.brand-font-sample-body {
  font-size: 18px;
  font-weight: 400;
}

.brand-font-details {
  flex-direction: column;
  display: flex;
}

.brand-font-details .brand-font-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-font-role {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.brand-button-preview {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  flex-direction: column;
  padding: 12px;
  display: flex;
}

.brand-sample-button {
  font-size: var(--font-size-sm);
  cursor: default;
  border: none;
  padding: 8px 20px;
  font-weight: 500;
}

.brand-button-style-label {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.brand-section-divider {
  background: var(--border-light);
  height: 1px;
  margin: var(--spacing-md) 0;
}

.brand-detail-page {
  gap: var(--spacing-md);
  max-width: 1400px;
  padding: var(--spacing-lg);
  animation: fadeIn var(--duration-normal) var(--ease-out-expo);
  margin: 0 auto;
  display: flex;
}

.brand-detail-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.skeleton-pulse {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  animation: 1.5s ease-in-out infinite skeleton-pulse;
}

.skeleton-logo {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.skeleton-title {
  width: 140px;
  height: 18px;
}

.skeleton-tab {
  width: 100%;
  height: 32px;
}

.skeleton-heading {
  width: 260px;
  height: 24px;
  margin-bottom: var(--spacing-md);
}

.skeleton-card {
  border-radius: var(--radius-lg);
  height: 120px;
}

.skeleton-block {
  height: 80px;
  margin-top: var(--spacing-md);
}

.skeleton-block-sm {
  height: 48px;
  margin-top: var(--spacing-sm);
  width: 70%;
}

.brand-skeleton-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.brand-detail-back-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.brand-detail-back-link:hover {
  text-decoration: underline;
}

.brand-detail-sidebar {
  width: 156px;
  top: var(--spacing-lg);
  height: fit-content;
  max-height: calc(100vh - var(--spacing-lg) * 2);
  flex-shrink: 0;
  position: sticky;
  overflow-y: auto;
}

.brand-detail-sidebar-header {
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  flex-direction: column;
  display: flex;
}

.brand-detail-logo {
  object-fit: contain;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.brand-detail-back {
  background: var(--bg-secondary);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out-expo);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-detail-back:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.brand-detail-breadcrumb {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.brand-detail-breadcrumb svg {
  opacity: .5;
}

.brand-detail-title {
  color: var(--text-primary);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.brand-detail-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 0;
}

.brand-detail-header-right {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-detail-badge {
  font-size: var(--font-size-sm);
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 10px;
  font-weight: 500;
  display: inline-flex;
}

.brand-detail-content {
  min-width: 0;
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  flex: 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-detail-page {
    flex-direction: column;
  }

  .brand-detail-sidebar {
    width: 100%;
    max-height: none;
    position: relative;
    top: 0;
  }

  .brand-detail-sidebar-header {
    flex-direction: row;
    align-items: center;
  }
}

.brand-detail-tabs {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-detail-tab {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out-expo);
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.brand-detail-tab svg {
  flex-shrink: 0;
}

.brand-detail-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.brand-detail-tab.active {
  color: var(--primary);
  background: var(--primary-light);
}

.brand-detail-tab-count {
  min-width: 20px;
  height: 20px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-weight: 600;
  display: flex;
}

.brand-detail-tab.active .brand-detail-tab-count {
  background: var(--primary-light);
  color: var(--primary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-detail-tabs {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-xs);
    flex-direction: row;
    overflow-x: auto;
  }

  .brand-detail-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.brand-overview-grid {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.brand-overview-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
}

.brand-overview-card h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.brand-preview-card {
  grid-column: 1;
}

.brand-email-preview {
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.brand-email-header {
  padding: var(--spacing-md);
  justify-content: center;
  align-items: center;
  font-size: 18px;
  display: flex;
}

.brand-email-body {
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-email-placeholder {
  background: currentColor;
  height: 12px;
}

.brand-email-placeholder.short {
  width: 60%;
}

.brand-email-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--white);
  cursor: default;
  border: none;
  align-self: flex-start;
  font-weight: 500;
}

.brand-email-footer {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  text-align: center;
}

.brand-info-list {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-info-item {
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.brand-info-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.brand-info-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-info-color {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-style-previews {
  margin-top: var(--spacing-xl);
}

.brand-style-previews-header {
  margin-bottom: var(--spacing-sm);
}

.brand-style-previews-header h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-xs);
  color: var(--text-primary);
  font-weight: 600;
}

.brand-style-previews-header p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.brand-style-previews-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  display: grid;
}

.style-preview-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--duration-fast);
  overflow: hidden;
}

.style-preview-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.style-preview-card:hover .style-preview-card-action {
  color: var(--primary);
}

.style-preview-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.style-preview-card-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.style-preview-card-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.style-preview-card-action {
  color: var(--text-muted);
  transition: color var(--duration-fast);
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}

.style-preview-card-content {
  padding: var(--spacing-sm);
  background: var(--bg-primary);
  min-height: 80px;
  max-height: 120px;
  overflow: hidden;
}

.style-preview-card-content .brand-component-live-preview {
  width: 100%;
  height: 100%;
}

.style-preview-card-content .brand-component-live-preview iframe {
  transform-origin: 0 0;
  pointer-events: none;
  border: none;
  width: 200%;
  height: 200%;
  transform: scale(.5);
}

.color-palette-swatches {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.color-swatch {
  border: 1px solid var(--border-light);
  width: 32px;
  height: 32px;
  transition: transform var(--duration-fast);
}

.color-swatch:hover {
  transform: scale(1.1);
}

.typography-preview {
  border: 1px solid var(--border-light);
}

.typography-heading {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
}

.typography-body {
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-overview-grid {
    grid-template-columns: 1fr;
  }
}

.brand-colors-section {
  margin-bottom: var(--spacing-md);
}

.brand-colors-section h3 {
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.brand-colors-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  display: grid;
}

.brand-color-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: all var(--duration-fast);
  overflow: hidden;
}

.brand-color-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.brand-color-preview {
  height: 80px;
}

.brand-color-info {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: var(--bg-primary);
}

.brand-color-name {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-color-hex {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-family: monospace;
}

.brand-colors-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.brand-colors-edit-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  display: grid;
}

.brand-color-edit-item {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-color-edit-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-button-style-section {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.brand-button-style-chip {
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  padding: 6px 12px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.brand-button-style-chip:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.brand-button-style-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

@media (max-width: 640px) {
  .brand-colors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-colors-edit-grid {
    grid-template-columns: 1fr;
  }
}

.brand-typography {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-typography-section h3 {
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.brand-typography-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.brand-typography-warning {
  padding: var(--spacing-md);
  background: var(--warning-light);
  border: 1px solid var(--warning);
  margin-bottom: var(--spacing-md);
  color: var(--warning-dark);
  font-size: var(--font-size-sm);
}

.brand-typography-selectors {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-font-selector {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-font-selector label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-font-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  cursor: pointer;
}

.brand-font-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-typography-grid {
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
  display: grid;
}

.brand-font-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.brand-font-label {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
}

.brand-font-preview {
  padding: var(--spacing-lg) var(--spacing-md);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-direction: column;
  min-height: 100px;
  display: flex;
}

.brand-font-preview .sample-heading {
  font-size: 24px;
  font-weight: 700;
}

.brand-font-preview .sample-body {
  font-size: var(--font-size-base);
  text-align: center;
  max-width: 100%;
  color: var(--text-secondary);
}

.brand-font-name {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}

.brand-component-modal {
  background: var(--bg-primary);
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.brand-component-modal-split {
  max-width: 1100px;
}

.brand-component-modal-split-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-component-modal-split-body {
    flex-direction: column;
  }
}

.brand-component-editor-panel {
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  border-right: 1px solid var(--border-light);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow-y: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-component-editor-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
}

.brand-component-preview-panel {
  background: var(--bg-secondary);
  flex-direction: column;
  flex-shrink: 0;
  width: 440px;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-component-preview-panel {
    width: 100%;
    max-height: 300px;
  }
}

.brand-component-preview-header {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
}

.brand-component-preview-header svg {
  color: var(--text-tertiary);
}

.brand-component-preview-content {
  padding: var(--spacing-lg);
  flex: 1;
  overflow-y: auto;
}

.brand-component-preview-frame {
  background: var(--white);
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
  min-height: 200px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}

.brand-component-preview-frame table {
  border-collapse: collapse;
}

.brand-component-preview-frame img {
  max-width: 100%;
  height: auto;
}

.brand-component-preview-frame a {
  color: inherit;
}

.brand-component-preview-empty {
  text-align: center;
  min-height: 300px;
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 2px dashed var(--border-light);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-component-preview-empty svg {
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.brand-component-preview-empty p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.brand-component-preview-empty span {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  max-width: 200px;
}

.brand-component-modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-component-modal-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.brand-component-modal-body {
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.brand-component-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-component-preview-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: var(--spacing-sm) 0 0;
}

.brand-component-editor-section h4 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
}

.brand-component-properties {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-prop-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-prop-field label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-prop-logo-selector {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-prop-logo-preview {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  width: fit-content;
  display: inline-flex;
  position: relative;
}

.brand-prop-logo-preview img {
  object-fit: contain;
  max-width: 150px;
  max-height: 60px;
}

.brand-prop-logo-remove {
  width: 24px;
  height: 24px;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast);
  background: #0009;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.brand-prop-logo-remove:hover {
  background: var(--destructive);
}

.brand-prop-logo-preview:hover .brand-prop-logo-remove {
  opacity: 1;
}

.brand-prop-logo-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 2px dashed var(--border-light);
  color: var(--text-muted);
  flex-direction: column;
  display: flex;
}

.brand-prop-logo-empty span {
  font-size: var(--font-size-md);
}

.brand-prop-logo-actions {
  gap: var(--spacing-sm);
  align-items: center;
  display: flex;
}

.brand-prop-use-brand-logo {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
  border: none;
  font-weight: 500;
  display: flex;
}

.brand-prop-use-brand-logo:hover:not(:disabled) {
  background: var(--primary-dark);
}

.brand-prop-use-brand-logo:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-prop-use-brand-logo svg {
  flex-shrink: 0;
}

.brand-prop-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.brand-prop-color {
  gap: var(--spacing-sm);
  align-items: center;
  display: flex;
}

.brand-prop-color-input {
  border: 1px solid var(--border-light);
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 2px;
}

.brand-prop-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.brand-prop-color-input::-webkit-color-swatch {
  border: none;
}

.brand-prop-checkbox {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-prop-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.brand-component-modal-interactive {
  max-width: 900px;
  min-height: 600px;
}

.brand-component-modal-header-interactive {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-component-header-left {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.brand-component-type-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
}

.brand-component-type-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-component-name-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  min-width: 200px;
}

.brand-component-name-input:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-component-name-input::placeholder {
  color: var(--text-tertiary);
}

.brand-component-default-toggle {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.brand-component-default-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.brand-component-interactive-body {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: auto;
}

.brand-component-canvas {
  padding: var(--spacing-lg);
  background: #e5e7eb;
  flex-direction: column;
  flex: 1;
  align-items: center;
  min-height: 400px;
  display: flex;
}

.brand-interactive-header {
  background: var(--white);
  width: 100%;
  max-width: 600px;
  box-shadow: none;
  overflow: hidden;
}

.brand-interactive-header-content {
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
}

.brand-interactive-logo {
  object-fit: contain;
  max-width: 200px;
  max-height: 48px;
}

.brand-interactive-logo-wrapper {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.brand-interactive-logo-remove {
  background: var(--destructive);
  width: 24px;
  height: 24px;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  box-shadow: none;
  border: 2px solid #fff;
  justify-content: center;
  align-items: center;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  top: -8px;
  right: -8px;
}

.brand-interactive-logo-remove:hover {
  background: var(--destructive-dark, #dc2626);
}

.brand-interactive-logo-wrapper:hover .brand-interactive-logo-remove {
  opacity: 1;
}

.brand-interactive-logo-placeholder {
  border: 2px dashed var(--border-light);
  color: var(--text-muted);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: 10px 40px;
  transition: all .15s;
  display: flex;
}

.brand-interactive-logo-placeholder:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.brand-interactive-company-name {
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 700;
}

.brand-interactive-company-name:focus {
  background: var(--primary-light);
}

.brand-interactive-footer {
  background: var(--white);
  width: 100%;
  max-width: 600px;
  box-shadow: none;
  align-items: center;
  gap: var(--spacing-md);
  flex-direction: column;
  padding: 16px;
  display: flex;
  overflow: hidden;
}

.brand-interactive-footer-logo {
  object-fit: contain;
  cursor: pointer;
  max-width: 120px;
  max-height: 32px;
  transition: opacity .15s;
}

.brand-interactive-footer-logo:hover {
  opacity: .8;
}

.brand-interactive-footer-logo .brand-interactive-logo-wrapper img {
  max-width: 120px;
  max-height: 32px;
}

.brand-interactive-footer-company {
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 600;
}

.brand-interactive-footer-company:focus {
  background: var(--primary-light);
}

.brand-interactive-footer-tagline, .brand-interactive-footer-address {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  text-align: center;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 8px;
}

.brand-interactive-footer-tagline:focus, .brand-interactive-footer-address:focus {
  background: var(--primary-light);
}

.brand-interactive-footer-tagline::placeholder, .brand-interactive-footer-address::placeholder {
  color: var(--text-tertiary);
}

.brand-interactive-social-links {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  display: flex;
}

.brand-interactive-social-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: all .15s;
  display: flex;
}

.brand-interactive-social-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--primary);
  color: var(--primary);
}

.brand-interactive-social-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.brand-interactive-footer-unsubscribe {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  cursor: default;
  margin-top: var(--spacing-sm);
  text-decoration: underline;
}

.brand-interactive-cta {
  background: var(--white);
  width: 100%;
  max-width: 600px;
  box-shadow: none;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
  flex-direction: column;
  padding: 10px;
  display: flex;
  overflow: hidden;
}

.brand-interactive-cta.variant-centered .brand-interactive-cta-subtitle {
  max-width: 400px;
}

.brand-interactive-cta.variant-centered .brand-interactive-cta-button {
  margin-top: var(--spacing-sm);
}

.brand-interactive-cta.variant-left-aligned {
  align-items: flex-start;
}

.brand-interactive-cta.variant-left-aligned .brand-interactive-cta-subtitle {
  text-align: left;
}

.brand-interactive-cta.variant-left-aligned .brand-interactive-cta-button {
  align-self: flex-start;
}

.brand-interactive-cta-headline {
  text-align: inherit;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 8px;
  font-size: 24px;
  font-weight: 700;
}

.brand-interactive-cta-headline:focus {
  background: var(--primary-light);
}

.brand-interactive-cta-subtitle {
  color: var(--text-secondary);
  text-align: inherit;
  resize: none;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 8px;
  font-size: 16px;
}

.brand-interactive-cta-subtitle:focus {
  background: var(--primary-light);
}

.brand-interactive-cta-button {
  font-size: var(--font-size-base);
  cursor: default;
  margin-top: var(--spacing-md);
  border: none;
  padding: 12px 32px;
  font-weight: 600;
}

.brand-component-style-toolbar {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  display: flex;
}

.brand-toolbar-group {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.brand-toolbar-group:after {
  content: "";
  background: var(--border-light);
  width: 1px;
  height: 24px;
  margin: 0 var(--spacing-xs);
}

.brand-toolbar-group:last-child:after {
  display: none;
}

.brand-toolbar-buttons {
  gap: 2px;
  display: flex;
}

.brand-toolbar-btn {
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  background: none;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

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

.brand-toolbar-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.brand-toolbar-color {
  border: 1px solid var(--border-light);
  cursor: pointer;
  background: none;
  width: 28px;
  height: 28px;
  padding: 2px;
}

.brand-toolbar-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.brand-toolbar-color::-webkit-color-swatch {
  border: none;
}

.brand-toolbar-toggle {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: 4px 8px;
  transition: all .15s;
  display: flex;
}

.brand-toolbar-toggle:hover, .brand-toolbar-toggle.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.brand-toolbar-input {
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  width: 60px;
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 4px 8px;
}

.brand-toolbar-input:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-toolbar-range {
  width: 80px;
  accent-color: var(--primary);
}

.brand-toolbar-action {
  font-size: var(--font-size-sm);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  border: none;
  padding: 6px 12px;
  font-weight: 500;
  transition: background .15s;
}

.brand-toolbar-action:hover:not(:disabled) {
  background: var(--primary-dark);
}

.brand-toolbar-action:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-component-error {
  padding: var(--spacing-md);
  color: #ef4444;
  font-size: var(--font-size-md);
  text-align: center;
  background: #ef44441a;
  border: 1px solid #ef44444d;
}

.brand-logo-picker {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  flex-direction: column;
  width: 300px;
  max-height: 400px;
  display: flex;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.brand-logo-picker-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-logo-picker-header h4 {
  font-size: var(--font-size-md);
  margin: 0;
  font-weight: 600;
}

.brand-logo-picker-close {
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-logo-picker-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.brand-logo-picker-content {
  padding: var(--spacing-md);
  overflow-y: auto;
}

.brand-logo-picker-section {
  margin-bottom: var(--spacing-md);
}

.brand-logo-picker-section:last-child {
  margin-bottom: 0;
}

.brand-logo-picker-section h5 {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 var(--spacing-sm);
  font-weight: 600;
}

.brand-logo-picker-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.brand-logo-picker-item {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.brand-logo-picker-item img {
  object-fit: contain;
  max-width: 100%;
  max-height: 40px;
}

.brand-logo-picker-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.brand-assets {
  position: relative;
}

.brand-assets.drag-active {
  background: var(--primary-light);
}

.brand-assets-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.brand-assets-header h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.brand-assets-header p {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.brand-add-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  display: flex;
}

.brand-add-button:hover {
  background: var(--primary-hover);
}

.brand-add-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-add-button-secondary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-in-out);
  margin-top: var(--spacing-sm);
  background: none;
  padding: 8px 16px;
  font-weight: 500;
  display: flex;
}

.brand-add-button-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.brand-assets-toolbar {
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  flex-wrap: wrap;
  display: flex;
}

.brand-assets-search {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  flex: 1;
  min-width: 200px;
  padding: .5rem .75rem;
  display: flex;
}

.brand-assets-search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.brand-assets-search input {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: .875rem;
}

.brand-assets-search input::placeholder {
  color: var(--text-muted);
}

.brand-assets-search-clear {
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-in-out);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 2px;
  display: flex;
}

.brand-assets-search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.brand-assets-favorites-toggle {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  padding: .5rem .75rem;
  font-size: .8125rem;
  display: flex;
}

.brand-assets-favorites-toggle:hover {
  background: var(--bg-tertiary);
}

.brand-assets-favorites-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--warning);
  cursor: pointer;
}

.brand-assets-view-toggle {
  gap: var(--spacing-2xs);
  background: var(--bg-tertiary);
  padding: 2px;
  display: flex;
}

.brand-assets-view-toggle button {
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-in-out);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: .375rem .5rem;
  display: flex;
}

.brand-assets-view-toggle button:hover {
  color: var(--text-primary);
}

.brand-assets-view-toggle button.active {
  background: var(--bg-primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.brand-assets-drop-overlay {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--primary-light);
  border: 2px dashed var(--primary);
  z-index: 10;
  pointer-events: none;
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.brand-assets-drop-overlay svg {
  color: var(--primary);
}

.brand-assets-drop-overlay p {
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: 500;
}

.brand-dropzone-empty {
  border: 2px dashed var(--border-default);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-in-out);
}

.brand-dropzone-empty:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.brand-upload-modal {
  background: var(--white);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
}

.brand-upload-modal-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-upload-modal-header h3 {
  font-size: var(--font-size-base);
  margin: 0;
  font-weight: 600;
}

.brand-upload-modal-body {
  padding: var(--spacing-md);
}

.brand-upload-dropzone {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border: 2px dashed var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  flex-direction: column;
  transition: all .2s;
  display: flex;
}

.brand-upload-dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.brand-upload-dropzone p {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0;
}

.brand-upload-dropzone span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.brand-upload-dropzone svg {
  color: var(--text-tertiary);
}

.brand-upload-preview {
  text-align: center;
  position: relative;
}

.brand-upload-preview img {
  object-fit: contain;
  max-width: 100%;
  max-height: 150px;
}

.brand-upload-preview button {
  margin-top: var(--spacing-sm);
}

.brand-upload-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-upload-field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.brand-upload-input, .brand-upload-select {
  border: 1px solid var(--border-color);
  width: 100%;
  font-size: var(--font-size-sm);
  background: var(--white);
  padding: 10px 12px;
}

.brand-upload-input:focus, .brand-upload-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-upload-checkbox {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-upload-checkbox input {
  width: 16px;
  height: 16px;
}

.brand-upload-checkbox label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.brand-upload-error {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--error-light, #ef44441a);
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-md);
  display: flex;
}

.brand-upload-progress {
  background: var(--bg-tertiary);
  height: 4px;
  margin-top: var(--spacing-md);
  overflow: hidden;
}

.brand-upload-progress:after {
  content: "";
  height: 100%;
  width: var(--progress, 0%);
  background: var(--primary);
  transition: width .3s;
  display: block;
}

.brand-upload-modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.brand-assets-section {
  margin-bottom: var(--spacing-md);
}

.brand-assets-section-title {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.brand-assets-section-title svg {
  color: var(--text-muted);
}

.brand-assets-recent {
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  display: flex;
  overflow-x: auto;
}

.brand-asset-recent-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  width: 80px;
  height: 80px;
  transition: all var(--duration-fast) var(--ease-in-out);
  flex-shrink: 0;
  overflow: hidden;
}

.brand-asset-recent-card:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}

.brand-asset-recent-card img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: var(--spacing-xs);
}

.brand-asset-count {
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 400;
}

.brand-assets-grid.list-view {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-assets-grid.list-view .brand-asset-card {
  align-items: center;
  gap: var(--spacing-md);
  flex-direction: row;
  display: flex;
}

.brand-assets-grid.list-view .brand-asset-preview {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.brand-assets-grid.list-view .brand-asset-info {
  flex: 1;
}

.brand-assets-grid.list-view .brand-asset-actions {
  opacity: 1;
  background: none;
  padding: 0;
  position: relative;
  top: auto;
  right: auto;
}

.brand-asset-action.logo-active {
  color: var(--primary);
  background: var(--primary-light);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-assets-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-assets-search {
    min-width: auto;
  }

  .brand-assets-favorites-toggle, .brand-assets-view-toggle {
    justify-content: center;
  }
}

.brand-clone-card {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
}

.brand-clone-info {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-clone-title {
  color: var(--text-primary);
  font-size: .9375rem;
  font-weight: 600;
}

.brand-clone-desc {
  color: var(--text-secondary);
  font-size: .8125rem;
}

.brand-clone-btn {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
  border: none;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  display: inline-flex;
}

.brand-clone-btn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.brand-clone-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-clone-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-clone-btn {
    justify-content: center;
    width: 100%;
  }
}

.brand-clone-modal {
  max-width: 480px;
}

.brand-clone-modal-desc {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-size: .875rem;
}

.brand-clone-form {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-clone-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-clone-field label {
  color: var(--text-primary);
  font-size: .8125rem;
  font-weight: 500;
}

.brand-clone-field input, .brand-clone-field textarea {
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--duration-fast) var(--ease-in-out);
  padding: .625rem .75rem;
  font-size: .875rem;
}

.brand-clone-field input:focus, .brand-clone-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.brand-clone-field textarea {
  resize: vertical;
  min-height: 60px;
}

.brand-clone-options {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  flex-direction: column;
  display: flex;
}

.brand-clone-options h4 {
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  font-size: .8125rem;
  font-weight: 600;
}

.brand-clone-option {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  display: flex;
}

.brand-clone-option:hover {
  background: var(--bg-tertiary);
}

.brand-clone-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  margin-top: 2px;
}

.brand-clone-option-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.brand-clone-option-label {
  color: var(--text-primary);
  font-size: .875rem;
  font-weight: 500;
}

.brand-clone-option-desc {
  color: var(--text-muted);
  font-size: .75rem;
}

.brand-modal-clone {
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  border: none;
  padding: .625rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
}

.brand-modal-clone:hover:not(:disabled) {
  background: var(--primary-hover);
}

.brand-modal-clone:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-templates {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-templates-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-templates-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.brand-filter-select {
  border: 1px solid var(--border-default);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-in-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right .5rem center;
  background-repeat: no-repeat;
  padding: .5rem 2rem .5rem .75rem;
  font-size: .875rem;
}

.brand-filter-select:hover {
  border-color: var(--border-strong);
}

.brand-filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.brand-templates-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.brand-template-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: all var(--duration-normal) var(--ease-in-out);
  overflow: hidden;
}

.brand-template-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.brand-template-card-clickable {
  cursor: pointer;
}

.brand-template-preview {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  justify-content: center;
  align-items: flex-start;
  height: 180px;
  display: flex;
  overflow: hidden;
}

.brand-template-preview .brand-component-live-preview {
  width: 100%;
  height: 100%;
}

.brand-template-preview .brand-component-live-preview iframe {
  transform-origin: 0 0;
  pointer-events: none;
  border: none;
  width: 200%;
  height: 400px;
  transform: scale(.5);
}

.brand-template-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.brand-default-templates {
  margin-bottom: var(--spacing-md);
}

.brand-default-templates > h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: 16px;
  font-weight: 600;
}

.brand-default-templates > .brand-templates-description {
  margin-bottom: var(--spacing-sm);
}

.brand-custom-templates-empty {
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  text-align: center;
  margin-top: var(--spacing-sm);
}

.brand-custom-templates-empty h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.brand-custom-templates-empty p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.brand-template-preview-modal {
  background: var(--bg-primary);
  flex-direction: column;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.brand-template-preview-modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.brand-template-preview-modal-header h3 {
  margin: 0 0 var(--spacing-xs);
  font-size: 16px;
  font-weight: 600;
}

.brand-template-preview-modal-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.brand-template-preview-modal-content {
  padding: var(--spacing-lg);
  flex: 1;
  overflow: auto;
}

.brand-template-preview-modal-info {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  display: flex;
}

.brand-template-preview-modal-field {
  flex: 1;
}

.brand-template-preview-modal-field label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  display: block;
}

.brand-template-preview-modal-field span {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.brand-template-preview-modal-iframe {
  border: 1px solid var(--border-light);
  background: var(--white);
  overflow: hidden;
}

.brand-template-preview-modal-iframe iframe {
  border: none;
  width: 100%;
  height: 500px;
}

.brand-template-preview-modal-actions {
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.brand-template-placeholder {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  flex-direction: column;
  display: flex;
}

.brand-template-placeholder span {
  font-size: .75rem;
}

.brand-template-placeholder-icon {
  font-size: 2.5rem;
}

.brand-template-info {
  padding: var(--spacing-md);
}

.brand-template-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.brand-template-name {
  color: var(--text-primary);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.brand-template-badges {
  gap: var(--spacing-xs);
  flex-shrink: 0;
  display: flex;
}

.brand-badge {
  text-transform: uppercase;
  letter-spacing: .05em;
  align-items: center;
  padding: .125rem .5rem;
  font-size: .625rem;
  font-weight: 600;
  display: inline-flex;
}

.brand-badge-default {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.brand-badge-public {
  background: var(--info-light);
  color: var(--info-dark);
}

.brand-badge-global {
  background: var(--success-light);
  color: var(--success-dark);
}

.brand-badge-favorite {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.brand-template-description {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .875rem;
  display: -webkit-box;
  overflow: hidden;
}

.brand-template-meta {
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
  font-size: .75rem;
  display: flex;
}

.brand-template-meta span {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.brand-template-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  border: none;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
}

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

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

.brand-btn-danger {
  background: var(--error-light);
  color: var(--error-dark);
}

.brand-btn-danger:hover {
  background: var(--error);
  color: var(--white);
}

.brand-btn-icon {
  width: 36px;
  height: 36px;
  padding: .5rem;
}

.brand-btn-small {
  padding: .375rem .75rem;
  font-size: .8125rem;
}

.brand-saved-blocks {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-saved-blocks-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-saved-blocks-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.brand-saved-blocks-filters {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-saved-blocks-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.brand-saved-block-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  transition: all var(--duration-fast);
  overflow: hidden;
}

.brand-saved-block-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.brand-saved-block-preview {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  justify-content: center;
  align-items: center;
  height: 140px;
  display: flex;
  overflow: hidden;
}

.brand-saved-block-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.brand-saved-block-thumbnail {
  background: var(--bg-secondary);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.brand-saved-block-thumbnail .brand-component-live-preview {
  width: 100%;
  height: 100%;
}

.brand-saved-block-thumbnail .brand-component-live-preview iframe {
  transform-origin: 0 0;
  pointer-events: none;
  border: none;
  width: 200%;
  height: 400px;
  transform: scale(.5);
}

.brand-saved-block-placeholder {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-muted);
  flex-direction: column;
  display: flex;
}

.brand-saved-block-placeholder-icon {
  font-size: 2rem;
}

.brand-saved-block-placeholder span {
  font-size: var(--font-size-xs);
}

.brand-saved-block-info {
  padding: var(--spacing-md);
}

.brand-saved-block-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.brand-saved-block-name {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.brand-favorite-btn {
  cursor: pointer;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 4px;
  transition: all .15s;
}

.brand-favorite-btn:hover, .brand-favorite-btn.active {
  color: var(--warning);
}

.brand-saved-block-badges {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.brand-saved-block-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.brand-saved-block-meta {
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.brand-saved-block-meta span {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.brand-saved-block-actions {
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-saved-blocks-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-saved-blocks-filters {
    width: 100%;
  }

  .brand-saved-blocks-grid {
    grid-template-columns: 1fr;
  }
}

.brand-components-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.brand-components-header h3 {
  font-size: var(--font-size-lg);
  margin: 0;
  font-weight: 700;
}

.brand-components-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 4px 0 0;
}

.brand-components-types {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-components-types > div > h3 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  margin: 0 0 var(--spacing-sm);
  font-weight: 700;
}

.brand-components-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.comp-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: box-shadow .15s;
  overflow: hidden;
}

.comp-card:hover {
  box-shadow: none;
}

.comp-card:hover .comp-card__overlay {
  opacity: 1;
}

.comp-card__preview {
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
  height: 140px;
  position: relative;
  overflow: hidden;
}

.comp-card__overlay {
  opacity: 0;
  background: #0006;
  justify-content: center;
  align-items: center;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  inset: 0;
}

.comp-card__btn {
  background: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 500;
  display: flex;
}

.comp-card__info {
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 12px;
  display: flex;
}

.comp-card__name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.comp-card__badge {
  font-size: var(--font-size-2xs);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  padding: 2px 6px;
  font-weight: 600;
}

.comp-card__actions {
  gap: 2px;
  padding: 0 12px 10px;
  display: flex;
}

.comp-card__actions button {
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.comp-card__actions button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.comp-card__actions .comp-card__delete:hover {
  background: var(--error-light, #fef2f2);
  color: var(--error, #ef4444);
}

.brand-current-url {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.brand-current-url-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.brand-current-url-value {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-current-url-value a {
  color: var(--primary);
  word-break: break-all;
  text-decoration: none;
}

.brand-current-url-value a:hover {
  text-decoration: underline;
}

.brand-current-url-value .brand-icon-btn {
  flex-shrink: 0;
}

.brand-edit-url-row {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  align-items: center;
  display: flex;
}

.brand-edit-url-row input {
  flex: 1;
}

.brand-fetch-divider {
  margin: var(--spacing-md) 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  align-items: center;
  display: flex;
}

.brand-fetch-divider:before, .brand-fetch-divider:after {
  content: "";
  background: var(--border-light);
  flex: 1;
  height: 1px;
}

.brand-fetch-divider span {
  padding: 0 var(--spacing-md);
}

.brand-fetch-input-row {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  display: flex;
}

.brand-fetch-btn {
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  display: flex;
}

.brand-fetch-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--border-hover);
}

.brand-fetch-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-fetch-spinner {
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  width: 16px;
  height: 16px;
  animation: .8s linear infinite spin;
}

.brand-fetch-error {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--error-bg, #fef2f2);
  color: var(--error, #dc2626);
  font-size: var(--font-size-md);
}

.brand-fetch-preview {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.brand-fetch-preview-header {
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.brand-fetch-preview-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
}

.brand-fetch-logo {
  object-fit: contain;
  width: 36px;
  height: 36px;
}

.brand-fetch-colors {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.brand-fetch-color {
  border: 1px solid var(--border-color);
  width: 32px;
  height: 32px;
}

.brand-fetch-font {
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-secondary);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.brand-fetch-font svg {
  color: var(--primary);
}

.brand-settings {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-settings-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
}

.brand-settings-section h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-size: 18px;
  font-weight: 600;
}

.brand-settings-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.brand-settings-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-settings-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-settings-field label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-settings-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: border-color .2s, box-shadow .2s;
}

.brand-settings-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-alpha);
  outline: none;
}

.brand-settings-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.brand-settings-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-alpha);
  outline: none;
}

.brand-settings-help {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.brand-settings-logo-preview {
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  display: flex;
}

.brand-settings-logo-image {
  object-fit: contain;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  width: 56px;
  height: 56px;
  padding: 6px;
}

.brand-settings-logo-clear {
  color: var(--danger);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.brand-settings-save-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  align-self: flex-start;
  font-weight: 500;
  transition: background-color .2s, opacity .2s;
}

.brand-settings-save-btn:hover:not(:disabled) {
  background: var(--primary-dark);
}

.brand-settings-save-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.settings-brand-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  display: block;
  overflow: hidden;
}

.settings-brand-card:hover {
  border-color: var(--gray-300);
  box-shadow: none;
  transform: translateY(-2px);
}

.settings-brand-preview {
  height: 140px;
  position: relative;
  overflow: hidden;
}

.settings-brand-info {
  border-top: 1px solid var(--gray-100);
  padding: 16px;
}

.settings-brand-name {
  color: var(--gray-900);
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
}

.settings-brand-default-badge {
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  font-weight: 500;
  display: inline-flex;
}

.settings-brand-project {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin-bottom: 12px;
}

.settings-brand-colors {
  gap: var(--spacing-sm-xs);
  display: flex;
}

.settings-brand-color-dot {
  width: 20px;
  height: 20px;
  box-shadow: none;
  border: 2px solid #fff;
}

.settings-brands {
  padding: 8px 0;
}

.settings-brands-empty {
  text-align: center;
  color: var(--gray-500);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  display: flex;
}

.settings-brands-empty svg {
  opacity: .4;
  margin-bottom: 16px;
}

.settings-brands-empty h3 {
  color: var(--gray-700);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.settings-brands-empty p {
  font-size: var(--font-size-base);
  max-width: 400px;
}

.settings-brands-header {
  margin-bottom: 16px;
}

.settings-brands-header h2 {
  color: var(--gray-900);
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
}

.settings-brands-header p {
  font-size: var(--font-size-base);
  color: var(--gray-600);
}

.settings-brands-grid {
  gap: var(--spacing-md-lg);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

@media (max-width: 640px) {
  .settings-brands-grid {
    grid-template-columns: 1fr;
  }
}

.brand-button-styles {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-button-style-option {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  flex-direction: column;
  min-width: 100px;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.brand-button-style-option:hover:not(:disabled) {
  border-color: var(--border-hover);
  background: var(--bg-tertiary);
}

.brand-button-style-option.selected {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.brand-button-style-option:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-button-style-preview {
  color: var(--white);
  font-size: var(--font-size-md);
  padding: 8px 16px;
  font-weight: 500;
}

.brand-button-style-label {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-settings-toggle-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.brand-settings-toggle-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.brand-settings-toggle-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-settings-toggle-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.brand-settings-toggle {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  transition: background-color .2s, border-color .2s;
  position: relative;
}

.brand-settings-toggle:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.brand-settings-toggle.active {
  background: var(--primary);
  border-color: var(--primary);
}

.brand-settings-toggle.active .brand-settings-toggle-handle {
  transform: translateX(22px);
}

.brand-settings-toggle:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-settings-toggle-handle {
  background: var(--white);
  width: 20px;
  height: 20px;
  box-shadow: none;
  transition: transform .2s;
  position: absolute;
  top: 2px;
  left: 2px;
}

@media (max-width: 640px) {
  .brand-settings-toggle-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-button-styles {
    flex-direction: column;
  }

  .brand-button-style-option {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
  }
}

.brand-settings-danger h3 {
  color: var(--danger);
}

.brand-danger-card {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: #ef44440d;
  border: 1px solid #ef444433;
  align-items: center;
  display: flex;
}

.brand-danger-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.brand-danger-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-danger-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.brand-danger-btn {
  min-width: 160px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--danger);
  color: var(--white);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
  display: inline-flex;
}

.brand-danger-btn:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
}

.brand-danger-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .brand-danger-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.brand-modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  animation: .15s ease-out fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.brand-modal {
  background: var(--bg-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 400px;
  animation: .2s ease-out slideUp;
  box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}

.brand-modal h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 20px;
  font-weight: 600;
}

.brand-modal p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.brand-modal p strong {
  color: var(--text-primary);
}

.brand-modal-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-modal-close {
  width: 32px;
  height: 32px;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: color .15s;
  display: flex;
}

.brand-modal-close:hover {
  color: var(--text-primary);
}

.brand-modal-cancel {
  min-width: 110px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  font-weight: 500;
  transition: background-color .2s;
}

.brand-modal-cancel:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

.brand-modal-cancel:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-modal-delete {
  min-width: 140px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--danger);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  font-weight: 500;
  transition: background-color .2s, opacity .2s;
}

.brand-modal-delete:hover:not(:disabled) {
  background: #dc2626;
}

.brand-modal-delete:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.api-keys-section .api-keys-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

@media (max-width: 767px) {
  .api-keys-section .api-keys-header {
    flex-direction: column;
  }
}

.api-keys-section .api-keys-title-row {
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.api-keys-section .api-keys-title-row h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.api-keys-section .api-keys-icon {
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.api-keys-info-cards {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .api-keys-info-cards {
    grid-template-columns: 1fr;
  }
}

.api-info-card {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
}

.api-info-card svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.api-info-card strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 600;
  display: block;
}

.api-info-card span {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.api-keys-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-light);
  color: var(--error);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.api-keys-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  color: var(--text-muted);
  flex-direction: column;
  display: flex;
}

.api-keys-loading svg {
  animation: 1s linear infinite spin;
}

.api-keys-content {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: 1fr 1.5fr;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .api-keys-content {
    grid-template-columns: 1fr;
  }
}

.api-keys-detail-panel {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.api-keys-list-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}

.api-keys-list-panel .panel-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.api-keys-list-panel .panel-header h4 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.api-keys-list-panel .panel-header .keys-count {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
}

.api-keys-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
  flex-direction: column;
  display: flex;
}

.api-keys-empty svg {
  opacity: .5;
}

.api-keys-empty h4 {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  font-weight: 600;
}

.api-keys-empty p {
  font-size: var(--font-size-sm);
  max-width: 300px;
  margin: 0;
}

.inactive-keys-section {
  margin-top: var(--spacing-sm);
}

.inactive-keys-section summary {
  padding: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.key-secret-display {
  background: var(--success-light);
  border: 1px solid var(--success);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.key-secret-display .secret-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.key-secret-display .secret-header h4 {
  font-size: var(--font-size-sm);
  color: var(--success-dark);
  margin: 0;
  font-weight: 600;
}

.key-secret-display .secret-value {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  display: flex;
}

.key-secret-display .secret-value code {
  word-break: break-all;
  flex: 1;
}

.key-secret-display .secret-warning {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--warning-dark);
}

.api-key-card {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--duration-fast);
}

.api-key-card:hover {
  background: var(--bg-secondary);
}

.api-key-card.selected {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
}

.api-key-card.inactive {
  opacity: .6;
}

.api-key-header {
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.api-key-info .api-key-name {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 500;
  display: block;
}

.api-key-info .api-key-prefix {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.api-key-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
}

.api-key-status.active {
  background: var(--success-light);
  color: var(--success);
}

.api-key-status.inactive {
  background: var(--gray-100);
  color: var(--gray-500);
}

.api-key-scopes {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.api-key-scopes .scope-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 2px 6px;
  font-size: 10px;
}

.api-key-scopes .scope-badge.more {
  background: var(--primary-light);
  color: var(--primary);
}

.api-key-stats {
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.api-key-stats span {
  align-items: center;
  gap: 4px;
  display: flex;
}

.api-key-actions {
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.api-key-actions button {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  display: flex;
}

.api-key-actions button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.api-key-actions button.btn-danger:hover {
  background: var(--error-light);
  color: var(--error);
  border-color: var(--error);
}

.api-key-actions .revoke-confirm {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  display: flex;
}

.api-key-actions .revoke-confirm .btn-confirm {
  background: var(--error);
  color: var(--white);
  border: none;
}

.usage-dashboard {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
}

.usage-dashboard h4 {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.usage-dashboard .usage-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.billing-estimates {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.billing-estimates h4 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
}

.billing-estimates p {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0;
}

.code-examples {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}

.code-examples .code-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.code-examples .code-header h4 {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.code-examples .code-tabs {
  gap: var(--spacing-xs);
  display: flex;
}

.code-examples .code-tabs button {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  padding: 4px 12px;
}

.code-examples .code-tabs button.active {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.code-examples pre {
  padding: var(--spacing-md);
  background: var(--gray-900);
  color: var(--gray-100);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  margin: 0;
  overflow-x: auto;
}

.brand-articles-tab {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-articles-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.brand-articles-header--stacked {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-articles-header .brand-articles-header-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  display: flex;
}

.brand-articles-header .brand-articles-title {
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.brand-articles-header .brand-articles-title svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.brand-articles-header .brand-articles-title h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
}

.brand-articles-header .brand-articles-title p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.brand-articles-header .brand-articles-actions {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
  display: flex;
}

.brand-articles-header .brand-articles-action-btn {
  justify-content: center;
  min-width: 220px;
}

.brand-articles-header .brand-articles-action-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: inline-flex;
}

.brand-articles-header .brand-articles-source-card {
  border: 1px solid var(--border-light);
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  box-shadow: none;
  border-radius: 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  display: flex;
}

.brand-articles-header .brand-articles-source-icon {
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.brand-articles-header .brand-articles-source-copy {
  min-width: 0;
}

.brand-articles-header .brand-articles-source-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.brand-articles-header .brand-articles-source-label {
  color: var(--text-secondary);
  margin-top: 2px;
  font-size: 12px;
}

.brand-articles-header .brand-articles-source-url {
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 12px;
  overflow: hidden;
}

.brand-articles-header .brand-articles-source-link {
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: auto;
}

.brand-articles-error {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: #ef4444;
  font-size: var(--font-size-base);
  background: #ef44441a;
  border: 1px solid #ef44444d;
  display: flex;
}

.brand-articles-error button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: none;
  margin-left: auto;
  padding: 4px;
}

.brand-articles-error button:hover {
  opacity: .7;
}

.brand-discovered-feeds {
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, #7c3aed0d, #3b82f60d);
  border: 1px solid #7c3aed33;
}

.brand-discovered-feeds h3 {
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.brand-discovered-feeds h3 svg {
  color: #7c3aed;
}

.brand-discovered-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-discovered-item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  display: flex;
}

.brand-discovered-item .brand-discovered-info {
  gap: var(--spacing-xs);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.brand-discovered-item .brand-discovered-title {
  color: var(--text-primary);
  font-weight: 500;
}

.brand-discovered-item .brand-discovered-type {
  font-size: var(--font-size-2xs);
  color: #7c3aed;
  background: #7c3aed1a;
  width: fit-content;
  padding: 2px 6px;
  font-weight: 600;
  display: inline-block;
}

.brand-discovered-item .brand-discovered-url {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  overflow: hidden;
}

.brand-discovered-item .brand-discovered-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.brand-feeds-section, .brand-selected-panel {
  background: var(--bg-primary);
  border: 2px solid var(--primary);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.brand-feeds-section .brand-selected-header, .brand-selected-panel .brand-selected-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-feeds-section .brand-selected-info, .brand-selected-panel .brand-selected-info {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  display: flex;
}

.brand-feeds-section .brand-selected-info svg, .brand-selected-panel .brand-selected-info svg, .brand-feeds-section .brand-selected-info strong, .brand-selected-panel .brand-selected-info strong {
  color: var(--primary);
}

.brand-feeds-section .brand-selected-actions, .brand-selected-panel .brand-selected-actions {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-feeds-section .brand-selected-list, .brand-selected-panel .brand-selected-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-feeds-section .brand-selected-item, .brand-selected-panel .brand-selected-item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-secondary);
  font-size: var(--font-size-md);
  display: flex;
}

.brand-feeds-section .brand-selected-number, .brand-selected-panel .brand-selected-number {
  background: var(--primary);
  width: 20px;
  height: 20px;
  color: var(--white);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.brand-feeds-section .brand-selected-title, .brand-selected-panel .brand-selected-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
}

.brand-feeds-section .brand-selected-remove, .brand-selected-panel .brand-selected-remove {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all .15s;
  display: flex;
}

.brand-feeds-section .brand-selected-remove:hover, .brand-selected-panel .brand-selected-remove:hover {
  background: var(--danger-light, #fef2f2);
  color: var(--danger, #ef4444);
}

.brand-articles-section .brand-articles-section-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-articles-section h3 {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-primary);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.brand-articles-section h3 svg {
  color: var(--text-secondary);
}

.brand-articles-section .brand-selection-controls {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-feeds-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-feed-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.brand-feed-card--disabled {
  opacity: .6;
}

.brand-feed-card .brand-feed-header {
  padding: var(--spacing-md);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  transition: background-color .15s;
  display: flex;
}

.brand-feed-card .brand-feed-header:hover {
  background: var(--bg-secondary);
}

.brand-feed-card .brand-feed-info {
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.brand-feed-card .brand-feed-name {
  color: var(--text-primary);
  font-weight: 500;
}

.brand-feed-card .brand-feed-status {
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.brand-feed-card .brand-feed-badge {
  font-size: var(--font-size-2xs);
  color: #22c55e;
  background: #22c55e1a;
  padding: 2px 6px;
  font-weight: 600;
}

.brand-feed-card .brand-feed-badge--inactive {
  color: #ef4444;
  background: #ef44441a;
}

.brand-feed-card .brand-feed-badge--error {
  color: #ef4444;
  background: #ef44441a;
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.brand-feed-card .brand-feed-meta-inline {
  color: #22c55e;
  align-items: center;
  display: inline-flex;
}

.brand-feed-card .brand-feed-count {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.brand-feed-card .brand-feed-actions {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.brand-feed-card .brand-feed-details {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  flex-direction: column;
  padding-top: 0;
  display: flex;
}

.brand-feed-card .brand-feed-url {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  display: flex;
}

.brand-feed-card .brand-feed-url a {
  color: var(--primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
}

.brand-feed-card .brand-feed-url a:hover {
  text-decoration: underline;
}

.brand-feed-card .brand-feed-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
}

.brand-feed-card .brand-feed-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.brand-feed-card .brand-feed-error {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: #ef4444;
  display: flex;
}

.brand-feed-card .brand-feed-edit-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-feed-card .brand-feed-edit-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-feed-card .brand-feed-edit-field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.brand-feed-card .brand-feed-edit-field input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  font-size: var(--font-size-md);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.brand-feed-card .brand-feed-edit-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
  outline: none;
}

.brand-feed-card .brand-feed-edit-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-feed-card .brand-icon-btn-sm {
  padding: var(--spacing-xs);
  width: 24px;
  height: 24px;
}

.feed-progress {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 16px;
  display: flex;
}

.feed-progress-spinner {
  color: var(--primary);
  line-height: 0;
}

.feed-progress-domain {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 6px 14px;
  font-family: monospace;
  display: flex;
  overflow: hidden;
}

.feed-progress-domain svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.feed-progress-bar-wrap {
  background: var(--gray-100);
  border-radius: 3px;
  width: 100%;
  height: 6px;
  overflow: hidden;
}

.feed-progress-bar-fill {
  background: var(--primary);
  border-radius: 3px;
  height: 100%;
}

.feed-progress-step {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-weight: 500;
  display: flex;
}

.feed-progress-step svg {
  color: var(--primary);
}

.feed-progress-articles {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
}

.feed-progress-article {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  font-size: 11px;
  display: flex;
  position: absolute;
}

.feed-progress-article svg:first-child {
  color: var(--text-tertiary);
}

.feed-progress-article svg:last-child {
  color: #059669;
}

.feed-progress-article span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.brand-articles-filters {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-articles-filters .brand-filters-row {
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.brand-articles-filters .brand-search-input {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.brand-articles-filters .brand-search-input svg {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.brand-articles-filters .brand-search-input input {
  border: 1px solid var(--border-color);
  width: 100%;
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 10px 12px 10px 38px;
}

.brand-articles-filters .brand-search-input input::placeholder {
  color: var(--text-tertiary);
}

.brand-articles-filters .brand-search-input input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
  outline: none;
}

.brand-articles-filters .brand-btn-icon {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: all .2s;
  display: flex;
  position: relative;
}

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

.brand-articles-filters .brand-btn-icon.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.brand-articles-filters .brand-btn-text {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 12px;
  transition: color .2s;
  display: flex;
}

.brand-articles-filters .brand-btn-text:hover {
  color: var(--primary);
}

.brand-articles-filters .brand-filter-badge {
  background: var(--primary);
  width: 8px;
  height: 8px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.brand-articles-filters .brand-filters-expanded {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
  display: flex;
}

.brand-articles-filters .brand-filter-group {
  gap: var(--spacing-xs);
  flex-direction: column;
  min-width: 150px;
  display: flex;
}

.brand-articles-filters .brand-filter-group label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 500;
}

.brand-articles-filters .brand-active-filters {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.brand-articles-filters .brand-filter-tag {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--primary-light, rgba(var(--primary-rgb), .1));
  color: var(--primary);
  font-size: var(--font-size-sm);
  padding: 4px 8px 4px 12px;
  display: inline-flex;
}

.brand-articles-filters .brand-filter-tag button {
  width: 16px;
  height: 16px;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: opacity .2s;
  display: flex;
}

.brand-articles-filters .brand-filter-tag button:hover {
  opacity: 1;
}

.brand-articles-filters .brand-select {
  border: 1px solid var(--border-color);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 150px;
  padding: 10px 12px;
}

.brand-articles-filters .brand-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-articles-filters .brand-checkbox-label {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
}

.brand-articles-filters .brand-checkbox-label input {
  accent-color: var(--primary);
}

.brand-articles-list {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-article-card {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all .15s;
  display: flex;
}

.brand-article-card:hover {
  border-color: var(--primary);
}

.brand-article-card.used {
  opacity: .6;
}

.brand-article-card.selection-mode {
  cursor: pointer;
}

.brand-article-card.selection-mode:hover {
  background: var(--bg-secondary);
}

.brand-article-card.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

.brand-article-card .brand-article-checkbox {
  color: var(--text-tertiary);
  align-items: flex-start;
  padding-top: 2px;
  display: flex;
  position: relative;
}

.brand-article-card .brand-article-checkbox .checked {
  color: var(--primary);
}

.brand-article-card .brand-article-order {
  background: var(--primary);
  width: 18px;
  height: 18px;
  color: var(--white);
  font-size: var(--font-size-xs);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: -4px;
  right: -8px;
}

.brand-article-card .brand-article-image {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  overflow: hidden;
}

.brand-article-card .brand-article-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.brand-article-card .brand-article-content {
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.brand-article-card .brand-article-title {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  display: flex;
}

.brand-article-card .brand-article-title svg {
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .15s;
}

.brand-article-card .brand-article-title:hover {
  color: var(--primary);
}

.brand-article-card .brand-article-title:hover svg {
  opacity: 1;
}

.brand-article-card .brand-article-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.brand-article-card .brand-article-meta {
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex-wrap: wrap;
  display: flex;
}

.brand-article-card .brand-article-meta span {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.brand-article-card .brand-article-meta .brand-article-used {
  color: #22c55e;
}

.brand-article-card .brand-article-tags {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.brand-article-card .brand-article-tag {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 2px 8px;
  display: flex;
}

.brand-article-card .brand-article-actions {
  gap: var(--spacing-xs);
  flex-direction: column;
  flex-shrink: 0;
  display: flex;
}

.brand-load-more {
  margin-top: var(--spacing-md);
  align-self: center;
}

.brand-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  display: flex;
}

.brand-empty-state {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  text-align: center;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.brand-empty-state svg {
  opacity: .3;
}

.brand-empty-state p {
  margin: 0;
}

.brand-empty-state .brand-empty-hint {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  max-width: 300px;
}

.brand-empty-state.brand-empty-sm {
  padding: var(--spacing-lg);
}

.brand-btn {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.brand-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.brand-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.brand-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

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

.brand-btn-secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

.brand-btn-sm {
  font-size: var(--font-size-md);
  padding: 6px 12px;
}

.brand-icon-btn {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

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

.brand-icon-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.brand-icon-btn-danger:hover {
  color: #ef4444;
  background: #ef44441a;
}

.brand-icon-btn-active {
  color: var(--primary);
}

.spin {
  animation: 1s linear infinite spin;
}

.brand-modal-overlay {
  z-index: 1000;
  padding: var(--spacing-md);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.brand-modal {
  background: var(--bg-primary);
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.brand-modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.brand-modal-header button {
  cursor: pointer;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 4px;
}

.brand-modal-header button:hover {
  color: var(--text-primary);
}

.brand-modal-body {
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.brand-modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
}

.brand-form-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brand-form-field label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.brand-form-field input {
  border: 1px solid var(--border-color);
  font-size: var(--font-size-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 10px 12px;
}

.brand-form-field input::placeholder {
  color: var(--text-tertiary);
}

.brand-form-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
  outline: none;
}

.brand-form-field .brand-form-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brand-articles-header {
    flex-direction: column;
  }

  .brand-articles-header .brand-articles-actions {
    width: 100%;
  }

  .brand-articles-header .brand-articles-actions .brand-btn {
    flex: 1;
    justify-content: center;
  }

  .brand-articles-filters .brand-search-input {
    width: 100%;
  }

  .brand-articles-filters .brand-select {
    flex: 1;
  }

  .brand-article-card {
    flex-direction: column;
  }

  .brand-article-card .brand-article-image {
    width: 100%;
    height: 160px;
  }

  .brand-article-card .brand-article-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.brand-style-guide {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.brand-style-guide-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.brand-style-guide-header h3 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
}

.brand-style-guide-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.brand-style-guide-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-style-guide-btn {
  align-items: center;
  gap: var(--spacing-sm-xs);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.brand-style-guide-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-hover);
}

.brand-style-guide-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.brand-style-guide-btn.primary:hover {
  background: var(--primary-hover);
}

@media (max-width: 640px) {
  .brand-style-guide-header {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-style-guide-actions {
    flex-wrap: wrap;
  }
}

.brand-style-guide-sharing {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
}

.brand-style-guide-sharing h4 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.brand-style-guide-sharing > p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.brand-style-guide-toggle {
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.brand-style-guide-toggle span {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.brand-toggle-switch {
  width: 44px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.brand-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.brand-toggle-switch input:checked + .brand-toggle-slider {
  background-color: var(--success);
}

.brand-toggle-switch input:checked + .brand-toggle-slider:before {
  transform: translateX(20px);
}

.brand-toggle-switch input:disabled + .brand-toggle-slider {
  opacity: .5;
  cursor: not-allowed;
}

.brand-toggle-slider {
  cursor: pointer;
  background-color: var(--gray-300);
  transition: all .3s;
  position: absolute;
  inset: 0;
}

.brand-toggle-slider:before {
  content: "";
  background-color: var(--white);
  width: 18px;
  height: 18px;
  box-shadow: none;
  transition: all .3s;
  position: absolute;
  bottom: 3px;
  left: 3px;
}

.brand-style-guide-link {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-public-link-input {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  flex: 1;
  padding: 10px 12px;
  font-family: monospace;
}

.brand-copy-link-btn {
  align-items: center;
  gap: var(--spacing-sm-xs);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.brand-copy-link-btn:hover {
  background: var(--bg-secondary);
}

@media (max-width: 640px) {
  .brand-style-guide-link {
    flex-direction: column;
  }
}

.brand-style-guide-preview {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.style-guide-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
}

.style-guide-section h4 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  font-size: 16px;
  font-weight: 600;
}

.style-guide-brand-header {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.style-guide-brand-header .style-guide-logo {
  object-fit: contain;
  max-width: 120px;
  max-height: 60px;
}

.style-guide-brand-header h5 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
}

.style-guide-brand-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.style-guide-colors {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  display: grid;
}

.style-guide-color {
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.style-guide-color-swatch {
  height: 60px;
}

.style-guide-color-info {
  background: var(--bg-secondary);
  padding: 10px;
}

.style-guide-color-info .style-guide-color-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 500;
  display: block;
}

.style-guide-color-info code {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-family: monospace;
}

.style-guide-typography {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  display: grid;
}

.style-guide-font {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
}

.style-guide-font label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.style-guide-font span {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.style-guide-buttons {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.style-guide-buttons .style-guide-button-info label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.style-guide-buttons .style-guide-button-info span {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-transform: capitalize;
}

.style-guide-layout {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  display: grid;
}

.style-guide-layout-item {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
}

.style-guide-layout-item label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.style-guide-layout-item span {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  text-transform: capitalize;
}

.style-guide-assets-summary {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.style-guide-stat {
  text-align: center;
}

.style-guide-stat .style-guide-stat-value {
  font-size: var(--font-size-3xl);
  color: var(--primary);
  font-weight: 700;
  line-height: 1.2;
  display: block;
}

.style-guide-stat .style-guide-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

@media (max-width: 640px) {
  .style-guide-colors {
    grid-template-columns: repeat(2, 1fr);
  }

  .style-guide-assets-summary {
    justify-content: space-around;
  }
}

.preview-brand {
  text-align: center;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 16px;
  padding-bottom: 24px;
}

.preview-brand-logo {
  background: var(--primary-light);
  width: 60px;
  height: 60px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
  display: flex;
}

.preview-brand-logo svg {
  width: 32px;
  height: 32px;
}

.preview-brand-name {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  margin: 0 0 4px;
  font-weight: 700;
}

.preview-brand-tagline {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.brand-editor-layout {
  gap: var(--spacing-md);
  grid-template-columns: minmax(0, 1fr) 272px;
  align-items: start;
  display: grid;
}

.brand-live-preview-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  position: sticky;
  top: 24px;
  overflow: hidden;
}

.brand-live-preview-header {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brand-live-preview-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.brand-live-preview-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.brand-live-preview-container {
  padding: var(--spacing-lg);
  background: #e5e7eb;
}

.brand-live-email {
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
}

.brand-live-header {
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.brand-live-logo {
  object-fit: contain;
  max-width: 140px;
  max-height: 36px;
}

.brand-live-logo-text {
  font-size: 20px;
  font-weight: 700;
}

.brand-live-content {
  padding: 10px 12px;
}

.brand-live-heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.brand-live-subheading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.brand-live-text {
  font-size: var(--font-size-base);
  margin: 0 0 12px;
  line-height: 1.6;
}

.brand-live-link {
  cursor: default;
  text-decoration: underline;
}

.brand-live-button {
  font-size: var(--font-size-base);
  cursor: default;
  border: none;
  margin-top: 8px;
  padding: 12px 24px;
  font-weight: 600;
  display: inline-block;
}

.brand-live-footer {
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 10px 12px;
}

.brand-live-footer p {
  margin: 0 0 4px;
}

.brand-live-footer p:last-child {
  margin-bottom: 0;
}

.brand-live-footer a {
  cursor: default;
  text-decoration: underline;
}

.brand-controls-panel {
  width: 272px;
  min-width: 0;
  max-width: 272px;
}

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

  .brand-live-preview-panel {
    margin-bottom: var(--spacing-sm);
    order: -1;
    position: relative;
    top: 0;
  }

  .brand-controls-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.component-customize-preview {
  margin-bottom: var(--spacing-sm);
}

.component-customize-preview label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  display: block;
}

.component-customize-preview-box {
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
  background: #f8fafc;
  min-height: 80px;
  overflow: hidden;
}

.component-customize-preview-box .brand-component-live-preview {
  aspect-ratio: auto;
  background: var(--white);
  min-height: 60px;
}

.component-customize-preview-box .brand-component-live-preview iframe {
  transform-origin: 0 0;
  border: none;
  width: 200%;
  height: 200px;
  transform: scale(.5);
}

.color-fields-row {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.color-field-compact {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.color-field-compact label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.color-picker-row {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.color-suggestions {
  gap: 4px;
  display: flex;
}

.color-suggestion {
  cursor: pointer;
  border: 1px solid #0000001a;
  width: 20px;
  height: 20px;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}

.color-suggestion:hover {
  box-shadow: none;
  transform: scale(1.15);
}

.color-swatch-input {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 6px 10px;
  display: flex;
}

.color-swatch-input input[type="color"] {
  cursor: pointer;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
}

.color-swatch-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch-input input[type="color"]::-webkit-color-swatch {
  border: 1px solid #0000001a;
}

.color-swatch-input .color-hex {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  font-family: monospace;
}

.component-editor {
  background: var(--bg-secondary);
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

.component-editor-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.component-editor-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--error);
  flex-direction: column;
  display: flex;
}

.component-editor-error button {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  cursor: pointer;
}

.component-editor-error button:hover {
  background: var(--bg-elevated);
}

.component-editor-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.component-editor-header-left {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.component-editor-back {
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.component-editor-back:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.component-editor-title h1 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.component-editor-type {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 2px;
  display: inline-block;
}

.component-editor-header-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.component-editor-content {
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  flex: 1;
  grid-template-columns: 1fr 400px;
  display: grid;
}

.component-editor-preview {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
}

.component-editor-preview h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  font-weight: 600;
}

.component-editor-preview-box {
  border: 1px solid var(--border-light);
  background: var(--white);
  min-height: 300px;
  overflow: hidden;
}

.component-editor-preview-box iframe {
  border: none;
  width: 100%;
  height: 400px;
}

.component-editor-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
}

.component-editor-form h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.component-editor-error-message {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--error-light);
  color: var(--error);
  font-size: var(--font-size-sm);
  display: flex;
}

.component-editor-field {
  margin-bottom: var(--spacing-md);
}

.component-editor-field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.component-editor-input, .component-editor-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--duration-fast);
}

.component-editor-input:focus, .component-editor-textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.component-editor-input::placeholder, .component-editor-textarea::placeholder {
  color: var(--text-muted);
}

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

.component-editor-checkbox {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
}

.component-editor-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.component-editor-checkbox label {
  cursor: pointer;
}

.component-editor-checkbox label span:first-child {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
  display: block;
}

.component-editor-checkbox-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .component-editor-content {
    grid-template-columns: 1fr;
  }
}

.brandkit-layout {
  gap: var(--spacing-md);
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 200px);
  display: grid;
}

.brandkit-sidebar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brandkit-sidebar-section {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
}

.brandkit-section-header svg:last-child {
  color: var(--text-tertiary);
  margin-left: auto;
}

.brandkit-themes-list {
  padding: var(--spacing-xs) 0;
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.brandkit-theme-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: none;
  border: none;
  display: flex;
}

.brandkit-theme-item:hover {
  background: var(--bg-tertiary);
}

.brandkit-theme-swatch {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.brandkit-elements-list {
  padding: var(--spacing-xs) 0;
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.brandkit-element-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: none;
  border: none;
  display: flex;
}

.brandkit-element-item:hover {
  background: var(--bg-tertiary);
  color: var(--primary);
}

.brandkit-sidebar-section {
  border-bottom: 1px solid var(--border-light);
}

.brandkit-sidebar-section:last-child {
  border-bottom: none;
}

.brandkit-section-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  font-weight: 600;
  display: flex;
}

.brandkit-section-header:hover {
  background: var(--bg-secondary);
}

.brandkit-section-header svg:last-child {
  opacity: .5;
  margin-left: auto;
}

.brandkit-section-header.static {
  cursor: default;
}

.brandkit-section-header.static:hover {
  background: none;
}

.brandkit-section-content {
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brandkit-summary-text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.brandkit-quick-actions {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brandkit-quick-action {
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  text-align: left;
  cursor: pointer;
  display: flex;
}

.brandkit-quick-action:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.brandkit-meta-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brandkit-meta-item {
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
}

.brandkit-meta-item strong {
  color: var(--text-primary);
  text-align: right;
  font-weight: 600;
}

.brandkit-scan-section {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.brandkit-scan-title {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: flex;
}

.brandkit-scan-form {
  gap: var(--spacing-xs);
  display: flex;
}

.brandkit-scan-input {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: var(--font-size-xs);
  flex: 1;
}

.brandkit-scan-input:focus {
  border-color: var(--primary);
  outline: none;
}

.brandkit-scan-btn {
  padding: var(--spacing-xs);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

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

.brandkit-scan-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.brandkit-spinner {
  border: 2px solid #0000;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: .6s linear infinite spin;
}

.brandkit-panel {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brandkit-preview-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
}

.brandkit-preview-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.brandkit-preview-header h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.brandkit-saving {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.brandkit-preview-container {
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.brandkit-colors-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
}

.brandkit-colors-section h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
  font-weight: 600;
}

.brandkit-color-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.brandkit-identity-grid {
  gap: var(--spacing-md);
  grid-template-columns: 1.2fr 1fr 1fr;
  display: grid;
}

.brandkit-identity-card {
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brandkit-identity-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.brandkit-identity-value {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brandkit-identity-value p {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 4px 0 0;
}

.brandkit-identity-logo {
  object-fit: contain;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 6px;
}

.brandkit-identity-logo--empty {
  color: var(--text-primary);
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: inline-flex;
}

.brandkit-color-item {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.brandkit-color-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.brandkit-color-picker {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
}

.brandkit-color-picker.readonly {
  justify-content: flex-start;
}

.brandkit-color-swatch {
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.brandkit-color-value {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-family: monospace;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .brandkit-layout {
    grid-template-columns: 180px 1fr;
  }

  .brandkit-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brandkit-identity-grid {
    grid-template-columns: 1fr;
  }
}

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

  .brandkit-sidebar {
    order: 2;
  }

  .brandkit-panel {
    order: 1;
  }

  .brandkit-color-grid, .brandkit-identity-grid {
    grid-template-columns: 1fr;
  }
}

.brandkit-full-preview {
  padding: var(--spacing-lg);
  min-height: 400px;
}

.brandkit-preview-canvas {
  max-width: 600px;
  margin: 0 auto;
}

.brandkit-newsletter-wrapper {
  box-shadow: none;
}

.brandkit-newsletter-header {
  padding: var(--spacing-lg);
  text-align: center;
}

.brandkit-preview-logo {
  object-fit: contain;
  max-width: 180px;
  max-height: 48px;
}

.brandkit-preview-brand-name {
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.brandkit-hero-section {
  padding: var(--spacing-lg);
  text-align: center;
}

.brandkit-hero-image {
  height: 180px;
  margin-bottom: var(--spacing-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brandkit-hero-placeholder {
  font-size: var(--font-size-lg);
  opacity: .7;
  font-weight: 500;
}

.brandkit-hero-title {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 700;
  line-height: 1.3;
}

.brandkit-hero-subtitle {
  font-size: var(--font-size-base);
  opacity: .85;
  margin: 0;
  line-height: 1.5;
}

.brandkit-articles-section {
  padding: var(--spacing-lg);
  border-top: 1px solid #00000014;
}

.brandkit-section-title {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-md) 0;
  font-weight: 700;
}

.brandkit-article {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid #0000000f;
  display: flex;
}

.brandkit-article:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.brandkit-article-image {
  width: 100px;
  height: 80px;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  display: flex;
}

.brandkit-article-content {
  flex: 1;
}

.brandkit-article-content h3 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: 600;
}

.brandkit-article-content p {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-xs) 0;
  opacity: .85;
  line-height: 1.4;
}

.brandkit-read-more {
  font-size: var(--font-size-sm);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

.brandkit-cta-section {
  padding: var(--spacing-lg);
  text-align: center;
}

.brandkit-cta-section h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: 600;
}

.brandkit-cta-section p {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-md) 0;
  opacity: .85;
}

.brandkit-preview-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  font-weight: 600;
  display: inline-block;
}

.brandkit-newsletter-footer {
  padding: var(--spacing-lg);
  text-align: center;
  font-size: var(--font-size-sm);
}

.brandkit-footer-brand {
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: 600;
}

.brandkit-footer-links {
  margin: 0 0 var(--spacing-xs) 0;
}

.brandkit-footer-links a {
  cursor: pointer;
  text-decoration: underline;
}

.brandkit-footer-copy {
  opacity: .7;
  font-size: var(--font-size-xs);
  margin: 0;
}

@media (max-width: 767px) {
  .brandkit-full-preview {
    padding: var(--spacing-sm);
  }

  .brandkit-hero-section, .brandkit-articles-section, .brandkit-cta-section {
    padding: var(--spacing-md);
  }

  .brandkit-hero-title {
    font-size: var(--font-size-lg);
  }

  .brandkit-article {
    gap: var(--spacing-sm);
    flex-direction: column;
  }

  .brandkit-article-image {
    width: 100%;
    height: 120px;
  }
}

.card-no-padding {
  padding: 0 !important;
}

.enhanced-table-wrapper {
  overflow-x: auto;
}

.enhanced-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}

.enhanced-table thead {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.enhanced-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 6px 10px;
}

.enhanced-table td {
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  padding: 6px 10px;
}

.enhanced-table tbody tr {
  transition: background-color .15s;
}

.enhanced-table tbody tr:hover {
  background: var(--bg-secondary);
}

.enhanced-table tbody tr.row-selected {
  background: var(--primary-light);
}

.enhanced-table tbody tr.row-selected:hover {
  background: var(--secondary-light);
}

.enhanced-table tbody tr:last-child td {
  border-bottom: none;
}

.checkbox-col {
  width: 36px;
  padding-left: 12px !important;
  padding-right: 6px !important;
}

.actions-col {
  text-align: right;
  width: 80px;
}

.table-checkbox {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.table-checkbox input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.table-checkbox-custom {
  border: 2px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--white);
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  transition: all .15s;
  display: flex;
}

.table-checkbox-custom svg {
  opacity: 0;
  color: var(--white);
  transition: all .15s;
  transform: scale(.5);
}

.table-checkbox input:checked + .table-checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}

.table-checkbox input:checked + .table-checkbox-custom svg {
  opacity: 1;
  transform: scale(1);
}

.table-checkbox input:indeterminate + .table-checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}

.table-checkbox input:indeterminate + .table-checkbox-custom:before {
  content: "";
  background: var(--white);
  width: 8px;
  height: 2px;
}

.table-checkbox input:indeterminate + .table-checkbox-custom svg {
  display: none;
}

.table-checkbox:hover .table-checkbox-custom {
  border-color: var(--primary);
}

.table-link-primary {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}

.table-link-primary:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-success {
  color: var(--success);
}

.text-right {
  text-align: right;
}

.table-row-actions {
  gap: var(--spacing-xs);
  justify-content: flex-end;
  display: flex;
}

.action-btn {
  border-radius: var(--radius-md);
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.action-btn:hover {
  background: var(--bg-tertiary);
}

.action-btn.action-btn-edit:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.action-btn.action-btn-view:hover {
  color: var(--info);
  background: var(--info-light);
}

.bulk-actions-bar {
  background: var(--primary);
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.bulk-actions-info {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  display: flex;
}

.bulk-actions-count {
  background: #fff3;
  padding: 2px 10px;
  font-weight: 600;
}

.bulk-actions-buttons {
  gap: var(--spacing-sm);
  display: flex;
}

.bulk-action-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-md);
  color: var(--white);
  cursor: pointer;
  background: #ffffff26;
  border: none;
  padding: 8px 14px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.bulk-action-btn:hover {
  background: #ffffff40;
}

.bulk-action-btn.bulk-action-btn-danger {
  background: #ef4444e6;
}

.bulk-action-btn.bulk-action-btn-danger:hover {
  background: var(--error);
}

.modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: .15s fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-content {
  background: var(--bg-elevated);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  animation: slideUp var(--duration-normal) var(--ease-out-expo);
}

.modal-content.modal-small {
  max-width: 320px;
}

.modal-content.modal-medium {
  max-width: 480px;
}

.modal-content.modal-large {
  max-width: 680px;
}

.modal-close {
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.modal-body {
  padding: var(--spacing-md);
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  display: flex;
}

.modal-icon {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
}

.modal-icon.modal-icon-danger {
  background: var(--error-light);
  color: var(--error);
}

.modal-icon.modal-icon-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.modal-icon.modal-icon-success {
  background: var(--success-light);
  color: var(--success);
}

.modal-content h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin-bottom: 6px;
  font-weight: 600;
}

.modal-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.modal-actions {
  gap: var(--spacing-sm);
  justify-content: center;
  display: flex;
}

.modal-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  padding: 7px 14px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.modal-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.modal-btn.modal-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.modal-btn.modal-btn-secondary:hover:not(:disabled) {
  background: var(--border-light);
}

.modal-btn.modal-btn-danger {
  background: var(--error);
  color: var(--white);
}

.modal-btn.modal-btn-danger:hover:not(:disabled) {
  background: var(--error-dark);
}

.modal-btn.modal-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.modal-btn.modal-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.idle-warning-overlay {
  background: var(--bg-overlay);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: .2s ease-out idleFadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.idle-warning-modal {
  background: var(--bg-elevated);
  padding: var(--spacing-md);
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  animation: idleSlideUp .3s var(--ease-out-expo);
}

.idle-warning-modal h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 600;
}

.idle-warning-modal p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.idle-warning-icon {
  color: var(--warning);
  margin-bottom: var(--spacing-md);
}

.idle-warning-hint {
  color: var(--text-tertiary);
  font-size: .875rem;
}

.idle-warning-button {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  border: none;
  font-weight: 500;
}

.idle-warning-button:hover {
  background: var(--primary-hover);
}

@keyframes idleFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes idleSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.language-switcher-dropdown {
  display: inline-block;
  position: relative;
}

.language-switcher-trigger {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: none;
  padding: 8px 12px;
  transition: all .2s;
  display: flex;
}

.language-switcher-trigger:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.language-switcher-trigger:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.language-flag {
  font-size: 18px;
  line-height: 1;
}

.language-name {
  font-weight: 500;
}

.language-chevron {
  color: var(--text-secondary);
  transition: transform .2s;
}

.language-chevron.open {
  transform: rotate(180deg);
}

.language-switcher-menu {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  min-width: 180px;
  box-shadow: none;
  z-index: 1000;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  overflow: hidden;
}

.language-option {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: none;
  border: none;
  padding: 10px 14px;
  transition: background .15s;
  display: flex;
}

.language-option:hover {
  background: var(--bg-hover);
}

.language-option.active {
  background: var(--primary-light);
  color: var(--primary);
}

.language-info {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.language-native {
  font-weight: 500;
}

.language-english {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.language-check {
  color: var(--primary);
  flex-shrink: 0;
}

.language-switcher-buttons {
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  padding: 4px;
  display: flex;
}

.language-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  cursor: pointer;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 6px 12px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

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

.language-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: none;
}

.language-code {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.language-switcher-minimal {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  cursor: pointer;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 6px 10px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.language-switcher-minimal:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.subscriber-nav-lang {
  margin-right: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .subscriber-nav-lang {
    display: none;
  }
}

.stat-card {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--public-card-bg, var(--white));
  border: 1px solid var(--public-card-border, var(--gray-200));
  border-radius: var(--public-radius-lg);
  box-shadow: var(--public-card-shadow);
  flex-direction: column;
  transition: all .2s;
  display: flex;
}

.stat-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-2px);
}

.stat-card__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.stat-card__bottom {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.stat-card__icon {
  border-radius: var(--public-radius-sm);
  background: var(--gray-100);
  width: 32px;
  height: 32px;
  color: var(--gray-600);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.stat-card__value {
  font-size: var(--font-size-xl);
  color: var(--gray-900);
  font-weight: 700;
  line-height: 1;
}

.stat-card__trend {
  font-size: var(--font-size-xs);
  margin-left: auto;
  font-weight: 600;
}

.stat-card__trend.positive {
  color: var(--success);
}

.stat-card__trend.negative {
  color: var(--danger);
}

.stat-card--blue .stat-card__icon {
  color: #3b82f6;
  background: #3b82f61a;
}

.stat-card--green .stat-card__icon {
  color: #22c55e;
  background: #22c55e1a;
}

.stat-card--purple .stat-card__icon {
  color: #6366f1;
  background: #6366f11a;
}

.stat-card--orange .stat-card__icon {
  color: #f97316;
  background: #f973161a;
}

.stat-card--teal .stat-card__icon {
  color: #14b8a6;
  background: #14b8a61a;
}

.stat-card--red .stat-card__icon {
  color: #ef4444;
  background: #ef44441a;
}

.stat-card--loading {
  pointer-events: none;
}

.stat-card__icon-skeleton, .stat-card__value-skeleton, .stat-card__label-skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  border-radius: var(--public-radius-sm);
  background-size: 200% 100%;
  animation: 1.5s infinite shimmer;
}

.stat-card__icon-skeleton {
  width: 100%;
  height: 100%;
}

.stat-card__value-skeleton {
  width: 50px;
  height: 20px;
}

.stat-card__label-skeleton {
  width: 70px;
  height: 12px;
}

.stat-card-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: grid;
}

.stat-card-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.stat-card-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.stat-card-grid--cols-4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .stat-card-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card-grid--cols-5 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .stat-card-grid--cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stat-card-grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stat-card-grid--cols-6 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .stat-card-grid--cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stat-card-grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

:root {
  --public-font-heading: var(--font-heading), "Playfair Display", Georgia, serif;
  --public-font-body: var(--font-body), "Inter", system-ui, sans-serif;
  --public-glass-bg: #fffffff2;
  --public-glass-blur: blur(10px);
  --public-text-on-dark: #fffffff2;
  --public-text-on-dark-muted: #ffffffb3;
  --public-border-on-dark: #ffffff1a;
  --public-hover-light: #ffffff14;
  --public-hover-dark: #0000000a;
  --public-container-max: 1200px;
  --public-section-padding: 100px 0;
  --public-section-padding-sm: 60px 0;
  --public-hero-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --public-hero-overlay: linear-gradient(180deg, #0009 0%, #00000080 50%, #000000b3 100%);
  --public-overlay-light: #ffffff1a;
  --public-nav-z-index: 1000;
  --public-nav-gradient: linear-gradient(180deg, #0009 0%, #0006 40%, #00000026 70%, transparent 100%);
  --public-card-bg: var(--white);
  --public-card-border: var(--gray-200);
  --public-card-shadow: 0 4px 6px -1px #0000001a;
  --public-card-shadow-hover: 0 20px 25px -5px #0000001a;
  --public-btn-padding: 12px 24px;
  --public-btn-padding-lg: 16px 32px;
  --public-btn-padding-sm: 8px 16px;
  --public-radius-sm: 4px;
  --public-radius-md: 8px;
  --public-radius-lg: 12px;
  --public-radius-xl: 16px;
  --public-radius-2xl: 24px;
  --public-radius-full: 9999px;
}

@media (max-width: 768px) {
  :root {
    --public-section-padding: 48px 0;
    --public-section-padding-sm: 32px 0;
  }
}

.campaign-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  gap: var(--spacing-md);
  flex-direction: column;
  padding: 12px;
  display: flex;
  position: relative;
}

.campaign-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.campaign-card--has-created {
  border-color: var(--primary);
}

.campaign-card__badge {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-sm);
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-weight: 600;
  display: flex;
  position: absolute;
  top: -8px;
  right: 16px;
}

.campaign-card__badge-count {
  font-weight: 700;
}

.campaign-card__header {
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.campaign-card__icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.campaign-card__title-group {
  flex: 1;
  min-width: 0;
}

.campaign-card__title {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.campaign-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 4px;
  display: block;
}

.campaign-card__status {
  font-size: var(--font-size-xs);
  border-radius: var(--public-radius-full);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  padding: 4px 12px;
  font-weight: 600;
}

.campaign-card__status--active {
  background: var(--success-light);
  color: var(--success);
}

.campaign-card__status--paused {
  background: var(--warning-light);
  color: var(--warning);
}

.campaign-card__status--archived {
  background: var(--gray-100);
  color: var(--gray-500);
}

.campaign-card__description {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.campaign-card__stats {
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.campaign-card__stat {
  text-align: center;
}

.campaign-card__stat-value {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  font-weight: 700;
  display: block;
}

.campaign-card__stat-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
  display: block;
}

.campaign-card__schedule-tag {
  position: absolute;
  top: 12px;
  right: 12px;
}

.campaign-card__schedule-label {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  padding: 4px 10px;
  font-weight: 500;
  display: inline-flex;
}

.campaign-card__actions {
  gap: var(--spacing-sm);
  margin-top: auto;
  display: flex;
}

.campaign-card__btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.campaign-card__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.campaign-card__btn {
  font-size: var(--font-size-sm);
  flex: 1;
  padding: 10px 16px;
}

.campaign-card__btn--primary {
  background: var(--primary);
  color: var(--white);
}

.campaign-card__btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.campaign-card__btn--secondary {
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  background: none;
}

.campaign-card__btn--secondary:hover:not(:disabled) {
  border-color: var(--gray-900);
  color: var(--gray-900);
}

.campaign-card--compact {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.campaign-card--compact .campaign-card__header {
  gap: var(--spacing-sm);
}

.campaign-card--compact .campaign-card__icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.campaign-card--compact .campaign-card__icon svg {
  width: 18px;
  height: 18px;
}

.campaign-card--compact .campaign-card__title {
  font-size: var(--font-size-base);
}

.campaign-card--compact .campaign-card__description {
  font-size: var(--font-size-xs);
  -webkit-line-clamp: 2;
}

.campaign-card--compact .campaign-card__schedule-tag {
  top: 8px;
  right: 8px;
}

.campaign-card--compact .campaign-card__schedule-label {
  padding: 2px 6px;
  font-size: 10px;
}

.campaign-card--compact .campaign-card__actions {
  gap: var(--spacing-xs);
}

.campaign-card--compact .campaign-card__btn {
  font-size: var(--font-size-xs);
  padding: 6px 12px;
}

.campaign-card--compact .campaign-card__badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
}

.campaign-card-grid {
  gap: 24px;
  display: grid;
}

.campaign-card-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .campaign-card-grid--cols-2 {
    grid-template-columns: 1fr;
  }
}

.campaign-card-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .campaign-card-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .campaign-card-grid--cols-3 {
    grid-template-columns: 1fr;
  }
}

.campaign-card-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .campaign-card-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .campaign-card-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

.template-grid-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
}

.template-card {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.template-card-preview {
  border-bottom: 1px solid var(--border-color);
  justify-content: center;
  align-items: center;
  height: 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.template-card-preview-placeholder {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.template-card-letter {
  color: var(--white);
  text-shadow: 0 2px 8px #0000004d;
  font-size: 28px;
  font-weight: 700;
}

.template-card-thumb-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.template-card-badge {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 1;
  position: absolute;
}

.template-card-site-badge {
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1;
  position: absolute;
}

.template-card-info {
  padding: var(--spacing-sm);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.template-card-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.template-card-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.template-card-meta {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-top: 2px;
  display: flex;
}

.template-card-category, .template-card-creator, .template-card-usage {
  color: var(--text-tertiary);
  text-transform: capitalize;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  display: inline-flex;
}

.template-card-actions {
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  display: flex;
}

.template-card-btn {
  font-size: var(--font-size-xs);
  cursor: pointer;
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.template-card-btn.primary {
  background: var(--primary);
  color: var(--white);
}

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

.template-card-btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.template-card-btn.secondary:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.template-card-btn.danger {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  flex: 0;
  padding: 6px;
}

.template-card-btn.danger:hover {
  background: var(--error);
  color: var(--white);
}

.template-card-skeleton {
  pointer-events: none;
}

.template-card-skeleton .template-card-preview {
  background: var(--bg-tertiary);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.feature-gate-blocked, .limit-gate-blocked {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-direction: column;
  min-height: 200px;
  display: flex;
}

.feature-gate-blocked svg, .limit-gate-blocked svg {
  color: var(--gray-400);
  margin-bottom: var(--spacing-xs);
}

.feature-gate-blocked h4, .limit-gate-blocked h4 {
  color: var(--gray-900);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.feature-gate-blocked p, .limit-gate-blocked p {
  color: var(--gray-500);
  max-width: 300px;
  margin: 0;
  font-size: 14px;
}

.feature-gate-blocked .btn, .limit-gate-blocked .btn {
  margin-top: var(--spacing-sm);
}

.feature-gate-page {
  min-height: 60vh;
  padding: var(--spacing-md);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-gate-page .feature-gate-icon {
  background: var(--primary-light, #6366f11a);
  width: 64px;
  height: 64px;
  color: var(--primary);
  margin-bottom: var(--spacing-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-gate-page h2 {
  margin: 0 0 var(--spacing-sm);
  color: var(--gray-900);
  font-size: 24px;
  font-weight: 700;
}

.feature-gate-page p {
  margin: 0 0 var(--spacing-lg);
  color: var(--gray-500);
  max-width: 400px;
  font-size: 15px;
}

.feature-gate-page .feature-gate-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.feature-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.premium-badge {
  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.premium-badge svg {
  width: 12px;
  height: 12px;
}

.schedule-select-locked select {
  opacity: .6;
  cursor: not-allowed;
}

.schedule-select-locked .schedule-upgrade-hint {
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  color: var(--gray-600);
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.schedule-select-locked .schedule-upgrade-hint svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.schedule-select-locked .schedule-upgrade-hint a {
  color: var(--primary);
  margin-left: 4px;
  text-decoration: underline;
}

.btn-counter {
  background: #fff3;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.notification-bell {
  position: relative;
}

.notification-bell__trigger {
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.notification-bell__trigger:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.notification-bell__badge {
  background: var(--error);
  min-width: 18px;
  height: 18px;
  color: var(--white);
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  position: absolute;
  top: 4px;
  right: 4px;
}

.notification-bell__dropdown {
  background: var(--white);
  border: 1px solid var(--border-light);
  width: 360px;
  max-height: min(70vh, 480px);
  box-shadow: none;
  z-index: 1001;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

@media (max-width: 767px) {
  .notification-bell__dropdown {
    width: calc(100vw - 32px);
    max-width: 380px;
    right: -12px;
  }
}

.notification-bell__header {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.notification-bell__title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.notification-bell__mark-read {
  font-size: var(--font-size-sm);
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
}

.notification-bell__mark-read:hover {
  text-decoration: underline;
}

.notification-bell__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.notification-bell__group + .notification-bell__group {
  border-top: 1px solid var(--border-light);
}

.notification-bell__group-header {
  background: #fafbfd;
  border-bottom: 1px solid #e2e8f0e6;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 8px;
  display: flex;
}

.notification-bell__group-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: .75rem;
  font-weight: 700;
}

.notification-bell__group-count {
  background: var(--bg-secondary);
  min-width: 22px;
  height: 22px;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-weight: 700;
  display: inline-flex;
}

.notification-bell__empty {
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.notification-bell__empty svg {
  margin-bottom: var(--spacing-sm);
  opacity: .5;
}

.notification-bell__empty span {
  font-size: var(--font-size-sm);
}

.notification-bell__loading {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-tertiary);
}

.notification-bell__footer {
  border-top: 1px solid var(--border-light);
  text-align: center;
  padding: 12px 16px;
}

.notification-bell__footer a {
  font-size: var(--font-size-sm);
  color: var(--primary);
  text-decoration: none;
}

.notification-bell__footer a:hover {
  text-decoration: underline;
}

.notification-item {
  align-items: flex-start;
  gap: var(--spacing-md);
  cursor: pointer;
  padding: 12px 16px;
  transition: background .2s;
  display: flex;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item--unread {
  background: #6366f10a;
}

.notification-item--clickable {
  cursor: pointer;
}

.notification-item__icon {
  background: var(--bg-secondary);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.notification-item__content {
  flex: 1;
  min-width: 0;
}

.notification-item__title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 600;
  display: block;
}

.notification-item__message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  word-break: break-word;
  line-height: 1.45;
  display: block;
}

.notification-item__time {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
  display: block;
}

.notification-item__dot {
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

.notifications-page {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  min-height: calc(100vh - 64px);
}

@media (max-width: 767px) {
  .notifications-page {
    padding: 14px 12px 24px;
  }
}

.notifications-page__container {
  max-width: 1120px;
  margin: 0 auto;
}

.notifications-page__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  display: flex;
}

@media (max-width: 767px) {
  .notifications-page__header {
    flex-direction: column;
    align-items: stretch;
  }
}

.notifications-page__title {
  color: var(--text-primary);
  margin: 0;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
}

.notifications-page__subtitle {
  color: var(--text-secondary);
  margin: 6px 0 0;
}

.notifications-page__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.notifications-page__meta {
  border: 1px solid var(--border-light);
  background: var(--white);
  min-height: 40px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 600;
  display: inline-flex;
}

.notifications-page__panel {
  border: 1px solid var(--border-light);
  background: var(--white);
  box-shadow: none;
  border-radius: 20px;
  overflow: hidden;
}

.notifications-page__empty, .notifications-page__loading {
  color: var(--text-tertiary);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  display: flex;
}

.notifications-page__group + .notifications-page__group {
  border-top: 1px solid var(--border-light);
}

.notifications-page__group-header {
  background: #fafbfd;
  border-bottom: 1px solid #e2e8f0e6;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  display: flex;
}

.notifications-page__group-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: .8rem;
  font-weight: 700;
}

.notifications-page__group-count {
  background: var(--bg-secondary);
  min-width: 24px;
  height: 24px;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  font-weight: 700;
  display: inline-flex;
}

.color-picker-container {
  position: relative;
}

.color-picker-trigger {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  min-width: 130px;
  padding: 8px 12px;
  transition: all .15s;
  display: flex;
}

.color-picker-trigger:hover:not(.disabled) {
  border-color: var(--gray-300);
}

.color-picker-trigger.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .1);
}

.color-picker-trigger.disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--gray-50);
}

.color-picker-swatch {
  border: 1px solid #0000001a;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.color-picker-value {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  flex: 1;
  font-family: monospace;
}

.color-picker-chevron {
  color: var(--gray-400);
  transition: transform .15s;
}

.color-picker-trigger.active .color-picker-chevron {
  transform: rotate(180deg);
}

.color-picker-dropdown {
  z-index: 100;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: none;
  padding: var(--spacing-sm);
  min-width: 220px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.color-picker-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.color-picker-native-row {
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.color-picker-native {
  border: 1px solid var(--gray-200);
  cursor: pointer;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
}

.color-picker-native::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-picker-native::-webkit-color-swatch {
  border: none;
}

.color-picker-input {
  border: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  flex: 1;
  padding: 8px 10px;
  font-family: monospace;
}

.color-picker-input:focus {
  border-color: var(--primary);
  outline: none;
}

.color-picker-copy {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  width: 36px;
  height: 36px;
  color: var(--gray-500);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.color-picker-copy:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.color-picker-presets {
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  display: grid;
}

.color-picker-preset {
  aspect-ratio: 1;
  cursor: pointer;
  border: 1px solid #0000001a;
  width: 100%;
  padding: 0;
  transition: transform .1s;
}

.color-picker-preset:hover {
  z-index: 1;
  transform: scale(1.15);
}

.color-picker-preset.selected {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--primary);
}

.plan-card {
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all var(--duration-fast) var(--ease-in-out);
  flex-direction: column;
  display: flex;
}

.plan-card:hover:not(.plan-card--current) {
  border-color: var(--primary);
}

.plan-card--selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.plan-card--current {
  border-color: var(--success);
  background: var(--success-light);
}

.plan-card__header {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.plan-card__name {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.plan-card__badge {
  font-size: var(--font-size-xs);
  background: var(--primary);
  color: var(--white);
  padding: 2px 8px;
  font-weight: 600;
}

.plan-card__badge--current {
  background: var(--success);
}

.plan-card__price {
  margin-bottom: var(--spacing-sm);
  align-items: baseline;
  gap: 2px;
  display: flex;
}

.plan-card__currency {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.plan-card__amount {
  color: var(--text-primary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.plan-card__period {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan-card__billed {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.plan-card__description {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan-card__features {
  margin: 0 0 var(--spacing-lg);
  flex: 1;
  padding: 0;
  list-style: none;
}

.plan-card__features li {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.plan-card__features li svg {
  color: var(--success);
  flex-shrink: 0;
}

.plan-card__trial {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 500;
}

.plan-card__action {
  background: var(--primary);
  width: 100%;
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  border: none;
  padding: 10px 16px;
  font-weight: 500;
}

.plan-card__action:hover:not(:disabled) {
  background: var(--primary-hover);
}

.plan-card__action:disabled, .plan-card__action--disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}

.plan-cards-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .plan-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .plan-cards-grid {
    grid-template-columns: 1fr;
  }
}

.ui-toggle {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ui-toggle input {
  display: none;
}

.ui-toggle.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ui-toggle-label {
  color: var(--text-secondary);
  font-size: 10px;
}

.ui-toggle-slider {
  background: var(--gray-300);
  border-radius: 10px;
  transition: background .2s;
  position: relative;
}

.ui-toggle-slider:after {
  content: "";
  background: var(--white);
  border-radius: 50%;
  transition: transform .2s;
  position: absolute;
}

input:checked + .ui-toggle-slider {
  background: var(--primary);
}

.ui-toggle-sm .ui-toggle-slider {
  width: 28px;
  height: 14px;
}

.ui-toggle-sm .ui-toggle-slider:after {
  width: 10px;
  height: 10px;
  top: 2px;
  left: 2px;
}

input:checked + .ui-toggle-sm .ui-toggle-slider:after {
  transform: translateX(14px);
}

.ui-toggle-md .ui-toggle-slider {
  width: 36px;
  height: 18px;
}

.ui-toggle-md .ui-toggle-slider:after {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
}

input:checked + .ui-toggle-md .ui-toggle-slider:after {
  transform: translateX(18px);
}

.collapsible-panel {
  flex-direction: column;
  height: 100%;
  min-height: 0;
  transition: width .3s, min-width .3s;
  display: flex;
  position: relative;
}

.collapsible-panel-content {
  flex: 1;
  min-height: 0;
  transition: opacity .2s;
  overflow: visible;
}

.collapsible-panel-toggle {
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: none;
  position: absolute;
}

.collapsible-panel-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--primary);
}

.collapsible-panel-toggle[data-tooltip]:after {
  content: attr(data-tooltip);
  color: var(--white);
  white-space: nowrap;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  background: #0f172af0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  transition: opacity .16s, transform .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%)translateX(-4px);
}

.collapsible-panel-toggle[data-tooltip]:before {
  content: "";
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  background: #0f172af0;
  width: 8px;
  height: 8px;
  transition: opacity .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%)rotate(45deg);
}

.collapsible-panel-toggle[data-tooltip]:hover:after, .collapsible-panel-toggle[data-tooltip]:hover:before, .collapsible-panel-toggle[data-tooltip]:focus-visible:after, .collapsible-panel-toggle[data-tooltip]:focus-visible:before {
  opacity: 1;
  transform: translateY(-50%)translateX(0);
}

.collapsible-panel-left .collapsible-panel-toggle {
  top: 8px;
  right: -40px;
}

.collapsible-panel-right .collapsible-panel-toggle {
  top: 8px;
  left: -40px;
}

.collapsible-panel-right .collapsible-panel-toggle[data-tooltip]:after {
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(-50%)translateX(4px);
}

.collapsible-panel-right .collapsible-panel-toggle[data-tooltip]:before {
  left: auto;
  right: calc(100% + 4px);
}

.collapsible-panel-right .collapsible-panel-toggle[data-tooltip]:hover:after, .collapsible-panel-right .collapsible-panel-toggle[data-tooltip]:focus-visible:after {
  transform: translateY(-50%)translateX(0);
}

.collapsible-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
}

.collapsible-panel.collapsed .collapsible-panel-content {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.collapsible-panel.collapsed.collapsible-panel-left .collapsible-panel-toggle {
  right: -40px;
}

.collapsible-panel.collapsed.collapsible-panel-right .collapsible-panel-toggle {
  left: -40px;
}

@media (max-width: 1024px) {
  .collapsible-panel-toggle {
    display: flex;
  }

  .collapsible-panel:not(.collapsed) .collapsible-panel-toggle {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
  }
}

@media (max-width: 768px) {
  .collapsible-panel-toggle {
    width: 36px;
    height: 36px;
    box-shadow: none;
  }

  .collapsible-panel-left .collapsible-panel-toggle {
    right: -44px;
  }

  .collapsible-panel-right .collapsible-panel-toggle {
    left: -44px;
  }

  .collapsible-panel.collapsed.collapsible-panel-left .collapsible-panel-toggle {
    right: -44px;
  }

  .collapsible-panel.collapsed.collapsible-panel-right .collapsible-panel-toggle {
    left: -44px;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-line, .skeleton-box {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200px 100%;
  animation: 1.5s ease-in-out infinite skeleton-shimmer;
}

.skeleton-avatar {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200px 100%;
  border-radius: 50%;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  animation: 1.5s ease-in-out infinite skeleton-shimmer;
}

.skeleton-card {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

.skeleton-card .skeleton-stat-value {
  width: 60px;
  height: 28px;
  margin-bottom: var(--spacing-sm);
}

.skeleton-card .skeleton-stat-label {
  width: 90px;
  height: 12px;
}

.skeleton-row {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  display: flex;
}

.skeleton-row-text {
  flex: 1;
}

.skeleton-row-text .skeleton-text-primary {
  width: 40%;
  height: 14px;
  margin-bottom: 6px;
}

.skeleton-row-text .skeleton-text-secondary {
  width: 25%;
  height: 11px;
}

.page-skeleton {
  padding: var(--spacing-md);
  max-width: 1100px;
  margin: 0 auto;
}

.page-skeleton-header {
  margin-bottom: var(--spacing-md);
}

.page-skeleton-header .skeleton-title {
  width: 200px;
  height: 24px;
  margin-bottom: var(--spacing-sm);
}

.page-skeleton-header .skeleton-subtitle {
  width: 320px;
  height: 14px;
}

.page-skeleton-stats {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.page-skeleton-content {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.skeleton-tabs {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.skeleton-tabs .skeleton-tab {
  width: 110px;
  height: 32px;
}

.skeleton-toolbar {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.skeleton-toolbar .skeleton-search {
  width: 240px;
  height: 36px;
}

.skeleton-toolbar .skeleton-filter {
  width: 120px;
  height: 36px;
}

.skeleton-card-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.skeleton-card-grid .skeleton-content-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-card-grid .skeleton-content-card .skeleton-card-image {
  height: 100px;
}

.skeleton-card-grid .skeleton-content-card .skeleton-card-body {
  padding: var(--spacing-sm) var(--spacing-md);
}

.skeleton-card-grid .skeleton-content-card .skeleton-card-body .skeleton-card-title {
  width: 70%;
  height: 14px;
  margin-bottom: 6px;
}

.skeleton-card-grid .skeleton-content-card .skeleton-card-body .skeleton-card-meta {
  width: 40%;
  height: 11px;
}

.skeleton-dashboard-grid {
  gap: var(--spacing-sm);
  grid-template-columns: 1fr 320px;
  display: grid;
}

.skeleton-dashboard-grid .skeleton-main-col, .skeleton-dashboard-grid .skeleton-side-col {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.skeleton-dashboard-grid .skeleton-chart {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  height: 200px;
}

.skeleton-dashboard-grid .skeleton-side-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.skeleton-dashboard-grid .skeleton-side-card .skeleton-side-title {
  width: 120px;
  height: 16px;
  margin-bottom: var(--spacing-md);
}

.skeleton-dashboard-grid .skeleton-side-card .skeleton-side-row {
  height: 40px;
  margin-bottom: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.skeleton-workspace {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.skeleton-workspace .skeleton-workspace-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.skeleton-workspace .skeleton-workspace-header .skeleton-ws-name {
  width: 150px;
  height: 22px;
}

.skeleton-workspace .skeleton-workspace-header .skeleton-ws-badge {
  border-radius: 12px;
  width: 75px;
  height: 24px;
}

.skeleton-brand-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.skeleton-brand-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-brand-card .skeleton-brand-logo {
  justify-content: center;
  align-items: center;
  height: 140px;
  display: flex;
}

.skeleton-brand-card .skeleton-brand-logo .skeleton-logo-icon {
  border-radius: var(--radius-md);
  width: 64px;
  height: 64px;
}

.skeleton-brand-card .skeleton-brand-info {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.skeleton-brand-card .skeleton-brand-info .skeleton-brand-name {
  width: 50%;
  height: 16px;
  margin-bottom: 6px;
}

.skeleton-brand-card .skeleton-brand-info .skeleton-brand-desc {
  width: 80%;
  height: 12px;
}

.skeleton-billing {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.skeleton-billing .skeleton-plan-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.skeleton-billing .skeleton-plan-card .skeleton-plan-name {
  width: 140px;
  height: 20px;
  margin-bottom: var(--spacing-md);
}

.skeleton-billing .skeleton-plan-card .skeleton-plan-price {
  width: 100px;
  height: 32px;
  margin-bottom: var(--spacing-sm);
}

.skeleton-billing .skeleton-plan-card .skeleton-plan-detail {
  width: 200px;
  height: 12px;
  margin-bottom: var(--spacing-xs);
}

.skeleton-settings-nav {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
  display: flex;
}

.skeleton-settings-nav .skeleton-nav-item {
  width: 90px;
  height: 32px;
}

.skeleton-settings-content {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.skeleton-settings-content .skeleton-field-group {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.skeleton-settings-content .skeleton-field-group .skeleton-field-label {
  width: 80px;
  height: 12px;
}

.skeleton-settings-content .skeleton-field-group .skeleton-field-input {
  border-radius: var(--radius-md);
  width: 100%;
  height: 38px;
}

.skeleton-header-actions {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.skeleton-header-actions .skeleton-header-meta .skeleton-title {
  width: 220px;
  height: 28px;
  margin-bottom: var(--spacing-sm);
}

.skeleton-header-actions .skeleton-header-meta .skeleton-subtitle {
  width: 300px;
  height: 14px;
}

.skeleton-header-actions .skeleton-header-btns {
  gap: var(--spacing-sm);
  display: flex;
}

.skeleton-header-actions .skeleton-header-btns .skeleton-btn {
  border-radius: var(--radius-md);
  width: 140px;
  height: 38px;
}

.wg {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.wg__header {
  margin-bottom: var(--spacing-md);
}

.wg__title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.wg__subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
}

.wg__steps {
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 720px;
  margin-bottom: var(--spacing-md);
  display: flex;
}

@media (max-width: 767px) {
  .wg__steps {
    flex-direction: column;
    max-width: 360px;
  }
}

.wg-step {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
}

.wg-step__indicator {
  margin-bottom: var(--spacing-xs);
  position: relative;
}

.wg-step__number {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  transition: all .4s;
  display: flex;
}

.wg-step--pending .wg-step__number {
  background: var(--gray-200);
  color: var(--text-tertiary);
}

.wg-step--active .wg-step__number {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), .15);
}

.wg-step--completed .wg-step__number {
  color: var(--white);
  background: #22c55e;
}

.wg-step__icon {
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
}

.wg-step--active .wg-step__icon {
  background: var(--primary-light, #eff6ff);
  color: var(--primary);
}

.wg-step--completed .wg-step__icon {
  color: #16a34a;
  background: #dcfce7;
}

.wg-step__title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.wg-step__desc {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.wg-step__connector {
  background: var(--gray-200);
  width: calc(var(--spacing-lg)  + 100%);
  height: 2px;
  margin-left: 4px;
  position: absolute;
  top: 14px;
  left: 100%;
  overflow: hidden;
}

.wg-step__connector:after {
  content: "";
  background: var(--primary);
  width: 0;
  height: 100%;
  transition: width .6s;
  display: block;
}

.wg-step--completed .wg-step__connector:after {
  width: 100%;
}

@media (max-width: 767px) {
  .wg-step__connector {
    width: 2px;
    height: var(--spacing-lg);
    margin-top: 4px;
    margin-left: 0;
    top: 100%;
    left: 14px;
  }

  .wg-step__connector:after {
    width: 100%;
    height: 0;
    transition: height .6s;
  }

  .wg-step--completed .wg-step__connector:after {
    height: 100%;
  }
}

.wg__cta {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 10px 24px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
  display: inline-flex;
}

.wg__cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

@keyframes wg-fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wg-scaleIn {
  from {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wg-pulseRing {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), .15);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 59, 130, 246), .08);
  }
}

.wg--animated .wg__header {
  animation: .5s both wg-fadeSlideUp;
}

.wg--animated .wg-step {
  opacity: 0;
  animation: .5s both wg-fadeSlideUp;
  animation-delay: calc(.2s + var(--step-index, 0) * .15s);
}

.wg--animated .wg-step__icon {
  animation: .4s both wg-scaleIn;
  animation-delay: calc(.35s + var(--step-index, 0) * .15s);
}

.wg--animated .wg-step--active .wg-step__number {
  animation: 2s ease-in-out .8s infinite wg-pulseRing;
}

.wg--animated .wg__cta {
  opacity: 0;
  animation: .5s .7s both wg-fadeSlideUp;
}

.onboarding-overlay {
  z-index: 9999;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #00000080;
  justify-content: center;
  align-items: center;
  animation: .3s onboarding-fade-in;
  display: flex;
  position: fixed;
  inset: 0;
}

.onboarding-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  position: relative;
  overflow: hidden;
}

.onboarding-card__close {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  color: var(--gray-400);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  position: absolute;
}

.onboarding-card__close:hover {
  color: var(--gray-600);
}

.onboarding-card__content {
  min-height: 260px;
  position: relative;
}

.onboarding-dots {
  justify-content: center;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-md);
  display: flex;
}

.onboarding-dots__dot {
  background: var(--gray-300);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  transition: background .2s, transform .2s;
}

.onboarding-dots__dot--active {
  background: var(--primary);
  transform: scale(1.3);
}

@keyframes onboarding-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.onboarding-step {
  text-align: center;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  transition: opacity .35s, transform .35s;
  display: flex;
  position: absolute;
  inset: 0;
  transform: translateX(40px);
}

.onboarding-step--prev {
  transform: translateX(-40px);
}

.onboarding-step--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.onboarding-step__icon-wrapper {
  background: var(--primary-light, #6366f11a);
  width: 56px;
  height: 56px;
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.onboarding-step__counter {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-bottom: var(--spacing-xs);
}

.onboarding-step__title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
  font-weight: 600;
}

.onboarding-step__description {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-lg);
  max-width: 380px;
  line-height: 1.6;
}

.onboarding-step__actions {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.onboarding-step__cta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  font-weight: 500;
  transition: background .2s;
  display: flex;
}

.onboarding-step__cta:hover {
  filter: brightness(1.1);
}

.onboarding-step__skip {
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: var(--spacing-xs);
  background: none;
  border: none;
}

.onboarding-step__skip:hover {
  color: var(--gray-600);
}

.step-preview {
  margin-bottom: var(--spacing-sm);
  justify-content: center;
  display: flex;
}

.step-preview__mockup {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  width: 100%;
  max-width: 340px;
  animation: .5s previewSlideIn;
  overflow: hidden;
}

@keyframes previewSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.preview-dashboard {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  display: flex;
}

.preview-stat {
  text-align: center;
  padding: var(--spacing-sm);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  flex: 1;
}

.preview-stat__value {
  font-size: var(--font-size-lg);
  color: var(--primary);
  font-weight: 700;
  display: block;
}

.preview-stat__label {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.preview-brand {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  flex-direction: column;
  display: flex;
}

.preview-brand__logo {
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  width: 60px;
  height: 60px;
  color: var(--text-tertiary);
  border: 2px dashed var(--border-light);
  justify-content: center;
  align-items: center;
  display: flex;
}

.preview-brand__colors {
  gap: var(--spacing-sm);
  display: flex;
}

.preview-swatch {
  border: 2px solid var(--bg-primary);
  width: 28px;
  height: 28px;
  box-shadow: 0 0 0 1px var(--border-light);
  border-radius: 50%;
}

.preview-swatch--primary {
  background: var(--primary);
}

.preview-swatch--secondary {
  background: #3b82f6;
}

.preview-swatch--accent {
  background: #10b981;
}

.preview-brand__name {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
}

.preview-editor {
  background: var(--bg-secondary);
  height: 160px;
  display: flex;
}

.preview-editor__sidebar {
  width: 70px;
  padding: var(--spacing-xs);
  border-right: 1px solid var(--border-light);
  background: var(--bg-primary);
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.preview-block-item {
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  height: 28px;
  animation: 2s infinite blockPulse;
}

.preview-block-item:nth-child(2) {
  animation-delay: .2s;
}

.preview-block-item:nth-child(3) {
  animation-delay: .4s;
}

.preview-block-item:nth-child(4) {
  animation-delay: .6s;
}

@keyframes blockPulse {
  0%, 100% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }
}

.preview-editor__canvas {
  padding: var(--spacing-sm);
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 4px;
  display: flex;
}

.preview-block {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  width: 85%;
}

.preview-block--header {
  background: var(--gray-800);
  height: 24px;
}

.preview-block--hero {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  height: 50px;
}

.preview-block--text {
  height: 30px;
}

.preview-block--button {
  background: var(--primary);
  border-radius: var(--radius-sm);
  width: 40%;
  height: 20px;
}

.preview-audience {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
  background: var(--bg-primary);
  flex-direction: column;
  display: flex;
}

.preview-contact {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  display: flex;
}

.preview-avatar {
  background: var(--bg-tertiary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.preview-line {
  background: var(--bg-tertiary);
  border-radius: 4px;
  flex: 1;
  height: 8px;
}

.preview-contact--new {
  border-style: dashed;
  border-color: var(--primary);
  color: var(--primary);
  font-size: var(--font-size-xs);
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  cursor: default;
}

.animated-tooltip {
  top: var(--tooltip-top, 0);
  left: var(--tooltip-left, 0);
  z-index: 10000;
  width: max-content;
  max-width: 280px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-900);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  position: fixed;
}

.animated-tooltip--bottom {
  transform: translate(-50%, -8px);
}

.animated-tooltip--top {
  transform: translate(-50%, 8px);
}

.animated-tooltip--left {
  transform: translate(8px, -50%);
}

.animated-tooltip--right {
  transform: translate(-8px, -50%);
}

.animated-tooltip--visible {
  opacity: 1;
  pointer-events: auto;
}

.animated-tooltip--visible.animated-tooltip--bottom, .animated-tooltip--visible.animated-tooltip--top {
  transform: translate(-50%);
}

.animated-tooltip--visible.animated-tooltip--left, .animated-tooltip--visible.animated-tooltip--right {
  transform: translate(0, -50%);
}

.animated-tooltip__arrow {
  background: var(--gray-900);
  width: 10px;
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
}

.animated-tooltip--bottom .animated-tooltip__arrow {
  margin-left: -5px;
  top: -5px;
  left: 50%;
}

.animated-tooltip--top .animated-tooltip__arrow {
  margin-left: -5px;
  bottom: -5px;
  left: 50%;
}

.animated-tooltip--left .animated-tooltip__arrow {
  margin-top: -5px;
  top: 50%;
  right: -5px;
}

.animated-tooltip--right .animated-tooltip__arrow {
  margin-top: -5px;
  top: 50%;
  left: -5px;
}

.animated-tooltip__title {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-xxs);
  font-weight: 600;
}

.animated-tooltip__desc {
  font-size: var(--font-size-xs);
  color: var(--gray-300);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.5;
}

.animated-tooltip__progress {
  color: var(--gray-400);
  margin: 0 0 var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
}

.animated-tooltip__actions {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.animated-tooltip__dismiss {
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #ffffff26;
  border: none;
  flex: 1;
  transition: background .15s;
}

.animated-tooltip__dismiss:hover {
  background: #ffffff40;
}

.animated-tooltip__skip {
  color: var(--gray-400);
  cursor: pointer;
  white-space: nowrap;
  padding: var(--spacing-xxs);
  background: none;
  border: none;
  font-size: 10px;
}

.animated-tooltip__skip:hover {
  color: var(--gray-300);
}

.step-wizard {
  background: var(--gray-50);
  min-height: 100vh;
  padding: var(--spacing-lg);
}

@media (max-width: 767px) {
  .step-wizard {
    padding: var(--spacing-sm);
  }
}

.step-wizard__progress {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  position: relative;
}

.step-wizard__progress-bar {
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  height: 3px;
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
}

.step-wizard__progress-fill {
  height: 100%;
  width: var(--progress);
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width .4s;
}

.step-wizard__step {
  opacity: .4;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 4px;
  transition: opacity .3s;
  display: flex;
}

.step-wizard__step--active {
  opacity: 1;
}

.step-wizard__step-dot {
  background: var(--gray-200);
  width: 28px;
  height: 28px;
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.step-wizard__step--active .step-wizard__step-dot {
  background: var(--primary);
  color: var(--white);
}

.step-wizard__step-label {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .step-wizard__step-label {
    display: none;
  }
}

.step-wizard__content {
  max-width: 560px;
  margin: 0 auto;
  animation: .35s stepWizardFadeIn;
}

.step-wizard__back {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxs);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  background: none;
  border: none;
  padding: 0;
  display: flex;
}

.step-wizard__back:hover {
  color: var(--gray-700);
}

@keyframes stepWizardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-step__hint {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--gray-700);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-md);
  background: #f59e0b14;
  display: flex;
}

.wizard-step__hint svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.wizard-type-grid {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .wizard-type-grid {
    grid-template-columns: 1fr;
  }
}

.wizard-type-card {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  transition: all .2s;
  display: flex;
}

.wizard-type-card:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.wizard-type-card--active {
  border-color: var(--primary);
  background: #dc26260a;
}

.wizard-type-card__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--gray-900);
}

.wizard-type-card__desc {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

.wizard-field__label {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  display: block;
}

.wizard-field__input, .wizard-field__textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: border-color .15s;
}

.wizard-field__input:focus, .wizard-field__textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.wizard-field__textarea {
  resize: vertical;
  min-height: 80px;
}

.wizard-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.wizard-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  font-weight: 600;
  transition: all .15s;
}

.wizard-btn--primary:hover {
  opacity: .9;
}

.wizard-btn--secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.wizard-btn--secondary:hover {
  background: var(--gray-200);
}

.wizard-review {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.wizard-review__row {
  padding: var(--spacing-xs) 0;
  justify-content: space-between;
  display: flex;
}

.wizard-review__row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.wizard-review__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.wizard-review__value {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 600;
}

.wizard-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  background: #dc262614;
  display: flex;
}

.wizard-checklist {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.wizard-check-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  display: flex;
}

.wizard-check-item:hover {
  background: var(--gray-50);
}

.time-picker {
  position: relative;
}

.time-picker__display {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  transition: border-color .15s;
  display: flex;
}

.time-picker__display:hover {
  border-color: var(--primary);
}

.time-picker__value {
  font-weight: 700;
  font-size: var(--font-size-lg);
  font-variant-numeric: tabular-nums;
}

.time-picker__period {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--primary);
}

.time-picker__dropdown {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  min-width: 220px;
  box-shadow: none;
  z-index: 40;
  padding: var(--spacing-md);
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

.time-picker__edit-row {
  margin-bottom: var(--spacing-xs);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.time-picker__digit-box {
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 52px;
  transition: all .15s;
  display: flex;
  position: relative;
}

.time-picker__digit-box:hover {
  background: var(--gray-200);
}

.time-picker__digit-box.active {
  background: var(--white);
  box-shadow: 0 0 0 2px var(--primary);
}

.time-picker__digit-text {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
}

.time-picker__digit-text--ghost {
  color: var(--text-primary);
  pointer-events: none;
}

.time-picker__digit-input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #0000;
  width: 100%;
  height: 100%;
  caret-color: var(--primary);
  background: none;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 700;
  position: absolute;
  inset: 0;
}

.time-picker__colon-lg {
  color: var(--text-tertiary);
  margin: 0 2px;
  font-size: 28px;
  font-weight: 700;
}

.time-picker__ampm {
  background: var(--primary);
  width: 48px;
  height: 52px;
  color: var(--white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
  transition: all .15s;
  display: flex;
}

.time-picker__ampm:hover {
  opacity: .85;
}

.time-picker__ampm:active {
  transform: scale(.95);
}

.time-picker__spinners {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.time-picker__spinner-col {
  justify-content: center;
  gap: 4px;
  width: 56px;
  display: flex;
}

.time-picker__spacer {
  width: 28px;
}

.time-picker__arrow {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .1s;
  display: flex;
}

.time-picker__arrow:hover {
  background: var(--primary);
  color: var(--white);
}

.time-picker__arrow:active {
  transform: scale(.9);
}

.time-picker__presets {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  display: grid;
}

.time-picker__preset {
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  transition: all .1s;
}

.time-picker__preset:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.date-picker {
  position: relative;
}

.date-picker__display {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font-weight: 500;
  transition: border-color .15s;
  display: flex;
}

.date-picker__display:hover {
  border-color: var(--primary);
}

.date-picker__dropdown {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  min-width: 280px;
  box-shadow: none;
  z-index: 30;
  padding: var(--spacing-sm);
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.date-picker__nav {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.date-picker__nav button {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.date-picker__nav button:hover {
  background: var(--primary);
  color: var(--white);
}

.date-picker__month-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 700;
}

.date-picker__grid {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  display: grid;
}

.date-picker__day-label {
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 700;
}

.date-picker__empty {
  padding: 6px;
}

.date-picker__cell {
  aspect-ratio: 1;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  transition: all .1s;
  display: flex;
}

.date-picker__cell:hover:not(:disabled) {
  background: var(--bg-secondary);
}

.date-picker__cell.today {
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  font-weight: 700;
}

.date-picker__cell.selected {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
}

.date-picker__cell.selected.today {
  box-shadow: none;
}

.date-picker__cell:disabled {
  color: var(--text-tertiary);
  opacity: .4;
  cursor: not-allowed;
}

.business-type-grid {
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  display: grid;
}

.business-type-card {
  padding: var(--spacing-sm);
  background: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .15s, background .15s, transform .15s;
  display: flex;
}

.business-type-card:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.business-type-card:disabled {
  opacity: .5;
  cursor: wait;
}

.business-type-card--active {
  border-color: var(--primary);
  background: #3b82f60f;
}

.business-type-card__label {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-weight: 600;
}

.business-type-card__desc {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}

.radio-group {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.radio-option {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
}

.radio-option input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}

.vehicle-card-image {
  background: var(--gray-100);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.vehicle-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.vehicle-card-placeholder {
  height: 100%;
  color: var(--gray-400);
  justify-content: center;
  align-items: center;
  display: flex;
}

.vehicle-card-badges {
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  gap: var(--spacing-xs);
  display: flex;
  position: absolute;
}

.vehicle-card-body {
  padding: var(--spacing-sm);
}

.vehicle-card-title {
  font-size: var(--font-size-md);
  margin: 0 0 var(--spacing-xxs);
  color: var(--text-primary);
  font-weight: 600;
}

.vehicle-card-trim {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xs);
}

.vehicle-card-price {
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.vehicle-card-special {
  font-size: var(--font-size-lg);
  color: var(--primary);
  font-weight: 700;
}

.vehicle-card-msrp {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: line-through;
}

.vehicle-card-specs {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.vehicle-card-spec {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--gray-100);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.vehicle-card-actions {
  justify-content: flex-end;
  display: flex;
}

.dashboard-header-content {
  flex: 1;
  min-width: 200px;
}

.dashboard-title {
  font-size: var(--font-size-3xl) !important;
  color: var(--gray-900) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}

.dashboard-subtitle {
  color: var(--gray-500) !important;
  font-size: 16px !important;
}

.dashboard-header-actions {
  align-items: center;
  gap: var(--spacing-md-sm);
  display: flex;
}

.dashboard-refresh-btn {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  color: var(--gray-600) !important;
  transition: all .2s !important;
}

.dashboard-refresh-btn:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
}

.dashboard-create-btn {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--primary);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: var(--font-size-sm);
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.dashboard-create-btn:hover {
  background: var(--primary-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

.dashboard-create-btn svg {
  font-size: 18px;
}

.dashboard-owner-badge {
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  margin-bottom: 6px;
  padding: 3px 8px;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-owner-badge svg {
  font-size: var(--font-size-sm);
}

.dashboard-stat-card {
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  transition: all .2s !important;
}

.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: none !important;
}

.dashboard-stat-card .MuiCardContent-root {
  position: relative;
  padding: 10px !important;
}

.dashboard-stat-card-gradient {
  position: relative;
}

.dashboard-stat-card-gradient.blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

.dashboard-stat-card-gradient.blue .dashboard-stat-icon-wrapper, .dashboard-stat-card-gradient.blue .dashboard-progress-bar .MuiLinearProgress-bar {
  background: #3b82f6;
}

.dashboard-stat-card-gradient.green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.dashboard-stat-card-gradient.green .dashboard-stat-icon-wrapper, .dashboard-stat-card-gradient.green .dashboard-progress-bar .MuiLinearProgress-bar {
  background: #22c55e;
}

.dashboard-stat-card-gradient.purple {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
}

.dashboard-stat-card-gradient.purple .dashboard-stat-icon-wrapper, .dashboard-stat-card-gradient.purple .dashboard-progress-bar .MuiLinearProgress-bar {
  background: #8b5cf6;
}

.dashboard-stat-card-gradient.orange {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
}

.dashboard-stat-card-gradient.orange .dashboard-stat-icon-wrapper, .dashboard-stat-card-gradient.orange .dashboard-progress-bar .MuiLinearProgress-bar {
  background: #f97316;
}

.dashboard-stat-icon-wrapper {
  width: 36px;
  height: 36px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.dashboard-stat-icon-wrapper svg {
  font-size: 24px;
}

.dashboard-stat-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  display: flex;
}

.dashboard-stat-value {
  font-size: var(--font-size-3xl) !important;
  color: var(--gray-900) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.dashboard-stat-label {
  color: var(--gray-600) !important;
  font-size: var(--font-size-md) !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.dashboard-stat-trend {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-md);
  font-weight: 500;
  display: flex;
}

.dashboard-stat-trend .trend-up {
  color: #22c55e;
}

.dashboard-stat-trend .trend-down {
  color: #ef4444;
}

.dashboard-stat-trend .trend-neutral {
  color: var(--gray-400);
}

.dashboard-stat-trend svg {
  font-size: 20px;
}

.dashboard-progress-bar {
  background: #0000001a !important;
  height: 6px !important;
}

.dashboard-progress-bar .MuiLinearProgress-bar {
  border-radius: 3px;
}

.dashboard-card {
  overflow: hidden;
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: all .2s !important;
}

.dashboard-card:hover {
  box-shadow: none !important;
}

.dashboard-card-header {
  border-bottom: 1px solid var(--gray-100);
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 12px 16px !important;
}

.dashboard-card-title {
  color: var(--gray-900) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.dashboard-card-subtitle {
  margin-top: 2px;
  font-size: var(--font-size-sm) !important;
  color: var(--gray-500) !important;
}

.dashboard-card-action {
  font-size: var(--font-size-md);
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}

.dashboard-card-action:hover {
  color: var(--primary-dark);
}

.dashboard-activity-card .dashboard-card-content {
  padding: 0 !important;
}

.dashboard-activity-item {
  align-items: flex-start;
  gap: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-100);
  padding: 10px 16px;
  transition: background .15s;
  display: flex;
}

.dashboard-activity-item:last-child {
  border-bottom: none;
}

.dashboard-activity-item:hover {
  background: var(--gray-50);
}

.dashboard-activity-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.dashboard-activity-icon svg {
  font-size: 18px;
}

.dashboard-activity-content {
  flex: 1;
  min-width: 0;
}

.dashboard-activity-title {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  font-weight: 500;
  overflow: hidden;
}

.dashboard-activity-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.dashboard-activity-time {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  flex-shrink: 0;
}

.dashboard-chart-card .dashboard-card-content {
  padding: 0 !important;
}

.dashboard-chart-container {
  padding: 10px 12px 20px;
}

.dashboard-pie-container {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.dashboard-pie-legend {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0 16px 16px;
  display: flex;
}

.dashboard-pie-legend-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  display: flex;
}

.dashboard-pie-legend-item strong {
  color: var(--gray-900);
  font-weight: 600;
}

.dashboard-pie-dot {
  width: 10px;
  height: 10px;
}

.dashboard-empty-chart {
  height: 200px;
  color: var(--gray-400);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dashboard-empty-chart svg {
  font-size: var(--font-size-8xl);
  margin-bottom: 8px;
}

.dashboard-chart-loading {
  padding: 16px;
}

.dashboard-metric-card {
  text-align: center;
  border: 1px solid var(--gray-200) !important;
  box-shadow: none !important;
  transition: all .2s !important;
}

.dashboard-metric-card:hover {
  border-color: var(--gray-300) !important;
  box-shadow: none !important;
}

.dashboard-metric-card .MuiCardContent-root {
  padding: 16px 12px !important;
}

.dashboard-metric-icon {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  display: flex;
}

.dashboard-metric-icon svg {
  color: var(--white);
  font-size: 20px;
}

.dashboard-metric-icon.blue {
  background: #3b82f6;
}

.dashboard-metric-icon.green {
  background: #22c55e;
}

.dashboard-metric-icon.purple {
  background: #6366f1;
}

.dashboard-metric-icon.orange {
  background: #f97316;
}

.dashboard-metric-icon.teal {
  background: #14b8a6;
}

.dashboard-metric-icon.red {
  background: #ef4444;
}

.dashboard-metric-value {
  font-size: var(--font-size-2xl) !important;
  color: var(--gray-900) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.dashboard-metric-label {
  font-size: var(--font-size-sm) !important;
  color: var(--gray-500) !important;
  margin-top: 2px !important;
}

.activity-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.activity-focus-grid {
  gap: var(--spacing-md);
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .activity-focus-grid {
    grid-template-columns: 1fr;
  }
}

.activity-focus-card {
  border: 1px solid var(--border);
}

.activity-focus-card-hero {
  background: none;
}

.activity-focus-hero-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.activity-focus-context {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.activity-focus-title {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-primary);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.1;
}

.activity-focus-description {
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
}

.activity-focus-metrics {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

@media (max-width: 767px) {
  .activity-focus-metrics {
    grid-template-columns: 1fr;
  }
}

.activity-focus-metric {
  padding: var(--spacing-md);
  background: #ffffffb8;
  border: 1px solid #94a3b82e;
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.activity-focus-metric-label, .activity-focus-check-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}

.activity-focus-metric strong, .activity-focus-check strong {
  color: var(--text-primary);
  line-height: 1.3;
}

.activity-focus-metric span:last-child, .activity-focus-check span:last-child {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.activity-focus-card-side {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.activity-focus-side-header {
  gap: var(--spacing-sm);
  align-items: flex-start;
  display: flex;
}

.activity-focus-side-header h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.activity-focus-side-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.activity-focus-checklist {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.activity-focus-check {
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.activity-focus-check:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-focus-skeleton {
  width: 100%;
  height: 220px;
}

.activity-filters {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.activity-type-tabs {
  gap: var(--spacing-xs);
  background: var(--gray-100);
  padding: 4px;
  display: flex;
}

.activity-tab {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  border: none;
  padding: 8px 14px;
  font-weight: 500;
  display: flex;
}

.activity-tab:hover {
  color: var(--gray-700);
}

.activity-tab.active {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: none;
}

.activity-filter-group {
  gap: var(--spacing-sm);
  display: flex;
}

.activity-select {
  background: var(--white);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 160px;
  padding: 8px 12px;
}

.activity-select:focus {
  border-color: var(--primary);
  outline: none;
}

.activity-summary {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .activity-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .activity-summary {
    grid-template-columns: 1fr;
  }
}

.activity-stat {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  min-height: 92px;
  display: flex;
}

.activity-stat-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.activity-stat-primary .activity-stat-icon {
  color: #3b82f6;
  background: #3b82f61a;
}

.activity-stat-secondary .activity-stat-icon {
  color: #8b5cf6;
  background: #8b5cf61a;
}

.activity-stat-success .activity-stat-icon {
  color: #22c55e;
  background: #22c55e1a;
}

.activity-stat-info .activity-stat-icon {
  color: #f59e0b;
  background: #f59e0b1a;
}

.activity-stat-content {
  flex-direction: column;
  display: flex;
}

.activity-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.activity-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.activity-list {
  flex-direction: column;
  max-height: 600px;
  display: flex;
  overflow-y: auto;
}

.activity-feed-card {
  overflow: hidden;
}

.activity-feed-card-header {
  align-items: flex-start;
}

.activity-feed-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 6px 0 0;
}

.activity-icon {
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.activity-icon-primary {
  color: #3b82f6;
  background: #3b82f61a;
}

.activity-icon-secondary {
  color: #8b5cf6;
  background: #8b5cf61a;
}

.activity-icon-success {
  color: #22c55e;
  background: #22c55e1a;
}

.activity-icon-info {
  color: #f59e0b;
  background: #f59e0b1a;
}

.activity-details {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.activity-header {
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.activity-type-badge {
  font-size: var(--font-size-xs);
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
}

.activity-action {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.activity-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.5;
}

.activity-meta {
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.activity-creator, .activity-subscriber {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  display: flex;
}

.activity-creator:hover, .activity-subscriber:hover {
  color: var(--primary);
}

.activity-right {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

@media (max-width: 767px) {
  .activity-right {
    align-items: flex-start;
  }
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.skeleton-item {
  opacity: .6;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 6px;
}

.activity-empty {
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  min-height: 240px;
  display: flex;
}

.dashboard-table-content {
  overflow-x: auto;
  padding: 0 !important;
}

.dashboard-performance-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-md);
}

.dashboard-performance-table th, .dashboard-performance-table td {
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  padding: 12px 16px;
}

.dashboard-performance-table th {
  color: var(--gray-500);
  background: var(--gray-50);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.dashboard-performance-table td {
  color: var(--gray-700);
}

.dashboard-performance-table tbody tr:hover {
  background: var(--gray-50);
}

.dashboard-performance-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-table-link {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-900);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.dashboard-table-link svg {
  font-size: var(--font-size-base);
  color: var(--gray-400);
  opacity: 0;
  transition: opacity .15s;
}

.dashboard-table-link:hover {
  color: var(--primary);
}

.dashboard-table-link:hover svg {
  opacity: 1;
  color: var(--primary);
}

.dashboard-rate-cell {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 100px;
  display: flex;
}

.dashboard-rate-cell span {
  min-width: 45px;
  font-weight: 600;
}

.dashboard-rate-cell span.good {
  color: #22c55e;
}

.dashboard-rate-cell span.average {
  color: #f59e0b;
}

.dashboard-rate-cell span.low {
  color: #ef4444;
}

.dashboard-rate-bar {
  flex: 1;
  background: var(--gray-200) !important;
  height: 4px !important;
}

.dashboard-rate-bar .MuiLinearProgress-bar {
  border-radius: 2px;
}

.dashboard-rate-bar.good .MuiLinearProgress-bar {
  background: #22c55e;
}

.dashboard-rate-bar.average .MuiLinearProgress-bar {
  background: #f59e0b;
}

.dashboard-rate-bar.low .MuiLinearProgress-bar {
  background: #ef4444;
}

.dashboard-card-compact {
  margin-bottom: 16px;
}

.dashboard-card-compact:last-child {
  margin-bottom: 0;
}

.dashboard-account-card .dashboard-card-content {
  padding: 0 !important;
}

.dashboard-account-stats {
  padding: 10px 12px;
}

.dashboard-account-stat {
  border-bottom: 1px solid var(--gray-100);
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.dashboard-account-stat:last-child {
  border-bottom: none;
}

.dashboard-account-stat-label {
  font-size: var(--font-size-md);
  color: var(--gray-500);
}

.dashboard-account-stat-value {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-weight: 600;
  display: flex;
}

.dashboard-account-stat-value .plan-active {
  color: #22c55e;
  font-size: 18px;
}

.dashboard-account-link {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  font-size: var(--font-size-md);
  color: var(--primary);
  padding: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.dashboard-account-link svg {
  font-size: 20px;
}

.dashboard-account-link:hover {
  background: var(--gray-100);
}

.dashboard-empty-small .dashboard-empty-icon {
  font-size: var(--font-size-6xl) !important;
}

.billing-overview {
  box-shadow: none;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.billing-overview-header {
  border-bottom: 1px solid var(--gray-100);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.billing-overview-header h3 {
  color: var(--gray-900);
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
}

.billing-overview-link {
  color: var(--primary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.billing-overview-link:hover {
  text-decoration: underline;
}

.billing-overview-content {
  padding: 10px 12px;
}

.billing-overview-section {
  border-bottom: 1px solid var(--gray-100);
  padding: 12px 0;
}

.billing-overview-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.billing-overview-section:first-child {
  padding-top: 0;
}

.billing-section-title {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.billing-plan-card {
  background: var(--gray-50);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.billing-plan-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.billing-plan-label {
  color: var(--gray-500);
  font-size: 12px;
}

.billing-plan-name {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
}

.billing-plan-price {
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}

.billing-plan-status {
  background: var(--gray-200);
  color: var(--gray-600);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  display: flex;
}

.billing-plan-status.active {
  color: #16a34a;
  background: #dcfce7;
}

.billing-upgrade-link {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s;
  display: inline-block;
}

.billing-upgrade-link:hover {
  background: var(--primary-dark);
}

.billing-card-info {
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.billing-card-icon {
  background: var(--gray-100);
  width: 44px;
  height: 44px;
  color: var(--gray-600);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.billing-card-details {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.billing-card-brand {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
}

.billing-card-expiry {
  color: var(--gray-500);
  font-size: 12px;
}

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

.billing-invoice-item {
  background: var(--gray-50);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.billing-invoice-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.billing-invoice-number {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 600;
}

.billing-invoice-date {
  color: var(--gray-500);
  font-size: 12px;
}

.billing-invoice-amount {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  display: flex;
}

.billing-invoice-status {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  display: flex;
}

.billing-invoice-status.paid {
  color: #16a34a;
  background: #dcfce7;
}

.billing-invoice-status.pending {
  color: #d97706;
  background: #fef3c7;
}

.billing-invoice-total {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
}

.billing-overview-empty {
  color: var(--gray-400);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
  display: flex;
}

.billing-overview-empty span {
  font-size: 14px;
}

.dashboard-chip {
  font-size: var(--font-size-sm) !important;
  height: 24px !important;
}

.dashboard-chip-success {
  color: #16a34a !important;
  background: #22c55e1a !important;
}

.dashboard-chip-default {
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
}

.dashboard-chip-primary {
  color: #6366f1 !important;
  background: #6366f11a !important;
}

.dashboard-chip-warning {
  color: #d97706 !important;
  background: #f59e0b1a !important;
}

.dashboard-chip-error {
  color: #dc2626 !important;
  background: #ef44441a !important;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: 4px;
}

.detail-value {
  font-size: var(--font-size-base);
}

.content-preview {
  white-space: pre-wrap;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.nl-detail-page {
  animation: fadeIn var(--duration-normal);
}

.nl-detail-page .page-header-actions {
  flex-wrap: wrap;
  align-items: center;
}

.nl-detail-hero {
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--bg-elevated)) 0%, var(--bg-elevated) 52%), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-light));
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

.nl-detail-hero-main {
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  align-items: start;
  gap: 24px;
  display: grid;
}

.nl-detail-hero-kicker {
  font-size: var(--font-size-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.nl-detail-hero-title-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.nl-detail-hero-title {
  letter-spacing: -.03em;
  color: var(--text-primary);
  margin: 0;
  font-size: clamp(1.65rem, 2vw, 2.35rem);
  line-height: 1.05;
}

.nl-detail-hero-subject {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.nl-detail-hero-preheader {
  max-width: 70ch;
  color: var(--text-tertiary);
  margin: 12px 0 0;
  line-height: 1.6;
}

.nl-detail-hero-meta {
  gap: 12px;
  display: grid;
}

.nl-detail-hero-meta-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-secondary) 82%, white);
  padding: 14px 16px;
}

.nl-detail-hero-meta-label, .nl-detail-summary-label, .nl-detail-meta-label {
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-weight: 700;
  display: block;
}

.nl-detail-hero-meta-value, .nl-detail-summary-value {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

.nl-detail-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.nl-detail-summary-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-primary) 86%, white);
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  display: flex;
}

.nl-detail-summary-icon, .nl-detail-stat-icon, .nl-detail-creator-avatar {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  width: 40px;
  height: 40px;
  color: var(--primary);
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nl-detail-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr);
  align-items: start;
  gap: 10px;
  display: grid;
}

.nl-detail-main, .nl-detail-sidebar {
  min-width: 0;
}

.nl-detail-stats-panel {
  margin-bottom: var(--spacing-sm);
  padding: 10px;
}

.nl-detail-stats-panel-head, .nl-detail-preview-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.nl-detail-stats-caption, .nl-detail-preview-caption {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  margin: 6px 0 0;
  line-height: 1.5;
}

.nl-detail-stats-bar {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  display: grid;
}

.nl-detail-stat-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 68%, white), var(--bg-elevated));
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  display: flex;
}

.nl-detail-stat-card-highlight {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border-light));
}

.nl-detail-stat-icon {
  background: color-mix(in srgb, var(--stat-color) 14%, transparent);
  width: 38px;
  height: 38px;
  color: var(--stat-color);
  border-radius: 12px;
}

.nl-detail-stat-content {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.nl-detail-stat-value, .nl-detail-meta-emphasis {
  color: var(--text-primary);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
}

.nl-detail-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.35;
}

.nl-detail-card, .nl-detail-creator-card, .nl-detail-preview-card {
  box-shadow: var(--shadow-sm);
}

.nl-detail-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
  display: grid;
}

.nl-detail-meta-block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  padding: 14px;
}

.nl-detail-detail-list {
  margin-top: 8px;
}

.nl-detail-creator-head {
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  display: flex;
}

.nl-detail-creator-copy {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.nl-detail-creator-name, .nl-detail-info-link {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}

.nl-detail-info-link:hover {
  color: var(--primary);
}

.nl-detail-creator-handle {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  margin-top: 2px;
}

.nl-detail-info-rows {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.nl-detail-info-row {
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  grid-template-columns: 16px 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: grid;
}

.nl-detail-info-label {
  color: var(--text-tertiary);
}

.nl-detail-info-value {
  min-width: 0;
  color: var(--text-primary);
}

.nl-detail-inline-icon {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.nl-detail-preview-shell {
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius-lg)  + 4px);
  background: linear-gradient(#f6f7fb 0%, #eef1f7 100%);
  overflow: hidden;
}

.nl-detail-preview-shell-bar {
  border-bottom: 1px solid var(--border-light);
  background: #ffffffa6;
  gap: 8px;
  padding: 12px 14px;
  display: flex;
}

.nl-detail-preview-shell-bar span {
  background: var(--border-default);
  border-radius: 999px;
  width: 10px;
  height: 10px;
}

.nl-detail-preview-body {
  background: #fff;
  padding: 10px;
}

.content-preview {
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 10px;
}

@media (max-width: 1100px) {
  .nl-detail-hero-main, .nl-detail-layout {
    grid-template-columns: 1fr;
  }

  .nl-detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nl-detail-meta-bar {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 0;
  display: flex;
}

.nl-detail-meta-bar span:empty {
  display: none;
}

.nl-detail-meta-bar span:not(:last-child):after {
  content: "·";
  color: var(--border-default);
  margin-left: 16px;
}

@media (max-width: 720px) {
  .nl-detail-hero {
    padding: 10px;
  }

  .nl-detail-hero-title-row {
    flex-direction: column;
  }

  .nl-detail-summary-grid, .nl-detail-meta-grid {
    grid-template-columns: 1fr;
  }

  .nl-detail-info-row {
    grid-template-columns: 16px 1fr;
  }

  .nl-detail-info-label {
    grid-column: 2;
  }

  .nl-detail-info-value, .nl-detail-info-row .badge {
    grid-column: 1 / -1;
    padding-left: 26px;
  }
}

.newsletter-grid {
  gap: var(--spacing-md-lg);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  display: grid;
}

.newsletter-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 10px;
  transition: all .2s;
}

.newsletter-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.newsletter-card-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.newsletter-card-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.newsletter-card-title {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  display: block;
}

.newsletter-card-title:hover {
  color: var(--primary);
}

.newsletter-card-subject {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.newsletter-card-creator {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 4px 8px;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
}

.newsletter-card-creator:hover:not(.no-creator) {
  color: var(--primary);
  background: var(--primary-light);
}

.newsletter-card-creator.no-creator {
  opacity: .6;
  cursor: default;
}

.newsletter-card-creator svg {
  opacity: .7;
  flex-shrink: 0;
}

.newsletter-card-stats {
  gap: var(--spacing-md);
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
  display: flex;
}

.newsletter-stat {
  flex-direction: column;
  display: flex;
}

.newsletter-stat .stat-value {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
}

.newsletter-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.newsletter-card-scheduled {
  background: var(--warning-light);
  font-size: var(--font-size-md);
  color: var(--warning-dark);
  margin-top: 12px;
  padding: 8px 12px;
}

.newsletter-card-actions {
  gap: var(--spacing-sm);
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
  display: flex;
}

.newsletter-action-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 8px 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

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

.newsletter-action-btn.primary {
  background: var(--primary);
  color: var(--white);
}

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

.newsletter-action-btn svg {
  flex-shrink: 0;
}

.actions-row {
  gap: var(--spacing-md-sm);
  margin-top: 20px;
  display: flex;
}

.table-actions {
  gap: var(--spacing-md);
  display: flex;
}

.table-action {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.table-action:hover {
  color: var(--primary);
}

.users-table-container {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.user-cell {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.user-email {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.user-stats-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .user-stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-title {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 4px;
}

.stat-value {
  color: var(--text-primary);
  margin: 0;
  font-size: 32px;
  font-weight: 600;
}

.user-content-section {
  margin-bottom: var(--spacing-md);
}

.user-content-section h2 {
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.content-list {
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.content-item {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast);
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
}

.content-item:last-child {
  border-bottom: none;
}

.content-item-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.content-item-title {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.content-item-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.content-item-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-left: var(--spacing-md);
}

.activity-list {
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.activity-item {
  align-items: flex-start;
  gap: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast);
  padding: 12px 16px;
  display: flex;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: var(--bg-secondary);
}

.activity-type {
  flex-shrink: 0;
  width: 80px;
}

.activity-content {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.activity-title {
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
}

.activity-user {
  font-size: var(--font-size-sm);
  color: var(--primary);
  text-decoration: none;
}

.activity-user:hover {
  text-decoration: underline;
}

.activity-time {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.back-link {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  text-decoration: none;
  display: inline-flex;
}

.back-link:hover {
  color: var(--primary);
}

.users-filter {
  margin-bottom: var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--border);
  gap: 0;
  padding: 4px;
  display: flex;
}

.filter-btn {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .15s;
}

.filter-btn:hover {
  color: var(--primary);
  background: var(--gray-50);
}

.filter-btn.active {
  background: var(--primary);
  color: var(--white);
}

.user-detail-page {
  gap: var(--spacing-md);
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
}

.user-detail-header {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.user-detail-info {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.user-detail-avatar {
  background: var(--gray-100);
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-detail-meta {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 14px;
  display: flex;
}

.user-detail-heading {
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  display: flex;
}

.user-detail-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.user-detail-email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.user-detail-badges {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.user-detail-date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
}

.user-detail-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .user-detail-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .user-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.user-stat-card {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  min-width: 0;
  color: var(--text-secondary);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.user-stat-content {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.user-stat-value {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
}

.user-stat-revenue {
  color: #22c55e;
  background: #22c55e0a;
  border-color: #22c55e1f;
}

.user-detail-grid {
  gap: var(--spacing-md);
  grid-template-columns: minmax(0, 1fr) 320px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .user-detail-grid {
    grid-template-columns: 1fr;
  }
}

.user-detail-main, .user-detail-sidebar {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.user-section-card .card-header {
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.user-section-card .card-link {
  font-size: var(--font-size-xs);
  color: var(--primary);
  text-decoration: none;
}

.user-section-card .card-link:hover {
  text-decoration: underline;
}

.user-content-list {
  flex-direction: column;
  display: flex;
}

.user-content-item {
  border-bottom: 1px solid var(--border);
  color: inherit;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background .2s;
  display: grid;
}

.user-content-item:hover {
  background: var(--gray-50);
}

.user-content-item:last-child {
  border-bottom: none;
}

.user-content-info {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.user-content-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.user-content-meta, .user-content-stat {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.user-content-date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.user-brands-grid {
  flex-direction: column;
  display: flex;
}

.user-brand-item {
  gap: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
  color: inherit;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  display: grid;
}

.user-brand-item:hover {
  background: var(--gray-50);
}

.user-brand-item:last-child {
  border-bottom: none;
}

.user-brand-logo {
  background: var(--brand-color, var(--gray-100));
  width: 32px;
  height: 32px;
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size-lg);
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-brand-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.user-brand-info {
  flex-direction: column;
  display: flex;
}

.user-brand-name {
  font-weight: 500;
}

.user-brand-newsletters {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.user-billing-summary {
  flex-direction: column;
  display: flex;
}

.billing-summary-content {
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
  display: flex;
}

.billing-plan-info {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.billing-plan-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.billing-plan-name {
  font-weight: 600;
}

.billing-plan-price {
  font-size: var(--font-size-lg);
  color: var(--primary);
  font-weight: 700;
}

.billing-plan-renewal {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.billing-no-plan {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-100);
  color: var(--text-secondary);
  display: flex;
}

.billing-total-paid {
  background: #22c55e0d;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.billing-total-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.billing-total-value {
  color: #22c55e;
  font-weight: 700;
}

.billing-invoices-mini h4 {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.billing-invoice-row {
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  grid-template-columns: 1fr auto auto;
  align-items: center;
  display: grid;
}

.billing-invoice-number {
  color: var(--text-secondary);
}

.billing-invoice-amount {
  font-weight: 500;
}

.billing-manage-link {
  font-size: var(--font-size-xs);
  color: var(--primary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  display: flex;
}

.billing-manage-link:hover {
  text-decoration: underline;
}

.billing-quick-actions {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

@media (max-width: 1024px) {
  .user-detail-meta {
    align-items: flex-start;
  }
}

.billing-action-row {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.plan-select-mini {
  border: 1px solid var(--border);
  background: var(--bg-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  flex: 1;
  padding: 6px 10px;
}

.plan-select-mini:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.billing-alert {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  color: var(--danger);
  font-size: var(--font-size-sm);
  background: #ef44441a;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.billing-alert:hover {
  background: #ef444426;
}

.billing-alerts {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.billing-alerts .billing-alert {
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  display: flex;
}

.billing-alerts .billing-alert--error {
  border-left: 4px solid var(--danger);
  background: #ef44440d;
}

.billing-alerts .billing-alert--error > svg {
  color: var(--danger);
  flex-shrink: 0;
  margin-top: 2px;
}

.billing-alerts .billing-alert--warning {
  border-left: 4px solid var(--warning);
  background: #f59e0b0d;
}

.billing-alerts .billing-alert--warning > svg {
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.billing-alerts .billing-alert-content {
  flex: 1;
}

.billing-alerts .billing-alert-content strong {
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 600;
  display: block;
}

.billing-alerts .billing-alert-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.billing-alerts .billing-alert-action {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  transition: background var(--duration-fast);
  flex-shrink: 0;
  padding: 6px 12px;
  font-weight: 500;
  text-decoration: none;
}

.billing-alerts .billing-alert-action:hover {
  background: var(--primary-dark);
}

.dashboard {
  padding: 0;
}

.dashboard-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 12px;
  display: flex;
}

.header-actions {
  gap: 12px;
  display: flex;
}

.btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--primary);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.btn-secondary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

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

.stat-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-items: flex-start;
  gap: var(--spacing-xs);
  color: inherit;
  transition: all var(--duration-fast);
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.stat-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.stat-card-primary .stat-icon {
  color: var(--white);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-card-secondary .stat-icon {
  color: var(--white);
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.stat-card-success .stat-icon {
  color: var(--white);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.stat-card-info .stat-icon {
  color: var(--white);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-label {
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-size: 13px;
}

.stat-value {
  margin-bottom: 2px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-change {
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.stat-change.positive {
  color: #22c55e;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-sub {
  color: var(--text-secondary);
  font-size: 12px;
}

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

.mini-stat {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: var(--spacing-md);
  text-align: center;
}

.mini-stat-label {
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-size: 12px;
}

.mini-stat-value {
  font-size: 24px;
  font-weight: 700;
}

.dashboard-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 16px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 16px;
}

.chart-card {
  grid-column: span 1;
}

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

.section-title {
  font-size: var(--font-size-md);
  margin: 0;
  font-weight: 600;
}

.card-subtitle {
  color: var(--text-secondary);
  font-size: 12px;
}

.table-action {
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.table-action:hover {
  text-decoration: underline;
}

.chart-container {
  height: 200px;
}

.bar-chart {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  height: 100%;
  padding-bottom: 24px;
  display: flex;
}

.bar-container {
  flex-direction: column;
  flex: 1;
  align-items: center;
  height: 100%;
  display: flex;
}

.bar {
  background: linear-gradient(#3b82f6 0%, #1d4ed8 100%);
  width: 100%;
  max-width: 40px;
  min-height: 4px;
  margin-top: auto;
  position: relative;
}

.bar-value {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.bar-label {
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
  font-size: 11px;
}

.performance-metrics {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.metric-row {
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.metric-label {
  width: 100px;
  color: var(--text-secondary);
  font-size: 13px;
}

.metric-bar-container {
  background: var(--bg-secondary);
  flex: 1;
  height: 8px;
  overflow: hidden;
}

.metric-bar {
  height: 100%;
}

.metric-bar.opens {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.metric-bar.clicks {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.metric-value {
  text-align: right;
  width: 60px;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.metric-divider {
  background: var(--border);
  height: 1px;
  margin: var(--spacing-sm) 0;
}

.metric-summary {
  justify-content: space-around;
  display: flex;
}

.summary-item {
  text-align: center;
}

.summary-value {
  color: var(--primary);
  font-size: 24px;
  font-weight: 700;
  display: block;
}

.summary-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.performance-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.performance-item {
  background: var(--bg-secondary);
  color: inherit;
  transition: background var(--duration-fast);
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.performance-item:hover {
  background: var(--bg-tertiary);
}

.performance-info {
  min-width: 0;
}

.performance-title {
  font-weight: 500;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.performance-date {
  color: var(--text-secondary);
  font-size: 12px;
}

.performance-stats {
  gap: var(--spacing-md);
  display: flex;
}

.perf-stat {
  text-align: center;
}

.perf-value {
  font-weight: 600;
  font-size: var(--font-size-sm);
  display: block;
}

.perf-label {
  color: var(--text-secondary);
  font-size: 10px;
}

.subscriber-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.subscriber-item {
  background: var(--bg-secondary);
  color: inherit;
  transition: background var(--duration-fast);
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  display: flex;
}

.subscriber-item:hover {
  background: var(--bg-tertiary);
}

.subscriber-avatar {
  width: 36px;
  height: 36px;
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size-sm);
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

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

.subscriber-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.subscriber-email {
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  display: block;
  overflow: hidden;
}

.badge {
  text-transform: uppercase;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

.badge-confirmed {
  color: #166534;
  background: #dcfce7;
}

.badge-pending {
  color: #92400e;
  background: #fef3c7;
}

.badge-unsubscribed {
  color: #991b1b;
  background: #fee2e2;
}

.badge-sent {
  color: #166534;
  background: #dcfce7;
}

.badge-draft {
  color: #3730a3;
  background: #e0e7ff;
}

.badge-scheduled {
  color: #92400e;
  background: #fef3c7;
}

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

.websites-section {
  margin-bottom: 16px;
}

.websites-stats {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .websites-stats {
    grid-template-columns: 1fr;
  }
}

.website-stat {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  display: flex;
}

.website-stat-icon {
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
}

.website-stat-icon.total {
  color: #0284c7;
  background: #e0f2fe;
}

.website-stat-icon.verified {
  color: #22c55e;
  background: #dcfce7;
}

.website-stat-icon.pending {
  color: #f59e0b;
  background: #fef3c7;
}

.website-stat-value {
  font-size: 24px;
  font-weight: 700;
  display: block;
}

.website-stat-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.quick-actions-section {
  margin-bottom: 16px;
}

.quick-actions-title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.quick-actions-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  display: grid;
}

.quick-action-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--duration-fast);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
  display: flex;
}

.quick-action-card:hover {
  border-color: var(--primary);
  background: var(--bg-secondary);
}

.quick-action-icon {
  background: var(--bg-secondary);
  width: 36px;
  height: 36px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

@media (max-width: 767px) {
  .stats-grid-main {
    grid-template-columns: 1fr;
  }

  .stats-grid-secondary {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skeleton-label {
  width: 80px;
  height: 14px;
  margin-bottom: var(--spacing-sm);
}

.skeleton-value {
  width: 60px;
  height: 32px;
}

.skeleton-text-lg {
  width: 60%;
  height: 16px;
}

.skeleton-badge {
  width: 20%;
  height: 20px;
}

.skeleton-chart {
  width: 100%;
  height: 200px;
}

.chart-skeleton {
  height: 200px;
}

.list-skeleton {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.skeleton-row {
  background: var(--bg-secondary);
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  display: flex;
}

.creator-summary {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .creator-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .creator-summary {
    grid-template-columns: 1fr;
  }
}

.summary-card {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast);
  display: flex;
}

.summary-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.summary-card.loading {
  min-height: 72px;
}

.summary-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.summary-card-primary .summary-icon {
  color: #4f46e5;
  background: #e0e7ff;
}

.summary-card-success .summary-icon {
  color: #16a34a;
  background: #dcfce7;
}

.summary-card-info .summary-icon {
  color: #d97706;
  background: #fef3c7;
}

.summary-card-secondary .summary-icon {
  color: #9333ea;
  background: #f3e8ff;
}

.summary-content {
  flex-direction: column;
  display: flex;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.summary-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

.creators-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.creator-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--duration-fast);
  padding: 10px;
  text-decoration: none;
  display: flex;
}

.creator-item:hover {
  background: var(--bg-tertiary);
}

.creator-avatar {
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size-xs);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.creator-info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.creator-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.creator-email {
  color: var(--text-tertiary);
  font-size: 12px;
}

.creator-stats {
  gap: var(--spacing-md);
  display: flex;
}

.creator-stat {
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: flex;
}

.content-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.content-item {
  background: var(--bg-secondary);
  transition: background var(--duration-fast);
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  display: flex;
}

.content-item:hover {
  background: var(--bg-tertiary);
}

.content-main {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.content-title {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden;
}

.content-title:hover {
  color: var(--primary);
}

.content-creator {
  color: var(--text-tertiary);
  font-size: 12px;
  text-decoration: none;
}

.content-creator:hover {
  color: var(--primary);
}

.content-meta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
  display: flex;
}

.content-time {
  color: var(--text-tertiary);
  font-size: 12px;
}

.usage-card {
  grid-column: span 2;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .usage-card {
    grid-column: span 1;
  }
}

.export-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  display: flex;
}

.export-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.export-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.usage-table {
  flex-direction: column;
  display: flex;
}

.usage-header {
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-transform: uppercase;
  grid-template-columns: 2fr repeat(4, 1fr);
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.usage-row {
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
  grid-template-columns: 2fr repeat(4, 1fr);
  display: grid;
}

.usage-row:last-child {
  border-bottom: none;
}

.usage-row:hover {
  background: var(--bg-secondary);
}

.usage-col-user {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden;
}

.usage-col-user:hover {
  color: var(--primary);
}

.usage-col {
  text-align: center;
  color: var(--text-secondary);
}

.usage-total {
  color: var(--text-primary);
  font-weight: 600;
}

.templates-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.template-filters {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.template-categories {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.template-category {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  padding: 8px 14px;
  font-weight: 500;
  display: flex;
}

.template-category:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.template-category.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.template-counts {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.template-counts .count-separator {
  opacity: .3;
}

.template-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--duration-fast);
  overflow: hidden;
}

.template-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.template-preview {
  background: var(--gray-100);
  justify-content: center;
  align-items: center;
  height: 160px;
  display: flex;
  position: relative;
}

.template-thumbnail {
  background: var(--white);
  border: 1px solid var(--border);
  width: 80px;
  height: 80px;
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.template-letter {
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
}

.template-source-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.template-name {
  font-size: var(--font-size-md);
  margin: 0 0 4px;
  font-weight: 600;
}

.template-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 0 12px;
  display: -webkit-box;
  overflow: hidden;
}

.template-meta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 12px;
  display: flex;
}

.template-category-tag, .template-creator {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.template-use-btn {
  background: var(--primary);
  width: 100%;
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: none;
  padding: 10px;
  font-weight: 600;
}

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

.template-empty {
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.skeleton-card .template-preview {
  background: var(--gray-200);
}

.template-modal {
  z-index: 1000;
  padding: var(--spacing-lg);
  background: #0009;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.template-modal-content {
  background: var(--bg-primary);
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.template-modal-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.template-modal-title {
  font-size: var(--font-size-lg);
  margin: 0;
  font-weight: 600;
}

.template-modal-close {
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.template-modal-close:hover {
  color: var(--text-primary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .template-modal-body {
    grid-template-columns: 1fr;
  }
}

.template-modal-preview {
  padding: var(--spacing-lg);
  background: var(--gray-100);
  overflow-y: auto;
}

.template-preview-placeholder {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  height: 100%;
  min-height: 300px;
  color: var(--text-secondary);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.template-modal-sidebar {
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-left: 1px solid var(--border);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .template-modal-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

.template-modal-section {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.template-modal-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.template-modal-value {
  font-size: var(--font-size-sm);
  margin: 0;
}

.template-modal-code {
  font-family: monospace;
  font-size: var(--font-size-xs);
  background: var(--gray-100);
  padding: 8px;
}

.theme-selector {
  gap: var(--spacing-xs);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.theme-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--duration-fast);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
  display: flex;
}

.theme-btn:hover {
  border-color: var(--primary);
}

.theme-btn.active {
  border-color: var(--primary);
  background: #3b82f60d;
}

.theme-btn span {
  color: var(--text-secondary);
  font-size: 10px;
}

.theme-btn-color {
  width: 24px;
  height: 24px;
}

.template-variables {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.template-variable {
  background: var(--gray-100);
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 4px 8px;
}

.template-modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-stats-bar {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
}

.brand-stat-item {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-stat-icon {
  width: 36px;
  height: 36px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-stat-info {
  flex-direction: column;
  display: flex;
}

.brand-stat-value {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.brand-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.brand-filters {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.brand-filters-left {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-search {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 240px;
  padding: 8px 12px;
  display: flex;
}

.brand-search input {
  font-size: var(--font-size-sm);
  background: none;
  border: none;
  flex: 1;
}

.brand-search input:focus {
  outline: none;
}

.brand-search input::placeholder, .brand-search svg {
  color: var(--text-secondary);
}

.brand-view-toggle {
  border: 1px solid var(--border);
  display: flex;
}

.brand-view-btn {
  background: var(--white);
  cursor: pointer;
  color: var(--text-secondary);
  border: none;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  transition: all .15s;
  display: flex;
}

.brand-view-btn:hover {
  background: var(--gray-100);
}

.brand-view-btn.active {
  background: var(--primary);
  color: var(--white);
}

.brand-filter-group {
  gap: var(--spacing-sm);
  display: flex;
}

.brand-select {
  background: var(--white);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  cursor: pointer;
  min-width: 200px;
  padding: 8px 12px;
}

.brand-select:focus {
  border-color: var(--primary);
  outline: none;
}

.brand-summary {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.brand-summary .summary-separator {
  opacity: .3;
}

.brand-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  display: grid;
}

.brand-card {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.brand-header {
  align-items: flex-start;
  gap: var(--spacing-md);
  display: flex;
}

.brand-logo-wrapper {
  flex-shrink: 0;
}

.brand-logo {
  object-fit: contain;
  width: 36px;
  height: 36px;
}

.brand-logo-placeholder {
  width: 36px;
  height: 36px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-title {
  flex: 1;
  min-width: 0;
}

.brand-name {
  font-size: var(--font-size-md);
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-weight: 600;
  display: flex;
}

.brand-project {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.brand-creator {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-100);
  font-size: var(--font-size-sm);
  color: var(--primary);
  width: fit-content;
  padding: 6px 10px;
  text-decoration: none;
  display: flex;
}

.brand-creator:hover {
  background: var(--gray-200);
}

.brand-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
}

.brand-colors {
  gap: 4px;
  display: flex;
}

.brand-color {
  border: 1px solid var(--border);
  width: 24px;
  height: 24px;
}

.brand-stats {
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  flex-wrap: wrap;
  display: flex;
}

.brand-stats span {
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.brand-meta {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border);
}

.brand-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.brand-empty h3 {
  color: var(--text-primary);
  margin: 0;
}

.brand-empty p {
  margin: 0;
}

.brand-table-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.brand-table {
  border-collapse: collapse;
  width: 100%;
}

.brand-table th, .brand-table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}

.brand-table th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--gray-50);
  font-weight: 600;
}

.brand-table tbody tr:hover {
  background: var(--gray-50);
}

.brand-table-name {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.brand-table-logo {
  object-fit: contain;
  width: 32px;
  height: 32px;
}

.brand-table-logo-placeholder {
  width: 32px;
  height: 32px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-table-title {
  margin-right: var(--spacing-xs);
  font-weight: 500;
}

.brand-table-project {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.brand-table-creator {
  color: var(--primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.brand-table-creator:hover {
  text-decoration: underline;
}

.brand-table-colors {
  gap: 4px;
  display: flex;
}

.brand-table-color {
  border: 1px solid var(--border);
  width: 20px;
  height: 20px;
}

.brands-page, .billing-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.billing-stats {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .billing-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .billing-stats {
    grid-template-columns: 1fr;
  }
}

.billing-stat {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  display: flex;
}

.billing-stat-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.billing-stat-primary .billing-stat-icon {
  color: #3b82f6;
  background: #3b82f61a;
}

.billing-stat-success .billing-stat-icon {
  color: #22c55e;
  background: #22c55e1a;
}

.billing-stat-secondary .billing-stat-icon {
  color: #8b5cf6;
  background: #8b5cf61a;
}

.billing-stat-info .billing-stat-icon {
  color: #f59e0b;
  background: #f59e0b1a;
}

.billing-stat-content {
  flex-direction: column;
  display: flex;
}

.billing-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.billing-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.billing-grid {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .billing-grid {
    grid-template-columns: 1fr;
  }
}

.plan-distribution {
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.plan-row {
  gap: var(--spacing-md);
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  display: grid;
}

.plan-info {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.plan-color {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.plan-name {
  font-weight: 500;
}

.plan-count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.plan-bar-container {
  background: var(--gray-200);
  flex: 1;
  height: 8px;
}

.plan-bar {
  height: 100%;
  transition: width .3s;
}

.plan-mrr {
  font-size: var(--font-size-sm);
  text-align: right;
  font-weight: 600;
}

.plan-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-secondary);
}

.invoice-list {
  flex-direction: column;
  display: flex;
}

.invoice-item {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr 1fr auto;
  display: grid;
}

.invoice-item:last-child {
  border-bottom: none;
}

.invoice-item-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.invoice-item-link:hover {
  background: var(--bg-secondary);
}

.invoice-number {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.invoice-user {
  font-size: var(--font-size-xs);
  color: var(--primary);
  text-decoration: none;
}

.invoice-user:hover {
  text-decoration: underline;
}

.invoice-details {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.invoice-plan {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.invoice-amount {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  display: flex;
}

.invoice-date {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.invoice-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-secondary);
}

.plans-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.plans-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.plan-card {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.plan-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.plan-title {
  font-size: var(--font-size-lg);
  margin: 0;
  font-weight: 700;
}

.plan-pricing {
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.plan-price {
  color: var(--primary);
  font-size: 28px;
  font-weight: 700;
}

.plan-period {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan-yearly {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.plan-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.plan-users {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--gray-100);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
}

.plan-limits h4 {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.plan-limits ul {
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.plan-limits li {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
}

.plan-features h4 {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.feature-tags {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.feature-tag {
  background: var(--gray-100);
  text-transform: capitalize;
  padding: 2px 8px;
  font-size: 10px;
}

.plans-empty-state {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-3xl);
  text-align: center;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.plans-empty-state h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.plans-empty-state p {
  font-size: var(--font-size-sm);
  max-width: 400px;
  margin: 0;
}

.billing-users-card .card-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.billing-users-card .card-link {
  font-size: var(--font-size-xs);
  color: var(--primary);
  text-decoration: none;
}

.billing-users-card .card-link:hover {
  text-decoration: underline;
}

.billing-users-list {
  flex-direction: column;
  display: flex;
}

.billing-user-item {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  color: inherit;
  grid-template-columns: 32px 1fr auto 100px;
  align-items: center;
  text-decoration: none;
  transition: background .2s;
  display: grid;
}

.billing-user-item:hover {
  background: var(--gray-50);
}

.billing-user-item:last-child {
  border-bottom: none;
}

.billing-user-rank {
  background: var(--gray-100);
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.billing-user-info {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.billing-user-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.billing-user-email {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.billing-user-revenue {
  text-align: right;
  font-weight: 600;
}

.billing-users-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-secondary);
}

.user-billing-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.user-billing-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .user-billing-grid {
    grid-template-columns: 1fr;
  }
}

.user-billing-card {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.user-billing-card h3 {
  font-size: var(--font-size-md);
  margin: 0;
  font-weight: 600;
}

.user-billing-card.skeleton {
  background: var(--gray-100);
  min-height: 200px;
}

.current-plan-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.current-plan-info {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.current-plan-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.current-plan-price {
  font-size: var(--font-size-xl);
  color: var(--primary);
  font-weight: 700;
}

.current-plan-period {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cancel-notice {
  color: var(--danger);
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

.no-subscription {
  text-align: center;
  color: var(--text-secondary);
}

.plan-change-section {
  gap: var(--spacing-xs);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  flex-direction: column;
  display: flex;
}

.plan-change-section label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan-select {
  border: 1px solid var(--border);
  background: var(--bg-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 8px 12px;
}

.card-header-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.btn-sm {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-xs);
  cursor: pointer;
  border: none;
  padding: 6px 12px;
}

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

.payment-methods-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.payment-method-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border: 1px solid var(--border);
  display: flex;
}

.payment-method-info {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.payment-method-brand {
  font-weight: 500;
}

.payment-method-exp {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.invoice-list {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.invoice-row {
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  display: grid;
}

.invoice-row:last-child {
  border-bottom: none;
}

.invoice-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.invoice-total {
  font-weight: 600;
}

.usage-stats-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.usage-stat {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.usage-stat-header {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  display: flex;
}

.usage-stat-label {
  font-size: var(--font-size-sm);
}

.usage-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.usage-stat-limit {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

.over-limit {
  color: var(--danger);
}

.usage-bar-container {
  background: var(--gray-200);
  width: 100%;
  height: 4px;
}

.usage-bar {
  background: var(--primary);
  height: 100%;
  width: var(--bar-width, 0%);
  transition: width .3s;
}

.usage-bar.over-limit {
  background: var(--danger);
}

.empty-state {
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-lg);
}

.subscription-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  margin-top: var(--spacing-sm);
  display: flex;
}

.account-status-card .account-status-content {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.account-status-card .status-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.account-status-card .status-row .status-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.account-status-card .status-row .suspend-reason {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-align: right;
  max-width: 200px;
}

.account-status-card .account-actions {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

.cancel-subscription-modal, .refund-modal, .suspend-modal {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.cancel-subscription-modal .expired-card-warning, .refund-modal .expired-card-warning, .suspend-modal .expired-card-warning {
  background: var(--warning-bg, #fef3c7);
  border: 1px solid var(--warning-border, #f59e0b);
  color: var(--warning-text, #92400e);
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.cancel-subscription-modal .expired-card-warning strong, .refund-modal .expired-card-warning strong, .suspend-modal .expired-card-warning strong {
  margin-bottom: 4px;
  display: block;
}

.cancel-subscription-modal .modal-description, .refund-modal .modal-description, .suspend-modal .modal-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.cancel-subscription-modal .cancel-options, .cancel-subscription-modal .refund-options, .refund-modal .cancel-options, .refund-modal .refund-options, .suspend-modal .cancel-options, .suspend-modal .refund-options {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.cancel-subscription-modal .cancel-option, .cancel-subscription-modal .refund-option, .refund-modal .cancel-option, .refund-modal .refund-option, .suspend-modal .cancel-option, .suspend-modal .refund-option {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .2s;
  display: flex;
}

.cancel-subscription-modal .cancel-option:hover, .cancel-subscription-modal .refund-option:hover, .refund-modal .cancel-option:hover, .refund-modal .refund-option:hover, .suspend-modal .cancel-option:hover, .suspend-modal .refund-option:hover {
  border-color: var(--primary);
}

.cancel-subscription-modal .cancel-option input[type="radio"], .cancel-subscription-modal .refund-option input[type="radio"], .refund-modal .cancel-option input[type="radio"], .refund-modal .refund-option input[type="radio"], .suspend-modal .cancel-option input[type="radio"], .suspend-modal .refund-option input[type="radio"] {
  margin: 0;
}

.cancel-subscription-modal .cancel-option .option-content, .cancel-subscription-modal .refund-option .option-content, .refund-modal .cancel-option .option-content, .refund-modal .refund-option .option-content, .suspend-modal .cancel-option .option-content, .suspend-modal .refund-option .option-content {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.cancel-subscription-modal .cancel-option .option-title, .cancel-subscription-modal .refund-option .option-title, .refund-modal .cancel-option .option-title, .refund-modal .refund-option .option-title, .suspend-modal .cancel-option .option-title, .suspend-modal .refund-option .option-title {
  font-weight: 500;
}

.cancel-subscription-modal .cancel-option .option-description, .cancel-subscription-modal .refund-option .option-description, .refund-modal .cancel-option .option-description, .refund-modal .refund-option .option-description, .suspend-modal .cancel-option .option-description, .suspend-modal .refund-option .option-description {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.cancel-subscription-modal .form-field, .refund-modal .form-field, .suspend-modal .form-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.cancel-subscription-modal .form-field label, .refund-modal .form-field label, .suspend-modal .form-field label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.cancel-subscription-modal .form-field textarea, .cancel-subscription-modal .form-field input, .cancel-subscription-modal .form-field select, .refund-modal .form-field textarea, .refund-modal .form-field input, .refund-modal .form-field select, .suspend-modal .form-field textarea, .suspend-modal .form-field input, .suspend-modal .form-field select {
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  resize: vertical;
  background: var(--background);
}

.cancel-subscription-modal .form-field textarea:focus, .cancel-subscription-modal .form-field input:focus, .cancel-subscription-modal .form-field select:focus, .refund-modal .form-field textarea:focus, .refund-modal .form-field input:focus, .refund-modal .form-field select:focus, .suspend-modal .form-field textarea:focus, .suspend-modal .form-field input:focus, .suspend-modal .form-field select:focus {
  border-color: var(--primary);
  outline: none;
}

.cancel-subscription-modal .form-field select, .refund-modal .form-field select, .suspend-modal .form-field select {
  cursor: pointer;
}

.cancel-subscription-modal .modal-actions, .refund-modal .modal-actions, .suspend-modal .modal-actions {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  display: flex;
}

.billing-page {
  min-height: 100vh;
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
}

.billing-page .page-container {
  max-width: 800px;
  margin: 0 auto;
}

.billing-page .billing-content {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.billing-page .loading-container {
  justify-content: center;
  align-items: center;
  min-height: 400px;
  display: flex;
}

.current-plan-info {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.plan-details {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.plan-details .plan-name {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  font-weight: 700;
}

.plan-details .plan-price {
  font-size: var(--font-size-lg);
  color: var(--primary);
  font-weight: 600;
}

.payment-method-info {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  display: flex;
}

.payment-method-info .card-brand {
  color: var(--text-primary);
  font-weight: 500;
}

.payment-method-info .card-expiry {
  color: var(--text-muted);
  margin-left: auto;
}

.renewal-info {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.invoice-cell {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.invoice-cell .invoice-number {
  font-weight: 500;
}

.invoice-cell .invoice-date {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.plan-selector .plan-change-info {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--bg-secondary);
  display: flex;
}

@media (max-width: 767px) {
  .plan-selector .plan-change-info {
    gap: var(--spacing-sm);
    flex-direction: column;
  }
}

.plan-selector .plan-change-note {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.plan-selector .plan-change-note strong {
  color: var(--text-primary);
}

.plan-selector .plan-change-note--upgrade svg {
  color: var(--success);
}

.plan-selector .plan-change-note--downgrade svg {
  color: var(--warning);
}

.plan-selector .plan-change-message {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  display: flex;
}

.plan-selector .plan-change-message--success {
  background: var(--success-light);
  color: var(--success-dark);
}

.plan-selector .plan-change-message--error {
  background: var(--error-light);
  color: var(--error);
}

.manage-subscription .manage-options {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.manage-subscription .manage-option {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.manage-subscription .manage-option:hover {
  border-color: var(--primary);
  background: var(--bg-primary);
}

.manage-subscription .manage-option.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.manage-subscription .option-content {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.manage-subscription .option-title {
  font-weight: 600;
}

.manage-subscription .option-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.manage-subscription .cancel-confirm {
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.manage-subscription .cancel-confirm p {
  margin-bottom: var(--spacing-md);
}

.manage-subscription .cancel-confirm .cancel-note {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.manage-subscription .cancel-confirm .cancel-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  display: flex;
}

.billing-address-content {
  padding: var(--spacing-md);
  color: var(--text-primary);
}

.billing-address-content p {
  margin: 0 0 var(--spacing-xs);
  line-height: 1.5;
}

.billing-address-content .tax-id {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.billing-address-content .no-address {
  color: var(--text-muted);
  font-style: italic;
}

.billing-address-form {
  padding: var(--spacing-md);
}

.billing-address-form .form-field {
  margin-bottom: var(--spacing-md);
}

.billing-address-form .form-field label {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  display: block;
}

.billing-address-form .form-field input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.billing-address-form .form-field input::placeholder {
  color: var(--text-muted);
}

.billing-address-form .form-field input:focus {
  border-color: var(--primary);
  outline: none;
}

.billing-address-form .form-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.billing-address-form .form-actions {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  display: flex;
}

.upgrade-split {
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  display: grid;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .upgrade-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
}

.upgrade-split-content {
  background: var(--bg-primary);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.upgrade-split-inner {
  width: 100%;
  max-width: 600px;
  padding: var(--spacing-lg) var(--spacing-lg);
}

.upgrade-sidebar {
  background-image: url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1974&q=80");
  background-position: center;
  background-size: cover;
  position: relative;
}

@media (max-width: 1024px) {
  .upgrade-sidebar {
    display: none;
  }
}

.upgrade-sidebar-overlay {
  background: linear-gradient(135deg, #dc2626e6 0%, #b91c1cf2 100%);
  justify-content: center;
  align-items: center;
  padding: 60px;
  display: flex;
  position: absolute;
  inset: 0;
}

.upgrade-sidebar-content {
  max-width: 400px;
  color: var(--white);
  text-align: center;
}

.upgrade-sidebar-content h2 {
  font-size: var(--font-size-2xl);
  margin: var(--spacing-lg) 0;
  font-weight: 700;
  line-height: 1.2;
}

.upgrade-sidebar-content p {
  font-size: var(--font-size-lg);
  opacity: .9;
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.upgrade-sidebar-badge {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #ffffff26;
  font-weight: 600;
  display: inline-flex;
}

.upgrade-sidebar-features {
  gap: var(--spacing-md);
  text-align: left;
  margin-bottom: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.upgrade-sidebar-feature {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  display: flex;
}

.upgrade-sidebar-feature svg {
  color: #ffffffe6;
}

.upgrade-sidebar-trust {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  opacity: .8;
  border-top: 1px solid #fff3;
  display: flex;
}

.upgrade-flow-loading, .upgrade-flow-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
  flex-direction: column;
  min-height: 300px;
  display: flex;
}

.upgrade-flow-loading h2, .upgrade-flow-error h2 {
  color: var(--text-primary);
  margin: 0;
}

.upgrade-flow-loading p, .upgrade-flow-error p {
  color: var(--text-secondary);
}

.upgrade-back-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  background: none;
  border: none;
  padding: 0;
  display: flex;
}

.upgrade-back-btn:hover {
  color: var(--primary);
}

.upgrade-flow-header {
  margin-bottom: var(--spacing-sm);
}

.upgrade-flow-header h1 {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.upgrade-flow-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
}

.upgrade-billing-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-elevated);
  width: fit-content;
  padding: 4px;
  display: flex;
}

.upgrade-billing-toggle button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
  display: flex;
}

.upgrade-billing-toggle button.active {
  background: var(--primary);
  color: #fff;
}

.upgrade-billing-toggle .discount-badge {
  background: var(--success);
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
}

.upgrade-comparison {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  display: grid;
}

.upgrade-arrow {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.upgrade-cta {
  margin-top: var(--spacing-sm);
}

.upgrade-cta .btn-lg {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
}

.upgrade-slider {
  width: 200%;
  height: 100%;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.upgrade-slider.slide-left {
  transform: translateX(-50%);
}

.upgrade-slide {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  display: flex;
  overflow-y: auto;
}

.upgrade-plan-card {
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.upgrade-plan-card.current {
  opacity: .8;
  background: var(--bg-secondary);
}

.upgrade-plan-card.target {
  border-color: var(--primary);
  box-shadow: 0 4px 24px rgba(var(--primary-rgb), .15);
}

.upgrade-plan-label {
  background: var(--bg-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
}

.target .upgrade-plan-label {
  background: var(--primary);
  color: #fff;
}

.upgrade-plan-name {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
  font-weight: 700;
}

.upgrade-plan-price {
  margin-bottom: 2px;
}

.upgrade-plan-currency {
  font-size: var(--font-size-sm);
  vertical-align: top;
  font-weight: 600;
}

.upgrade-plan-amount {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.upgrade-plan-period {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.upgrade-plan-features {
  margin: var(--spacing-sm) 0 0;
  text-align: left;
  padding: 0;
  list-style: none;
}

.upgrade-plan-features li {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  padding: 2px 0;
  display: flex;
}

.upgrade-plan-features li svg {
  color: var(--success);
  flex-shrink: 0;
}

.upgrade-form-container {
  width: 100%;
  max-width: 420px;
  padding: var(--spacing-lg) var(--spacing-lg);
}

.upgrade-form-header {
  margin-bottom: var(--spacing-md);
}

.upgrade-form-header h2 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.upgrade-form-header p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.upgrade-form-summary {
  background: var(--bg-secondary);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.upgrade-form-summary .summary-row {
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.upgrade-form-summary .summary-cycle {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.upgrade-form-summary .summary-total {
  border-top: 1px solid var(--border);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  font-weight: 600;
}

.upgrade-form-summary .summary-price {
  font-size: var(--font-size-xl);
  color: var(--primary);
}

.upgrade-form-summary .summary-savings {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--font-size-sm);
  display: flex;
}

.upgrade-form-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--error-bg);
  color: var(--error);
  font-size: var(--font-size-sm);
  display: flex;
}

.upgrade-card-form {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.upgrade-card-form .form-group {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.upgrade-card-form .form-group label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.upgrade-card-form .form-group input {
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.upgrade-card-form .form-group input:focus {
  border-color: var(--primary);
  outline: none;
}

.upgrade-card-form .form-row {
  gap: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.upgrade-card-form .btn-block {
  width: 100%;
  margin-top: var(--spacing-sm);
}

.upgrade-form-security {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
}

.upgrade-form-security svg {
  color: var(--success);
}

.upgrade-confirm-card {
  background: var(--bg-secondary);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.confirm-plan {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.confirm-plan-icon {
  background: var(--primary);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.confirm-plan-info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.confirm-plan-name {
  color: var(--text-primary);
  font-weight: 600;
}

.confirm-plan-cycle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.confirm-plan-price {
  text-align: right;
}

.confirm-price-amount {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  font-weight: 700;
}

.confirm-price-period {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.confirm-divider {
  background: var(--border);
  height: 1px;
  margin: var(--spacing-md) 0;
}

.confirm-payment {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  display: flex;
}

.confirm-payment-info {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  display: flex;
}

.confirm-card-brand {
  color: var(--text-primary);
  text-transform: capitalize;
  font-weight: 500;
}

.confirm-card-number {
  color: var(--text-muted);
}

.confirm-card-expiry {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.confirm-total {
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.confirm-total-amount {
  font-size: var(--font-size-2xl);
  color: var(--primary);
}

.confirm-savings {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--font-size-sm);
  display: flex;
}

.upgrade-confirm-note {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.upgrade-plan-billed {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0 0 var(--spacing-md);
}

.upgrade-plan-features {
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upgrade-plan-features li {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  display: flex;
}

.upgrade-plan-features li svg {
  color: var(--success);
}

.upgrade-benefits {
  background: var(--bg-elevated);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.upgrade-benefits h3 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.upgrade-benefits ul {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.upgrade-benefits li {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  display: flex;
}

.upgrade-benefits li svg {
  color: var(--primary);
}

.upgrade-cta {
  text-align: center;
}

.upgrade-cta .btn-lg {
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-lg);
}

.upgrade-guarantee {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.upgrade-payment {
  max-width: 800px;
  margin: 0 auto;
}

.upgrade-payment-grid {
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  grid-template-columns: 1fr 320px;
  display: grid;
}

.upgrade-payment-form {
  background: var(--bg-elevated);
  padding: var(--spacing-lg);
}

.upgrade-payment-form h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--spacing-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.upgrade-payment-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--error-bg);
  color: var(--error);
  font-size: var(--font-size-sm);
  display: flex;
}

.upgrade-payment-security {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
}

.upgrade-payment-security svg {
  color: var(--success);
}

.upgrade-payment-summary {
  background: var(--bg-elevated);
  padding: var(--spacing-lg);
  height: fit-content;
}

.upgrade-payment-summary h3 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-md);
  color: var(--text-primary);
  font-weight: 600;
}

.upgrade-summary-plan {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.upgrade-summary-name {
  color: var(--text-primary);
  font-weight: 600;
}

.upgrade-summary-cycle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.upgrade-summary-total {
  padding: var(--spacing-md) 0;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.upgrade-summary-price {
  font-size: var(--font-size-xl);
  color: var(--primary);
}

.upgrade-summary-savings {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-md);
  display: flex;
}

.upgrade-summary-savings svg {
  flex-shrink: 0;
}

.weekly-summary {
  background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--white);
}

.weekly-summary__header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.weekly-summary__title {
  font-size: var(--font-size-base);
  margin: 0;
  font-weight: 700;
}

.weekly-summary__period {
  font-size: var(--font-size-xs);
  opacity: .8;
  border-radius: var(--public-radius-full);
  background: #ffffff26;
  padding: 3px 10px;
}

.weekly-summary__metrics {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .weekly-summary__metrics {
    gap: var(--spacing-xs);
    grid-template-columns: 1fr;
  }
}

.weekly-summary__metric {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--public-radius-sm);
  background: #ffffff1a;
  display: flex;
}

.weekly-summary__icon {
  border-radius: var(--public-radius-sm);
  background: #fff3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.weekly-summary__data {
  flex: 1;
}

.weekly-summary__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  display: block;
}

.weekly-summary__label {
  font-size: var(--font-size-xs);
  opacity: .8;
  display: block;
}

.weekly-summary__change {
  font-size: var(--font-size-sm);
  border-radius: var(--public-radius-sm);
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-weight: 600;
  display: flex;
}

.weekly-summary__change.positive {
  color: #86efac;
  background: #22c55e33;
}

.weekly-summary__change.negative {
  color: #fca5a5;
  background: #ef444433;
}

.top-content__list {
  padding: var(--spacing-sm);
}

.top-content__item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.top-content__item:last-child {
  border-bottom: none;
}

.top-content__rank {
  background: var(--gray-100);
  width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  border-radius: var(--public-radius-sm);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.top-content__info {
  flex: 1;
  min-width: 0;
}

.top-content__url {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.top-content__url:hover {
  color: var(--primary);
}

.top-content__url svg {
  opacity: .5;
}

.top-content__source {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: block;
}

.top-content__clicks {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 600;
}

.top-content__empty, .top-content__loading {
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.top-content__empty svg, .top-content__loading svg {
  margin-bottom: var(--spacing-xs);
  opacity: .4;
  width: 24px;
  height: 24px;
}

.superfans__list {
  padding: var(--spacing-sm);
}

.superfans__item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.superfans__item:last-child {
  border-bottom: none;
}

.superfans__avatar {
  background: var(--primary);
  width: 36px;
  height: 36px;
  color: var(--white);
  font-size: var(--font-size-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.superfans__info {
  flex: 1;
  min-width: 0;
}

.superfans__name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
  display: block;
}

.superfans__email {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.superfans__stats {
  text-align: right;
}

.superfans__rate {
  font-size: var(--font-size-base);
  color: var(--success);
  font-weight: 700;
  display: block;
}

.superfans__opens {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: block;
}

.superfans__empty, .superfans__loading {
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.superfans__empty svg, .superfans__loading svg {
  margin-bottom: var(--spacing-xs);
  opacity: .4;
  width: 24px;
  height: 24px;
}

.next-send__list {
  padding: var(--spacing-sm);
}

.next-send__item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background: var(--gray-50);
  text-decoration: none;
  transition: background .2s;
  display: flex;
}

.next-send__item:hover {
  background: var(--gray-100);
}

.next-send__item:last-child {
  margin-bottom: 0;
}

.next-send__icon {
  background: var(--white);
  width: 32px;
  height: 32px;
  color: var(--primary);
  border: 1px solid var(--gray-200);
  justify-content: center;
  align-items: center;
  display: flex;
}

.next-send__info {
  flex: 1;
  min-width: 0;
}

.next-send__name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
  display: block;
}

.next-send__meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: block;
}

.next-send__badge {
  font-size: var(--font-size-xs);
  border-radius: var(--public-radius-sm);
  padding: 4px 8px;
  font-weight: 600;
}

.next-send__badge--active {
  color: var(--success);
  background: #10b9811a;
}

.next-send__badge--scheduled {
  color: var(--primary);
  background: #6366f11a;
}

.next-send__badge--draft {
  background: var(--gray-100);
  color: var(--text-secondary);
}

.next-send__badge--paused {
  color: var(--warning, #f59e0b);
  background: #f59e0b1a;
}

.next-send__empty {
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.next-send__empty svg {
  margin-bottom: var(--spacing-xs);
  opacity: .4;
  width: 24px;
  height: 24px;
}

.next-send__empty span {
  margin-bottom: var(--spacing-sm);
}

.next-send__create {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: var(--public-radius-sm);
  padding: 6px 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.next-send__create:hover {
  background: var(--primary-hover);
}

.next-send__loading {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.dashboard-charts-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr;
  }
}

.bar-chart {
  align-items: flex-end;
  gap: var(--spacing-sm);
  height: 180px;
  padding-top: var(--spacing-sm);
  display: flex;
}

.bar-container {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  display: flex;
}

.bar {
  background: var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  width: 100%;
  max-width: 40px;
  min-height: 4px;
  position: relative;
}

.bar-value {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  white-space: nowrap;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.bar-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: var(--spacing-xs);
}

.bar-group .bar-group-bars {
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  height: 100%;
  display: flex;
}

.bar-group-bars .bar {
  flex: 0 0 12px;
  max-width: 12px;
}

.bar-sent {
  background: var(--primary);
}

.bar-opened {
  background: #22c55e;
}

.bar-clicked {
  background: #f59e0b;
}

.campaign-legend {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  display: flex;
}

.legend-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.legend-dot {
  border-radius: var(--radius-full);
  width: 8px;
  height: 8px;
  display: inline-block;
}

.legend-dot.sent {
  background: var(--primary);
}

.legend-dot.opened {
  background: #22c55e;
}

.legend-dot.clicked {
  background: #f59e0b;
}

.activity-dot {
  border-radius: var(--radius-full);
  background: var(--dot-color, var(--gray-400));
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  display: inline-block;
}

.dashboard-site-filter {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.dashboard-site-filter__select {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  max-width: 200px;
  padding: 6px 10px;
}

.dashboard-site-filter__select:focus {
  border-color: var(--primary);
  outline: none;
}

.dashboard-site-badge {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 2px 8px;
  display: inline-flex;
}

.dashboard-site-compare {
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  margin-left: auto;
  padding: 4px 10px;
  text-decoration: none;
  display: inline-flex;
}

.dashboard-site-compare:hover {
  background: var(--gray-50, var(--gray-100));
  border-color: var(--primary);
}

.dealership-dashboard {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.dealership-pipeline {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  overflow-x: auto;
}

.dealership-pipeline::-webkit-scrollbar {
  display: none;
}

.dealership-pipeline__stage {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  min-width: 80px;
  display: flex;
}

.dealership-pipeline__dot {
  border-radius: var(--radius-full);
  background: var(--stage-color);
  width: 10px;
  height: 10px;
}

.dealership-pipeline__count {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.dealership-pipeline__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.dealership-pipeline__bar {
  border-radius: var(--radius-full);
  background: var(--gray-200);
  width: 100%;
  height: 6px;
}

.dealership-pipeline__bar-fill {
  border-radius: var(--radius-full);
  background: var(--stage-color);
  height: 100%;
  transition: width .3s;
}

.dealership-actions__title {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.dealership-actions__grid {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.dealership-actions__card {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  display: flex;
}

.dealership-actions__card:hover {
  background: var(--gray-50);
  box-shadow: var(--shadow-sm);
}

.dealership-actions__label {
  font-size: var(--font-size-sm);
  flex: 1;
  font-weight: 500;
}

.dealership-actions__icon {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--action-color) 10%, transparent);
  width: 36px;
  height: 36px;
  color: var(--action-color);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dealership-appointments__item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.dealership-appointments__item:last-child {
  border-bottom: none;
}

.dealership-appointments__type-icon {
  color: var(--type-color);
  flex-shrink: 0;
}

.dealership-appointments__badge {
  padding: 1px var(--spacing-xs);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  display: inline-block;
}

.dealership-appointments__badge--confirmed {
  background: var(--green-100, #dcfce7);
  color: var(--green-700, #15803d);
}

.dealership-appointments__badge--pending {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.dealership-appointments__badge--cancelled {
  background: var(--red-100, #fee2e2);
  color: var(--red-700, #b91c1c);
}

.dealership-appointments__badge--cancelled .dealership-appointments__client {
  text-decoration: line-through;
}

.dealership-inventory {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.dealership-inventory__item {
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  flex-direction: column;
  display: flex;
}

.dealership-inventory__count {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.dealership-inventory__label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pipeline-stages {
  gap: var(--spacing-md);
  display: flex;
  overflow-x: auto;
}

.pipeline-stage {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  min-width: 80px;
  display: flex;
}

.pipeline-stage--clickable {
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}

.pipeline-stage--clickable:hover {
  background: var(--gray-50);
  box-shadow: none;
}

.pipeline-stage--clickable:hover .pipeline-stage-count {
  color: var(--primary);
}

.pipeline-stage-header {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.pipeline-stage-count {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.pipeline-stage-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pipeline-bar-track {
  border-radius: var(--radius-full);
  background: var(--gray-200);
  width: 100%;
  height: 6px;
}

.pipeline-bar-fill {
  border-radius: var(--radius-full);
  background: var(--dot-color);
  height: 100%;
  width: var(--bar-width, 0%);
  transition: width .3s;
}

.comm-stats__table {
  width: 100%;
}

.comm-stats__table th {
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-200);
  font-weight: 500;
}

.comm-stats__table td {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
}

.comm-stats__table tr:last-child td {
  border-bottom: none;
}

.comm-stats__type, .comm-stats__rate-cell {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.comm-stats__bar {
  border-radius: var(--radius-full);
  background: var(--gray-200);
  width: 60px;
  height: 4px;
}

.comm-stats__bar-fill {
  border-radius: var(--radius-full);
  background: var(--comm-color);
  height: 100%;
}

.comm-stats__row--clickable {
  cursor: pointer;
  transition: background .15s;
}

.comm-stats__row--clickable:hover {
  background: var(--gray-50);
}

.comm-stats__row--clickable:hover .comm-stats__type span {
  color: var(--primary);
}

.recent-clients__list {
  flex-direction: column;
  display: flex;
}

.recent-clients__row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.recent-clients__row:last-child {
  border-bottom: none;
}

.recent-clients__row--clickable {
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
}

.recent-clients__row--clickable:hover {
  background: var(--gray-50);
}

.recent-clients__row--clickable:hover .recent-clients__name {
  color: var(--primary);
}

.recent-clients__avatar {
  border-radius: var(--radius-full);
  background: var(--gray-200);
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.recent-clients__info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.recent-clients__name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.recent-clients__email {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.recent-clients__vehicle {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.recent-clients__date {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  white-space: nowrap;
}

.recent-clients__empty, .recent-clients__loading {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-400);
}

.recent-clients__skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: 40px;
  margin-bottom: var(--spacing-xs);
}

.monthly-goals-list {
  flex-direction: column;
  display: flex;
}

.monthly-goal-row {
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
  flex-direction: column;
  display: flex;
}

.monthly-goal-row:last-child {
  border-bottom: none;
}

.monthly-goal-row--loading {
  opacity: .5;
}

.monthly-goal-row--clickable {
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
}

.monthly-goal-row--clickable:hover {
  background: var(--gray-50);
}

.monthly-goal-row--clickable:hover .monthly-goal-row__label {
  color: var(--primary);
}

.monthly-goal-row__header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.monthly-goal-row__label {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
}

.monthly-goal-row__stat {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.monthly-goal-row__pct {
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.monthly-goal-row__bar {
  border-radius: var(--radius-full);
  background: var(--gray-200);
  width: 100%;
  height: 8px;
  overflow: hidden;
}

.monthly-goal-row__fill {
  border-radius: var(--radius-full);
  background: var(--goal-color);
  height: 100%;
  width: var(--goal-pct, 0%);
  transition: width .4s;
}

.monthly-goal-row__footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.monthly-goal-row__reached {
  font-size: var(--font-size-xs);
  color: var(--green-600, #16a34a);
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: flex;
}

.upcoming-appointments__list {
  flex-direction: column;
  display: flex;
}

.upcoming-appointments__row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.upcoming-appointments__row:last-child {
  border-bottom: none;
}

.upcoming-appointments__row--clickable {
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
}

.upcoming-appointments__row--clickable:hover {
  background: var(--gray-50);
}

.upcoming-appointments__row--clickable:hover .upcoming-appointments__client {
  color: var(--primary);
}

.upcoming-appointments__icon {
  color: var(--appt-color, var(--gray-500));
  flex-shrink: 0;
}

.upcoming-appointments__info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.upcoming-appointments__client {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.upcoming-appointments__vehicle {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.upcoming-appointments__time {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

.upcoming-appointments__empty, .upcoming-appointments__loading {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-400);
}

.upcoming-appointments__skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: 40px;
  margin-bottom: var(--spacing-xs);
}

.badge--default, .badge--danger, .badge--warning, .badge--success, .badge--vip, .badge--info {
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
}

.badge--info {
  background: var(--blue-100, #dbeafe);
  color: var(--blue-700, #1d4ed8);
}

.badge--vip {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.badge--success {
  background: var(--green-100, #dcfce7);
  color: var(--green-700, #15803d);
}

.badge--warning {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}

.badge--danger {
  background: var(--red-100, #fee2e2);
  color: var(--red-700, #b91c1c);
}

.dashboard-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.dashboard-card-header, .dashboard-card__header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.dashboard-card-title, .dashboard-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.dashboard-card__subtitle {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.dashboard-card-link {
  font-size: var(--font-size-xs);
  color: var(--primary);
  text-decoration: none;
}

.dashboard-card-content {
  margin-top: var(--spacing-sm);
}

.pending-followups__list {
  flex-direction: column;
  display: flex;
}

.pending-followups__row {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--gray-100);
  color: inherit;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.pending-followups__row:last-child {
  border-bottom: none;
}

.pending-followups__row:hover {
  background: var(--gray-50);
}

.pending-followups__row:hover .pending-followups__name {
  color: var(--primary);
}

.pending-followups__row--overdue .pending-followups__days {
  color: var(--red-600, #dc2626);
  font-weight: 600;
}

.pending-followups__info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.pending-followups__name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.pending-followups__meta {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.pending-followups__days {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

.pending-followups__empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-400);
  align-items: center;
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.pending-followups__loading {
  padding: var(--spacing-sm);
}

.pending-followups__skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: 40px;
  margin-bottom: var(--spacing-xs);
}

.settings-page {
  background: none;
  max-width: 1200px;
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 0;
}

.settings-page__header {
  margin-bottom: var(--spacing-sm);
}

.settings-page__header h1 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.settings-page__header p {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.settings-page__layout {
  gap: var(--spacing-sm);
  grid-template-columns: 220px 1fr;
  align-items: start;
  display: grid;
}

.settings-content-area {
  min-width: 0;
}

.settings-content-header {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.settings-content-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.settings-content-desc {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.settings-content-body {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: none;
  background: #fffffff7;
}

.settings-compact-form {
  gap: var(--spacing-md-lg);
  flex-direction: column;
  display: flex;
}

.settings-compact-grid {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.settings-compact-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.settings-compact-loading {
  justify-content: center;
  align-items: center;
  min-height: 300px;
  display: flex;
}

.settings-compact-spinner {
  color: var(--primary);
  animation: 1s linear infinite spin;
}

@media (max-width: 768px) {
  .settings-page__layout {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
  }

  .settings-content-body {
    padding: var(--spacing-md);
  }
}

.settings-sidebar {
  gap: var(--spacing-sm);
  width: 220px;
  min-width: 220px;
  padding: var(--spacing-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: none;
  flex-direction: column;
  height: fit-content;
  display: flex;
  position: sticky;
  top: 80px;
}

.settings-sidebar__biz-card {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(var(--primary-rgb, 99, 102, 241), .06);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), .12);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s;
  display: flex;
}

.settings-sidebar__biz-card:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), .1);
}

.settings-sidebar__biz-icon {
  border-radius: var(--radius-md);
  background: var(--primary);
  width: 34px;
  height: 34px;
  color: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.settings-sidebar__biz-info {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.settings-sidebar__biz-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  overflow: hidden;
}

.settings-sidebar__biz-action {
  font-size: var(--font-size-xs);
  color: var(--primary);
  font-weight: 500;
}

.settings-sidebar__section {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.settings-sidebar__section-label {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-top: var(--spacing-xs);
  font-size: 10px;
  font-weight: 600;
}

.settings-sidebar__items {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.settings-sidebar__item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: 7px var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.settings-sidebar__item svg {
  flex-shrink: 0;
}

.settings-sidebar__item:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}

.settings-sidebar__item--active, .settings-sidebar__item--active:hover {
  background: var(--primary);
  color: var(--white);
}

@media (max-width: 768px) {
  .settings-sidebar {
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
    padding: var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    flex-direction: row;
    position: static;
    overflow-x: auto;
  }

  .settings-sidebar__biz-card {
    display: none;
  }

  .settings-sidebar__section {
    flex-direction: row;
    flex-shrink: 0;
    gap: 4px;
  }

  .settings-sidebar__section-label {
    display: none;
  }

  .settings-sidebar__items {
    flex-direction: row;
    gap: 4px;
  }

  .settings-sidebar__item {
    white-space: nowrap;
    padding: 6px 10px;
  }
}

.settings-compact-field {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.settings-compact-field label {
  font-size: var(--font-size-md);
  color: var(--gray-700);
  font-weight: 500;
}

.settings-compact-field-full {
  grid-column: 1 / -1;
}

.settings-compact-input {
  border: 1px solid var(--gray-200);
  width: 100%;
  font-size: var(--font-size-base);
  color: var(--gray-900);
  background: var(--white);
  padding: 10px 12px;
  transition: all .15s;
}

.settings-compact-input::placeholder {
  color: var(--gray-400);
}

.settings-compact-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #6366f11a;
}

.settings-compact-input.disabled {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

.settings-compact-password {
  align-items: center;
  display: flex;
  position: relative;
}

.settings-compact-password .settings-compact-input {
  padding-right: 44px;
}

.settings-compact-password-toggle {
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  transition: color .15s;
  position: absolute;
  right: 8px;
}

.settings-compact-password-toggle:hover {
  color: var(--gray-600);
}

.settings-compact-divider {
  align-items: center;
  gap: var(--spacing-md-sm);
  margin: 8px 0;
  display: flex;
}

.settings-compact-divider:before, .settings-compact-divider:after {
  content: "";
  background: var(--gray-200);
  flex: 1;
  height: 1px;
}

.settings-compact-divider span {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-400);
  font-weight: 500;
}

.settings-compact-message {
  font-size: var(--font-size-md);
  padding: 10px 14px;
  font-weight: 500;
}

.settings-compact-message.error {
  color: #dc2626;
  background: #ef44441a;
}

.settings-compact-message.success {
  color: #16a34a;
  background: #22c55e1a;
}

.settings-compact-actions {
  justify-content: flex-end;
  padding-top: 4px;
  display: flex;
}

.settings-compact-btn {
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .2s;
}

.settings-compact-btn.primary {
  background: var(--primary);
  color: var(--white);
}

.settings-compact-btn.primary:hover:not(:disabled) {
  background: var(--primary-dark);
}

.settings-compact-btn.primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.settings-compact-btn.secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.settings-compact-btn.secondary:hover:not(:disabled) {
  background: var(--gray-200);
}

.settings-compact-btn.secondary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.settings-compact-btn.danger {
  color: #dc2626;
  background: none;
  border: 1px solid #fca5a5;
}

.settings-compact-btn.danger:hover {
  background: #ef44441a;
  border-color: #dc2626;
}

.settings-modal-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.settings-modal-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.settings-modal-field label {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 500;
}

.settings-modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  display: flex;
}

.email-change-trigger {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

.email-change-form {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.email-change-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.email-change-header h4 {
  font-size: var(--font-size-md);
  color: var(--gray-700);
  margin: 0;
  font-weight: 600;
}

.email-change-info {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-md);
}

.billing-tab {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.billing-tab-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.billing-tab-header h3 {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
}

.billing-tab-content {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.billing-tab-loading {
  justify-content: center;
  align-items: center;
  min-height: 200px;
  display: flex;
}

.settings-compact-security {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.settings-compact-section-title {
  color: var(--gray-900);
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.settings-compact-section-title.danger {
  color: #dc2626;
}

.settings-compact-danger {
  border-top: 1px solid var(--gray-200);
  padding-top: 20px;
}

.settings-compact-danger-item {
  background: #ef444408;
  border: 1px solid #ef44441a;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.settings-compact-danger-item strong {
  font-size: var(--font-size-base);
  color: var(--gray-900);
  margin-bottom: 2px;
  font-weight: 500;
  display: block;
}

.settings-compact-danger-item p {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin: 0;
}

.settings-section {
  background: var(--white);
  border: 1px solid var(--border-light);
  padding: 16px;
}

.settings-section-header {
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: 16px;
  display: flex;
}

.settings-section-header h2 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
}

.settings-section-header p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.settings-section-icon {
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.settings-form {
  gap: var(--spacing-md-lg);
  flex-direction: column;
  display: flex;
}

.settings-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .settings-row {
    grid-template-columns: 1fr;
  }
}

.settings-field {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.settings-field label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.settings-input {
  border: 1px solid var(--border-light);
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}

.settings-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.settings-input-disabled {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.settings-hint {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
}

.settings-subsection {
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  padding-top: 16px;
}

.settings-subsection h3 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.settings-subsection-hint {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
}

.settings-password-wrapper {
  position: relative;
}

.settings-password-wrapper .settings-input {
  padding-right: 48px;
}

.settings-password-toggle {
  cursor: pointer;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 4px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.settings-password-toggle:hover {
  color: var(--text-secondary);
}

.settings-content, .settings-section-body {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.settings-message {
  font-size: var(--font-size-base);
  padding: 12px 16px;
}

.settings-error {
  background: var(--error-light);
  color: var(--error-dark);
}

.settings-success {
  background: var(--success-light);
  color: var(--success-dark);
}

.settings-button {
  color: var(--white);
  background: var(--primary);
  cursor: pointer;
  border: none;
  align-self: flex-start;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  transition: background .2s;
}

.settings-button:hover {
  background: var(--primary-hover);
}

.settings-button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.settings-danger-zone {
  border-color: var(--error-light);
}

.settings-icon-danger {
  background: var(--error-light);
  color: var(--error);
}

.settings-danger-actions {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.settings-danger-item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--bg-secondary);
  padding: 16px;
  display: flex;
}

.settings-danger-item h3 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.settings-danger-item p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .settings-danger-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.settings-button-danger-outline {
  font-size: var(--font-size-base);
  color: var(--error);
  border: 1px solid var(--error);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  padding: 10px 20px;
  font-weight: 600;
  transition: all .2s;
}

.settings-button-danger-outline:hover {
  background: var(--error);
  color: var(--white);
}

.settings-team {
  padding: 0;
}

.settings-team-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.settings-team-title {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 600;
  display: flex;
}

.settings-team-title svg {
  color: var(--primary);
}

.settings-team-plan {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  color: #4f46e5;
  font-size: var(--font-size-md);
  background: linear-gradient(135deg, #6366f11a 0%, #4f46e51a 100%);
  padding: 6px 14px;
  font-weight: 500;
  display: flex;
}

.settings-team-plan svg {
  width: 14px;
  height: 14px;
}

.settings-team-seats {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--gray-50);
  margin-bottom: 16px;
  padding: 10px 12px;
  display: flex;
}

.settings-team-seats-count {
  font-size: var(--font-size-6xl);
  color: var(--gray-900);
  font-weight: 700;
}

.settings-team-seats-count span {
  color: var(--gray-400);
  font-size: 20px;
  font-weight: 400;
}

.settings-team-seats-bar {
  flex: 1;
}

.settings-team-seats-label {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin-bottom: 8px;
}

.settings-team-seats-progress {
  background: var(--gray-200);
  height: 8px;
  overflow: hidden;
}

.settings-team-seats-fill {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  height: 100%;
  transition: width .3s;
}

.settings-team-members {
  margin-bottom: 16px;
}

.settings-team-section-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.settings-team-section-title {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.settings-team-member {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
  margin-bottom: 8px;
  padding: 14px 16px;
  display: flex;
}

.settings-team-avatar {
  width: 32px;
  height: 32px;
  color: var(--white);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.settings-team-member-info {
  flex: 1;
  min-width: 0;
}

.settings-team-member-name {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 500;
  display: flex;
}

.settings-team-badge {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  padding: 2px 8px;
  font-weight: 600;
}

.settings-team-badge.owner {
  color: #b45309;
  background: linear-gradient(135deg, #f59e0b33 0%, #d9770633 100%);
}

.settings-team-badge.admin {
  color: #4f46e5;
  background: #6366f11a;
}

.settings-team-badge.editor {
  color: #059669;
  background: #10b9811a;
}

.settings-team-badge.member {
  background: var(--gray-100);
  color: var(--text-tertiary);
}

.settings-team-member-email {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.settings-team-role-select {
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 8px;
}

.settings-team-role-select:hover {
  border-color: var(--border);
}

.settings-team-role-select:focus {
  border-color: var(--primary);
  outline: none;
}

.settings-team-member-actions {
  gap: var(--spacing-xs);
  display: flex;
}

.settings-team-action-btn {
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 10px;
  transition: all .15s;
}

.settings-team-action-btn:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.settings-team-action-btn.danger:hover {
  color: #dc2626;
  background: #ef44441a;
}

.settings-team-invite-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.settings-team-invite-btn:hover {
  background: var(--primary-dark);
}

.settings-team-invites {
  border-top: 1px solid var(--gray-200);
  margin-top: 24px;
  padding-top: 24px;
}

.settings-team-invite-item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  background: #6366f10d;
  border: 1px dashed #6366f14d;
  margin-bottom: 8px;
  padding: 12px 16px;
  display: flex;
}

.settings-team-invite-icon {
  color: #6366f1;
  background: #6366f11a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.settings-team-invite-info {
  flex: 1;
}

.settings-team-invite-email {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  font-weight: 500;
}

.settings-team-invite-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.settings-team-empty {
  text-align: center;
  color: var(--gray-500);
  padding: 10px;
}

.settings-team-empty svg {
  color: var(--gray-300);
  margin-bottom: 12px;
}

.settings-team-empty p {
  font-size: var(--font-size-base);
}

.invite-modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.invite-modal {
  background: var(--white);
  width: 100%;
  max-width: 440px;
  box-shadow: none;
  overflow: hidden;
}

.invite-modal-header {
  border-bottom: 1px solid var(--gray-200);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.invite-modal-title {
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 600;
}

.invite-modal-close {
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
}

.invite-modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.invite-modal-body {
  padding: 16px;
}

.invite-modal-field {
  margin-bottom: 10px;
}

.invite-modal-field label {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
}

.invite-modal-field input, .invite-modal-field select {
  border: 1px solid var(--gray-300);
  width: 100%;
  color: var(--gray-900);
  padding: 12px 14px;
  font-size: 16px;
  transition: all .15s;
}

.invite-modal-field input:focus, .invite-modal-field select:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px #6366f11a;
}

.invite-modal-team-info {
  gap: var(--spacing-xs);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  flex-direction: column;
  padding: 12px 14px;
  display: flex;
}

.invite-modal-team-info span:first-child {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 500;
}

.invite-modal-team-hint {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.invite-modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-md-sm);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 16px 24px;
  display: flex;
}

.invite-modal-btn {
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .15s;
}

.invite-modal-btn.secondary {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.invite-modal-btn.secondary:hover {
  background: var(--gray-50);
}

.invite-modal-btn.primary {
  color: var(--white);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.invite-modal-btn.primary:hover:not(:disabled) {
  box-shadow: none;
}

.invite-modal-btn.primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.settings-projects {
  padding: 0;
}

.settings-projects-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  display: flex;
}

.settings-projects-title {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  color: var(--gray-900);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
}

.settings-projects-title svg {
  color: var(--primary);
}

.settings-projects-subtitle {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin: 4px 0 0;
}

.settings-projects-explainer {
  background: linear-gradient(#f6821f0d, #f6821f05);
  border: 1px solid #f6821f2e;
  border-radius: 14px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 16px 18px;
  display: flex;
}

.settings-projects-explainer h3 {
  color: var(--gray-900);
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.settings-projects-explainer p {
  color: var(--gray-600);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.settings-projects-explainer-copy {
  max-width: 420px;
}

.settings-projects-explainer-points {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.settings-projects-point {
  background: #ffffffb3;
  border: 1px solid #e2e8f0d9;
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  display: flex;
}

.settings-projects-point strong {
  color: var(--gray-900);
  font-size: 13px;
}

.settings-projects-point span {
  color: var(--gray-600);
  font-size: 13px;
  line-height: 1.45;
}

.settings-projects-explainer-link {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
}

.settings-projects-explainer-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.settings-projects-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.settings-projects-grid.archived {
  margin-top: 16px;
}

.settings-project-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  padding: 10px;
  transition: all .2s;
}

.settings-project-card:hover {
  border-color: var(--gray-300);
  box-shadow: none;
}

.settings-project-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.settings-project-card.default {
  border-color: var(--primary);
  background: linear-gradient(#f6821f08, #0000);
}

.settings-project-card.archived {
  opacity: .7;
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.settings-project-card.archived:hover {
  opacity: .85;
  border-color: var(--gray-300);
}

.settings-project-card.archived .settings-project-logo {
  filter: grayscale(50%);
}

.settings-project-header {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  margin-bottom: 12px;
  display: flex;
}

.settings-project-logo {
  width: 36px;
  height: 36px;
  color: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  display: flex;
}

.settings-project-logo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.settings-project-info {
  flex: 1;
  min-width: 0;
}

.settings-project-name {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-900);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.settings-project-default-badge {
  color: var(--primary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  background: linear-gradient(135deg, #f6821f26 0%, #dc641426 100%);
  padding: 2px 8px;
  font-weight: 600;
}

.settings-project-meta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.settings-project-slug {
  font-size: var(--font-size-md);
  color: var(--gray-400);
}

.settings-project-type {
  font-size: var(--font-size-xs);
  color: var(--primary);
  background: #6633991a;
  padding: 2px 8px;
  font-weight: 500;
}

.settings-project-count {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 8px;
  font-weight: 500;
}

.settings-project-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0 0 10px;
  line-height: 1.5;
}

.settings-project-helper {
  color: var(--gray-500);
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .settings-projects-header {
    gap: var(--spacing-md);
    flex-direction: column;
  }

  .settings-projects-explainer {
    flex-direction: column;
  }

  .settings-projects-explainer-points {
    grid-template-columns: 1fr;
    width: 100%;
  }

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

.settings-project-actions {
  gap: var(--spacing-sm);
  border-top: 1px solid var(--gray-100);
  padding-top: 12px;
  display: flex;
}

.settings-project-action {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  background: var(--gray-50);
  font-size: var(--font-size-md);
  color: var(--gray-600);
  cursor: pointer;
  border: none;
  padding: 8px 12px;
  transition: all .15s;
  display: flex;
}

.settings-project-action:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.settings-project-action.danger:hover {
  color: #dc2626;
  background: #ef44441a;
}

.settings-project-action.restore {
  color: #16a34a;
  background: #22c55e1a;
}

.settings-project-action.restore:hover {
  color: #15803d;
  background: #22c55e33;
}

.settings-archived-projects {
  border-top: 1px solid var(--gray-200);
  margin-top: 32px;
  padding-top: 24px;
}

.settings-archived-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  font-size: var(--font-size-base);
  color: var(--gray-600);
  cursor: pointer;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.settings-archived-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.settings-project-archived-badge {
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-weight: 500;
  display: flex;
}

.settings-error-message {
  text-align: center;
  color: var(--red-600);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  display: flex;
}

.settings-error-message p {
  margin-bottom: 16px;
}

.settings-retry-btn {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-size: var(--font-size-base);
  cursor: pointer;
  padding: 8px 16px;
  font-weight: 500;
  transition: all .2s;
}

.settings-retry-btn:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .settings-projects-header {
    gap: var(--spacing-md);
    flex-direction: column;
  }

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

.smtp-form {
  gap: var(--spacing-md-lg);
  flex-direction: column;
  display: flex;
}

.form-group {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.form-group-lg {
  grid-column: span 1;
}

.form-group-sm {
  max-width: 120px;
}

.form-label {
  font-size: var(--font-size-md);
  color: var(--gray-700);
  font-weight: 500;
}

.form-hint {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 4px;
}

.form-checkbox {
  align-items: flex-start;
  gap: var(--spacing-md-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  padding: 12px;
  transition: background-color .15s;
  display: flex;
}

.form-checkbox:hover {
  background-color: var(--gray-50);
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--black);
  cursor: pointer;
  margin-top: 2px;
}

.form-checkbox .checkbox-label {
  font-weight: 500;
}

.form-checkbox-content {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.form-checkbox-label {
  color: var(--text-primary);
  font-weight: 500;
}

.form-checkbox-description {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.form-section-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 600;
}

.checkbox-group {
  gap: var(--spacing-xs);
  border: 1px solid var(--border-light);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.checkbox-group .form-checkbox {
  margin: 0;
}

.checkbox-group .form-checkbox:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.form-actions {
  gap: var(--spacing-md-sm);
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 12px;
  display: flex;
}

.settings-notification-list {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.settings-notification-row {
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.settings-notification-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.settings-notification-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.settings-notification-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.settings-notification-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.settings-color-field {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.settings-color-input {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  width: 40px;
  height: 40px;
  padding: 2px;
}

.settings-color-value {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-family: monospace;
}

.settings-test-link {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
  display: inline-flex;
}

.settings-test-link:hover:not(:disabled) {
  text-decoration: underline;
}

.settings-test-link:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-group-sm {
    max-width: none;
  }

  .test-email-form {
    flex-direction: column;
  }

  .settings-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

.send-test-content {
  background: var(--white);
  width: 100%;
  max-width: 450px;
  max-height: 90vh;
  box-shadow: none;
  animation: fadeInScale var(--duration-normal) var(--ease-out-expo);
  overflow: hidden;
}

.send-test-body {
  padding: 16px;
}

.send-test-desc {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0 0 20px;
}

.send-test-form {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.send-test-label {
  font-size: var(--font-size-md);
  color: var(--gray-700);
  font-weight: 500;
}

.send-test-input {
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-300);
  outline: none;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}

.send-test-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px #0000001a;
}

.send-test-btn {
  background: var(--black);
  color: var(--white);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  margin-top: 8px;
  padding: 12px 20px;
  font-weight: 500;
  transition: background .15s;
}

.send-test-btn:hover:not(:disabled) {
  background: var(--gray-800);
}

.send-test-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.send-test-result {
  font-size: var(--font-size-base);
  align-items: center;
  gap: var(--spacing-md-sm);
  border-left: 4px solid;
  margin-top: 16px;
  padding: 14px 18px;
  font-weight: 500;
  display: flex;
}

.send-test-result.success {
  color: #065f46;
  box-shadow: none;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
}

.send-test-result.success:before {
  content: "✓";
  width: 20px;
  height: 20px;
  color: var(--white);
  font-size: var(--font-size-sm);
  background: #10b981;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.send-test-result.error {
  color: #991b1b;
  box-shadow: none;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #ef4444;
}

.send-test-result.error:before {
  content: "✕";
  width: 20px;
  height: 20px;
  color: var(--white);
  font-size: var(--font-size-sm);
  background: #ef4444;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.confirmed-page {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
  display: flex;
}

.confirmed-card {
  background: var(--white);
  text-align: center;
  width: 100%;
  max-width: 440px;
  box-shadow: none;
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  padding: 48px;
}

.confirmed-icon {
  margin-bottom: 16px;
}

.confirmed-icon.success {
  color: #16a34a;
}

.confirmed-icon.error {
  color: #dc2626;
}

.confirmed-icon.info {
  color: #0284c7;
}

.confirmed-title {
  font-size: var(--font-size-3xl);
  letter-spacing: -.5px;
  margin: 0 0 12px;
  font-weight: 700;
}

.confirmed-message {
  color: var(--gray-600);
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.5;
}

.confirmed-sub {
  font-size: var(--font-size-base);
  color: var(--gray-400);
  margin: 0;
}

.confirmed-loading {
  color: var(--gray-500);
  padding: 40px;
  font-size: 18px;
}

.login-page {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
  display: flex;
}

.login-card {
  background: var(--white);
  width: 100%;
  max-width: 400px;
  box-shadow: none;
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  padding: 48px;
}

.login-title {
  font-size: var(--font-size-6xl);
  letter-spacing: -.5px;
  margin: 0 0 8px;
  font-weight: 700;
}

.login-subtitle {
  color: var(--gray-500);
  margin: 0;
  font-size: 18px;
}

.login-input {
  border: 2px solid var(--gray-200);
  background: var(--white);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
  font-size: 16px;
}

.login-input:focus {
  border-color: var(--black);
  outline: none;
  box-shadow: 0 0 0 4px #0000000d;
}

.login-button {
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  margin-top: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
}

.login-button:hover:not(:disabled) {
  background: var(--gray-800);
  transform: translateY(-1px);
}

.login-error {
  align-items: center;
  gap: var(--spacing-sm-md);
  background: var(--error-light);
  color: var(--error);
  border: 1px solid var(--error);
  font-size: var(--font-size-md);
  margin-bottom: 16px;
  padding: 14px 16px;
  display: flex;
}

.login-error svg {
  flex-shrink: 0;
}

.login-warning {
  align-items: flex-start;
  gap: var(--spacing-sm-md);
  background: var(--warning-light);
  color: var(--warning-dark);
  border: 1px solid var(--warning);
  font-size: var(--font-size-md);
  margin-bottom: 16px;
  padding: 14px 16px;
  line-height: 1.4;
  display: flex;
}

.login-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.login-loading {
  text-align: center;
  color: var(--gray-500);
  padding: 40px;
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-light) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: 1.5s ease-in-out infinite skeleton-shimmer;
}

.skeleton-text {
  gap: var(--spacing-sm);
  flex-direction: column;
  height: 16px;
  display: flex;
}

.skeleton-line {
  display: block;
}

.skeleton-title {
  height: 32px;
}

.skeleton-subtitle {
  height: 20px;
}

.skeleton-input {
  width: 100%;
  height: 40px;
}

.skeleton-button {
  height: 40px;
}

.skeleton-label {
  width: 60px;
  height: 16px;
}

.skeleton-back-link {
  width: 150px;
  height: 16px;
}

.skeleton-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  gap: var(--spacing-md);
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.skeleton-card-header {
  align-items: center;
  gap: var(--spacing-md-sm);
  display: flex;
}

.skeleton-card-title {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.skeleton-card-footer {
  gap: var(--spacing-md-sm);
  margin-top: 8px;
  display: flex;
}

.skeleton-stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  align-items: center;
  gap: var(--spacing-md);
  padding: 10px;
  display: flex;
}

.skeleton-stat-content {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.skeleton-stats-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: 16px;
  display: grid;
}

.skeleton-cards-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.skeleton-header {
  gap: var(--spacing-sm);
  flex-direction: column;
  margin-bottom: 16px;
  display: flex;
}

.skeleton-section {
  margin-top: 32px;
}

.skeleton-section-title {
  margin-bottom: 16px;
}

.skeleton-list {
  background: var(--border-light);
  flex-direction: column;
  gap: 1px;
  display: flex;
  overflow: hidden;
}

.skeleton-list-item {
  background: var(--bg-primary);
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.skeleton-list-content {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.skeleton-dashboard {
  padding: 16px;
}

.skeleton-nav {
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
}

.skeleton-nav-links {
  gap: var(--spacing-md);
  display: flex;
}

.max-w-form {
  max-width: 600px;
}

.mb-xs {
  margin-bottom: 4px;
}

.mb-sm {
  margin-bottom: 8px;
}

.mb-md, .mb-lg {
  margin-bottom: 16px;
}

.mb-xl {
  margin-bottom: 10px;
}

.ml-sm {
  margin-left: 8px;
}

.mr-sm {
  margin-right: 6px;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

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

.w-full {
  width: 100%;
}

.w-40 {
  width: 40px;
}

.w-60 {
  width: 60px;
}

.w-80 {
  width: 80px;
}

.w-100 {
  width: 100px;
}

.w-120 {
  width: 120px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-250 {
  width: 250px;
}

.text-muted {
  color: var(--gray-500);
}

.text-sm {
  font-size: var(--font-size-base);
}

.text-xs {
  font-size: var(--font-size-sm);
}

.text-mono {
  font-family: monospace;
  font-size: var(--font-size-md);
}

.text-italic {
  font-style: italic;
}

.text-error {
  color: #dc2626;
}

.text-center {
  text-align: center;
}

.text-underline {
  text-decoration: underline;
}

.empty-state {
  color: var(--gray-500);
}

.empty-state-sm {
  color: var(--gray-500);
  font-size: var(--font-size-base);
}

.public-nav {
  z-index: var(--public-nav-z-index);
  transition: all var(--duration-slow);
  background: var(--public-nav-gradient);
  padding: 16px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.public-nav-solid {
  background: var(--public-glass-bg);
  -webkit-backdrop-filter: var(--public-glass-blur);
  border-radius: var(--public-radius-lg);
  box-shadow: var(--shadow-sm);
}

.public-nav-container {
  max-width: var(--public-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .public-nav-container {
    padding: 0 16px;
  }
}

.public-nav-container {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.public-nav-logo {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm-md);
  font-family: var(--font-heading), serif;
  color: var(--white);
  transition: opacity var(--duration-normal);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.public-nav-logo:hover {
  opacity: .8;
}

.public-nav-solid .public-nav-logo {
  color: var(--text-primary);
}

.public-nav-links {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.public-nav-auth {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  display: flex;
}

@media (max-width: 767px) {
  .public-nav-links, .public-nav-auth {
    display: none;
  }

  .public-nav {
    border-radius: 0;
  }

  .public-nav.public-nav-solid {
    background: var(--white);
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
  }

  .public-nav.public-nav-solid .public-nav-logo, .public-nav.public-nav-solid .public-nav-mobile-toggle {
    color: var(--text-primary);
  }

  .public-nav.public-nav-solid .public-nav-mobile-toggle:hover {
    background: var(--public-hover-dark);
  }
}

.public-nav-link {
  color: var(--public-text-on-dark);
  transition: all var(--duration-normal);
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.public-nav-link:hover {
  background: var(--public-hover-light);
  color: var(--white);
}

.public-nav-link.active {
  background: var(--public-active-light);
  color: var(--white);
}

.public-nav-solid .public-nav-link {
  color: var(--text-primary);
}

.public-nav-solid .public-nav-link:hover {
  background: var(--public-hover-dark);
}

.public-nav-solid .public-nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
}

.public-nav-dropdown {
  position: relative;
}

.public-nav-dropdown-trigger {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  display: flex;
}

.public-nav-dropdown-trigger svg {
  transition: transform var(--duration-normal);
}

.public-nav-dropdown-menu {
  background: var(--white);
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  animation: dropdownFadeIn var(--duration-normal) ease;
  margin-top: 8px;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.public-nav-dropdown-item {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: all var(--duration-normal);
  padding: 12px 16px;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

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

.public-nav-dropdown-item.active {
  background: var(--primary-light);
  color: var(--primary);
}

.public-nav-login {
  color: var(--public-text-on-dark);
  transition: all var(--duration-normal);
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.public-nav-login:hover {
  background: var(--public-hover-light);
  color: var(--white);
}

.public-nav-solid .public-nav-login {
  color: var(--text-primary);
}

.public-nav-solid .public-nav-login:hover {
  background: var(--public-hover-dark);
}

.public-nav-register {
  color: var(--primary);
  background: var(--white);
  transition: all var(--duration-normal);
  box-shadow: var(--shadow-md);
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.public-nav-register:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.public-nav-solid .public-nav-register {
  background: var(--primary);
  color: var(--white);
}

.public-nav-solid .public-nav-register:hover {
  background: var(--primary-hover);
}

.public-nav-mobile-section {
  flex-direction: column;
  margin-bottom: 16px;
  display: flex;
}

.public-nav-mobile-section-title {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  padding: 8px 0;
  font-weight: 600;
  display: block;
}

.public-nav-mobile-toggle {
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-normal);
  background: none;
  border: none;
  padding: 8px;
  display: none;
}

.public-nav-mobile-toggle:hover {
  background: var(--public-hover-light);
}

.public-nav-solid .public-nav-mobile-toggle {
  color: var(--text-primary);
}

.public-nav-solid .public-nav-mobile-toggle:hover {
  background: var(--public-hover-dark);
}

.public-nav-mobile {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-top: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  max-height: calc(100vh - 70px);
  transition: all var(--duration-slow);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
  transform: translateY(-10px);
}

.public-nav-mobile.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.public-nav-mobile-links {
  gap: var(--spacing-xs);
  flex-direction: column;
  padding: 16px 24px;
  display: flex;
}

.public-nav-mobile-link {
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: background var(--duration-normal);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

.public-nav-mobile-link:hover, .public-nav-mobile-link.active {
  background: var(--bg-secondary);
}

.public-nav-mobile-link.active {
  color: var(--primary);
}

.public-nav-mobile-divider {
  background: var(--border-light);
  height: 1px;
  margin: 8px 0;
}

.public-nav-mobile-cta {
  color: var(--white);
  background: var(--primary);
  text-align: center;
  border-radius: var(--radius-md);
  transition: background var(--duration-normal);
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: block;
}

.public-nav-mobile-cta:hover {
  background: var(--primary-hover);
}

.public-nav-mobile-user {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: 8px 16px;
  font-weight: 600;
  display: block;
}

.public-nav-mobile-account-btn {
  color: var(--primary);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

.public-nav-mobile-logout {
  width: 100%;
  color: var(--text-secondary);
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  display: block;
}

.public-nav-mobile-logout:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.public-nav-mobile-lang {
  padding: 4px 0;
}

@media (max-width: 767px) {
  .public-nav-mobile-toggle {
    display: flex;
  }

  .public-nav-mobile {
    display: block;
  }
}

.logo-cinematic {
  font-family: var(--font-heading), serif;
  letter-spacing: .08em;
  border: none;
  padding: .12em .35em;
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-flex;
}

.logo-letter {
  display: inline-block;
}

@keyframes logo-border-fade {
  0% {
    border-color: #0000;
  }

  30% {
    border-color: var(--primary);
  }

  60% {
    border-color: #dc262666;
  }

  100% {
    border-color: #fff3;
  }
}

@media (max-width: 767px) {
  .logo-cinematic {
    letter-spacing: normal;
    border: none;
    padding: 0;
    font-size: 1.1rem;
  }

  .logo-letter {
    opacity: 1 !important;
    transform: none !important;
  }
}

.nav-item {
  position: relative;
}

.dropdown-trigger {
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  color: var(--public-text-on-dark);
  font-family: inherit;
  font-size: var(--font-size-base);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  display: inline-flex;
}

.dropdown-trigger svg {
  transition: transform var(--duration-normal);
}

.dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mega-dropdown {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  width: 100vw;
  box-shadow: none;
  z-index: 1001;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
}

.mega-dropdown-inner {
  grid-template-columns: minmax(480px, 50%) 1fr;
  height: 45vh;
  min-height: 280px;
  max-height: 45vh;
  display: grid;
}

.mega-list {
  padding: 1.5rem 2rem;
  padding-left: calc((100vw - var(--public-container-max)) / 2 + 2rem);
  background: var(--gray-50);
  border-right: 1px solid var(--border-light);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.mega-list::-webkit-scrollbar {
  width: 4px;
}

.mega-list::-webkit-scrollbar-track {
  background: none;
}

.mega-list::-webkit-scrollbar-thumb {
  background: #dc26264d;
  border-radius: 4px;
}

.mega-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.mega-list-item {
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: background var(--duration-normal), border-color var(--duration-normal), transform var(--duration-normal);
  border: 1px solid #0000;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem .95rem;
  text-decoration: none;
  display: grid;
}

.mega-list-item:hover, .mega-list-item.active {
  background: var(--white);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.mega-item-number {
  color: var(--primary);
  letter-spacing: .1em;
  font-size: .75rem;
  font-weight: 700;
}

.mega-item-title {
  color: var(--text-primary);
  margin: 0;
  font-size: .96rem;
  font-weight: 600;
}

.mega-item-description {
  color: var(--text-tertiary);
  margin: .18rem 0 0;
  font-size: .76rem;
}

.mega-item-meta {
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--public-radius-full);
  color: var(--primary);
  background: #dc26260f;
  border: 1px solid #dc262633;
  padding: .22rem .45rem;
  font-size: .7rem;
  display: inline-flex;
}

.mega-item-arrow {
  color: var(--primary);
  font-weight: 700;
}

.mega-preview {
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.mega-preview-pane {
  opacity: 0;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: opacity .42s, transform .9s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
  transform: scale(1.04);
}

.mega-preview-pane:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(#ffffff0d 0%, #0000 50%, #0000001a 100%);
  position: absolute;
  inset: 0;
}

.mega-preview-pane.active {
  opacity: 1;
  transform: scale(1);
}

.mega-preview-number {
  font-size: 5.2rem;
  font-weight: 700;
  font-family: var(--public-font-heading);
  color: #00000014;
  z-index: 2;
  position: absolute;
  bottom: 1rem;
  right: 1.2rem;
}

@media (max-width: 1100px) {
  .mega-dropdown {
    border-radius: var(--radius-md);
    width: 100%;
    box-shadow: none;
    pointer-events: none;
    border: 1px solid #ffffff26;
    max-height: 0;
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
    position: static;
    top: auto;
    overflow: hidden;
  }

  .nav-item-has-dropdown.is-open .mega-dropdown {
    pointer-events: auto;
    max-height: 65vh;
  }

  .mega-dropdown-inner {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    max-height: 62vh;
  }

  .mega-preview {
    display: none;
  }

  .mega-list {
    border-radius: var(--radius-md);
    border-right: none;
    padding: .7rem;
  }

  .mega-list-item {
    grid-template-columns: 2rem 1fr auto;
    padding: .72rem .68rem;
  }
}

@media (max-width: 767px) {
  .mega-item-number, .mega-item-description, .mega-item-meta {
    display: none;
  }

  .mega-list-item {
    grid-template-columns: 1fr auto;
  }
}

.public-nav-user {
  font-size: var(--font-size-base);
  color: inherit;
  opacity: .8;
}

.public-nav-account-btn {
  background: var(--primary);
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--white);
  transition: all var(--duration-normal);
  box-sizing: border-box;
  border: none;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.public-nav-account-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.public-nav-logout {
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--white);
  cursor: pointer;
  transition: all var(--duration-normal);
  opacity: .92;
  text-shadow: 0 1px 2px #0f172a59;
  box-sizing: border-box;
  background: none;
  border: 1px solid #ffffff8c;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.public-nav-logout:hover {
  opacity: 1;
  background: #ffffff24;
  border-color: #fffc;
}

.public-nav-loading {
  font-size: var(--font-size-base);
  opacity: .6;
}

.public-nav-mobile-user {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  padding: var(--spacing-md-sm) 0;
}

.public-nav-mobile-account-btn {
  width: 100%;
  padding: var(--spacing-md-sm);
  background: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  text-align: center;
  margin-top: var(--spacing-sm);
  border: none;
  text-decoration: none;
  display: block;
}

.public-nav-mobile-account-btn:hover {
  background: var(--primary-dark);
}

.public-nav-mobile-logout {
  width: 100%;
  padding: var(--spacing-md-sm);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  cursor: pointer;
  margin-top: var(--spacing-sm);
  border: none;
}

.public-nav-mobile-logout:hover {
  background: var(--gray-200);
}

.public-layout {
  background: var(--gray-50);
  min-height: 100vh;
  font-family: var(--public-font-body);
  overflow-x: hidden;
}

.landing-page {
  scroll-behavior: smooth;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

.landing-page h1, .landing-page h2, .landing-page h3 {
  font-family: var(--public-font-heading);
}

html:has(.landing-page) {
  scroll-behavior: smooth;
}

.landing-container {
  max-width: var(--public-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .landing-container {
    padding: 0 16px;
  }
}

.landing-loading {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.landing-hero {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 120px 24px 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .landing-hero {
    flex-direction: column;
  }
}

.landing-hero-bg {
  background-image: url("https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80");
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .landing-hero-bg {
    background-attachment: scroll;
  }
}

.landing-hero-center {
  text-align: center;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.landing-hero-overlay {
  background: var(--public-hero-overlay);
  z-index: 1;
  position: absolute;
  inset: 0;
}

.landing-hero-overlay:before {
  content: "";
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(#000 0%, #0000 100%);
  mask-image: linear-gradient(#000 0%, #0000 100%);
}

.landing-hero-content {
  text-align: center;
  z-index: 1;
  max-width: 700px;
  position: relative;
}

.landing-hero-badge {
  background: var(--public-overlay-light);
  border: 1px solid var(--public-border-on-dark);
  font-size: var(--font-size-base);
  color: var(--public-text-on-dark);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  margin-bottom: 12px;
  padding: 8px 16px;
  font-weight: 500;
  display: inline-block;
}

.landing-hero-title {
  color: var(--white);
  margin-bottom: 10px;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
}

@media (max-width: 767px) {
  .landing-hero-title {
    font-size: var(--font-size-5xl);
  }
}

.landing-hero-highlight {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  -webkit-text-fill-color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.landing-hero-subtitle {
  color: var(--public-text-on-dark-muted);
  margin-bottom: 40px;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .landing-hero-subtitle {
    margin-bottom: 14px;
    font-size: 18px;
  }
}

.landing-hero-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  display: grid;
}

@media (max-width: 1024px) {
  .landing-hero-grid {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.landing-hero-setup {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.landing-hero-setup .landing-hero-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.landing-hero-setup .landing-hero-title {
  color: var(--white);
}

.landing-hero-setup .landing-hero-subtitle {
  color: var(--public-text-on-dark);
}

.landing-hero-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 12px;
  display: flex;
}

@media (max-width: 1024px) {
  .landing-hero-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .landing-hero-actions {
    gap: var(--spacing-md-sm);
    flex-direction: column;
  }
}

.landing-hero-trust {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  display: flex;
}

.landing-hero-trust svg {
  color: var(--success);
}

@media (max-width: 1024px) {
  .landing-hero-trust {
    justify-content: center;
  }

  .landing-hero-visual {
    order: -1;
  }
}

@media (max-width: 767px) {
  .landing-hero {
    min-height: auto;
    padding: 100px 16px 60px;
  }
}

.landing-hero-widget {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  align-items: center;
  gap: var(--spacing-md-sm);
  box-shadow: none;
  z-index: 3;
  background: #fffffff2;
  padding: 10px 12px;
  display: flex;
  position: absolute;
}

[data-mode="dark"] .landing-hero-widget {
  background: #1e293bf2;
}

.landing-hero-widgets {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.landing-hero-widgets .landing-hero-widget {
  pointer-events: auto;
}

.landing-hero-widget-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  width: 44px;
  height: 44px;
  color: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.landing-hero-widget-content {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.landing-hero-widget-value {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.landing-hero-widget-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.landing-hero-widget-1 {
  animation: 6s ease-in-out infinite floatWidget1;
  top: 30%;
  left: 8%;
}

.landing-hero-widget-2 {
  animation: 7s ease-in-out infinite floatWidget2;
  top: 30%;
  right: 8%;
}

.landing-hero-widget-3 {
  animation: 5s ease-in-out infinite floatWidget3;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes floatWidget1 {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatWidget2 {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatWidget3 {
  0%, 100% {
    transform: translateX(-50%)translateY(0);
  }

  50% {
    transform: translateX(-50%)translateY(-12px);
  }
}

.landing-hero-decoration {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.landing-hero-shape {
  opacity: .1;
  position: absolute;
}

.landing-hero-shape-1 {
  background: var(--primary);
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.landing-hero-shape-2 {
  background: var(--secondary);
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
}

.landing-hero-shape-3 {
  background: var(--primary);
  opacity: .05;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 10%;
}

.landing-hero-visual {
  justify-content: center;
  display: flex;
}

.landing-hero-image-wrapper {
  width: 100%;
  max-width: 500px;
  position: relative;
}

.landing-hero-image {
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-xl);
}

.landing-hero-floating-card {
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--white);
  box-shadow: none;
  padding: 10px 12px;
  animation: 3s ease-in-out infinite float;
  display: flex;
  position: absolute;
}

.landing-hero-floating-card-1 {
  animation-delay: 0s;
  top: 20%;
  left: -30px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-hero-floating-card-1 {
    padding: 12px 16px;
    left: -10px;
  }
}

.landing-hero-floating-card-2 {
  animation-delay: 1.5s;
  bottom: 20%;
  right: -30px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-hero-floating-card-2 {
    padding: 12px 16px;
    right: -10px;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.landing-hero-floating-icon {
  background: var(--primary-light);
  width: 48px;
  height: 48px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-hero-floating-icon {
    width: 40px;
    height: 40px;
  }
}

.landing-hero-floating-content {
  flex-direction: column;
  display: flex;
}

.landing-hero-floating-value {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-hero-floating-value {
    font-size: 20px;
  }
}

.landing-hero-floating-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-hero-floating-label {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 1024px) {
  .landing-hero-widgets {
    gap: var(--spacing-md);
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    width: 100%;
    max-width: 520px;
    margin: 32px auto 0;
    display: grid;
    position: static;
  }

  .landing-hero-widget {
    justify-content: center;
    width: 100%;
    animation: none;
    position: static;
    transform: none;
  }

  .landing-hero-shape-1 {
    width: 200px;
    height: 200px;
    top: -50px;
    right: -50px;
  }

  .landing-hero-shape-2 {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 767px) {
  .landing-hero-widgets {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-top: 24px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .landing-hero-widget-1 {
    top: 25%;
    left: 2%;
  }

  .landing-hero-widget-2 {
    top: 25%;
    right: 2%;
  }

  .landing-hero-widget-3 {
    bottom: 5%;
  }
}

.landing-form {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.landing-form-group {
  gap: var(--spacing-md-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  padding: 6px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
}

.landing-form-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.landing-input {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 14px 16px;
  font-size: 18px;
}

.landing-input::placeholder {
  color: var(--text-tertiary);
}

.landing-error {
  color: var(--error);
  font-size: var(--font-size-base);
  text-align: left;
  margin-top: 12px;
}

.landing-form-hint {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  margin-top: 16px;
}

.landing-form-error {
  color: var(--error);
  font-size: var(--font-size-base);
  margin: 0;
}

.landing-spinner {
  animation: 1s linear infinite spin;
}

.landing-spinner-large {
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.landing-spinner-large svg {
  animation: 1s linear infinite spin;
}

.landing-contact-form-wrapper {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 40px;
}

.landing-contact-form {
  gap: var(--spacing-md-lg);
  flex-direction: column;
  display: flex;
}

.landing-contact-form-group {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.landing-contact-form-group label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.landing-contact-form-group input {
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  background: var(--bg-primary);
  padding: 14px 16px;
  font-size: 16px;
  transition: all .2s;
}

.landing-contact-form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.landing-contact-form-group input::placeholder {
  color: var(--text-tertiary);
}

.landing-contact-success {
  text-align: center;
  padding: 40px 20px;
}

.landing-contact-success h3 {
  color: var(--text-primary);
  margin: 20px 0 8px;
  font-size: 24px;
  font-weight: 600;
}

.landing-contact-success p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-form-group {
    gap: var(--spacing-sm);
    flex-direction: column;
    padding: 8px;
  }

  .landing-input {
    text-align: center;
    padding: 14px;
  }

  .landing-contact-form-wrapper {
    padding: 12px;
  }
}

.landing-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-button {
  background: var(--primary);
  color: var(--white);
}

.landing-button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.landing-button {
  min-width: 130px;
  padding: 14px 28px;
  font-size: 18px;
}

.landing-button:active:not(:disabled) {
  transform: translateY(0);
}

.landing-button-loading {
  justify-content: center;
  align-items: center;
  display: flex;
}

.landing-setup-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-setup-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-setup-button {
  background: var(--primary);
  color: var(--white);
}

.landing-setup-button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.landing-setup-button {
  padding: var(--public-btn-padding-lg);
  box-shadow: 0 4px 20px rgba(var(--primary), .4);
  padding: 10px 36px;
  font-size: 20px;
  text-decoration: none;
}

.landing-setup-button:hover {
  box-shadow: 0 6px 24px rgba(var(--primary), .5);
}

.landing-setup-button svg {
  flex-shrink: 0;
}

.landing-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.landing-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.landing-btn-secondary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-btn-secondary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-btn-secondary {
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  background: none;
}

.landing-btn-secondary:hover:not(:disabled) {
  border-color: var(--black);
  color: var(--black);
}

.landing-btn-white {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.landing-btn-white:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.landing-btn-white {
  background: var(--white);
  color: var(--gray-900);
}

.landing-btn-white:hover:not(:disabled) {
  background: var(--gray-100);
}

.landing-btn-outline {
  color: var(--white);
  background: none;
  border: 2px solid #ffffff80;
}

.landing-btn-outline:hover {
  border-color: var(--white);
  background: #ffffff1a;
}

.landing-btn-lg {
  padding: var(--public-btn-padding-lg);
  font-size: 16px;
}

.landing-btn-sm {
  padding: var(--public-btn-padding-sm);
  font-size: var(--font-size-sm);
}

.landing-btn-loading {
  justify-content: center;
  align-items: center;
  display: flex;
}

.landing-btn-disabled {
  background: var(--gray-200);
  color: var(--gray-500);
  cursor: default;
  pointer-events: none;
  border: 1px solid var(--gray-300);
}

.landing-btn-disabled:hover {
  box-shadow: none;
  transform: none;
}

@media (max-width: 767px) {
  .landing-button {
    justify-content: center;
    width: 100%;
  }
}

.landing-section-header {
  text-align: center;
  margin-bottom: 64px;
}

@media (max-width: 767px) {
  .landing-section-header {
    margin-bottom: 14px;
  }
}

.landing-section-badge {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--primary-light);
  border-radius: var(--public-radius-full);
  color: var(--primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
  padding: 8px 16px;
  font-weight: 600;
  display: inline-flex;
}

.landing-section-title {
  font-size: var(--font-size-7xl);
  color: var(--gray-900);
  letter-spacing: -.5px;
  margin: 0 0 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .landing-section-title {
    font-size: var(--font-size-4xl);
  }
}

.landing-section-subtitle {
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}

.landing-stats {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: 60px 0;
}

.landing-stats-grid {
  gap: var(--spacing-md);
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .landing-stats-grid {
    gap: var(--spacing-md);
    grid-template-columns: repeat(2, 1fr);
  }
}

.landing-stat {
  padding: 12px;
}

.landing-stat-value {
  font-size: var(--font-size-8xl);
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 800;
  line-height: 1;
  display: block;
}

@media (max-width: 767px) {
  .landing-stat-value {
    font-size: var(--font-size-7xl);
  }
}

.landing-stat-label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 500;
}

.landing-stats-bar {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 48px 0;
}

.landing-how-it-works {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.landing-steps {
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-sm);
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}

@media (max-width: 767px) {
  .landing-steps {
    gap: var(--spacing-md);
    flex-direction: column;
  }
}

.landing-step {
  text-align: center;
  flex: 1;
  max-width: 280px;
  padding: 12px;
}

.landing-step-number {
  background: var(--primary);
  width: 64px;
  height: 64px;
  color: var(--white);
  font-size: var(--font-size-5xl);
  box-shadow: var(--shadow-lg);
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  font-weight: 700;
  display: flex;
}

.landing-step-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}

.landing-step-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.landing-step-connector {
  background: var(--border-default);
  flex-shrink: 0;
  width: 60px;
  height: 2px;
  margin-top: 56px;
}

@media (max-width: 767px) {
  .landing-step-connector {
    display: none;
  }
}

.landing-process {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.landing-process-steps {
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

@media (max-width: 767px) {
  .landing-process-steps {
    flex-direction: column;
    align-items: center;
  }
}

.landing-process-step {
  text-align: center;
  flex: 1;
  max-width: 300px;
  padding: 12px;
}

.landing-process-step-number {
  background: var(--primary);
  width: 72px;
  height: 72px;
  color: var(--white);
  font-size: var(--font-size-6xl);
  box-shadow: var(--shadow-lg);
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
  font-weight: 700;
  display: flex;
}

.landing-process-step-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}

.landing-process-step-desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.landing-process-connector {
  background: var(--border-default);
  flex-shrink: 0;
  width: 80px;
  height: 2px;
  margin-top: 60px;
}

@media (max-width: 767px) {
  .landing-process-connector {
    display: none;
  }
}

.landing-features {
  background: var(--bg-secondary);
  padding: 100px 0;
}

.landing-features-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  display: grid;
}

.landing-features-list {
  flex-direction: column;
  gap: 80px;
  display: flex;
}

.landing-feature-row {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  display: grid;
}

.landing-feature-row.reverse .landing-feature-content {
  order: 2;
}

.landing-feature-row.reverse .landing-feature-image {
  order: 1;
}

.landing-feature-content {
  max-width: 500px;
}

.landing-feature-image {
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.landing-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.landing-feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-lg);
  padding: 32px;
  transition: transform .2s, box-shadow .2s;
}

.landing-feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.landing-feature-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-md);
  width: 48px;
  height: 48px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.landing-feature-title {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.landing-feature-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-features {
    padding: 60px 0;
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-features-list {
    gap: 48px;
  }

  .landing-feature-row {
    gap: var(--spacing-sm);
    grid-template-columns: 1fr;
  }

  .landing-feature-row.reverse .landing-feature-content {
    order: 1;
  }

  .landing-feature-row.reverse .landing-feature-image {
    order: 2;
  }

  .landing-feature-content {
    text-align: center;
    max-width: 100%;
  }

  .landing-feature-icon {
    margin: 0 auto 16px;
  }
}

@media (max-width: 767px) {
  .landing-features {
    padding: 48px 0;
  }

  .landing-features-grid {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
  }

  .landing-features-list {
    gap: 32px;
  }

  .landing-feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .landing-feature-card {
    padding: 10px;
  }

  .landing-feature-title {
    font-size: 17px;
  }
}

.landing-services {
  background: var(--bg-primary);
  padding: 100px 0;
}

.landing-services-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.landing-services-grid > * {
  height: 100%;
}

.landing-service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-lg);
  flex-direction: column;
  height: 100%;
  padding: 32px;
  transition: all .2s;
  display: flex;
}

.landing-service-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  transform: translateY(-4px);
}

.landing-service-icon {
  background: var(--primary-light);
  width: 56px;
  height: 56px;
  color: var(--primary);
  border-radius: var(--public-radius-md);
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.landing-service-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}

.landing-service-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  flex: 1;
  margin: 0;
  line-height: 1.6;
}

.landing-setup-actions {
  text-align: center;
  margin-bottom: 48px;
}

.landing-setup-hint {
  font-size: var(--font-size-base);
  color: #ffffffb3;
  margin-top: 16px;
}

.landing-setup-features {
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.landing-setup-feature {
  align-items: center;
  gap: var(--spacing-sm);
  color: #ffffffe6;
  font-size: var(--font-size-base);
  font-weight: 500;
  display: flex;
}

.landing-setup-feature svg {
  color: var(--success);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .landing-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .landing-services-grid {
    grid-template-columns: 1fr;
  }
}

.landing-use-cases {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.landing-use-cases-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-use-cases-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .landing-use-cases-grid {
    grid-template-columns: 1fr;
  }
}

.landing-use-case {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.landing-use-case:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.landing-use-case {
  text-align: center;
  padding: 40px 32px;
}

.landing-use-case-icon {
  font-size: var(--font-size-8xl);
  margin-bottom: 10px;
  display: block;
}

.landing-use-case-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}

.landing-use-case-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.landing-hero-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
  padding: 12px;
  overflow: hidden;
}

.landing-hero-card-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 12px;
  display: flex;
}

.landing-hero-card-dot {
  background: var(--border-default);
  width: 12px;
  height: 12px;
}

.landing-hero-card-dot:first-child {
  background: #ff5f57;
}

.landing-hero-card-dot:nth-child(2) {
  background: #febc2e;
}

.landing-hero-card-dot:nth-child(3) {
  background: #28c840;
}

.landing-hero-card-content {
  gap: var(--spacing-sm);
  flex-direction: column;
  padding: 32px 24px;
  display: flex;
}

.landing-hero-card-stat {
  background: var(--bg-secondary);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.landing-hero-card-stat-value {
  font-size: var(--font-size-4xl);
  color: var(--primary);
  font-weight: 700;
}

.landing-hero-card-stat-label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.landing-recent {
  padding: var(--public-section-padding);
}

.landing-newsletters-list {
  gap: var(--spacing-md);
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
}

.landing-newsletters-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
}

@media (max-width: 767px) {
  .landing-newsletters-grid {
    grid-template-columns: 1fr;
  }
}

.landing-newsletter-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  transition: border-color var(--duration-normal);
  padding: 12px;
}

.landing-newsletter-card:hover {
  border-color: var(--primary);
}

@media (max-width: 767px) {
  .landing-newsletter-card {
    padding: 10px;
  }
}

.landing-newsletter-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.landing-newsletter-title {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
}

.landing-newsletter-subject {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 767px) {
  .landing-recent {
    padding: 60px 0;
  }
}

.landing-benefits {
  background: var(--bg-secondary);
  padding: 100px 0;
}

.landing-benefits-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  display: grid;
}

.landing-benefits-content .landing-section-title {
  text-align: left;
  margin-bottom: 16px;
}

.landing-benefits-content .landing-section-subtitle {
  text-align: left;
  max-width: 100%;
  margin: 0;
}

.landing-benefits-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.landing-benefit-item {
  gap: var(--spacing-md-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-lg);
  padding: 12px;
  transition: all .2s;
  display: flex;
}

.landing-benefit-item:hover {
  box-shadow: var(--public-card-shadow);
}

.landing-benefit-number {
  font-size: var(--font-size-4xl);
  color: var(--primary);
  opacity: .5;
  font-weight: 800;
}

.landing-benefit-content {
  flex: 1;
}

.landing-benefit-title {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.landing-benefit-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.landing-benefits-image {
  box-shadow: var(--shadow-lg);
  margin-top: 32px;
  overflow: hidden;
}

.landing-benefits-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-benefits-image {
    margin-top: 24px;
  }
}

.landing-industries {
  background: var(--bg-primary);
  padding: 100px 0;
}

.landing-industries-grid {
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
}

.landing-industry-tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.landing-industry-tag:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.landing-industry-tag__name {
  font-weight: 600;
}

.landing-industry-tag__example {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
  font-weight: 400;
}

.landing-social-proof {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md-sm);
  margin-top: 32px;
  display: flex;
}

.landing-avatars {
  display: flex;
}

.landing-avatar {
  background: var(--bg-tertiary);
  border: 2px solid var(--bg-primary);
  width: 32px;
  height: 32px;
  color: var(--text-tertiary);
  justify-content: center;
  align-items: center;
  margin-left: -8px;
  display: flex;
}

.landing-avatar:first-child {
  margin-left: 0;
}

.landing-subscriber-count {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.landing-subscriber-count strong {
  color: var(--text-primary);
}

@media (max-width: 1024px) {
  .landing-benefits-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .landing-benefits-content, .landing-benefits-content .landing-section-title, .landing-benefits-content .landing-section-subtitle {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .landing-benefits, .landing-industries {
    padding: 48px 0;
  }

  .landing-benefits-grid {
    gap: 32px;
  }

  .landing-benefit-item {
    text-align: center;
    gap: var(--spacing-sm);
    flex-direction: column;
    padding: 16px;
  }

  .landing-benefit-title {
    font-size: 17px;
  }

  .landing-industry-tag {
    font-size: var(--font-size-sm);
    padding: 8px 16px;
  }

  .landing-social-proof {
    gap: var(--spacing-sm);
    text-align: center;
    flex-direction: column;
  }
}

.landing-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 100px 0;
}

.landing-cta-content {
  text-align: center;
}

.landing-cta-title {
  font-size: var(--font-size-7xl);
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 700;
}

.landing-cta-subtitle {
  color: #fffc;
  margin-bottom: 14px;
  font-size: 20px;
}

.landing-cta-actions {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.landing-cta-button {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  color: var(--primary);
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
}

.landing-cta-button:hover {
  box-shadow: none;
  transform: translateY(-2px);
}

.landing-cta-button-secondary {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--white);
  background: none;
  border: 2px solid #ffffff4d;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.landing-cta-button-secondary:hover {
  background: #ffffff1a;
  border-color: #ffffff80;
}

.landing-contact {
  background: var(--bg-primary);
  padding: 100px 0;
}

.landing-contact-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  display: grid;
}

.landing-contact-content .landing-section-title {
  text-align: left;
}

.landing-contact-content .landing-section-subtitle {
  text-align: left;
  max-width: 100%;
  margin: 0 0 32px;
}

.landing-contact-info {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.landing-contact-item {
  align-items: center;
  gap: var(--spacing-md-sm);
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
}

.landing-contact-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

.landing-success {
  background: var(--success-light);
  border: 1px solid var(--success);
  text-align: center;
  padding: 32px;
}

.landing-success h3 {
  color: var(--success-dark);
  margin: 16px 0 8px;
  font-size: 24px;
  font-weight: 600;
}

.landing-success p {
  color: var(--text-secondary);
  margin: 0;
}

.landing-success-icon {
  background: var(--success);
  width: 56px;
  height: 56px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
}

@media (max-width: 1024px) {
  .landing-contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .landing-contact-content, .landing-contact-content .landing-section-title, .landing-contact-content .landing-section-subtitle {
    text-align: center;
  }

  .landing-contact-info {
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-cta {
    padding: 60px 0;
  }

  .landing-cta-title {
    font-size: var(--font-size-5xl);
  }
}

@media (max-width: 767px) {
  .landing-cta {
    padding: 48px 0;
  }

  .landing-cta-title {
    font-size: var(--font-size-4xl);
  }

  .landing-cta-subtitle {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .landing-cta-button, .landing-cta-button-secondary {
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    font-size: 16px;
  }

  .landing-contact {
    padding: 48px 0;
  }

  .landing-contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .landing-contact-content, .landing-contact-content .landing-section-title, .landing-contact-content .landing-section-subtitle {
    text-align: center;
  }

  .landing-contact-info {
    align-items: center;
  }

  .landing-success {
    padding: 12px 16px;
  }
}

.landing-footer-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  padding: 48px 0;
}

.landing-footer-cta-inner {
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  display: flex;
}

@media (max-width: 767px) {
  .landing-footer-cta-inner {
    text-align: center;
    flex-direction: column;
  }
}

.landing-footer-cta-text h3 {
  color: var(--white);
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
}

.landing-footer-cta-text p {
  font-size: var(--font-size-base);
  color: #ffffffd9;
  margin: 0;
}

.landing-footer-cta .landing-btn {
  background: var(--white);
  color: var(--primary);
  white-space: nowrap;
  font-weight: 600;
}

.landing-footer-cta .landing-btn:hover {
  background: var(--gray-50);
}

.landing-footer {
  background: var(--gray-900);
  color: var(--white);
}

.landing-footer-grid {
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 48px 0 32px;
  display: flex;
}

.landing-footer-brand {
  flex: none;
  max-width: 280px;
}

.landing-footer-logo {
  font-family: var(--font-heading), serif;
  letter-spacing: .05em;
  color: var(--white);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  display: flex;
}

.landing-footer-tagline {
  font-size: var(--font-size-sm);
  color: #fff9;
  margin-bottom: 10px;
  line-height: 1.6;
}

.landing-footer-social {
  gap: 8px;
  display: flex;
}

.landing-footer-social-link {
  border-radius: var(--radius-sm);
  color: #ffffffb3;
  background: #ffffff14;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: all .2s;
  display: flex;
}

.landing-footer-social-link:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.landing-footer-links {
  gap: 48px;
  display: flex;
}

.landing-footer-column {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.landing-footer-column h4 {
  font-size: var(--font-size-sm);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  font-weight: 600;
}

.landing-footer-column a {
  font-size: var(--font-size-sm);
  color: #ffffff8c;
  text-decoration: none;
  transition: color .2s;
}

.landing-footer-column a:hover {
  color: var(--white);
}

.landing-footer-bottom {
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  display: flex;
}

.landing-footer-bottom p {
  font-size: var(--font-size-sm);
  color: #fff6;
  margin: 0;
}

.landing-footer-bottom-links {
  gap: 24px;
  display: flex;
}

.landing-footer-bottom-links a {
  font-size: var(--font-size-sm);
  color: #fff6;
  text-decoration: none;
}

.landing-footer-bottom-links a:hover {
  color: var(--white);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-footer-grid {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }

  .landing-footer-brand {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .landing-footer-links {
    gap: 40px;
  }

  .landing-footer-bottom {
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .landing-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }

  .landing-footer-column {
    align-items: center;
  }

  .landing-footer-cta {
    padding: 32px 16px;
  }

  .landing-footer-cta-text h3 {
    font-size: 20px;
  }

  .landing-footer-cta-text p {
    font-size: var(--font-size-sm);
  }

  .landing-footer-grid {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 0 24px;
  }

  .landing-footer-brand {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    display: flex;
  }

  .landing-footer-social {
    justify-content: center;
  }

  .landing-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
    width: 100%;
  }

  .landing-footer-column {
    align-items: center;
    min-width: 120px;
  }

  .landing-footer-bottom {
    text-align: center;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
  }

  .landing-footer-bottom-links {
    justify-content: center;
    gap: 8px;
  }
}

.login-split {
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  display: grid;
}

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

.login-split-form {
  background: var(--white);
  justify-content: center;
  align-items: center;
  padding: 40px;
  display: flex;
}

.login-split-form-inner {
  width: 100%;
  max-width: 400px;
}

.login-split-image {
  background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80");
  background-position: center;
  background-size: cover;
  position: relative;
}

@media (max-width: 1024px) {
  .login-split-image {
    display: none;
  }
}

.login-split-image-overlay {
  background: linear-gradient(135deg, #dc2626e6 0%, #b91c1cf2 100%);
  justify-content: center;
  align-items: center;
  padding: 60px;
  display: flex;
  position: absolute;
  inset: 0;
}

.login-split-image-content {
  max-width: 480px;
  color: var(--white);
  text-align: center;
}

.login-split-image-content h2 {
  font-size: var(--font-size-7xl);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.login-split-image-content p {
  opacity: .9;
  margin-bottom: 48px;
  font-size: 20px;
  line-height: 1.6;
}

.login-split-image-stats {
  justify-content: center;
  gap: 48px;
  display: flex;
}

.login-split-stat {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
}

.login-split-stat-icon {
  background: #ffffff26;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  display: flex;
}

.login-split-stat-icon svg {
  opacity: .95;
}

.login-split-stat-number {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1;
}

.login-split-stat-label {
  font-size: var(--font-size-sm);
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.login-form {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.login-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.login-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.login-input {
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  padding: 14px 16px;
  transition: all .2s;
  box-shadow: inset 0 1px 2px #0000000f;
}

.login-input::placeholder {
  color: var(--text-tertiary);
}

.login-input:hover {
  border-color: var(--gray-400);
}

.login-input:focus {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: inset 0 1px 2px #0000000f, 0 0 0 3px var(--primary-light);
  outline: none;
}

@media (max-width: 767px) {
  .login-split-form {
    min-height: 100vh;
    padding: 12px 16px;
  }

  .login-split-form-inner {
    max-width: 100%;
  }

  .login-input {
    font-size: var(--font-size-base);
    padding: 12px 14px;
  }
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.login-logo {
  background: var(--primary);
  width: 56px;
  height: 56px;
  color: var(--white);
  border-radius: var(--public-radius-lg);
  margin-bottom: var(--spacing-sm);
  justify-content: center;
  align-items: center;
  transition: transform .2s;
  display: inline-flex;
}

.login-logo:hover {
  transform: scale(1.05);
}

.login-title {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
  line-height: 1.2;
}

.login-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
}

.login-tabs {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: var(--gray-100);
  border-radius: var(--public-radius-md);
  padding: 4px;
  display: flex;
}

.login-tab {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  border-radius: var(--public-radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  flex: 1;
  padding: 12px 16px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.login-tab:hover:not(.active) {
  color: var(--text-primary);
  background: #00000008;
}

.login-tab.active {
  color: var(--text-primary);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.login-password-wrapper {
  position: relative;
}

.login-password-toggle {
  cursor: pointer;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 4px;
  transition: color .2s;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.login-password-toggle:hover {
  color: var(--text-secondary);
}

.login-options {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.login-checkbox-label {
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
}

.login-checkbox {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.login-checkbox-custom {
  border: 2px solid var(--border-medium);
  background: var(--white);
  color: #0000;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: all .2s;
  display: flex;
}

.login-checkbox:checked + .login-checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.login-checkbox:focus + .login-checkbox-custom {
  box-shadow: 0 0 0 3px var(--primary-light);
}

.login-checkbox-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.login-checkbox-text a {
  color: var(--primary);
  text-decoration: none;
}

.login-checkbox-text a:hover {
  text-decoration: underline;
}

.login-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 480px) {
  .login-row {
    grid-template-columns: 1fr;
  }
}

.login-forgot-link {
  font-size: var(--font-size-base);
  color: var(--primary);
  text-decoration: none;
  transition: color .2s;
}

.login-forgot-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.login-button {
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--white);
  background: var(--primary);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border: none;
  padding: 14px 24px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.login-button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.login-button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.login-spinner {
  animation: 1s linear infinite spin;
}

.login-footer {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
}

.login-footer p {
  margin: 0;
}

.login-footer a {
  color: var(--primary);
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

.login-link-btn {
  font-size: inherit;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: color .2s;
}

.login-link-btn:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.login-link-button {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
}

.login-link-button:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.login-error {
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--public-radius-md);
  color: var(--error);
  font-size: var(--font-size-base);
  background: #ef44441a;
  border: 1px solid #ef444433;
  padding: 12px 16px;
  display: flex;
}

.login-warning {
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--public-radius-md);
  color: var(--warning);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
  background: #f59e0b1a;
  border: 1px solid #f59e0b33;
  padding: 12px 16px;
  display: flex;
}

.login-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  flex-direction: column;
  min-height: 300px;
  display: flex;
}

.register-icon {
  background: var(--gray-100);
  width: 80px;
  height: 80px;
  color: var(--text-secondary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.register-icon-success {
  color: var(--success);
  background: #22c55e1a;
}

.register-page {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
  display: flex;
}

.register-container {
  width: 100%;
  max-width: 440px;
}

.register-container-wide {
  max-width: 520px;
}

.register-card {
  background: var(--white);
  box-shadow: var(--shadow-xl);
  text-align: center;
  padding: 40px;
}

.register-icon {
  background: var(--primary-light);
  width: 80px;
  height: 80px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
  display: flex;
}

.register-icon-success {
  background: var(--success-light);
  color: var(--success);
}

.register-icon-error {
  background: var(--error-light);
  color: var(--error);
}

.register-card h1 {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.register-card > p {
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
}

.register-subtitle {
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.6;
}

.register-skip {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  transition: color var(--duration-normal);
  margin-top: 16px;
  text-decoration: none;
  display: block;
}

.register-skip:hover {
  color: var(--text-secondary);
}

.register-link {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  transition: color var(--duration-normal);
  margin-top: 16px;
  text-decoration: none;
  display: block;
}

.register-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.register-email-note {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin: 8px 0 24px;
}

.register-loading {
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  flex-direction: column;
  padding: 60px 20px;
  display: flex;
}

.register-spinner {
  animation: 1s linear infinite spin;
}

@media (max-width: 767px) {
  .register-card {
    padding: 32px 24px;
  }

  .register-card h1 {
    font-size: 24px;
  }
}

.register-form {
  text-align: left;
}

.register-field {
  margin-bottom: 10px;
}

.register-field label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
}

.register-input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.register-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.register-input::placeholder {
  color: var(--gray-400);
}

.register-input.register-input-disabled {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.register-hint {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  margin-top: 6px;
  display: block;
}

.register-error {
  background: var(--error-light);
  color: var(--error-dark);
  font-size: var(--font-size-base);
  margin-bottom: 10px;
  padding: 12px 16px;
}

.register-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.register-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.register-button {
  background: var(--primary);
  color: var(--white);
}

.register-button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.register-button {
  width: 100%;
  padding: 14px 24px;
  font-size: 18px;
  text-decoration: none;
}

.register-button:active:not(:disabled) {
  transform: scale(.98);
}

.register-button-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.register-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .register-row {
    grid-template-columns: 1fr;
  }
}

.register-date-row {
  gap: var(--spacing-md-sm);
  grid-template-columns: 1.5fr 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .register-date-row {
    grid-template-columns: 1fr;
  }
}

.register-select-wrapper {
  position: relative;
}

.register-select {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.register-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.register-select::placeholder {
  color: var(--gray-400);
}

.register-select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
}

.register-select-icon {
  pointer-events: none;
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.register-password-wrapper {
  position: relative;
}

.register-password-wrapper .register-input {
  padding-right: 48px;
}

.register-password-toggle {
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--duration-normal);
  background: none;
  border: none;
  padding: 4px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.register-password-toggle:hover {
  color: var(--text-secondary);
}

.register-required {
  color: var(--error);
}

.register-input-error {
  border-color: var(--error) !important;
}

.register-field-error {
  font-size: var(--font-size-md);
  color: var(--error);
  margin-top: 6px;
  display: block;
}

.register-checkbox-label {
  align-items: flex-start;
  gap: var(--spacing-md-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  display: flex;
}

.register-checkbox {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.register-checkbox:checked + .register-checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}

.register-checkbox:checked + .register-checkbox-custom svg {
  opacity: 1;
}

.register-checkbox:focus + .register-checkbox-custom {
  box-shadow: 0 0 0 3px var(--primary-light);
}

.register-checkbox-custom {
  border: 2px solid var(--border-medium);
  background: var(--white);
  width: 20px;
  height: 20px;
  transition: all var(--duration-normal);
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  display: flex;
}

.register-checkbox-custom svg {
  opacity: 0;
  color: var(--white);
  transition: opacity var(--duration-normal);
}

.register-checkbox-text {
  color: var(--text-secondary);
  line-height: 1.5;
}

.register-checkbox-text a {
  color: var(--primary);
  text-decoration: none;
}

.register-checkbox-text a:hover {
  text-decoration: underline;
}

.registration-page {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
  min-height: 100vh;
  padding: 40px 20px;
}

.registration-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.registration-container-wide {
  max-width: 900px;
}

.registration-header {
  text-align: center;
  margin-bottom: 14px;
}

.registration-logo {
  color: var(--primary);
  margin-bottom: 16px;
  display: inline-flex;
}

.registration-email {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.registration-loading {
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  flex-direction: column;
  padding: 80px 20px;
  display: flex;
}

.registration-spinner {
  animation: 1s linear infinite spin;
}

.registration-card {
  background: var(--white);
  box-shadow: var(--shadow-xl);
  border-radius: var(--public-radius-lg);
  padding: 40px;
}

.registration-card-centered {
  text-align: center;
}

.registration-card-centered h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: 16px;
}

.registration-card-centered p {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.registration-icon {
  background: var(--primary-light);
  width: 80px;
  height: 80px;
  color: var(--primary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
  display: flex;
}

.registration-icon-error {
  background: var(--error-light);
  color: var(--error);
}

.registration-wizard {
  background: var(--white);
  box-shadow: var(--shadow-xl);
  border-radius: var(--public-radius-lg);
  padding: 40px;
}

.registration-error-banner {
  background: var(--error-light);
  color: var(--error-dark);
  border-radius: var(--public-radius-sm);
  margin-bottom: 12px;
  padding: 12px 16px;
}

@media (max-width: 767px) {
  .registration-page {
    padding: 10px;
  }

  .registration-wizard, .registration-card {
    padding: 12px 20px;
  }
}

.registration-steps {
  justify-content: center;
  margin-bottom: 40px;
  display: flex;
}

.registration-step-item {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.registration-step-circle {
  background: var(--gray-200);
  width: 32px;
  height: 32px;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  transition: all var(--duration-normal);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.current .registration-step-circle {
  background: var(--primary);
  color: var(--white);
}

.completed .registration-step-circle {
  background: var(--success);
  color: var(--white);
}

.registration-step-label {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  font-weight: 500;
}

.current .registration-step-label {
  color: var(--primary);
}

.completed .registration-step-label {
  color: var(--success);
}

.registration-step-line {
  background: var(--gray-200);
  width: 60px;
  height: 2px;
  margin: 0 var(--spacing-md);
}

.completed .registration-step-line {
  background: var(--success);
}

.registration-step-content {
  text-align: center;
}

.registration-step-title {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.registration-step-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: 14px;
}

.registration-form {
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
}

.registration-field {
  margin-bottom: 10px;
}

.registration-field label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
}

.registration-field input, .registration-field select {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.registration-field input:focus, .registration-field select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.registration-field input::placeholder, .registration-field select::placeholder {
  color: var(--gray-400);
}

.registration-field input, .registration-field select {
  border-radius: var(--public-radius-sm);
}

.registration-field input.error, .registration-field select.error {
  border-color: var(--error);
}

.registration-field input.registration-input-disabled, .registration-field input:disabled {
  background: var(--gray-100);
  color: var(--text-secondary);
  cursor: not-allowed;
  border-color: var(--border-light);
}

.field-error {
  font-size: var(--font-size-md);
  color: var(--error);
  margin-top: 6px;
  display: block;
}

.registration-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .registration-row {
    grid-template-columns: 1fr;
  }
}

.registration-date-row {
  gap: var(--spacing-sm);
  grid-template-columns: 1.5fr 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .registration-date-row {
    grid-template-columns: 1fr;
  }
}

.registration-expiry-row {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.registration-expiry-row input {
  text-align: center;
  width: 60px;
}

.registration-expiry-row span {
  color: var(--text-secondary);
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 48px;
}

.password-wrapper button {
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--duration-normal);
  background: none;
  border: none;
  padding: 4px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.password-wrapper button:hover {
  color: var(--text-secondary);
}

.verification-code-inputs {
  justify-content: center;
  gap: var(--spacing-sm);
  margin: 32px 0;
  display: flex;
}

.verification-code-inputs input {
  text-align: center;
  width: 48px;
  height: 56px;
  font-size: var(--font-size-3xl);
  border: 2px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  transition: all var(--duration-normal);
  font-weight: 600;
}

.verification-code-inputs input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.verification-code-inputs input.error {
  border-color: var(--error);
}

.verification-error {
  text-align: center;
  margin-bottom: 16px;
}

.verification-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  margin: 16px 0;
  display: flex;
}

.verification-hint {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  margin-top: 24px;
}

.registration-verification-success {
  text-align: center;
  padding: 40px 20px;
}

.registration-icon-success {
  background: var(--success-light);
  color: var(--success);
}

.registration-success {
  text-align: center;
  padding: 40px 20px;
}

.registration-success-message {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.registration-redirect-notice {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

@media (max-width: 767px) {
  .registration-step-label {
    display: none;
  }

  .registration-step-line {
    width: 32px;
  }

  .verification-code-inputs input {
    width: 40px;
    height: 48px;
    font-size: var(--font-size-2xl);
  }
}

.registration-billing-toggle {
  background: var(--gray-100);
  border-radius: var(--public-radius-full);
  margin-bottom: 14px;
  justify-content: center;
  gap: 0;
  width: fit-content;
  margin-inline: auto;
  padding: 4px;
  display: flex;
}

.registration-billing-toggle button {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--public-radius-full);
  transition: all var(--duration-normal);
  background: none;
  border: none;
  padding: 10px 24px;
  font-weight: 500;
}

.registration-billing-toggle button.active {
  background: var(--white);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.registration-plans-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 14px;
  display: grid;
}

.plan-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--public-radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-normal);
  padding: 12px;
}

.plan-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.plan-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.plan-card-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  display: flex;
}

.plan-card-name {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.plan-card-badge {
  background: var(--success-light);
  color: var(--success-dark);
  font-size: var(--font-size-sm);
  border-radius: var(--public-radius-sm);
  padding: 4px 8px;
  font-weight: 600;
}

.plan-card-price {
  margin-bottom: 12px;
}

.plan-card-amount {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  font-weight: 700;
}

.plan-card-period {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.plan-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.plan-card-features {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.plan-card-features li {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  padding: 6px 0;
  display: flex;
}

.plan-card-features li svg {
  color: var(--success);
  flex-shrink: 0;
}

.plan-card-trial {
  font-size: var(--font-size-md);
  color: var(--primary);
  margin-bottom: 16px;
  font-weight: 500;
}

.plan-card-select {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-100);
  border-radius: var(--public-radius-sm);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  transition: all var(--duration-normal);
  padding: 10px 16px;
  font-weight: 500;
  display: flex;
}

.plan-card-select.selected {
  background: var(--primary);
  color: var(--white);
}

@media (max-width: 767px) {
  .registration-plans-grid {
    grid-template-columns: 1fr;
  }
}

.card-input-wrapper {
  position: relative;
}

.card-input-wrapper input {
  padding-left: 44px;
  padding-right: 80px;
}

.card-input-icon {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.card-brand {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.cvv-input-wrapper {
  position: relative;
}

.cvv-input-wrapper input {
  padding-right: 36px;
}

.cvv-icon {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.registration-section-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  border-top: 1px solid var(--gray-200);
  margin: 24px 0 16px;
  padding-top: 16px;
  font-weight: 600;
}

.registration-secure-badge {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--public-radius-sm);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
}

.registration-secure-badge svg {
  color: var(--success);
}

.registration-nav {
  gap: var(--spacing-md);
  margin-top: 24px;
  display: flex;
}

.registration-btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.registration-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.registration-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.registration-btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  flex: 1;
  padding: 14px 24px;
  text-decoration: none;
  display: inline-flex;
}

.registration-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.registration-btn-secondary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.registration-btn-secondary {
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  background: none;
}

.registration-btn-secondary:hover:not(:disabled) {
  border-color: var(--black);
  color: var(--black);
}

.registration-btn-secondary {
  font-size: var(--font-size-lg);
  padding: 14px 24px;
}

.registration-btn-secondary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.registration-checkbox {
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  margin-bottom: 16px;
  display: flex;
}

.registration-checkbox input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.registration-checkbox .checkbox-custom {
  border: 2px solid var(--gray-300);
  border-radius: var(--public-radius-sm);
  width: 20px;
  height: 20px;
  transition: all var(--duration-normal);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.registration-checkbox .checkbox-custom svg {
  opacity: 0;
  color: var(--white);
}

.registration-checkbox input:checked + .checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}

.registration-checkbox input:checked + .checkbox-custom svg {
  opacity: 1;
}

.registration-checkbox span:last-child {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.4;
}

.registration-checkbox span:last-child a {
  color: var(--primary);
  text-decoration: none;
}

.registration-checkbox span:last-child a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .registration-nav {
    flex-direction: column-reverse;
  }

  .registration-btn-secondary {
    width: 100%;
  }
}

.blog-hero {
  background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .blog-hero {
    padding: 100px 0 40px;
  }
}

.blog-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.blog-hero-title {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .blog-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .blog-hero-title {
    font-size: var(--font-size-6xl);
  }
}

.blog-hero-subtitle {
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .blog-hero-subtitle {
    font-size: 17px;
  }
}

.blog-featured {
  padding: 0 0 60px;
}

.featured-article {
  background: var(--white);
  box-shadow: var(--shadow-xl);
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  display: grid;
  overflow: hidden;
}

@media (max-width: 767px) {
  .featured-article {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.featured-article-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
  justify-content: center;
  align-items: center;
  display: flex;
}

.featured-article-placeholder {
  color: var(--text-tertiary);
}

.featured-article-content {
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  display: flex;
}

@media (max-width: 767px) {
  .featured-article-content {
    padding: 32px;
  }
}

.featured-article-badge {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-md);
  width: fit-content;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-weight: 600;
  display: inline-block;
}

.featured-article-title {
  font-size: var(--font-size-5xl);
  color: var(--text-primary);
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .featured-article-title {
    font-size: 22px;
  }
}

.featured-article-excerpt {
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.6;
}

.featured-article-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin-bottom: 12px;
  display: flex;
}

.blog-filter {
  padding: 0 0 40px;
}

.blog-categories {
  gap: var(--spacing-md-sm);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.blog-category-btn {
  border: 1px solid var(--border-light);
  background: var(--white);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal);
  padding: 10px 20px;
  font-weight: 500;
}

.blog-category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.blog-category-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.blog-articles {
  padding: 0 0 80px;
}

.blog-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  cursor: pointer;
  transition: all var(--duration-slow);
  flex-direction: column;
  height: 100%;
  padding: 12px;
  display: flex;
  overflow: hidden;
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.blog-card-link {
  color: inherit;
  height: 100%;
  text-decoration: none;
  display: block;
}

.blog-card-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.blog-card-placeholder {
  color: var(--text-tertiary);
}

.blog-card-content {
  flex-direction: column;
  flex: 1;
  padding: 12px;
  display: flex;
}

.blog-card-category {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 600;
  display: inline-block;
}

.blog-card-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.blog-card-excerpt {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 16px;
  line-height: 1.6;
}

.blog-card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.blog-card-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  display: flex;
}

.blog-resources {
  background: var(--gray-50);
  padding: 80px 0;
}

.resources-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .resources-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }
}

.resource-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.resource-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.resource-card {
  text-align: center;
  padding: 32px;
}

.resource-card-icon {
  background: var(--primary-light);
  width: 64px;
  height: 64px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  display: flex;
}

.resource-card-type {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 600;
  display: inline-block;
}

.resource-card-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}

.resource-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

.blog-newsletter {
  padding: var(--public-section-padding);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  text-align: center;
}

.blog-newsletter-content {
  max-width: 600px;
  margin: 0 auto;
}

.blog-newsletter-title {
  font-size: var(--font-size-7xl);
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .blog-newsletter-title {
    font-size: var(--font-size-5xl);
  }
}

.blog-newsletter-subtitle {
  color: var(--public-text-on-dark);
  margin-bottom: 14px;
  font-size: 20px;
}

.blog-newsletter-form {
  gap: var(--spacing-md-sm);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
}

@media (max-width: 640px) {
  .blog-newsletter-form {
    flex-direction: column;
  }
}

.blog-newsletter-input {
  border: none;
  outline: none;
  flex: 1;
  padding: 14px 20px;
  font-size: 18px;
}

.blog-newsletter-input::placeholder {
  color: var(--text-tertiary);
}

.blog-newsletter-hint {
  font-size: var(--font-size-base);
  color: var(--public-text-on-dark-subtle);
  margin-top: 16px;
}

.article-header {
  padding-top: 72px;
}

.article-hero-image {
  width: 100vw;
  height: 320px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

@media (max-width: 767px) {
  .article-hero-image {
    height: 200px;
  }
}

.article-hero-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.article-header-content {
  padding: 40px 0 0;
}

@media (max-width: 767px) {
  .article-header-content {
    padding: 12px 0 0;
  }
}

.article-back-link {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--primary);
  transition: all var(--duration-normal);
  margin-bottom: 10px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.article-back-link:hover {
  gap: var(--spacing-sm);
  opacity: .8;
}

.article-category-badge {
  background: var(--primary);
  width: fit-content;
  color: var(--white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  padding: 5px 14px;
  font-weight: 600;
  display: block;
}

.article-title {
  color: var(--text-primary);
  letter-spacing: -.5px;
  max-width: 800px;
  margin-bottom: 16px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
}

@media (max-width: 767px) {
  .article-title {
    font-size: 26px;
  }
}

.article-excerpt {
  color: var(--text-secondary);
  max-width: 700px;
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 1.6;
}

.article-meta {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 32px;
  display: flex;
}

.article-meta span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.article-author {
  color: var(--text-primary);
  font-weight: 600;
}

.article-meta-separator {
  color: var(--border-light);
}

.article-body {
  padding: 48px 0;
}

.article-layout {
  grid-template-columns: 200px 1fr 240px;
  align-items: start;
  gap: 40px;
  display: grid;
}

@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: 1fr 240px;
  }

  .article-layout .article-sidebar {
    display: none;
  }
}

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

.article-sidebar-right {
  position: sticky;
  top: 100px;
}

@media (max-width: 768px) {
  .article-sidebar-right {
    position: static;
  }
}

.article-sidebar {
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .article-sidebar {
    display: none;
  }
}

.article-toc {
  margin-bottom: 14px;
}

.article-toc-title {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  font-weight: 600;
}

.article-toc-link {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  border-left: 2px solid var(--border-light);
  transition: all var(--duration-normal);
  padding: 6px 0 6px 12px;
  text-decoration: none;
  display: block;
}

.article-toc-link:hover {
  color: var(--primary);
  border-left-color: var(--primary);
}

.article-share-buttons {
  gap: var(--spacing-sm);
  display: flex;
}

.article-share-btn {
  border: 1px solid var(--border-light);
  background: var(--white);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal);
  justify-content: center;
  align-items: center;
  display: flex;
}

.article-share-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.article-content {
  max-width: 750px;
}

.article-section {
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 48px;
  padding-bottom: 48px;
}

.article-section:last-child {
  border-bottom: none;
}

.article-step-header {
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.article-step-badge {
  background: var(--primary);
  min-width: 40px;
  height: 40px;
  color: var(--white);
  font-size: var(--font-size-lg);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  font-weight: 700;
  display: flex;
}

.article-section-title {
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .article-section-title {
    font-size: 20px;
  }
}

.article-step-header .article-section-title {
  margin-bottom: 0;
}

.article-paragraph {
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .article-paragraph {
    font-size: 16px;
  }
}

.featured-article-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.article-conclusion {
  padding: 0 0 60px;
}

.article-conclusion-layout {
  grid-template-columns: 1fr 280px;
  align-items: start;
  gap: 40px;
  display: grid;
}

@media (max-width: 900px) {
  .article-conclusion-layout {
    grid-template-columns: 1fr;
  }
}

.article-conclusion-main {
  max-width: 750px;
}

.article-conclusion-box {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 36px;
}

@media (max-width: 767px) {
  .article-conclusion-box {
    padding: 12px;
  }
}

.article-conclusion-icon {
  background: var(--primary);
  width: 44px;
  height: 44px;
  color: var(--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.article-conclusion-title {
  color: var(--text-primary);
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
}

.article-cta-sticky {
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .article-cta-sticky {
    position: static;
  }
}

.article-cta-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: 28px;
}

.article-cta-icon {
  width: 40px;
  height: 40px;
  color: var(--white);
  background: #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  display: flex;
}

.article-cta-title {
  font-size: var(--font-size-lg);
  color: var(--white);
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.3;
}

.article-cta-subtitle {
  font-size: var(--font-size-md);
  color: #ffffffd9;
  margin-bottom: 10px;
  line-height: 1.5;
}

.article-cta-btn {
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal);
  padding: 12px 24px;
  text-decoration: none;
  display: block;
}

.article-cta-btn:hover {
  background: var(--gray-50);
  transform: translateY(-1px);
}

.article-related {
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  padding: 60px 0 80px;
}

.article-related-title {
  font-size: var(--font-size-5xl);
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

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

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

@media (max-width: 767px) {
  .article-related-grid {
    grid-template-columns: 1fr;
  }
}

.article-related-grid > div {
  display: flex;
}

.article-related-card {
  background: var(--white);
  width: 100%;
  transition: all var(--duration-normal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.article-related-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.article-related-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-related-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--duration-slow);
}

.article-related-card:hover .article-related-card-image img {
  transform: scale(1.05);
}

.article-related-card-body {
  flex-direction: column;
  flex: 1;
  padding: 16px;
  display: flex;
}

.article-related-card-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  flex: 1;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.4;
}

.article-related-card-excerpt {
  display: none;
}

.article-related-card-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: auto;
}

.about-hero {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  padding: 120px 0 80px;
}

.about-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.about-hero-title {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}

.about-hero-subtitle {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
}

.about-stats {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  padding: 60px 0;
}

.about-story {
  background: var(--bg-primary);
  padding: 100px 0;
}

.about-story-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  display: grid;
}

.about-story-content .landing-section-title {
  text-align: left;
}

.about-story-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.5;
}

.about-story-visual {
  justify-content: center;
  display: flex;
}

.about-story-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  text-align: center;
  box-shadow: var(--shadow-lg);
  padding: 40px;
}

.about-story-card h3 {
  color: var(--text-primary);
  margin: 20px 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.about-story-card p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.about-story-card-icon {
  background: var(--primary-light);
  width: 80px;
  height: 80px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
}

.about-values {
  background: var(--bg-secondary);
  padding: 100px 0;
}

.about-values-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.about-value-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  text-align: center;
  padding: 32px;
  transition: all .2s;
}

.about-value-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.about-value-icon {
  background: var(--primary-light);
  width: 64px;
  height: 64px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  display: flex;
}

.about-value-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}

.about-value-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.about-team {
  background: var(--bg-primary);
  padding: 100px 0;
}

.about-team-content {
  max-width: 600px;
  margin: 0 auto;
}

.about-team-features {
  gap: var(--spacing-md-lg);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.about-team-feature {
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
}

.about-team-feature svg {
  color: var(--success);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-story-content, .about-story-content .landing-section-title {
    text-align: center;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-hero {
    padding: 100px 16px 60px;
  }

  .about-values-grid, .about-team-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .about-hero {
    padding: 60px 0 40px;
  }

  .about-stats {
    padding: 32px 0;
  }

  .about-story {
    padding: 48px 0;
  }

  .about-story-grid {
    gap: 32px;
  }

  .about-values {
    padding: 48px 0;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-team {
    padding: 48px 0;
  }

  .about-team-features {
    grid-template-columns: 1fr;
  }
}

.legal-hero {
  background: var(--bg-secondary);
  text-align: center;
  padding: 120px 0 60px;
}

.legal-hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.legal-hero-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
}

.legal-hero-date {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}

.legal-content {
  background: var(--bg-primary);
  padding: 60px 0 100px;
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
}

.legal-section {
  margin-bottom: 40px;
}

.legal-section h2 {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
  padding-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
}

.legal-section h3 {
  color: var(--text-primary);
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.legal-section p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.legal-section ul {
  margin: 16px 0;
  padding-left: 24px;
}

.legal-section ul li {
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}

.legal-section ul li strong {
  color: var(--text-primary);
}

.legal-contact-info {
  background: var(--bg-secondary);
  margin-top: 20px;
  padding: 12px;
}

.legal-contact-info p {
  margin-bottom: 8px;
}

.legal-contact-info p:last-child {
  margin-bottom: 0;
}

.legal-cta {
  text-align: center;
  margin-top: 60px;
}

.legal-warning {
  border-left: 3px solid var(--warning, #ffc107);
  background: #ffc1071a;
  padding: 12px 16px;
  font-size: 14px;
}

.legal-link {
  margin-top: 12px;
}

.legal-link a {
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .2s;
  display: inline-block;
}

.legal-link a:hover {
  opacity: .9;
}

.static-page {
  flex: 1;
  padding: 120px 24px 80px;
}

.static-page-container {
  max-width: 700px;
  margin: 0 auto;
}

.static-page-title {
  font-size: var(--font-size-7xl);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.static-page-date {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin-bottom: 40px;
}

.static-page-content section {
  margin-bottom: 14px;
}

.static-page-content section h2 {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}

.static-page-content section p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.5;
}

.static-page-content section ul {
  margin-bottom: 16px;
  padding-left: 24px;
}

.static-page-content section ul li {
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.5;
}

.static-page-content section ul li strong {
  color: var(--text-primary);
}

.static-page-cta {
  text-align: center;
  margin-top: 48px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .legal-hero {
    padding: 100px 16px 40px;
  }

  .legal-content {
    padding: 40px 16px 60px;
  }

  .static-page {
    padding: 100px 16px 60px;
  }

  .static-page-title {
    font-size: var(--font-size-5xl);
  }

  .static-page-content section h2 {
    font-size: 20px;
  }

  .static-page-content section p, .static-page-content section ul li {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .legal-hero {
    padding: 80px 16px 32px;
  }

  .legal-content {
    padding: 32px 16px 48px;
  }

  .legal-section {
    margin-bottom: 12px;
  }

  .legal-section h2 {
    font-size: 18px;
  }

  .legal-section h3 {
    font-size: 16px;
  }

  .legal-section p, .legal-section ul li {
    font-size: 15px;
  }

  .legal-contact-info {
    padding: 16px;
  }

  .static-page {
    padding: 80px 16px 48px;
  }

  .static-page-title {
    font-size: var(--font-size-4xl);
  }

  .static-page-content section h2 {
    font-size: 18px;
  }

  .static-page-content section p, .static-page-content section ul li {
    font-size: 15px;
  }

  .static-page-cta {
    margin-top: 32px;
  }
}

.aup-categories {
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  display: flex;
}

.aup-category {
  background: var(--bg-secondary);
  padding: 12px;
}

.aup-category .aup-category-header {
  border-bottom: 1px solid var(--border-light);
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  display: flex;
}

.aup-category .aup-category-header svg {
  color: var(--primary);
  flex-shrink: 0;
}

.aup-category .aup-category-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.aup-category .aup-category-items {
  margin: 0 0 16px;
  padding-left: 20px;
}

.aup-category .aup-category-items li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.aup-consequence {
  background: var(--bg-primary);
  color: var(--text-secondary);
  padding: 12px 16px;
  font-size: 14px;
}

.aup-consequence strong {
  color: var(--danger, #dc3545);
}

.aup-requirements {
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
  display: flex;
}

.aup-requirement h3 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.aup-requirement p {
  margin-bottom: 12px;
  font-size: 14px;
}

.aup-requirement ul {
  margin: 0;
  padding-left: 20px;
}

.aup-requirement ul li {
  margin-bottom: 6px;
  font-size: 14px;
}

.aup-practices-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 20px;
  display: grid;
}

.aup-practice {
  background: var(--bg-secondary);
  padding: 10px;
}

.aup-practice h3 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.aup-practice ul {
  margin: 0;
  padding-left: 18px;
}

.aup-practice ul li {
  margin-bottom: 6px;
  font-size: 14px;
}

.aup-methods {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin: 20px 0;
  display: grid;
}

.aup-method {
  background: var(--bg-secondary);
  padding: 16px;
}

.aup-method h3 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.aup-method p {
  margin: 0;
  font-size: 14px;
}

.aup-steps {
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
  display: flex;
}

.aup-step {
  background: var(--bg-secondary);
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 16px;
  display: flex;
}

.aup-step-number {
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
}

.aup-step-content h3 {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

.aup-step-content p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
}

.aup-report-contact {
  background: var(--bg-secondary);
  margin-top: 20px;
  padding: 16px;
}

.aup-report-contact a {
  color: var(--primary);
  text-decoration: none;
}

.aup-report-contact a:hover {
  text-decoration: underline;
}

.aup-subject-hint {
  color: var(--text-tertiary);
  margin-top: 8px;
  font-size: 13px;
}

.aup-levels {
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
  display: flex;
}

.aup-level {
  border-left: 4px solid var(--border-light);
  padding: 16px;
}

.aup-level--warning {
  border-color: var(--warning, #ffc107);
  background: #ffc1070d;
}

.aup-level--caution {
  border-color: var(--orange, #fd7e14);
  background: #fd7e140d;
}

.aup-level--danger {
  border-color: var(--danger, #dc3545);
  background: #dc35450d;
}

.aup-level--critical {
  border-color: var(--dark, #212529);
  background: #2125290d;
}

.aup-level-badge {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

.aup-level-description {
  margin-bottom: 8px;
  font-size: 14px;
}

.aup-level-applies {
  color: var(--text-tertiary);
  margin: 0;
  font-size: 13px;
}

.aup-note {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-left: 3px solid var(--primary);
  margin-top: 20px;
  padding: 16px;
  font-size: 14px;
  font-style: italic;
}

.aup-related {
  border-top: 1px solid var(--border-light);
  margin-top: 24px;
  padding-top: 24px;
}

.aup-related h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

.aup-related-links {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.aup-related-link {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
}

.aup-related-link:hover {
  background: var(--bg-tertiary, var(--border-light));
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aup-practices-grid, .aup-methods {
    grid-template-columns: 1fr;
  }

  .aup-step {
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
  }
}

.pricing-hero {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

.pricing-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.pricing-hero-title {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
}

.pricing-hero-subtitle {
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.6;
}

.pricing-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 4px;
  display: inline-flex;
}

.pricing-toggle-btn {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.pricing-toggle-btn.active {
  background: var(--primary);
  color: var(--white);
}

.pricing-toggle-btn:hover:not(.active) {
  background: var(--bg-secondary);
}

.pricing-toggle-badge {
  background: var(--success);
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  font-weight: 600;
}

.pricing-cards {
  background: var(--bg-primary);
  padding: 60px 0 100px;
}

.pricing-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
}

.pricing-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 40px 32px;
  transition: all .2s;
  position: relative;
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pricing-card.popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.pricing-card-badge {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  padding: 6px 16px;
  font-weight: 600;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.pricing-card-header {
  text-align: center;
  margin-bottom: 12px;
}

.pricing-card-name {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.pricing-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.pricing-card-price {
  text-align: center;
  margin-bottom: 8px;
}

.pricing-currency {
  color: var(--text-primary);
  vertical-align: top;
  font-size: 24px;
  font-weight: 600;
}

.pricing-amount {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  font-weight: 800;
  line-height: 1;
}

.pricing-period {
  color: var(--text-secondary);
  font-size: 18px;
}

.pricing-annual-note {
  font-size: var(--font-size-md);
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 12px;
}

.pricing-features {
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}

.pricing-feature {
  align-items: flex-start;
  gap: var(--spacing-md-sm);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
}

.pricing-feature svg {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

.pricing-feature.disabled, .pricing-feature.disabled svg {
  color: var(--text-tertiary);
}

.pricing-comparison {
  background: var(--bg-secondary);
  padding: 100px 0;
}

.pricing-included-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  max-width: 900px;
  margin: 0 auto;
  display: grid;
}

.pricing-included-item {
  text-align: center;
  padding: 12px;
}

.pricing-included-item svg {
  color: var(--primary);
  margin-bottom: 16px;
}

.pricing-included-item h4 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.pricing-included-item p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.pricing-faq {
  background: var(--bg-primary);
  padding: 100px 0;
}

.pricing-faq-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
  display: grid;
}

.pricing-faq-item {
  background: var(--bg-secondary);
  padding: 12px;
}

.pricing-faq-question {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.pricing-faq-answer {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .pricing-hero {
    padding: 100px 16px 40px;
  }

  .pricing-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-faq-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  flex-direction: column;
  padding: 80px 0;
  display: flex;
}

.pricing-loading svg {
  color: var(--primary);
}

.pricing-card-details {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  margin-top: 12px;
  text-decoration: none;
  display: block;
}

.pricing-card-details:hover {
  color: var(--primary);
}

@media (max-width: 767px) {
  .pricing-hero {
    padding: 48px 16px 32px;
  }

  .pricing-hero-subtitle {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .pricing-cards {
    padding: 32px 16px 60px;
  }

  .pricing-grid {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .pricing-card {
    padding: 12px 20px;
  }

  .pricing-card-name {
    font-size: var(--font-size-2xl);
  }

  .pricing-amount {
    font-size: var(--font-size-6xl);
  }

  .pricing-comparison {
    padding: 48px 16px;
  }

  .pricing-included-grid {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
  }

  .pricing-included-item {
    padding: 16px;
  }

  .pricing-faq {
    padding: 48px 16px;
  }

  .pricing-faq-grid {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
  }

  .pricing-faq-item {
    padding: 16px;
  }

  .pricing-faq-question {
    font-size: 16px;
  }

  .pricing-toggle-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.plan-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 24px 60px;
}

.plan-loading {
  text-align: center;
  color: var(--text-tertiary);
  padding: 80px 0;
}

.plan-back {
  color: var(--text-tertiary);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
}

.plan-back:hover {
  color: var(--primary);
}

.plan-header {
  margin-bottom: 12px;
}

.plan-header-main {
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-top: 12px;
  display: flex;
}

.plan-name {
  color: var(--text-primary);
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}

.plan-desc {
  color: var(--text-secondary);
  max-width: 320px;
  margin: 4px 0 0;
  font-size: 13px;
}

.plan-price-block {
  text-align: right;
  flex-shrink: 0;
}

.plan-amount {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 800;
}

.plan-period {
  color: var(--text-tertiary);
  font-size: 14px;
}

.plan-annual {
  color: var(--text-tertiary);
  margin-top: 2px;
  font-size: 11px;
}

.plan-cta {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  margin-top: 10px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.plan-cta:hover {
  opacity: .9;
}

.plan-body {
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
}

.plan-limits-row {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  gap: 0;
  margin-bottom: 12px;
  display: flex;
  overflow: hidden;
}

.plan-lim {
  text-align: center;
  border-right: 1px solid var(--border-light);
  flex: 1;
  padding: 12px 8px;
}

.plan-lim:last-child {
  border-right: none;
}

.plan-lim strong {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
  display: block;
}

.plan-lim span {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 10px;
}

.plan-feat-section h2 {
  color: var(--text-primary);
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.plan-feat-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
  display: grid;
}

.plan-fi {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 13px;
  display: flex;
}

.plan-fi svg {
  color: var(--primary);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .plan-header-main {
    flex-direction: column;
    gap: 8px;
  }

  .plan-price-block {
    text-align: left;
  }

  .plan-limits-row {
    flex-wrap: wrap;
  }

  .plan-lim {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    flex: 100%;
  }

  .plan-lim:last-child {
    border-bottom: none;
  }

  .plan-feat-list {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-page {
  background: var(--gray-50);
  min-height: 100vh;
}

.faq-hero {
  background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .faq-hero {
    padding: 100px 0 40px;
  }
}

.faq-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.faq-hero-title {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .faq-hero-title {
    font-size: var(--font-size-6xl);
  }
}

.faq-hero-subtitle {
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-size: 24px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .faq-hero-subtitle {
    font-size: 17px;
  }
}

.faq-search {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.faq-search-input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.faq-search-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.faq-search-input::placeholder {
  color: var(--gray-400);
}

.faq-search-input {
  padding: 10px 12px 16px 52px;
  font-size: 18px;
}

.faq-search-icon {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

.faq-content {
  padding: 60px 0 80px;
}

.faq-categories-nav {
  gap: var(--spacing-md-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
  display: flex;
}

.faq-category-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border: 1px solid var(--border-light);
  background: var(--white);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal);
  padding: 12px 20px;
  font-weight: 500;
  display: flex;
}

.faq-category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.faq-category-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-category-section {
  margin-bottom: 48px;
}

.faq-category-title {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 12px;
  padding-bottom: 16px;
  font-weight: 700;
  display: flex;
}

.faq-category-title svg {
  color: var(--primary);
}

@media (max-width: 767px) {
  .faq-category-title {
    font-size: 24px;
  }
}

.faq-item {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  margin-bottom: 12px;
  padding: 12px;
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--primary);
}

.faq-item.open {
  box-shadow: var(--shadow-md);
}

.faq-question {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-normal);
  background: none;
  border: none;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
}

.faq-question svg {
  color: var(--text-tertiary);
  transition: transform var(--duration-slow);
  flex-shrink: 0;
}

.open .faq-question svg {
  color: var(--primary);
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .faq-question {
    padding: 10px 12px;
    font-size: 16px;
  }
}

.faq-answer {
  color: var(--text-secondary);
  padding: 0 24px 20px;
  font-size: 16px;
  line-height: 1.5;
}

.faq-answer ul {
  margin-top: 12px;
  padding-left: 20px;
}

.faq-answer ul li {
  margin-bottom: 8px;
}

.faq-answer a {
  color: var(--primary);
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .faq-answer {
    font-size: var(--font-size-base);
    padding: 0 20px 16px;
  }
}

.faq-no-results {
  text-align: center;
  color: var(--text-secondary);
  padding: 60px 20px;
}

.faq-no-results svg {
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.faq-no-results h3 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
}

.faq-no-results p {
  margin-bottom: 12px;
  font-size: 16px;
}

.faq-contact {
  background: var(--gray-50);
  padding: 80px 0;
}

.faq-contact-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .faq-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .faq-contact-grid {
    grid-template-columns: 1fr;
  }
}

.faq-contact-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.faq-contact-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.faq-contact-card {
  text-align: center;
  padding: 32px;
}

.faq-contact-icon {
  background: var(--primary-light);
  width: 64px;
  height: 64px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  display: flex;
}

.faq-contact-title {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.faq-contact-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.faq-contact-link {
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.faq-contact-link:hover {
  text-decoration: underline;
}

.integrations-hero {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .integrations-hero {
    padding: 100px 0 40px;
  }
}

.integrations-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.integrations-hero-title {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .integrations-hero-title {
    font-size: var(--font-size-6xl);
  }
}

.integrations-hero-subtitle {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .integrations-hero-subtitle {
    font-size: 17px;
  }
}

.integrations-content {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.integrations-filter {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 40px;
  display: flex;
}

.integrations-filter-btn {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  padding: 10px 20px;
  font-weight: 500;
}

.integrations-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.integrations-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.integrations-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .integrations-grid {
    grid-template-columns: 1fr;
  }
}

.integration-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  text-align: center;
  padding: 28px;
}

.integration-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  border-color: var(--primary);
  transform: translateY(-4px);
}

.integration-logo {
  margin-bottom: 16px;
  font-size: 32px;
}

.integration-name {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.integration-category {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.integration-description {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.integrations-api {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.api-section-content {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .api-section-content {
    grid-template-columns: 1fr;
  }
}

.api-features {
  gap: var(--spacing-sm);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.api-feature {
  gap: var(--spacing-md);
  align-items: flex-start;
  display: flex;
}

.api-feature svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.api-feature-content h4 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.api-feature-content p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.api-code-preview {
  background: var(--gray-900);
  border-radius: var(--public-radius-lg);
  overflow: hidden;
}

.api-code-header {
  background: var(--gray-800);
  gap: 6px;
  padding: 12px 16px;
  display: flex;
}

.api-code-dot {
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.api-code-dot.red {
  background: #ff5f57;
}

.api-code-dot.yellow {
  background: #ffbd2e;
}

.api-code-dot.green {
  background: #28c840;
}

.api-code-content {
  padding: 10px;
}

.api-code-content pre {
  font-family: SF Mono, Monaco, monospace;
  font-size: var(--font-size-sm);
  color: var(--gray-300);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.6;
}

.integrations-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  text-align: center;
  padding: 80px 0;
}

.integrations-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.integrations-cta-title {
  font-size: var(--font-size-7xl);
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .integrations-cta-title {
    font-size: var(--font-size-5xl);
  }
}

.integrations-cta-subtitle {
  color: var(--public-text-on-dark-muted);
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.6;
}

.integrations-cta-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

@media (max-width: 767px) {
  .integrations-cta-actions {
    flex-direction: column;
  }
}

.help-hero {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .help-hero {
    padding: 100px 0 40px;
  }
}

.help-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.help-hero-title {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .help-hero-title {
    font-size: var(--font-size-6xl);
  }
}

.help-hero-subtitle {
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .help-hero-subtitle {
    font-size: 17px;
  }
}

.help-search {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.help-search input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.help-search input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.help-search input::placeholder {
  color: var(--gray-400);
}

.help-search input {
  border-radius: var(--public-radius-lg);
  padding: 10px 12px 16px 52px;
  font-size: 16px;
}

.help-search svg {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

.help-categories {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.help-categories-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .help-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .help-categories-grid {
    grid-template-columns: 1fr;
  }
}

.help-category-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  color: inherit;
  padding: 28px;
  text-decoration: none;
}

.help-category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.help-category-card:hover .help-category-icon {
  background: var(--primary);
  color: var(--white);
}

.help-category-card:hover .help-category-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

.help-category-card-top {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.help-category-icon {
  background: var(--primary-light);
  width: 56px;
  height: 56px;
  color: var(--primary);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-normal);
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.help-category-title {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.help-category-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.help-category-count {
  font-size: var(--font-size-sm);
  color: var(--primary);
  white-space: nowrap;
  font-weight: 500;
}

.help-category-article-list {
  border-top: 1px solid var(--border-light);
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
}

.help-category-article {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.help-category-article:before {
  content: "";
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
}

.help-category-article-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.help-category-footer {
  border-top: 1px solid #0f172a0f;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  display: flex;
}

.help-category-link {
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}

.help-category-arrow {
  color: var(--text-tertiary);
  transition: all var(--duration-fast);
}

.help-popular {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.help-articles-list {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-lg);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.help-article-item {
  color: inherit;
  border-bottom: 1px solid var(--border-light);
  transition: all var(--duration-fast);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  display: flex;
}

.help-article-item:last-child {
  border-bottom: none;
}

.help-article-item:hover {
  background: var(--gray-50);
}

.help-article-item:hover .help-article-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

.help-article-info {
  flex: 1;
}

.help-article-title {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
}

.help-article-category {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.help-article-arrow {
  color: var(--text-tertiary);
  transition: all var(--duration-fast);
  margin-left: var(--spacing-md);
  flex-shrink: 0;
}

.help-article-page {
  background: linear-gradient(#fff 0%, #f8fafc 100%);
  padding: 120px 0 72px;
}

@media (max-width: 767px) {
  .help-article-page {
    padding: 96px 0 48px;
  }
}

.help-article-shell {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 32px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .help-article-shell {
    grid-template-columns: 1fr;
  }
}

.help-article-main, .help-article-sidebar-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: none;
  border-radius: 24px;
}

.help-article-main {
  padding: 36px;
}

@media (max-width: 767px) {
  .help-article-main {
    padding: 12px;
  }
}

.help-article-back {
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.help-article-category-badge {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.help-article-page-title {
  color: var(--text-primary);
  margin: 16px 0 12px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
}

.help-article-page-summary {
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
}

.help-article-meta {
  color: var(--text-tertiary);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
}

.help-article-meta-item {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.help-article-meta-sep {
  opacity: .45;
}

.help-article-content {
  flex-direction: column;
  gap: 28px;
  display: flex;
}

.help-article-section h2 {
  color: var(--text-primary);
  margin: 0 0 12px;
  font-size: 24px;
}

.help-article-section p {
  color: var(--text-secondary);
  margin: 0 0 14px;
  line-height: 1.52;
}

.help-article-section ul {
  color: var(--text-secondary);
  margin: 0;
  padding-left: 20px;
  line-height: 1.52;
}

.help-article-sidebar-card {
  padding: 12px;
  position: sticky;
  top: 110px;
}

.help-article-sidebar-label {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.help-article-sidebar-card h3 {
  color: var(--text-primary);
  margin: 0 0 16px;
  font-size: 22px;
}

.help-article-related-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.help-article-related-item {
  border: 1px solid var(--border-light);
  color: inherit;
  border-radius: 16px;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.help-article-related-item:hover {
  border-color: var(--primary);
  background: #f1445d0a;
}

.help-article-related-category {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.help-article-related-empty {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.help-contact {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.help-contact-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .help-contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .help-contact-grid {
    grid-template-columns: 1fr;
  }
}

.help-contact-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  text-align: center;
  padding: 32px;
}

.help-contact-icon {
  background: var(--primary-light);
  width: 64px;
  height: 64px;
  color: var(--primary);
  border-radius: var(--public-radius-lg);
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  display: flex;
}

.help-contact-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}

.help-contact-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.help-contact-time {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.help-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  text-align: center;
  padding: 80px 0;
}

.help-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.help-cta-title {
  font-size: var(--font-size-7xl);
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .help-cta-title {
    font-size: var(--font-size-5xl);
  }
}

.help-cta-subtitle {
  color: var(--public-text-on-dark-muted);
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.6;
}

.help-cta-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

@media (max-width: 767px) {
  .help-cta-actions {
    flex-direction: column;
  }
}

.landing-btn-full {
  width: 100%;
}

.landing-btn-outline-light {
  color: var(--white);
  background: none;
  border: 1px solid #ffffff4d;
}

.landing-btn-outline-light:hover {
  background: #ffffff1a;
  border-color: #ffffff80;
}

.contact-hero {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .contact-hero {
    padding: 100px 0 40px;
  }
}

.contact-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.contact-hero-title {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}

.contact-hero-subtitle {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .contact-hero-subtitle {
    font-size: 17px;
  }
}

.contact-form-section {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.contact-form {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  max-width: 700px;
  transition: all var(--duration-fast) var(--ease-out-quart);
  margin: 0 auto;
  padding: 40px;
}

@media (max-width: 767px) {
  .contact-form {
    padding: 12px;
  }
}

.contact-form-row {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

.contact-form-field {
  margin-bottom: var(--spacing-md);
}

.contact-form-field label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  display: block;
}

.contact-form-field input, .contact-form-field select, .contact-form-field textarea {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.contact-form-field input:focus, .contact-form-field select:focus, .contact-form-field textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.contact-form-field input::placeholder, .contact-form-field select::placeholder, .contact-form-field textarea::placeholder {
  color: var(--gray-400);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-success {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 60px 24px;
}

.contact-success svg {
  color: var(--success);
  margin-bottom: var(--spacing-md);
}

.contact-success h2 {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.contact-success p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.contact-info {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.contact-info-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  text-align: center;
  padding: 32px 24px;
}

.contact-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-info-card h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 18px;
  font-weight: 600;
}

.contact-info-card p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.contact-info-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 56px;
  height: 56px;
  color: var(--primary);
  margin: 0 auto var(--spacing-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.contact-info-link {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.contact-info-link:hover {
  text-decoration: underline;
}

.contact-info-detail {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.gs-hero {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .gs-hero {
    padding: 100px 0 40px;
  }
}

.gs-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.gs-hero-title {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}

.gs-hero-subtitle {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .gs-hero-subtitle {
    font-size: 17px;
  }
}

.gs-steps {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.gs-steps-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
  display: grid;
}

@media (max-width: 767px) {
  .gs-steps-grid {
    grid-template-columns: 1fr;
  }
}

.gs-step {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  text-align: center;
  padding: 32px;
  position: relative;
}

.gs-step:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.gs-step-number {
  background: var(--primary);
  width: 32px;
  height: 32px;
  color: var(--white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.gs-step-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 56px;
  height: 56px;
  color: var(--primary);
  margin: var(--spacing-md) auto var(--spacing-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gs-step-title {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 20px;
  font-weight: 600;
}

.gs-step-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.gs-step-link {
  font-size: var(--font-size-sm);
}

.gs-cta {
  padding: var(--public-section-padding);
  background: var(--bg-secondary);
}

.gs-cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.gs-cta-content h2 {
  font-size: var(--font-size-6xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.gs-cta-content p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  font-size: 18px;
  line-height: 1.6;
}

.gs-cta-buttons {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.changelog-hero {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .changelog-hero {
    padding: 100px 0 40px;
  }
}

.changelog-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.changelog-hero-title {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}

.changelog-hero-subtitle {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .changelog-hero-subtitle {
    font-size: 17px;
  }
}

.changelog-list {
  padding: var(--public-section-padding);
  background: var(--bg-primary);
}

.changelog-timeline {
  gap: var(--spacing-md);
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
}

.changelog-entry {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 32px;
}

.changelog-entry-header {
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.changelog-version {
  font-size: var(--font-size-sm);
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--public-radius-full);
  padding: 4px 12px;
  font-weight: 700;
}

.changelog-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-left: auto;
}

@media (max-width: 767px) {
  .changelog-date {
    margin-left: 0;
  }
}

.changelog-type-badge {
  font-size: var(--font-size-xs);
  border-radius: var(--public-radius-full);
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.changelog-badge-feature {
  background: var(--success-light, #dcfce7);
  color: var(--success, #16a34a);
}

.changelog-badge-fix {
  background: var(--warning-light, #fef3c7);
  color: var(--warning, #d97706);
}

.changelog-badge-improvement {
  background: var(--info-light, #dbeafe);
  color: var(--info, #2563eb);
}

.changelog-entry-title {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 20px;
  font-weight: 600;
}

.changelog-entry-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.changelog-entry-items {
  gap: var(--spacing-sm);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.changelog-entry-items li {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.changelog-entry-items li svg {
  color: var(--success);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .changelog-list {
    padding: 32px 16px;
  }

  .changelog-timeline {
    gap: var(--spacing-md);
  }

  .changelog-entry {
    padding: 10px 16px;
  }

  .changelog-entry-title {
    font-size: 17px;
  }
}

.demox-page {
  --demox-ink: #1d1a17;
  --demox-muted: #64594d;
  --demox-line: #31241924;
  --demox-paper: #fffaf2;
  --demox-paper-strong: #f6ead7;
  --demox-accent: #c96b2c;
  --demox-accent-deep: #8a3c12;
  --demox-shadow: 0 24px 60px #502e1224;
  color: var(--demox-ink);
  background: none;
}

.demox-page .landing-container {
  width: min(100%, 100vw - 48px);
  max-width: none;
  margin-inline: auto;
}

.demox-shell {
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 68px 0 16px;
  display: grid;
}

.demox-shell-deck {
  grid-template-columns: 264px minmax(0, 1fr);
}

.demox-overview, .demox-content-shell {
  gap: 28px;
  padding: 68px 0 16px;
  display: grid;
}

.demox-hero {
  grid-template-columns: minmax(0, 1.3fr) 360px;
  align-items: stretch;
  gap: 24px;
  display: grid;
}

.demox-hero-copy, .demox-hero-panel, .demox-summary-card, .demox-story-card, .demox-cta-band, .demox-page-header {
  border: 1px solid var(--demox-line);
  box-shadow: var(--demox-shadow);
  background: none;
  padding: 28px;
}

.demox-hero-copy h1, .demox-page-header h1 {
  max-width: none;
  font-family: var(--font-heading);
  letter-spacing: -.06em;
  margin: 14px 0 18px;
  font-size: clamp(46px, 6vw, 86px);
  line-height: .95;
}

.demox-hero-copy p, .demox-hero-panel, .demox-summary-card p, .demox-story-card > p, .demox-page-header p, .demox-principle-card p, .demox-metric-card p {
  color: var(--demox-muted);
  font-size: 18px;
  line-height: 1.5;
}

.demox-hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.demox-flow-list, .demox-mini-list {
  color: var(--demox-ink);
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 20px;
  line-height: 1.6;
  display: grid;
}

.demox-section-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.demox-section-link {
  color: var(--demox-ink);
  border: 1px solid var(--demox-line);
  background: #fffcf6c2;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  transition: transform .18s, border-color .18s, background-color .18s;
  display: grid;
}

.demox-section-link:hover {
  background: #fff7eceb;
  border-color: #8a3c124d;
  transform: translateY(-2px);
}

.demox-section-link.is-active {
  background: #fff4e5f5;
  border-color: #8a3c1261;
}

.demox-section-link strong {
  font-size: 18px;
  line-height: 1.25;
}

.demox-section-link-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--demox-accent-deep);
  font-size: 11px;
  font-weight: 700;
}

.demox-card-grid, .demox-info-grid, .demox-principles, .demox-metric-grid {
  gap: 10px;
  display: grid;
}

.demox-card-grid, .demox-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demox-summary-card h2, .demox-story-card h2 {
  font-family: var(--font-heading);
  letter-spacing: -.05em;
  margin: 14px 0;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: .98;
}

.demox-inline-link {
  color: var(--demox-accent-deep);
  margin-top: 20px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.demox-principles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.demox-principle-card, .demox-metric-card {
  border: 1px solid var(--demox-line);
  background: #fffcf6d1;
  padding: 10px;
}

.demox-screenshot-band {
  gap: 10px;
  display: grid;
}

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

.demox-screenshot-card {
  gap: 12px;
  display: grid;
}

.demox-screenshot-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.demox-screenshot-card p {
  color: var(--demox-muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.demox-screenshot-frame {
  border: 1px solid var(--demox-line);
  box-shadow: none;
  background: #ffffffe6;
  overflow: hidden;
}

.demox-screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.demox-principle-card h3, .demox-metric-card strong {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
}

.demox-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 20px;
}

.demox-page-header {
  gap: 10px;
  display: grid;
}

.demox-cta-band {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.demox-rail {
  position: sticky;
  top: 96px;
}

.demox-rail-card {
  border: 1px solid var(--demox-line);
  box-shadow: var(--demox-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffaf2d6;
  padding: 10px;
}

.demox-rail-kicker, .demox-note-label, .demox-slide-chip, .demox-slide-label {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--demox-accent-deep);
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.demox-rail-card h1 {
  font-family: var(--font-heading);
  letter-spacing: -.05em;
  margin: 8px 0 6px;
  font-size: 32px;
  line-height: .96;
}

.demox-rail-card p {
  color: var(--demox-muted);
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}

.demox-rail-card .demox-section-nav {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.demox-rail-card .demox-section-link {
  gap: 4px;
  padding: 10px 12px;
}

.demox-rail-card .demox-section-link strong {
  font-size: 13px;
  line-height: 1.25;
}

.demox-rail-nav {
  gap: 8px;
  margin: 16px 0 18px;
  display: grid;
}

.demox-rail-link {
  border: 1px solid var(--demox-line);
  color: var(--demox-ink);
  background: #ffffff8c;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .18s, background-color .18s;
  display: grid;
}

.demox-rail-link:hover {
  background: #fff7ece0;
  transform: translateX(4px);
}

.demox-rail-link-button {
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.demox-rail-link-button.is-active {
  background: #fff4e5f5;
  border-color: #8a3c1261;
  transform: translateX(4px);
}

.demox-rail-number {
  background: var(--demox-paper-strong);
  letter-spacing: .16em;
  color: var(--demox-accent-deep);
  justify-content: center;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.demox-rail-actions {
  gap: 8px;
  display: grid;
}

.demox-deck {
  scroll-snap-type: y proximity;
  gap: 28px;
  display: grid;
}

.demox-deck-stage {
  align-content: start;
  width: 100%;
}

.demox-deck-meta {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.demox-deck-progress {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--demox-accent-deep);
  font-size: 14px;
  font-weight: 700;
}

.demox-slide {
  scroll-snap-align: start;
  min-height: calc(100vh - 92px);
  display: flex;
}

.demox-slide-active {
  width: 100%;
  min-height: calc(100vh - 98px);
}

.demox-slide-frame {
  border: 1px solid var(--demox-line);
  width: 100%;
  box-shadow: var(--demox-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: none;
  grid-template-rows: auto 1fr;
  padding: 10px 22px;
  display: grid;
}

.demox-slide-header {
  border-bottom: 1px solid var(--demox-line);
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  display: flex;
}

.demox-slide-body {
  grid-template-columns: minmax(0, 1.75fr) 320px;
  align-items: stretch;
  gap: 10px;
  padding-top: 12px;
  display: grid;
}

.demox-slide-main {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.demox-slide-main h2 {
  max-width: none;
  font-family: var(--font-heading);
  letter-spacing: -.06em;
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.04;
}

.demox-slide-copy, .demox-presenter-note p, .demox-qa-card p {
  color: var(--demox-muted);
  font-size: 14px;
  line-height: 1.42;
}

.demox-slide-list {
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.demox-slide-list li {
  border-left: 4px solid var(--demox-accent);
  color: var(--demox-ink);
  box-shadow: none;
  background: #fffbf4e6;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
}

.demox-steps, .demox-qa-grid {
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.demox-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demox-step-card, .demox-qa-card, .demox-presenter-note {
  border: 1px solid var(--demox-line);
  background: #fffcf6db;
  padding: 12px;
}

.demox-step-card span {
  background: var(--demox-paper-strong);
  color: var(--demox-accent-deep);
  letter-spacing: .18em;
  margin-bottom: 8px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.demox-step-card h3, .demox-qa-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}

.demox-qa-card p {
  margin: 6px 0 0;
  font-size: 13px;
}

.demox-presenter-note {
  background: linear-gradient(160deg, #c96b2c1f, #fff8eef0), var(--demox-paper);
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.demox-presenter-note h3 {
  font-size: 18px;
  line-height: 1.05;
  font-family: var(--font-heading);
  margin: 6px 0 0;
}

.demox-presenter-note:before {
  content: "";
  background: #8a3c1259;
  width: 40px;
  height: 1px;
  margin-bottom: 10px;
  display: block;
}

.demox-presenter-note p {
  margin: 6px 0 0;
}

.demox-note-tips {
  border-top: 1px solid #8a3c122e;
  margin-top: 10px;
  padding-top: 10px;
}

.demox-note-tips strong {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--demox-accent-deep);
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.demox-note-tips p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .demox-shell {
    grid-template-columns: 1fr;
    padding: 98px 0 52px;
  }

  .demox-overview, .demox-content-shell {
    padding: 98px 0 52px;
  }

  .demox-hero, .demox-card-grid, .demox-info-grid, .demox-principles, .demox-metric-grid, .demox-screenshot-grid, .demox-section-nav {
    grid-template-columns: 1fr;
  }

  .demox-rail {
    position: static;
  }

  .demox-deck {
    gap: 10px;
  }

  .demox-slide {
    min-height: auto;
  }

  .demox-slide-frame {
    padding: 22px;
  }

  .demox-slide-body, .demox-steps, .demox-qa-grid {
    grid-template-columns: 1fr;
  }

  .demox-slide-main h2 {
    max-width: none;
    font-size: clamp(34px, 11vw, 52px);
  }

  .demox-slide-copy, .demox-presenter-note p, .demox-qa-card p, .demox-hero-copy p, .demox-hero-panel, .demox-summary-card p, .demox-story-card > p, .demox-page-header p, .demox-principle-card p, .demox-metric-card p {
    font-size: 16px;
  }

  .demox-hero-copy, .demox-hero-panel, .demox-summary-card, .demox-story-card, .demox-cta-band, .demox-page-header {
    padding: 22px;
  }

  .demox-hero-copy h1, .demox-page-header h1 {
    max-width: none;
    font-size: clamp(34px, 11vw, 52px);
  }

  .demox-cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .demox-shell, .demox-hero, .demox-slide-body {
    grid-template-columns: 1fr;
  }
}

.demox-guide-client-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.demox-guide-field {
  background: var(--demox-paper);
  border: 1px solid var(--demox-line);
  border-radius: 8px;
  padding: 12px 14px;
}

.demox-guide-field strong {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--demox-accent);
  margin-bottom: 4px;
  font-size: 10px;
  display: block;
}

.demox-guide-field span {
  color: var(--demox-ink);
  font-size: 14px;
}

.demox-guide-timeline {
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  display: flex;
}

.demox-guide-timeline-row {
  background: var(--demox-paper);
  border: 1px solid var(--demox-line);
  border-radius: 6px;
  gap: 14px;
  padding: 10px 14px;
  display: flex;
}

.demox-guide-timeline-row p {
  color: var(--demox-muted);
  margin: 2px 0 0;
  font-size: 13px;
}

.demox-guide-time {
  min-width: 64px;
  color: var(--demox-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 700;
}

.demox-guide-tip {
  color: var(--demox-accent-deep);
  font-size: 11px;
  font-style: italic;
}

.demox-guide-phrases {
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.demox-guide-phrase {
  background: var(--demox-paper);
  border-left: 3px solid var(--demox-accent);
  color: var(--demox-ink);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.demox-guide-qa-list {
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  display: flex;
}

.demox-guide-qa {
  background: var(--demox-paper);
  border: 1px solid var(--demox-line);
  border-radius: 8px;
  padding: 12px 14px;
}

.demox-guide-qa h3 {
  color: var(--demox-ink);
  margin: 0 0 4px;
  font-size: 13px;
}

.demox-guide-qa p {
  color: var(--demox-muted);
  margin: 0;
  font-size: 12px;
}

.demox-guide-screens {
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.demox-guide-screen-row {
  background: var(--demox-paper);
  border: 1px solid var(--demox-line);
  border-radius: 6px;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.demox-guide-screen-row p {
  color: var(--demox-muted);
  margin: 2px 0 0;
  font-size: 13px;
}

.demox-guide-screen-num {
  color: var(--demox-accent);
  min-width: 32px;
  font-size: 20px;
  font-weight: 800;
}

.demox-guide-checklist-card {
  margin-top: 8px;
}

.demox-guide-checklist-count {
  color: var(--demox-accent);
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
}

.demox-guide-checklist {
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.demox-guide-checklist li.is-done {
  opacity: .5;
}

.demox-guide-checklist li.is-done .demox-guide-check-box {
  background: var(--demox-accent);
  color: #fff;
}

.demox-guide-check-btn {
  background: var(--demox-paper);
  border: 1px solid var(--demox-line);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  transition: background .15s;
  display: flex;
}

.demox-guide-check-btn:hover {
  background: var(--demox-paper-strong);
}

.demox-guide-check-box {
  border: 2px solid var(--demox-accent);
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.not-found-page {
  background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
  min-height: 100vh;
  padding: var(--spacing-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.not-found-content {
  text-align: center;
  max-width: 500px;
}

.not-found-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 96px;
  height: 96px;
  color: var(--primary);
  margin: 0 auto var(--spacing-lg);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.not-found-icon svg {
  color: var(--primary);
}

.not-found-title {
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
  font-size: clamp(64px, 10vw, 96px);
  font-weight: 800;
  line-height: 1;
}

.not-found-subtitle {
  font-size: var(--font-size-4xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.not-found-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.not-found-actions {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.not-found-links {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.not-found-links p {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-sm);
}

.not-found-links nav {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.not-found-links nav a {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.not-found-links nav a:hover {
  text-decoration: underline;
}

.tenant-page {
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 40%);
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.tenant-header {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 24px 32px;
  display: flex;
}

.tenant-logo {
  object-fit: contain;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-lg);
}

.tenant-title {
  font-size: var(--font-size-3xl);
  color: var(--tenant-primary, var(--primary));
  margin: 0;
  font-weight: 700;
}

.tenant-subtitle {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--spacing-xs);
}

.tenant-main {
  gap: var(--spacing-md);
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  padding: 0 24px;
  display: flex;
}

.tenant-subscribe-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: none;
}

.tenant-subscribe-card h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-xs);
}

.tenant-subscribe-card p {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-md);
}

.tenant-subscribe-card.tenant-subscribe-success, .tenant-subscribe-card.tenant-subscribe-success h2 {
  color: var(--success);
}

.tenant-subscribe-form {
  gap: var(--spacing-sm);
  display: flex;
}

@media (max-width: 767px) {
  .tenant-subscribe-form {
    flex-direction: column;
  }
}

.tenant-subscribe-input {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  outline: none;
  flex: 1;
  padding: 10px 14px;
}

.tenant-subscribe-input:focus {
  border-color: var(--tenant-primary, var(--primary));
}

.tenant-subscribe-btn {
  background: var(--tenant-primary, var(--primary));
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  transition: opacity .2s;
}

.tenant-subscribe-btn:hover {
  opacity: .9;
}

.tenant-subscribe-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.tenant-subscribe-error {
  font-size: var(--font-size-xs);
  color: var(--danger);
  margin-top: var(--spacing-sm);
}

.tenant-archive h2 {
  font-size: var(--font-size-md);
  margin: 0 0 var(--spacing-md);
  color: var(--gray-700);
}

.tenant-archive-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.tenant-archive-card {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color .2s;
  display: flex;
}

.tenant-archive-card:hover {
  border-color: var(--tenant-primary, var(--primary));
}

.tenant-archive-icon {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  color: var(--gray-500);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.tenant-archive-info {
  flex-direction: column;
  display: flex;
}

.tenant-archive-info strong {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
}

.tenant-archive-info span {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.tenant-footer {
  text-align: center;
  padding: 40px 24px;
}

.tenant-footer p {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin: 0;
}

.feedback-hero {
  background: linear-gradient(135deg, white 0%, var(--gray-50) 100%);
  text-align: center;
  padding: 120px 0 60px;
}

@media (max-width: 767px) {
  .feedback-hero {
    padding: 100px 0 40px;
  }
}

.feedback-hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.feedback-hero-title {
  font-size: var(--font-size-8xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .feedback-hero-title {
    font-size: var(--font-size-6xl);
  }
}

.feedback-hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.feedback-hero-actions {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.feedback-content {
  padding: 60px 0 80px;
}

.feedback-toolbar {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.feedback-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.feedback-search-icon {
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.feedback-search-input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.feedback-search-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.feedback-search-input::placeholder {
  color: var(--gray-400);
}

.feedback-search-input {
  padding-left: 42px;
}

.feedback-select {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.feedback-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.feedback-select::placeholder {
  color: var(--gray-400);
}

.feedback-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  width: auto;
  min-width: 160px;
  padding-right: 36px;
}

.feedback-sort-group {
  border: 1px solid var(--border-light);
  border-radius: var(--public-radius-md);
  display: flex;
  overflow: hidden;
}

.feedback-sort-btn {
  font-size: var(--font-size-sm);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: none;
  padding: 10px 16px;
  font-weight: 500;
}

.feedback-sort-btn:hover {
  background: var(--gray-50);
}

.feedback-sort-btn.active {
  background: var(--primary);
  color: var(--white);
}

.feedback-list {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.feedback-item {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  gap: var(--spacing-sm);
  transition: all var(--duration-fast);
  align-items: flex-start;
  padding: 12px;
  display: flex;
}

.feedback-item:hover {
  border-color: var(--primary);
}

@media (max-width: 767px) {
  .feedback-item {
    gap: var(--spacing-md);
    flex-direction: column;
  }
}

.feedback-vote-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 60px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: all var(--duration-fast);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  font-weight: 600;
  display: flex;
}

.feedback-vote-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.feedback-vote-btn.voted {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.feedback-item-body {
  flex: 1;
  min-width: 0;
}

.feedback-item-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  text-decoration: none;
  display: block;
}

.feedback-item-title:hover {
  color: var(--primary);
}

.feedback-item-desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.feedback-item-meta {
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.feedback-badge {
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-xs);
  text-transform: capitalize;
  align-items: center;
  padding: 2px 10px;
  font-weight: 600;
  display: inline-flex;
}

.feedback-badge--feature {
  color: #3b82f6;
  background: #3b82f61a;
}

.feedback-badge--bug {
  color: #ef4444;
  background: #ef44441a;
}

.feedback-badge--improvement {
  color: #a855f7;
  background: #a855f71a;
}

.feedback-badge--other {
  background: var(--gray-100);
  color: var(--gray-600);
}

.feedback-status {
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-xs);
  padding: 2px 10px;
  font-weight: 600;
  display: inline-flex;
}

.feedback-status--open {
  color: #22c55e;
  background: #22c55e1a;
}

.feedback-status--in-progress {
  color: var(--primary);
  background: #f6821f1a;
}

.feedback-status--completed {
  color: #3b82f6;
  background: #3b82f61a;
}

.feedback-status--closed {
  background: var(--gray-100);
  color: var(--gray-500);
}

.feedback-comment-count {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-tertiary);
  display: inline-flex;
}

.feedback-detail {
  padding: 120px 0 80px;
}

@media (max-width: 767px) {
  .feedback-detail {
    padding: 100px 0 60px;
  }
}

.feedback-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.feedback-back-link {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.feedback-back-link:hover {
  color: var(--primary);
}

.feedback-detail-header {
  margin-bottom: var(--spacing-md);
}

.feedback-detail-title {
  font-size: var(--font-size-6xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.feedback-detail-meta {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.feedback-detail-desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.feedback-detail-vote {
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
  display: flex;
}

.feedback-comments-section {
  border-top: 1px solid var(--border-light);
  padding-top: var(--spacing-xl);
}

.feedback-comments-title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.feedback-comments-list {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.feedback-comment {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
  padding: var(--spacing-lg);
}

.feedback-comment-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.feedback-comment-author {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.feedback-comment-date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.feedback-comment-content {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.feedback-comment-form {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
  padding: var(--spacing-lg);
}

.feedback-comment-form-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.feedback-form-group {
  margin-bottom: var(--spacing-md);
}

.feedback-form-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: block;
}

.feedback-form-input {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.feedback-form-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.feedback-form-input::placeholder {
  color: var(--gray-400);
}

.feedback-form-textarea {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--public-radius-md);
  width: 100%;
  font-size: var(--font-size-base);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 14px 16px;
}

.feedback-form-textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #f6821f1a;
}

.feedback-form-textarea::placeholder {
  color: var(--gray-400);
}

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

.feedback-form-submit {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.feedback-form-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.feedback-form-submit {
  background: var(--primary);
  color: var(--white);
}

.feedback-form-submit:hover:not(:disabled) {
  background: var(--primary-hover);
}

.feedback-roadmap {
  padding: 120px 0 80px;
}

@media (max-width: 767px) {
  .feedback-roadmap {
    padding: 100px 0 60px;
  }
}

.feedback-roadmap-header {
  text-align: center;
  margin-bottom: 64px;
}

@media (max-width: 767px) {
  .feedback-roadmap-header {
    margin-bottom: 14px;
  }
}

.feedback-roadmap-header {
  margin-bottom: var(--spacing-2xl);
}

.feedback-roadmap-title {
  font-size: var(--font-size-7xl);
  color: var(--gray-900);
  letter-spacing: -.5px;
  margin: 0 0 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .feedback-roadmap-title {
    font-size: var(--font-size-4xl);
  }
}

.feedback-roadmap-subtitle {
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}

.feedback-roadmap-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .feedback-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .feedback-roadmap-grid {
    grid-template-columns: 1fr;
  }
}

.feedback-roadmap-grid {
  align-items: flex-start;
}

.feedback-roadmap-column {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.feedback-roadmap-column-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  padding-bottom: var(--spacing-md);
  border-bottom: 3px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.feedback-roadmap-column-title--planned {
  border-color: #a855f7;
}

.feedback-roadmap-column-title--in-progress {
  border-color: var(--primary);
}

.feedback-roadmap-column-title--completed {
  border-color: #22c55e;
}

.feedback-roadmap-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
  padding: var(--spacing-lg);
}

.feedback-roadmap-card-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

.feedback-roadmap-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.feedback-roadmap-card-meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.feedback-roadmap-votes {
  align-items: center;
  gap: var(--spacing-xs);
  display: inline-flex;
}

.feedback-guidelines {
  padding: 120px 0 80px;
}

@media (max-width: 767px) {
  .feedback-guidelines {
    padding: 100px 0 60px;
  }
}

.feedback-guidelines-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.feedback-guidelines-header {
  text-align: center;
  margin-bottom: 64px;
}

@media (max-width: 767px) {
  .feedback-guidelines-header {
    margin-bottom: 14px;
  }
}

.feedback-guidelines-header {
  margin-bottom: var(--spacing-2xl);
}

.feedback-guidelines-title {
  font-size: var(--font-size-7xl);
  color: var(--gray-900);
  letter-spacing: -.5px;
  margin: 0 0 16px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .feedback-guidelines-title {
    font-size: var(--font-size-4xl);
  }
}

.feedback-guidelines-subtitle {
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}

.feedback-guidelines-section {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.feedback-guidelines-section-title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  display: flex;
}

.feedback-guidelines-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.feedback-guidelines-item {
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  display: flex;
}

.feedback-guidelines-item--do {
  color: #22c55e;
}

.feedback-guidelines-item--dont {
  color: #ef4444;
}

.feedback-guidelines-cta {
  text-align: center;
  margin-top: var(--spacing-2xl);
}

.feedback-guidelines-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.feedback-guidelines-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.feedback-guidelines-btn {
  background: var(--primary);
  color: var(--white);
}

.feedback-guidelines-btn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.feedback-guidelines-btn {
  padding: var(--public-btn-padding-lg);
  font-size: 16px;
}

.feedback-modal-overlay {
  z-index: 1000;
  padding: var(--spacing-lg);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.feedback-modal {
  background: var(--white);
  border-radius: var(--public-radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  padding: var(--spacing-md);
  overflow-y: auto;
}

.feedback-modal-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.feedback-modal-title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  font-weight: 600;
}

.feedback-modal-close {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.feedback-modal-close:hover {
  background: var(--gray-200);
}

.feedback-modal-actions {
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  justify-content: flex-end;
  display: flex;
}

.feedback-modal-cancel {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.feedback-modal-cancel:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.feedback-modal-cancel {
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  background: none;
}

.feedback-modal-cancel:hover:not(:disabled) {
  border-color: var(--black);
  color: var(--black);
}

.feedback-modal-submit {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--public-btn-padding);
  font-size: var(--font-size-base);
  border-radius: var(--public-radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.feedback-modal-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.feedback-modal-submit {
  background: var(--primary);
  color: var(--white);
}

.feedback-modal-submit:hover:not(:disabled) {
  background: var(--primary-hover);
}

.feedback-empty {
  text-align: center;
  padding: var(--spacing-2xl) 0;
  color: var(--text-tertiary);
}

.feedback-empty-icon {
  margin-bottom: var(--spacing-md);
  color: var(--gray-300);
}

.feedback-empty-title {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.feedback-empty-text {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}

.creator-page {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  min-height: calc(100vh - 64px);
}

.creator-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.creator-container-narrow {
  max-width: 700px;
}

.creator-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.creator-spinner {
  animation: 1s linear infinite spin;
}

.creator-spinner-small {
  width: 20px;
  height: 20px;
  animation: 1s linear infinite spin;
}

.creator-error {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-light);
  color: var(--error-dark);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.creator-empty {
  text-align: center;
  padding: var(--spacing-2xl);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}

.creator-empty svg {
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-sm);
}

.creator-empty h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 600;
}

.creator-empty p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.creator-empty-inline {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
}

.creator-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  display: flex;
}

.creator-header h1 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-size: 1.75rem;
  font-weight: 700;
}

.creator-header p {
  color: var(--text-secondary);
}

.creator-header-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.creator-back-link {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  transition: color var(--duration-fast);
  font-size: .875rem;
  text-decoration: none;
  display: flex;
}

.creator-back-link:hover {
  color: var(--primary);
}

.creator-title-row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.creator-btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: none;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

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

.creator-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.creator-btn-secondary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--duration-fast);
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.creator-btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.creator-btn-danger {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--error);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast);
  border: none;
  font-weight: 500;
  display: flex;
}

.creator-btn-danger:hover {
  background: var(--error-dark);
}

.creator-btn-danger:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.creator-btn-text {
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
}

.creator-btn-text:hover {
  text-decoration: underline;
}

.creator-btn-icon {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  justify-content: center;
  align-items: center;
  display: flex;
}

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

.creator-form {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.creator-form-inline {
  padding: var(--spacing-lg);
}

.creator-form-group {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.creator-form-group label {
  color: var(--text-primary);
  font-weight: 500;
}

.creator-form-hint {
  color: var(--text-tertiary);
  font-size: .75rem;
}

.creator-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  transition: border-color var(--duration-fast);
  font-size: 1rem;
}

.creator-input:focus {
  border-color: var(--primary);
  outline: none;
}

.creator-textarea {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  resize: vertical;
  transition: border-color var(--duration-fast);
  font-family: inherit;
  font-size: 1rem;
}

.creator-textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.creator-form-actions {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  display: flex;
}

.creator-input-prefix {
  justify-content: center;
  align-items: center;
  display: flex;
}

.creator-input-prefix span {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  white-space: nowrap;
  border-right: none;
  font-size: .875rem;
}

.creator-input-prefix .creator-input {
  flex: 1;
}

.creator-search {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  display: flex;
}

.creator-search-input {
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  min-width: 150px;
  font-size: .875rem;
}

.creator-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.creator-card-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.creator-card-header h3 {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.creator-preview {
  padding: var(--spacing-lg);
}

.creator-preview-header {
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
}

.creator-preview-field {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

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

.creator-preview-label {
  color: var(--text-secondary);
  min-width: 80px;
  font-weight: 500;
}

.creator-preview-value {
  color: var(--text-primary);
}

.creator-preview-muted {
  color: var(--text-tertiary);
}

.creator-preview-content {
  color: var(--text-primary);
  line-height: 1.5;
}

.creator-preview-content p {
  margin-bottom: var(--spacing-md);
}

.creator-danger-zone {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--error-light);
  border: 1px solid var(--error);
}

.creator-danger-zone h3 {
  color: var(--error-dark);
  margin-bottom: var(--spacing-xs);
  font-size: 1rem;
  font-weight: 600;
}

.creator-danger-zone p {
  color: var(--error-dark);
  margin-bottom: var(--spacing-md);
  font-size: .875rem;
}

.creator-profile-setup {
  padding: var(--spacing-md);
  text-align: center;
}

.creator-profile-setup p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.creator-profile-link {
  padding: var(--spacing-lg);
}

.creator-profile-link p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.creator-share-link {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.creator-share-link code {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-overflow: ellipsis;
  flex: 1;
  font-family: monospace;
  font-size: .875rem;
  overflow: hidden;
}

.email-section-tabs {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.email-section-tab {
  background: var(--white);
  border: 1px solid var(--border-light);
  color: inherit;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  display: flex;
}

.email-section-tab:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-light));
  box-shadow: none;
  transform: translateY(-1px);
}

.email-section-tab strong {
  color: var(--text-primary);
  margin-bottom: 2px;
  font-size: .95rem;
  display: block;
}

.email-section-tab small {
  color: var(--text-secondary);
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
}

.email-section-tab.active {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border-light));
  background: color-mix(in srgb, var(--primary) 5%, white);
}

.email-section-tab__icon {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  width: 34px;
  height: 34px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.email-section-tab__content {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.creator-stats-bar {
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.creator-stat {
  text-align: center;
}

.creator-stat-value {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.creator-stat-label {
  color: var(--text-secondary);
  font-size: .75rem;
}

.creator-stats-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.creator-stat-card {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .2s, background .2s;
  display: flex;
}

.creator-stat-card:hover, .creator-stat-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.creator-stat-card.active .creator-stat-icon {
  background: var(--primary);
  color: var(--white);
}

.creator-stat-card .creator-stat-value {
  font-size: 1.25rem;
}

.creator-stat-card .creator-stat-label {
  font-size: .875rem;
}

.creator-stat-icon {
  background: var(--primary-light);
  width: 48px;
  height: 48px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.creator-stat-content {
  flex-direction: column;
  display: flex;
}

.creator-status {
  text-transform: uppercase;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 500;
  display: inline-block;
}

.status-scheduled {
  background: var(--info-light);
  color: var(--info-dark);
}

.status-sending {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.status-sent {
  background: var(--success-light);
  color: var(--success-dark);
}

.creator-tabs {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-xs);
  display: flex;
}

.creator-tab {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  border: none;
  font-size: .9375rem;
  font-weight: 500;
  display: flex;
  position: relative;
}

.creator-tab:after {
  content: "";
  bottom: calc(-1 * var(--spacing-xs)  - 1px);
  height: 2px;
  transition: background var(--duration-fast);
  background: none;
  position: absolute;
  left: 0;
  right: 0;
}

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

.creator-tab.active {
  color: var(--primary);
  background: var(--primary-light);
}

.creator-tab.active:after, .creator-tab.active .creator-tab-badge {
  background: var(--primary);
}

.creator-tab-badge {
  background: var(--text-muted);
  min-width: 20px;
  height: 20px;
  color: var(--white);
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
}

.creator-stats-mini {
  gap: var(--spacing-sm);
  display: flex;
}

.creator-stat-mini {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 70px;
  display: flex;
}

.creator-stat-mini .creator-stat-value {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.creator-stat-mini .creator-stat-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .75rem;
}

.editor-with-brand {
  flex-direction: column;
  height: 100vh;
  display: flex;
}

.editor-with-brand .newsletter-editor-layout {
  flex: 1;
  min-height: 0;
}

.brand-picker {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  z-index: 10;
  flex-shrink: 0;
  padding: 6px 16px;
  display: flex;
}

.brand-picker label {
  white-space: nowrap;
  font-weight: 600;
}

.brand-picker select {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  max-width: 200px;
  padding: 4px 8px;
}

.creator-container-wide {
  max-width: 1400px;
}

.creator-editor-loading {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  min-height: 300px;
  color: var(--text-muted);
  justify-content: center;
  align-items: center;
  font-size: .875rem;
  display: flex;
}

.creator-form-editor {
  gap: var(--spacing-md);
  grid-template-columns: 280px 1fr;
  align-items: start;
  display: grid;
}

.creator-form-sidebar {
  top: var(--spacing-xl);
  gap: var(--spacing-md);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--spacing-lg);
  flex-direction: column;
  display: flex;
  position: sticky;
}

.creator-form-main {
  min-width: 0;
}

.creator-form-group-editor {
  flex: 1;
}

.creator-form-actions-sidebar {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  flex-direction: column;
  display: flex;
}

.creator-btn-full {
  justify-content: center;
  width: 100%;
}

.creator-template-badge {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-light);
  color: var(--primary);
  margin-top: var(--spacing-xs);
  font-size: .8125rem;
  font-weight: 500;
  display: flex;
}

.creator-preview-html {
  line-height: 1.5;
}

.creator-preview-html h1, .creator-preview-html h2, .creator-preview-html h3 {
  color: var(--text-primary);
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.3;
}

.creator-preview-html h1:first-child, .creator-preview-html h2:first-child, .creator-preview-html h3:first-child {
  margin-top: 0;
}

.creator-preview-html h1 {
  font-size: 1.75rem;
}

.creator-preview-html h2 {
  font-size: 1.375rem;
}

.creator-preview-html h3 {
  font-size: 1.125rem;
}

.creator-preview-html p {
  margin-bottom: 1em;
}

.creator-preview-html ul, .creator-preview-html ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.creator-preview-html li {
  margin-bottom: .5em;
}

.creator-preview-html blockquote {
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--primary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin: 1.5em 0;
  font-style: italic;
}

.creator-preview-html a {
  color: var(--primary);
  text-decoration: underline;
}

.creator-preview-html img {
  max-width: 100%;
  height: auto;
  margin: var(--spacing-md) 0;
}

.newsletter-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  width: 100%;
  display: grid;
}

.newsletter-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  transition: all var(--duration-fast);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.newsletter-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.newsletter-card:hover .newsletter-card-placeholder svg {
  color: var(--primary);
}

.newsletter-card:hover .newsletter-card-action {
  color: var(--primary-hover);
}

.newsletter-card-button {
  padding: 0;
}

.newsletter-card-main {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  padding: 0;
  display: block;
}

.newsletter-card-thumbnail {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  justify-content: center;
  align-items: center;
  height: 140px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.newsletter-card-preview-wrapper {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.newsletter-card-preview {
  transform-origin: top;
  pointer-events: none;
  background: var(--white);
  border: none;
  width: 600px;
  height: 900px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%)scale(.25);
}

.newsletter-card-preview-overlay {
  z-index: 2;
  background: none;
  position: absolute;
  inset: 0;
}

.newsletter-card-placeholder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.newsletter-card-placeholder svg {
  color: var(--text-tertiary);
  transition: color var(--duration-fast);
}

.newsletter-card-status {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: .625rem;
  font-weight: 600;
  display: inline-flex;
  position: absolute;
}

.newsletter-card-scheduled {
  font-size: var(--font-size-xs);
  color: var(--warning-dark, #92400e);
  background: var(--warning-light, #fef3c7);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px 8px;
  display: flex;
}

.newsletter-card-sent .newsletter-card-placeholder {
  background: linear-gradient(135deg, var(--success-light) 0%, #22c55e26 100%);
}

.newsletter-card-sent .newsletter-card-placeholder svg {
  color: var(--success);
}

.newsletter-card-sent .newsletter-card-action {
  color: var(--text-secondary);
}

.newsletter-card-sent:hover .newsletter-card-action {
  color: var(--success);
}

.newsletter-card-content {
  padding: var(--spacing-md);
  flex: 1;
}

.newsletter-card-content h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9375rem;
  font-weight: 600;
  overflow: hidden;
}

.newsletter-card-subject {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .8125rem;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.newsletter-card-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  font-size: .6875rem;
  display: flex;
}

.newsletter-card-date, .newsletter-card-sends {
  color: var(--text-tertiary);
}

.newsletter-card-sends {
  align-items: center;
  gap: 4px;
  display: flex;
}

.newsletter-card-sends:before {
  content: "•";
  margin-right: var(--spacing-xs);
}

.newsletter-card-title {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9375rem;
  font-weight: 600;
  overflow: hidden;
}

.newsletter-card-creator {
  color: var(--text-tertiary);
  margin-top: var(--spacing-xs);
  align-items: center;
  gap: 4px;
  font-size: .6875rem;
  display: flex;
}

.newsletter-card-actions {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.newsletter-card-actions-inline {
  justify-content: space-between;
}

.newsletter-card-action-hint {
  color: var(--text-tertiary);
  font-size: .75rem;
}

.newsletter-card-action {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--primary);
  transition: all var(--duration-fast);
  background: none;
  border: 0;
  padding: 0;
  font-size: .8125rem;
  font-weight: 500;
  display: flex;
}

.newsletter-card-action-primary {
  flex: none;
  text-decoration: none;
}

.newsletter-preview-modal {
  max-width: 1120px;
}

.newsletter-preview-modal-header {
  align-items: flex-start;
}

.newsletter-preview-modal-header p {
  margin: 4px 0 0;
}

.newsletter-preview-modal-body {
  max-height: 78vh;
}

.newsletter-preview-modal-footer {
  background: var(--bg-elevated);
}

.newsletter-preview-empty {
  padding: var(--spacing-md);
}

.newsletter-table-title {
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  display: flex;
}

.newsletter-table-title strong {
  color: var(--text-primary);
  transition: color var(--duration-fast);
  font-size: .9375rem;
  font-weight: 600;
}

.newsletter-table-title span {
  color: var(--text-secondary);
  font-size: .8125rem;
  line-height: 1.45;
}

.newsletter-table-title:hover strong {
  color: var(--primary);
}

.newsletter-table-edit {
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: .8125rem;
  font-weight: 500;
  display: inline-flex;
}

.newsletter-table-edit:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-light));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, white);
}

.newsletter-grid-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-3xl);
  color: var(--text-tertiary);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.newsletter-card-skeleton .newsletter-card-thumbnail {
  background: var(--bg-secondary);
}

.creator-table-wrapper {
  overflow-x: auto;
}

.creator-table {
  border-collapse: collapse;
  width: 100%;
}

.creator-table th, .creator-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.creator-table th {
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 600;
}

.creator-table td {
  color: var(--text-primary);
  font-size: .875rem;
}

.creator-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.creator-cell {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.creator-name {
  color: var(--text-primary);
  font-weight: 500;
}

.creator-email {
  font-size: var(--font-size-sm);
  color: var(--primary);
}

.creator-company {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.sent-newsletter-layout {
  background: var(--bg-secondary);
  min-height: calc(100vh - 64px);
  display: flex;
}

.sent-newsletter-main {
  padding: var(--spacing-lg);
  flex: 1;
  overflow: auto;
}

.sent-newsletter-sidebar {
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-light);
  width: 320px;
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
  flex-direction: column;
  flex-shrink: 0;
  display: flex;
}

.sent-newsletter-alert-compact {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: .75rem;
  display: flex;
}

.sent-newsletter-alert-compact svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.sent-newsletter-info {
  flex: 1;
}

.sent-newsletter-info-header {
  margin-bottom: var(--spacing-md);
}

.sent-newsletter-title {
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.sent-newsletter-meta {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.sent-newsletter-meta-row {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.sent-newsletter-meta-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  font-size: .625rem;
  font-weight: 600;
}

.sent-newsletter-meta-value {
  color: var(--text-primary);
  word-break: break-word;
  font-size: .8125rem;
}

.sent-newsletter-duplicate-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--primary);
  color: var(--primary-text);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: none;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
}

.sent-newsletter-duplicate-btn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.sent-newsletter-duplicate-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.sent-newsletter-duplicate-btn .btn-spinner {
  animation: 1s linear infinite spin;
}

.sent-newsletter-preview {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  flex-direction: column;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.sent-newsletter-preview-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
}

.sent-newsletter-preview-header h2 {
  color: var(--text-primary);
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}

.sent-newsletter-back {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.sent-newsletter-back:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.sent-newsletter-preview-frame {
  background: var(--white);
  flex: 1;
  min-height: 500px;
}

.sent-newsletter-iframe {
  border: none;
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.sent-newsletter-preview-text {
  padding: var(--spacing-md);
}

.sent-newsletter-preview-text pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-primary);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.6;
}

.delivery-stats-card {
  background: var(--bg-secondary);
  padding: var(--spacing-md);
}

.delivery-stats-title {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md) 0;
  font-size: .75rem;
  font-weight: 600;
}

.delivery-stats-grid {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.delivery-stat {
  background: var(--bg-elevated);
  padding: var(--spacing-sm);
  text-align: center;
}

.delivery-stat-value {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  display: block;
}

.delivery-stat-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-size: .625rem;
  display: block;
}

.delivery-stat-success .delivery-stat-value {
  color: var(--success);
}

.delivery-stat-info .delivery-stat-value {
  color: var(--primary);
}

.delivery-stat-danger .delivery-stat-value {
  color: var(--error);
}

.delivery-rates {
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.delivery-rate {
  text-align: center;
  flex: 1;
}

.delivery-rate-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
  font-size: .625rem;
  display: block;
}

.delivery-rate-value {
  color: var(--text-primary);
  font-size: .875rem;
  font-weight: 600;
}

.delivery-recipients-toggle {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  background: none;
  font-size: .75rem;
  font-weight: 500;
  display: flex;
}

.delivery-recipients-toggle:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
}

.delivery-recipients-toggle svg {
  transition: transform var(--duration-fast);
}

.delivery-recipients-list {
  margin-top: var(--spacing-md);
  gap: var(--spacing-xs);
  flex-direction: column;
  max-height: 300px;
  display: flex;
  overflow-y: auto;
}

.delivery-recipient {
  background: var(--bg-elevated);
  padding: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.delivery-recipient-info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.delivery-recipient-email {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .75rem;
  font-weight: 500;
  overflow: hidden;
}

.delivery-recipient-name {
  color: var(--text-tertiary);
  font-size: .625rem;
}

.delivery-recipient-status {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 6px;
  font-size: .625rem;
  font-weight: 600;
  display: flex;
}

.delivery-status-sent {
  background: var(--success-light);
  color: var(--success);
}

.delivery-status-opened {
  background: var(--primary-light);
  color: var(--primary);
}

.delivery-status-bounced {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.delivery-status-failed {
  background: var(--error-light);
  color: var(--error);
}

.delivery-status-pending {
  background: var(--gray-200);
  color: var(--gray-600);
}

.delivery-recipient-error {
  width: 100%;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--error-light);
  color: var(--error);
  word-break: break-word;
  font-size: .625rem;
}

.audience-stat-card {
  text-align: center;
  cursor: pointer;
  background: #ffffffeb;
  border: 1px solid #e6e8ef;
  border-radius: 18px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  display: flex;
}

.audience-stat-card.is-active {
  box-shadow: none;
  border-color: #ef444440;
}

.audience-stat-card--total.is-active {
  background: #fff4f3;
}

.audience-stat-card--active.is-active {
  background: #f0fdf4;
}

.audience-stat-card--inactive.is-active {
  background: #f8fafc;
}

.audience-stat-card--bounced.is-active {
  background: #fff1f2;
}

.audience-stat-card--bounced .audience-stat-card__value {
  color: #ef4444;
}

.audience-layout:has(.audience-sidebar) {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.audience-main {
  min-width: 0;
}

.audience-sidebar-empty {
  border-radius: 22px;
}

.audience-sidebar-empty__body {
  color: var(--text-secondary);
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  line-height: 1.6;
  display: flex;
}

.audience-panel {
  background: var(--white);
  flex-direction: column;
  min-height: calc(100vh - 200px);
  display: flex;
}

.audience-panel__subtitle {
  color: var(--text-secondary);
  margin: 0;
}

.audience-toolbar {
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 16px;
  display: flex;
}

.audience-search {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  width: min(100%, 340px);
  color: var(--text-tertiary);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.audience-search input {
  width: 100%;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  background: none;
  border: 0;
  outline: 0;
}

.audience-filter-select {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 8px 12px;
}

.audience-filter-select:focus {
  border-color: var(--primary);
  outline: none;
}

.audience-empty-state {
  color: var(--text-secondary);
  text-align: center;
  padding: 48px 24px;
}

.audience-table-shell {
  flex: 1;
  overflow-x: auto;
}

.audience-table th {
  font-size: var(--font-size-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--white);
  white-space: nowrap;
  font-weight: 700;
}

.audience-table td {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.audience-subscriber-cell__meta {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.audience-subscriber-cell__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.3;
}

.audience-subscriber-cell__email {
  color: var(--text-tertiary);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.3;
  overflow: hidden;
}

.audience-status-badge {
  font-size: var(--font-size-2xs);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 3px 8px;
  font-weight: 600;
  display: inline-flex;
}

.audience-engagement__value, .audience-muted-cell {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.audience-source-pill {
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

.audience-tag {
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  justify-content: center;
  align-items: center;
  padding: 3px 8px;
  font-weight: 600;
  display: inline-flex;
}

.audience-icon-button {
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: color .15s, background .15s;
  display: inline-flex;
}

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

.audience-table-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  margin-top: auto;
  padding: 14px 16px;
  display: flex;
}

.audience-table-footer__pager button {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--white);
  min-width: 30px;
  height: 30px;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  display: inline-flex;
}

.audience-table-footer__pager button.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.audience-table-footer__pager button:not(:disabled):hover {
  background: var(--bg-secondary);
}

.audience-table-footer__pager button.is-active:hover {
  background: var(--primary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .audience-stats-grid, .audience-layout {
    grid-template-columns: 1fr;
  }

  .audience-header-actions {
    width: 100%;
  }

  .audience-table-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .audience-panel__header, .audience-toolbar, .audience-table-footer {
    padding-inline: 16px;
  }

  .audience-subscriber-cell {
    min-width: 200px;
  }

  .audience-stats-grid {
    gap: 10px;
  }

  .audience-stat-card {
    padding: 14px;
  }
}

.nl-gallery-toolbar {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.nl-gallery-search {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  width: min(100%, 300px);
  color: var(--text-tertiary);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: flex;
}

.nl-gallery-search input {
  width: 100%;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  background: none;
  border: 0;
  outline: 0;
}

.nl-gallery-filter {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: 8px 12px;
}

.nl-gallery-count {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}

.nl-gallery-loading, .nl-gallery-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 48px;
}

.nl-gallery-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  display: grid;
}

.nl-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: box-shadow .15s;
  overflow: hidden;
}

.nl-card:hover {
  box-shadow: none;
}

.nl-card:hover .nl-card-overlay {
  opacity: 1;
}

.nl-card-thumb {
  background: var(--gray-100);
  height: 180px;
  position: relative;
  overflow: hidden;
}

.nl-card-iframe {
  transform-origin: top;
  pointer-events: none;
  background: var(--white);
  border: none;
  width: 600px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)scale(.4);
}

.nl-card-blank {
  height: 100%;
  color: var(--text-tertiary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.nl-card-overlay {
  opacity: 0;
  background: #0006;
  justify-content: center;
  align-items: center;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  inset: 0;
}

.nl-card-action {
  background: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 500;
  display: flex;
}

.nl-card-info {
  padding: 12px;
}

.nl-card-title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.nl-card-subject {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  overflow: hidden;
}

.nl-card-meta {
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: 8px;
  display: flex;
}

.nl-card-date {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.subscriber-detail__body {
  gap: var(--spacing-md);
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.subscriber-detail__profile {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
}

.subscriber-detail__avatar {
  background: var(--primary);
  width: 48px;
  height: 48px;
  color: var(--white);
  font-size: var(--font-size-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.subscriber-detail__name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.subscriber-detail__email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.subscriber-detail__stats {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  display: grid;
}

.subscriber-detail__stat {
  color: var(--text-secondary);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.subscriber-detail__stat-value {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 700;
}

.subscriber-detail__stat-label {
  color: var(--text-secondary);
  font-size: 11px;
}

.subscriber-detail__engagement {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.subscriber-detail__engagement-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.subscriber-detail__info {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.subscriber-detail__info-row {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  display: flex;
}

.subscriber-detail__info-row strong {
  color: var(--text-primary);
  margin-left: auto;
}

.subscriber-detail__actions {
  padding-top: 8px;
}

.subscriber-detail__action-btn {
  width: 100%;
  font-size: var(--font-size-sm);
  justify-content: center;
  gap: 6px;
}

@media (max-width: 900px) {
  .sent-newsletter-layout {
    flex-direction: column;
  }

  .sent-newsletter-sidebar {
    border-left: none;
    border-top: 1px solid var(--border-light);
    order: -1;
    width: 100%;
  }

  .sent-newsletter-main {
    padding: var(--spacing-md);
  }

  .creator-form-editor {
    grid-template-columns: 1fr;
  }

  .creator-form-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .creator-stats-mini {
    display: none;
  }

  .email-section-tabs {
    grid-template-columns: 1fr;
  }

  .creator-tabs {
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
  }

  .creator-tab {
    white-space: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
    flex: none;
    font-size: .875rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .creator-page {
    padding: var(--spacing-md);
  }

  .creator-header {
    flex-direction: column;
    align-items: stretch;
  }

  .creator-header-actions {
    justify-content: flex-end;
  }

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

  .creator-input-prefix {
    flex-direction: column;
    align-items: stretch;
  }

  .creator-input-prefix span {
    border-right: 1px solid var(--border-light);
    border-bottom: none;
  }

  .creator-input-prefix .creator-input {
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  .creator-page {
    padding: 14px 12px 24px;
  }

  .creator-header {
    margin-bottom: var(--spacing-sm);
  }

  .creator-header h1 {
    font-size: 1.5rem;
    line-height: 1.15;
  }
}

.campaigns-page {
  background: var(--white);
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.campaigns-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.campaigns-header {
  margin-bottom: 10px;
}

.campaigns-header-content h1 {
  margin-bottom: 0;
}

.campaigns-header-content p {
  font-size: .95rem;
}

.campaigns-primary-panel, .campaigns-secondary-panel {
  margin-bottom: 18px;
}

.campaigns-primary-panel .campaigns-existing-section {
  margin: 0;
}

.campaigns-primary-panel .campaigns-existing-header {
  display: none;
}

.campaigns-primary-panel .cl-table {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
}

.campaigns-secondary-panel .campaign-templates-section {
  margin-bottom: 0;
  padding: 0 18px 18px;
}

.campaigns-secondary-panel .campaign-templates-header {
  display: none;
}

.campaigns-empty {
  text-align: center;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-light);
  padding: 64px 32px;
}

.campaigns-empty-icon {
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.campaigns-empty h2 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
}

.campaigns-empty p {
  color: var(--text-secondary);
  max-width: 400px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.campaigns-tabs {
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  gap: 0;
  display: flex;
}

.campaigns-tab {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.campaigns-tab:hover {
  color: var(--text-primary);
}

.campaigns-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.campaigns-tab-count {
  background: var(--gray-100);
  min-width: 20px;
  height: 20px;
  font-size: var(--font-size-2xs);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-weight: 700;
  display: inline-flex;
}

.campaigns-tab.is-active .campaigns-tab-count {
  background: var(--primary-light);
  color: var(--primary);
}

.campaigns-loading-text {
  text-align: center;
  color: var(--text-secondary);
  padding: 48px;
}

.campaigns-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  display: grid;
}

.campaigns-fetch-error {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  margin-top: 24px;
  padding: 10px 12px;
  display: flex;
}

.campaigns-fetch-error svg {
  flex-shrink: 0;
}

.campaign-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  padding: 16px;
  transition: box-shadow .2s, border-color .2s;
}

.campaign-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.campaign-card-header {
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: 16px;
  display: flex;
}

.campaign-card-icon {
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.campaign-card-title {
  flex: 1;
  min-width: 0;
}

.campaign-card-title h3 {
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  overflow: hidden;
}

.campaign-type-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.campaign-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 16px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.campaign-card-stats {
  gap: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
  padding: 16px 0;
  display: flex;
}

.campaign-stat {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.campaign-stat-value {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.campaign-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.campaign-card-actions {
  gap: var(--spacing-md-sm);
  display: flex;
}

.campaign-card-actions .btn-secondary, .campaign-card-actions .btn-primary {
  flex: 1;
  justify-content: center;
}

.cc-card {
  gap: var(--spacing-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  color: inherit;
  flex-direction: column;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cc-card:hover {
  box-shadow: 0 12px 32px #0000001a, 0 0 0 1px var(--type-color), 0 8px 20px color-mix(in srgb, var(--type-color) 20%, transparent);
  border-color: var(--type-color);
  transform: translateY(-4px);
}

.cc-card:hover .cc-card__action {
  background: var(--type-color);
  color: var(--white);
}

.cc-card:hover .cc-card__accent {
  width: 5px;
}

.cc-card:hover .cc-card__progress-fill {
  filter: brightness(1.1);
}

.cc-card__accent {
  background: var(--type-color);
  border-radius: 0 2px 2px 0;
  width: 4px;
  transition: width .2s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.cc-card__header {
  align-items: flex-start;
  gap: var(--spacing-md);
  padding-left: var(--spacing-xs);
  display: flex;
}

.cc-card__icon {
  border-radius: var(--radius-lg);
  background-color: var(--type-color-bg, #3b82f614);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.cc-card__title-group {
  flex: 1;
  min-width: 0;
}

.cc-card__title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0 2px;
  font-weight: 600;
  overflow: hidden;
}

.cc-card__type {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.cc-card__status {
  font-size: var(--font-size-2xs);
  letter-spacing: .03em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 3px 10px;
  font-weight: 700;
}

.cc-card__status--active {
  background: var(--success-bg, #22c55e1f);
  color: var(--success, #16a34a);
  border: 1px solid var(--success-border, #22c55e40);
}

.cc-card__status--paused {
  background: var(--warning-bg, #f59e0b1f);
  color: var(--warning, #d97706);
  border: 1px solid var(--warning-border, #f59e0b40);
}

.cc-card__status--draft {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.cc-card__status--archived {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1px solid var(--border-light);
}

.cc-card__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  padding-left: var(--spacing-xs);
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.cc-card__progress {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding-left: calc(var(--spacing-xs)  + var(--spacing-md));
}

.cc-card__progress-header {
  margin-bottom: var(--spacing-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cc-card__progress-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.cc-card__progress-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.cc-card__progress-bar {
  background: var(--border-light);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}

.cc-card__progress-fill {
  border-radius: var(--radius-full);
  background-color: var(--type-color, var(--primary));
  height: 100%;
  transition: width .3s;
}

.cc-card__stats {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.cc-card__stat {
  padding: var(--spacing-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.cc-card__stat-value {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 700;
}

.cc-card__stat-label {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
}

.cc-card__footer {
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cc-card__schedule {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
}

.cc-card__action {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.cl-table {
  background: none;
  border: 1px solid #eef1f6;
  border-radius: 0;
  overflow: hidden;
}

.cl-header-row {
  color: #9aa3b2;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  background: #fbfcfe;
  border-bottom: 1px solid #eef1f6;
  grid-template-columns: 1.5fr 90px 80px 110px 110px auto;
  align-items: center;
  padding: 12px 18px;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
}

.cl-row {
  border-bottom: 1px solid #eef1f6;
  grid-template-columns: 1.5fr 90px 80px 110px 110px auto;
  align-items: center;
  padding: 16px 18px;
  transition: background .15s;
  display: grid;
}

.cl-row:last-child {
  border-bottom: none;
}

.cl-row:hover {
  background: #fff8f7;
}

.cl-col-name {
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  display: flex;
}

.cl-icon {
  color: #ef4444;
  background: #fee2e2;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: flex;
}

.cl-name-group {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cl-name {
  color: #182132;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .95rem;
  font-weight: 700;
  overflow: hidden;
}

.cl-type {
  color: #8b96a8;
  font-size: .78rem;
}

.cl-col-status {
  display: flex;
}

.cl-status {
  text-transform: uppercase;
  letter-spacing: .3px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
}

.cl-status--active {
  background: var(--success-light);
  color: var(--success);
}

.cl-status--paused {
  background: var(--warning-light);
  color: var(--warning);
}

.cl-status--archived {
  background: var(--gray-100);
  color: var(--gray-500);
}

.cl-col-stat {
  color: #182132;
  text-align: center;
  font-size: .86rem;
  font-weight: 500;
}

.cl-col-schedule {
  color: #8b96a8;
  font-size: .78rem;
}

.cl-col-actions {
  gap: var(--spacing-xs);
  justify-content: flex-end;
  display: flex;
}

.cl-btn {
  white-space: nowrap;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.cl-btn--primary {
  background: var(--primary);
  color: var(--white);
}

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

.cl-btn--secondary {
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  background: none;
}

.cl-btn--secondary:hover {
  border-color: var(--gray-400);
  color: var(--text-primary);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cl-header-row, .cl-row {
    grid-template-columns: 1.5fr 80px 60px 60px auto;
  }

  .cl-col-schedule {
    display: none;
  }
}

@media (max-width: 767px) {
  .cl-header-row {
    display: none;
  }

  .cl-row {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: 12px 16px;
    display: flex;
  }

  .cl-col-name, .cl-col-actions {
    width: 100%;
  }
}

.btn-template-use, .btn-template-preview, .btn-retry, .btn-send, .btn-send-now, .btn-danger-outline, .btn-danger, .btn-success, .btn-warning, .btn-secondary, .btn-primary {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.btn-template-use:disabled, .btn-template-preview:disabled, .btn-retry:disabled, .btn-send:disabled, .btn-send-now:disabled, .btn-danger-outline:disabled, .btn-danger:disabled, .btn-success:disabled, .btn-warning:disabled, .btn-secondary:disabled, .btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-primary {
  color: var(--white);
  background: var(--primary);
}

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

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

.btn-secondary:hover:not(:disabled) {
  background: var(--border-light);
}

.btn-warning {
  color: var(--white);
  background: var(--warning, #f59e0b);
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
}

.btn-success {
  color: var(--white);
  background: var(--success);
}

.btn-success:hover:not(:disabled) {
  opacity: .9;
}

.btn-danger {
  color: var(--white);
  background: var(--error, #ef4444);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-danger-outline {
  color: var(--error, #ef4444);
  border: 1px solid var(--error, #ef4444);
  background: none;
}

.btn-danger-outline:hover:not(:disabled) {
  background: #ef444414;
}

.btn-send-now {
  color: var(--white);
  box-shadow: none;
  background: linear-gradient(135deg, #10b981, #059669);
}

.btn-send-now:hover:not(:disabled) {
  box-shadow: none;
  background: linear-gradient(135deg, #059669, #047857);
}

.btn-send {
  background: var(--primary);
  color: var(--white);
}

.btn-send:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-text {
  color: var(--primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  font-weight: 500;
  text-decoration: none;
}

.btn-text:hover {
  text-decoration: underline;
}

.btn-retry {
  color: var(--primary);
  border: 1px solid var(--primary);
  font-size: var(--font-size-xs);
  background: none;
  padding: 6px 12px;
}

.btn-template-preview {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  flex: 1;
}

.btn-template-preview:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-template-use {
  color: var(--white);
  background: var(--primary);
  flex: 1;
}

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

.campaign-type-badge {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  padding: 3px 10px;
  font-weight: 600;
}

.campaign-status-badge {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  padding: 3px 10px;
  font-weight: 600;
}

.status-active {
  background: var(--success-light);
  color: var(--success-dark);
}

.status-paused {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.status-archived {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.status-draft {
  background: var(--info-light);
  color: var(--info-dark);
}

.campaign-draft-notice {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--info-light);
  color: var(--info-dark);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
  display: flex;
}

.status-badge.status-completed {
  color: #6366f1;
  background: #6366f11a;
}

.campaign-desc {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
}

.campaign-detail-stats {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (max-width: 640px) {
  .campaign-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.campaign-detail-stats .stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: all .2s;
}

.campaign-detail-stats .stat-card:hover {
  box-shadow: none;
}

.stat-value {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  letter-spacing: -.02em;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.stats-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.campaign-types-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding: 16px;
  display: grid;
}

.campaign-type-card {
  text-align: left;
  background: var(--bg-secondary);
  cursor: pointer;
  border: 2px solid #0000;
  padding: 10px;
  transition: border-color .2s, background .2s;
}

.campaign-type-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.campaign-type-card h3 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.campaign-type-card p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  line-height: 1.5;
}

.campaign-type-icon {
  background: var(--white);
  width: 36px;
  height: 36px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.campaign-type-card-wrapper {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.campaign-type-card-wrapper--disabled {
  opacity: .5;
  pointer-events: none;
}

.campaign-type-card-wrapper--disabled .campaign-type-preview-btn {
  pointer-events: auto;
  opacity: 1;
}

.campaign-type-preview-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  border: 1px dashed var(--border-light);
  cursor: pointer;
  background: none;
  padding: 8px 12px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.campaign-type-preview-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light);
}

.campaign-type-preview-btn svg {
  opacity: .7;
}

.campaign-type-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-size: var(--font-size-md);
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  font-weight: 500;
  display: flex;
}

.campaign-category-badge {
  background: var(--secondary-light);
  color: var(--secondary);
  font-size: var(--font-size-md);
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  font-weight: 500;
  display: flex;
}

.campaign-templates-section {
  margin-bottom: 48px;
}

.campaign-templates-header {
  margin-bottom: 16px;
}

.campaign-templates-header h2 {
  color: var(--text-primary);
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
}

.campaign-templates-header p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.campaign-templates-gallery {
  gap: var(--spacing-md-lg);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  display: grid;
}

.campaign-template-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  flex-direction: column;
  padding: 10px;
  transition: all .2s;
  display: flex;
  position: relative;
}

.campaign-template-card.has-campaigns {
  border-color: var(--success-border);
  background: linear-gradient(#10b98105 0%, #fff 100%);
}

.campaign-template-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.campaign-template-count {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  font-size: var(--font-size-sm);
  color: var(--success-text);
  padding: 4px 10px;
  font-weight: 500;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.campaign-template-count span {
  font-weight: 700;
}

.campaign-template-icon {
  background: var(--primary-light);
  width: 56px;
  height: 56px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.campaign-template-icon svg {
  width: 28px;
  height: 28px;
}

.campaign-template-content {
  flex: 1;
}

.campaign-template-content h3 {
  color: var(--text-primary);
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.campaign-template-content p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}

.campaign-template-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  margin-bottom: 16px;
  display: flex;
}

.campaign-template-schedule {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 4px 10px;
  display: flex;
}

.campaign-template-schedule svg {
  opacity: .7;
}

.campaign-template-actions {
  gap: var(--spacing-sm-md);
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  display: flex;
}

.campaign-form {
  padding: 16px;
}

.form-group input, .form-group textarea, .form-group select {
  border: 1px solid var(--border-light);
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.form-error {
  background: var(--error-light);
  color: var(--error-dark);
  font-size: var(--font-size-base);
  margin-bottom: 10px;
  padding: 12px 16px;
}

.form-actions {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-md-sm);
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  display: flex;
}

.audience-selector {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.audience-type-selector {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.audience-type-option {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background-color .15s;
  display: flex;
}

.audience-type-option:hover {
  background: var(--gray-50);
}

.audience-type-option.active {
  border-color: var(--primary);
  background: var(--primary-lighter, #3b82f60d);
}

.audience-type-text {
  flex-direction: column;
  display: flex;
}

.audience-type-label {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.audience-type-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.audience-checklist {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  max-height: 180px;
  padding: var(--spacing-xs);
  flex-direction: column;
  gap: 2px;
  display: flex;
  overflow-y: auto;
}

.audience-checklist--compact {
  max-height: 120px;
}

.audience-check-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  display: flex;
}

.audience-check-item:hover {
  background: var(--gray-50);
}

.audience-check-item input[type="checkbox"] {
  flex-shrink: 0;
}

.audience-check-name {
  color: var(--text-primary);
  flex: 1;
}

.audience-check-count {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.audience-tag-dot {
  background: var(--tag-color, var(--gray-400));
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.audience-empty-state {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  display: flex;
}

.audience-exclude-section {
  margin-top: var(--spacing-xs);
}

.audience-exclude-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  display: flex;
}

.audience-preview-row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.audience-preview-result {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.audience-preview-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  display: flex;
}

.audience-preview-breakdown {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.audience-preview-dedup {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.audience-loading {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.audience-summary {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
}

.audience-summary-badge {
  padding: 2px var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.campaign-detail-page {
  padding: var(--spacing-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.campaign-detail-breadcrumb {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.campaign-detail-breadcrumb a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.campaign-detail-breadcrumb a:hover {
  text-decoration: underline;
}

.campaign-detail-header {
  margin-bottom: var(--spacing-sm);
}

.campaign-detail-title-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.campaign-detail-title-row h1 {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  letter-spacing: -.02em;
  font-weight: 800;
}

.campaign-detail-meta, .campaign-detail-actions {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.campaign-detail-more {
  gap: var(--spacing-xs);
  display: flex;
}

.campaign-detail-description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
  max-width: 600px;
  line-height: 1.6;
}

.campaign-tabs {
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  gap: 0;
  display: flex;
}

.campaign-tab {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -2px;
  padding: 10px 20px;
  font-weight: 600;
  transition: all .15s;
}

.campaign-tab:hover {
  color: var(--text-primary);
}

.campaign-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.campaign-info-section {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.campaign-info-section h2 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  font-weight: 700;
}

.campaign-info-grid {
  gap: var(--spacing-sm) var(--spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  display: grid;
}

.info-item {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.info-label {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.info-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.campaign-editions-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.campaign-editions-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.campaign-editions-header h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.campaign-newsletters-subsection {
  margin-bottom: var(--spacing-md);
}

.campaign-newsletters-subsection .subsection-title {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.campaign-newsletters-subsection .newsletter-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.campaign-editions-list {
  overflow-x: auto;
}

.campaign-error {
  text-align: center;
  padding: var(--spacing-3xl);
}

.campaign-error h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.campaign-error p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.next-send-card {
  margin-bottom: var(--spacing-md);
  position: relative;
}

.next-send-card__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--info-light);
  border: 1px solid var(--info);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
}

.next-send-card__header--overdue {
  background: var(--warning-light);
  border-color: var(--warning);
}

.next-send-card__header--overdue .next-send-card__timer {
  color: var(--warning-dark);
}

.next-send-card__left {
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--info-dark);
  flex: 1;
  display: flex;
}

.next-send-card__header--overdue .next-send-card__left, .next-send-card__item--overdue .next-send-card__left {
  color: var(--warning-dark);
}

.next-send-card__meta {
  flex-direction: column;
  gap: 0;
  min-width: 0;
  display: flex;
}

.next-send-card__title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.next-send-card__date {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.next-send-card__warning {
  font-size: var(--font-size-2xs);
  color: var(--error);
  font-weight: 500;
  display: block;
}

.next-send-card__right {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.next-send-card__timer {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--info-dark);
  white-space: nowrap;
  margin-right: 4px;
  font-weight: 700;
}

.next-send-card__action {
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.next-send-card__action:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.next-send-card__action.--cancel {
  color: var(--danger);
  background: var(--white);
  border-color: var(--border-light);
  padding: 3px 5px;
}

.next-send-card__action.--cancel span {
  display: none;
}

.next-send-card__action.--cancel:hover:not(:disabled) {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}

.next-send-card__action.--send {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.next-send-card__action.--send:hover:not(:disabled) {
  opacity: .85;
}

.next-send-card__action.--reschedule {
  color: var(--info-dark);
  background: var(--white);
  border-color: var(--info);
}

.next-send-card__action.--reschedule:hover:not(:disabled) {
  background: var(--info-light);
}

.next-send-card__toggle {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  background: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  transition: all .15s;
  display: flex;
}

.next-send-card__toggle:hover {
  background: var(--bg-secondary);
}

.next-send-card__badge {
  font-weight: 700;
  font-size: var(--font-size-xs);
}

.next-send-card__dropdown {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 4px 12px #0000001a);
  z-index: 20;
  max-height: 240px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow-y: auto;
}

.next-send-card__item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
  padding: 6px 12px;
  display: flex;
}

.next-send-card__item:last-child {
  border-bottom: none;
}

.next-send-card__item--overdue {
  background: var(--warning-light);
}

.next-send-card__item .next-send-card__title {
  font-size: var(--font-size-xs);
}

.next-send-card__item .next-send-card__date {
  font-size: var(--font-size-2xs);
}

.editions-table {
  border-collapse: collapse;
  width: 100%;
}

.editions-table th {
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 16px;
  font-weight: 600;
}

.editions-table td {
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  padding: 16px;
}

.editions-table tr:last-child td {
  border-bottom: none;
}

.editions-table tr:hover {
  background: var(--bg-secondary);
}

.edition-number {
  color: var(--text-secondary);
  font-weight: 600;
}

.edition-title {
  font-weight: 500;
}

.edition-status {
  font-size: var(--font-size-sm);
  padding: 4px 10px;
  font-weight: 500;
  display: inline-flex;
}

.edition-status.status-draft {
  background: var(--gray-100);
  color: var(--gray-600);
}

.edition-status.status-sent {
  background: var(--success-light);
  color: var(--success-dark);
}

.edition-status.status-scheduled {
  background: var(--info-light);
  color: var(--info-dark);
}

.edition-stat {
  color: var(--text-secondary);
  font-weight: 500;
}

.edition-actions .btn-text {
  color: var(--primary);
  font-size: var(--font-size-base);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
  text-decoration: none;
}

.edition-actions .btn-text:hover {
  text-decoration: underline;
}

.linked-newsletters-list {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.linked-newsletter-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  transition: border-color .15s;
  display: flex;
}

.linked-newsletter-card:hover {
  border-color: var(--primary-light);
}

.linked-newsletter-info h4 {
  color: var(--text-primary);
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.linked-newsletter-subject {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.linked-newsletter-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  display: flex;
}

.newsletter-status {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 8px;
  font-weight: 500;
  display: inline-flex;
}

.newsletter-status.status-draft {
  background: var(--gray-100);
  color: var(--gray-600);
}

.newsletter-status.status-ready {
  background: var(--info-light);
  color: var(--info-dark);
}

.newsletter-status.status-sent {
  background: var(--success-light);
  color: var(--success-dark);
}

.newsletter-date {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.linked-newsletter-actions .btn-text {
  color: var(--primary);
  font-size: var(--font-size-base);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}

.linked-newsletter-actions .btn-text:hover {
  background: var(--primary-subtle);
}

.campaign-analytics-section {
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.campaign-analytics-section h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.analytics-metrics {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(5, 1fr);
  display: grid;
}

@media (max-width: 640px) {
  .analytics-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

.analytics-metrics .metric {
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-sm);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  display: flex;
}

.analytics-metrics .metric svg {
  color: var(--text-tertiary);
  width: 14px;
  height: 14px;
}

.metric-value {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
}

.metric-label {
  color: var(--text-tertiary);
  font-size: 10px;
}

.analytics-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
}

.analytics-card h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.edition-performance-chart {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.edition-bar {
  align-items: center;
  gap: var(--spacing-sm);
  grid-template-columns: 40px 1fr 50px;
  display: grid;
}

.edition-bar-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: 600;
}

.edition-bar-container {
  background: var(--gray-100, #f3f4f6);
  border-radius: var(--radius-sm);
  height: 20px;
  overflow: hidden;
}

.edition-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: var(--radius-sm);
  transition: width .3s;
}

.edition-bar-fill.opens {
  background: var(--primary);
}

.edition-bar-value {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: right;
  font-weight: 600;
}

.analytics-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.workflow-notification-panel {
  align-items: flex-start;
  gap: var(--spacing-md);
  background: linear-gradient(135deg, #fff8e6 0%, #fff3cd 100%);
  border: 1px solid #f0d97e;
  margin-bottom: 16px;
  padding: 10px 12px;
  display: flex;
}

.workflow-notification-icon {
  color: #000;
  background: #ffc107;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.workflow-notification-icon svg {
  width: 20px;
  height: 20px;
}

.workflow-notification-content {
  flex: 1;
}

.workflow-notification-content h3 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
}

.workflow-notification-content > p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.workflow-notification-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.workflow-notification-item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md-sm);
  background: #ffffffb3;
  padding: 10px 14px;
  display: flex;
}

.workflow-notification-item-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.workflow-notification-item-info strong {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.workflow-schedule-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.workflow-notification-item-time {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  white-space: nowrap;
}

.workflow-notification-item-time strong {
  color: #b45309;
}

.workflow-notification-action {
  flex-shrink: 0;
  align-self: center;
}

.workflow-getting-started {
  background: linear-gradient(135deg, var(--primary-light) 0%, #f8fafc 100%);
  border: 1px solid var(--border-light);
  margin-bottom: 16px;
  padding: 10px;
}

.workflow-getting-started-header {
  margin-bottom: 16px;
}

.workflow-getting-started-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.workflow-steps {
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.workflow-step {
  align-items: flex-start;
  gap: var(--spacing-md-sm);
  flex: 1;
  min-width: 200px;
  display: flex;
}

.workflow-step-number {
  background: var(--primary);
  width: 28px;
  height: 28px;
  color: var(--white);
  font-size: var(--font-size-base);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.workflow-step-content strong {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: 4px;
  display: block;
}

.workflow-step-content p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.workflow-status-label {
  font-size: var(--font-size-sm);
  margin-right: 12px;
  padding: 4px 10px;
  font-weight: 600;
}

.workflow-status-label.active {
  color: #166534;
  background: #dcfce7;
}

.workflow-status-label.inactive {
  color: #6b7280;
  background: #f3f4f6;
}

.workflow-card-toggle {
  justify-content: center;
  align-items: center;
  display: flex;
}

.schedule-config-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.schedule-config-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  display: flex;
}

.schedule-config-header svg {
  color: var(--primary);
}

.schedule-config-fields {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  display: grid;
}

.schedule-config-fields .form-group {
  margin-bottom: 0;
}

.schedule-config-fields select, .schedule-config-fields input[type="time"] {
  width: 100%;
  font-size: var(--font-size-base);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  padding: 10px 12px;
}

.schedule-config-reminder {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--info-light);
  font-size: var(--font-size-md);
  color: var(--info-dark);
  padding: 12px 14px;
  display: flex;
}

.schedule-config-reminder svg {
  flex-shrink: 0;
}

.subsection-title {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  display: flex;
}

.subsection-title svg {
  color: var(--text-tertiary);
  width: 14px;
  height: 14px;
}

.sent-editions-title {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.schedule-modal {
  width: 520px;
  max-width: min(520px, 95vw);
  overflow: visible;
}

.schedule-modal .modal-body {
  max-height: none;
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
  overflow: visible;
}

.schedule-modal .form-group {
  margin-bottom: 0;
}

.schedule-modal .form-group label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  display: block;
}

.schedule-modal .form-group select {
  width: 100%;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 10px 12px;
  transition: border-color .15s;
}

.schedule-modal .form-group select:hover, .schedule-modal .form-group select:focus {
  border-color: var(--primary);
  outline: none;
}

.schedule-datetime-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .schedule-datetime-row {
    grid-template-columns: 1fr;
  }
}

.schedule-preview {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--success-light);
  color: var(--success-dark);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--success);
  padding: 10px 14px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
}

.schedule-preview svg {
  flex-shrink: 0;
}

.schedule-preselected {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--info-light);
  color: var(--info-dark);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--info);
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
}

.schedule-preselected svg {
  flex-shrink: 0;
}

.modal-overlay {
  z-index: 9999;
  background: #00000080;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-height: 95vh;
  box-shadow: none;
  overflow-y: auto;
}

.modal-content.modal-xl {
  overflow: hidden;
}

.modal-sm {
  max-width: 480px;
}

.modal-lg {
  max-width: 720px;
}

.modal-xl {
  max-width: 1100px;
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 10px 12px;
  display: flex;
}

.modal-header h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.modal-close {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  width: 32px;
  min-width: 32px;
  height: 32px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.modal-body {
  padding: 10px 12px;
}

.modal-body p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
  line-height: 1.5;
}

.modal-body .text-danger {
  color: var(--error, #ef4444);
}

.modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  padding: 12px 20px;
  display: flex;
}

.modal-md {
  max-width: 560px;
}

.send-modal-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.send-modal-error {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--error, #ef4444);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-sm);
  background: #ef444414;
  display: flex;
}

.send-modal-empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.send-modal-warning {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--warning-dark, #92400e);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-md);
  border-radius: var(--radius-sm);
  background: #f59e0b14;
  line-height: 1.5;
  display: flex;
}

.form-group input, .form-group select, .form-group textarea {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--white);
  padding: 8px 12px;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.send-progress {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.send-progress__animation {
  margin-bottom: var(--spacing-sm);
}

.send-progress__icon {
  color: var(--primary);
  margin-bottom: var(--spacing-md);
  animation: 1.5s ease-in-out infinite sendBounce;
}

.send-progress__bar {
  background: var(--gray-200);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.send-progress__fill {
  background: var(--primary);
  border-radius: 999px;
  width: 40%;
  height: 100%;
  animation: 1.5s ease-in-out infinite sendSlide;
}

.send-progress__title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.send-progress__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

.send-progress__notice {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--success-light, #f0fdf4);
  color: var(--success, #16a34a);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  text-align: left;
  display: flex;
}

.send-progress__close {
  justify-content: center;
  width: 100%;
}

@keyframes sendBounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes sendSlide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(350%);
  }
}

.campaign-onboarding {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.campaign-onboarding__header {
  margin-bottom: var(--spacing-md);
}

.campaign-onboarding__header svg {
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
}

.campaign-onboarding__header h2 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.campaign-onboarding__header p {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
}

.campaign-onboarding__steps {
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 700px;
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .campaign-onboarding__steps {
    grid-template-columns: 1fr;
  }
}

.campaign-onboarding__step {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
  position: relative;
}

.campaign-onboarding__step h3 {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.campaign-onboarding__step p {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.campaign-onboarding__number {
  background: var(--primary);
  width: 24px;
  height: 24px;
  color: var(--white);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.campaign-onboarding__icon {
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-md);
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  justify-content: center;
  align-items: center;
  display: flex;
}

.campaign-onboarding__cta {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  padding: 12px 24px;
  font-weight: 600;
  display: inline-flex;
}

.preview-header-content {
  flex: 1;
  min-width: 0;
}

.preview-header-content h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  overflow: hidden;
}

.preview-subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.template-preview-container {
  grid-template-columns: 1fr 280px;
  height: calc(95vh - 56px);
  display: grid;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .template-preview-container {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.template-preview-email {
  border-right: 1px solid var(--border-light);
  background: var(--gray-100, #f3f4f6);
  padding: var(--spacing-sm);
  min-width: 0;
  overflow-y: auto;
}

.preview-email-header {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.preview-email-from, .preview-email-subject {
  gap: var(--spacing-sm);
  align-items: baseline;
  padding: 2px 0;
  display: flex;
}

.preview-email-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 50px;
  font-size: 10px;
  font-weight: 600;
}

.preview-email-subject-text {
  color: var(--text-primary);
  font-weight: 600;
}

.preview-email-iframe-wrapper {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: none;
  overflow: hidden;
}

.preview-email-iframe {
  border: none;
  width: 100%;
  height: calc(90vh - 160px);
  min-height: 450px;
  display: block;
  overflow-x: hidden;
}

.preview-block {
  margin-bottom: var(--spacing-md);
}

.preview-block:last-child {
  margin-bottom: 0;
}

.preview-block-header {
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #1a56db) 100%);
  color: var(--white);
  margin: calc(-1 * var(--spacing-lg));
  margin-bottom: var(--spacing-md);
}

.preview-header-title {
  color: var(--white);
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
}

.preview-header-tagline {
  font-size: var(--font-size-base);
  opacity: .85;
  margin: 0;
}

.preview-heading {
  color: var(--text-primary);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--primary-light, #e0e7ff);
  font-size: 20px;
  font-weight: 600;
}

.preview-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.preview-article {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--gray-50, #f9fafb);
}

.preview-article-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 8px;
  font-weight: 600;
}

.preview-article-content {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.6;
}

.preview-article-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  display: inline-block;
}

.preview-article-cta:hover {
  text-decoration: underline;
}

.preview-callout {
  padding: var(--spacing-md);
  border-left: 4px solid var(--primary);
  background: var(--primary-light, #eff6ff);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.preview-callout.preview-callout-warning {
  border-left-color: var(--warning, #f59e0b);
  background: #f59e0b14;
}

.preview-callout.preview-callout-success {
  border-left-color: var(--success);
  background: #10b98114;
}

.preview-button-wrapper {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.preview-button {
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  padding: 12px 32px;
  text-decoration: none;
  transition: opacity .2s;
  display: inline-block;
}

.preview-button:hover {
  opacity: .9;
}

.preview-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--spacing-md) 0;
}

.preview-list {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  padding-left: 20px;
  line-height: 1.5;
}

.preview-list li {
  margin-bottom: 4px;
}

.preview-footer {
  text-align: center;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  margin-top: var(--spacing-sm);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.preview-footer-company {
  color: var(--text-secondary);
  margin: 0 0 4px;
  font-weight: 600;
}

.preview-footer-address {
  margin: 0 0 8px;
}

.preview-footer-links a {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-decoration: underline;
}

.preview-footer-links a:hover {
  color: var(--primary);
}

.template-preview-info {
  padding: var(--spacing-md);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.template-preview-info h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.template-preview-info > p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
  line-height: 1.5;
}

.preview-info-details {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-sm);
  flex-direction: column;
  display: flex;
}

.preview-info-item {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.preview-info-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
  font-weight: 600;
}

.preview-info-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.preview-actions {
  gap: var(--spacing-xs);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

.preview-actions .btn-primary, .preview-actions .btn-secondary {
  text-align: center;
  width: 100%;
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: none;
  padding: 8px 12px;
  transition: all .15s;
}

.preview-actions .btn-primary {
  background: var(--primary);
  color: var(--white);
}

.preview-actions .btn-primary:hover {
  opacity: .9;
}

.preview-actions .btn-secondary {
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  background: none;
}

.preview-actions .btn-secondary:hover {
  background: var(--bg-secondary);
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .campaigns-page {
    padding: 10px;
  }

  .campaigns-header {
    flex-direction: column;
    align-items: stretch;
  }

  .campaigns-grid, .campaign-types-grid, .form-row {
    grid-template-columns: 1fr;
  }

  .campaign-detail-page {
    padding: 10px;
  }

  .campaign-detail-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .campaign-detail-actions {
    justify-content: flex-start;
  }

  .workflow-steps {
    flex-direction: column;
  }

  .workflow-step {
    min-width: 100%;
  }
}

@media (max-width: 640px) {
  .campaign-card-stats {
    gap: var(--spacing-md);
    flex-direction: column;
  }

  .campaign-template-card {
    padding: 16px;
  }

  .campaign-templates-gallery {
    grid-template-columns: 1fr;
  }
}

.join-team-page {
  background: none;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 48px 20px;
  display: flex;
}

.join-team-container {
  width: 100%;
  max-width: 560px;
}

.join-team-loading, .join-team-error-card, .join-team-success-card {
  text-align: center;
  background: var(--white);
  box-shadow: none;
  border: 1px solid #94a3b82e;
  padding: 48px;
}

.join-team-spinner {
  width: 48px;
  height: 48px;
  color: var(--primary);
  margin: 0 auto 16px;
  animation: 1s linear infinite spin;
}

.join-team-loading p, .join-team-redirect {
  color: var(--gray-500);
  font-size: var(--font-size-base);
}

.join-team-error-icon, .join-team-success-icon {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  width: 80px;
  height: 80px;
  color: var(--primary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  display: flex;
}

.join-team-error-card h1, .join-team-success-card h1 {
  font-size: var(--font-size-4xl);
  color: var(--gray-900);
  margin-bottom: 8px;
  font-weight: 700;
}

.join-team-error-card p, .join-team-success-card p {
  color: var(--gray-500);
  margin-bottom: 12px;
  font-size: 16px;
}

.join-team-card {
  background: var(--white);
  box-shadow: none;
  border: 1px solid #94a3b82e;
  overflow: hidden;
}

.join-team-header {
  text-align: center;
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 36px 36px 26px;
}

.join-team-icon {
  background: #ffffff1f;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: flex;
}

.join-team-header h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 700;
}

.join-team-details {
  border-bottom: 1px solid #94a3b81f;
  padding: 28px 32px 12px;
}

.join-team-detail {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  display: grid;
}

.join-team-detail:not(:last-child) {
  border-bottom: 1px solid #94a3b81f;
}

.join-team-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  font-size: .82rem;
  font-weight: 700;
}

.join-team-value {
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
}

.join-team-role {
  text-transform: capitalize;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  width: fit-content;
  color: var(--primary);
  padding: 6px 12px;
  font-size: .9rem;
}

@media (max-width: 640px) {
  .join-team-page {
    padding: 28px 14px;
  }

  .join-team-card, .join-team-loading, .join-team-error-card, .join-team-success-card {
    border-radius: 0;
  }

  .join-team-header {
    padding: 28px 22px 22px;
  }

  .join-team-details {
    padding: 22px 22px 8px;
  }

  .join-team-detail {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
  }
}

.join-team-auth-prompt {
  padding: 12px 16px 32px;
}

.join-team-auth-prompt p {
  text-align: center;
  color: #475569;
  margin-bottom: 10px;
  font-size: .98rem;
  line-height: 1.6;
}

.join-team-auth-buttons {
  gap: 12px;
  display: flex;
}

.join-team-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #0000;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.join-team-btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: none;
  flex: 1;
}

.join-team-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: none;
}

.join-team-btn-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.join-team-btn-secondary {
  color: #334155;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  background: none;
  flex: 1;
}

.join-team-btn-secondary:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
}

.join-team-btn-full {
  width: calc(100% - 64px);
  margin: 24px 32px;
}

.join-team-btn-spinner {
  width: 18px;
  height: 18px;
  animation: 1s linear infinite spin;
}

.join-team-mismatch {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--gray-800);
  font-size: var(--font-size-base);
  gap: 14px;
  margin: 24px 24px 0;
  padding: 10px 20px;
  display: flex;
}

.join-team-mismatch p {
  margin: 0 0 8px;
  line-height: 1.55;
}

.join-team-mismatch p:last-child {
  margin-bottom: 0;
}

.join-team-mismatch-icon {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.join-team-mismatch-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  font-size: .88rem;
  font-weight: 800;
}

.join-team-mismatch-content strong {
  color: var(--primary);
}

.join-team-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-hover);
  font-size: var(--font-size-base);
  margin: 0 24px 16px;
  padding: 12px 16px;
  display: flex;
}

.join-team-cancel {
  text-align: center;
  font-size: var(--font-size-base);
  padding: 0 32px 24px;
}

.join-team-cancel a {
  color: var(--gray-500);
  text-decoration: none;
}

.join-team-cancel a:hover {
  color: var(--gray-700);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .join-team-auth-prompt {
    padding: 10px 22px 24px;
  }

  .join-team-auth-buttons {
    flex-direction: column;
  }

  .join-team-mismatch {
    margin: 20px 22px 0;
  }
}

.join-team-header-sub {
  font-size: var(--font-size-base);
  opacity: .9;
  margin-top: 8px;
}

.join-team-register-form {
  padding: 12px 16px;
}

.join-team-field {
  margin-bottom: 16px;
}

.join-team-field-label {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  margin-bottom: 6px;
  font-weight: 500;
  display: block;
}

.join-team-field-row {
  gap: var(--spacing-md-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.join-team-input {
  width: 100%;
  font-size: var(--font-size-base);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-900);
  padding: 10px 12px;
  transition: border-color .2s;
}

.join-team-input:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px #6366f11a;
}

.join-team-input.disabled {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

.join-team-register-form .join-team-error {
  margin: 0 0 16px;
}

.join-team-register-form .join-team-btn-full {
  width: 100%;
  margin: 8px 0 0;
}

.subscriber-layout {
  background: var(--white);
  min-height: 100vh;
}

.subscriber-main {
  padding-top: 0;
  transition: margin-left .2s;
}

.subscriber-mobile-bar, .subscriber-sidebar-backdrop {
  display: none;
}

.subscriber-layout-editor {
  background: var(--bg-primary);
}

.subscriber-main-editor {
  min-height: 100vh;
  padding-top: 0;
}

.snav {
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.snav-container {
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 1400px;
  height: 56px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
}

.snav-logo {
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.snav-links {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.snav-link {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.snav-link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.snav-link.active {
  background: var(--primary-light);
  color: var(--primary);
}

.snav-chevron {
  transition: transform .2s;
}

.snav-chevron.open {
  transform: rotate(180deg);
}

.snav-dropdown {
  position: relative;
}

.snav-dropdown-menu {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  min-width: 200px;
  box-shadow: none;
  z-index: 100;
  padding: 4px;
  animation: .15s snav-fadeIn;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
}

.snav-dropdown-item {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-decoration: none;
  transition: background .1s;
  display: block;
}

.snav-dropdown-item:hover {
  background: var(--bg-secondary);
}

.snav-dropdown-item.active {
  color: var(--primary);
  font-weight: 600;
}

@keyframes snav-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .subscriber-mobile-bar {
    z-index: 90;
    background: linear-gradient(#fffffffa 72%, #fff0);
    justify-content: flex-start;
    padding: 12px 14px 0;
    display: flex;
    position: sticky;
    top: 0;
  }

  .subscriber-mobile-bar__toggle {
    border: 1px solid var(--border-light);
    min-height: 38px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    box-shadow: none;
    background: #fffffff5;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-weight: 600;
    display: inline-flex;
  }

  .subscriber-sidebar-backdrop {
    z-index: 109;
    background: #0f172a52;
    border: 0;
    display: block;
    position: fixed;
    inset: 0;
  }
}

.subsidebar {
  background: var(--white);
  border-right: 1px solid var(--border-light);
  width: 240px;
  height: 100vh;
  padding: var(--spacing-md) var(--spacing-sm);
  z-index: 100;
  scrollbar-width: none;
  flex-direction: column;
  transition: width .2s, padding .2s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.subsidebar::-webkit-scrollbar {
  display: none;
}

.subsidebar.is-closed {
  width: 72px;
  padding-left: 8px;
  padding-right: 8px;
  overflow-x: visible;
}

.subsidebar.is-peek-open {
  width: 240px;
  box-shadow: 12px 0 30px #0f172a14;
}

.subsidebar.subsidebar--notifications-open {
  overflow-y: visible;
}

.subsidebar__header {
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  position: relative;
}

.subsidebar__header-actions {
  margin-bottom: var(--spacing-xs);
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  display: flex;
}

.subsidebar__header-actions .notification-bell {
  position: relative;
}

.subsidebar__header-actions .notification-bell__trigger {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .15s, color .15s;
  display: inline-flex;
}

.subsidebar__header-actions .notification-bell__trigger:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.subsidebar__header-actions .notification-bell__badge {
  text-align: center;
  min-width: 16px;
  height: 16px;
  color: var(--white);
  background: var(--primary);
  border-radius: 999px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 2px;
}

.subsidebar__header-actions .notification-bell__dropdown {
  top: auto;
  left: var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 320px;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  margin-top: 4px;
  position: fixed;
}

.subsidebar__logo {
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
}

.subsidebar__logo-mark {
  background: var(--bg-secondary);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: inline-flex;
  overflow: hidden;
}

.subsidebar__logo-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.subsidebar__brand {
  font-family: var(--font-heading), serif;
  font-size: var(--font-size-md);
  letter-spacing: -.01em;
  font-weight: 700;
}

.subsidebar__type-badge {
  color: var(--sidebar-accent, var(--text-tertiary));
  background: color-mix(in srgb, var(--sidebar-accent, var(--bg-secondary)) 12%, transparent);
  border-left: 2px solid var(--sidebar-accent, var(--text-tertiary));
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
}

.subsidebar__toggle {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
}

.subsidebar__toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.subsidebar__expand-all {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 12px;
  display: flex;
}

.subsidebar__expand-all:hover {
  color: var(--text-secondary);
}

.subsidebar__nav {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.subsidebar__footer {
  padding-top: var(--spacing-md);
  margin-top: auto;
}

.subsidebar__link {
  align-items: center;
  gap: var(--spacing-sm);
  box-sizing: border-box;
  min-height: 36px;
  line-height: 1.2;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.subsidebar__link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.subsidebar__link.is-active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.subsidebar__logout {
  border: 1px solid var(--border-light);
  background: var(--white);
  width: 24px;
  height: 24px;
  min-height: 24px;
  color: var(--text-secondary);
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  display: inline-flex;
}

.subsidebar__logout:hover:not(:disabled) {
  color: var(--danger);
  background: #fff5f5;
  border-color: #ef444429;
}

.subsidebar__logout:disabled {
  opacity: .7;
  cursor: wait;
}

.subsidebar.is-closed .subsidebar__header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.subsidebar.is-closed .subsidebar__header-actions {
  flex-direction: column;
  gap: 4px;
}

.subsidebar.is-closed .subsidebar__logo {
  justify-content: center;
  display: none;
}

.subsidebar.is-closed .subsidebar__toggle {
  position: static;
}

.subsidebar.is-closed .subsidebar__brand, .subsidebar.is-closed .subsidebar__link span, .subsidebar.is-closed .subsidebar__user-meta, .subsidebar.is-closed .subsidebar__type-badge {
  display: none;
}

.subsidebar.is-closed .subsidebar__link {
  justify-content: center;
  gap: 0;
  min-height: 36px;
  padding: 10px;
  position: relative;
}

.subsidebar.is-closed .subsidebar__footer {
  padding-top: var(--spacing-sm);
}

.subsidebar.is-closed .subsidebar__user {
  justify-content: center;
  padding: 4px 0;
}

.subsidebar.is-closed .subsidebar__logout {
  display: none;
}

.subsidebar.is-peek-open .subsidebar__header {
  padding: 0 var(--spacing-sm);
  display: block;
}

.subsidebar.is-peek-open .subsidebar__header-actions {
  flex-direction: row;
  justify-content: flex-end;
}

.subsidebar.is-peek-open .subsidebar__logo {
  justify-content: flex-start;
  display: flex;
}

.subsidebar.is-peek-open .subsidebar__brand, .subsidebar.is-peek-open .subsidebar__link span, .subsidebar.is-peek-open .subsidebar__user-meta {
  display: block;
}

.subsidebar.is-peek-open .subsidebar__type-badge {
  display: flex;
}

.subsidebar.is-peek-open .subsidebar__link {
  justify-content: flex-start;
  gap: var(--spacing-sm);
  min-height: 36px;
  padding: 7px 12px;
}

.subsidebar.is-peek-open .subsidebar__footer {
  padding-top: var(--spacing-md);
}

.subsidebar.is-peek-open .subsidebar__user {
  justify-content: flex-start;
  padding: 8px;
}

.subsidebar.is-peek-open .subsidebar__logout {
  display: inline-flex;
}

.subscriber-layout-with-sidebar {
  display: flex;
}

.subscriber-layout-with-sidebar .subscriber-main {
  flex: 1;
  min-height: 100vh;
  margin-left: 240px;
  padding-top: 0;
}

.subscriber-layout-sidebar-closed .subscriber-main {
  margin-left: 72px;
}

.subscriber-layout-shell-hidden .subscriber-main {
  margin-left: 0;
}

.subscriber-layout-editor-route .subsidebar.is-closed {
  width: 56px;
  padding-left: 6px;
  padding-right: 6px;
}

.subscriber-layout-editor-route .subscriber-main {
  margin-left: 56px;
}

@media (max-width: 767px) {
  .subsidebar {
    z-index: 110;
    width: min(86vw, 320px);
    max-width: 320px;
    padding: 14px 10px;
    transition: transform .2s, width .2s, padding .2s;
    transform: translateX(0);
    box-shadow: 18px 0 40px #0f172a2e;
  }

  .subsidebar.is-closed {
    width: min(86vw, 320px);
    box-shadow: none;
    padding: 14px 10px;
    overflow-x: hidden;
    transform: translateX(calc(-100% - 16px));
  }

  .subsidebar.is-peek-open {
    width: min(86vw, 320px);
  }

  .subsidebar__header {
    margin-bottom: var(--spacing-md);
  }

  .subsidebar__header-actions {
    justify-content: space-between;
  }

  .subsidebar__expand-all {
    padding-right: 10px;
  }

  .subsidebar__nav {
    padding-bottom: var(--spacing-sm);
  }

  .subsidebar.is-closed .subsidebar__header {
    padding: 0 var(--spacing-sm);
    display: block;
  }

  .subsidebar.is-closed .subsidebar__header-actions {
    margin-bottom: var(--spacing-xs);
    flex-direction: row;
    justify-content: space-between;
  }

  .subsidebar.is-closed .subsidebar__logo {
    justify-content: flex-start;
    display: flex;
  }

  .subsidebar.is-closed .subsidebar__toggle {
    position: static;
  }

  .subsidebar.is-closed .subsidebar__brand, .subsidebar.is-closed .subsidebar__link span, .subsidebar.is-closed .subsidebar__user-meta, .subsidebar.is-closed .subsidebar__type-badge, .subsidebar.is-closed .subsidebar__expand-all, .subsidebar.is-closed .subsidebar__nav, .subsidebar.is-closed .subsidebar__footer {
    display: none;
  }

  .subscriber-layout-with-sidebar .subscriber-main {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .subscriber-layout-sidebar-closed .subscriber-main {
    margin-left: 0;
  }

  .subscriber-layout-editor-route .subsidebar.is-closed {
    width: min(86vw, 320px);
    padding: 14px 10px;
  }

  .subscriber-layout-editor-route .subscriber-main {
    margin-left: 0;
  }
}

.subsidebar__group {
  margin-bottom: 2px;
}

.subsidebar__group-collapsed {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.subsidebar__group-header {
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: 36px;
  line-height: 1.2;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  padding: 7px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.subsidebar__group-header:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.subsidebar__group.is-open .subsidebar__group-header {
  color: var(--text-primary);
}

.subsidebar__group-chevron {
  opacity: .5;
  margin-left: auto;
  transition: transform .2s;
}

.subsidebar__group.is-open .subsidebar__group-chevron {
  opacity: 1;
  transform: rotate(180deg);
}

.subsidebar__group-items {
  margin-top: 2px;
  padding-left: 8px;
}

.subsidebar__group-items .subsidebar__link {
  min-height: 34px;
  font-size: var(--font-size-xs);
  padding: 6px 12px;
}

.subsidebar.is-closed .subsidebar__group-items, .subsidebar.is-closed .subsidebar__group-header {
  display: none;
}

.subsidebar.is-closed:not(.is-peek-open) .subsidebar__link[data-tooltip]:after {
  content: attr(data-tooltip);
  color: var(--white);
  white-space: nowrap;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  background: #0f172af0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: opacity .16s, transform .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%)translateX(-4px);
}

.subsidebar.is-closed:not(.is-peek-open) .subsidebar__link[data-tooltip]:before {
  content: "";
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  background: #0f172af0;
  width: 8px;
  height: 8px;
  transition: opacity .16s;
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%)rotate(45deg);
}

.subsidebar.is-closed:not(.is-peek-open) .subsidebar__link[data-tooltip]:hover:after, .subsidebar.is-closed:not(.is-peek-open) .subsidebar__link[data-tooltip]:hover:before {
  opacity: 1;
}

.subsidebar.is-peek-open .subsidebar__group-header {
  display: flex;
}

.subsidebar.is-peek-open .subsidebar__group-items {
  display: block;
}

.subsidebar__footer {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.subsidebar__user {
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px;
  display: flex;
}

.subsidebar__avatar {
  background: var(--gray-200);
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.subsidebar__user-meta {
  flex: 1;
  min-width: 0;
}

.subsidebar__user-heading {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.subsidebar__user-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  display: block;
  overflow: hidden;
}

.subsidebar__user-email {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.snav-user {
  position: relative;
}

.snav-user-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  transition: all .15s;
  display: flex;
}

.snav-user-btn:hover {
  border-color: var(--border);
}

.snav-avatar {
  background: var(--primary);
  width: 30px;
  height: 30px;
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.subscriber-nav-dropdown {
  background: var(--white);
  width: 260px;
  box-shadow: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  z-index: 100;
  animation: .15s snav-fadeIn;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  overflow: hidden;
}

.subscriber-nav-dropdown-header {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  padding: 12px;
  display: flex;
}

.subscriber-nav-dropdown-avatar {
  background: var(--primary);
  width: 36px;
  height: 36px;
  color: var(--white);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.subscriber-nav-dropdown-info {
  flex: 1;
  min-width: 0;
}

.subscriber-nav-dropdown-name {
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.subscriber-nav-dropdown-email {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.subscriber-nav-dropdown-divider {
  background: var(--border-light);
  height: 1px;
}

.subscriber-nav-dropdown-section-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 600;
}

.subscriber-nav-dropdown-team {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 6px 12px;
  display: flex;
}

.subscriber-nav-dropdown-role {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  margin-left: auto;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 500;
}

.subscriber-nav-dropdown-item {
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 7px 12px;
  text-decoration: none;
  transition: background .1s;
  display: flex;
}

.subscriber-nav-dropdown-item:hover {
  background: var(--bg-secondary);
}

.subscriber-nav-dropdown-logout {
  color: var(--error);
}

.snav-mobile-toggle {
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  display: none;
}

.snav-mobile {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  box-shadow: none;
  max-height: calc(100vh - 56px);
  padding: 12px;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.snav-mobile-user {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 8px;
  display: flex;
}

.snav-mobile-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.snav-mobile-email {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.snav-mobile-type-badge {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px;
  font-weight: 500;
  display: flex;
}

.snav-mobile-divider {
  background: var(--border-light);
  height: 1px;
  margin: 8px 0;
}

.snav-mobile-section {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
}

.snav-mobile-link {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  width: 100%;
  padding: 10px 12px;
  text-decoration: none;
  transition: background .1s;
  display: flex;
}

.snav-mobile-link:hover, .snav-mobile-link.active {
  background: var(--bg-secondary);
}

.snav-mobile-logout {
  color: var(--error);
}

@media (max-width: 1023px) {
  .snav-links, .snav-user, .notification-bell, .subscriber-nav-lang, .ws-switcher-label, .ws-switcher-role {
    display: none;
  }

  .snav-mobile-toggle {
    display: flex;
  }

  .snav-mobile {
    display: block;
  }

  .snav-container {
    justify-content: space-between;
  }
}

.ws-switcher {
  position: relative;
}

.ws-switcher-btn {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  transition: all .15s;
  display: flex;
}

.ws-switcher-btn:hover {
  background: var(--gray-100);
  border-color: var(--border);
}

.ws-switcher-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  font-weight: 600;
  overflow: hidden;
}

.ws-switcher-role {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 600;
}

.ws-switcher-menu {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  min-width: 220px;
  box-shadow: none;
  z-index: 100;
  animation: .15s snav-fadeIn;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  overflow: hidden;
}

.ws-switcher-section {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
}

.ws-switcher-item {
  align-items: center;
  gap: var(--spacing-sm);
  cursor: default;
  padding: 8px 12px;
  display: flex;
}

.ws-switcher-item.active {
  background: var(--gray-50);
}

.ws-switcher-item-icon {
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  display: flex;
}

.ws-switcher-item-icon.personal {
  background: var(--gray-100);
  color: var(--text-secondary);
}

.ws-switcher-item-icon.team {
  background: var(--primary);
  color: var(--white);
}

.ws-switcher-item-info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.ws-switcher-item-name {
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.ws-switcher-item-desc {
  color: var(--text-tertiary);
  font-size: 10px;
}

.audience-header-copy h1 {
  margin: 0;
}

.audience-header-copy p {
  margin: 0;
  font-size: .95rem;
}

.audience-stats-grid, .audience-summary-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.audience-stat-card {
  border: 1px solid var(--border-light);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  border-radius: 18px;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 16px 18px;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  display: flex;
}

.audience-stat-card:hover {
  box-shadow: none;
  transform: translateY(-1px);
}

.audience-stat-card.is-static {
  cursor: default;
}

.audience-stat-card--active .audience-stat-card__value, .audience-stat-card--active .audience-stat-card__icon {
  color: #16a34a;
}

.audience-stat-card--inactive .audience-stat-card__value, .audience-stat-card--inactive .audience-stat-card__icon {
  color: #64748b;
}

.audience-stat-card--bounced .audience-stat-card__value, .audience-stat-card--bounced .audience-stat-card__icon {
  color: #dc2626;
}

.audience-stat-card__label, .audience-stat-card__topline {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: .72rem;
  font-weight: 700;
}

.audience-stat-card__body {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: 10px;
  display: flex;
}

.audience-stat-card__icon {
  color: var(--text-tertiary);
}

.audience-main, .audience-sidebar {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.audience-panel {
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: none;
  border-radius: 22px;
  overflow: hidden;
}

.audience-toolbar {
  padding: 0 22px 18px;
}

.audience-search {
  border: 1px solid var(--border-light);
  width: min(100%, 420px);
  color: var(--text-secondary);
  background: #f8fafc;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.audience-empty-state {
  color: var(--text-secondary);
  padding: 28px 22px 24px;
}

.audience-table-shell {
  border-top: 1px solid var(--border-light);
  overflow-x: auto;
}

.audience-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 980px;
}

.audience-table th, .audience-table td {
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  padding: 16px 14px;
}

.audience-table th {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  background: #fcfcfd;
  font-size: .72rem;
  font-weight: 700;
}

.audience-table td {
  color: var(--text-primary);
  font-size: .92rem;
}

.audience-table__checkbox-cell {
  text-align: center;
  width: 44px;
}

.audience-subscriber-cell {
  align-items: center;
  gap: 12px;
  min-width: 240px;
  display: flex;
}

.audience-subscriber-cell__email {
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  overflow: hidden;
}

.audience-status-badge {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.audience-engagement {
  align-items: center;
  gap: 10px;
  min-width: 120px;
  display: flex;
}

.audience-engagement__value, .audience-muted-cell {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: .84rem;
}

.audience-source-pill, .audience-tag {
  white-space: nowrap;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.audience-source-pill {
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  background: #fff;
}

.audience-tag {
  color: #6b7280;
  background: #f3f4f6;
}

.audience-tag--ghost {
  border: 1px dashed var(--border-light);
  color: var(--text-tertiary);
  background: none;
}

.audience-icon-button {
  border: 1px solid var(--border-light);
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  display: flex;
}

.audience-table-footer__pager button {
  border: 1px solid var(--border-light);
  min-width: 34px;
  height: 32px;
  color: var(--text-secondary);
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  padding: 0 10px;
}

.audience-table-footer__pager button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.audience-sidebar .creator-card {
  background: var(--white);
  box-shadow: none;
  border-radius: 22px;
  margin-bottom: 0;
}

.audience-sidebar .creator-card-header {
  padding: 10px 20px;
}

.audience-sidebar .creator-profile-link, .audience-sidebar .creator-profile-setup, .audience-sidebar .creator-form {
  padding: 0 20px 20px;
}

.audience-sidebar .creator-form.creator-form-inline {
  gap: 14px;
}

.audience-sidebar .creator-form-actions {
  padding-top: 4px;
}

.audience-sidebar-empty__body {
  color: var(--text-secondary);
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0 20px 20px;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .audience-stats-grid, .audience-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .audience-page {
    background: var(--bg-secondary);
  }

  .audience-header {
    align-items: flex-start;
  }

  .audience-header-actions {
    width: 100%;
  }

  .audience-header-actions > * {
    flex: auto;
  }

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

  .audience-panel__header, .audience-toolbar, .audience-table-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.import-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  background: #0006;
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: flex;
  position: fixed;
  inset: 0;
}

.import-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: none;
  overflow: hidden;
}

.import-modal-header {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.import-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.import-modal-header button {
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  padding: 4px;
}

.import-modal-header button:hover {
  background: var(--gray-100);
}

.import-modal-body {
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.import-modal-footer {
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  display: flex;
}

.import-modal-footer .btn-primary, .import-modal-footer .btn-secondary {
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.import-modal-footer .btn-primary {
  background: var(--primary);
  color: var(--white);
}

.import-modal-footer .btn-primary:hover {
  opacity: .9;
}

.import-modal-footer .btn-secondary {
  background: var(--gray-100);
  color: var(--text-primary);
}

.import-modal-footer .btn-secondary:hover {
  background: var(--gray-200);
}

.import-template-bar {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: #3b82f60f;
  border: 1px solid #3b82f626;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
}

.import-template-bar svg {
  color: #2563eb;
  flex-shrink: 0;
}

.import-template-btn {
  color: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  background: #2563eb;
  border: none;
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

.import-template-btn:hover {
  background: #1d4ed8;
}

.import-columns {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.import-col {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-family: monospace;
  font-size: 11px;
}

.import-col.required {
  color: #059669;
  background: #10b9811a;
}

.import-col.required em {
  opacity: .7;
  font-size: 9px;
  font-style: normal;
}

.import-dropzone {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px;
  transition: all .15s;
  display: flex;
}

.import-dropzone input {
  display: none;
}

.import-dropzone:hover {
  border-color: var(--primary);
  background: #dc262608;
}

.import-dropzone:hover svg {
  color: var(--primary);
}

.import-dropzone-text {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.import-progress {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 16px;
  display: flex;
}

.import-progress-spinner {
  color: var(--primary);
  line-height: 0;
}

.import-progress-count {
  text-align: center;
}

.import-progress-number {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 800;
}

.import-progress-total {
  color: var(--text-tertiary);
  font-size: 14px;
}

.import-progress-bar-wrap {
  background: var(--gray-100);
  border-radius: 3px;
  width: 100%;
  height: 6px;
  overflow: hidden;
}

.import-progress-bar-fill {
  background: var(--primary);
  border-radius: 3px;
  height: 100%;
}

.import-progress-step {
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.import-progress-step svg {
  color: var(--primary);
}

.import-progress-emails {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
}

.import-progress-email {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 11px;
  display: flex;
  position: absolute;
}

.import-progress-email svg:first-child {
  color: var(--text-tertiary);
}

.import-progress-email svg:last-child {
  color: #059669;
}

.import-progress-email span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.import-dropzone-sub {
  color: var(--text-tertiary);
  font-size: 11px;
}

.import-site-selector {
  margin-bottom: var(--spacing-sm);
}

.import-site-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: block;
}

.import-site-select-wrap {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  display: flex;
}

.import-site-select {
  font-size: var(--font-size-sm);
  padding: 4px var(--spacing-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-primary);
  flex: 1;
  max-width: 100%;
}

.import-checkbox {
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.import-checkbox input {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

.import-results {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.import-result-row {
  border-radius: var(--radius-md);
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.import-result-row.success {
  color: #166534;
  background: #dcfce7;
}

.import-result-row.success svg {
  color: #22c55e;
}

.import-result-row.warning {
  color: #92400e;
  background: #fef3c7;
}

.import-result-row.warning svg {
  color: #f59e0b;
}

.import-result-row.error {
  color: #991b1b;
  background: #fee2e2;
}

.import-result-row.error svg {
  color: #ef4444;
}

.import-error-list {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  max-height: 150px;
  padding: 10px 14px;
  overflow-y: auto;
}

.import-error-item {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: 3px 0;
  font-size: 11px;
}

.import-error-item:last-child {
  border-bottom: none;
}

.import-file-error {
  color: #dc2626;
  border-radius: var(--radius-md);
  background: #fee2e2;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.import-preview {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.import-preview-header {
  border-bottom: 1px solid var(--border-light);
  color: #059669;
  background: #10b9810f;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.import-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}

.import-preview-table th {
  background: var(--gray-50);
  color: var(--text-secondary);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  padding: 5px 10px;
  font-weight: 600;
}

.import-preview-table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  padding: 4px 10px;
  overflow: hidden;
}

.import-preview-table tr:last-child td {
  border-bottom: none;
}

.add-subscriber-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.add-subscriber-error {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: #ef4444;
  font-size: var(--font-size-base);
  background: #ef44441a;
  border: 1px solid #ef44444d;
  padding: 12px 16px;
  display: flex;
}

.add-subscriber-error svg {
  flex-shrink: 0;
}

.add-subscriber-success {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: #22c55e;
  font-size: var(--font-size-base);
  background: #22c55e1a;
  border: 1px solid #22c55e4d;
  padding: 12px 16px;
  display: flex;
}

.add-subscriber-success svg {
  flex-shrink: 0;
}

.form-row {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-input {
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  width: 100%;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  padding: 12px 16px;
  transition: all .2s;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:hover {
  border-color: var(--border-medium);
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
  outline: none;
}

.form-hint {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.form-hint a {
  color: var(--primary);
  text-decoration: none;
}

.form-hint a:hover {
  text-decoration: underline;
}

.action-config-section {
  background: linear-gradient(135deg, var(--primary-light) 0%, #f0f9ff 100%);
  border: 1px solid var(--border-light);
  margin-top: 16px;
  padding: 10px;
}

.action-config-header {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-md);
  color: var(--text-primary);
  margin-bottom: 16px;
  font-weight: 600;
  display: flex;
}

.action-config-header svg {
  color: var(--primary);
}

.action-config-fields {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.action-config-info {
  align-items: flex-start;
  gap: var(--spacing-sm-md);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: #fff9;
  margin-top: 16px;
  padding: 12px;
  line-height: 1.5;
  display: flex;
}

.action-config-info svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.transactional-page .page-header {
  margin-bottom: var(--spacing-sm);
}

.transactional-hero-grid, .transactional-content-grid {
  gap: var(--spacing-sm);
  display: grid;
}

.transactional-hero-grid {
  margin-bottom: var(--spacing-sm);
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
}

.transactional-overview-card {
  border: 1px solid var(--gray-200);
  box-shadow: none;
}

.transactional-overview-card h2 {
  margin: 0 0 var(--spacing-sm);
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  line-height: 1.08;
}

.transactional-overview-card p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.transactional-overview-card--hero {
  background: linear-gradient(#fff 0%, #fcfcfc 100%);
}

.transactional-kicker {
  margin-bottom: var(--spacing-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 700;
  display: inline-block;
}

.transactional-overview-card--status {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.transactional-status-header {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.transactional-status-header h3 {
  font-size: var(--font-size-xl);
  margin: 0;
}

.transactional-cta-link, .transactional-inline-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.transactional-cta-link:hover, .transactional-inline-link:hover {
  text-decoration: underline;
}

.transactional-example-list {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.transactional-example-pill {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  min-height: 36px;
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  align-items: center;
  padding: 0 14px;
  display: inline-flex;
}

.transactional-content-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: start;
}

.transactional-section-copy {
  margin-bottom: var(--spacing-md);
}

.transactional-section-copy h2, .transactional-section-copy h3 {
  margin: 0 0 6px;
}

.transactional-section-copy p {
  color: var(--text-secondary);
  margin: 0;
}

.transactional-step-list {
  gap: var(--spacing-md);
  display: grid;
}

.transactional-step-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: inherit;
  box-shadow: none;
  padding: 22px 24px;
  text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: block;
}

.transactional-step-card:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--gray-200));
  box-shadow: none;
  transform: translateY(-2px);
}

.transactional-step-card h3 {
  margin: 14px 0 8px;
  font-size: 1.06rem;
}

.transactional-step-card p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.transactional-step-card__top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.transactional-step-card__top svg {
  color: var(--primary);
}

.transactional-side-panel {
  gap: var(--spacing-sm);
  display: grid;
}

.transactional-metrics-grid {
  margin-bottom: 0;
}

.transactional-fetch-error {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  padding: 12px 14px;
}

.transactional-connected-apps, .transactional-link-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 16px;
}

.transactional-connected-apps__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 12px;
  display: flex;
}

.transactional-connected-apps__header h3 {
  font-size: var(--font-size-lg);
  margin: 0;
}

.transactional-connected-apps__list, .transactional-link-list {
  gap: 12px;
  display: grid;
}

.transactional-connected-apps__item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: 12px 0;
  display: flex;
}

.transactional-connected-apps__item:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.transactional-connected-apps__item strong {
  margin-bottom: 2px;
  display: block;
}

.transactional-connected-apps__item span {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.transactional-link-card {
  color: inherit;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.transactional-link-card svg {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.transactional-link-card strong {
  margin-bottom: 2px;
  display: block;
}

.transactional-link-card span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.transactional-template-gallery {
  gap: var(--spacing-md);
}

.transactional-template-card {
  align-items: stretch;
  gap: 8px;
  display: grid;
}

.transactional-template-main {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  padding: 0;
  display: flex;
}

.transactional-template-copy {
  min-width: 0;
}

.transactional-template-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.transactional-template-error {
  margin-top: var(--spacing-md);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  padding: 12px 14px;
}

@media (max-width: 960px) {
  .transactional-hero-grid, .transactional-content-grid {
    grid-template-columns: 1fr;
  }

  .transactional-template-actions {
    justify-content: stretch;
  }

  .transactional-template-actions .btn-secondary, .transactional-template-actions .btn-primary {
    text-align: center;
    flex: 1;
  }
}

.smtp-options {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.smtp-option {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.smtp-option:hover {
  border-color: var(--gray-400);
}

.smtp-option.selected {
  border-color: var(--primary);
  background: var(--gray-50);
}

.smtp-option input[type="radio"] {
  margin-top: 4px;
}

.smtp-option div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.smtp-option div strong {
  font-size: var(--font-size-sm);
}

.smtp-option div span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.smtp-config {
  background: var(--gray-50);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
}

.form-row {
  gap: var(--spacing-sm);
  display: flex;
}

.form-row .form-group {
  flex: 1;
}

.email-type-grid {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  display: grid;
}

.email-type-card {
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.email-type-card:hover {
  border-color: var(--gray-400);
}

.email-type-card.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

.email-type-card svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.email-type-card.selected svg {
  color: var(--primary);
}

.email-type-card div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.email-type-card div strong {
  font-size: var(--font-size-sm);
}

.email-type-card div span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.email-configs-section {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
}

.email-configs-section h4 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
}

.email-type-config-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.email-type-config-card h4 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.url-input-row {
  gap: var(--spacing-sm);
  display: flex;
}

.url-input-row input {
  flex: 1;
}

.validation-success {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--green-600);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  display: flex;
}

.validation-error {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--red-600);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  display: flex;
}

.code-examples .params-table {
  width: 100%;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.code-examples .params-table td {
  padding: var(--spacing-xs) 0;
  vertical-align: top;
}

.code-examples .params-table td:first-child {
  width: 80px;
}

.code-examples .params-table td:first-child code {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  padding: 2px 6px;
}

.code-examples .params-table td:last-child {
  color: var(--text-secondary);
}

.code-examples .params-table td a {
  color: var(--primary);
}

.code-examples .code-block {
  background: var(--gray-900);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.code-examples .code-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-800);
  color: var(--gray-300);
  font-size: var(--font-size-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.code-examples .copy-btn {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-700);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: var(--font-size-xs);
  cursor: pointer;
  border: none;
  display: flex;
}

.code-examples .copy-btn:hover {
  background: var(--gray-600);
}

.code-examples pre {
  padding: var(--spacing-md);
  margin: 0;
  overflow-x: auto;
}

.code-examples pre code {
  color: var(--gray-100);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.inline-input-row {
  gap: var(--spacing-sm);
  display: flex;
}

.inline-input-row .form-input {
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  flex: 1;
}

.inline-input-row .form-input:focus {
  border-color: var(--primary);
  outline: none;
}

.api-key-display {
  background: var(--gray-100);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  display: block;
}

.meta-text {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.test-result {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.test-result.success {
  background: var(--green-50);
  color: var(--green-700);
}

.test-result.error {
  background: var(--red-50);
  color: var(--red-700);
}

.test-result.warning {
  background: var(--yellow-50);
  color: var(--yellow-700);
}

.integration-layout {
  gap: var(--spacing-md);
  grid-template-columns: 1fr 280px;
  display: grid;
}

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

.integration-main {
  min-width: 0;
}

.integration-sidebar {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.type-selector {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
  display: flex;
}

.type-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all .15s;
}

.type-btn:hover {
  border-color: var(--gray-400);
}

.type-btn.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.code-section {
  margin-top: var(--spacing-sm);
}

.code-lang {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.code-header-inline {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.code-header-inline .section-title {
  margin: 0;
}

.code-block-simple {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  margin: 0;
  line-height: 1.6;
  overflow-x: auto;
}

.type-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  display: grid;
}

.type-card {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  transition: all .15s;
  display: flex;
  position: relative;
}

.type-card:hover {
  border-color: var(--gray-400);
}

.type-card.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

.type-card svg {
  color: var(--gray-500);
}

.type-card.selected svg {
  color: var(--primary);
}

.type-card span {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.type-card .check-icon {
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  color: var(--primary);
  position: absolute;
}

.vars-info {
  margin-bottom: var(--spacing-md);
}

.vars-info code {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  margin-left: var(--spacing-xs);
  padding: 2px 6px;
}

.domain-warning {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--yellow-50);
  border: 1px solid var(--yellow-200);
  border-radius: var(--radius-md);
  display: flex;
}

.domain-warning svg {
  color: var(--yellow-600);
  flex-shrink: 0;
}

.domain-warning h3 {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--yellow-800);
}

.domain-warning p {
  font-size: var(--font-size-sm);
  color: var(--yellow-700);
  margin: 0;
}

.ws-role-banner {
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  width: fit-content;
  padding: 6px 12px;
  display: flex;
}

.ws-role-banner strong {
  color: var(--text-primary);
}

.ws-role-banner--owner {
  color: #7c3aed;
  background: #8b5cf614;
  border-color: #8b5cf633;
}

.ws-role-banner--owner strong {
  color: #6d28d9;
}

.ws-role-banner--admin {
  color: #2563eb;
  background: #3b82f614;
  border-color: #3b82f633;
}

.ws-role-banner--admin strong {
  color: #1d4ed8;
}

.ws-role-banner--editor {
  color: #059669;
  background: #10b98114;
  border-color: #10b98133;
}

.ws-role-banner--editor strong {
  color: #047857;
}

.ws-role-banner--member {
  background: var(--gray-50);
  border-color: var(--border-light);
}

.ws-billing-banner {
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  background: #3b82f60f;
  border: 1px solid #3b82f626;
  padding: 12px 16px;
  display: flex;
}

.ws-billing-banner strong {
  color: var(--text-primary);
}

.rbac-menu {
  position: relative;
}

.rbac-menu-btn {
  border-radius: var(--radius-md);
  color: #b45309;
  cursor: pointer;
  letter-spacing: .03em;
  background: #f59e0b1a;
  border: 1px dashed #f59e0b66;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.rbac-menu-btn:hover {
  background: #f59e0b2e;
}

.rbac-menu-dropdown {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 220px;
  box-shadow: none;
  z-index: 200;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  overflow: hidden;
}

.rbac-menu-header {
  border-bottom: 1px solid var(--border-light);
  background: var(--gray-50);
  padding: 10px 12px;
}

.rbac-menu-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.rbac-menu-context {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.rbac-menu-list {
  max-height: 320px;
  padding: 4px 0;
  overflow-y: auto;
}

.rbac-menu-group {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  padding: 6px 12px 2px;
  font-size: 9px;
  font-weight: 700;
}

.rbac-menu-item {
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12px;
  text-decoration: none;
  transition: background .1s;
  display: flex;
}

.rbac-menu-item:hover {
  background: var(--gray-50);
}

.plan-features-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}

.plan-features-card-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
}

.plan-features-card-header strong {
  color: var(--text-primary);
}

.plan-features-card-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  display: grid;
}

.plan-features-card-item {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  text-decoration: none;
  transition: background .1s;
  display: flex;
}

.plan-features-card-item:nth-child(4n) {
  border-right: none;
}

.plan-features-card-item:nth-last-child(-n+4) {
  border-bottom: none;
}

.plan-features-card-item.active {
  color: var(--text-primary);
}

.plan-features-card-item.active svg {
  color: var(--primary);
}

.plan-features-card-item.active:hover {
  background: var(--gray-50);
}

.plan-features-card-item.locked {
  color: var(--text-tertiary);
}

.plan-features-card-item.locked svg {
  opacity: .4;
}

.plan-features-card-item.locked:hover {
  background: #f59e0b0a;
}

.plan-features-card-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.plan-features-card-tag {
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 3px;
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .plan-features-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-features-card-item:nth-child(2n) {
    border-right: none;
  }
}

.ws-readonly-hint {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  padding: 4px 10px;
  font-size: 11px;
  display: flex;
}

.creator-field-desc {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-tertiary);
  margin-top: 2px;
  display: block;
}

.creator-multiselect {
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  flex-direction: column;
  display: flex;
}

.creator-success {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: #059669;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: #10b98114;
  font-weight: 500;
  display: flex;
}

.creator-table tbody tr.row-selected {
  background: #dc26260a;
}

.import-field-mapper {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.import-mapper-list {
  padding: var(--spacing-sm) var(--spacing-md);
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.import-mapper-row {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  display: flex;
}

.import-mapper-row svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.import-mapper-row select {
  flex: 1;
  min-width: 0;
}

.import-mapper-col {
  min-width: 100px;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

.audience-page {
  background: none;
}

.audience-container {
  max-width: 1520px;
}

.audience-header {
  margin-bottom: var(--spacing-sm);
  align-items: center;
}

.audience-header-copy {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.audience-header-copy p {
  color: var(--text-secondary);
  margin: 0;
  font-size: .98rem;
}

.audience-header-kicker {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dc2626;
  font-size: .74rem;
  font-weight: 700;
}

.audience-header-actions {
  flex-wrap: wrap;
}

.audience-stats-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.audience-stat-card {
  text-align: left;
  cursor: pointer;
  background: #ffffffe0;
  border: 1px solid #0f172a14;
  border-radius: 18px;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 10px 20px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex;
}

.audience-stat-card:hover {
  box-shadow: none;
  border-color: #dc262638;
  transform: translateY(-2px);
}

.audience-stat-card.is-active {
  border-color: #dc262638;
  box-shadow: inset 0 0 0 1px #dc26261f;
}

.audience-stat-card__label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-size: .72rem;
  font-weight: 700;
}

.audience-stat-card__value {
  color: var(--text-primary);
  font-size: clamp(2rem, 3.3vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
}

.audience-stat-card__helper {
  color: var(--text-secondary);
  font-size: .84rem;
}

.audience-stat-card--total {
  background: linear-gradient(#fffffff2, #fef2f2d9);
  border-color: #dc262629;
}

.audience-stat-card--total .audience-stat-card__value {
  color: #111827;
}

.audience-stat-card--active .audience-stat-card__value {
  color: #16a34a;
}

.audience-stat-card--inactive .audience-stat-card__value {
  color: #64748b;
}

.audience-stat-card--engaged .audience-stat-card__value {
  color: #d97706;
}

.audience-layout {
  gap: var(--spacing-sm);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  display: grid;
}

.audience-main, .audience-sidebar {
  gap: var(--spacing-sm);
  display: grid;
}

.audience-panel {
  box-shadow: none;
  background: #fffffff0;
  border: 1px solid #0f172a14;
  border-radius: 22px;
  overflow: hidden;
}

.audience-panel__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: 12px 24px 16px;
  display: flex;
}

.audience-panel__title {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.audience-panel__subtitle {
  color: var(--text-secondary);
  margin: 4px 0 0;
  font-size: .92rem;
}

.audience-toolbar {
  border-bottom: 1px solid #0f172a0f;
  padding: 0 24px 18px;
}

.audience-search {
  max-width: 390px;
  height: 46px;
  color: var(--text-secondary);
  background: #f2f4f7;
  border: 1px solid #0f172a14;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  display: flex;
}

.audience-search input {
  width: 100%;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  font-size: .95rem;
}

.audience-table-shell {
  overflow-x: auto;
}

.audience-table {
  border-collapse: collapse;
  width: 100%;
}

.audience-table thead th {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a94a6;
  white-space: nowrap;
  border-bottom: 1px solid #0f172a0f;
  padding: 14px 16px;
  font-size: .7rem;
  font-weight: 700;
}

.audience-table tbody td {
  vertical-align: middle;
  color: var(--text-primary);
  border-bottom: 1px solid #0f172a0d;
  padding: 16px;
  font-size: .92rem;
}

.audience-table tbody tr {
  transition: background .18s;
}

.audience-table tbody tr:hover {
  background: #f8fafce6;
}

.audience-table tbody tr.is-highlighted {
  background: #dc26260a;
}

.audience-table__checkbox-cell {
  width: 44px;
}

.audience-table__checkbox-cell input {
  accent-color: #dc2626;
  width: 16px;
  height: 16px;
}

.audience-table__actions-head {
  text-align: right;
}

.audience-subscriber-cell {
  align-items: center;
  gap: 12px;
  display: flex;
}

.audience-subscriber-cell__avatar {
  color: #b91c1c;
  background: linear-gradient(135deg, #fecaca 0%, #fee2e2 100%);
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
}

.audience-subscriber-cell__meta {
  min-width: 0;
}

.audience-subscriber-cell__name {
  color: var(--text-primary);
  font-weight: 600;
}

.audience-subscriber-cell__email {
  color: #98a2b3;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: .84rem;
  overflow: hidden;
}

.audience-status-badge {
  border-radius: 999px;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  font-size: .76rem;
  font-weight: 700;
  display: inline-flex;
}

.audience-status-badge--active {
  color: #16a34a;
  background: #22c55e24;
}

.audience-status-badge--inactive {
  color: #64748b;
  background: #94a3b829;
}

.audience-status-badge--bounced {
  color: #ef4444;
  background: #f8717129;
}

.audience-engagement {
  align-items: center;
  gap: 10px;
  display: flex;
}

.audience-engagement__bar {
  background: #e5e7eb;
  border-radius: 999px;
  width: 82px;
  height: 6px;
  overflow: hidden;
}

.audience-engagement__fill {
  border-radius: inherit;
  height: 100%;
}

.audience-engagement__fill--high {
  background: #22c55e;
}

.audience-engagement__fill--medium {
  background: #facc15;
}

.audience-engagement__fill--low {
  background: #f87171;
}

.audience-engagement__fill--zero {
  background: #cbd5e1;
}

.audience-engagement__value {
  color: #667085;
  min-width: 34px;
  font-size: .82rem;
  font-weight: 700;
}

.audience-muted-cell {
  color: #667085;
  white-space: nowrap;
}

.audience-source-pill, .audience-tag {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  font-size: .74rem;
  font-weight: 600;
  display: inline-flex;
}

.audience-source-pill {
  color: #667085;
  background: #fff;
  border: 1px solid #0f172a14;
}

.audience-tag-list {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.audience-tag--neutral {
  color: #667085;
  background: #eef2f7;
}

.audience-tag--success {
  color: #16a34a;
  background: #22c55e24;
}

.audience-tag--warning {
  color: #ca8a04;
  background: #facc152e;
}

.audience-tag--ghost {
  color: #98a2b3;
  background: none;
  border: 1px dashed #98a2b366;
}

.audience-row-actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.audience-icon-button {
  color: #667085;
  background: #fff;
  border: 1px solid #0f172a14;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: background .18s, border-color .18s, color .18s;
  display: flex;
}

.audience-icon-button:hover {
  color: #111827;
  background: #f8fafc;
  border-color: #dc26262e;
}

.audience-empty-state {
  text-align: center;
  color: var(--text-secondary);
  padding: 56px 24px;
}

.audience-table-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  color: #667085;
  padding: 10px 24px 22px;
  font-size: .88rem;
  display: flex;
}

.audience-table-footer__pager {
  align-items: center;
  gap: 8px;
  display: flex;
}

.audience-table-footer__pager button {
  color: #667085;
  background: #fff;
  border: 1px solid #0f172a14;
  border-radius: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: .82rem;
  font-weight: 600;
}

.audience-table-footer__pager button.is-active {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

.audience-table-footer__pager button:disabled {
  opacity: .56;
}

.audience-sidebar-empty__body {
  color: var(--text-secondary);
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.audience-sidebar-empty__icon {
  color: #dc2626;
  background: #dc262614;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .audience-layout {
    grid-template-columns: 1fr;
  }

  .audience-sidebar {
    order: -1;
  }

  .audience-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .audience-page {
    padding: var(--spacing-lg);
  }

  .audience-header {
    align-items: flex-start;
  }

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

  .audience-panel__header, .audience-toolbar, .audience-table-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .audience-table thead {
    display: none;
  }

  .audience-table, .audience-table tbody, .audience-table tr, .audience-table td {
    width: 100%;
    display: block;
  }

  .audience-table tr {
    padding: 14px 16px;
  }

  .audience-table td {
    border: none;
    padding: 6px 0;
  }

  .audience-table__checkbox-cell, .audience-table__actions-head {
    display: none;
  }

  .audience-row-actions {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .audience-table-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.dashboard-page {
  background: var(--gray-50);
  min-height: 100vh;
  padding: var(--spacing-md) var(--spacing-lg);
}

@media (max-width: 767px) {
  .dashboard-page {
    padding: var(--spacing-sm);
  }
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

@media (max-width: 767px) {
  .dashboard-header {
    flex-direction: column;
  }
}

.dashboard-header__content {
  flex: 1;
}

.dashboard-header__badge {
  align-items: center;
  gap: var(--spacing-xs);
  color: #6366f1;
  font-size: var(--font-size-xs);
  border-radius: var(--public-radius-full);
  margin-bottom: var(--spacing-sm);
  background: #6366f11a;
  padding: 6px 12px;
  font-weight: 600;
  display: inline-flex;
}

.dashboard-header__title {
  font-size: var(--font-size-xl);
  color: var(--gray-900);
  font-weight: 700;
  font-family: var(--public-font-heading);
  margin: 0;
}

@media (max-width: 767px) {
  .dashboard-header__title {
    font-size: var(--font-size-lg);
  }
}

.dashboard-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0;
}

.dashboard-header__actions {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.dashboard-header__refresh {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--public-radius-md);
  width: 40px;
  height: 40px;
  color: var(--gray-500);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.dashboard-header__refresh:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dashboard-header__create {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  border-radius: var(--public-radius-md);
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.dashboard-header__create:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.dashboard-stats {
  margin-bottom: var(--spacing-sm);
}

.dashboard-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--public-radius-md);
  box-shadow: var(--public-card-shadow);
  overflow: hidden;
}

.dashboard-card-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.dashboard-card-title {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
  display: flex;
}

.dashboard-card-title svg {
  color: var(--gray-400);
}

.dashboard-card-link {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.dashboard-card-link:hover {
  text-decoration: underline;
}

.dashboard-card-content {
  padding: var(--spacing-md);
}

.dashboard-charts {
  margin-bottom: var(--spacing-md);
}

.dashboard-chart-container {
  padding: var(--spacing-sm);
  min-height: 200px;
}

.dashboard-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-400);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dashboard-empty svg {
  width: 36px;
  height: 36px;
  margin-bottom: var(--spacing-sm);
  opacity: .5;
}

.dashboard-empty p {
  margin: 0 0 var(--spacing-sm);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.dashboard-empty-btn {
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  border-radius: var(--public-radius-md);
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

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

.dashboard-empty-small {
  padding: var(--spacing-lg);
}

.dashboard-empty-icon {
  opacity: .4;
}

.dashboard-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: grid;
}

.dashboard-grid-charts {
  grid-template-columns: 2fr 1fr;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid-charts {
    grid-template-columns: 1fr;
  }
}

.dashboard-grid-content {
  grid-template-columns: 1fr 1.5fr;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid-content {
    grid-template-columns: 1fr;
  }
}

.dashboard-grid-main, .dashboard-grid-side {
  min-width: 0;
}

.dashboard-activity-skeleton {
  margin-bottom: var(--spacing-sm);
}

.dash-row {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: 1fr 340px;
  display: grid;
}

@media (max-width: 767px) {
  .dash-row {
    grid-template-columns: 1fr;
  }
}

.dash-col-main, .dash-col-side {
  gap: var(--spacing-md);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.dash-section-title {
  color: var(--text-primary);
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.dash-quick-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.dash-quick-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.dash-quick-item:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.dash-quick-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.dash-quick-icon--red {
  color: var(--error);
  background: #dc26261a;
}

.dash-quick-icon--purple {
  color: var(--primary);
  background: #7c3aed1a;
}

.dash-quick-icon--green {
  color: var(--success);
  background: #0596691a;
}

.dash-quick-icon--amber {
  color: var(--warning);
  background: #b453091a;
}

.dash-quick-icon--blue {
  color: var(--info);
  background: #2563eb1a;
}

.dash-quick-icon--pink {
  color: var(--error);
  background: #ec48991a;
}

.recent-activity__tabs {
  gap: var(--spacing-xs);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 3px;
  display: flex;
}

.recent-activity__tab {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  padding: 6px 12px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.recent-activity__tab:hover {
  color: var(--text-primary);
}

.recent-activity__tab.active {
  background: var(--white);
  color: var(--text-primary);
  box-shadow: none;
}

.recent-activity__list {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.recent-activity__item {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
}

.recent-activity__item:last-child {
  border-bottom: none;
}

.recent-activity__avatar {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.recent-activity__avatar.opens {
  color: #3b82f6;
  background: #3b82f61a;
}

.recent-activity__avatar.clicks {
  color: #8b5cf6;
  background: #8b5cf61a;
}

.recent-activity__info {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.recent-activity__email {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.recent-activity__detail {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.recent-activity__time {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.recent-activity__empty {
  padding: var(--spacing-lg);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.recent-activity__empty svg {
  margin-bottom: var(--spacing-xs);
  opacity: .4;
}

.recent-activity__loading {
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  flex-direction: column;
  display: flex;
}

.recent-activity__skeleton {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: 48px;
  animation: 1.5s ease-in-out infinite skeleton-pulse;
}

.dash-nav {
  margin-bottom: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xs);
}

.dash-nav__list {
  gap: var(--spacing-xs);
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.dash-nav__list::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .dash-nav__list {
    gap: 4px;
  }
}

.dash-nav__item {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  border: 1px solid #0000;
  padding: 10px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.dash-nav__item:hover {
  background: var(--gray-50);
  color: var(--primary);
  border-color: var(--gray-200);
}

.dash-nav__item svg {
  opacity: .7;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .dash-nav__item {
    font-size: var(--font-size-xs);
    padding: 8px 12px;
  }
}

.dashboard-site-filter {
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  width: fit-content;
  color: var(--gray-500);
  display: flex;
}

.dashboard-site-filter__select {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  padding: 2px var(--spacing-xs);
  background: none;
  border: none;
  outline: none;
}

.dashboard-site-filter__select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

.dashboard-site-badge {
  margin-left: var(--spacing-xs);
  padding: 2px var(--spacing-xs);
  background: var(--primary-50, #3b82f61a);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  vertical-align: middle;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  display: inline-flex;
}

.customer-admin-page {
  background: none;
  min-height: calc(100vh - 64px);
  padding: 12px 24px 40px;
}

@media (max-width: 767px) {
  .customer-admin-page {
    padding: 10px 14px 28px;
  }
}

.customer-admin-shell {
  max-width: 1360px;
  margin: 0 auto;
}

.customer-admin-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  display: flex;
}

@media (max-width: 767px) {
  .customer-admin-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.customer-admin-header__meta {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.customer-admin-header__meta h1 {
  color: #182132;
  margin: 0;
  font-size: clamp(1.85rem, 2vw, 2.2rem);
  font-weight: 700;
}

.customer-admin-header__meta p {
  color: #7b8798;
  margin: 0;
  font-size: .95rem;
}

.customer-admin-header__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  .customer-admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .customer-admin-kpis {
    grid-template-columns: 1fr;
  }
}

.customer-admin-kpi {
  box-shadow: none;
  background: #fffffff5;
  border: 1px solid #e7eaf1;
  border-radius: 18px;
  padding: 16px 18px;
}

.customer-admin-kpi--accent {
  background: linear-gradient(#fff6f6 0%, #fff 100%);
  border-color: #ef44442e;
}

.customer-admin-kpi__label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9aa3b2;
  margin-bottom: 10px;
  font-size: .72rem;
  font-weight: 700;
  display: block;
}

.customer-admin-kpi__value {
  color: #182132;
  font-size: clamp(1.75rem, 2vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  display: block;
}

.customer-admin-kpi__value--positive {
  color: #16a34a;
}

.customer-admin-kpi__value--negative {
  color: #ef4444;
}

.customer-admin-kpi__note {
  color: #7f8a9a;
  margin-top: 8px;
  font-size: .83rem;
  display: block;
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  .customer-admin-grid {
    grid-template-columns: 1fr;
  }
}

.customer-admin-main, .customer-admin-side {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.customer-admin-panel {
  box-shadow: none;
  background: #fffffff7;
  border: 1px solid #e7eaf1;
  border-radius: 20px;
  overflow: hidden;
}

.customer-admin-panel__header {
  border-bottom: 1px solid #eef1f6;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  display: flex;
}

@media (max-width: 767px) {
  .customer-admin-panel__header {
    flex-direction: column;
    align-items: stretch;
  }
}

.customer-admin-panel__title {
  color: #182132;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.customer-admin-panel__subtitle {
  color: #7f8a9a;
  margin: 4px 0 0;
  font-size: .86rem;
}

.customer-admin-search {
  width: min(100%, 320px);
  position: relative;
}

.customer-admin-search svg {
  color: #a0a9b8;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.customer-admin-search input {
  color: #182132;
  background: #f8fafc;
  border: 1px solid #dfe4ec;
  border-radius: 14px;
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  font-size: .92rem;
}

.customer-admin-search input:focus {
  background: #fff;
  border-color: #ef44446b;
  outline: none;
  box-shadow: 0 0 0 4px #ef444414;
}

.customer-admin-list {
  flex-direction: column;
  display: flex;
}

.customer-admin-list__item {
  border-top: 1px solid #eef1f6;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px;
  display: flex;
}

.customer-admin-list__item:first-child {
  border-top: 0;
}

.customer-admin-list__copy {
  min-width: 0;
}

.customer-admin-list__copy strong {
  color: #182132;
  font-size: .96rem;
  display: block;
}

.customer-admin-list__copy span {
  color: #7f8a9a;
  margin-top: 4px;
  font-size: .84rem;
  display: block;
}

.customer-admin-list__meta {
  color: #9aa3b2;
  flex-shrink: 0;
  font-size: .8rem;
}

.brand-wizard {
  background: var(--gray-50);
  min-height: 100vh;
  padding: var(--spacing-lg);
}

@media (max-width: 767px) {
  .brand-wizard {
    padding: var(--spacing-sm);
  }
}

.brand-wizard__progress {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  position: relative;
}

.brand-wizard__progress-bar {
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  height: 3px;
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
}

.brand-wizard__progress-fill {
  height: 100%;
  width: var(--progress);
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width .4s;
}

.brand-wizard__step {
  opacity: .4;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 4px;
  transition: opacity .3s;
  display: flex;
}

.brand-wizard__step--active {
  opacity: 1;
}

.brand-wizard__step-dot {
  background: var(--gray-200);
  width: 28px;
  height: 28px;
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.brand-wizard__step--active .brand-wizard__step-dot {
  background: var(--primary);
  color: var(--white);
}

.brand-wizard__step-label {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .brand-wizard__step-label {
    display: none;
  }
}

.brand-wizard__content {
  max-width: 560px;
  margin: 0 auto;
  animation: .35s wizardFadeIn;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-step {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--public-card-shadow);
}

.wizard-step--centered {
  text-align: center;
}

.wizard-step__icon {
  border-radius: var(--radius-lg);
  width: 56px;
  height: 56px;
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
  background: #dc262614;
  justify-content: center;
  align-items: center;
  display: flex;
}

.wizard-step--centered .wizard-step__icon {
  margin: 0 auto var(--spacing-sm);
}

.wizard-step__icon--success {
  color: #16a34a;
  background: #22c55e1a;
}

.wizard-step__icon--error {
  color: var(--primary);
  background: #dc26261a;
}

.wizard-step__title {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.wizard-step__desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-md);
}

.wizard-field {
  margin-bottom: var(--spacing-md);
}

.wizard-label {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
}

.wizard-input, .wizard-textarea {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  background: var(--white);
  padding: 10px 12px;
  transition: border-color .2s;
}

.wizard-input:focus, .wizard-textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px #dc26261a;
}

.wizard-input--lg {
  font-size: var(--font-size-base);
  padding: 12px 16px;
}

.wizard-input--sm {
  width: 90px;
  font-size: var(--font-size-xs);
  padding: 6px 8px;
  font-family: monospace;
}

.wizard-textarea {
  resize: vertical;
  min-height: 60px;
}

.wizard-url-group {
  margin-bottom: var(--spacing-md);
}

.wizard-url-row {
  gap: var(--spacing-sm);
  display: flex;
}

@media (max-width: 767px) {
  .wizard-url-row {
    flex-direction: column;
  }
}

.wizard-btn {
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.wizard-btn--primary {
  background: var(--primary);
  color: var(--white);
}

.wizard-btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.wizard-btn--primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.wizard-btn--ghost {
  color: var(--gray-600);
  background: none;
}

.wizard-btn--ghost:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.wizard-link {
  margin-top: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  display: block;
}

.wizard-link:hover {
  color: var(--primary);
}

.wizard-error {
  color: var(--primary);
  font-size: var(--font-size-sm);
  margin-top: 6px;
}

.wizard-actions {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  display: flex;
}

.wizard-actions--center {
  flex-wrap: wrap;
  justify-content: center;
}

.wizard-logo-preview {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.wizard-logo-img {
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  width: 48px;
  height: 48px;
}

.wizard-logo-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--gray-400);
  font-size: var(--font-size-sm);
  display: flex;
}

.wizard-preview {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.wizard-preview--expanded {
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.wizard-preview__badge {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--success);
  border-radius: var(--radius-full);
  background: #16a34a14;
  align-self: flex-start;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.wizard-preview__header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.wizard-preview__name {
  font-size: var(--font-size-md);
  display: block;
}

.wizard-preview__desc {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 4px 0 0;
}

.wizard-preview__font {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}

.wizard-preview__info {
  flex: 1;
  min-width: 0;
}

.wizard-preview__logo {
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  width: 56px;
  height: 56px;
  padding: 4px;
}

.wizard-preview__section {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.wizard-preview__section-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.wizard-color-item {
  align-items: center;
  gap: var(--spacing-xs);
  display: flex;
}

.wizard-color-label {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}

.wizard-color-code {
  color: var(--gray-400);
  font-size: 10px;
}

.wizard-preview__socials {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.wizard-social-link {
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  text-transform: capitalize;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  text-decoration: none;
  display: inline-flex;
}

.wizard-social-link:hover {
  background: var(--gray-200);
}

.wizard-btn--full {
  justify-content: center;
  width: 100%;
}

.wizard-preview__row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.wizard-preview__row p {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 4px 0 0;
}

.wizard-preview__colors {
  margin-bottom: var(--spacing-sm);
  gap: 6px;
  display: flex;
}

.wizard-colors-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .wizard-colors-grid {
    grid-template-columns: 1fr;
  }
}

.wizard-color-field {
  flex-direction: column;
  display: flex;
}

.wizard-color-input-row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.wizard-color-picker {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  width: 36px;
  height: 36px;
  padding: 2px;
}

.wizard-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.wizard-color-picker::-webkit-color-swatch {
  border-radius: var(--radius-sm);
  border: none;
}

.wizard-color-dot {
  background: var(--dot-color);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

.wizard-color-dot--lg {
  width: 24px;
  height: 24px;
}

.wizard-email-preview {
  margin-bottom: var(--spacing-md);
}

.wizard-email-mock {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}

.wizard-email-mock__header {
  background: var(--mock-primary);
  height: 32px;
}

.wizard-email-mock__body {
  padding: var(--spacing-md);
  background: var(--mock-bg);
}

.wizard-email-mock__title {
  background: var(--mock-text);
  width: 60%;
  height: 14px;
  margin-bottom: var(--spacing-sm);
  opacity: .8;
  border-radius: 2px;
}

.wizard-email-mock__line {
  background: var(--mock-text);
  opacity: .15;
  border-radius: 2px;
  width: 100%;
  height: 8px;
  margin-bottom: 6px;
}

.wizard-email-mock__line--short {
  width: 70%;
}

.wizard-email-mock__btn {
  background: var(--mock-primary);
  border-radius: var(--radius-sm);
  width: 80px;
  height: 24px;
  margin-top: var(--spacing-sm);
  display: inline-block;
}

.wizard-summary {
  margin: var(--spacing-md) auto;
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  max-width: 360px;
}

.wizard-summary__row {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.wizard-summary__row p {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 4px 0 0;
}

.wizard-summary__logo {
  object-fit: contain;
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
}

.wizard-summary__colors {
  justify-content: center;
  gap: 8px;
  display: flex;
}

.brands-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.brands-header__title {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  font-weight: 700;
}

.brands-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

.brands-header__cta {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.brands-header__cta:hover {
  background: var(--primary-hover);
}

.brands-empty {
  padding: var(--spacing-2xl) 0;
  justify-content: center;
  display: flex;
}

.brands-empty__card {
  text-align: center;
  max-width: 440px;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--bg-primary);
  border: 2px solid var(--primary-light);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.brands-empty__step-badge {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-full, 999px);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  display: inline-flex;
}

.brands-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.brands-empty__title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.brands-empty__text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.brands-empty__cta {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.brands-empty__cta:hover {
  background: var(--primary-hover);
  box-shadow: none;
  transform: translateY(-1px);
}

.brands-empty__hint {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: flex;
}

.platform-section {
  margin-bottom: var(--spacing-sm);
}

.platform-section-header {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.platform-section-header h3 {
  font-size: var(--font-size-md);
  margin: 0;
  font-weight: 600;
}

.platform-section-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-md);
}

.platform-form-grid {
  gap: var(--spacing-sm) var(--spacing-md);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .platform-form-grid {
    grid-template-columns: 1fr;
  }
}

.platform-color-row {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.platform-color-input {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 40px;
  height: 32px;
  padding: 2px;
}

.platform-actions {
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  justify-content: flex-end;
  display: flex;
}

.platform-error {
  font-size: var(--font-size-sm);
  color: var(--danger);
}

.platform-success {
  font-size: var(--font-size-sm);
  color: var(--success);
}

.platform-domain-add {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.platform-domain-add .property-input {
  flex: 1;
}

.platform-domains-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.platform-domain-card {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.platform-domain-info {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.platform-domain-info strong {
  font-size: var(--font-size-sm);
}

.platform-domain-badge {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-weight: 600;
}

.platform-domain-badge.pending {
  background: var(--gray-100);
  color: var(--gray-600);
}

.platform-domain-badge.warning {
  color: #92400e;
  background: #fef3c7;
}

.platform-domain-badge.success {
  color: #065f46;
  background: #d1fae5;
}

.platform-domain-badge.danger {
  color: #991b1b;
  background: #fee2e2;
}

.platform-empty {
  padding: var(--spacing-md);
  color: var(--gray-400);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  flex-direction: column;
  display: flex;
}

.settings-divider {
  background: var(--gray-200);
  height: 1px;
  margin: var(--spacing-lg) 0;
}

.whatsapp-header {
  margin-bottom: var(--spacing-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.whatsapp-status {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  display: flex;
}

.whatsapp-status-dot {
  background: var(--gray-300);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.whatsapp-status-dot.active {
  background: var(--success);
}

.whatsapp-webhook-url {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.whatsapp-webhook-row {
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  display: flex;
}

.whatsapp-webhook-value {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  background: var(--white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.whatsapp-webhook-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: var(--spacing-xs);
  display: block;
}

.whatsapp-form {
  margin-bottom: var(--spacing-md);
}

.whatsapp-help {
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  display: flex;
}

.whatsapp-help a {
  color: var(--primary);
  text-decoration: underline;
}

.deals-page {
  padding: var(--spacing-md);
  flex-direction: column;
  height: 100%;
  display: flex;
}

.deals-loading {
  justify-content: center;
  align-items: center;
  height: 300px;
  display: flex;
}

.deals-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.deals-header-left {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.deals-title {
  font-size: var(--font-size-lg);
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-weight: 600;
  display: flex;
}

.deals-count {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.deals-header-right {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.deals-view-toggle {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  display: flex;
  overflow: hidden;
}

.deals-view-btn {
  background: var(--white);
  cursor: pointer;
  color: var(--gray-500);
  border: none;
  align-items: center;
  padding: 4px 8px;
  display: flex;
}

.deals-view-btn.active {
  background: var(--gray-100);
  color: var(--gray-900);
}

.deals-kanban {
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
}

.deals-column {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 2px solid #0000;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 240px;
  max-width: 280px;
  transition: border-color .15s;
  display: flex;
}

.deals-column.drag-over {
  border-color: var(--stage-color);
  background: var(--gray-100);
}

.deals-col-header {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 2px solid var(--stage-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.deals-col-title {
  font-size: var(--font-size-sm);
  color: var(--stage-color);
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: flex;
}

.deals-col-count {
  background: var(--stage-color);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 18px;
  padding: 0 5px;
  font-size: 10px;
}

.deals-col-total {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 500;
}

.deals-col-cards {
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.deal-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  box-shadow: none;
  cursor: grab;
  border-left: 3px solid #0000;
  transition: box-shadow .15s;
}

.deal-card:hover {
  box-shadow: none;
}

.deal-card:active {
  cursor: grabbing;
}

.deal-card.overdue {
  border-left-color: var(--primary);
  background: #ef444408;
}

.deal-card-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.deal-card-title {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
}

.deal-prio-badge {
  border-radius: var(--radius-sm);
  background: var(--prio-color);
  color: var(--white);
  white-space: nowrap;
  text-transform: uppercase;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
}

.deal-card-contact {
  color: var(--gray-500);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 11px;
  overflow: hidden;
}

.deal-card-vehicle {
  color: var(--gray-600);
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  display: flex;
}

.deal-card-footer {
  margin-top: var(--spacing-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.deal-card-amount {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  font-weight: 600;
}

.deal-card-days {
  color: var(--gray-400);
  font-size: 10px;
}

.deal-card-followup {
  color: var(--gray-400);
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 10px;
  display: flex;
}

.deal-card-followup.followup-overdue {
  color: var(--primary);
  font-weight: 600;
}

.deals-form-fields {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.deals-form-row {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.deals-form-row-pair {
  gap: var(--spacing-sm);
  display: flex;
}

.deals-form-label {
  color: var(--gray-600);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.deals-form-input {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--white);
  width: 100%;
  padding: 6px 8px;
}

.deals-form-input:focus {
  border-color: var(--primary);
  outline: none;
}

.deals-form-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--white);
  cursor: pointer;
  width: 100%;
  padding: 6px 8px;
}

.deals-form-select:focus {
  border-color: var(--primary);
  outline: none;
}

.deals-form-textarea {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  resize: vertical;
  background: var(--white);
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
}

.deals-form-textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.deals-form-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.deals-form-footer-right {
  gap: var(--spacing-xs);
  margin-left: auto;
  display: flex;
}

.deals-btn-primary {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-weight: 500;
  display: flex;
}

.deals-btn-primary:hover {
  opacity: .9;
}

.deals-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.deals-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 6px 12px;
}

.deals-btn-secondary:hover {
  background: var(--gray-200);
}

.deals-btn-danger {
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: none;
  padding: 6px 12px;
}

.deals-btn-danger:hover {
  background: #ef44440d;
}

.deals-filters {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.deals-search-wrap {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  flex: 1;
  align-items: center;
  gap: 4px;
  max-width: 280px;
  padding: 4px 8px;
  display: flex;
}

.deals-search-input {
  font-size: var(--font-size-sm);
  background: none;
  border: none;
  outline: none;
  width: 100%;
}

.deals-filter-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--white);
  cursor: pointer;
  padding: 4px 8px;
}

.deals-table-wrap {
  overflow-x: auto;
}

.deals-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}

.deals-table th {
  text-align: left;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.deals-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

.deals-table-row {
  cursor: pointer;
  transition: background .1s;
}

.deals-table-row:hover {
  background: var(--gray-50);
}

.deals-stage-badge {
  border-radius: var(--radius-sm);
  color: var(--stage-color);
  border: 1px solid var(--stage-color);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}

.deals-empty {
  text-align: center;
  color: var(--gray-400);
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.quotes-page {
  padding: var(--spacing-md);
  max-width: 1200px;
}

.quotes-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quotes-header-left {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.quotes-title {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
  display: flex;
}

.quotes-count {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.quote-stats {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.quote-stat-card {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  box-shadow: none;
  min-width: 120px;
  color: var(--gray-500);
  flex: 1;
  display: flex;
}

.quote-stat-info {
  flex-direction: column;
  display: flex;
}

.quote-stat-value {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  font-weight: 600;
  line-height: 1.2;
}

.quote-stat-label {
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 10px;
}

.quote-filters {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.quote-search {
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--gray-400);
  display: flex;
}

.quote-search-input {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  background: none;
  border: none;
  outline: none;
  width: 180px;
}

.quote-status-filters {
  gap: 4px;
  display: flex;
}

.quote-filter-btn {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  transition: all .15s;
}

.quote-filter-btn:hover {
  background: var(--gray-50);
}

.quote-filter-btn.active {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}

.quote-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.quote-empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--gray-400);
}

.quote-empty p {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.quote-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  box-shadow: none;
  cursor: pointer;
  border-left: 3px solid var(--status-color, var(--gray-300));
  transition: box-shadow .15s;
}

.quote-card:hover {
  box-shadow: none;
}

.quote-card-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quote-card-number {
  color: var(--gray-400);
  font-family: monospace;
  font-size: 11px;
}

.quote-status-badge {
  border-radius: var(--radius-sm);
  background: var(--status-color);
  color: var(--white);
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.quote-card-client {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  margin-top: 4px;
  font-weight: 600;
}

.quote-card-vehicle {
  color: var(--gray-600);
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  display: flex;
}

.quote-card-amount {
  font-size: var(--font-size-md);
  color: var(--gray-900);
  margin-top: var(--spacing-xs);
  font-weight: 700;
}

.quote-card-footer {
  margin-top: var(--spacing-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quote-card-date {
  color: var(--gray-400);
  font-size: 10px;
}

.quote-card-expired-btn {
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  color: var(--warning);
  cursor: pointer;
  background: none;
  padding: 1px 6px;
  font-size: 10px;
}

.quote-card-expired-btn:hover {
  background: var(--warning);
  color: var(--white);
}

.quote-card-financing {
  color: var(--gray-500);
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 10px;
  display: flex;
}

.quote-form-fields {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.quote-form-row {
  gap: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.quote-form-group {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.quote-form-group.full-width {
  grid-column: 1 / -1;
}

.quote-form-group label {
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 11px;
  font-weight: 600;
}

.quote-form-input, .quote-form-select, .quote-form-textarea {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
}

.quote-form-input:focus, .quote-form-select:focus, .quote-form-textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px #dc26261a;
}

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

.quote-form-footer {
  padding-top: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quote-form-footer-right {
  gap: var(--spacing-xs);
  margin-left: auto;
  display: flex;
}

.financing-calc {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.financing-calc-title {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  display: flex;
}

.financing-calc-inputs {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.financing-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.financing-field label {
  color: var(--gray-500);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}

.financing-select, .financing-input {
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  padding: 4px 8px;
}

.financing-calc-results {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.financing-result-item {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  justify-content: space-between;
  padding: 2px 0;
  display: flex;
}

.financing-result-item.highlight {
  color: var(--gray-900);
  font-weight: 700;
  font-size: var(--font-size-md);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 4px;
}

.recent-sends__stats {
  border-bottom: 1px solid var(--gray-100);
  gap: 0;
  display: flex;
}

.recent-sends__stat {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  border-right: 1px solid var(--gray-100);
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
  display: flex;
}

.recent-sends__stat:last-child {
  border-right: none;
}

.recent-sends__stat--failed {
  color: var(--danger);
}

.recent-sends__stat-value {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.recent-sends__stat--failed .recent-sends__stat-value {
  color: var(--danger);
}

.recent-sends__stat-label {
  color: var(--text-tertiary);
}

.recent-sends__tabs {
  border-bottom: 1px solid var(--gray-100);
  padding: 0 var(--spacing-md);
  gap: 0;
  display: flex;
}

.recent-sends__tab {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 4px;
  margin-bottom: -1px;
  padding: 8px 12px;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.recent-sends__tab:hover {
  color: var(--text-primary);
}

.recent-sends__tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.recent-sends__tab-count {
  font-size: var(--font-size-2xs);
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
  padding: 0 5px;
  font-weight: 700;
}

.recent-sends__tab.active .recent-sends__tab-count {
  background: var(--primary);
  color: var(--white);
}

.recent-sends__list {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.recent-sends__item {
  align-items: center;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-50);
  padding: 6px 0;
  display: flex;
}

.recent-sends__item:last-child {
  border-bottom: none;
}

.recent-sends__dot {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}

.recent-sends__dot--sent {
  background: var(--success-light);
  color: var(--success);
}

.recent-sends__dot--opened {
  background: var(--info-light);
  color: var(--info);
}

.recent-sends__dot--failed {
  background: var(--error-light);
  color: var(--error);
}

.recent-sends__dot--pending {
  background: var(--gray-100);
  color: var(--text-tertiary);
}

.recent-sends__info {
  flex-direction: column;
  flex: 1;
  gap: 0;
  min-width: 0;
  display: flex;
}

.recent-sends__to {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.recent-sends__subject {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.recent-sends__badge {
  font-size: var(--font-size-2xs);
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
  flex-shrink: 0;
  padding: 2px 6px;
  font-weight: 700;
}

.recent-sends__badge--sent {
  background: var(--success-light);
  color: var(--success);
}

.recent-sends__badge--opened {
  background: var(--info-light);
  color: var(--info);
}

.recent-sends__badge--failed {
  background: var(--error-light);
  color: var(--error);
}

.recent-sends__badge--pending {
  background: var(--gray-100);
  color: var(--text-tertiary);
}

.recent-sends__time {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.recent-sends__empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  display: flex;
}

.recent-sends__loading {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.recent-sends__skeleton {
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  height: 34px;
  animation: 1.5s ease-in-out infinite skeleton-pulse;
}

.getting-started {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.getting-started__header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.getting-started__title {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 700;
  display: flex;
}

.getting-started__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.getting-started__progress {
  font-size: var(--font-size-xs);
  color: var(--primary);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: #3b82f61a;
  padding: 4px 10px;
  font-weight: 700;
}

.getting-started__bar {
  background: var(--border-light);
  border-radius: var(--radius-full);
  width: 100%;
  height: 6px;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.getting-started__bar-fill {
  background: var(--primary);
  border-radius: var(--radius-full);
  height: 100%;
  transition: width .4s;
}

.getting-started__steps {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.getting-started__type-hint {
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
}

.getting-started__type-hint a {
  color: var(--primary);
  margin-left: var(--spacing-xs);
  font-weight: 600;
}

.getting-started__step {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.getting-started__step:hover:not(.getting-started__step--done) {
  border-color: var(--primary);
  box-shadow: none;
}

.getting-started__step--done {
  opacity: .6;
}

.getting-started__step--done .getting-started__icon {
  background: var(--success-light);
  color: var(--success);
}

.getting-started__step--done .getting-started__step-title {
  text-decoration: line-through;
}

.getting-started__icon {
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  color: var(--primary);
  background: #3b82f61a;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.getting-started__text {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.getting-started__step-title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.getting-started__step-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.getting-started__cta {
  font-size: var(--font-size-xs);
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: inline-flex;
}

.help-center {
  max-width: 900px;
  padding: var(--spacing-md);
  margin: 0 auto;
}

.help-center__header {
  margin-bottom: var(--spacing-sm);
}

.help-center__header h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.help-center__header p {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  margin: 0;
}

.help-search {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  background: var(--white);
  color: var(--gray-400);
  transition: border-color .15s;
  display: flex;
}

.help-search:focus-within {
  border-color: var(--primary);
}

.help-search__input {
  font-size: var(--font-size-sm);
  background: none;
  border: none;
  outline: none;
  flex: 1;
}

.help-category-grid {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

@media (max-width: 767px) {
  .help-category-grid {
    grid-template-columns: 1fr;
  }
}

.help-category-card {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-decoration: none;
  transition: all .2s;
}

.help-category-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.help-category-card__icon {
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  color: var(--primary);
  margin-bottom: var(--spacing-sm);
  background: #dc262614;
  justify-content: center;
  align-items: center;
  display: flex;
}

.help-category-card__title {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  margin: 0 0 4px;
  font-weight: 600;
}

.help-category-card__desc {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.4;
}

.help-category-card__count {
  color: var(--gray-400);
  font-size: 11px;
}

.help-center__articles h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.help-center__empty {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--spacing-md) 0;
}

.help-article-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.help-article-card {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.help-article-card:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.help-article-card__category {
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: .5px;
  font-size: 10px;
  font-weight: 600;
}

.help-article-card__title {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  margin: 4px 0;
  font-weight: 600;
}

.help-article-card__summary {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin: 0;
  line-height: 1.4;
}

.help-article-card__meta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  display: flex;
}

.help-article__back {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
  text-decoration: none;
  display: flex;
}

.help-article__back:hover {
  color: var(--primary);
}

.help-article__meta {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.help-article__category {
  text-transform: uppercase;
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
}

.help-article__time {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.help-article__title {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--spacing-sm);
  font-weight: 700;
}

.help-article__summary {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin: 0 0 var(--spacing-xl);
  line-height: 1.6;
}

.help-article__section {
  margin-bottom: var(--spacing-sm);
}

.help-article__section h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-sm);
  font-weight: 600;
}

.help-article__section p {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.5;
}

.help-article__section ul {
  padding-left: var(--spacing-lg);
  margin: var(--spacing-sm) 0;
}

.help-article__section li {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--spacing-xs);
  line-height: 1.5;
}

.help-button {
  width: 32px;
  height: 32px;
  color: var(--gray-400);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.help-button:hover {
  color: var(--primary);
  background: #dc262614;
}

.suppression-page {
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.suppression-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.suppression-back {
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
  text-decoration: none;
  display: flex;
}

.suppression-back:hover {
  color: var(--primary);
}

.suppression-header-content h1 {
  font-size: var(--font-size-5xl);
  color: var(--gray-900);
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 700;
}

.suppression-header-content p {
  font-size: var(--font-size-lg);
  color: var(--gray-500);
  margin: 0;
}

.suppression-actions {
  gap: var(--spacing-md-sm);
  display: flex;
}

.btn-primary, .btn-secondary, .btn-danger {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm-md) var(--spacing-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.btn-primary {
  background: var(--primary);
  color: var(--white, #fff);
}

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

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.btn-secondary:hover {
  background: var(--gray-200);
}

.btn-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-danger {
  background: var(--error-light);
  color: var(--error);
}

.btn-danger:hover {
  background: #fecaca;
}

.btn-icon {
  padding: var(--spacing-sm-xs);
  cursor: pointer;
  color: var(--gray-400);
  border-radius: var(--radius-xs);
  background: none;
  border: none;
}

.btn-icon:hover {
  background: var(--gray-100);
  color: var(--error);
}

.suppression-message {
  padding: var(--spacing-md-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.suppression-message.success {
  background: var(--success-light);
  color: #166534;
}

.suppression-message.error {
  background: var(--error-light);
  color: var(--error);
}

.suppression-message button {
  font-size: var(--font-size-2xl);
  cursor: pointer;
  opacity: .6;
  background: none;
  border: none;
}

.suppression-stats {
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  display: grid;
}

.stat-card {
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--stat-border-color, var(--gray-300));
  padding: var(--spacing-md);
  text-align: center;
  background: #fff;
  border-radius: 8px;
}

.stat-card.total {
  border-left-color: var(--primary);
  background: var(--primary-light);
}

.stat-value {
  font-size: var(--font-size-4xl);
  color: var(--gray-900);
  font-weight: 700;
  display: block;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.suppression-filters {
  gap: var(--spacing-md-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.filter-search {
  align-items: center;
  gap: var(--spacing-sm);
  border: 1px solid var(--gray-200);
  min-width: 200px;
  padding: 0 var(--spacing-md-sm);
  background: #fff;
  border-radius: 8px;
  flex: 1;
  display: flex;
}

.filter-search svg {
  color: var(--gray-400);
}

.filter-search input {
  padding: var(--spacing-sm-md) 0;
  font-size: var(--font-size-base);
  border: none;
  outline: none;
  flex: 1;
}

.filter-select {
  padding: var(--spacing-sm-md) var(--spacing-md-sm);
  border: 1px solid var(--gray-200);
  font-size: var(--font-size-base);
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
}

.suppression-table-container {
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.suppression-loading, .suppression-empty {
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
  color: var(--gray-500);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.suppression-empty svg {
  color: var(--gray-300);
  margin-bottom: var(--spacing-md);
}

.suppression-empty h3 {
  margin: 0 0 var(--spacing-sm);
  color: var(--gray-900);
}

.suppression-table {
  border-collapse: collapse;
  width: 100%;
}

.suppression-table th, .suppression-table td {
  padding: var(--spacing-md-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
}

.suppression-table th {
  background: var(--gray-50);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  color: var(--gray-600);
}

.suppression-table tr:hover {
  background: var(--gray-50);
}

.suppression-table tr.selected {
  background: #6366f10d;
}

.col-checkbox {
  width: 40px;
}

.col-email {
  font-weight: 500;
}

.col-reason {
  width: 140px;
}

.col-added-by {
  width: 150px;
}

.col-date {
  width: 120px;
}

.col-actions {
  width: 60px;
}

.reason-badge {
  padding: var(--spacing-xs) var(--spacing-sm-md);
  font-size: var(--font-size-sm);
  color: #fff;
  background-color: var(--badge-color, var(--gray-400));
  border-radius: 12px;
  font-weight: 500;
  display: inline-block;
}

.suppression-pagination {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  display: flex;
}

.modal-overlay {
  z-index: 1000;
  padding: var(--spacing-lg);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal {
  border-radius: var(--radius-lg-xl);
  background: #fff;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.modal-header {
  padding: var(--spacing-md-lg) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.modal-header h2 {
  font-size: var(--font-size-2xl);
  margin: 0;
  font-weight: 600;
}

.modal-close {
  font-size: var(--font-size-4xl);
  cursor: pointer;
  color: var(--gray-400);
  background: none;
  border: none;
}

.modal-footer {
  justify-content: flex-end;
  gap: var(--spacing-md-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
  display: flex;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  display: block;
}

.form-group textarea, .form-group select {
  width: 100%;
  padding: var(--spacing-sm-md) var(--spacing-md-sm);
  border: 1px solid var(--gray-200);
  font-size: var(--font-size-base);
  resize: vertical;
  border-radius: 8px;
}

.form-group textarea:focus, .form-group select:focus {
  border-color: var(--primary);
  outline: none;
}

.import-dropzone {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 2px dashed var(--gray-300);
  margin-bottom: var(--spacing-md);
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  display: flex;
}

.import-dropzone svg {
  color: var(--gray-400);
}

.import-dropzone p {
  color: var(--gray-500);
  margin: 0;
}

.import-info {
  background: var(--gray-50);
  padding: var(--spacing-md);
  border-radius: 8px;
}

.import-info h4 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--gray-700);
}

.import-info p {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--gray-500);
}

.import-info code {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  background: var(--gray-100);
  padding: var(--spacing-md-sm);
  border-radius: var(--radius-sm);
  display: block;
}

.spinner {
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: .8s linear infinite suppression-spin;
}

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

@media (max-width: 768px) {
  .suppression-page {
    padding: var(--spacing-md);
  }

  .suppression-header {
    flex-direction: column;
  }

  .suppression-actions {
    justify-content: stretch;
    width: 100%;
  }

  .suppression-actions button {
    flex: 1;
  }

  .suppression-table-container {
    overflow-x: auto;
  }

  .col-added-by, .col-date {
    display: none;
  }
}

.account-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 12px;
}

.account-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 400px;
  color: var(--text-secondary);
  flex-direction: column;
  display: flex;
}

.account-spinner {
  animation: 1s linear infinite spin;
}

.account-container {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.account-header {
  margin-bottom: 8px;
}

.account-header h1 {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.account-header p {
  color: var(--text-secondary);
  font-size: 18px;
}

.account-stats {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.account-stat-card {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--border-light);
  padding: 10px;
  display: flex;
}

.account-stat-icon {
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.account-stat-content {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.account-stat-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.account-stat-value {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.account-stat-active {
  color: var(--success);
}

.account-section {
  background: var(--white);
  border: 1px solid var(--border-light);
  padding: 16px;
}

.account-section-title {
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}

.account-actions {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.account-action-card {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--bg-secondary);
  padding: 16px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.account-action-card:hover {
  background: var(--bg-tertiary);
}

.account-action-icon {
  background: var(--white);
  width: 44px;
  height: 44px;
  color: var(--primary);
  border: 1px solid var(--border-light);
  justify-content: center;
  align-items: center;
  display: flex;
}

.account-action-content {
  flex: 1;
}

.account-action-content h3 {
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.account-action-content p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.account-action-arrow {
  color: var(--text-tertiary);
}

.account-info-card {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.account-info-row {
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  display: flex;
}

.account-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-info-label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.account-info-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.subscribe-page {
  min-height: 100vh;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  justify-content: center;
  align-items: center;
  display: flex;
}

.subscribe-container {
  width: 100%;
  max-width: 440px;
}

.subscribe-card {
  background: var(--bg-elevated);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-lg);
}

.subscribe-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.subscribe-header h1 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.5rem;
  font-weight: 700;
}

.subscribe-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  width: 80px;
  height: 80px;
  color: var(--white);
  margin: 0 auto var(--spacing-lg);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
}

.subscribe-bio {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.subscribe-count {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-tertiary);
  font-size: .875rem;
  display: inline-flex;
}

.subscribe-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.subscribe-field {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.subscribe-field label {
  color: var(--text-primary);
  font-size: .875rem;
  font-weight: 500;
}

.subscribe-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  transition: border-color var(--duration-fast);
  font-size: 1rem;
}

.subscribe-input:focus {
  border-color: var(--primary);
  outline: none;
}

.subscribe-button {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast);
  margin-top: var(--spacing-sm);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.subscribe-button:hover {
  background: var(--primary-hover);
}

.subscribe-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.subscribe-spinner {
  animation: 1s linear infinite spin;
}

.subscribe-privacy {
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--spacing-md);
  font-size: .75rem;
}

.subscribe-error {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--error-light);
  color: var(--error-dark);
  font-size: .875rem;
  display: flex;
}

.subscribe-success {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.subscribe-success svg {
  color: var(--success);
  margin-bottom: var(--spacing-md);
}

.subscribe-success h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 600;
}

.subscribe-success p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.subscribe-links {
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  display: flex;
}

.subscribe-links a {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  transition: color var(--duration-fast);
  font-size: .875rem;
  text-decoration: none;
  display: flex;
}

.subscribe-links a:hover {
  color: var(--primary);
}

@media (max-width: 767px) {
  .subscribe-page, .subscribe-card {
    padding: var(--spacing-md);
  }

  .subscribe-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }
}

.template-gallery {
  animation: fadeIn var(--duration-normal);
}

.template-gallery-header {
  margin-bottom: var(--spacing-sm);
}

.template-gallery-header h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-size: 1.25rem;
  font-weight: 600;
}

.template-gallery-header p {
  color: var(--text-secondary);
  font-size: .9375rem;
}

.template-business-banner {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--primary-light, #6366f114);
  border-radius: var(--radius-md);
  color: var(--primary);
  font-size: var(--font-size-sm);
  width: fit-content;
  font-weight: 500;
  display: flex;
}

.template-categories {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.template-category-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  font-size: .875rem;
  font-weight: 500;
  display: flex;
}

.template-category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.template-category-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.template-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  display: grid;
}

.template-card {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--duration-fast);
  text-align: left;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.template-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-card-preview {
  color: #ffffffe6;
  background-position: center;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 180px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.template-card-blank {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: #ffffffe6;
  flex-direction: column;
  display: flex;
}

.template-card-blank span {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .875rem;
  font-weight: 500;
}

.template-card-thumbnail-wrapper {
  background: var(--white);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.template-card-thumbnail-iframe {
  pointer-events: none;
  transform-origin: 0 0;
  border: none;
  width: 200%;
  height: 200%;
  transform: scale(.5);
}

.template-card-thumbnail-overlay {
  pointer-events: none;
  background: linear-gradient(to top, #0000001a 0%, #0000 30%);
  position: absolute;
  inset: 0;
}

.template-card:hover .template-card-thumbnail-overlay {
  background: linear-gradient(to top, #00000026 0%, #0000 40%);
}

.template-card-overlay {
  padding: var(--spacing-md);
  background: linear-gradient(to top, #000000b3 0%, #0000004d 50%, #0000 100%);
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
  position: absolute;
  inset: 0;
}

.template-card:hover .template-card-overlay {
  background: linear-gradient(to top, #000c 0%, #0006 50%, #0000 100%);
}

.template-card-category {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffffb3;
  margin-bottom: 4px;
  font-size: .6875rem;
  font-weight: 600;
}

.template-card-title {
  color: #fff;
  text-shadow: 0 1px 3px #0000004d;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.template-card-info {
  padding: var(--spacing-md);
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.template-card-info h3 {
  color: var(--text-primary);
  font-size: .9375rem;
  font-weight: 600;
}

.template-card-info p {
  color: var(--text-secondary);
  font-size: .8125rem;
  line-height: 1.4;
}

.template-card-subject {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--border-light);
  font-size: .75rem;
  overflow: hidden;
}

@media (max-width: 900px) {
  .template-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 640px) {
  .template-categories {
    padding-bottom: var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .template-category-btn {
    white-space: nowrap;
  }

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

  .template-card-preview {
    height: 120px;
  }
}

.templates-page .template-categories {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 14px;
  display: flex;
}

.templates-page .template-category {
  font-size: var(--font-size-md);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: none;
  align-items: center;
  padding: 10px 20px;
  font-weight: 500;
  transition: all .2s;
  display: inline-flex;
}

.templates-page .template-category:hover {
  border-color: var(--black);
  background: var(--gray-100);
}

.templates-page .template-category.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.templates-page .template-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  display: grid;
}

.templates-page .template-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.templates-page .template-card:before {
  content: "";
  background: var(--black);
  height: 4px;
  transition: transform .2s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.templates-page .template-card:hover {
  border-color: var(--black);
  box-shadow: none;
  transform: translateY(-4px);
}

.templates-page .template-card:hover:before {
  transform: scaleX(1);
}

.templates-page .template-preview {
  border-bottom: 2px solid var(--gray-200);
  justify-content: center;
  align-items: center;
  height: 180px;
  font-size: 56px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.templates-page .template-letter {
  color: var(--white);
  text-shadow: 0 2px 8px #0000004d;
  z-index: 1;
  font-size: 48px;
  font-weight: 700;
}

.templates-page .template-source-badge {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 1;
  position: absolute;
}

.templates-page .template-info {
  padding: var(--spacing-md);
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.templates-page .template-name {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.templates-page .template-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.templates-page .template-meta {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.templates-page .template-category-tag, .templates-page .template-creator {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: capitalize;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.templates-page .template-use-btn {
  margin-top: var(--spacing-sm);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: background .2s;
}

.templates-page .template-use-btn:hover {
  background: var(--primary-hover);
}

.template-preview-mini {
  border-bottom: 2px solid var(--gray-200);
  height: 200px;
  position: relative;
  overflow: hidden;
}

.template-preview-mini:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#0000, #ffffffe6);
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.template-card:hover .template-preview-mini:after {
  background: linear-gradient(#0000, #fffffff2);
}

.theme-btn-preview {
  border: 1px solid;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 48px;
  height: 36px;
  padding: 4px;
  display: flex;
}

.template-info {
  padding: 10px;
}

.template-name {
  letter-spacing: -.3px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 700;
}

.template-description {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.5;
}

.template-meta {
  border-top: 1px solid var(--gray-200);
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  display: flex;
}

.template-category-tag {
  font-size: var(--font-size-2xs);
  background: var(--black);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 6px 10px;
  font-weight: 600;
  display: inline-flex;
}

.template-category-tag svg {
  width: 12px;
  height: 12px;
}

.template-use-btn {
  font-size: var(--font-size-sm);
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 16px;
  font-weight: 600;
  transition: all .15s;
}

.template-use-btn:hover {
  background: var(--black);
  color: var(--white);
}

.template-modal {
  z-index: 1000;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #000000d9;
  justify-content: center;
  align-items: center;
  padding: 40px;
  display: flex;
  position: fixed;
  inset: 0;
}

.template-modal-content {
  background: var(--white);
  border: 2px solid var(--black);
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.template-modal-header {
  background: var(--black);
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px;
  display: flex;
}

.template-modal-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 700;
}

.template-modal-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--white);
  background: none;
  border: 2px solid #ffffff4d;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  transition: all .15s;
  display: flex;
}

.template-modal-close:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.template-modal-body {
  flex: 1;
  grid-template-columns: 1fr 320px;
  display: grid;
  overflow: hidden;
}

.template-modal-preview {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  padding: 32px;
  overflow-y: auto;
}

.template-modal-preview-inner {
  background: var(--white);
  box-shadow: none;
  max-width: 500px;
  margin: 0 auto;
  padding: 32px;
  font-family: Georgia, serif;
  line-height: 1.5;
}

.template-modal-sidebar {
  border-left: 2px solid var(--gray-200);
  background: var(--white);
  padding: 28px;
  overflow-y: auto;
}

.template-modal-section {
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 12px;
  padding-bottom: 28px;
}

.template-modal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.template-modal-label {
  font-size: var(--font-size-2xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-weight: 700;
}

.template-modal-value {
  color: var(--black);
  font-size: 16px;
  line-height: 1.6;
}

.template-modal-footer {
  border-top: 2px solid var(--gray-200);
  justify-content: flex-end;
  gap: var(--spacing-md-sm);
  background: var(--gray-100);
  padding: 10px 28px;
  display: flex;
}

.template-picker-categories {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 12px;
  display: flex;
}

.template-picker-category {
  font-size: var(--font-size-md);
  background: var(--white);
  border: 1px solid var(--gray-300);
  cursor: pointer;
  padding: 8px 16px;
  transition: all .15s;
}

.template-picker-category:hover {
  border-color: var(--black);
}

.template-picker-category.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.template-picker-grid {
  gap: var(--spacing-sm);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.template-picker-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  transition: all .2s;
  overflow: hidden;
}

.template-picker-card:hover {
  border-color: var(--black);
  box-shadow: none;
  transform: translateY(-4px);
}

.template-picker-card-preview {
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  height: 160px;
  padding: 12px;
  overflow: hidden;
}

.template-mini-preview {
  height: 100%;
  padding: 12px;
  overflow: hidden;
}

.template-mini-block {
  margin-bottom: 4px;
}

.template-picker-card-info {
  padding: 10px;
}

.template-picker-card-name {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
}

.template-picker-card-desc {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.5;
}

.template-picker-card-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.template-picker-card-category {
  font-size: var(--font-size-xs);
  background: var(--gray-100);
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 10px;
  font-weight: 500;
}

.template-picker-card-btn {
  background: var(--black);
  color: var(--white);
  font-size: var(--font-size-md);
  cursor: pointer;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: all .15s;
}

.template-picker-card-btn:hover {
  background: var(--gray-800);
}

.template-picker-gallery-link {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.template-gallery-cta {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--white);
  border: 2px solid var(--gray-200);
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.template-gallery-cta:hover {
  border-color: var(--black);
  background: var(--gray-50);
}

.template-gallery-hint {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--gray-500);
}

@media (max-width: 1024px) {
  .quick-start-grid, .template-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .quick-start-grid, .template-picker-grid {
    grid-template-columns: 1fr;
  }

  .template-picker-title {
    font-size: var(--font-size-4xl);
  }
}

.quick-start-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.quick-start-card {
  align-items: center;
  gap: var(--spacing-md);
  background: var(--white);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
  text-align: left;
  animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
  padding: 10px;
  animation-fill-mode: backwards;
  display: flex;
}

.quick-start-card:first-child {
  animation-delay: 0s;
}

.quick-start-card:nth-child(2) {
  animation-delay: 50ms;
}

.quick-start-card:nth-child(3) {
  animation-delay: .1s;
}

.quick-start-card:nth-child(4) {
  animation-delay: .15s;
}

.quick-start-card:nth-child(5) {
  animation-delay: .2s;
}

.quick-start-card:nth-child(6) {
  animation-delay: .25s;
}

.quick-start-card:nth-child(7) {
  animation-delay: .3s;
}

.quick-start-card:nth-child(8) {
  animation-delay: .35s;
}

.quick-start-card:hover {
  border-color: var(--black);
  box-shadow: none;
  transform: translateY(-4px);
}

.quick-start-card:active {
  box-shadow: none;
  transform: translateY(-2px);
}

.quick-start-icon {
  background: var(--gray-100);
  width: 56px;
  height: 56px;
  color: var(--gray-600);
  transition: all var(--duration-fast) var(--ease-out-quart);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.quick-start-card:hover .quick-start-icon {
  background: var(--black);
  color: var(--white);
  transform: scale(1.1);
}

.quick-start-info {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.quick-start-name {
  color: var(--black);
  font-size: 16px;
  font-weight: 600;
}

.quick-start-desc {
  font-size: var(--font-size-md);
  color: var(--gray-500);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.admin-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}

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

.admin-header h1 {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.admin-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.admin-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-direction: column;
  padding: 80px 24px;
  display: flex;
}

.admin-loading p {
  color: var(--text-secondary);
  font-size: 16px;
}

.admin-error {
  background: var(--bg-secondary);
  border: 1px solid var(--error);
  text-align: center;
  padding: 10px;
}

.admin-error h2 {
  color: var(--error);
  margin: 0 0 12px;
}

.admin-error p {
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.admin-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 24px;
}

.admin-analytics-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 10px;
  display: grid;
}

.admin-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 16px;
  transition: transform .2s, box-shadow .2s;
  display: flex;
}

.admin-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.admin-stat-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.admin-stat-icon.primary {
  color: var(--primary);
  background: #3b82f61a;
}

.admin-stat-icon.success {
  color: var(--success);
  background: #22c55e1a;
}

.admin-stat-icon.warning {
  color: var(--warning);
  background: #f59e0b1a;
}

.admin-stat-icon.info {
  color: var(--info);
  background: #6366f11a;
}

.admin-stat-icon.secondary {
  color: var(--text-secondary);
  background: #6b72801a;
}

.admin-stat-content {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.admin-stat-value {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1;
}

.admin-stat-label {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.campaign-type-distribution {
  gap: var(--spacing-md-sm);
  flex-direction: column;
  display: flex;
}

.type-bar-item {
  gap: var(--spacing-sm-xs);
  flex-direction: column;
  display: flex;
}

.type-bar-label {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.type-name {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.type-count {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-weight: 600;
}

.type-bar-container {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}

.type-bar-fill {
  background: var(--primary);
  height: 100%;
  transition: width .3s;
}

@media (max-width: 1024px) {
  .admin-analytics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.admin-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
  padding: 16px;
}

.admin-section h2 {
  color: var(--text-primary);
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
}

.admin-section-header {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: 10px;
  display: flex;
}

.admin-section-header h2 {
  margin: 0;
}

.admin-filters {
  gap: var(--spacing-md-sm);
  flex-wrap: wrap;
  display: flex;
}

.admin-search-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  width: 280px;
  max-width: 100%;
  padding: 8px 14px;
}

.admin-search-input:focus {
  border-color: var(--primary);
  outline: none;
}

.admin-filter-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px 14px;
}

.admin-filter-select:focus {
  border-color: var(--primary);
  outline: none;
}

.admin-view-toggle {
  gap: var(--spacing-xs);
  background: var(--bg-tertiary);
  padding: 4px;
  display: flex;
}

.view-btn {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 16px;
  font-weight: 500;
  transition: all .2s;
}

.view-btn:hover {
  color: var(--text-primary);
}

.view-btn.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.admin-table-container {
  overflow-x: auto;
}

.admin-table {
  border-collapse: collapse;
  width: 100%;
}

.admin-table th {
  text-align: left;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  padding: 12px 16px;
  font-weight: 600;
}

.admin-table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.admin-table th.sortable:hover {
  color: var(--text-primary);
}

.admin-table td {
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  padding: 16px;
}

.admin-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.campaign-cell {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.campaign-name {
  color: var(--text-primary);
  font-weight: 600;
}

.campaign-desc {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  max-width: 300px;
  overflow: hidden;
}

.campaign-type-tag {
  background: var(--bg-tertiary);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-weight: 500;
  display: inline-block;
}

.status-badge {
  font-size: var(--font-size-sm);
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-flex;
}

.status-badge.status-active {
  color: var(--success);
  background: #22c55e1a;
}

.status-badge.status-paused {
  color: var(--warning);
  background: #f59e0b1a;
}

.status-badge.status-archived {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.schedule-cell {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  text-transform: capitalize;
}

.number-cell {
  color: var(--text-primary);
  text-align: center;
  font-weight: 500;
}

.date-cell {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  white-space: nowrap;
}

.admin-table-link {
  color: var(--text-primary);
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  display: flex;
}

.admin-table-link strong {
  font-weight: 600;
  transition: color .15s;
}

.admin-table-link:hover strong {
  color: var(--primary);
}

.admin-table-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
}

.admin-table-creator {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
}

.admin-table-creator:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.admin-table-creator svg {
  opacity: .7;
}

.admin-table-muted {
  color: var(--text-tertiary);
}

.admin-table-number {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.admin-table-date {
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.admin-table-actions {
  gap: var(--spacing-xs);
  display: flex;
}

.admin-action-btn {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .15s;
  display: flex;
}

.admin-action-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.workflow-active {
  color: var(--success);
  font-weight: 600;
}

.workflow-inactive {
  color: var(--text-secondary);
}

.admin-table-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--spacing-lg) !important;
}

.view-toggle {
  border: 1px solid var(--border-color);
  display: flex;
  overflow: hidden;
}

.view-toggle-btn {
  background: var(--bg-primary);
  width: 36px;
  height: 32px;
  color: var(--text-tertiary);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.view-toggle-btn:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.view-toggle-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.view-toggle-btn.active {
  color: var(--primary);
  background: var(--primary-light);
}

.top-performers-table {
  overflow-x: auto;
}

.top-performers-table table {
  border-collapse: collapse;
  width: 100%;
}

.top-performers-table table th {
  text-align: left;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  font-weight: 600;
}

.top-performers-table table td {
  border-bottom: 1px solid var(--border-color);
  padding: 14px 16px;
}

.top-performers-table table td.campaign-name {
  color: var(--text-primary);
  font-weight: 600;
}

.top-performers-table table td.campaign-creator {
  color: var(--text-secondary);
}

.top-performers-table table tbody tr:hover {
  background: var(--bg-tertiary);
}

.top-performers-table .open-rate {
  font-weight: 600;
}

.top-performers-table .open-rate.good {
  color: var(--success);
}

.table-filters {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  display: flex;
}

.table-filters-left {
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.table-filters-right {
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.table-search {
  align-items: center;
  min-width: 320px;
  display: flex;
  position: relative;
}

.table-search svg {
  color: var(--text-tertiary);
  pointer-events: none;
  position: absolute;
  left: 14px;
}

.table-search-input {
  border: 1px solid var(--border-light);
  background: var(--white);
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: 7px 38px 7px 36px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.table-search-input::placeholder {
  color: var(--text-tertiary);
}

.table-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
}

.table-search-clear {
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: absolute;
  right: 10px;
}

.table-search-clear:hover {
  color: var(--text-primary);
}

.table-filter {
  align-items: center;
  display: flex;
  position: relative;
}

.table-filter-select {
  appearance: none;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px 28px 6px 10px;
  transition: border-color .15s;
}

.table-filter-select:focus {
  border-color: var(--primary);
  outline: none;
}

.table-filter-select:hover {
  border-color: var(--text-tertiary);
}

.table-filter-icon {
  color: var(--text-tertiary);
  pointer-events: none;
  position: absolute;
  right: 10px;
}

.table-result-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .table-filters, .table-filters-left {
    flex-direction: column;
    align-items: stretch;
  }

  .table-search-input, .table-filter-select {
    width: 100%;
  }
}

.admin-user-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  display: grid;
}

.admin-user-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 10px;
  transition: all .2s;
}

.admin-user-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.user-card-header {
  gap: var(--spacing-md-sm);
  margin-bottom: 16px;
  display: flex;
}

.user-avatar {
  background: var(--primary);
  width: 36px;
  height: 36px;
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  display: flex;
}

.user-avatar-sm {
  background: var(--primary);
  width: 36px;
  height: 36px;
  color: var(--white);
  font-weight: 600;
  font-size: var(--font-size-base);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

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

.user-email {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-md);
  color: var(--primary);
  overflow: hidden;
}

.user-company {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.user-card-stats {
  gap: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  padding: 12px 0;
  display: flex;
}

.user-stat {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.user-stat-value {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
}

.user-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.user-card-actions {
  justify-content: flex-end;
  display: flex;
}

.selected-user-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.btn-back {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  padding: 8px 12px;
  transition: all .2s;
  display: flex;
}

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

.selected-user-info h2 {
  margin: 0 0 4px;
}

.selected-user-email {
  font-size: var(--font-size-base);
  color: var(--primary);
}

.subscribers-page {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.subscribers-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.subscribers-stats {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.subscribers-stat {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  display: flex;
}

.subscribers-stat-active {
  border-color: var(--success);
}

.subscribers-stat-active .subscribers-stat-value {
  color: var(--success);
}

.subscribers-stat-pending {
  border-color: var(--warning);
}

.subscribers-stat-pending .subscribers-stat-value {
  color: var(--warning);
}

.subscribers-stat-unsubscribed {
  border-color: var(--danger);
}

.subscribers-stat-unsubscribed .subscribers-stat-value {
  color: var(--danger);
}

.subscribers-stat-bounced {
  border-color: var(--gray-500);
}

.subscribers-stat-bounced .subscribers-stat-value {
  color: var(--gray-500);
}

.subscribers-stat-value {
  font-weight: 700;
}

.subscribers-stat-label {
  color: var(--text-secondary);
}

.subscriber-cell {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.subscriber-email {
  font-weight: 500;
}

.subscriber-name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.creators-count {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
}

.subscribers-tags {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.subscribers-tag {
  background: var(--bg-tertiary);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 2px 8px;
}

.subscribers-tag-more {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: 2px 6px;
}

.admin-campaigns-list {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.admin-campaign-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 10px;
  transition: all .2s;
}

.admin-campaign-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.campaign-card-main {
  margin-bottom: 16px;
}

.campaign-card-header {
  margin-bottom: 12px;
}

.campaign-card-title {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  margin-bottom: 4px;
  display: flex;
}

.campaign-card-title h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.campaign-card-desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.campaign-card-meta {
  gap: var(--spacing-md) 24px;
  flex-wrap: wrap;
  display: flex;
}

.meta-item {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.meta-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.meta-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

.meta-value.text-success {
  color: var(--success);
}

.campaign-card-user {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md-sm);
  border-top: 1px solid var(--border-color);
  margin-bottom: 12px;
  padding: 12px 0;
  display: flex;
}

.user-details {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.campaign-card-footer {
  border-top: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  display: flex;
}

.campaign-date {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.admin-modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
  position: fixed;
  inset: 0;
}

.admin-modal {
  background: var(--bg-secondary);
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}

.modal-header h2 {
  color: var(--text-primary);
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.modal-close {
  background: var(--bg-tertiary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  border: none;
  justify-content: center;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.modal-close:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

.modal-section {
  margin-bottom: 16px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section h3 {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 12px;
  font-weight: 600;
}

.owner-card {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--bg-primary);
  padding: 16px;
  display: flex;
}

.owner-info {
  gap: var(--spacing-2xs);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.owner-name {
  color: var(--text-primary);
  font-weight: 600;
}

.owner-email {
  font-size: var(--font-size-base);
  color: var(--primary);
  text-decoration: none;
}

.owner-email:hover {
  text-decoration: underline;
}

.owner-company {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.owner-actions {
  flex-shrink: 0;
}

.detail-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  display: grid;
}

.detail-item {
  gap: var(--spacing-2xs);
  flex-direction: column;
  display: flex;
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.detail-value {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .admin-analytics-grid, .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .admin-page {
    padding: 16px;
  }

  .admin-header {
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-direction: column;
  }

  .admin-analytics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-stat-card {
    padding: 16px;
  }

  .admin-stat-value {
    font-size: 22px;
  }

  .admin-filters {
    flex-direction: column;
    width: 100%;
  }

  .admin-search-input {
    width: 100%;
  }

  .admin-user-grid {
    grid-template-columns: 1fr;
  }

  .campaign-card-meta {
    gap: var(--spacing-md-sm) 16px;
  }

  .admin-modal {
    max-height: 100vh;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.user-email-history {
  background: var(--white);
  padding: var(--spacing-lg);
  border: 1px solid var(--gray-200);
  margin-top: var(--spacing-md);
}

.user-email-history-title {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--gray-700);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
  display: flex;
}

.user-email-history-loading, .user-email-history-empty {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: var(--font-size-md);
  display: flex;
}

.user-email-history-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.user-email-change-item {
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-left: 3px solid var(--primary);
}

.user-email-change-emails {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
  display: flex;
}

.user-email-change-emails svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

.user-email-old {
  color: var(--gray-500);
  text-decoration: line-through;
}

.user-email-new {
  color: var(--gray-900);
  font-weight: 500;
}

.user-email-change-meta {
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  display: flex;
}

.user-email-status {
  font-size: var(--font-size-xs);
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-weight: 500;
  display: flex;
}

.user-email-status.success {
  color: var(--success);
  background: #22c55e1a;
}

.user-email-status.pending {
  color: var(--warning);
  background: #eab3081a;
}

.user-email-status.failure {
  color: var(--error);
  background: #ef44441a;
}

.user-email-date {
  color: var(--gray-400);
}

.user-email-ip {
  color: var(--gray-400);
  font-family: monospace;
  font-size: var(--font-size-xs);
}

.dev-preview-page {
  background: var(--gray-50);
  min-height: 100vh;
  padding: 16px;
}

.dev-preview-header {
  margin-bottom: 16px;
}

.dev-preview-header h1 {
  color: var(--gray-900);
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  display: flex;
}

.dev-preview-header p {
  color: var(--gray-600);
  font-size: 14px;
}

.dev-preview-controls {
  background: var(--white);
  border: 1px solid var(--gray-200);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  display: flex;
}

.dev-preview-controls .control-group {
  align-items: center;
  gap: 12px;
  display: flex;
}

.dev-preview-controls .control-group label {
  color: var(--gray-700);
  font-weight: 500;
}

.dev-preview-controls .control-group select {
  border: 1px solid var(--gray-300);
  min-width: 200px;
  padding: 8px 12px;
  font-size: 14px;
}

.dev-preview-controls .control-group select:focus {
  border-color: var(--primary);
  outline: none;
}

.dev-preview-controls .refresh-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  transition: all .15s;
  display: flex;
}

.dev-preview-controls .refresh-btn:hover {
  background: var(--gray-200);
}

.dev-preview-controls .device-toggle {
  gap: 4px;
  display: flex;
}

.dev-preview-controls .device-toggle button {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  cursor: pointer;
  padding: 8px 12px;
  transition: all .15s;
}

.dev-preview-controls .device-toggle button:first-child {
  border-radius: 4px 0 0 4px;
}

.dev-preview-controls .device-toggle button:last-child {
  border-radius: 0 4px 4px 0;
}

.dev-preview-controls .device-toggle button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.dev-preview-controls .device-toggle button:hover:not(.active) {
  background: var(--gray-100);
}

.dev-preview-container {
  background: var(--gray-200);
  justify-content: center;
  min-height: 600px;
  padding: 16px;
  display: flex;
}

.dev-preview-container .preview-frame {
  background: var(--white);
  box-shadow: none;
  transition: max-width .3s;
  overflow: hidden;
}

.dev-preview-container .preview-frame iframe {
  display: block;
}

.dev-preview-container .loading-state {
  height: 400px;
  color: var(--gray-500);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.dev-preview-container .loading-state .spin {
  animation: 1s linear infinite spin;
}

.features-hero {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80");
  background-position: center;
  background-size: cover;
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}

.features-hero-overlay {
  background: var(--public-hero-overlay);
  z-index: 1;
  position: absolute;
  inset: 0;
}

.features-hero-content {
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

.features-hero-title {
  font-family: var(--public-font-heading);
  color: var(--white);
  margin-bottom: 10px;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.2;
}

.features-hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--public-text-on-dark-muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

.features-hero-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

@media (max-width: 767px) {
  .features-hero {
    padding: 120px 0 60px;
  }

  .features-hero-title {
    font-size: var(--font-size-5xl);
  }

  .features-hero-subtitle {
    font-size: var(--font-size-lg);
  }
}

.features-section {
  padding: 80px 0;
}

.features-section.bg-gray {
  background: var(--gray-100);
}

.features-section-header {
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features-section-header {
    gap: var(--spacing-sm);
    text-align: center;
    flex-direction: column;
  }
}

.features-section-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  width: 80px;
  height: 80px;
  color: var(--white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.features-section-text {
  flex: 1;
}

.features-section-title {
  font-size: var(--font-size-6xl);
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.features-section-subtitle {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1.6;
}

.features-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid {
    gap: var(--spacing-sm);
    grid-template-columns: 1fr;
  }
}

.feature-detail-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 32px;
}

.feature-detail-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.bg-gray .feature-detail-card {
  background: var(--white);
}

.feature-detail-icon {
  background: var(--primary-light);
  width: 48px;
  height: 48px;
  color: var(--primary);
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.feature-detail-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}

.feature-detail-description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.features-comparison {
  background: var(--gray-100);
  padding: 80px 0;
}

.comparison-table-wrapper {
  margin-top: 60px;
  overflow-x: auto;
}

.comparison-table {
  border-collapse: collapse;
  background: var(--white);
  width: 100%;
  box-shadow: var(--public-card-shadow);
  min-width: 600px;
  overflow: hidden;
}

.comparison-table th, .comparison-table td {
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  padding: 10px 12px;
}

.comparison-table th {
  color: var(--text-primary);
  background: var(--gray-100);
  font-size: 18px;
  font-weight: 600;
}

.comparison-table th:first-child {
  text-align: left;
}

.comparison-table td {
  color: var(--text-secondary);
  font-size: 16px;
}

.comparison-table td:first-child {
  text-align: left;
  color: var(--text-primary);
  font-weight: 500;
}

.comparison-table .comparison-highlight {
  background: #f6821f0d;
}

.comparison-table .comparison-highlight th, .comparison-table .comparison-highlight td {
  border-bottom-color: #f6821f1a;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table .check-icon {
  color: var(--success);
}

.comparison-table .x-icon {
  color: var(--text-tertiary);
}

.features-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  text-align: center;
  padding: 100px 0;
}

.features-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.features-cta-title {
  font-size: var(--font-size-7xl);
  color: var(--white);
  margin-bottom: 16px;
  font-weight: 700;
}

.features-cta-subtitle {
  color: var(--public-text-on-dark);
  margin-bottom: 14px;
  font-size: 20px;
}

.features-cta-actions {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.features-category {
  padding: var(--public-section-padding);
}

.features-category.bg-white {
  background: var(--white);
}

.features-category.bg-gray {
  background: var(--gray-100);
}

.features-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.feature-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.feature-card {
  text-align: center;
  padding: 32px;
}

.feature-card-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 56px;
  height: 56px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  display: flex;
}

.feature-card-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.feature-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features-hero-title {
    font-size: var(--font-size-7xl);
  }

  .features-section-title {
    font-size: var(--font-size-5xl);
  }
}

@media (max-width: 767px) {
  .features-hero {
    padding: 100px 0 60px;
  }

  .features-hero-title {
    font-size: var(--font-size-6xl);
  }

  .features-hero-subtitle {
    font-size: 16px;
  }

  .features-hero-actions {
    gap: var(--spacing-md);
    flex-direction: column;
    display: flex;
  }

  .features-category, .features-section {
    padding: 60px 0;
  }

  .features-section-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }

  .features-section-title {
    font-size: var(--font-size-4xl);
  }

  .feature-card, .feature-detail-card {
    padding: 12px;
  }

  .features-cta-title {
    font-size: var(--font-size-5xl);
  }
}

.automation-editor {
  gap: var(--spacing-md);
  max-width: 820px;
  margin: var(--spacing-md) auto 0;
  padding: 0 var(--spacing-md);
  grid-template-columns: 1fr 220px;
  display: grid;
}

.flow-pipeline {
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.flow-connector {
  flex-direction: column;
  align-items: center;
  height: 44px;
  display: flex;
  position: relative;
}

.flow-connector-line {
  background: linear-gradient(to bottom, var(--border-default), var(--border-light));
  flex: 1;
  width: 2px;
}

.flow-connector-add {
  border: 2px solid var(--border-default);
  background: var(--bg-primary);
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flow-connector-add:hover, .flow-connector-add.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: scale(1.15);
}

.flow-connector-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-sm);
  z-index: 50;
  min-width: 190px;
  position: absolute;
  top: 50%;
  left: calc(50% + 20px);
  transform: translateY(-50%);
}

.flow-connector-menu-group:not(:last-child) {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
}

.flow-connector-menu-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 700;
  display: block;
}

.flow-connector-menu-item {
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 6px var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  display: flex;
}

.flow-connector-menu-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.flow-end-node {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  display: flex;
}

.flow-end-icon {
  border: 2px dashed var(--border-default);
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.automations-list {
  margin-bottom: var(--spacing-sm);
}

.automations-list-header {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.automations-list-header h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.automations-count {
  min-width: 24px;
  height: 24px;
  padding: 0 var(--spacing-xs);
  background: var(--primary-light);
  color: var(--primary);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.automations-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.automation-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
}

.automation-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.automation-card-header {
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.automation-card-icon {
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  color: var(--primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.automation-card-status {
  font-size: var(--font-size-xs);
  padding: 3px var(--spacing-xs);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600;
}

.automation-card-status.active {
  background: var(--success-light);
  color: var(--success-dark);
}

.automation-card-status.paused {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.automation-card-status.draft {
  background: var(--info-light);
  color: var(--info-dark);
}

.automation-card-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.automation-card-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.automation-card-meta {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  display: flex;
}

.automation-card-tag {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.automation-card-stats {
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  display: flex;
}

.automation-card-stats span {
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.automations-templates {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.automations-templates > h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2xs);
  font-weight: 600;
}

.automations-templates > p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

.automations-templates-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  display: grid;
}

.automation-template-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
}

.automation-template-card:hover {
  border-color: var(--primary);
  box-shadow: none;
}

.automation-template-card h3 {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-2xs);
  font-weight: 600;
}

.automation-template-card p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm);
  flex: 1;
  line-height: 1.5;
}

.automation-template-icon {
  background: var(--primary-light);
  width: 44px;
  height: 44px;
  color: var(--primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  justify-content: center;
  align-items: center;
  display: flex;
}

.automation-template-meta {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  display: flex;
}

.automation-template-meta span {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.automation-template-btn {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  font-weight: 600;
  transition: background .15s;
  display: flex;
}

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

.flow-node {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  cursor: pointer;
  width: 340px;
  transition: all var(--duration-normal) var(--ease-in-out);
  box-shadow: var(--shadow-sm);
}

.flow-node:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.flow-node--trigger {
  border-left: 3px solid var(--purple, #8b5cf6);
}

.flow-node--step.flow-node--blue {
  border-left: 3px solid var(--info, #2563eb);
}

.flow-node--step.flow-node--amber {
  border-left: 3px solid var(--warning, #f59e0b);
}

.flow-node--step.flow-node--green {
  border-left: 3px solid var(--success, #10b981);
}

.flow-node--step.flow-node--red {
  border-left: 3px solid var(--error, #ef4444);
}

.flow-node--step.flow-node--purple {
  border-left: 3px solid var(--purple, #8b5cf6);
}

.flow-node-header {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm-md) var(--spacing-md);
  display: flex;
}

.flow-node-icon {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.flow-node-icon.blue {
  background: rgba(var(--info, #2563eb), .1);
  color: var(--info, #2563eb);
}

.flow-node-icon.amber {
  background: rgba(var(--warning, #f59e0b), .1);
  color: var(--warning, #f59e0b);
}

.flow-node-icon.green {
  background: rgba(var(--success, #10b981), .1);
  color: var(--success, #10b981);
}

.flow-node-icon.red {
  background: rgba(var(--error, #ef4444), .1);
  color: var(--error, #ef4444);
}

.flow-node-icon.purple {
  background: rgba(var(--purple, #8b5cf6), .1);
  color: var(--purple, #8b5cf6);
}

.flow-node-info {
  flex: 1;
  min-width: 0;
}

.flow-node-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
}

.flow-node-title {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 600;
  display: block;
}

.flow-node-summary {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.flow-node-desc {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: 0 var(--spacing-md) var(--spacing-sm);
  margin: 0;
}

.flow-node-action, .flow-node-delete {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flow-node-action:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.flow-node-delete:hover {
  background: var(--error-light);
  color: var(--error);
}

.flow-node-edit {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.flow-node-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.flow-node-field span {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 600;
}

.flow-node-hint {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
  display: flex;
}

.automation-sidebar {
  border-left: 1px solid var(--border-light);
  padding-left: var(--spacing-md);
  top: var(--spacing-lg);
  align-self: start;
  position: sticky;
}

.automation-sidebar-title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
}

.automation-sidebar-desc {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0 0 var(--spacing-md);
}

.automation-sidebar-group {
  margin-bottom: var(--spacing-sm);
}

.automation-sidebar-group-title {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 0 0 var(--spacing-sm);
  font-weight: 700;
}

.automation-sidebar-item {
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  transition: all var(--duration-fast) ease;
  background: none;
  border: none;
  display: flex;
}

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

.automation-sidebar-item:active {
  transform: scale(.98);
}

.automation-sidebar-item strong {
  font-size: var(--font-size-sm);
  display: block;
}

.automation-sidebar-item span {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  display: block;
}

.automation-sidebar-icon {
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.automation-sidebar-icon.blue {
  color: #2563eb;
  background: #2563eb1a;
}

.automation-sidebar-icon.amber {
  color: #f59e0b;
  background: #f59e0b1a;
}

.automation-sidebar-icon.green {
  color: #10b981;
  background: #10b9811a;
}

.automation-sidebar-icon.red {
  color: #ef4444;
  background: #ef44441a;
}

.automation-sidebar-icon.purple {
  color: #8b5cf6;
  background: #8b5cf61a;
}

.automation-validation {
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  max-width: 820px;
  margin: 0 auto var(--spacing-sm);
  display: flex;
}

.automation-validation.valid {
  background: var(--success-light);
  color: var(--success-dark);
  border: 1px solid #10b98133;
}

.automation-validation.invalid {
  background: var(--warning-light);
  color: var(--warning-dark);
  border: 1px solid #f59e0b33;
}

.trigger-modal-list {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.trigger-modal-option {
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) ease;
  border: 2px solid #0000;
  display: flex;
}

.trigger-modal-option:hover {
  border-color: var(--border-default);
  background: var(--bg-primary);
}

.trigger-modal-option.active {
  background: #8b5cf60a;
  border-color: #8b5cf6;
}

.trigger-modal-text {
  flex: 1;
}

.trigger-modal-text strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  display: block;
}

.trigger-modal-text span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.automation-topbar {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.automation-topbar-left {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.automation-topbar-actions {
  gap: var(--spacing-sm);
  display: flex;
}

.automation-name {
  font-size: var(--font-size-2xl);
  cursor: pointer;
  color: var(--text-primary);
  transition: color var(--duration-fast) ease;
  margin: 0;
  font-weight: 700;
}

.automation-name:hover {
  color: var(--primary);
}

.automation-name-input {
  font-size: var(--font-size-2xl);
  max-width: 300px;
  font-weight: 700;
}

.automation-saving {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  animation: 1.5s ease-in-out infinite pulse;
}

.new-automation-section {
  max-width: 820px;
  margin: var(--spacing-lg) auto;
  padding: 0 var(--spacing-md);
}

.new-automation-section h2 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs);
  font-weight: 700;
}

.new-automation-section > p {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--spacing-lg);
}

.new-automation-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  display: grid;
}

.new-automation-card {
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-normal) var(--ease-in-out);
  flex-direction: column;
  display: flex;
}

.new-automation-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.new-automation-card:disabled {
  opacity: .6;
  pointer-events: none;
}

.new-automation-card strong {
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.new-automation-card p {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}

.new-automation-card-icon {
  border-radius: var(--radius-md);
  color: #8b5cf6;
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-xs);
  background: #8b5cf61a;
  justify-content: center;
  align-items: center;
  display: flex;
}

.new-automation-card-trigger, .new-automation-card-steps {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-sm);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.automation-site-filter {
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  display: flex;
}

.automation-site-filter-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  display: inline-flex;
}

.automation-site-select {
  max-width: 200px;
  font-size: var(--font-size-sm);
}

.automation-site-selector {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.automation-site-selector select {
  width: 100%;
  max-width: 300px;
}

.automation-site-selector-header {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: flex;
}

.automation-site-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-2xs);
}

.automation-card-site {
  color: var(--primary);
  background: var(--primary-light);
}

.automation-card-global {
  color: var(--text-tertiary);
}

.calendar-loading {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--gray-500);
}

.calendar-header {
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.calendar-header-nav {
  align-items: center;
  gap: var(--spacing-sm);
  display: flex;
}

.calendar-header-title {
  font-size: var(--font-size-lg);
  text-align: center;
  min-width: 180px;
  font-weight: 600;
}

.calendar-header-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.calendar-header-btn:hover {
  background: var(--gray-100);
}

.calendar-filters {
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  flex-wrap: wrap;
  display: flex;
}

.calendar-filter-toggle {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  transition: all .15s;
}

.calendar-filter-toggle--active {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}

.calendar-grid {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  grid-template-columns: repeat(7, 1fr);
  display: grid;
  overflow: hidden;
}

.calendar-weekday-header {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  text-align: center;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-weight: 600;
}

.calendar-day {
  min-height: 100px;
  padding: var(--spacing-xs);
  border: 1px solid var(--gray-100);
  cursor: pointer;
  flex-direction: column;
  gap: 2px;
  transition: background .1s;
  display: flex;
}

.calendar-day:hover {
  background: var(--gray-50);
}

.calendar-day--other {
  opacity: .35;
}

.calendar-day--today .calendar-day-number {
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.calendar-day--selected {
  background: var(--gray-100);
  border-color: var(--primary);
}

.calendar-day-number {
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
  font-weight: 500;
}

.calendar-day-overflow {
  color: var(--gray-500);
  font-size: 10px;
}

.calendar-event-badge {
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  overflow: hidden;
}

.calendar-event-badge--newsletter {
  color: #4f46e5;
  background: #eef2ff;
}

.calendar-event-badge--campaign_edition {
  color: #7c3aed;
  background: #f3e8ff;
}

.calendar-event-badge--automation {
  color: #059669;
  background: #ecfdf5;
}

.calendar-event-badge--campaign_schedule {
  color: var(--primary);
  background: #fef2f2;
}

.calendar-day-detail-header {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.calendar-day-detail-empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--gray-500);
}

.calendar-day-detail-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.calendar-item {
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  display: flex;
}

.calendar-item-time {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  min-width: 50px;
  font-weight: 600;
}

.calendar-item-type-bar {
  border-radius: 2px;
  width: 3px;
  height: 32px;
}

.calendar-item-type-bar--newsletter {
  background: #6366f1;
}

.calendar-item-type-bar--campaign_edition {
  background: #8b5cf6;
}

.calendar-item-type-bar--automation {
  background: #10b981;
}

.calendar-item-type-bar--campaign_schedule {
  background: var(--primary);
}

.calendar-item-detail {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.calendar-item-status {
  font-size: var(--font-size-xs);
  border-radius: 3px;
  width: fit-content;
  padding: 2px 6px;
  font-weight: 500;
  display: inline-block;
}

.calendar-item-status--active {
  color: #059669;
  background: #ecfdf5;
}

.calendar-item-status--scheduled {
  color: #4f46e5;
  background: #eef2ff;
}

.calendar-item-status--sent {
  background: var(--gray-100);
  color: var(--gray-600);
}

.calendar-item-info {
  flex: 1;
  min-width: 0;
}

.calendar-item-title {
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.calendar-item-meta {
  color: var(--gray-500);
  font-size: 11px;
}

.calendar-conflict {
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.calendar-conflict-title {
  margin-bottom: var(--spacing-xs);
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
  display: flex;
}

.calendar-conflict-suggestion {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: var(--white);
  margin: 2px;
  padding: 2px 8px;
  display: inline-block;
}

.calendar-conflict-suggestion:hover {
  background: var(--gray-100);
}

.calendar-quick-schedule {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.calendar-quick-schedule label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.calendar-quick-schedule select, .calendar-quick-schedule input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.chat-layout {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 160px);
  display: grid;
  overflow: hidden;
}

.chat-sidebar {
  border-right: 1px solid var(--border-light);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.chat-sidebar-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.chat-filters {
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  display: flex;
}

.chat-filters .property-select {
  font-size: var(--font-size-xs);
  flex: 1;
  padding: 4px 8px;
}

.chat-main {
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.chat-main-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.chat-main-header strong {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  display: block;
}

.chat-main-header span {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.chat-messages {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.chat-empty {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-tertiary);
  padding: var(--spacing-md);
  text-align: center;
  flex-direction: column;
  flex: 1;
  display: flex;
}

.chat-empty p {
  font-size: var(--font-size-sm);
  margin: 0;
}

.chat-new-conversation {
  max-width: 500px;
  padding: var(--spacing-lg);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin: 0 auto;
}

.chat-new-conversation h2 {
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-md);
  display: flex;
}

.chat-new-actions {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  justify-content: flex-end;
  display: flex;
}

.support-page {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.support-page__header {
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 0;
  display: flex;
}

.support-page__header h1 {
  letter-spacing: -.03em;
  color: #111;
  margin: 0;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.05;
}

.support-page__header p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.support-chat-shell {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.support-chat-shell__header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.support-chat-shell__header h2 {
  letter-spacing: -.03em;
  color: #111;
  margin: 0 0 2px;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.05;
}

.support-chat-shell__header p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.support-chat-shell__cta, .support-chat-sidebar__new {
  color: #fff;
  font-size: var(--font-size-xs);
  cursor: pointer;
  background: #111;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-weight: 700;
  line-height: 1;
  transition: transform .15s, opacity .15s;
  display: inline-flex;
}

.support-chat-shell__cta:hover, .support-chat-sidebar__new:hover {
  opacity: .94;
  transform: translateY(-1px);
}

.support-chat-layout {
  height: min(72vh, 820px);
  box-shadow: none;
  background: linear-gradient(#fffffff5, #fffffffa);
  border: none;
  border-radius: 28px;
  overflow: hidden;
}

.support-chat-layout .chat-sidebar {
  background: linear-gradient(#fbfbfb 0%, #f4f6f8 100%);
}

.support-chat-layout .chat-main {
  background: none;
}

.support-chat-sidebar__title {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.support-chat-sidebar__title small {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}

.support-chat-main-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffffbf;
}

.support-chat-empty span {
  max-width: 30ch;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  line-height: 1.6;
}

.support-chat-empty--main {
  background: none;
}

.support-compose {
  border: 1px solid var(--border-light);
  max-width: 760px;
  box-shadow: none;
  background: linear-gradient(#fff 0%, #fbfbfb 100%);
  border-radius: 28px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 28px);
}

.support-compose__hero {
  margin-bottom: var(--spacing-sm);
}

.support-compose__hero h2 {
  align-items: center;
  gap: var(--spacing-sm);
  letter-spacing: -.03em;
  color: #111;
  margin: 8px 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  display: flex;
}

.support-compose__hero p {
  max-width: 54ch;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.support-compose__eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

.support-compose__actions {
  margin-top: var(--spacing-sm);
}

@media (max-width: 767px) {
  .support-chat-shell__header {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 120px);
  }

  .chat-sidebar {
    max-height: 40vh;
  }

  .support-chat-layout {
    border-radius: 22px;
    height: auto;
    min-height: 70vh;
  }

  .support-compose {
    border-radius: 22px;
  }
}

.queue-page {
  padding: var(--spacing-lg);
}

.queue-page-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.queue-stats {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.queue-stat-card {
  padding: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.queue-stat-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.queue-stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.queue-stat-card--scheduled .queue-stat-number {
  color: var(--primary);
}

.queue-stat-card--sending .queue-stat-number {
  color: var(--info);
}

.queue-stat-card--pending .queue-stat-number {
  color: var(--warning);
}

.queue-stat-card--sent .queue-stat-number {
  color: var(--success);
}

.queue-tabs {
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: var(--spacing-xs);
  display: flex;
}

.queue-tab {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  color: var(--gray-500);
  background: none;
  border: none;
  font-weight: 500;
}

.queue-tab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.queue-tab:hover:not(.active) {
  color: var(--gray-700);
}

.queue-list {
  gap: var(--spacing-sm);
  flex-direction: column;
  display: flex;
}

.queue-item {
  padding: var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.queue-item-info {
  gap: var(--spacing-xs);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.queue-item-title {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--black);
}

.queue-item-subject {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.queue-item-meta {
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  display: flex;
}

.queue-item-meta--failed {
  color: var(--danger);
}

.queue-item-actions {
  gap: var(--spacing-xs);
  margin-left: var(--spacing-md);
  display: flex;
}

.queue-empty {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--gray-400);
  font-size: var(--font-size-md);
}

.queue-btn {
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  font-weight: 500;
  display: flex;
}

.queue-btn--primary {
  background: var(--primary);
  color: var(--white);
}

.queue-btn--warning {
  background: var(--warning);
  color: var(--white);
}

.queue-btn--danger {
  background: var(--danger);
  color: var(--white);
}

.queue-progress-bar {
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  width: 100%;
  height: 6px;
  overflow: hidden;
}

.queue-progress-fill {
  height: 100%;
  width: var(--progress);
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width .3s;
}

.queue-delivery-stats {
  gap: var(--spacing-md);
  margin-left: var(--spacing-md);
  display: flex;
}

.queue-delivery-stat {
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  font-weight: 500;
  display: flex;
}

.queue-delivery-stat--bounced {
  color: var(--danger);
}

.queue-delivery-label {
  color: var(--gray-400);
  font-weight: 400;
}

.queue-item--history {
  flex-wrap: wrap;
}

.queue-item--history .queue-delivery-stats {
  width: 100%;
  margin-left: 0;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-100);
}

.asset-page {
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.asset-page-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.asset-page-header h1 {
  font-size: var(--font-size-xl);
  color: var(--black);
  font-weight: 600;
}

.asset-error {
  color: var(--primary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  background: #dc262614;
}

.asset-filters {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.asset-filters-tabs {
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  display: flex;
}

.asset-grid {
  gap: var(--spacing-md);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asset-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .asset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.asset-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.asset-card:hover {
  box-shadow: none;
}

.asset-card:hover .asset-card-delete {
  opacity: 1;
}

.asset-card-image {
  aspect-ratio: 1;
  background: var(--gray-100);
  justify-content: center;
  align-items: center;
  display: flex;
}

.asset-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.asset-card-placeholder {
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

.asset-card-info {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.asset-card-name {
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  display: block;
  overflow: hidden;
}

.asset-card-meta {
  color: var(--gray-500);
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  display: flex;
}

.asset-card-delete {
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  color: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  background: #0009;
  border: none;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  transition: opacity .2s;
  position: absolute;
}

.asset-empty {
  text-align: center;
  padding: var(--spacing-md) 0;
  color: var(--gray-500);
}

.asset-empty p {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
}

.asset-empty span {
  font-size: var(--font-size-sm);
}

.asset-modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.asset-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
  flex-direction: column;
  width: 90%;
  max-width: 480px;
  display: flex;
}

.asset-modal h2 {
  font-size: var(--font-size-lg);
  margin: 0;
}

.asset-upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  transition: border-color .2s, background .2s;
}

.asset-upload-zone.dragging, .asset-upload-zone:hover {
  border-color: var(--primary);
  background: #dc26260a;
}

.asset-modal-actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  display: flex;
}

.ws-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.ws-header {
  margin-bottom: var(--spacing-md);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  display: flex;
}

.ws-header h1 {
  margin: 0 0 var(--spacing-xs);
  font-size: 28px;
  font-weight: 700;
}

.ws-header p {
  color: var(--text-secondary);
  margin: 0;
}

.ws-grid {
  gap: var(--spacing-sm);
  display: grid;
}

.ws-loading {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-secondary);
  flex-direction: column;
  padding: 80px 20px;
  display: flex;
}

.ws-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.ws-card--verified {
  border-color: #22c55e;
}

.ws-card__header {
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: flex;
}

.ws-card__favicon {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.ws-card__info {
  flex: 1;
  min-width: 0;
}

.ws-card__info h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}

.ws-card__url {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  word-break: break-all;
  text-decoration: none;
}

.ws-card__url:hover {
  color: var(--primary);
}

.ws-badge {
  font-size: var(--font-size-xs);
  border-radius: 20px;
  flex-shrink: 0;
  padding: 4px 12px;
  font-weight: 600;
}

.ws-badge--verified {
  color: #166534;
  background: #dcfce7;
}

.ws-badge--pending {
  color: #92400e;
  background: #fef3c7;
}

.ws-card__desc {
  margin: 0 0 var(--spacing-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.ws-card__footer {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ws-card__date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.ws-card__delete {
  color: var(--danger, #ef4444);
  border: 1px solid var(--danger, #ef4444);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  background: none;
  padding: 6px 12px;
  transition: all .2s;
}

.ws-card__delete:hover {
  background: var(--danger, #ef4444);
  color: var(--white);
}

.ws-verify {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.ws-verify__instruction {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.ws-verify__instruction code {
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-family: monospace;
}

.ws-verify__code {
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
}

.ws-verify__code code {
  padding: var(--spacing-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  flex: 1;
  font-family: monospace;
  overflow-x: auto;
}

.ws-verify__copy {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
}

.ws-verify__copy:hover {
  background: var(--bg-secondary);
}

.ws-verify__btn {
  background: var(--primary);
  width: 100%;
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  padding: 10px;
  font-weight: 600;
}

.ws-verify__btn:hover {
  background: var(--primary-hover);
}

.ws-verify__btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.ws-modal-form {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.ws-modal-form__group {
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.ws-modal-form__group label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.ws-modal-form__group input, .ws-modal-form__group textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.ws-modal-form__group input:focus, .ws-modal-form__group textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.ws-modal-form__error {
  padding: var(--spacing-sm);
  color: #dc2626;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: #fef2f2;
}

.ws-modal-form__actions {
  justify-content: flex-end;
  gap: var(--spacing-sm);
  display: flex;
}

.ws-btn {
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
}

.ws-btn--primary {
  background: var(--primary);
  color: var(--white);
}

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

.ws-btn--primary:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.ws-btn--secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.ws-btn--secondary:hover {
  background: var(--bg-tertiary);
}

@media (max-width: 767px) {
  .ws-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-card__header {
    flex-wrap: wrap;
  }
}

.biz-hero {
  background: var(--gray-900);
  flex-direction: column;
  justify-content: center;
  min-height: 640px;
  padding: 120px 0 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.biz-hero-bg {
  opacity: .2;
  pointer-events: none;
  background: none;
  position: absolute;
  inset: 0;
}

.biz-hero-split {
  z-index: 2;
  gap: var(--spacing-2xl);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
  position: relative;
}

.biz-hero-content {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.biz-hero-badge {
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--primary-light);
  border-radius: var(--public-radius-full);
  color: var(--white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff1a;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 16px;
  font-weight: 600;
  display: inline-flex;
}

.biz-hero-title {
  font-size: var(--font-size-6xl);
  color: var(--white);
  letter-spacing: -.5px;
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}

.biz-hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--gray-300);
  margin: 0;
  line-height: 1.5;
}

.biz-hero-actions {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  display: flex;
}

.biz-hero-visual {
  justify-content: center;
  align-items: center;
  display: flex;
}

.biz-hero-stats {
  z-index: 2;
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-md) 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0003;
  border-top: 1px solid #ffffff14;
  position: relative;
}

.biz-hero-stats-inner {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xl);
  display: flex;
}

.biz-hero-stat {
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: column;
  display: flex;
}

.biz-hero-stat-value {
  font-size: var(--font-size-3xl);
  color: var(--white);
  font-weight: 700;
}

.biz-hero-stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.biz-preview-card {
  background: var(--public-glass-bg);
  width: 100%;
  max-width: 420px;
  -webkit-backdrop-filter: var(--public-glass-blur);
  border-radius: var(--public-radius-lg);
  background: #ffffff0f;
  border: 1px solid #ffffff1a;
  overflow: hidden;
}

.biz-preview-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #0003;
  border-bottom: 1px solid #ffffff14;
  display: flex;
}

.biz-preview-dots {
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  display: flex;
}

.biz-preview-dots span {
  border-radius: var(--public-radius-full);
  background: #fff3;
  width: 8px;
  height: 8px;
}

.biz-preview-dots span:first-child {
  background: #ef444499;
}

.biz-preview-dots span:nth-child(2) {
  background: #eab30899;
}

.biz-preview-dots span:last-child {
  background: #22c55e99;
}

.biz-preview-title {
  font-size: var(--font-size-xs);
  color: #fff6;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.biz-preview-body {
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  flex-direction: column;
  display: flex;
}

.biz-preview-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--public-radius-md);
  transition: background var(--duration-fast) ease;
  background: #ffffff0d;
  border: 1px solid #ffffff0f;
  display: flex;
}

.biz-preview-item:hover {
  background: #ffffff14;
}

.biz-preview-item svg {
  color: var(--hero-accent, var(--primary));
  flex-shrink: 0;
}

.biz-preview-item span {
  font-size: var(--font-size-sm);
  color: #ffffffd9;
}

.biz-features-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .biz-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .biz-features-grid {
    grid-template-columns: 1fr;
  }
}

.biz-features-grid {
  gap: var(--spacing-md);
}

.biz-feature-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.biz-feature-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.biz-feature-card {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-top: 3px solid var(--hero-accent, var(--primary));
  text-align: left;
  flex-direction: column;
  display: flex;
}

.biz-feature-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.biz-feature-text {
  gap: var(--spacing-sm);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.biz-feature-title {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
}

.biz-feature-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0;
  line-height: 1.6;
}

.biz-feature-detail {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--gray-100);
  margin: 0;
  line-height: 1.6;
}

.biz-showcase-list {
  gap: var(--spacing-2xl);
  flex-direction: column;
  display: flex;
}

.biz-showcase-row {
  gap: var(--spacing-2xl);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
}

.biz-showcase-row--reversed {
  direction: rtl;
}

.biz-showcase-row--reversed > * {
  direction: ltr;
}

.biz-showcase-visual {
  justify-content: center;
  align-items: center;
  display: flex;
}

.biz-showcase-card-preview {
  background: var(--gray-900);
  border-radius: var(--public-radius-lg);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: 0 16px 48px #0000001f;
}

.biz-showcase-card-header {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--white);
  background: #ffffff0f;
  border-bottom: 1px solid #ffffff14;
  display: flex;
}

.biz-showcase-card-header svg {
  color: var(--hero-accent, var(--primary));
  flex-shrink: 0;
}

.biz-showcase-card-header span {
  font-size: var(--font-size-sm);
  letter-spacing: .3px;
  font-weight: 600;
}

.biz-showcase-card-items {
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  flex-direction: column;
  display: flex;
}

.biz-showcase-card-item {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--public-radius-sm);
  background: #ffffff0a;
  border: 1px solid #ffffff0f;
  display: flex;
}

.biz-showcase-card-item svg {
  color: var(--hero-accent, var(--primary));
  flex-shrink: 0;
}

.biz-showcase-card-item span {
  font-size: var(--font-size-sm);
  color: #fffc;
}

.biz-showcase-text {
  gap: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.biz-showcase-title {
  font-size: var(--font-size-3xl);
  color: var(--gray-900);
  letter-spacing: -.3px;
  margin: 0;
  font-weight: 700;
}

.biz-showcase-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

.biz-usecases-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  display: grid;
}

@media (max-width: 767px) {
  .biz-usecases-grid {
    grid-template-columns: 1fr;
  }
}

.biz-usecases-grid {
  gap: var(--spacing-md);
}

.biz-usecase-card {
  background: var(--public-card-bg);
  border: 1px solid var(--public-card-border);
  border-radius: var(--public-radius-lg);
  transition: all var(--duration-fast) var(--ease-out-quart);
  padding: 12px;
}

.biz-usecase-card:hover {
  box-shadow: var(--public-card-shadow-hover);
  transform: translateY(-4px);
}

.biz-usecase-card {
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  flex-direction: column;
  display: flex;
}

.biz-usecase-icon {
  background: var(--primary-light);
  border-radius: var(--public-radius-lg);
  width: 44px;
  height: 44px;
  color: var(--primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.biz-usecase-title {
  font-size: var(--font-size-lg);
  color: var(--gray-900);
  margin: 0;
  font-weight: 600;
}

.biz-usecase-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

.biz-testimonial-section {
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
}

.biz-testimonial-pattern {
  pointer-events: none;
  background-image: radial-gradient(circle at 20%, #f6821f0a 0%, #0000 50%), radial-gradient(circle at 80%, #6366f10a 0%, #0000 50%);
  position: absolute;
  inset: 0;
}

.biz-testimonial {
  text-align: center;
  max-width: 760px;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--public-radius-xl);
  margin: 0 auto;
  position: relative;
  box-shadow: 0 8px 32px #0000000f;
}

.biz-testimonial-quote-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-lg);
  background: var(--primary-light);
  border-radius: var(--public-radius-full);
  color: var(--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}

.biz-testimonial-stars {
  margin-bottom: var(--spacing-sm);
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: flex;
}

.biz-testimonial-stars svg {
  color: var(--primary);
  fill: var(--primary);
}

.biz-testimonial-quote {
  font-size: var(--font-size-xl);
  color: var(--gray-800);
  margin: 0 0 var(--spacing-xl) 0;
  font-style: italic;
  line-height: 1.5;
}

.biz-testimonial-author {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  display: flex;
}

.biz-testimonial-avatar {
  background: var(--gray-900);
  width: 48px;
  height: 48px;
  color: var(--white);
  border-radius: var(--public-radius-full);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
}

.biz-testimonial-info {
  text-align: left;
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.biz-testimonial-info strong {
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.biz-testimonial-info span {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.biz-testimonial-info .biz-testimonial-company {
  color: var(--primary);
  font-weight: 500;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .biz-hero {
    min-height: auto;
    padding: 100px 0 0;
  }

  .biz-hero-split {
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
  }

  .biz-hero-visual {
    order: -1;
  }

  .biz-hero-title {
    font-size: var(--font-size-5xl);
  }

  .biz-hero-stats-inner {
    gap: var(--spacing-md);
  }

  .biz-showcase-row, .biz-showcase-row--reversed {
    direction: ltr;
    grid-template-columns: 1fr;
  }

  .biz-showcase-row > *, .biz-showcase-row--reversed > * {
    direction: ltr;
  }

  .biz-showcase-visual {
    order: -1;
  }
}

@media (max-width: 767px) {
  .biz-hero {
    padding: 80px 0 0;
  }

  .biz-hero-title {
    font-size: var(--font-size-4xl);
  }

  .biz-hero-subtitle {
    font-size: var(--font-size-base);
  }

  .biz-hero-actions {
    gap: var(--spacing-sm);
    flex-direction: column;
  }

  .biz-hero-actions a {
    width: 100%;
  }

  .biz-hero-stats-inner {
    gap: var(--spacing-md);
    flex-direction: column;
  }

  .biz-testimonial {
    padding: var(--spacing-lg);
  }

  .biz-testimonial-quote {
    font-size: var(--font-size-lg);
  }

  .biz-showcase-list {
    gap: var(--spacing-2xl);
  }

  .biz-showcase-title {
    font-size: var(--font-size-2xl);
  }
}

/*# sourceMappingURL=newsletter-app_src_app_5154bb4d._.css.map*/