@charset "UTF-8";/* ============================================================
 * MAIN APP BASE STYLES
 * ============================================================
 * This file contains ONLY basic HTML/body styles.
 * All CSS variables come from packages/ui/dist/css/main.css
 * DO NOT define custom CSS variables here!
 */

:root {
  font-family: var(--font-family-primary);
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * GLOBAL SCROLLBAR STYLES
 * ============================================================
 * Applies to all scrollbars in the application
 */

/* Webkit browsers (Chrome, Safari, Edge) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-200, #e5e7eb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--neutral-200, #e5e7eb);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300, #d1d5db);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Light mode - neutral background */
html:not([data-theme="dark"]) {
  color: var(--neutral-900);
  background-color: var(--neutral-50);
}

/* Dark mode - primary background for blue/purple tint */
html[data-theme="dark"] {
  color: var(--neutral-900);
  background-color: var(--primary-50);
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  background-color: inherit;
  color: inherit;
}

#root {
  width: 100%;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}
/**
 * View Transitions API Customization
 *
 * This file provides custom animations for route transitions using the
 * browser-native View Transitions API.
 *
 * Browser Support:
 * - Chrome 111+, Edge 111+, Opera 97+: ✅ Full support
 * - Safari, Firefox: ⚠️ Graceful fallback (instant navigation)
 *
 * Customization Guide:
 * - Uncomment sections below to activate custom transitions
 * - Default (no CSS): Simple crossfade (300ms)
 * - All animations use CSS, zero JavaScript overhead
 *
 * Learn more: https://developer.chrome.com/docs/web-platform/view-transitions
 */

/* ============================================
   DEFAULT BEHAVIOR (Uncomment to customize)
   ============================================ */

/*
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
}
*/


/* ============================================
   OPTION 1: Smooth Fade (Slower Crossfade)
   ============================================ */

/*
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
*/


/* ============================================
   OPTION 2: Fade + Subtle Scale
   Professional feel, not jarring
   ============================================ */

/*
::view-transition-old(root) {
  animation: fade-scale-out 350ms cubic-bezier(0.4, 0, 1, 1);
}

::view-transition-new(root) {
  animation: fade-scale-in 350ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes fade-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
*/


/* ============================================
   OPTION 3: Slide Transitions
   Old page slides out, new page slides in
   ============================================ */

/*
::view-transition-old(root) {
  animation: slide-out 400ms cubic-bezier(0.4, 0, 1, 1);
}

::view-transition-new(root) {
  animation: slide-in 400ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
*/


/* ============================================
   OPTION 4: Vertical Slide
   Good for hierarchical navigation
   ============================================ */

/*
::view-transition-old(root) {
  animation: slide-up-out 350ms ease-out;
}

::view-transition-new(root) {
  animation: slide-up-in 350ms ease-out;
}

@keyframes slide-up-out {
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes slide-up-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}
*/


/* ============================================
   OPTION 5: Fast & Snappy
   Quick transitions for responsive feel
   ============================================ */

/*
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
*/


/* ============================================
   ADVANCED: Directional Slides
   Different animations based on navigation direction
   (Requires JavaScript configuration in providers.tsx)
   ============================================ */

/*
::view-transition-old(slide-left),
::view-transition-new(slide-left) {
  animation-duration: 300ms;
}

::view-transition-old(slide-left) {
  animation-name: slide-left-out;
}

::view-transition-new(slide-left) {
  animation-name: slide-left-in;
}

::view-transition-old(slide-right),
::view-transition-new(slide-right) {
  animation-duration: 300ms;
}

::view-transition-old(slide-right) {
  animation-name: slide-right-out;
}

::view-transition-new(slide-right) {
  animation-name: slide-right-in;
}

@keyframes slide-left-out {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-left-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes slide-right-out {
  to {
    transform: translateX(100%);
  }
}

@keyframes slide-right-in {
  from {
    transform: translateX(-100%);
  }
}
*/


/* ============================================
   PERFORMANCE OPTIMIZATION
   Reduce motion for accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}


/* ============================================
   DEBUG MODE
   Uncomment to visualize transition boundaries
   ============================================ */

/*
::view-transition-old(root) {
  outline: 2px solid red;
}

::view-transition-new(root) {
  outline: 2px solid green;
}
*/
.google-login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.google-login-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 16px 32px;

  /* White background with subtle border for visibility */
  background: var(--pure-white);
  border: 1.5px solid var(--neutral-300);
  border-radius: 14px;

  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900);
  text-decoration: none;

  /* Enhanced shadow for better visibility */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  overflow: hidden;
}

/* No hover animation - keep it simple */
.google-login-button:hover:not(:disabled) {
  opacity: 0.95;
}

/* Active state - minimal feedback */
.google-login-button:active:not(:disabled) {
  opacity: 0.9;
}

/* Disabled state */
.google-login-button:disabled {
  background: var(--neutral-100);
  color: var(--neutral-500);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.5;
}

.google-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.button-text {
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;

  /* Light mode - clean info background */
  background: var(--info-50);
  border: 1px solid var(--info-200);
  border-radius: 10px;
  color: var(--info-700);
  font-size: 14px;
  font-weight: 500;

  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;

  /* Light mode - clean error background */
  background: var(--negative-50);
  border: 1px solid var(--negative-200);
  border-radius: 10px;
  color: var(--negative-700);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  word-wrap: break-word;

  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.error-message p {
  margin: 0;
  line-height: 1.5;
}

.retry-button {
  padding: 8px 16px;

  /* Simple solid background */
  background: var(--negative-600);
  border: none;
  border-radius: 8px;
  color: var(--pure-white);

  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family-primary);

  transition: all 0.2s ease;

  box-shadow: 0 2px 4px 0 rgba(242, 65, 90, 0.2);
}

.retry-button:hover {
  background: var(--negative-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px 0 rgba(242, 65, 90, 0.3);
}

.retry-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px 0 rgba(242, 65, 90, 0.2);
}

/* ============================================ */
/* DARK MODE */
/* ============================================ */

@media (prefers-color-scheme: dark) {
  .google-login-button {
    background: rgba(252, 250, 250, 0.08);
    border: 1.5px solid rgba(252, 250, 250, 0.2);
    color: var(--pure-white);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  }

  .google-login-button:hover:not(:disabled) {
    opacity: 0.95;
    border-color: rgba(252, 250, 250, 0.3);
  }

  .google-login-button:active:not(:disabled) {
    opacity: 0.9;
  }

  .google-login-button:disabled {
    background: rgba(252, 250, 250, 0.03);
    border-color: rgba(252, 250, 250, 0.1);
    color: var(--neutral-600);
  }

  .loading-indicator {
    background: rgba(107, 102, 255, 0.1);
    border-color: rgba(107, 102, 255, 0.3);
    color: var(--info-300);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  }

  .error-message {
    background: rgba(242, 65, 90, 0.1);
    border-color: rgba(242, 65, 90, 0.3);
    color: var(--negative-300);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  }

  .retry-button {
    background: var(--negative-500);
  }

  .retry-button:hover {
    background: var(--negative-600);
  }
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */

@media (max-width: 767px) {
  .google-login-button {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 15px;
  }

  .loading-indicator,
  .error-message {
    padding: 10px 16px;
    font-size: 13px;
  }

  .retry-button {
    padding: 8px 16px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .google-login-button {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 10px;
  }

  .google-logo {
    width: 18px;
    height: 18px;
  }

  .loading-indicator,
  .error-message {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
  }
}

/* ============================================ */
/* ACCESSIBILITY - REDUCE MOTION */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {
  .retry-button {
    transition: none;
  }

  .retry-button:hover {
    transform: none;
  }
} /**
 * Language Switcher Compact Styles
 *
 * Minimal, elegant flag-based language switcher
 */
._languageSwitcher_143yz_6 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

._flagButton_143yz_16 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
._flagButton_143yz_16:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}
._flagButton_143yz_16:active:not(:disabled) {
  transform: scale(0.95);
}
._flagButton_143yz_16._active_143yz_38 {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
._flagButton_143yz_16:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._flagButton_143yz_16:focus-visible {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
}

._flag_143yz_16 {
  font-size: 24px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

[data-theme=dark] ._languageSwitcher_143yz_6 {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme=dark] ._flagButton_143yz_16 {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] ._flagButton_143yz_16:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  ._languageSwitcher_143yz_6 {
    gap: 8px;
    padding: 2px;
  }
  ._flagButton_143yz_16 {
    width: 36px;
    height: 36px;
  }
  ._flag_143yz_16 {
    font-size: 20px;
  }
}._loginPage_dmrct_1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  font-family: var(--font-family-primary);
  background: radial-gradient(circle at 10% 20%, rgba(9, 0, 255, 0.008) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(255, 191, 15, 0.008) 0%, transparent 50%), #FFFFFF;
}
._loginPage_dmrct_1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(107, 102, 255, 0.006) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(255, 203, 61, 0.006) 0%, transparent 40%);
  animation: _slowFloat_dmrct_1 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

._languageSwitcherContainer_dmrct_22 {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 10;
}

._loginSide_dmrct_29 {
  position: relative;
  z-index: 1;
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
}

._loginContent_dmrct_39 {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

._loginLogo_dmrct_48 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--spacing-md);
  width: 100%;
}
._loginLogo_dmrct_48 img, ._loginLogo_dmrct_48 svg {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  filter: none;
  transition: opacity 0.3s ease;
}
._loginLogo_dmrct_48 img:hover, ._loginLogo_dmrct_48 svg:hover {
  opacity: 0.9;
}

._loginButton_dmrct_67 {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

._loginFooter_dmrct_72 {
  text-align: center;
  padding-top: var(--spacing-sm);
}
._loginFooter_dmrct_72 ._terms_dmrct_76 {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.6;
}
._loginFooter_dmrct_72 ._terms_dmrct_76 a {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
._loginFooter_dmrct_72 ._terms_dmrct_76 a:hover {
  color: var(--primary-700);
}

._marketingSide_dmrct_92 {
  position: relative;
  z-index: 1;
  flex: 0 0 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl);
  background: radial-gradient(circle at 80% 20%, rgba(107, 102, 255, 0.006) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(255, 191, 15, 0.006) 0%, transparent 60%);
}

._marketingContent_dmrct_103 {
  max-width: 540px;
}

._marketingTitle_dmrct_107 {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--neutral-900);
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--neutral-900) 0%, var(--primary-800) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

._marketingSubtitle_dmrct_120 {
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral-700);
  margin: 0 0 var(--spacing-3xl) 0;
}

._marketingFeatures_dmrct_128 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

._feature_dmrct_134 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(248, 249, 250, 0.6);
  border-radius: 12px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
._feature_dmrct_134:hover {
  background: rgb(255, 255, 255);
  transform: translateX(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

._featureIcon_dmrct_150 {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--secondary-100) 100%);
  border-radius: 10px;
}

._featureText_dmrct_162 {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--neutral-800);
}

@keyframes _slowFloat_dmrct_1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(10px, -10px) rotate(1deg);
  }
  66% {
    transform: translate(-8px, 8px) rotate(-1deg);
  }
}
@media (max-width: 1023px) {
  ._languageSwitcherContainer_dmrct_22 {
    top: 24px;
    right: 24px;
  }
  ._loginPage_dmrct_1 {
    flex-direction: column;
  }
  ._loginSide_dmrct_29 {
    flex: 1 0 auto;
    min-height: 60vh;
    padding: var(--spacing-xl);
  }
  ._loginContent_dmrct_39 {
    max-width: 380px;
  }
  ._loginLogo_dmrct_48 img, ._loginLogo_dmrct_48 svg {
    max-width: 200px;
  }
  ._marketingSide_dmrct_92 {
    flex: 1 0 auto;
    padding: var(--spacing-2xl);
    background: radial-gradient(circle at 50% 50%, rgba(107, 102, 255, 0.006) 0%, transparent 60%);
  }
  ._marketingTitle_dmrct_107 {
    font-size: var(--font-size-4xl);
  }
  ._marketingSubtitle_dmrct_120 {
    font-size: var(--font-size-lg);
  }
}
@media (max-width: 767px) {
  ._languageSwitcherContainer_dmrct_22 {
    top: 16px;
    right: 16px;
  }
  ._loginPage_dmrct_1::before {
    animation: none;
  }
  ._loginSide_dmrct_29 {
    min-height: 50vh;
    padding: var(--spacing-lg);
  }
  ._loginContent_dmrct_39 {
    gap: var(--spacing-sm);
  }
  ._loginLogo_dmrct_48 {
    margin-bottom: var(--spacing-sm);
  }
  ._loginLogo_dmrct_48 img, ._loginLogo_dmrct_48 svg {
    max-width: 160px;
  }
  ._loginButton_dmrct_67 {
    margin-bottom: var(--spacing-sm);
  }
  ._loginFooter_dmrct_72 {
    padding-top: var(--spacing-xs);
  }
  ._loginFooter_dmrct_72 ._terms_dmrct_76 {
    font-size: 11px;
  }
  ._marketingSide_dmrct_92 {
    padding: var(--spacing-xl);
  }
  ._marketingTitle_dmrct_107 {
    font-size: var(--font-size-3xl);
  }
  ._marketingSubtitle_dmrct_120 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-2xl);
  }
  ._feature_dmrct_134 {
    padding: var(--spacing-sm);
  }
  ._feature_dmrct_134:hover {
    transform: none;
  }
  ._featureIcon_dmrct_150 {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
  }
  ._featureText_dmrct_162 {
    font-size: var(--font-size-sm);
  }
}
@media (max-width: 480px) {
  ._loginLogo_dmrct_48 img, ._loginLogo_dmrct_48 svg {
    max-width: 140px;
  }
  ._marketingTitle_dmrct_107 {
    font-size: var(--font-size-2xl);
  }
  ._marketingSubtitle_dmrct_120 {
    font-size: var(--font-size-sm);
  }
  ._marketingFeatures_dmrct_128 {
    gap: var(--spacing-md);
  }
}
@media (prefers-color-scheme: dark) {
  ._loginPage_dmrct_1 {
    background: radial-gradient(circle at 10% 20%, rgba(107, 102, 255, 0.12) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(255, 203, 61, 0.08) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(51, 247, 255, 0.06) 0%, transparent 50%), var(--neutral-950);
  }
  ._loginPage_dmrct_1::before {
    background: radial-gradient(circle at 30% 40%, rgba(107, 102, 255, 0.06) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(255, 203, 61, 0.04) 0%, transparent 40%);
  }
  ._loginLogo_dmrct_48 img, ._loginLogo_dmrct_48 svg {
    filter: grayscale(1) brightness(99);
  }
  ._loginLogo_dmrct_48:hover img, ._loginLogo_dmrct_48:hover svg {
    opacity: 0.9;
  }
  ._loginFooter_dmrct_72 ._terms_dmrct_76 {
    color: var(--neutral-400);
  }
  ._loginFooter_dmrct_72 ._terms_dmrct_76 a {
    color: var(--primary-400);
  }
  ._loginFooter_dmrct_72 ._terms_dmrct_76 a:hover {
    color: var(--primary-300);
  }
  ._marketingSide_dmrct_92 {
    background: radial-gradient(circle at 80% 20%, rgba(107, 102, 255, 0.08) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(255, 191, 15, 0.06) 0%, transparent 60%);
  }
  ._marketingTitle_dmrct_107 {
    background: linear-gradient(135deg, var(--pure-white) 0%, var(--primary-300) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  ._marketingSubtitle_dmrct_120 {
    color: var(--neutral-300);
  }
  ._feature_dmrct_134 {
    background: rgba(0, 0, 0, 0.2);
  }
  ._feature_dmrct_134:hover {
    background: rgba(0, 0, 0, 0.3);
  }
  ._featureIcon_dmrct_150 {
    background: linear-gradient(135deg, rgba(107, 102, 255, 0.2) 0%, rgba(51, 247, 255, 0.2) 100%);
  }
  ._featureText_dmrct_162 {
    color: var(--neutral-200);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._loginPage_dmrct_1::before {
    animation: none;
  }
  ._feature_dmrct_134 {
    transition: none;
  }
  ._feature_dmrct_134:hover {
    transform: none;
  }
}/**
 * Dashboard Page Styles
 * 
 * Styles for the quotes dashboard page layout and components
 */
._dashboardPage_1wv8t_6 {
  padding: 0;
  max-width: 100%;
  min-height: 100vh;
  /* Background inherits from root */
  font-family: var(--font-family-primary);
}

._dashboardHeader_1wv8t_14 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
}
._dashboardHeader_1wv8t_14 ._headerContent_1wv8t_23 {
  flex: 1;
}
._dashboardHeader_1wv8t_14 ._headerContent_1wv8t_23 h1 {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 4px 0;
  font-family: var(--font-family-primary);
}
._dashboardHeader_1wv8t_14 h1 {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 4px 0;
  font-family: var(--font-family-primary);
}

._dashboardSubtitle_1wv8t_41 {
  font-size: var(--font-size-base);
  color: var(--neutral-600);
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 400;
}

._titleWithTrigger_1wv8t_49 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._createButtons_1wv8t_55 {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 4px;
}
@media (max-width: 768px) {
  ._createButtons_1wv8t_55 {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
    padding-top: 0;
  }
  ._createButtons_1wv8t_55 button {
    width: 100%;
    justify-content: center;
  }
}

._dashboardContent_1wv8t_75 {
  background: var(--pure-white);
  border-radius: var(--spacing-xs);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._quotesDashboardTable_1wv8t_82 {
  width: 100%;
  min-height: 400px;
}

._mockDataWrapper_1wv8t_87 {
  position: relative;
}

._mockDataBanner_1wv8t_91 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--warning-100, #fef3cd);
  color: var(--warning-800, #856404);
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 8px;
  margin: var(--spacing-md) var(--spacing-lg);
  border: 2px dashed var(--warning-300, #ffc107);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

._mockDataIcon_1wv8t_107 {
  font-size: 1.25rem;
}

._mockDataGrid_1wv8t_111 {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  ._dashboardPage_1wv8t_6 {
    padding: var(--spacing-md);
  }
  ._dashboardHeader_1wv8t_14 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  ._dashboardHeader_1wv8t_14 ._headerContent_1wv8t_23 {
    text-align: center;
  }
  ._dashboardHeader_1wv8t_14 ._headerContent_1wv8t_23 h1 {
    font-size: var(--font-size-3xl);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  ._dashboardHeader_1wv8t_14 h1 {
    font-size: var(--font-size-3xl);
    text-align: center;
  }
  ._dashboardSubtitle_1wv8t_41 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  ._createButtons_1wv8t_55 {
    justify-content: center;
  }
}._sectionHeader_vmupr_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 0 0.4375rem;
  border-bottom: 1px solid var(--neutral-100, #eef0f4);
  margin-bottom: 0.5rem;
}

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

._eyebrow_vmupr_17 {
  margin: 0 0 0.0625rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--neutral-500, #6b7088);
  text-transform: uppercase;
  line-height: 1;
}

._subtitle_vmupr_27 {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--neutral-700, #2d3142);
  line-height: 1.2;
}

@media (max-width: 640px) {
  ._sectionHeader_vmupr_1 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}._tablist_17lmr_1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  background: var(--neutral-50, #f5f6fa);
  border: 1px solid var(--neutral-100, #eef0f4);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 0.75rem;
}

._tab_17lmr_1 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-600, #4a4f63);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
._tab_17lmr_1:hover:not(:disabled):not(._active_17lmr_28) {
  color: var(--neutral-900, #1a1d2b);
}
._tab_17lmr_1:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 2px;
}
._tab_17lmr_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._active_17lmr_28 {
  background: #ffffff;
  color: var(--neutral-900, #1a1d2b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 1px 1px rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px) {
  ._tab_17lmr_1 {
    min-height: 44px;
  }
}._chip_ndaad_1 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.625rem;
  background: #ffffff;
  border: 1px solid var(--neutral-200, #d8dbe5);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-800, #2d3142);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
._chip_ndaad_1:hover:not(:disabled):not(._selected_ndaad_16) {
  border-color: var(--neutral-400, #9ca3af);
}
._chip_ndaad_1:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 2px;
}
._chip_ndaad_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._selected_ndaad_16 {
  background: var(--info-50, #eef2ff);
  border-color: var(--info-500, #6366f1);
  color: var(--info-700, #3730a3);
}._collapsible_105kw_1 {
  border: 1px solid var(--neutral-100, #eef0f4);
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 0.5rem;
}

._header_105kw_8 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
._header_105kw_8:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 2px;
  border-radius: 8px;
}

._titleRow_105kw_27 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

._title_105kw_27 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._summary_105kw_40 {
  font-size: 0.75rem;
  color: var(--neutral-500, #6b7088);
}

._toggle_105kw_45 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--info-600, #4f46e5);
}

._chevron_105kw_54,
._chevronOpen_105kw_55 {
  transition: transform 200ms ease;
}

._chevronOpen_105kw_55 {
  transform: rotate(180deg);
}

._content_105kw_63 {
  overflow: hidden;
  max-height: 0;
  transition: max-height 200ms ease;
}

._contentOpen_105kw_69 {
  max-height: 1200px;
}

._inner_105kw_73 {
  padding: 0 0.75rem 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  ._chevron_105kw_54,
  ._chevronOpen_105kw_55,
  ._content_105kw_63 {
    transition: none;
  }
}._field_hyx6o_1 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

._label_hyx6o_8 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}._form_1g94b_1 {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

._row_1g94b_7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  ._row_1g94b_7 {
    grid-template-columns: 1fr;
  }
}
._deliverables_1g94b_18 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._deliverablesLabel_1g94b_24 {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._hint_1g94b_33 {
  font-weight: 400;
  color: var(--neutral-500, #6b7088);
  font-size: 0.75rem;
}

._chips_1g94b_39 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

._customInput_1g94b_46 {
  appearance: none;
  border: 1px dashed var(--neutral-300, #cbd0dc);
  background: transparent;
  border-radius: 999px;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-700, #2d3142);
  outline: none;
  min-width: 130px;
}
._customInput_1g94b_46::placeholder {
  color: var(--neutral-500, #6b7088);
}
._customInput_1g94b_46:focus {
  border-color: var(--info-500, #6366f1);
}
._customInput_1g94b_46:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._advancedGrid_1g94b_69 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  ._advancedGrid_1g94b_69 {
    grid-template-columns: 1fr;
  }
}
._segmented_1g94b_81 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

._segmentedLabel_1g94b_88 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._segmentedTrack_1g94b_94 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1875rem;
  background: var(--neutral-50, #f5f6fa);
  border: 1px solid var(--neutral-100, #eef0f4);
  border-radius: 6px;
  padding: 3px;
}

._segment_1g94b_81 {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-600, #4a4f63);
  cursor: pointer;
}
._segment_1g94b_81:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 1px;
}
._segment_1g94b_81:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._segmentActive_1g94b_124 {
  background: #ffffff;
  color: var(--neutral-900, #1a1d2b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}._field_wxt4z_1 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

._label_wxt4z_8 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neutral-700, #2d3142);
}

._required_wxt4z_14 {
  color: var(--negative-600, #b91c1c);
  margin-left: 0.125rem;
}

._trigger_wxt4z_19 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 40px;
  padding: 0 0.625rem;
  background: #ffffff;
  border: 1px solid var(--neutral-200, #d8dbe5);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--neutral-900, #1a1d2b);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
._trigger_wxt4z_19:hover:not(:disabled) {
  border-color: var(--neutral-300, #cbd0dc);
}
._trigger_wxt4z_19:focus-visible {
  outline: none;
  border-color: var(--primary-400, #818cf8);
  box-shadow: 0 0 0 2px var(--primary-100, #e0e7ff);
}
._trigger_wxt4z_19:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--neutral-50, #f5f6fa);
}

._errorState_wxt4z_50 {
  border-color: var(--negative-500, #ef4444);
  background-color: var(--negative-50, #fef2f2);
}

._icon_wxt4z_55 {
  flex-shrink: 0;
  color: var(--neutral-500, #6b7088);
}

._value_wxt4z_60 {
  flex: 1;
}

._placeholder_wxt4z_64 {
  flex: 1;
  color: var(--neutral-400, #9ca3af);
}

._popover_wxt4z_69 {
  background: #ffffff;
  border: 1px solid var(--neutral-200, #d8dbe5);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
  padding: 0.5rem;
  z-index: 1100;
}

._message_wxt4z_78 {
  font-size: 0.6875rem;
  color: var(--neutral-500, #6b7088);
  margin: 0;
}

._errorMessage_wxt4z_84 {
  color: var(--negative-600, #b91c1c);
  font-weight: 500;
}._table_1l93b_1 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._header_1l93b_7,
._row_1l93b_8 {
  display: grid;
  grid-template-columns: 1fr 72px 92px 28px;
  gap: 0.375rem;
  align-items: center;
}

._header_1l93b_7 {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--neutral-500, #6b7088);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.25rem;
}

._colDesc_1l93b_24, ._colQty_1l93b_24, ._colPrice_1l93b_24, ._colActions_1l93b_24 {
  min-width: 0;
}

._removeBtn_1l93b_28 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--neutral-500, #6b7088);
  cursor: pointer;
}
._removeBtn_1l93b_28:hover:not(:disabled) {
  color: var(--danger-600, #b91c1c);
  background: var(--danger-50, #fef2f2);
}
._removeBtn_1l93b_28:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 1px;
}
._removeBtn_1l93b_28:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._footer_1l93b_53 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.125rem;
}

._total_1l93b_61 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

._totalLabel_1l93b_68 {
  color: var(--neutral-600, #4a4f63);
}

._totalValue_1l93b_72 {
  font-weight: 700;
  color: var(--neutral-900, #1a1d2b);
}

@media (max-width: 640px) {
  ._header_1l93b_7,
  ._row_1l93b_8 {
    grid-template-columns: 1fr 60px 84px 28px;
  }
}._form_xecw9_1 {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

._row_xecw9_7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  ._row_xecw9_7 {
    grid-template-columns: 1fr;
  }
}
._lineItemsWrap_xecw9_18 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._label_xecw9_24 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._advancedGrid_xecw9_30 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  ._advancedGrid_xecw9_30 {
    grid-template-columns: 1fr;
  }
}
._segmented_xecw9_42 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._segmentedLabel_xecw9_48 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._segmentedTrack_xecw9_54 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1875rem;
  background: var(--neutral-50, #f5f6fa);
  border: 1px solid var(--neutral-100, #eef0f4);
  border-radius: 6px;
  padding: 3px;
}

._segment_xecw9_42 {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-600, #4a4f63);
  cursor: pointer;
}
._segment_xecw9_42:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 1px;
}
._segment_xecw9_42:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._segmentActive_xecw9_84 {
  background: #ffffff;
  color: var(--neutral-900, #1a1d2b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}._form_1c3pa_1 {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

._row_1c3pa_7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  ._row_1c3pa_7 {
    grid-template-columns: 1fr;
  }
}
._label_1c3pa_18 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._lineItemsWrap_1c3pa_24 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._advancedGrid_1c3pa_30 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  ._advancedGrid_1c3pa_30 {
    grid-template-columns: 1fr;
  }
}
._segmented_1c3pa_42 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._segmentedLabel_1c3pa_48 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neutral-900, #1a1d2b);
}

._segmentedTrack_1c3pa_54 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1875rem;
  background: var(--neutral-50, #f5f6fa);
  border: 1px solid var(--neutral-100, #eef0f4);
  border-radius: 6px;
  padding: 3px;
}

._segment_1c3pa_42 {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-600, #4a4f63);
  cursor: pointer;
}
._segment_1c3pa_42:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 1px;
}
._segment_1c3pa_42:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._segmentActive_1c3pa_84 {
  background: #ffffff;
  color: var(--neutral-900, #1a1d2b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}._footer_8lclb_1 {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0 0;
  margin-top: 0.625rem;
  border-top: 1px solid var(--neutral-100, #eef0f4);
  background: #ffffff;
}

._tips_8lclb_14 {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  color: var(--neutral-500, #6b7088);
  cursor: pointer;
}
._tips_8lclb_14:hover {
  color: var(--neutral-800, #2d3142);
}
._tips_8lclb_14:focus-visible {
  outline: 2px solid var(--info-400, #60a5fa);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  ._footer_8lclb_1 {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}._body_1k4kk_1 {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--neutral-700, #2d3142);
}

._actions_1k4kk_7 {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}._dialogBody_rj4w1_1 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
}

._dialogBody_rj4w1_1 [class*="wrapper"] {
  gap: 0.25rem;
}
._dialogBody_rj4w1_1 [class*="container"] > textarea + [class*="messageContainer"] {
  margin-top: 0.25rem;
}
._dialogBody_rj4w1_1 [class*="label"] {
  margin-bottom: 0;
  font-size: 0.8125rem;
}
._dialogBody_rj4w1_1 [class*="messageContainer"] {
  margin-top: 0.25rem;
}
._dialogBody_rj4w1_1 [class*="messageContainer"] [class*="charCounter"] {
  font-size: 0.6875rem;
}
._dialogBody_rj4w1_1 [class*="messageContainer"] [class*="message"] {
  font-size: 0.6875rem;
}/**
 * Onboarding Modal Styles
 */
._overlay_hkvk2_4 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  animation: _overlayFadeIn_hkvk2_1 300ms ease-out;
}

@keyframes _overlayFadeIn_hkvk2_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._content_hkvk2_21 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
  animation: _contentSlideIn_hkvk2_1 400ms ease-out;
}
._content_hkvk2_21:focus {
  outline: none;
}

@keyframes _contentSlideIn_hkvk2_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
._progressBar_hkvk2_51 {
  position: absolute;
  top: 288px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

._skipLink_hkvk2_60 {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 200ms ease;
}
._skipLink_hkvk2_60:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7);
}
._skipLink_hkvk2_60:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._progressDot_hkvk2_84 {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-400, #a3a3a3);
  transition: all 250ms ease;
  cursor: pointer;
  border: none;
  padding: 0;
  outline: none;
}
._progressDot_hkvk2_84:hover {
  background: var(--neutral-500, #737373);
  transform: scaleY(1.5);
}
._progressDot_hkvk2_84:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 2px;
}
._progressDot_hkvk2_84._active_hkvk2_103 {
  background: var(--primary-500, #3b82f6);
}
._progressDot_hkvk2_84._active_hkvk2_103:hover {
  background: var(--primary-600, #2563eb);
}

._carouselContainer_hkvk2_110 {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
._carouselContainer_hkvk2_110 button {
  max-height: 6px;
}

._swiper_hkvk2_119 {
  width: 100%;
  height: auto;
}

.swiper-slide {
  opacity: 0 !important;
  transition: opacity 400ms ease;
}

.swiper-slide-active {
  opacity: 1 !important;
}

._slide_hkvk2_133 {
  width: 100%;
}

._slideImageWrapper_hkvk2_137 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

._slideImage_hkvk2_137 {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

._slideContent_hkvk2_151 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px 32px;
}

.swiper-slide-active ._slideContent_hkvk2_151 {
  animation: _fadeInUp_hkvk2_1 400ms ease-out;
}

@keyframes _fadeInUp_hkvk2_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._title_hkvk2_173 {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900, #171717);
  margin: 0 0 12px;
  line-height: 1.3;
}

._description_hkvk2_181 {
  font-size: 15px;
  color: var(--neutral-600, #525252);
  line-height: 1.6;
  margin: 0 0 20px;
}

._featureList_hkvk2_188 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

._featureItem_hkvk2_198 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--neutral-700, #404040);
}

._featureIcon_hkvk2_206 {
  width: 16px;
  height: 16px;
  color: var(--primary-500, #3b82f6);
  flex-shrink: 0;
}

._footer_hkvk2_213 {
  display: flex;
  padding: 16px 32px 20px;
}

._navButtons_hkvk2_218 {
  display: flex;
  gap: 12px;
}

/* Responsive */
@media (max-width: 840px) {
  ._content_hkvk2_21 {
    max-width: 95%;
  }
}
@media (max-width: 640px) {
  ._content_hkvk2_21 {
    width: 95%;
    max-width: 95%;
    max-height: 95vh;
    border-radius: 12px;
  }
  ._progressBar_hkvk2_51 {
    top: 172px;
    right: 12px;
  }
  ._progressDot_hkvk2_84 {
    width: 24px;
    height: 3px;
    min-height: 6px;
  }
  ._skipLink_hkvk2_60 {
    top: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  ._skipLink_hkvk2_60 {
    padding: 0px 6px !important;
    min-height: 20px;
  }
}
@media (max-width: 640px) {
  ._slideImage_hkvk2_137 {
    height: 200px;
  }
  ._slideContent_hkvk2_151 {
    padding: 16px 20px;
  }
  ._title_hkvk2_173 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  ._description_hkvk2_181 {
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
  }
  ._featureList_hkvk2_188 {
    gap: 6px;
  }
  ._featureItem_hkvk2_198 {
    font-size: 12px;
    gap: 8px;
  }
  ._featureIcon_hkvk2_206 {
    width: 14px;
    height: 14px;
  }
  ._footer_hkvk2_213 {
    padding: 12px 20px 16px;
  }
  ._navButtons_hkvk2_218 {
    gap: 10px;
  }
  ._navButtons_hkvk2_218 button {
    padding: 10px 16px;
    font-size: 14px;
  }
}/**
 * DialogMediaCarousel Styles
 */
._placeholder_215p4_4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  background: var(--neutral-100);
  border-radius: 8px;
  color: var(--neutral-400);
  gap: var(--spacing-sm);
}
._placeholder_215p4_4 span {
  font-size: var(--font-size-sm);
}

._singleMedia_215p4_20 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--neutral-100);
}

._image_215p4_31 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

._imagePlaceholder_215p4_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--neutral-100);
  border-radius: 8px;
}
._imagePlaceholder_215p4_38::after {
  content: "Image placeholder";
  color: var(--neutral-400);
  font-size: var(--font-size-sm);
}

._video_215p4_52 {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

._carousel_215p4_58 {
  width: 100%;
  height: 100%;
}
._carousel_215p4_58 .swiper-pagination {
  bottom: 8px;
}
._carousel_215p4_58 .swiper-pagination-bullet {
  background: var(--neutral-300);
  opacity: 1;
}
._carousel_215p4_58 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--primary-500);
}
._carousel_215p4_58 .swiper-button-prev,
._carousel_215p4_58 .swiper-button-next {
  color: var(--neutral-600);
  width: 32px;
  height: 32px;
  background: var(--pure-white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
._carousel_215p4_58 .swiper-button-prev::after,
._carousel_215p4_58 .swiper-button-next::after {
  font-size: 14px;
  font-weight: 600;
}
._carousel_215p4_58 .swiper-button-prev:hover,
._carousel_215p4_58 .swiper-button-next:hover {
  color: var(--primary-500);
}

._slide_215p4_91 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
}/**
 * PageOnboardingDialog Styles
 */
@keyframes _overlayFadeIn_wprpq_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _contentSlideIn_wprpq_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
._overlay_wprpq_22 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  animation: _overlayFadeIn_wprpq_1 200ms ease-out;
}

._content_wprpq_31 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pure-white);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 80%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  z-index: 10000;
  animation: _contentSlideIn_wprpq_1 300ms ease-out;
}
._content_wprpq_31:focus {
  outline: none;
}

._closeButton_wprpq_50 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-100);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--neutral-600);
  transition: all 0.2s ease;
  z-index: 10;
}
._closeButton_wprpq_50:hover {
  background: var(--neutral-200);
  color: var(--neutral-800);
}

._sideMedia_wprpq_72 ._mainContent_wprpq_72 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  min-height: 300px;
}

._topMedia_wprpq_79 ._mainContent_wprpq_72 {
  display: block;
}
._topMedia_wprpq_79 ._topMediaContainer_wprpq_82 {
  width: 100%;
  height: 280px;
  background: var(--neutral-100);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

._mainContent_wprpq_72 {
  padding: 0;
}

._textColumn_wprpq_94 {
  padding: var(--spacing-xl);
  padding-right: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

._mediaColumn_wprpq_102 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-50);
  padding: var(--spacing-lg);
  min-height: 300px;
  border-radius: 0 12px 0 0;
}

._title_wprpq_112 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 var(--spacing-md);
  line-height: 1.2;
}

._description_wprpq_120 {
  font-size: var(--font-size-md);
  color: var(--neutral-600);
  line-height: 1.6;
  margin: 0 0 var(--spacing-lg);
}

._featureList_wprpq_127 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

._featureItem_wprpq_136 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  line-height: 1.5;
}

._featureIcon_wprpq_145 {
  width: 16px;
  height: 16px;
  color: var(--primary-500);
  flex-shrink: 0;
  margin-top: 2px;
}

._footer_wprpq_153 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-100);
}

._dontShowLabel_wprpq_162 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  cursor: pointer;
}
._dontShowLabel_wprpq_162 input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-color: var(--pure-white);
  border: 1.5px solid var(--neutral-300);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}
._dontShowLabel_wprpq_162 input[type=checkbox]:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}
._dontShowLabel_wprpq_162 input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
._dontShowLabel_wprpq_162 input[type=checkbox]:hover {
  border-color: var(--primary-400);
}
._dontShowLabel_wprpq_162 input[type=checkbox]:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}
._dontShowLabel_wprpq_162:hover {
  color: var(--neutral-800);
}

._primaryButton_wprpq_209 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: var(--pure-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._primaryButton_wprpq_209:hover {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.3);
}
._primaryButton_wprpq_209:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._content_wprpq_31 {
    width: 95%;
    max-height: 95vh;
  }
  ._sideMedia_wprpq_72 ._mainContent_wprpq_72 {
    grid-template-columns: 1fr;
  }
  ._mediaColumn_wprpq_102 {
    order: -1;
    min-height: 180px;
    border-radius: 12px 12px 0 0;
  }
  ._textColumn_wprpq_94 {
    padding: var(--spacing-lg);
  }
  ._title_wprpq_112 {
    font-size: var(--font-size-xl);
  }
  ._footer_wprpq_153 {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }
  ._footer_wprpq_153 ._primaryButton_wprpq_209 {
    width: 100%;
  }
  ._topMedia_wprpq_79 ._topMediaContainer_wprpq_82 {
    height: 200px;
  }
}
@media (max-width: 480px) {
  ._content_wprpq_31 {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 0);
    max-height: 90vh;
  }
}
._fullWidthLayout_wprpq_274 {
  width: 90%;
  max-width: 800px;
  padding: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

._fullWidthImageContainer_wprpq_282 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

@keyframes _fadeInUp_wprpq_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._titleOverlay_wprpq_298 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 24px 32px;
  padding-bottom: 60px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 1%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.2) 80%, transparent 100%);
  animation: _fadeInUp_wprpq_1 400ms ease-out;
}

._overlayTitle_wprpq_310 {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin: 0 0 6px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

._overlaySubtitle_wprpq_319 {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

._fullWidthImage_wprpq_282 {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

._closeButtonPill_wprpq_336 {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 200ms ease;
}
._closeButtonPill_wprpq_336:hover {
  background: rgba(0, 0, 0, 0.7);
}

._progressBar_wprpq_356 {
  position: absolute;
  bottom: 32px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

._progressDot_wprpq_365 {
  width: 32px;
  height: 4px;
  min-height: unset;
  border-radius: 2px;
  background: var(--neutral-400, #a3a3a3);
  transition: all 250ms ease;
  cursor: pointer;
  border: none;
  padding: 0;
  outline: none;
}
._progressDot_wprpq_365:hover {
  background: var(--neutral-500, #737373);
  transform: scaleY(1.5);
}
._progressDot_wprpq_365:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 2px;
}
._progressDot_wprpq_365._active_wprpq_385 {
  background: var(--primary-500, #3b82f6);
}
._progressDot_wprpq_365._active_wprpq_385:hover {
  background: var(--primary-600, #2563eb);
}

._swiper_wprpq_392 {
  width: 100%;
  height: auto;
}

.swiper-slide {
  opacity: 0 !important;
  transition: opacity 400ms ease;
}

.swiper-slide-active {
  opacity: 1 !important;
}

._fullWidthContent_wprpq_406 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px 32px;
  animation: _fadeInUp_wprpq_1 400ms ease-out;
}

._exampleBox_wprpq_415 {
  margin-top: 16px;
  padding: 16px;
  background: var(--neutral-50);
  border-radius: 8px;
  border-left: 3px solid var(--primary-500);
}

._exampleText_wprpq_423 {
  font-size: 14px;
  color: var(--neutral-600);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

._fullWidthFooter_wprpq_431 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px 20px;
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-100);
}

._navButtons_wprpq_440 {
  display: flex;
  gap: 12px;
}

@media (max-width: 840px) {
  ._fullWidthLayout_wprpq_274 {
    max-width: 95%;
  }
}
@media (max-width: 640px) {
  ._fullWidthLayout_wprpq_274 {
    width: 95%;
    max-width: 95%;
    max-height: 95vh;
    border-radius: 12px;
  }
  ._fullWidthImage_wprpq_282 {
    height: 200px;
  }
  ._titleOverlay_wprpq_298 {
    padding: 16px 20px;
    padding-bottom: 40px;
  }
  ._overlayTitle_wprpq_310 {
    font-size: 20px;
    margin-bottom: 4px;
  }
  ._overlaySubtitle_wprpq_319 {
    font-size: 13px;
  }
  ._navButtons_wprpq_440 {
    gap: 8px;
  }
  ._navButtons_wprpq_440 button {
    padding: 8px 12px;
    font-size: 13px;
  }
  ._progressBar_wprpq_356 {
    bottom: 28px;
    right: 12px;
  }
  ._progressDot_wprpq_365 {
    width: 24px;
    height: 3px;
    min-height: unset;
  }
  ._closeButtonPill_wprpq_336 {
    top: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
  ._fullWidthContent_wprpq_406 {
    padding: 16px 20px;
  }
  ._fullWidthContent_wprpq_406 ._title_wprpq_112 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  ._fullWidthContent_wprpq_406 ._description_wprpq_120 {
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
  }
  ._fullWidthContent_wprpq_406 ._featureList_wprpq_127 {
    gap: 6px;
  }
  ._fullWidthContent_wprpq_406 ._featureItem_wprpq_136 {
    font-size: 12px;
    gap: 8px;
  }
  ._fullWidthContent_wprpq_406 ._featureIcon_wprpq_145 {
    width: 14px;
    height: 14px;
  }
  ._exampleBox_wprpq_415 {
    padding: 12px;
    margin-top: 12px;
  }
  ._exampleText_wprpq_423 {
    font-size: 12px;
  }
  ._fullWidthFooter_wprpq_431 {
    padding: 12px 20px 16px;
  }
}/**
 * PageOnboardingTrigger Styles
 *
 * Plain icon without background - grayscale by default, colored on hover.
 * Uses Radix UI Tooltip for hover feedback.
 */
._trigger_43x6q_7 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  transition: color 0.2s ease;
}
._trigger_43x6q_7:hover {
  color: var(--primary-500);
}
._trigger_43x6q_7:focus {
  outline: none;
  color: var(--primary-500);
}
._trigger_43x6q_7:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
  border-radius: 4px;
}._wizardPageContainer_qggma_1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /**
   * Document-style page background
   * Applied when documentStyleEnabled is true via CSS variable
   * Creates PDF-like visual separation between page and document
   */
  background: var(--wz-page-background, transparent);
}

._wizardPageHeader_qggma_13 {
  flex-shrink: 0;
  border-bottom: 1px solid var(--neutral-300);
  z-index: 10;
}

._aiModeBanner_qggma_19 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-bottom: 3px solid transparent;
  background-image: linear-gradient(var(--wz-color-background, #ffffff), var(--wz-color-background, #ffffff)), linear-gradient(135deg, #00f0ff 0%, #a54fff 25%, #00ffc3 50%, #ff00ff 75%, #00f0ff 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  contain: layout style paint;
  will-change: auto;
  animation: _slideDown_qggma_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._aiModeBanner__content_qggma_34 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._aiModeBanner__icon_qggma_39 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wz-color-primary, #8b5cf6);
  flex-shrink: 0;
}
._aiModeBanner__text_qggma_46 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._aiModeBanner__text_qggma_46 strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--wz-color-text-primary, #1f2937);
  line-height: 1.4;
}
._aiModeBanner__text_qggma_46 span {
  font-size: 13px;
  color: var(--wz-color-text-secondary, #6b7280);
  line-height: 1.3;
}
._aiModeBanner__close_qggma_62 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--wz-color-text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
._aiModeBanner__close_qggma_62:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--wz-color-primary, #8b5cf6);
}
._aiModeBanner__close_qggma_62:active {
  transform: scale(0.95);
}
._aiModeBanner__close_qggma_62:focus-visible {
  outline: 2px solid var(--wz-color-primary, #8b5cf6);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  ._aiModeBanner_qggma_19 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    background-image: linear-gradient(var(--wz-color-background, #111827), var(--wz-color-background, #111827)), linear-gradient(135deg, #00f0ff 0%, #a54fff 25%, #00ffc3 50%, #ff00ff 75%, #00f0ff 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  ._aiModeBanner__text_qggma_46 strong {
    color: var(--wz-color-text-primary, #f9fafb);
  }
  ._aiModeBanner__text_qggma_46 span {
    color: var(--wz-color-text-secondary, #d1d5db);
  }
}
@media (max-width: 768px) {
  ._aiModeBanner_qggma_19 {
    padding: 10px 16px;
  }
  ._aiModeBanner__icon_qggma_39 svg {
    width: 20px;
    height: 20px;
  }
  ._aiModeBanner__text_qggma_46 strong {
    font-size: 13px;
  }
  ._aiModeBanner__text_qggma_46 span {
    font-size: 12px;
  }
  ._aiModeBanner__close_qggma_62 {
    padding: 4px;
  }
  ._aiModeBanner__close_qggma_62 svg {
    width: 18px;
    height: 18px;
  }
}
@keyframes _slideDown_qggma_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._wizardPageContent_qggma_133 {
  flex: 1;
  overflow: auto;
  padding: 0;
  width: 100%;
  background-color: var(--wz-color-background, #f9fafb);
  position: relative;
}
._wizardPageContent_qggma_133 ._wizardPageContentInner_qggma_141 {
  max-width: 960px;
  margin: 0 auto;
  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1280px) {
  ._wizardPageContent_qggma_133 ._wizardPageContentInner_qggma_141 {
    max-width: min(960px, 100vw - 480px);
  }
  ._wizardPageContent_qggma_133 ._wizardPageContentInner_qggma_141._withInlinePanel_qggma_150 {
    margin-right: 420px;
  }
}
@media (min-width: 1600px) {
  ._wizardPageContent_qggma_133 ._wizardPageContentInner_qggma_141 {
    max-width: min(1200px, 100vw - 520px);
  }
  ._wizardPageContent_qggma_133 ._wizardPageContentInner_qggma_141._withInlinePanel_qggma_150 {
    margin-right: 460px;
  }
}

._loadingContainer_qggma_163 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  color: var(--neutral-600);
}
._loadingContainer_qggma_163 p {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

._loadingSpinner_qggma_178 {
  width: 48px;
  height: 48px;
  border: 4px solid var(--neutral-300);
  border-left-color: var(--primary-500);
  border-radius: 50%;
  animation: _spin_qggma_1 1s linear infinite;
}

@keyframes _spin_qggma_1 {
  to {
    transform: rotate(360deg);
  }
}
._errorContainer_qggma_192 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  padding: 2rem;
}
._errorContainer_qggma_192 h2 {
  color: var(--neutral-900);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
._errorContainer_qggma_192 p {
  color: var(--neutral-600);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  max-width: 400px;
}

._retryButton_qggma_214 {
  background-color: var(--primary-500);
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
._retryButton_qggma_214:hover {
  background-color: var(--primary-600);
}
._retryButton_qggma_214:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(9, 0, 255, 0.1);
}

@media (max-width: 768px) {
  ._wizardPageContent_qggma_133 {
    padding: 0;
  }
  ._loadingContainer_qggma_163,
  ._errorContainer_qggma_192 {
    padding: 1rem;
  }
  ._loadingContainer_qggma_163 h2,
  ._errorContainer_qggma_192 h2 {
    font-size: 1.25rem;
  }
  ._loadingContainer_qggma_163 p,
  ._errorContainer_qggma_192 p {
    font-size: 0.875rem;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_6vzan_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_6vzan_358[data-layout-style="1"],
._wizard-container_6vzan_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_6vzan_358[data-layout-style="1"] ._wizard-section_6vzan_371,
._wizard-container_6vzan_358[style*="--wz-layout-style: 1"] ._wizard-section_6vzan_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_6vzan_358[data-layout-style="2"],
._wizard-container_6vzan_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_6vzan_358[data-layout-style="2"],
  ._wizard-container_6vzan_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_6vzan_358[data-layout-style="3"],
._wizard-container_6vzan_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_6vzan_358[data-layout-style="3"] ._wizard-section_6vzan_371,
._wizard-container_6vzan_358[style*="--wz-layout-style: 3"] ._wizard-section_6vzan_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._section_6vzan_405 {
  position: relative;
  background: var(--wz-color-background);
  border-radius: calc(var(--wz-spacing-base) * 0.5);
  box-shadow: 0 1px 3px rgba(var(--wz-color-primary), 0.1);
  /* User-controllable section spacing via Wizard Settings */
  /* Section Spacing options: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  /* Using margin-top so each section controls the space above itself */
  margin-top: var(--wz-section-spacing);
  /* Remove margin-top from first section to avoid extra space at top */
}
._section_6vzan_405:first-child {
  margin-top: 0;
}
._section_6vzan_405:hover ._sectionControls_6vzan_419 {
  opacity: 1;
  visibility: visible;
}

._layoutStack_6vzan_424 ._header_6vzan_424 {
  text-align: left;
}

._layoutCenter_6vzan_428 ._header_6vzan_424 {
  text-align: center;
}
@media print {
  ._layoutCenter_6vzan_428 ._header_6vzan_424 {
    margin: 0 !important;
    padding: 0 !important;
  }
}

._layoutSplit_6vzan_438 {
  display: flex;
  flex-direction: row;
  gap: calc(var(--wz-spacing-base) * 2);
  align-items: flex-start;
}
._layoutSplit_6vzan_438 ._header_6vzan_424 {
  flex: 0 0 28%;
  border-bottom: none;
  border-right: 1px solid var(--wz-color-tertiary);
  text-align: left;
  position: sticky;
  top: var(--wz-spacing-base);
}
._layoutSplit_6vzan_438 ._content_6vzan_452 {
  flex: 1;
}
@media (max-width: 768px) {
  ._layoutSplit_6vzan_438 {
    flex-direction: column;
  }
  ._layoutSplit_6vzan_438 ._header_6vzan_424 {
    flex: 1;
    border-right: none;
    border-bottom: 1px solid var(--wz-color-tertiary);
    position: relative;
  }
  ._layoutSplit_6vzan_438 ._content_6vzan_452 {
    flex: 1;
  }
}

._header_6vzan_424 {
  padding: var(--wz-spacing-base);
  border-bottom: 1px solid var(--wz-color-tertiary);
  /* PRINT MODE: Minimal spacing and clean borders */
}
@media print {
  ._header_6vzan_424 {
    padding: 0 !important;
    margin-bottom: 6px !important; /* Tight spacing before content */
    border-bottom: none !important; /* Clean look for print */
    page-break-after: avoid !important; /* Keep with content */
  }
}

._title_6vzan_484 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-titles);
  font-weight: 600;
  margin: 0 0 calc(var(--wz-spacing-base) * 0.25);
  color: var(--wz-color-primary);
  line-height: var(--wz-line-height-title);
  /* PRINT MODE: Unified font size for ALL section titles */
}
@media print {
  ._title_6vzan_484 {
    font-size: var(--wz-print-font-titles) !important; /* 17px - consistent across ALL sections */
    font-weight: var(--wz-print-font-weight-semibold) !important;
    color: var(--wz-print-color-text-primary) !important;
    line-height: var(--wz-print-line-height-tight) !important;
    margin: 0 0 2px 0 !important; /* Tight spacing */
  }
}

._subtitle_6vzan_503 {
  font-family: var(--wz-font-family-subtitle);
  font-size: var(--wz-font-size-subtitles);
  color: var(--wz-color-text);
  margin: 0;
  line-height: var(--wz-line-height-subtitle);
  /* PRINT MODE: Unified font size for ALL section subtitles */
}
@media print {
  ._subtitle_6vzan_503 {
    font-size: var(--wz-print-font-subtitles) !important; /* 14px - same as body text, consistent across ALL sections */
    color: var(--wz-print-color-text-muted) !important;
    line-height: var(--wz-print-line-height-base) !important;
    margin: 0 0 4px 0 !important; /* Tight spacing */
  }
}

._content_6vzan_452 {
  padding: var(--wz-spacing-base);
  height: auto;
  min-height: 0;
  overflow: visible;
}

._section_6vzan_405[data-section-type=hero] {
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
._section_6vzan_405[data-section-type=hero] ._content_6vzan_452 {
  padding: 0;
}

/**
 * Section Controls Wrapper - Floating "ear" on the right side
 * Creates space on the right for the sticky control panel
 */
._sectionControlsWrapper_6vzan_540 {
  position: absolute;
  top: 0;
  right: -8px;
  height: 100%;
  width: 48px;
  pointer-events: none;
  z-index: 50;
}

/**
 * Section Controls - Sticky floating panel
 * Follows scroll within the section boundary
 * Always visible with slide-in animation
 * Styled to look like an "ear" embedded in the right edge
 */
._sectionControls_6vzan_419 {
  position: sticky;
  top: calc(var(--spacing-lg) + 60px);
  opacity: 0.2;
  visibility: visible;
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  width: fit-content;
  margin-left: auto;
}
._sectionControls_6vzan_419::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 50%;
  background: linear-gradient(to right, transparent, var(--primary-100));
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._sectionControls_6vzan_419:hover {
  opacity: 1;
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}
._sectionControls_6vzan_419:hover::before {
  opacity: 1;
}
._section_6vzan_405:hover ._sectionControls_6vzan_419 {
  opacity: 1;
}
._section_6vzan_405:hover ._sectionControls_6vzan_419::before {
  opacity: 0.5;
}

@media (max-width: 1024px) {
  ._sectionControlsWrapper_6vzan_540 {
    right: 0;
    top: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
  }
  ._sectionControls_6vzan_419 {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  ._section_6vzan_405:hover ._sectionControls_6vzan_419,
  ._section_6vzan_405:focus-within ._sectionControls_6vzan_419 {
    opacity: 1;
    visibility: visible;
  }
}
@media print {
  ._sectionControlsWrapper_6vzan_540,
  ._sectionControls_6vzan_419 {
    display: none !important;
  }
}/**
 * SectionControls Styles
 * Floating "ear" button panel that appears on the right side of sections
 * Uses semantic color tokens for light/dark mode support
 */
._controls_1s6ou_6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  background: var(--pure-white);
  padding: var(--spacing-xs);
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: _slideInFromRight_1s6ou_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._controls_1s6ou_6:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.06);
  border-color: var(--primary-200);
}

@keyframes _slideInFromRight_1s6ou_1 {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._controlButton_1s6ou_33 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}
._controlButton_1s6ou_33 svg {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
._controlButton_1s6ou_33:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
  transform: scale(1.05);
}
._controlButton_1s6ou_33:hover svg {
  transform: scale(1.1);
}
._controlButton_1s6ou_33:active {
  background: var(--neutral-200);
  transform: scale(0.95);
}
._controlButton_1s6ou_33:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
._controlButton_1s6ou_33[aria-label="Open settings"]:hover {
  color: var(--primary-600);
  background: var(--primary-50);
}
._controlButton_1s6ou_33[aria-label="Move section up"]:hover, ._controlButton_1s6ou_33[aria-label="Move section down"]:hover {
  color: var(--neutral-900);
  background: var(--neutral-100);
}
._controlButton_1s6ou_33[aria-label="Delete section"]:hover {
  color: var(--negative-600);
  background: var(--negative-50);
}

._divider_1s6ou_78 {
  width: 100%;
  height: 1px;
  background-color: var(--neutral-200);
  margin: var(--spacing-xs) 0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  ._controls_1s6ou_6 {
    padding: 6px;
    gap: 6px;
  }
  ._controlButton_1s6ou_33 {
    width: 28px;
    height: 28px;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_16b87_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_16b87_358[data-layout-style="1"],
._wizard-container_16b87_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_16b87_358[data-layout-style="1"] ._wizard-section_16b87_371,
._wizard-container_16b87_358[style*="--wz-layout-style: 1"] ._wizard-section_16b87_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_16b87_358[data-layout-style="2"],
._wizard-container_16b87_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_16b87_358[data-layout-style="2"],
  ._wizard-container_16b87_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_16b87_358[data-layout-style="3"],
._wizard-container_16b87_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_16b87_358[data-layout-style="3"] ._wizard-section_16b87_371,
._wizard-container_16b87_358[style*="--wz-layout-style: 3"] ._wizard-section_16b87_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._editor_16b87_405 {
  border: 1px dashed var(--wz-color-border-light);
  background-color: white !important;
  color: black !important;
  cursor: text;
  padding: calc(var(--wz-spacing-base) * 0.25);
  min-height: calc(var(--wz-spacing-base) * 1.5);
  outline: none;
  border-radius: calc(var(--wz-spacing-base) * 0.25);
}
._editor_16b87_405:focus {
  border-style: solid;
  border-color: var(--wz-color-primary);
  background-color: var(--wz-color-background);
}

._viewer_16b87_421 {
  cursor: pointer;
  padding: calc(var(--wz-spacing-base) * 0.25);
  border: 1px solid transparent;
  border-radius: calc(var(--wz-spacing-base) * 0.25);
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  min-height: calc(var(--wz-spacing-base) * 1.5);
  transition: all 0.2s ease-in-out;
  /* Subtle visual hint that this is editable */
}
._viewer_16b87_421:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px dashed var(--wz-color-border-light);
  border-radius: calc(var(--wz-spacing-base) * 0.25);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}
._viewer_16b87_421 {
  position: relative;
}
._viewer_16b87_421:hover {
  background-color: var(--wz-color-bg-hover);
  border-color: var(--wz-color-border-hover);
}
._viewer_16b87_421:hover:before {
  opacity: 0.6;
}
._viewer_16b87_421:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._published_16b87_461 {
  cursor: default;
  pointer-events: none;
  user-select: text;
  padding: calc(var(--wz-spacing-base) * 0.25);
  min-height: calc(var(--wz-spacing-base) * 1.5);
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

._content_16b87_472 {
  display: inline;
}

._placeholder_16b87_476 {
  color: var(--wz-color-text-muted);
  font-style: italic;
  opacity: 0.8;
}
._viewer_16b87_421:hover ._placeholder_16b87_476 {
  opacity: 1;
  color: var(--wz-color-text-secondary);
}/* ===== ADAPTIVE SETTINGS PANEL STYLES ===== */
/* CRITICAL: Uses app design system variables ONLY - NO --wz-* variables */
/* This component is used by settings panels which must be independent of wizard theming */
._overlay_148ih_4 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  animation: _fadeIn_148ih_1 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

._inlinePanel_148ih_12 {
  position: fixed;
  top: 0;
  height: 100vh;
  max-width: 90vw;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12), -2px 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 1050;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
._inlinePanel_148ih_12._right_148ih_26 {
  right: 0;
  border-right: none;
  border-left: 1px solid var(--neutral-200);
  transform: translateX(100%);
}
._inlinePanel_148ih_12._right_148ih_26[data-open=true] {
  transform: translateX(0);
}
._inlinePanel_148ih_12._left_148ih_35 {
  left: 0;
  border-left: none;
  border-right: 1px solid var(--neutral-200);
  transform: translateX(-100%);
}
._inlinePanel_148ih_12._left_148ih_35[data-open=true] {
  transform: translateX(0);
}

._panelHeader_148ih_45 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
  background: var(--pure-white);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

._headerContent_148ih_58 {
  flex: 1;
  padding-right: 16px;
}

._panelTitle_148ih_63 {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
  margin: 0 0 8px;
}

._panelSubtitle_148ih_72 {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--neutral-500);
  line-height: 1.4;
  margin: 0;
}

._closeButton_148ih_80 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._closeButton_148ih_80:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
._closeButton_148ih_80:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
._closeButton_148ih_80 svg {
  width: 20px;
  height: 20px;
}

._panelContent_148ih_106 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  ._panelContent_148ih_106 {
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  ._panelContent_148ih_106 {
    padding: 0.875rem;
  }
}
._panelContent_148ih_106::-webkit-scrollbar {
  width: 8px;
}
._panelContent_148ih_106::-webkit-scrollbar-track {
  background: transparent;
}
._panelContent_148ih_106::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 4px;
}
._panelContent_148ih_106::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}

._resizeHandle_148ih_137 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background: transparent;
  transition: background 0.2s ease;
  z-index: 11;
}
._resizeHandle_148ih_137:hover, ._resizeHandle_148ih_137:active {
  background: var(--primary-500);
  opacity: 0.3;
}
._resizeHandle_148ih_137._resize-right_148ih_151 {
  left: -2px;
}
._resizeHandle_148ih_137._resize-left_148ih_154 {
  right: -2px;
}

._sheetContent_148ih_158 {
  width: 95vw !important;
  max-width: 600px !important;
  min-width: 0 !important;
}
@media (max-width: 768px) {
  ._sheetContent_148ih_158 {
    width: 95vw !important;
    max-width: none !important;
  }
}
@media (max-width: 500px) {
  ._sheetContent_148ih_158 {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
@media (max-width: 480px) {
  ._sheetContent_148ih_158 {
    width: 100vw !important;
    max-width: none !important;
  }
}

._sheetTitle_148ih_183 {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

._sheetSubtitle_148ih_194 {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--neutral-500);
  line-height: 1.4;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}

._sheetBody_148ih_204 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 16px;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  ._sheetBody_148ih_204 {
    padding-top: 12px;
  }
}

@keyframes _slideInFromRight_148ih_1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_148ih_1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes _fadeIn_148ih_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._inlinePanel_148ih_12 {
    width: 100% !important;
    max-width: 100vw;
  }
  ._resizeHandle_148ih_137 {
    display: none;
  }
}
@media (prefers-contrast: high) {
  ._inlinePanel_148ih_12 {
    border-width: 2px;
  }
  ._closeButton_148ih_80 {
    outline: 1px solid var(--neutral-300);
  }
  ._closeButton_148ih_80:hover {
    outline-color: var(--primary-500);
    background: var(--neutral-200);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._inlinePanel_148ih_12 {
    transition: none;
  }
  ._closeButton_148ih_80 {
    transition: none;
  }
  ._resizeHandle_148ih_137 {
    transition: none;
  }
}/* ===== SHARED SETTINGS CONTROLS STYLES ===== */
/* CRITICAL: Uses app design system variables ONLY - NO --wz-* variables */
/* ===== COMMON STYLES ===== */
._controlIcon_a6coz_4 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--neutral-500);
}

._labelText_a6coz_11 {
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--neutral-900);
  line-height: 1.4;
}

._labelDescription_a6coz_18 {
  display: block;
  font-size: 0.75rem;
  color: var(--neutral-500);
  margin-top: 2px;
  line-height: 1.4;
}

/* ===== TOGGLE CONTROL ===== */
._toggleControl_a6coz_27 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._toggleHeader_a6coz_33 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  transition: all 0.2s ease;
}
._toggleHeader_a6coz_33:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
}

._toggleLabel_a6coz_48 {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* ===== SELECT CONTROL ===== */
._selectControl_a6coz_56 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._selectLabel_a6coz_62 {
  display: flex;
  flex-direction: column;
}

._selectTrigger_a6coz_67 {
  width: 100%;
  padding: 8px 12px;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  font-size: 0.813rem;
  color: var(--neutral-900);
  transition: all 0.2s ease;
}
._selectTrigger_a6coz_67:hover {
  border-color: var(--neutral-300);
}
._selectTrigger_a6coz_67:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

._selectOption_a6coz_85 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._optionIcon_a6coz_91 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--neutral-500);
  margin-top: 2px;
}

._optionText_a6coz_99 {
  flex: 1;
}

._optionLabel_a6coz_103 {
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--neutral-900);
}

._optionDescription_a6coz_109 {
  font-size: 0.75rem;
  color: var(--neutral-500);
  margin-top: 2px;
}

/* ===== SLIDER CONTROL ===== */
._sliderControl_a6coz_116 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._sliderHeader_a6coz_122 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

._sliderLabel_a6coz_129 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._sliderValue_a6coz_135 {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--primary-500);
  flex-shrink: 0;
  padding: 2px 8px;
  background: var(--neutral-50);
  border-radius: 4px;
}

._slider_a6coz_116 {
  width: 100%;
}

/* ===== COLOR CONTROL ===== */
._colorControl_a6coz_150 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._colorLabel_a6coz_156 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._colorTrigger_a6coz_162 {
  flex-shrink: 0;
}

/* ===== BUTTON GROUP ===== */
._buttonGroup_a6coz_167 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._buttonGroupLabel_a6coz_173 {
  display: flex;
  flex-direction: column;
}

._buttonGroupButtons_a6coz_178 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
._buttonGroupButtons_a6coz_178._compact_a6coz_183 {
  gap: 4px;
}
._buttonGroupButtons_a6coz_178 button {
  flex: 1;
  min-width: 80px;
}

/* ===== NUMBER INPUT ===== */
._numberControl_a6coz_192 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._numberLabel_a6coz_198 {
  display: flex;
  flex-direction: column;
}

._numberInputWrapper_a6coz_203 {
  display: flex;
  align-items: center;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}
._numberInputWrapper_a6coz_203:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
._numberInputWrapper_a6coz_203:hover {
  border-color: var(--neutral-300);
}

._numberPrefix_a6coz_220,
._numberSuffix_a6coz_221 {
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--neutral-500);
  flex-shrink: 0;
}

._numberPrefix_a6coz_220 {
  margin-right: 6px;
}

._numberSuffix_a6coz_221 {
  margin-left: 6px;
}

._numberInput_a6coz_203 {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--neutral-900);
  text-align: center;
}
._numberInput_a6coz_203::placeholder {
  color: var(--neutral-500);
}
._numberInput_a6coz_203 {
  /* Remove spinner arrows */
}
._numberInput_a6coz_203::-webkit-outer-spin-button, ._numberInput_a6coz_203::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._numberInput_a6coz_203[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ===== DISABLED STATES ===== */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
[disabled] ._labelText_a6coz_11,
[disabled] ._labelDescription_a6coz_18 {
  opacity: 0.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  ._toggleHeader_a6coz_33 {
    padding: 10px;
  }
  ._buttonGroupButtons_a6coz_178 button {
    min-width: auto;
    flex: 0 1 calc(50% - 4px);
  }
}
/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  ._toggleHeader_a6coz_33,
  ._selectTrigger_a6coz_67,
  ._numberInputWrapper_a6coz_203 {
    border-width: 2px;
  }
  ._sliderValue_a6coz_135 {
    border: 1px solid var(--neutral-300);
  }
}
/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  ._toggleHeader_a6coz_33 {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }
  ._toggleHeader_a6coz_33:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
  }
  ._sliderValue_a6coz_135 {
    background: rgba(255, 255, 255, 0.1);
  }
  ._selectTrigger_a6coz_67,
  ._numberInputWrapper_a6coz_203 {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
  }
}/* CollapsibleSection Styles - Settings Panel Component */
/* CRITICAL: Uses app design system variables ONLY - NO --wz-* variables */
._collapsibleSection_525ag_3 {
  margin-bottom: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  overflow: hidden;
  transition: all 0.2s ease;
}
._collapsibleSection_525ag_3:hover {
  border-color: var(--neutral-300);
}
._collapsibleSection_525ag_3:last-child {
  margin-bottom: 0;
}

._header_525ag_18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}
._header_525ag_18:hover {
  background-color: var(--neutral-50);
}
._header_525ag_18:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}
._header_525ag_18:focus:not(:focus-visible) {
  outline: none;
}

._headerContent_525ag_38 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

._iconWrapper_525ag_46 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--neutral-700);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
._header_525ag_18:hover ._iconWrapper_525ag_46 {
  background: var(--neutral-200);
  color: var(--neutral-900);
}

._textContent_525ag_63 {
  flex: 1;
  min-width: 0;
}

._title_525ag_68 {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 4px;
  line-height: 1.2;
}

._subtitle_525ag_76 {
  font-size: 13px;
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.3;
}

._chevron_525ag_83 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-500);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  flex-shrink: 0;
}
._chevron_525ag_83._open_525ag_91 {
  transform: rotate(180deg);
  color: var(--primary-500);
}
._header_525ag_18:hover ._chevron_525ag_83 {
  color: var(--neutral-700);
}

._content_525ag_99 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._content_525ag_99._open_525ag_91 {
  max-height: 5000px;
}

._contentInner_525ag_108 {
  padding: 0 16px 16px;
  animation: _fadeIn_525ag_1 0.3s ease;
}

@keyframes _fadeIn_525ag_1 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 640px) {
  ._header_525ag_18 {
    padding: 12px;
  }
  ._iconWrapper_525ag_46 {
    width: 32px;
    height: 32px;
  }
  ._title_525ag_68 {
    font-size: 15px;
  }
  ._subtitle_525ag_76 {
    font-size: 12px;
  }
  ._contentInner_525ag_108 {
    padding: 0 12px 12px;
  }
}
@media (prefers-contrast: high) {
  ._collapsibleSection_525ag_3 {
    border-width: 2px;
  }
  ._header_525ag_18:focus {
    outline-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._chevron_525ag_83,
  ._content_525ag_99,
  ._iconWrapper_525ag_46 {
    transition: none;
  }
  ._contentInner_525ag_108 {
    animation: none;
  }
}._textSettings_nz0zs_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_nz0zs_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_nz0zs_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_nz0zs_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_nz0zs_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_nz0zs_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_nz0zs_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_nz0zs_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_nz0zs_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutControls_nz0zs_47 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._displayControls_nz0zs_53 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._settingsContent_nz0zs_8::-webkit-scrollbar {
    width: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._settingsContent_nz0zs_8 {
    scroll-behavior: auto;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_2xoym_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_2xoym_358[data-layout-style="1"],
._wizard-container_2xoym_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_2xoym_358[data-layout-style="1"] ._wizard-section_2xoym_371,
._wizard-container_2xoym_358[style*="--wz-layout-style: 1"] ._wizard-section_2xoym_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_2xoym_358[data-layout-style="2"],
._wizard-container_2xoym_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_2xoym_358[data-layout-style="2"],
  ._wizard-container_2xoym_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_2xoym_358[data-layout-style="3"],
._wizard-container_2xoym_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_2xoym_358[data-layout-style="3"] ._wizard-section_2xoym_371,
._wizard-container_2xoym_358[style*="--wz-layout-style: 3"] ._wizard-section_2xoym_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* ========================= TextSection.module.scss ========================= */
/* Enhanced responsive layout with mobile-first approach */
/* Note: Breakpoints, multipliers, and touch targets are now in globalVariables.css */
._textSection_2xoym_408 {
  width: 100%;
  font-family: var(--wz-font-family-body);
  container-type: inline-size;
  container-name: text-section;
  /* Loading state */
}
._textSection__loading_2xoym_415 {
  padding: var(--wz-spacing-component);
  text-align: center;
  color: var(--wz-color-text-secondary);
  font-style: italic;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
}
._textSection_2xoym_408 {
  /* Error state */
}
._textSection__error_2xoym_426 {
  padding: var(--wz-spacing-component);
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--wz-border-radius-small);
  color: #dc2626;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 {
  display: flex;
  flex-direction: row;
  gap: var(--wz-spacing-component);
  flex-wrap: wrap;
  width: 100%;
  /* Mobile-first responsive gaps */
}
@media (max-width: 640px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 {
    gap: calc(var(--wz-spacing-component) * var(--wz-spacing-mobile-multiplier));
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 {
    gap: calc(var(--wz-spacing-component) * var(--wz-spacing-tablet-multiplier));
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-spacing-medium) * 0.5);
  position: relative;
  min-width: 0; /* Prevent flex item from overflowing */
  /* Default column widths with calc for better precision */
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--single_2xoym_461 {
  width: 100%;
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464 {
  width: calc(50% - var(--wz-spacing-component) / 2);
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
  width: calc(33.333% - var(--wz-spacing-component) * 0.667);
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Show add button on column hover (desktop only) */
}
@media (hover: hover) and (pointer: fine) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435:hover ._addItemContainer_2xoym_474 {
    opacity: 1;
    visibility: visible;
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Touch devices: Always show add button */
}
@media (hover: none) and (pointer: coarse) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 ._addItemContainer_2xoym_474 {
    opacity: 1;
    visibility: visible;
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Mobile: All columns stack (320px - 640px) */
}
@media (max-width: 640px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--single_2xoym_461, ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464, ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    width: 100%;
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Small Tablet: Max 2 columns (641px - 768px) */
}
@media (min-width: 641px) and (max-width: 768px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--single_2xoym_461 {
    width: 100%;
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464 {
    width: calc(50% - var(--wz-spacing-component) * 0.5);
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    width: calc(50% - var(--wz-spacing-component) * 0.5);
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Large Tablet: Smart column adaptation (769px - 1024px) */
}
@media (min-width: 769px) and (max-width: 1024px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--single_2xoym_461 {
    width: 100%;
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464 {
    width: calc(50% - var(--wz-spacing-component) * 0.5);
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    width: calc(50% - var(--wz-spacing-component) * 0.5);
    /* For odd number of items, last column takes full width */
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467:last-child:nth-child(odd) {
    width: 100%;
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Small Desktop: User-selected columns (1025px - 1366px) */
}
@media (min-width: 1025px) and (max-width: 1366px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    width: calc(33.333% - var(--wz-spacing-component) * 0.667);
  }
}
._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
  /* Large Desktop: Optimal spacing (1367px+) */
}
@media (min-width: 1367px) {
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
    /* Max width container for readability */
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464 {
    max-width: 500px;
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    max-width: 400px;
  }
}

/* ===== MAIN CONTENT CONTAINER ===== */
._textContent_2xoym_552 {
  display: grid;
  gap: var(--wz-spacing-component);
  width: 100%;
  /* Dynamic columns based on columnCount prop */
}
._textContent_2xoym_552[data-columns="1"] {
  grid-template-columns: 1fr;
}
._textContent_2xoym_552[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wz-spacing-large);
}
._textContent_2xoym_552[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wz-spacing-medium);
}
._textContent_2xoym_552 {
  /* Responsive behavior */
}
@media (max-width: 768px) {
  ._textContent_2xoym_552[data-columns="2"], ._textContent_2xoym_552[data-columns="3"] {
    grid-template-columns: 1fr;
    gap: var(--wz-spacing-component);
  }
}
@media (max-width: 1024px) {
  ._textContent_2xoym_552[data-columns="3"] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wz-spacing-medium);
  }
}

/* ===== INDIVIDUAL TEXT ITEM ===== */
._textItem_2xoym_586 {
  position: relative;
  transition: all var(--wz-transition-fast);
  /* Mobile: Better spacing and touch areas */
}
@media (max-width: 768px) {
  ._textItem_2xoym_586 {
    padding: calc(var(--wz-spacing-small) * 0.5);
    margin-bottom: calc(var(--wz-spacing-small) * 0.5);
  }
}
._textItem_2xoym_586 {
  /* Dragging state */
}
._textItem_2xoym_586._dragging_2xoym_600 {
  opacity: 0.7;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  background: var(--wz-color-primary-light, #dbeafe);
  border: 2px solid var(--wz-color-primary, #2563eb);
  border-radius: var(--wz-border-radius-small);
  cursor: grabbing !important;
}
._textItem_2xoym_586 {
  /* Mobile: Enhanced dragging feedback */
}
@media (max-width: 1024px) {
  ._textItem_2xoym_586._dragging_2xoym_600 {
    opacity: 0.85;
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.3);
    background: var(--wz-color-primary-light, #dbeafe);
    border: 3px solid var(--wz-color-primary, #2563eb);
  }
}
._textItem_2xoym_586 {
  /* Focus state for accessibility */
}
._textItem_2xoym_586:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._textItem_2xoym_586 {
  /* Desktop: Show controls on hover */
}
@media (hover: hover) and (pointer: fine) {
  ._textItem_2xoym_586:hover ._itemHeader_2xoym_633 {
    visibility: visible;
  }
}
._textItem_2xoym_586 {
  /* Mobile/Tablet: Active state styling when clicked */
}
@media (max-width: 1024px) {
  ._textItem_2xoym_586._active_2xoym_641 {
    background: var(--wz-color-bg-secondary);
    border-radius: var(--wz-border-radius-small);
    padding: 12px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }
}

/* ===== ITEM HEADER (Drag Handle + Remove Button) ===== */
._itemHeader_2xoym_633 {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: -12px;
  left: -42px;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  background: var(--wz-color-background);
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  padding: 8px;
  box-shadow: var(--wz-shadow-small);
  z-index: 10;
  transition: all var(--wz-transition-fast);
  pointer-events: none;
  /* Desktop: Show on hover (unchanged) */
}
@media (hover: hover) and (pointer: fine) {
  ._textItem_2xoym_586:hover ._itemHeader_2xoym_633 {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
._itemHeader_2xoym_633 {
  /* Mobile/Tablet: Hidden by default, show as centered popover when active */
}
@media (max-width: 1024px) {
  ._itemHeader_2xoym_633 {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  ._itemHeader_2xoym_633._activePopover_2xoym_688 {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 12px;
    padding: 10px 16px;
    background: var(--wz-color-background);
    border: 1px solid var(--wz-color-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
  }
  ._itemHeader_2xoym_633._activePopover_2xoym_688::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--wz-color-background);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
  }
}
._itemHeader_2xoym_633 {
  /* Extra small mobile: Adjust popover size */
}
@media (max-width: 480px) {
  ._itemHeader_2xoym_633._activePopover_2xoym_688 {
    top: -52px;
    padding: 8px 12px;
    gap: 10px;
  }
  ._itemHeader_2xoym_633._activePopover_2xoym_688::after {
    border-width: 6px;
  }
}

/* Drag Handle */
._dragHandle_2xoym_731 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: grab;
  color: var(--wz-color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--wz-border-radius-small);
  transition: all var(--wz-transition-fast);
  flex-shrink: 0;
  /* Desktop hover state */
}
@media (hover: hover) and (pointer: fine) {
  ._dragHandle_2xoym_731:hover {
    color: var(--wz-color-text-primary);
    background: var(--wz-color-background-hover);
  }
}
._dragHandle_2xoym_731:active {
  cursor: grabbing;
  transform: scale(0.95);
}
._dragHandle_2xoym_731 {
  /* Mobile/Tablet: Larger, more touch-friendly when in active popover */
}
@media (max-width: 1024px) {
  ._activePopover_2xoym_688 ._dragHandle_2xoym_731 {
    width: var(--wz-touch-target-min);
    height: var(--wz-touch-target-min);
    background: var(--wz-color-background);
    border: 1px solid var(--wz-color-border-light);
    border-radius: 8px;
  }
  ._activePopover_2xoym_688 ._dragHandle_2xoym_731:active {
    background: var(--wz-color-bg-hover);
    transform: scale(0.95);
  }
  ._activePopover_2xoym_688 ._dragHandle_2xoym_731 svg {
    width: 20px;
    height: 20px;
  }
}
._dragHandle_2xoym_731 {
  /* Drag handle icon */
}
._dragHandle_2xoym_731 svg {
  width: 16px;
  height: 16px;
}

/* Remove Button */
._removeButton_2xoym_785 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--wz-color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--wz-border-radius-small);
  transition: all var(--wz-transition-fast);
  flex-shrink: 0;
  /* Desktop hover state */
}
@media (hover: hover) and (pointer: fine) {
  ._removeButton_2xoym_785:hover {
    color: var(--wz-color-danger);
    background: rgba(220, 38, 38, 0.1);
  }
}
._removeButton_2xoym_785:active {
  transform: scale(0.95);
}
._removeButton_2xoym_785 {
  /* Mobile/Tablet: Larger, more touch-friendly when in active popover */
}
@media (max-width: 1024px) {
  ._activePopover_2xoym_688 ._removeButton_2xoym_785 {
    width: var(--wz-touch-target-min);
    height: var(--wz-touch-target-min);
    background: var(--wz-color-background);
    border: 1px solid var(--wz-color-border-light);
    border-radius: 8px;
    color: var(--wz-color-danger);
  }
  ._activePopover_2xoym_688 ._removeButton_2xoym_785:active {
    background: rgba(220, 38, 38, 0.1);
    transform: scale(0.95);
  }
  ._activePopover_2xoym_688 ._removeButton_2xoym_785 svg {
    width: 20px;
    height: 20px;
  }
}
._removeButton_2xoym_785 {
  /* Remove icon */
}
._removeButton_2xoym_785 svg {
  width: 16px;
  height: 16px;
}

/* Item Number/Label */
._itemLabel_2xoym_839 {
  flex: 1;
  font-family: var(--wz-font-family-heading);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-medium);
  color: var(--wz-color-text-secondary);
  margin: 0;
}

/* ===== TEXT CONTENT AREA ===== */
._itemContent_2xoym_849 {
  width: 100%;
  /* Ensure proper text wrapping on mobile */
}
@media (max-width: 768px) {
  ._itemContent_2xoym_849 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Text Input/Textarea */
._textInput_2xoym_862 {
  width: 100%;
  min-height: 120px;
  padding: var(--wz-spacing-small);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-relaxed);
  color: var(--wz-color-text-primary);
  background: var(--wz-color-background);
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  resize: vertical;
  transition: all var(--wz-transition-fast);
}
._textInput_2xoym_862:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
._textInput_2xoym_862::placeholder {
  color: var(--wz-color-text-muted);
  font-style: italic;
}
._textInput_2xoym_862 {
  /* Progressive font sizing */
}
@media (max-width: 640px) {
  ._textInput_2xoym_862 {
    min-height: 80px;
    font-size: calc(var(--wz-font-size-body) * 0.875);
    padding: calc(var(--wz-spacing-small) * 0.75);
  }
}
@media (min-width: 641px) and (max-width: 768px) {
  ._textInput_2xoym_862 {
    min-height: 100px;
    font-size: calc(var(--wz-font-size-body) * 0.9375);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  ._textInput_2xoym_862 {
    min-height: 110px;
    font-size: var(--wz-font-size-body);
  }
}
._textInput_2xoym_862 {
  /* Large screens: Optimal readability */
}
@media (min-width: 1367px) {
  ._textInput_2xoym_862 {
    font-size: calc(var(--wz-font-size-body) * 1.0625);
    line-height: calc(var(--wz-line-height-relaxed) * 1.05);
  }
}

/* ===== ADD NEW ITEM BUTTON ===== */
._addButton_2xoym_918 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-small);
  width: 100%;
  padding: var(--wz-spacing-medium);
  margin-top: var(--wz-spacing-component);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-medium);
  color: var(--wz-color-primary);
  background: var(--wz-color-background);
  border: 2px dashed var(--wz-color-border);
  border-radius: var(--wz-border-radius-medium);
  cursor: pointer;
  transition: all var(--wz-transition-fast);
}
._addButton_2xoym_918:hover {
  border-color: var(--wz-color-primary);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}
._addButton_2xoym_918:active {
  transform: translateY(0);
}
._addButton_2xoym_918 {
  /* Add icon */
}
._addButton_2xoym_918 svg {
  width: 20px;
  height: 20px;
}

/* ===== PLACEHOLDER CONTENT ===== */
/* Removed - no longer using fancy placeholder, editor shows immediately */
/* ===== COLUMN ADD ITEM BUTTON ===== */
._addItemContainer_2xoym_474 {
  position: relative;
  margin-top: var(--wz-spacing-medium);
  opacity: 0;
  visibility: hidden;
  transition: all var(--wz-transition-fast);
  /* Mobile: Always visible */
}
@media (max-width: 768px) {
  ._addItemContainer_2xoym_474 {
    opacity: 1;
    visibility: visible;
    margin-top: calc(var(--wz-spacing-medium) * 0.75);
  }
}
._addItemContainer_2xoym_474 {
  /* Touch devices: Always visible with better spacing */
}
@media (hover: none) and (pointer: coarse) {
  ._addItemContainer_2xoym_474 {
    opacity: 1;
    visibility: visible;
    margin-top: var(--wz-spacing-medium);
  }
}

._addItemButton_2xoym_981 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-small);
  width: 100%;
  padding: var(--wz-spacing-small) var(--wz-spacing-medium);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-medium);
  color: var(--wz-color-primary);
  background: var(--wz-color-background);
  border: 1px dashed var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  cursor: pointer;
  transition: all var(--wz-transition-fast);
  /* Mobile: Larger touch target */
}
@media (max-width: 768px) {
  ._addItemButton_2xoym_981 {
    min-height: var(--wz-touch-target-min);
    padding: calc(var(--wz-spacing-small) * 1.5) var(--wz-spacing-medium);
    font-size: var(--wz-font-size-body);
    border-width: 2px;
  }
}
._addItemButton_2xoym_981 {
  /* Touch devices: Better feedback */
}
@media (hover: none) and (pointer: coarse) {
  ._addItemButton_2xoym_981:active {
    transform: scale(0.98);
    background: var(--wz-color-bg-secondary);
  }
}
._addItemButton_2xoym_981:hover {
  border-color: var(--wz-color-primary);
  background: var(--wz-color-bg-secondary);
  border-style: solid;
}
._addItemButton_2xoym_981:active {
  transform: scale(0.98);
}
._addItemButton_2xoym_981:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._addItemButton_2xoym_981:disabled:hover {
  border-style: dashed;
  background: var(--wz-color-background);
}
._addItemButton_2xoym_981 {
  /* Add icon */
}
._addItemButton_2xoym_981 svg {
  width: 14px;
  height: 14px;
}

/* ===== EMPTY STATE ===== */
._emptyState_2xoym_1041 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wz-spacing-large);
  text-align: center;
  color: var(--wz-color-text-secondary);
}
._emptyState_2xoym_1041 svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--wz-spacing-medium);
  color: var(--wz-color-text-muted);
}
._emptyState_2xoym_1041 h3 {
  font-family: var(--wz-font-family-heading);
  font-size: var(--wz-font-size-heading-small);
  font-weight: var(--wz-font-weight-semibold);
  color: var(--wz-color-text-secondary);
  margin: 0 0 var(--wz-spacing-small) 0;
}
._emptyState_2xoym_1041 p {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  color: var(--wz-color-text-muted);
  margin: 0;
  max-width: 300px;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
._visuallyHidden_2xoym_1072 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus indicators for keyboard navigation */
._dragHandle_2xoym_731:focus-visible,
._removeButton_2xoym_785:focus-visible,
._addButton_2xoym_918:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
  ._textSection_2xoym_408 {
    /* Hide all interactive elements */
  }
  ._textSection_2xoym_408 ._dragHandle_2xoym_731,
  ._textSection_2xoym_408 ._removeButton_2xoym_785,
  ._textSection_2xoym_408 ._addButton_2xoym_918,
  ._textSection_2xoym_408 ._addItemButton_2xoym_981,
  ._textSection_2xoym_408 ._itemHeader_2xoym_633 {
    display: none !important;
  }
  ._textSection_2xoym_408 {
    /* Remove all borders and backgrounds from text items */
  }
  ._textSection_2xoym_408 ._textItem_2xoym_586 {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: var(--wz-spacing-small) !important;
    padding: 0 !important;
  }
  ._textSection_2xoym_408 ._textItem_2xoym_586:hover {
    border: none !important;
    background: transparent !important;
  }
  ._textSection_2xoym_408 {
    /* Clean up text content area */
  }
  ._textSection_2xoym_408 ._itemContent_2xoym_849 {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  ._textSection_2xoym_408 {
    /* Remove styling from text inputs and show as plain text */
  }
  ._textSection_2xoym_408 ._textInput_2xoym_862 {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    font-size: var(--wz-print-font-size-base, 14px) !important;
    color: #000 !important;
    line-height: var(--wz-print-line-height-base, 1.4) !important;
  }
  ._textSection_2xoym_408 ._textInput_2xoym_862:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  ._textSection_2xoym_408 {
    /* Force single-column layout for print/PDF */
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--wz-print-section-spacing, 16px) !important;
    width: 100% !important;
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Override all column width variants */
  }
  ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--single_2xoym_461, ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--double_2xoym_464, ._textSection_2xoym_408 ._columnsContainer_2xoym_435 ._column_2xoym_435._column--triple_2xoym_467 {
    width: 100% !important;
    max-width: 100% !important;
  }
  ._textSection_2xoym_408 {
    /* Remove placeholder content styling */
  }
  ._textSection_2xoym_408 ._placeholderContent_2xoym_1173 {
    border: none !important;
    background: transparent !important;
    display: none !important; /* Hide placeholders in print */
  }
  ._textSection_2xoym_408 {
    /* Clean up add item containers */
  }
  ._textSection_2xoym_408 ._addItemContainer_2xoym_474 {
    display: none !important;
  }
  ._textSection_2xoym_408 {
    /* Ensure text flows properly for print */
  }
  ._textSection_2xoym_408 ._textContent_2xoym_552 {
    gap: var(--wz-print-base-spacing, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}/* ===== SHARED ANIMATIONS - REUSABLE ACROSS COMPONENTS ===== */
/* shared/theme/sharedAnimations.css */

/* ===== NEW ITEM HIGHLIGHT ANIMATION ===== */
/* 
 * Apply the class .wz-new-item to any element that was just added
 * It will show a subtle highlight that fades after 2 seconds
 */

@keyframes wzHighlightNew {
  0% {
    background-color: rgba(0, 0, 0, 0.08);
    box-shadow: 
      inset 0 0 0 2px rgba(0, 0, 0, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
    background-color: rgba(0, 0, 0, 0.04);
    box-shadow: 
      inset 0 0 0 1px rgba(0, 0, 0, 0.1),
      0 1px 4px rgba(0, 0, 0, 0.05);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.wz-new-item {
  animation: wzHighlightNew 2s ease-out;
  animation-fill-mode: forwards;
  position: relative;
}

/* Alternative: Slide-in with highlight */
@keyframes wzSlideInHighlight {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    background-color: rgba(0, 0, 0, 0.08);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
    background-color: rgba(0, 0, 0, 0.06);
  }
  100% {
    background-color: transparent;
  }
}

.wz-new-item-slide {
  animation: wzSlideInHighlight 2s ease-out;
  animation-fill-mode: forwards;
}

/* ===== SIDE GLOW ANIMATION ===== */
/* Shows a line on the left side that fades away */

@keyframes wzSideGlow {
  0% {
    border-left: 3px solid rgba(0, 0, 0, 0.3);
    padding-left: 12px;
  }
  100% {
    border-left: 3px solid transparent;
    padding-left: 0;
  }
}

.wz-new-item-glow {
  animation: wzSideGlow 2s ease-out;
  animation-fill-mode: forwards;
  transition: padding-left 2s ease-out;
}

/* ===== PULSE ANIMATION ===== */
/* A subtle pulse effect for attention */

@keyframes wzPulse {
  0%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.7;
  }
}

.wz-new-item-pulse {
  animation: wzPulse 1.5s ease-in-out;
}

/* ===== COLOR FLASH ANIMATION ===== */
/* Uses CSS variables for theme compatibility */

@keyframes wzColorFlash {
  0% {
    background-color: rgba(var(--wz-color-shadow, 0, 0, 0), 0.1);
  }
  100% {
    background-color: transparent;
  }
}

.wz-new-item-flash {
  animation: wzColorFlash 1.5s ease-out;
  animation-fill-mode: forwards;
}

/* ===== COMBINED ANIMATION CLASS ===== */
/* The recommended default for new items */

.wz-item-added {
  position: relative;
  animation: wzHighlightNew 2s ease-out, wzSlideInHighlight 0.3s ease-out;
  animation-fill-mode: forwards;
}

/* Optional: Add a small "NEW" badge that fades out */
.wz-item-added::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: wzFadeOut 2s ease-out forwards;
  border-radius: 2px;
}

@keyframes wzFadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ===== UTILITY CLASSES ===== */

/* Remove animation after completion to prevent re-triggering */
.wz-animation-complete {
  animation: none !important;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wz-new-item,
  .wz-new-item-slide,
  .wz-new-item-glow,
  .wz-new-item-pulse,
  .wz-new-item-flash,
  .wz-item-added {
    animation: none !important;
  }
  
  .wz-item-added::before {
    display: none;
  }
}

/* ===== LOADING STATES ===== */
/* Can be reused for loading indicators */

@keyframes wzSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wz-loading {
  animation: wzSpin 1s linear infinite;
}

/* ===== FADE TRANSITIONS ===== */
/* Reusable fade in/out animations */

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

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

.wz-fade-in {
  animation: wzFadeIn 0.3s ease-out;
}

.wz-fade-out {
  animation: wzFadeOut 0.3s ease-out;
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_1v7rk_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_1v7rk_358[data-layout-style="1"],
._wizard-container_1v7rk_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_1v7rk_358[data-layout-style="1"] ._wizard-section_1v7rk_371,
._wizard-container_1v7rk_358[style*="--wz-layout-style: 1"] ._wizard-section_1v7rk_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_1v7rk_358[data-layout-style="2"],
._wizard-container_1v7rk_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_1v7rk_358[data-layout-style="2"],
  ._wizard-container_1v7rk_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_1v7rk_358[data-layout-style="3"],
._wizard-container_1v7rk_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_1v7rk_358[data-layout-style="3"] ._wizard-section_1v7rk_371,
._wizard-container_1v7rk_358[style*="--wz-layout-style: 3"] ._wizard-section_1v7rk_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* ========================= SectionAddButton.module.scss ========================= */
/* Shared button styling for adding items across all wizard sections */
._addItemContainer_1v7rk_407 {
  display: flex;
  justify-content: center;
  padding: var(--wz-spacing-section) 0;
  margin-top: var(--wz-spacing-medium);
  width: 100%;
}
._addItemContainer_1v7rk_407 ._addButton_1v7rk_414 {
  display: flex;
  align-items: center;
  flex: 1;
}
._addItemContainer_1v7rk_407 ._addButton_1v7rk_414:hover {
  transform: translateY(-2px);
  border-color: var(--wz-color-primary);
  /* Use a standard subtle hover background */
  background: color-mix(in srgb, var(--wz-color-primary) 5%, transparent);
  box-shadow: var(--wz-shadow-small);
}
._addItemContainer_1v7rk_407 ._addButton_1v7rk_414:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._addItemContainer_1v7rk_407 ._addButton_1v7rk_414 {
  /* Reduced motion support */
}
@media (prefers-reduced-motion: reduce) {
  ._addItemContainer_1v7rk_407 ._addButton_1v7rk_414:hover {
    transform: none;
  }
}._timelineSettings_v6owb_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_v6owb_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_v6owb_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_v6owb_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_v6owb_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_v6owb_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_v6owb_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_v6owb_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_v6owb_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_v6owb_47 ._layoutGrid_v6owb_47 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_v6owb_47 ._layoutGrid_v6owb_47 {
    gap: 6px;
  }
}

._layoutOption_v6owb_58 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_v6owb_58:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_v6owb_58._selected_v6owb_78 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_v6owb_58._selected_v6owb_78 ._layoutIcon_v6owb_83 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_v6owb_58 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_v6owb_58 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_v6owb_83 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_v6owb_83 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_v6owb_83 {
    margin-bottom: 6px;
  }
  ._layoutIcon_v6owb_83 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_v6owb_120 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_v6owb_120 {
    font-size: 12px;
  }
}

._categoryManagement_v6owb_133 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._categoryList_v6owb_139 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
._categoryList_v6owb_139::-webkit-scrollbar {
  width: 6px;
}
._categoryList_v6owb_139::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._categoryList_v6owb_139::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._categoryList_v6owb_139::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._categoryList_v6owb_139 {
    max-height: 200px;
  }
}
@media (max-width: 640px) {
  ._categoryList_v6owb_139 {
    max-height: 180px;
  }
}

._categoryItem_v6owb_171 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  transition: all 0.2s ease;
}
._categoryItem_v6owb_171:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
}
@media (max-width: 640px) {
  ._categoryItem_v6owb_171 {
    padding: 10px 12px;
  }
}

._categoryHeader_v6owb_191 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

._categoryContent_v6owb_198 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

._categoryLabel_v6owb_204 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._categoryLabel_v6owb_204:hover {
  background: var(--neutral-100);
}

._categoryEditInput_v6owb_221 {
  width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  background: var(--pure-white);
  border: 1px solid var(--primary-500);
  border-radius: 4px;
  outline: none;
}
._categoryEditInput_v6owb_221:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._categoryActions_v6owb_236 {
  display: flex;
  align-items: center;
}

._addCategoryForm_v6owb_241 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
}
@media (max-width: 768px) {
  ._addCategoryForm_v6owb_241 {
    padding: 10px;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  ._addCategoryForm_v6owb_241 {
    padding: 8px;
    gap: 8px;
  }
}

._categoryNameInput_v6owb_263 {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--neutral-900);
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
}
._categoryNameInput_v6owb_263::placeholder {
  color: var(--neutral-400);
}
._categoryNameInput_v6owb_263:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._categoryNameInput_v6owb_263:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
@media (max-width: 640px) {
  ._categoryNameInput_v6owb_263 {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 14px;
  }
}

._colorPickerWrapper_v6owb_293 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

._formActions_v6owb_299 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

._visibilityControls_v6owb_305 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_v6owb_58 {
    border-width: 2px;
  }
  ._layoutOption_v6owb_58._selected_v6owb_78 {
    border-width: 3px;
  }
  ._categoryItem_v6owb_171,
  ._addCategoryForm_v6owb_241 {
    border-width: 2px;
  }
  ._categoryEditInput_v6owb_221,
  ._categoryNameInput_v6owb_263 {
    border-width: 2px;
  }
  ._categoryEditInput_v6owb_221:focus,
  ._categoryNameInput_v6owb_263:focus {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_v6owb_58,
  ._categoryItem_v6owb_171,
  ._categoryLabel_v6owb_204,
  ._categoryNameInput_v6owb_263 {
    transition: none;
  }
  ._layoutOption_v6owb_58:hover,
  ._categoryItem_v6owb_171:hover,
  ._categoryLabel_v6owb_204:hover,
  ._categoryNameInput_v6owb_263:hover {
    transform: none;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_13r81_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_13r81_358[data-layout-style="1"],
._wizard-container_13r81_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_13r81_358[data-layout-style="1"] ._wizard-section_13r81_371,
._wizard-container_13r81_358[style*="--wz-layout-style: 1"] ._wizard-section_13r81_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_13r81_358[data-layout-style="2"],
._wizard-container_13r81_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_13r81_358[data-layout-style="2"],
  ._wizard-container_13r81_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_13r81_358[data-layout-style="3"],
._wizard-container_13r81_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_13r81_358[data-layout-style="3"] ._wizard-section_13r81_371,
._wizard-container_13r81_358[style*="--wz-layout-style: 3"] ._wizard-section_13r81_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._dropdown_13r81_405 {
  position: relative;
  display: inline-block;
  width: 100%;
}

._trigger_13r81_411 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--wz-spacing-base) * 0.5) calc(var(--wz-spacing-base) * 0.75);
  background: var(--wz-timeline-background, #ffffff);
  border: 1px solid var(--wz-timeline-border-light, #e5e7eb);
  border-radius: calc(var(--wz-spacing-base) * 0.375);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--wz-font-family-body, Inter, system-ui, sans-serif);
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  font-weight: 400;
  color: var(--wz-timeline-text-primary, #111827);
}
._trigger_13r81_411:hover {
  border-color: var(--wz-timeline-border-medium, #d1d5db);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
._trigger_13r81_411:focus, ._trigger_13r81_411:focus-visible {
  outline: none;
  border-color: var(--wz-timeline-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

._selectedType_13r81_439 {
  display: flex;
  align-items: center;
  gap: calc(var(--wz-spacing-base) * 0.5);
  flex: 1;
}

._colorDot_13r81_446 {
  width: calc(var(--wz-spacing-base) * 0.75);
  height: calc(var(--wz-spacing-base) * 0.75);
  border-radius: 50%;
  border: 2px solid var(--wz-timeline-background);
  box-shadow: 0 0 0 1px var(--wz-timeline-border-light);
  flex-shrink: 0;
}

._typeName_13r81_455 {
  text-transform: capitalize;
  color: var(--wz-timeline-text-primary);
  font-weight: 500;
  font-family: var(--wz-font-family-body);
}

._chevron_13r81_462 {
  color: var(--wz-timeline-text-secondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
._chevron_13r81_462._open_13r81_467 {
  transform: rotate(180deg);
}

._menu_13r81_471 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-top: calc(var(--wz-spacing-base) * 0.25);
  background: var(--wz-timeline-background);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: calc(var(--wz-spacing-base) * 0.375);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-height: calc(var(--wz-spacing-base) * 12.5);
  overflow-y: auto;
  animation: _slideDown_13r81_1 0.2s ease;
}

@keyframes _slideDown_13r81_1 {
  from {
    opacity: 0;
    transform: translateY(calc(var(--wz-spacing-base) * -0.5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._separator_13r81_497 {
  margin: calc(var(--wz-spacing-base) * 0.25) 0;
  border: none;
  border-top: 1px solid var(--wz-timeline-border-light);
  height: 0;
}

._option_13r81_504 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: calc(var(--wz-spacing-base) * 0.5);
  width: 100%;
  padding: calc(var(--wz-spacing-base) * 0.5) calc(var(--wz-spacing-base) * 0.75);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--wz-font-family-body, Inter, system-ui, sans-serif);
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  font-weight: 400;
  text-align: left;
  color: var(--wz-timeline-text-primary, #111827);
}
._option_13r81_504:hover {
  background-color: var(--wz-timeline-background-hover, #f9fafb);
}
._option_13r81_504:focus, ._option_13r81_504:focus-visible {
  outline: none;
}
._option_13r81_504._selected_13r81_439 {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--wz-timeline-primary, #2563eb);
  font-weight: 600;
}
._option_13r81_504:first-child {
  border-top-left-radius: calc(var(--wz-spacing-base) * 0.375);
  border-top-right-radius: calc(var(--wz-spacing-base) * 0.375);
}
._option_13r81_504:last-child {
  border-bottom-left-radius: calc(var(--wz-spacing-base) * 0.375);
  border-bottom-right-radius: calc(var(--wz-spacing-base) * 0.375);
}

._addNewOption_13r81_543 {
  border-top: 1px solid var(--wz-timeline-border-light);
  color: var(--wz-timeline-text-secondary);
  font-style: italic;
}
._addNewOption_13r81_543:hover {
  background-color: var(--wz-timeline-background-hover);
  color: var(--wz-timeline-text-primary);
}

._plusIcon_13r81_553 {
  color: var(--wz-timeline-primary);
  flex-shrink: 0;
}
/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_2ug6x_359 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_2ug6x_359[data-layout-style="1"],
._wizard-container_2ug6x_359[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_2ug6x_359[data-layout-style="1"] ._wizard-section_2ug6x_372,
._wizard-container_2ug6x_359[style*="--wz-layout-style: 1"] ._wizard-section_2ug6x_372 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_2ug6x_359[data-layout-style="2"],
._wizard-container_2ug6x_359[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_2ug6x_359[data-layout-style="2"],
  ._wizard-container_2ug6x_359[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_2ug6x_359[data-layout-style="3"],
._wizard-container_2ug6x_359[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_2ug6x_359[data-layout-style="3"] ._wizard-section_2ug6x_372,
._wizard-container_2ug6x_359[style*="--wz-layout-style: 3"] ._wizard-section_2ug6x_372 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* Variables - Calculated/unique values only (aliases removed, now using --wz-* directly) */
:root {
  /* Dynamic category colors are injected by useDynamicTimelineStyles hook */
  /* Calculated values - unique to Timeline component */
  --timeline-radius: calc(var(--wz-spacing-base) * 0.5);
  --timeline-radius-pill: calc(var(--wz-spacing-base) * 1.125);
  --timeline-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --timeline-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --timeline-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base styles */
._timelineWrapper_2ug6x_418 {
  width: 100%;
  margin: 0 auto;
  padding: var(--wz-spacing-section);
  background: var(--wz-timeline-background);
  border-radius: var(--timeline-radius);
  box-shadow: var(--timeline-shadow);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-base);
  line-height: var(--wz-line-height-base);
  color: var(--wz-timeline-text-primary);
}

/* Header styles */
._header_2ug6x_432 {
  margin-bottom: var(--wz-spacing-section);
  text-align: center;
}
._header_2ug6x_432 h2 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-titles);
  color: var(--wz-timeline-text-primary);
  margin: 0;
  line-height: var(--wz-line-height-title);
}
._header_2ug6x_432 p {
  font-family: var(--wz-font-family-subtitle);
  font-size: var(--wz-font-size-subtitles);
  color: var(--wz-timeline-text-secondary);
  margin: calc(var(--wz-spacing-base) / 2) 0 0;
  line-height: var(--wz-line-height-subtitle);
}

._headerContent_2ug6x_451,
._addEventBtn_2ug6x_452 {
  display: none;
}

/* Grid View */
._gridTimeline_2ug6x_457 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--wz-spacing-base) * 18), 1fr));
  gap: calc(var(--wz-spacing-base) * 0.75);
  padding: calc(var(--wz-spacing-base) * 0.375) 0;
  margin-bottom: calc(var(--wz-spacing-base) * 1.5);
}
._gridTimeline_2ug6x_457:hover ._addButton_2ug6x_464 {
  opacity: 1 !important;
  visibility: visible !important;
}

._gridEvent_2ug6x_469 {
  position: relative;
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
  padding: calc(var(--wz-spacing-base) * 0.475);
  transition: var(--timeline-transition);
  font-family: var(--wz-font-family-body);
}

._gridHeader_2ug6x_478 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(var(--wz-spacing-base) * 0.625);
}

._gridTypeWrapper_2ug6x_485 {
  width: 100%;
  max-width: calc(var(--wz-spacing-base) * 12.5);
}

._gridDate_2ug6x_490 {
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-base);
  font-weight: 500;
}

._gridTitle_2ug6x_498 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-subtitles);
  font-weight: 600;
  line-height: var(--wz-line-height-title);
  color: var(--wz-color-text-primary);
  margin-bottom: calc(var(--wz-spacing-base) * 0.3);
}

._gridDescription_2ug6x_507 {
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  line-height: calc(var(--wz-line-height-base) * 0.95);
  margin: 0;
  word-wrap: break-word; /* ✅ ADD: Proper text wrapping for long descriptions */
  overflow-wrap: break-word;
  white-space: normal;
}

._gridActions_2ug6x_518 {
  position: absolute;
  top: calc(var(--wz-spacing-base) * 0.75);
  right: calc(var(--wz-spacing-base) * 0.75);
  opacity: 0;
  transition: var(--timeline-transition);
  z-index: 2;
}

._gridEvent_2ug6x_469:hover ._gridActions_2ug6x_518 {
  opacity: 1;
}

._gridActionBtn_2ug6x_531 {
  padding: calc(var(--wz-spacing-base) * 0.375);
  background: var(--wz-timeline-background);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 50%;
  color: var(--wz-timeline-text-muted);
  cursor: pointer;
  transition: var(--timeline-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
._gridActionBtn_2ug6x_531:hover {
  background: var(--wz-timeline-background-hover);
  color: var(--wz-timeline-text-primary);
  transform: scale(1.1);
  border-color: var(--wz-timeline-border-medium);
}
._gridActionBtn_2ug6x_531._delete_2ug6x_549:hover {
  color: #ef4444;
  border-color: #ef4444;
}
._gridActionBtn_2ug6x_531 svg {
  width: calc(var(--wz-spacing-base) * 0.875);
  height: calc(var(--wz-spacing-base) * 0.875);
}

/* Compact View */
._compactTimeline_2ug6x_559 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-spacing-base) * 0.375);
  padding: calc(var(--wz-spacing-base) * 0.375) 0;
  font-family: var(--wz-font-family-body);
  max-width: 800px;
  margin: 0 auto calc(var(--wz-spacing-base) * 2) auto;
}

._compactCard_2ug6x_569 {
  background: var(--wz-timeline-background);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
  transition: var(--timeline-transition);
  margin-right: 2.5rem;
}
._compactCard_2ug6x_569:hover {
  background: var(--wz-timeline-background-hover);
  transform: translateY(-1px);
  box-shadow: var(--timeline-shadow-hover);
  border-color: var(--wz-timeline-border-medium);
  z-index: 2;
}
._compactCard_2ug6x_569 ._eventActions_2ug6x_583 {
  flex-direction: column;
  right: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  gap: 0.125rem;
}

._compactHeader_2ug6x_591 {
  padding: calc(var(--wz-spacing-base) * 0.625);
  cursor: pointer;
  transition: var(--timeline-transition);
  position: relative;
}
._compactHeader_2ug6x_591:hover {
  background: var(--wz-timeline-background-hover);
}

._compactMain_2ug6x_601 {
  display: flex;
  align-items: center;
  gap: calc(var(--wz-spacing-base) * 0.625);
}

._expandBtn_2ug6x_607 {
  padding: 6px;
  background: none;
  border: none;
  color: var(--wz-timeline-text-muted);
  cursor: pointer;
  transition: var(--timeline-transition);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._expandBtn_2ug6x_607:hover {
  background: var(--wz-timeline-background-hover);
  color: var(--wz-timeline-text-primary);
  transform: scale(1.1);
}
._expandBtn_2ug6x_607 svg {
  width: 16px;
  height: 16px;
}

._compactContent_2ug6x_629 {
  flex: 1;
  min-width: 0;
}

._compactDate_2ug6x_634 {
  color: var(--wz-timeline-text-muted);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-base);
  margin-bottom: calc(var(--wz-spacing-base) * 0.1875);
  font-weight: 500;
}

._compactTitle_2ug6x_643 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-body);
  font-weight: 600;
  line-height: calc(var(--wz-line-height-title) * 0.95);
  color: var(--wz-timeline-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: auto;
}

._compactTypeWrapper_2ug6x_655 {
  min-width: 110px;
  max-width: 140px;
  flex-shrink: 0;
}

._compactActions_2ug6x_661 {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: var(--timeline-transition);
  z-index: 2;
}

._compactCard_2ug6x_569:hover ._compactActions_2ug6x_661 {
  opacity: 1;
}

._compactActionBtn_2ug6x_674 {
  padding: 6px;
  background: var(--wz-timeline-background);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 50%;
  color: var(--wz-timeline-text-muted);
  cursor: pointer;
  transition: var(--timeline-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
._compactActionBtn_2ug6x_674:hover {
  background: var(--wz-timeline-background-hover);
  color: var(--wz-timeline-text-primary);
  transform: scale(1.1);
  border-color: var(--wz-timeline-border-medium);
}
._compactActionBtn_2ug6x_674._delete_2ug6x_549:hover {
  color: #ef4444;
  border-color: #ef4444;
}
._compactActionBtn_2ug6x_674 svg {
  width: 14px;
  height: 14px;
}

._compactDescription_2ug6x_701 {
  padding: calc(var(--wz-spacing-base) * 0.625);
  border-top: 1px solid var(--wz-timeline-border-light);
  color: var(--wz-timeline-text-secondary);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  line-height: calc(var(--wz-line-height-base) * 0.95);
  background: var(--wz-timeline-background-hover);
  word-wrap: break-word; /* ✅ ADD: Proper text wrapping for long descriptions */
  overflow-wrap: break-word;
  white-space: normal;
}

/* Dynamic Category Colors - handled by useDynamicTimelineStyles hook */
/* Category colors are now injected as CSS custom properties: --timeline-category-{categoryId} */
/* Responsive Design */
@media (max-width: 768px) {
  ._gridTimeline_2ug6x_457 {
    grid-template-columns: 1fr;
  }
  ._gridActions_2ug6x_518,
  ._compactActions_2ug6x_661 {
    opacity: 1;
    position: static;
    margin-top: calc(var(--wz-spacing-base) * 0.5);
  }
}
._addButton_2ug6x_464 {
  display: block;
  width: 100%;
  cursor: pointer;
}

/* Settings Panel Styles */
._settingsPanel_2ug6x_735 {
  padding: 1rem;
  background: var(--wz-timeline-background);
  border-radius: var(--timeline-radius);
  max-width: 100%;
  font-family: var(--wz-font-family-body);
}

._settingsSection_2ug6x_743 {
  margin-bottom: 1.5rem;
}
._settingsSection_2ug6x_743:last-child {
  margin-bottom: 0;
}

._sectionHeader_2ug6x_750 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

._sectionTitle_2ug6x_757 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--wz-font-family-title);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wz-timeline-text-primary);
}
._sectionTitle_2ug6x_757 svg {
  color: var(--wz-timeline-primary);
}

/* Add Event Type Button - Styled like "Add Paragraph" */
._addEventTypeButton_2ug6x_772 {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background-color: transparent;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
  font-weight: 500;
}
._addEventTypeButton_2ug6x_772:hover {
  background-color: #f9fafb;
  border-color: var(--wz-timeline-primary);
  color: var(--wz-timeline-primary);
}
._addEventTypeButton_2ug6x_772:focus {
  outline: none;
  border-color: var(--wz-timeline-primary);
  box-shadow: 0 0 0 2px rgba(116, 229, 46, 0.2);
}

/* Layout Selection */
._layoutGrid_2ug6x_800 {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

._layoutOption_2ug6x_806 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--wz-timeline-background);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
  cursor: pointer;
  transition: var(--timeline-transition);
  font-family: inherit;
  text-align: left;
  width: 100%;
}
._layoutOption_2ug6x_806:hover {
  border-color: var(--wz-timeline-primary);
  background: rgba(116, 229, 46, 0.05);
}
._layoutOption_2ug6x_806._active_2ug6x_824 {
  border-color: var(--wz-timeline-primary);
  background: rgba(116, 229, 46, 0.1);
  box-shadow: 0 0 0 1px rgba(116, 229, 46, 0.3);
}

._layoutIcon_2ug6x_830 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(116, 229, 46, 0.1);
  border-radius: var(--timeline-radius);
  color: var(--wz-timeline-primary);
  flex-shrink: 0;
}
._layoutOption_2ug6x_806._active_2ug6x_824 ._layoutIcon_2ug6x_830 {
  background: var(--wz-timeline-primary);
  color: white;
}

._layoutInfo_2ug6x_846 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

._layoutName_2ug6x_853 {
  font-weight: 600;
  color: var(--wz-timeline-text-primary);
  font-size: 0.95rem;
}

._layoutDesc_2ug6x_859 {
  font-size: 0.85rem;
  color: var(--wz-timeline-text-secondary);
  line-height: 1.4;
}

/* Add Event Form */
._addEventForm_2ug6x_866 {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
}

._formRow_2ug6x_874 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._eventNameInput_2ug6x_880 {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}
._eventNameInput_2ug6x_880:focus {
  outline: none;
  border-color: var(--wz-timeline-primary);
}

._eventColorInput_2ug6x_893 {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 0;
}
._eventColorInput_2ug6x_893::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 4px;
}
._eventColorInput_2ug6x_893::-webkit-color-swatch {
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 4px;
}

._saveButton_2ug6x_912 {
  padding: 0.5rem 0.75rem;
  background: var(--wz-timeline-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--timeline-transition);
}
._saveButton_2ug6x_912:hover:not(:disabled) {
  background: var(--wz-timeline-secondary);
}
._saveButton_2ug6x_912:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._cancelButton_2ug6x_930 {
  padding: 0.5rem;
  background: none;
  color: var(--wz-timeline-text-secondary);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--timeline-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
._cancelButton_2ug6x_930:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--wz-timeline-text-primary);
}

/* Compact Color Grid */
._compactColorGrid_2ug6x_948 {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

._compactColorItem_2ug6x_954 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
  transition: var(--timeline-transition);
}
._compactColorItem_2ug6x_954:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--wz-timeline-primary);
}

._compactColorInfo_2ug6x_969 {
  display: flex;
  align-items: center;
  flex: 1;
}

._compactColorLabel_2ug6x_975 {
  font-weight: 500;
  color: var(--wz-timeline-text-primary);
  text-transform: capitalize;
  font-size: 0.8rem;
}

._colorControls_2ug6x_982 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._compactColorPreview_2ug6x_988 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--wz-timeline-border-light);
  transition: var(--timeline-transition);
}
._compactColorItem_2ug6x_954:hover ._compactColorPreview_2ug6x_988 {
  transform: scale(1.1);
}

._compactColorPicker_2ug6x_1000 {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: var(--timeline-transition);
}
._compactColorPicker_2ug6x_1000::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 4px;
}
._compactColorPicker_2ug6x_1000::-webkit-color-swatch {
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: 4px;
}
._compactColorPicker_2ug6x_1000:hover {
  transform: scale(1.1);
}

/* Compact Toggle Options */
._compactToggleGrid_2ug6x_1024 {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}

._compactToggleItem_2ug6x_1030 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--wz-timeline-border-light);
  border-radius: var(--timeline-radius);
  cursor: pointer;
  transition: var(--timeline-transition);
  font-family: inherit;
}
._compactToggleItem_2ug6x_1030:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--wz-timeline-primary);
}
._compactToggleItem_2ug6x_1030 input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--wz-timeline-primary);
  cursor: pointer;
}

._compactToggleLabel_2ug6x_1053 {
  font-weight: 500;
  color: var(--wz-timeline-text-primary);
  font-size: 0.8rem;
  cursor: pointer;
}

/* Event Action Buttons */
._eventActions_2ug6x_583 {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
}

._gridEvent_2ug6x_469:hover ._eventActions_2ug6x_583,
._compactCard_2ug6x_569:hover ._eventActions_2ug6x_583 {
  opacity: 1;
}

._eventActionBtn_2ug6x_1077 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--wz-timeline-border-light);
  background: var(--wz-timeline-background);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--wz-timeline-text-secondary);
}
._eventActionBtn_2ug6x_1077:hover {
  background: var(--wz-timeline-background-hover);
  border-color: var(--wz-timeline-border-medium);
  color: var(--wz-timeline-text-primary);
}
._eventActionBtn_2ug6x_1077:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._eventActionBtn_2ug6x_1077._moveUp_2ug6x_1099:hover {
  color: var(--wz-timeline-primary);
  border-color: var(--wz-timeline-primary);
}
._eventActionBtn_2ug6x_1077._moveDown_2ug6x_1103:hover {
  color: var(--wz-timeline-primary);
  border-color: var(--wz-timeline-primary);
}
._eventActionBtn_2ug6x_1077._delete_2ug6x_549:hover {
  color: #ef4444;
  border-color: #ef4444;
}
._eventActionBtn_2ug6x_1077 svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Category Select */
._categorySelect_2ug6x_1117 {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.8rem;
  color: var(--wz-timeline-text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
._categorySelect_2ug6x_1117:hover, ._categorySelect_2ug6x_1117:focus {
  background: var(--wz-timeline-background-hover);
  border-color: var(--wz-timeline-border-light);
  outline: none;
}

._categoryName_2ug6x_1133 {
  font-size: 0.8rem;
  color: var(--wz-timeline-text-secondary);
  text-transform: capitalize;
}

/* Add Button */
._addButton_2ug6x_464 {
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}

/* Position event actions relative to each event type */
._gridEvent_2ug6x_469 {
  position: relative;
}

._compactCard_2ug6x_569 {
  position: relative;
}

/* Read-only Type Display */
._readOnlyType_2ug6x_1157 {
  display: flex;
  align-items: center;
  gap: calc(var(--wz-spacing-base) * 0.5);
  padding: calc(var(--wz-spacing-base) * 0.375) calc(var(--wz-spacing-base) * 0.5);
  background: var(--wz-timeline-background-hover);
  border-radius: calc(var(--wz-spacing-base) * 0.25);
}

._colorDot_2ug6x_1166 {
  width: calc(var(--wz-spacing-base) * 0.75);
  height: calc(var(--wz-spacing-base) * 0.75);
  border-radius: 50%;
  border: 2px solid var(--wz-timeline-background);
  box-shadow: 0 0 0 1px var(--wz-timeline-border-light);
  flex-shrink: 0;
}

._typeName_2ug6x_1175 {
  text-transform: capitalize;
  color: var(--wz-timeline-text-primary);
  font-weight: 500;
  font-family: var(--wz-font-family-body);
  font-size: calc(var(--wz-font-size-base) * 0.875);
}

/* Enhanced Color Picker Styles */
._colorPickerWrapper_2ug6x_1184 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--timeline-radius);
  cursor: pointer;
  transition: var(--timeline-transition);
  background: transparent;
  border: 1px solid transparent;
}
._colorPickerWrapper_2ug6x_1184:hover {
  background: var(--wz-timeline-background-hover);
  border-color: var(--wz-timeline-border-light);
}

._colorPickerTrigger_2ug6x_1200 {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
._colorPickerTrigger_2ug6x_1200:focus-visible {
  outline: 2px solid var(--wz-timeline-primary);
  outline-offset: 2px;
  border-radius: var(--timeline-radius);
}

._colorValue_2ug6x_1211 {
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.75rem;
  color: var(--wz-timeline-text-secondary);
  font-weight: 500;
  letter-spacing: 0.025em;
  min-width: 4rem;
}

._pendingIndicator_2ug6x_1220 {
  color: var(--wz-timeline-primary);
  font-weight: bold;
  margin-left: 0.25rem;
  animation: _pulse_2ug6x_1 1.5s infinite;
}

@keyframes _pulse_2ug6x_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Batch Update Section */
._batchUpdateSection_2ug6x_1236 {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(116, 229, 46, 0.05);
  border: 1px solid rgba(116, 229, 46, 0.2);
  border-radius: var(--timeline-radius);
  text-align: center;
}

._batchUpdateButton_2ug6x_1245 {
  animation: _glow_2ug6x_1 2s infinite;
}

@keyframes _glow_2ug6x_1 {
  0%, 100% {
    box-shadow: 0 0 5px rgba(116, 229, 46, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(116, 229, 46, 0.5);
  }
}
/* Enhanced Form Styles */
._formRow_2ug6x_874 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  ._formRow_2ug6x_874 {
    gap: 0.5rem;
  }
}

._eventNameInput_2ug6x_880 {
  flex: 1;
  min-width: 120px;
}
._eventNameInput_2ug6x_880:focus {
  outline: 2px solid var(--wz-timeline-primary);
  outline-offset: 1px;
  border-color: var(--wz-timeline-primary);
}

/* Override addEventTypeButton for design system integration */
._addEventTypeButton_2ug6x_772 {
  margin-top: 1rem;
  background: none !important;
  border: 2px dashed var(--wz-timeline-border-medium) !important;
  color: var(--wz-timeline-text-secondary) !important;
}
._addEventTypeButton_2ug6x_772:hover {
  border-color: var(--wz-timeline-primary) !important;
  color: var(--wz-timeline-primary) !important;
  background: rgba(116, 229, 46, 0.05) !important;
}

/* Enhanced compact color item */
._compactColorItem_2ug6x_954 {
  position: relative;
}
._compactColorItem_2ug6x_954:focus-within {
  outline: 2px solid var(--wz-timeline-primary);
  outline-offset: 1px;
  border-radius: var(--timeline-radius);
}

._compactColorInfo_2ug6x_969 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

._compactColorLabel_2ug6x_975 {
  font-weight: 500;
  color: var(--wz-timeline-text-primary);
  text-transform: capitalize;
  font-size: 0.875rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Enhanced layout options */
._layoutOption_2ug6x_806:focus-visible {
  outline: 2px solid var(--wz-timeline-primary);
  outline-offset: 2px;
}

/* Responsive Design for Settings */
@media (max-width: 640px) {
  ._compactColorGrid_2ug6x_948 {
    grid-template-columns: 1fr;
  }
  ._compactToggleGrid_2ug6x_1024 {
    grid-template-columns: 1fr;
  }
  ._compactCard_2ug6x_569 {
    margin-right: 0;
  }
  ._eventActions_2ug6x_583 {
    position: static;
    opacity: 1;
    justify-content: flex-end;
    margin-top: 0.5rem;
    flex-direction: row;
    transform: none;
  }
  ._formRow_2ug6x_874 {
    flex-direction: column;
    align-items: stretch;
  }
  ._formRow_2ug6x_874 ._eventNameInput_2ug6x_880 {
    order: 1;
  }
  ._formRow_2ug6x_874 ._colorPickerWrapper_2ug6x_1184 {
    order: 2;
    justify-content: center;
  }
  ._formRow_2ug6x_874 ._addEventTypeButton_2ug6x_772 {
    order: 3;
  }
  ._colorValue_2ug6x_1211 {
    min-width: auto;
    font-size: 0.7rem;
  }
  ._compactColorPreview_2ug6x_988 {
    width: 24px;
    height: 24px;
  }
}
._timelineContainer_2ug6x_1371:hover ._addButton_2ug6x_464 {
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.2s ease;
}

/* Empty State Styles */
._emptyState_2ug6x_1378 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--wz-spacing-section);
}

._emptyStateContent_2ug6x_1386 {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

._emptyStateIcon_2ug6x_1392 {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.8;
}

._emptyStateTitle_2ug6x_1398 {
  font-family: var(--wz-font-family-heading);
  font-size: var(--wz-font-size-h4);
  font-weight: 600;
  color: var(--wz-timeline-text-primary);
  margin: 0 0 0.5rem 0;
  line-height: var(--wz-line-height-heading);
}

._emptyStateDescription_2ug6x_1407 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-base);
  color: var(--wz-timeline-text-secondary);
  line-height: var(--wz-line-height-base);
  margin: 0 0 1.5rem 0;
}

._emptyStateActions_2ug6x_1415 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
._emptyStateActions_2ug6x_1415 button {
  min-width: 200px;
}

@media (max-width: 640px) {
  ._emptyState_2ug6x_1378 {
    min-height: 250px;
    padding: var(--wz-spacing-base);
  }
  ._emptyStateIcon_2ug6x_1392 {
    font-size: 2.5rem;
  }
  ._emptyStateTitle_2ug6x_1398 {
    font-size: var(--wz-font-size-h5);
  }
  ._emptyStateDescription_2ug6x_1407 {
    font-size: var(--wz-font-size-sm);
  }
  ._emptyStateActions_2ug6x_1415 button {
    min-width: 180px;
  }
}/* ===== WIZARD COMPONENTS STYLES ===== */
/* wizard/components/Components.module.css */

/* SECTION RENDERER */
._sectionRenderer_8hshv_5 {
  position: relative;
  margin-bottom: 1rem;
}

._sectionRenderer_8hshv_5._dragging_8hshv_10 {
  opacity: 0.5;
}

._sectionHeader_8hshv_14 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid #f3f4f6;
}

._sectionInfo_8hshv_22 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

._dragHandle_8hshv_29 {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
}

._dragHandle_8hshv_29:hover {
  color: #6b7280;
}

._dragHandle_8hshv_29:active {
  cursor: grabbing;
}

._sectionMeta_8hshv_47 {
  flex: 1;
}

._sectionTitle_8hshv_51 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #111827;
}

._sectionSubtitle_8hshv_58 {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 8px;
  line-height: 1.4;
}

._sectionType_8hshv_65 {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._sectionActions_8hshv_77 {
  display: flex;
  gap: 8px;
}

._actionButton_8hshv_82 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

._actionButton_8hshv_82._enabled_8hshv_94 {
  background: #ecfdf5;
  color: #059669;
}

._actionButton_8hshv_82._disabled_8hshv_99 {
  background: #f3f4f6;
  color: #6b7280;
}

._actionButton_8hshv_82._danger_8hshv_104 {
  background: #fef2f2;
  color: #dc2626;
}

._actionButton_8hshv_82:hover {
  opacity: 0.8;
}

._sectionContent_8hshv_113 {
  padding: 20px;
}

._disabledContent_8hshv_117 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  color: #666;
}

._disabledIcon_8hshv_127 {
  width: 20px;
  height: 20px;
}

._unknownSection_8hshv_132,
._invalidSection_8hshv_133 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  background-color: #fff3f3;
  border: 1px solid #ffcdd2;
  border-radius: 0.5rem;
  color: #d32f2f;
}

._warningIcon_8hshv_145 {
  margin-right: 0.5rem;
  color: #d32f2f;
}

._dragging_8hshv_10 {
  transform: rotate(2deg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ADD SECTION MODAL */
._modalOverlay_8hshv_156 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

._modal_8hshv_156 {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

._modalHeader_8hshv_179 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

._modalHeader_8hshv_179 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

._closeButton_8hshv_194 {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

._closeButton_8hshv_194:hover {
  color: #374151;
}

._modalContent_8hshv_207 {
  padding: 24px;
}

._modalDescription_8hshv_211 {
  color: #6b7280;
  margin: 0 0 24px;
  line-height: 1.5;
}

._sectionOptions_8hshv_217 {
  display: grid;
  gap: 12px;
}

._sectionOption_8hshv_217 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

._sectionOption_8hshv_217:hover:not(._optionDisabled_8hshv_235) {
  border-color: #3b82f6;
  background: #f8faff;
}

._optionDisabled_8hshv_235 {
  opacity: 0.5;
  cursor: not-allowed;
}

._optionIcon_8hshv_245 {
  color: #3b82f6;
}

._optionInfo_8hshv_249 {
  flex: 1;
}

._optionInfo_8hshv_249 h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #111827;
}

._optionInfo_8hshv_249 p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

._optionReason_8hshv_267 {
  display: block;
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 4px;
  font-style: italic;
}

/* VALIDATION PANEL */
._validationPanel_8hshv_276 {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid;
  overflow: hidden;
}

._hasErrors_8hshv_283 {
  background: #fef2f2;
  border-color: #fca5a5;
}

._hasWarnings_8hshv_288 {
  background: #fffbeb;
  border-color: #fbbf24;
}

._validationToggle_8hshv_293 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

._hasErrors_8hshv_283 ._validationToggle_8hshv_293 {
  color: #dc2626;
}

._hasWarnings_8hshv_288 ._validationToggle_8hshv_293 {
  color: #d97706;
}

._validationDetails_8hshv_314 {
  padding: 16px;
  border-top: 1px solid;
}

._hasErrors_8hshv_283 ._validationDetails_8hshv_314 {
  border-color: #fca5a5;
}

._hasWarnings_8hshv_288 ._validationDetails_8hshv_314 {
  border-color: #fbbf24;
}

._validationGroup_8hshv_327 {
  margin-bottom: 16px;
}

._validationGroup_8hshv_327:last-child {
  margin-bottom: 0;
}

._errorTitle_8hshv_335,
._warningTitle_8hshv_336 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 8px;
}

._errorTitle_8hshv_335 {
  color: #dc2626;
}

._warningTitle_8hshv_336 {
  color: #d97706;
}

._validationList_8hshv_350 {
  margin: 0;
  padding-left: 20px;
}

._errorItem_8hshv_355,
._warningItem_8hshv_356 {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 4px;
}

._errorItem_8hshv_355 {
  color: #dc2626;
}

._warningItem_8hshv_356 {
  color: #d97706;
} /* ===== UNIVERSAL SECTION CONTAINER ===== */
/* Ensures consistent styling across edit, preview, and published modes */
._sectionContainer_op7by_3 {
  /* Base section spacing using wizard variables */
  margin-bottom: var(--wz-spacing-component, 48px);
  position: relative;
  /* Use wizard background and ensure full width */
  background: var(--wz-color-background, #ffffff);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Smooth transitions for mode changes */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Last section removes bottom margin */
}
._sectionContainer_op7by_3:last-child {
  margin-bottom: 0;
}
._sectionContainer_op7by_3 {
  /* Section content wrapper */
}
._sectionContainer_op7by_3 ._sectionContent_op7by_22 {
  position: relative;
  width: 100%;
  /* Apply wizard typography defaults */
  font-family: var(--wz-font-family-body, Inter, system-ui, sans-serif);
  font-size: var(--wz-font-size-base, 16px);
  color: var(--wz-color-text-primary, #111827);
}

/* ===== ACTIVE SECTION HIGHLIGHT ===== */
/* Shown when settings panel is open for this section (edit mode only) */
._activeHighlight_op7by_33 {
  outline: 2px solid var(--primary-300, #93c5fd);
  outline-offset: 4px;
  border-radius: 4px;
  animation: _highlightAppear_op7by_1 0.4s ease-out;
}

@keyframes _highlightAppear_op7by_1 {
  from {
    outline-color: var(--primary-400, #60a5fa);
    outline-width: 3px;
    outline-offset: 0px;
  }
  to {
    outline-color: var(--primary-300, #93c5fd);
    outline-width: 2px;
    outline-offset: 4px;
  }
}
/* ===== THEME MODE VARIANTS ===== */
/* Edit Mode - Full interactivity */
._mode--edit_op7by_54 {
  /* Edit mode can show hover states and interactions */
  /* Show all interactive elements */
}
._mode--edit_op7by_54 ._sectionContent_op7by_22 {
  /* Interactive elements visible */
}
._mode--edit_op7by_54 ._sectionContent_op7by_22 button,
._mode--edit_op7by_54 ._sectionContent_op7by_22 [role=button],
._mode--edit_op7by_54 ._sectionContent_op7by_22 ._dragHandle_op7by_63,
._mode--edit_op7by_54 ._sectionContent_op7by_22 ._settingsButton_op7by_64,
._mode--edit_op7by_54 ._sectionContent_op7by_22 ._addButton_op7by_65,
._mode--edit_op7by_54 ._sectionContent_op7by_22 ._removeButton_op7by_66 {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
._mode--edit_op7by_54 ._sectionContent_op7by_22 {
  /* Hover states for better UX */
}
._mode--edit_op7by_54 ._sectionContent_op7by_22:hover button,
._mode--edit_op7by_54 ._sectionContent_op7by_22:hover [role=button] {
  opacity: 1;
}

/* Preview Mode - Read-only with preview chrome */
._mode--preview_op7by_80 {
  /* Hide editing controls but preserve [data-section-interactive] elements (e.g. gallery expand) */
}
._mode--preview_op7by_80 ._sectionContent_op7by_22 button:not(._printButton_op7by_83):not([data-section-interactive]),
._mode--preview_op7by_80 ._sectionContent_op7by_22 [role=button]:not(._printButton_op7by_83):not([data-section-interactive]),
._mode--preview_op7by_80 ._sectionContent_op7by_22 [aria-label*=setting],
._mode--preview_op7by_80 ._sectionContent_op7by_22 [aria-label*=delete],
._mode--preview_op7by_80 ._sectionContent_op7by_22 [aria-label*=move],
._mode--preview_op7by_80 ._sectionContent_op7by_22 [aria-label*=add],
._mode--preview_op7by_80 ._sectionContent_op7by_22 ._dragHandle_op7by_63,
._mode--preview_op7by_80 ._sectionContent_op7by_22 ._settingsButton_op7by_64,
._mode--preview_op7by_80 ._sectionContent_op7by_22 ._addButton_op7by_65,
._mode--preview_op7by_80 ._sectionContent_op7by_22 ._removeButton_op7by_66,
._mode--preview_op7by_80 ._sectionContent_op7by_22 [data-rbd-drag-handle-draggable-id] {
  display: none !important;
}
._mode--preview_op7by_80 ._sectionContent_op7by_22 {
  /* Hide section controls */
}
._mode--preview_op7by_80 ._sectionContent_op7by_22 [class*=sectionControls],
._mode--preview_op7by_80 ._sectionContent_op7by_22 [class*=grip],
._mode--preview_op7by_80 ._sectionContent_op7by_22 [class*=dragHandle] {
  display: none !important;
}

/* Published Mode - Clean, minimal */
._mode--published_op7by_106 {
  /* Remove all editing infrastructure */
}
._mode--published_op7by_106 ._sectionContent_op7by_22 {
  /* Hide ALL interactive elements */
}
._mode--published_op7by_106 ._sectionContent_op7by_22 button,
._mode--published_op7by_106 ._sectionContent_op7by_22 [role=button],
._mode--published_op7by_106 ._sectionContent_op7by_22 input,
._mode--published_op7by_106 ._sectionContent_op7by_22 textarea,
._mode--published_op7by_106 ._sectionContent_op7by_22 select,
._mode--published_op7by_106 ._sectionContent_op7by_22 [contenteditable],
._mode--published_op7by_106 ._sectionContent_op7by_22 ._dragHandle_op7by_63,
._mode--published_op7by_106 ._sectionContent_op7by_22 ._settingsButton_op7by_64,
._mode--published_op7by_106 ._sectionContent_op7by_22 ._addButton_op7by_65,
._mode--published_op7by_106 ._sectionContent_op7by_22 ._removeButton_op7by_66 {
  display: none !important;
}
._mode--published_op7by_106 ._sectionContent_op7by_22 {
  /* Convert editable elements to static text */
}
._mode--published_op7by_106 ._sectionContent_op7by_22 [data-editable=true] {
  pointer-events: none;
  cursor: default;
}
._mode--published_op7by_106 {
  /* Tighter spacing for published view */
  margin-bottom: var(--wz-spacing-section, 32px);
}

/* ===== READ-ONLY STATE ===== */
._readOnly_op7by_137 {
  /* Visual indicator that this is read-only */
}
._readOnly_op7by_137 ._sectionContent_op7by_22 {
  /* Disable all interactions */
  pointer-events: none;
  user-select: text; /* Allow text selection for reading */
  /* Allow section-interactive elements to be clickable (e.g. gallery expand, lightbox) */
}
._readOnly_op7by_137 ._sectionContent_op7by_22 [data-section-interactive] {
  pointer-events: auto !important;
}
._readOnly_op7by_137 ._sectionContent_op7by_22 {
  /* Hide editing controls regardless of mode */
}
._readOnly_op7by_137 ._sectionContent_op7by_22 button:not(._printButton_op7by_83):not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 [role=button]:not(._printButton_op7by_83):not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 input:not([readonly]):not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 textarea:not([readonly]):not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 select:not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 [contenteditable=true]:not([data-section-interactive]),
._readOnly_op7by_137 ._sectionContent_op7by_22 ._dragHandle_op7by_63,
._readOnly_op7by_137 ._sectionContent_op7by_22 ._settingsButton_op7by_64,
._readOnly_op7by_137 ._sectionContent_op7by_22 ._addButton_op7by_65,
._readOnly_op7by_137 ._sectionContent_op7by_22 ._removeButton_op7by_66 {
  display: none !important;
}
._readOnly_op7by_137 ._sectionContent_op7by_22 {
  /* Style read-only inputs to look like text */
}
._readOnly_op7by_137 ._sectionContent_op7by_22 input[readonly],
._readOnly_op7by_137 ._sectionContent_op7by_22 textarea[readonly] {
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  pointer-events: none;
}
._readOnly_op7by_137 {
  /* Re-enable text interactions for content */
}
._readOnly_op7by_137 [data-content=true],
._readOnly_op7by_137 p,
._readOnly_op7by_137 h1, ._readOnly_op7by_137 h2, ._readOnly_op7by_137 h3, ._readOnly_op7by_137 h4, ._readOnly_op7by_137 h5, ._readOnly_op7by_137 h6,
._readOnly_op7by_137 span,
._readOnly_op7by_137 div[role=textbox] {
  pointer-events: auto;
  user-select: text;
}

/* ===== SECTION TYPE VARIANTS ===== */
/* Hero sections get special treatment */
._type--hero_op7by_192 {
  /* Hero sections often need full-width backgrounds */
  margin-bottom: var(--wz-hero-spacing-sections, 40px);
}
._type--hero_op7by_192 ._sectionContent_op7by_22 {
  /* Hero content can extend beyond normal bounds */
  position: relative;
}

/* Text sections get standard paragraph spacing */
._type--text_op7by_202 ._sectionContent_op7by_22 {
  /* Standard text section styling */
}
._type--text_op7by_202 ._sectionContent_op7by_22 p, ._type--text_op7by_202 ._sectionContent_op7by_22 li {
  margin-bottom: 1em;
}
._type--text_op7by_202 ._sectionContent_op7by_22 p:last-child, ._type--text_op7by_202 ._sectionContent_op7by_22 li:last-child {
  margin-bottom: 0;
}

/* Table sections need horizontal scrolling support */
/* Timeline sections may need special spacing */
._type--timeline_op7by_214 ._sectionContent_op7by_22 {
  /* Timeline-specific adjustments if needed */
}

/* FAQ sections get standard styling */
._type--faq_op7by_219 ._sectionContent_op7by_22 {
  /* FAQ-specific adjustments if needed */
}

/* Gallery sections - proper print grid handling */
._type--gallery_op7by_224 ._sectionContent_op7by_22 {
  /* Gallery-specific adjustments if needed */
}

/* ===== RESPONSIVE BEHAVIOR ===== */
@media (max-width: 768px) {
  ._sectionContainer_op7by_3 {
    /* Tighter spacing on mobile */
    margin-bottom: var(--wz-spacing-section, 32px);
  }
  ._mode--published_op7by_106 {
    /* Even tighter spacing for published mobile */
    margin-bottom: var(--wz-spacing-base, 16px);
  }
}
/* ===== PRINT STYLES ===== */
@media print {
  ._activeHighlight_op7by_33 {
    outline: none !important;
    animation: none !important;
  }
  ._sectionContainer_op7by_3 {
    /* Enhanced print formatting with better spacing control */
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    /* Page break management */
    break-inside: avoid;
    page-break-inside: avoid;
    /* Last section removes bottom margin */
  }
  ._sectionContainer_op7by_3:last-child {
    margin-bottom: 0 !important;
  }
  ._sectionContainer_op7by_3 {
    /* Ensure all sections use published mode styling when printing */
  }
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 {
    /* Hide ALL interactive and editing elements */
  }
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 button:not(._print-only_op7by_267),
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [role=button]:not(._print-only_op7by_267),
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 input:not([readonly]):not(._print-only_op7by_267),
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 textarea:not([readonly]):not(._print-only_op7by_267),
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 select:not(._print-only_op7by_267),
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [contenteditable=true],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [class*=settings],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [class*=controls],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [class*=grip],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [class*=drag],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [aria-label*=setting],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [aria-label*=delete],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [aria-label*=move],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [aria-label*=add],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 [data-rbd-drag-handle-draggable-id] {
    display: none !important;
  }
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 {
    /* Clean typography for print */
    font-size: var(--wz-print-font-size-base, 14px) !important;
    line-height: var(--wz-print-line-height-base, 1.4) !important;
    color: #000 !important;
    /* Make read-only inputs look like regular text */
  }
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 input[readonly],
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 textarea[readonly] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
  }
  /* ===== TYPE-SPECIFIC PRINT OPTIMIZATIONS ===== */
  /* Hero sections - strategic spacing and page breaks */
  ._type--hero_op7by_192 {
    page-break-after: avoid !important;
    margin-bottom: var(--wz-print-hero-spacing-sections, 24px) !important;
  }
  ._type--hero_op7by_192 ._sectionContent_op7by_22 {
    min-height: var(--wz-print-hero-min-height, 200px) !important;
  }
  /* Text sections - optimized paragraph spacing */
  ._type--text_op7by_202 {
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 {
    /* Better paragraph spacing for print */
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 p {
    margin-bottom: 10px !important;
    orphans: 2 !important;
    widows: 2 !important;
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 p:last-child {
    margin-bottom: 0 !important;
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 {
    /* Heading optimizations */
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 h1, ._type--text_op7by_202 ._sectionContent_op7by_22 h2, ._type--text_op7by_202 ._sectionContent_op7by_22 h3, ._type--text_op7by_202 ._sectionContent_op7by_22 h4, ._type--text_op7by_202 ._sectionContent_op7by_22 h5, ._type--text_op7by_202 ._sectionContent_op7by_22 h6 {
    page-break-after: avoid !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
  ._type--text_op7by_202 ._sectionContent_op7by_22 h1:first-child, ._type--text_op7by_202 ._sectionContent_op7by_22 h2:first-child, ._type--text_op7by_202 ._sectionContent_op7by_22 h3:first-child, ._type--text_op7by_202 ._sectionContent_op7by_22 h4:first-child, ._type--text_op7by_202 ._sectionContent_op7by_22 h5:first-child, ._type--text_op7by_202 ._sectionContent_op7by_22 h6:first-child {
    margin-top: 0 !important;
  }
  /* Table sections - ensure proper fit and avoid breaks */
  ._type--table_op7by_338 {
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
  }
  ._type--table_op7by_338 ._sectionContent_op7by_22 {
    overflow: visible !important;
    /* Force table to use full width efficiently */
  }
  ._type--table_op7by_338 ._sectionContent_op7by_22 table {
    width: 100% !important;
    font-size: var(--wz-print-table-font-size, 12px) !important;
  }
  ._type--table_op7by_338 ._sectionContent_op7by_22 table th, ._type--table_op7by_338 ._sectionContent_op7by_22 table td {
    font-size: inherit !important;
    line-height: 1.3 !important;
  }
  ._type--table_op7by_338 ._sectionContent_op7by_22 {
    /* Totals section optimization */
  }
  ._type--table_op7by_338 ._sectionContent_op7by_22 [class*=totals],
  ._type--table_op7by_338 ._sectionContent_op7by_22 [class*=summary] {
    font-size: var(--wz-print-font-size-base, 14px) !important;
  }
  /* Timeline sections - compact layout */
  ._type--timeline_op7by_214 {
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
  }
  ._type--timeline_op7by_214 ._sectionContent_op7by_22 {
    /* Timeline event spacing optimization */
  }
  ._type--timeline_op7by_214 ._sectionContent_op7by_22 [class*=event],
  ._type--timeline_op7by_214 ._sectionContent_op7by_22 [class*=timeline-item] {
    margin-bottom: 10px !important;
    page-break-inside: avoid !important;
  }
  ._type--timeline_op7by_214 ._sectionContent_op7by_22 {
    /* Timeline dates and content */
  }
  ._type--timeline_op7by_214 ._sectionContent_op7by_22 [class*=date] {
    font-size: var(--wz-print-font-size-small, 12px) !important;
    font-weight: 600 !important;
  }
  /* FAQ sections - question/answer spacing */
  ._type--faq_op7by_219 {
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
  }
  ._type--faq_op7by_219 ._sectionContent_op7by_22 [class*=faq-item],
  ._type--faq_op7by_219 ._sectionContent_op7by_22 [class*=question] {
    margin-bottom: var(--wz-print-base-spacing, 12px) !important;
    page-break-inside: avoid !important;
  }
  ._type--faq_op7by_219 ._sectionContent_op7by_22 [class*=question] {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    page-break-after: avoid !important;
  }
  ._type--faq_op7by_219 ._sectionContent_op7by_22 [class*=answer] {
    margin-bottom: 8px !important;
    line-height: var(--wz-print-line-height-base, 1.4) !important;
  }
  /* Pricing Tiers sections - cards grid with page break control */
  ._type--pricingTiers_op7by_400 {
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
    page-break-inside: auto !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Force grid layout for tier cards */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=tiersContainer] {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    padding-top: 0 !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Hide comparison table - cards grid used instead */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=comparisonTable],
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 table {
    display: none !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Tier card page break management */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=tierCard] {
    page-break-inside: avoid !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Badge static positioning */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=tierBadge] {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Price sizing for print */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=priceAmount] {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 1.6) !important;
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 {
    /* Feature text sizing */
  }
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=featureItem],
  ._type--pricingTiers_op7by_400 ._sectionContent_op7by_22 [class*=featuresList] li {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 0.9) !important;
    line-height: 1.3 !important;
  }
  /* Gallery sections - allow spanning pages, items avoid breaking */
  ._type--gallery_op7by_224 {
    page-break-inside: auto !important;
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 {
    /* Force all gallery layout containers to grid */
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=layout] {
    display: grid !important;
    overflow: visible !important;
    column-count: unset !important;
    grid-template-columns: repeat(var(--print-gallery-cols, 3), 1fr) !important;
    gap: 10px !important;
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 {
    /* Gallery items avoid breaking */
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=galleryItem] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 {
    /* Captions */
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=itemCaption] {
    font-size: var(--wz-print-font-size-small, 12px) !important;
    font-style: italic !important;
    text-align: center !important;
    color: #666 !important;
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 {
    /* Hide interactive elements */
  }
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=lightbox],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=expandBtn],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=itemDeleteBtn],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=itemEditOverlay],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=addMedia],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=emptyState],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=captionInput],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=carouselPrev],
  ._type--gallery_op7by_224 ._sectionContent_op7by_22 [class*=carouselNext] {
    display: none !important;
  }
  /* ===== PRINT ACCESSIBILITY & QUALITY ===== */
  /* Ensure high contrast for print */
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 {
    /* Force black text on white for maximum readability */
    color: #000 !important;
    background: transparent !important;
    /* Ensure borders are visible in print */
    border-color: #000 !important;
    /* Links should be distinguishable */
  }
  ._sectionContainer_op7by_3 ._sectionContent_op7by_22 a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  /* ===== PRINT DEBUGGING UTILITIES ===== */
  /* Uncomment for print debugging - shows section boundaries */
  /*
  .sectionContainer {
    border: 1px dashed #ccc !important;

    .sectionContent {
      border: 1px dotted #999 !important;
    }
  }
  */
}._addSectionDivider_dhcgb_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wz-spacing-md, 1rem) 0;
  margin: var(--wz-spacing-sm, 0.5rem) 0;
  position: relative;
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
._addSectionDivider_dhcgb_1:hover {
  opacity: 1;
  transform: translateY(-1px);
}
._addSectionDivider_dhcgb_1:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wz-color-primary, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

._dividerLine_dhcgb_24 {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--wz-color-border, #e5e7eb) 20%, var(--wz-color-border, #e5e7eb) 80%, transparent 100%);
  position: relative;
}

._addButton_dhcgb_31 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--wz-color-background, #ffffff);
  border: 2px solid var(--wz-color-border, #e5e7eb);
  border-radius: 50%;
  margin: 0 var(--wz-spacing-sm, 0.5rem);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
._addSectionDivider_dhcgb_1:hover ._addButton_dhcgb_31 {
  background: var(--wz-color-primary, #2563eb);
  border-color: var(--wz-color-primary, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: scale(1.1);
}
._addSectionDivider_dhcgb_1:active ._addButton_dhcgb_31 {
  transform: scale(0.95);
}

._plusIcon_dhcgb_55 {
  color: var(--wz-color-text-secondary, #64748b);
  transition: color 0.2s ease-in-out;
}
._addSectionDivider_dhcgb_1:hover ._plusIcon_dhcgb_55 {
  color: var(--wz-color-background, #ffffff);
}

._tooltip_dhcgb_63 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--wz-spacing-xs, 0.25rem);
  padding: var(--wz-spacing-xs, 0.25rem) var(--wz-spacing-sm, 0.5rem);
  background: var(--wz-color-text-primary, #1e293b);
  color: var(--wz-color-background, #ffffff);
  font-size: var(--wz-font-size-small, 0.75rem);
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
._tooltip_dhcgb_63::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--wz-color-text-primary, #1e293b);
}
._addSectionDivider_dhcgb_1:hover ._tooltip_dhcgb_63 {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}

@media (max-width: 768px) {
  ._addSectionDivider_dhcgb_1 {
    padding: var(--wz-spacing-sm, 0.5rem) 0;
  }
  ._addButton_dhcgb_31 {
    width: 28px;
    height: 28px;
  }
  ._plusIcon_dhcgb_55 {
    width: 14px;
    height: 14px;
  }
  ._tooltip_dhcgb_63 {
    font-size: var(--wz-font-size-small, 0.7rem);
    padding: 2px 6px;
  }
}
@keyframes _sectionInserted_dhcgb_1 {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
._addSectionDivider_dhcgb_1:focus-visible ._addButton_dhcgb_31 {
  outline: 2px solid var(--wz-color-primary, #2563eb);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  ._dividerLine_dhcgb_24 {
    background: linear-gradient(90deg, transparent 0%, currentColor 20%, currentColor 80%, transparent 100%);
  }
  ._addButton_dhcgb_31 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._addSectionDivider_dhcgb_1,
  ._addButton_dhcgb_31,
  ._plusIcon_dhcgb_55,
  ._tooltip_dhcgb_63 {
    transition: none;
  }
  ._addSectionDivider_dhcgb_1:hover {
    transform: none;
  }
  ._addSectionDivider_dhcgb_1:hover ._addButton_dhcgb_31 {
    transform: none;
  }
}._sheetContent_1ub2r_1 {
  max-height: fit-content;
  min-height: auto;
  display: flex;
  flex-direction: column;
  padding: var(--wz-spacing-md, 1rem) var(--wz-spacing-lg, 1.25rem);
}

._header_1ub2r_9 {
  border-bottom: 1px solid var(--wz-color-border, #e5e7eb);
  padding-bottom: var(--wz-spacing-sm, 0.5rem);
  margin-bottom: var(--wz-spacing-md, 0.75rem);
}

._title_1ub2r_15 {
  color: var(--wz-color-text-primary, #1e293b);
  font-size: var(--wz-font-size-subtitles, 1.25rem);
  font-weight: 600;
  margin: 0 0 var(--wz-spacing-xs, 0.25rem) 0;
}

._description_1ub2r_22 {
  color: var(--wz-color-text-secondary, #64748b);
  font-size: var(--wz-font-size-small, 0.875rem);
  margin: 0;
}

._content_1ub2r_28 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}

._sectionGrid_1ub2r_36 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wz-spacing-sm, 0.625rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--wz-spacing-xs, 0.375rem);
  justify-items: center;
  align-content: start;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._sectionGrid_1ub2r_36::-webkit-scrollbar {
  width: 6px;
}
._sectionGrid_1ub2r_36::-webkit-scrollbar-track {
  background: var(--wz-color-surface, #f8fafc);
  border-radius: 3px;
}
._sectionGrid_1ub2r_36::-webkit-scrollbar-thumb {
  background: var(--wz-color-border, #e5e7eb);
  border-radius: 3px;
}
._sectionGrid_1ub2r_36::-webkit-scrollbar-thumb:hover {
  background: var(--wz-color-text-secondary, #64748b);
}

._sectionCard_1ub2r_63 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--wz-spacing-sm, 0.625rem);
  padding: var(--wz-spacing-md, 1rem) var(--wz-spacing-sm, 0.75rem);
  border: 1px solid var(--wz-color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--wz-color-background, #ffffff);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease-in-out;
  position: relative;
  height: auto;
  width: 100%;
  max-width: 240px;
}
._sectionCard_1ub2r_63:hover {
  border-color: var(--wz-color-primary, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
  transform: translateY(-2px);
}
._sectionCard_1ub2r_63:focus-visible {
  outline: 2px solid var(--wz-color-primary, #2563eb);
  outline-offset: 2px;
}
._sectionCard_1ub2r_63:active {
  transform: translateY(-1px);
}
._sectionCard_1ub2r_63._disabled_1ub2r_92 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

._sectionIconContainer_1ub2r_98 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

._sectionIcon_1ub2r_98 {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--wz-color-surface, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wz-color-primary, #2563eb);
  transition: all 0.2s ease-in-out;
}
._sectionIcon_1ub2r_98 svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease-in-out;
}
._sectionCard_1ub2r_63:hover ._sectionIcon_1ub2r_98 {
  background: var(--wz-color-primary, #2563eb);
  color: var(--wz-color-background, #ffffff);
  transform: scale(1.05);
}

._sectionContent_1ub2r_128 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wz-spacing-xs, 0.25rem);
  min-width: 0;
}

._sectionName_1ub2r_137 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wz-color-text-primary, #1e293b);
  line-height: 1.3;
}

._sectionDescription_1ub2r_145 {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wz-color-text-secondary, #64748b);
  line-height: 1.4;
}

._loadingIndicator_1ub2r_152 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-xs, 0.25rem);
  margin-top: var(--wz-spacing-xs, 0.25rem);
  font-size: var(--wz-font-size-small, 0.75rem);
  color: var(--wz-color-primary, #2563eb);
}

._spinner_1ub2r_161 {
  animation: _spin_1ub2r_161 1s linear infinite;
}

@keyframes _spin_1ub2r_161 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._loadingText_1ub2r_173 {
  font-weight: 500;
}

@media (min-width: 1400px) {
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--wz-spacing-sm, 0.75rem);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
  }
}
@media (max-width: 1399px) and (min-width: 1200px) {
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wz-spacing-sm, 0.75rem);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
  }
}
@media (max-width: 1199px) and (min-width: 1024px) {
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: repeat(4, 1fr);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: repeat(3, 1fr);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
  }
}
@media (max-width: 767px) and (min-width: 481px) {
  ._sheetContent_1ub2r_1 {
    padding: var(--wz-spacing-sm, 0.75rem);
  }
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wz-spacing-sm, 0.5rem);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
    padding: var(--wz-spacing-sm, 0.5rem);
    gap: var(--wz-spacing-xs, 0.5rem);
    overflow: hidden;
  }
  ._sectionContent_1ub2r_128 {
    min-width: 0;
    overflow: hidden;
  }
  ._sectionIcon_1ub2r_98 {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  ._sectionIcon_1ub2r_98 svg {
    width: 16px;
    height: 16px;
  }
  ._sectionName_1ub2r_137 {
    font-size: 0.8125rem;
  }
  ._sectionDescription_1ub2r_145 {
    font-size: 0.6875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 480px) {
  ._sheetContent_1ub2r_1 {
    padding: var(--wz-spacing-sm, 0.625rem);
  }
  ._header_1ub2r_9 {
    padding-bottom: var(--wz-spacing-xs, 0.375rem);
    margin-bottom: var(--wz-spacing-sm, 0.5rem);
  }
  ._title_1ub2r_15 {
    font-size: 1.125rem;
  }
  ._sectionGrid_1ub2r_36 {
    grid-template-columns: 1fr;
    gap: var(--wz-spacing-sm, 0.625rem);
    padding: var(--wz-spacing-xs, 0.25rem);
  }
  ._sectionCard_1ub2r_63 {
    max-width: 100%;
    padding: var(--wz-spacing-md, 0.875rem) var(--wz-spacing-sm, 0.75rem);
    overflow: hidden;
  }
  ._sectionContent_1ub2r_128 {
    min-width: 0;
    overflow: hidden;
    gap: var(--wz-spacing-xs, 0.25rem);
  }
  ._sectionIcon_1ub2r_98 {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  ._sectionIcon_1ub2r_98 svg {
    width: 18px;
    height: 18px;
  }
  ._sectionName_1ub2r_137 {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  ._sectionDescription_1ub2r_145 {
    font-size: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
}
@media (prefers-contrast: high) {
  ._sectionCard_1ub2r_63 {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._sectionCard_1ub2r_63,
  ._sectionIcon_1ub2r_98,
  ._searchInput_1ub2r_308,
  ._categoryButton_1ub2r_309,
  ._clearSearchButton_1ub2r_310 {
    transition: none;
  }
  ._sectionCard_1ub2r_63:hover {
    transform: none;
  }
}
._errorMessage_1ub2r_317 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-xs, 0.25rem);
  padding: var(--wz-spacing-sm, 0.5rem);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: var(--wz-color-error, #dc2626);
  font-size: var(--wz-font-size-small, 0.875rem);
  margin-top: var(--wz-spacing-sm, 0.5rem);
}

._errorIcon_1ub2r_330 {
  flex-shrink: 0;
  color: var(--wz-color-error, #dc2626);
}._aiPopup_1m4qc_1 {
  position: relative;
}
._aiPopup__container_1m4qc_4 {
  position: relative;
  z-index: 11;
}
._aiPopup__overlay_1m4qc_8 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
._aiPopup__overlayBorder_1m4qc_17 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 6px solid transparent;
  background: linear-gradient(135deg, #00f0ff 0%, #a54fff 25%, #00ffc3 50%, #ff00ff 75%, #00f0ff 100%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), 0 0 60px rgba(165, 79, 255, 0.2);
}
._aiPopup__overlayBorder_1m4qc_17::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.03) 0%, rgba(165, 79, 255, 0.03) 25%, rgba(0, 255, 195, 0.03) 50%, rgba(255, 0, 255, 0.03) 75%, rgba(0, 240, 255, 0.03) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  will-change: auto;
  transform: translateZ(0);
  contain: layout style paint;
}
._aiPopup__overlayBorder_1m4qc_17 {
  will-change: auto;
  transform: translateZ(0);
}
[data-theme=dark] ._aiPopup__overlayBorder_1m4qc_17 {
  background: linear-gradient(135deg, #00f0ff 0%, #a54fff 25%, #00ffc3 50%, #ff00ff 75%, #00f0ff 100%) border-box;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.4), 0 0 80px rgba(165, 79, 255, 0.3);
}
[data-theme=dark] ._aiPopup__overlayBorder_1m4qc_17::before {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, rgba(165, 79, 255, 0.05) 25%, rgba(0, 255, 195, 0.05) 50%, rgba(255, 0, 255, 0.05) 75%, rgba(0, 240, 255, 0.05) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-contrast: high) {
  ._aiPopup__overlayBorder_1m4qc_17 {
    border: 6px solid #0000ff;
    background: none;
    mask: none;
    -webkit-mask: none;
    box-shadow: none;
  }
  ._aiPopup__overlayBorder_1m4qc_17::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._aiPopup__overlayBorder_1m4qc_17 {
    will-change: auto;
  }
  ._aiPopup__overlayBorder_1m4qc_17::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
._aiPopup__toggle_1m4qc_80 {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  border: none;
}
._aiPopup__toggle--active_1m4qc_94 {
  background-color: #7c3aed;
  color: white;
}
._aiPopup__toggle--active_1m4qc_94:hover {
  background-color: #6d28d9;
}
._aiPopup__toggle--active_1m4qc_94 ._aiPopup__toggleIcon_1m4qc_101 {
  color: white;
}
._aiPopup__toggle--inactive_1m4qc_104 {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}
._aiPopup__toggle--inactive_1m4qc_104:hover {
  background-color: #f9fafb;
}
._aiPopup__toggle--inactive_1m4qc_104 ._aiPopup__toggleIcon_1m4qc_101 {
  color: #7c3aed;
}
._aiPopup__toggle--topRight_1m4qc_115 {
  top: 1rem;
  right: 1rem;
}
._aiPopup__toggle--topLeft_1m4qc_119 {
  top: 1rem;
  left: 1rem;
}
._aiPopup__toggle--bottomRight_1m4qc_123 {
  bottom: 1rem;
  right: 1rem;
}
._aiPopup__toggle--bottomLeft_1m4qc_127 {
  bottom: 1rem;
  left: 1rem;
}
@media (max-width: 640px) {
  ._aiPopup__toggleText_1m4qc_132 {
    display: none;
  }
}
._aiPopup__toggleTextMobile_1m4qc_136 {
  display: none;
}
@media (max-width: 640px) {
  ._aiPopup__toggleTextMobile_1m4qc_136 {
    display: inline;
  }
}
._aiPopup__toolbar_1m4qc_144 {
  position: fixed;
  z-index: 50;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  animation: _fadeIn_1m4qc_1 0.2s ease-out, _slideInFromBottom_1m4qc_1 0.2s ease-out;
  transform: translateX(-50%);
  max-width: 360px;
  width: 100%;
}
._aiPopup__toolbarInner_1m4qc_161 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}
._aiPopup__toolbarHeader_1m4qc_166 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  padding-right: 0.25rem;
}
._aiPopup__toolbarBadge_1m4qc_174 {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  background-color: #eff6ff;
  border-radius: 0.35rem;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
}
._aiPopup__toolbarAction_1m4qc_184 {
  width: 100%;
  justify-content: flex-start;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid var(--neutral-200, #e5e7eb) !important;
  box-shadow: none !important;
}
._aiPopup__toolbarAction_1m4qc_184:hover {
  border-color: var(--primary-200, #bfdbfe) !important;
  background-color: var(--primary-50, #eff6ff) !important;
}
._aiPopup__toolbarActionIcon_1m4qc_198 {
  margin-right: 0.25rem;
}
._aiPopup__toolbarClose_1m4qc_201 {
  padding: 0.25rem;
  color: #9ca3af;
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 0.25rem;
  position: absolute;
  top: -2px;
  right: -2px;
}
._aiPopup__toolbarClose_1m4qc_201:hover {
  color: #4b5563;
  background-color: #f3f4f6;
}
._aiPopup__toolbarContextToggle_1m4qc_218 {
  padding: 4px 8px 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 4px;
}
._aiPopup__toolbarContextLabel_1m4qc_223 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}
._aiPopup__toolbarContextLabel_1m4qc_223:hover {
  color: #374151;
}
._aiPopup__toolbarContextCheckbox_1m4qc_235 {
  width: 14px;
  height: 14px;
  accent-color: #3b82f6;
  cursor: pointer;
}
._aiPopup__toolbar--stacked_1m4qc_241 {
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 92vw;
  padding: 0.6rem 0.7rem;
}
._aiPopup__toolbar--stacked_1m4qc_241 ._aiPopup__toolbarInner_1m4qc_161 {
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
._aiPopup__toolbar--stacked_1m4qc_241 ._aiPopup__toolbarBadge_1m4qc_174 {
  width: auto;
}
._aiPopup__toolbar--stacked_1m4qc_241 ._aiPopup__toolbarAction_1m4qc_184 {
  width: 100%;
  justify-content: flex-start;
  padding: 0.5rem 0.65rem;
}
._aiPopup__toolbar--stacked_1m4qc_241 ._aiPopup__toolbarClose_1m4qc_201 {
  position: relative;
  top: 0;
  right: 0;
}
._aiPopup__modal_1m4qc_264 {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  animation: _fadeIn_1m4qc_1 0.2s ease-out;
}
._aiPopup__modalContent_1m4qc_275 {
  background-color: var(--pure-white);
  color: var(--neutral-900);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 42rem;
  max-height: 90vh;
  overflow: hidden;
  animation: _slideInFromBottom_1m4qc_1 0.3s ease-out;
}
._aiPopup__modalHeader_1m4qc_286 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--neutral-200);
}
._aiPopup__modalHeaderContent_1m4qc_293 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
._aiPopup__modalHeaderIcon_1m4qc_298 {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--primary-100);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-600);
}
._aiPopup__modalHeaderText_1m4qc_308 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}
._aiPopup__modalHeaderText_1m4qc_308 ._meta_1m4qc_314 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neutral-500);
  margin-top: 0.25rem;
}
._aiPopup__modalHeaderText_1m4qc_308 ._meta_1m4qc_314 ._capitalize_1m4qc_322 {
  text-transform: capitalize;
}
._aiPopup__modalCloseButton_1m4qc_325 {
  padding: 0.5rem;
  color: var(--neutral-400);
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
._aiPopup__modalCloseButton_1m4qc_325:hover {
  color: var(--neutral-600);
  background-color: var(--neutral-100);
}
._aiPopup__modalBody_1m4qc_338 {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 60vh;
}
._aiPopup__modalContextToggle_1m4qc_343 {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--neutral-50);
}
._aiPopup__modalContextLabel_1m4qc_350 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--neutral-600);
  cursor: pointer;
  user-select: none;
}
._aiPopup__modalContextLabel_1m4qc_350:hover {
  color: var(--neutral-800);
}
._aiPopup__modalContextCheckbox_1m4qc_362 {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-500);
  cursor: pointer;
}
._aiPopup__modalContext_1m4qc_343 {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #1d4ed8;
}
._aiPopup__modalContext_1m4qc_343 strong {
  font-weight: 600;
}
._aiPopup__modalDiff_1m4qc_380 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._aiPopup__modalDiffSection_1m4qc_385 {
  border-radius: 0.5rem;
  padding: 1rem;
}
._aiPopup__modalDiffSection--original_1m4qc_389 {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}
._aiPopup__modalDiffSection--new_1m4qc_393 {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}
._aiPopup__modalDiffSectionHeader_1m4qc_397 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
._aiPopup__modalDiffSectionHeaderDot_1m4qc_403 {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
._aiPopup__modalDiffSectionHeaderDot--original_1m4qc_408 {
  background-color: #ef4444;
}
._aiPopup__modalDiffSectionHeaderDot--new_1m4qc_411 {
  background-color: #22c55e;
}
._aiPopup__modalDiffSectionHeaderLabel_1m4qc_414 {
  font-size: 0.875rem;
  font-weight: 500;
}
._aiPopup__modalDiffSectionHeaderLabel--original_1m4qc_418 {
  color: #b91c1c;
}
._aiPopup__modalDiffSectionHeaderLabel--new_1m4qc_421 {
  color: #15803d;
}
._aiPopup__modalDiffSectionContent_1m4qc_424 {
  color: var(--neutral-800);
  line-height: 1.6;
}
._aiPopup__modalOriginal_1m4qc_428 {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
}
._aiPopup__modalOriginalHeader_1m4qc_434 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--neutral-50);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--neutral-200);
}
._aiPopup__modalOriginalLabel_1m4qc_442 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
._aiPopup__modalOriginalContent_1m4qc_449 {
  padding: 1rem;
  background-color: var(--neutral-50);
  color: var(--neutral-500);
  line-height: 1.6;
  font-style: italic;
}
._aiPopup__modalWordCount_1m4qc_456 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-400);
  background-color: var(--neutral-100);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
._aiPopup__modalWordCountDiff_1m4qc_464 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-500);
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: var(--neutral-100);
}
._aiPopup__modalVariations_1m4qc_473 {
  margin-top: 1.5rem;
}
._aiPopup__modalVariationsHeader_1m4qc_476 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--primary-600);
  font-size: 0.875rem;
  font-weight: 600;
}
._aiPopup__modalVariationsList_1m4qc_485 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
._aiPopup__modalVariationItem_1m4qc_490 {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--neutral-200);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--pure-white);
}
._aiPopup__modalVariationItem_1m4qc_490:hover {
  border-color: var(--primary-300);
  background-color: var(--primary-50);
}
._aiPopup__modalVariationItem_1m4qc_490:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
._aiPopup__modalVariationItem--selected_1m4qc_509 {
  border-color: var(--primary-600);
  background-color: var(--primary-100);
}
._aiPopup__modalVariationItem--selected_1m4qc_509:hover {
  border-color: var(--primary-600);
  background-color: var(--primary-100);
}
._aiPopup__modalVariationRadio_1m4qc_517 {
  display: flex;
  align-items: flex-start;
  padding-top: 0.25rem;
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--neutral-300);
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--pure-white);
  transition: all 0.15s ease;
  position: relative;
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--primary-600);
  transition: transform 0.15s ease;
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio]:hover {
  border-color: var(--primary-400);
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio]:checked {
  border-color: var(--primary-600);
  background-color: var(--pure-white);
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
._aiPopup__modalVariationRadio_1m4qc_517 input[type=radio]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-100);
}
._aiPopup__modalVariationContent_1m4qc_561 {
  flex: 1;
}
._aiPopup__modalVariationLabel_1m4qc_564 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
._aiPopup__modalVariationText_1m4qc_572 {
  color: var(--neutral-800);
  line-height: 1.6;
}
._aiPopup__modalArrow_1m4qc_576 {
  display: flex;
  justify-content: center;
}
._aiPopup__modalArrowInner_1m4qc_580 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--neutral-100);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  color: var(--neutral-500);
}
._aiPopup__modalActions_1m4qc_589 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--neutral-200);
  background-color: var(--neutral-50);
}
@media (min-width: 640px) {
  ._aiPopup__modalActions_1m4qc_589 {
    flex-direction: row;
  }
}
._aiPopup__modalActionButton_1m4qc_602 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}
._aiPopup__modalActionButton--reject_1m4qc_615 {
  background-color: var(--pure-white);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
}
._aiPopup__modalActionButton--reject_1m4qc_615:hover {
  background-color: var(--neutral-50);
}
._aiPopup__modalActionButton--accept_1m4qc_623 {
  background-color: var(--primary-600);
  color: var(--pure-white);
}
._aiPopup__modalActionButton--accept_1m4qc_623:hover:not(:disabled) {
  background-color: var(--primary-700);
}
._aiPopup__modalActionButton--accept_1m4qc_623:disabled {
  background-color: var(--neutral-300);
  cursor: not-allowed;
  opacity: 0.6;
}
._aiPopup__modalHint_1m4qc_635 {
  display: none;
  padding: 0 1.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--neutral-500);
}
@media (min-width: 640px) {
  ._aiPopup__modalHint_1m4qc_635 {
    display: block;
  }
}
._aiPopup__modalHint_1m4qc_635 kbd {
  padding: 0.125rem 0.25rem;
  background-color: var(--neutral-200);
  color: var(--neutral-700);
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
._aiPopup__processingOverlay_1m4qc_654 {
  position: fixed;
  inset: 0;
  z-index: 51;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: _fadeIn_1m4qc_1 0.15s ease-out;
}
@media (max-width: 640px) {
  ._aiPopup__processingOverlay_1m4qc_654 {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
}
._aiPopup__processingContent_1m4qc_672 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 2.5rem;
  background: var(--pure-white);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
._aiPopup__processingSpinner_1m4qc_682 {
  color: var(--primary-600);
  animation: _spin_1m4qc_1 1s linear infinite;
}
._aiPopup__processingText_1m4qc_686 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral-700);
}
._aiPopup__customPromptBackdrop_1m4qc_691 {
  position: fixed;
  inset: 0;
  z-index: 49;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: _fadeIn_1m4qc_1 0.2s ease-out;
  cursor: pointer;
}
@media (max-width: 640px) {
  ._aiPopup__customPromptBackdrop_1m4qc_691 {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}
._aiPopup__customPrompt_1m4qc_691 {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pure-white);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--neutral-300);
  padding: 1.5rem;
  color: var(--neutral-900);
  width: 90vw;
  max-width: 550px;
  max-height: 85vh;
  overflow-y: auto;
  animation: _fadeIn_1m4qc_1 0.2s ease-out, _scaleIn_1m4qc_1 0.2s ease-out;
}
@media (max-width: 640px) {
  ._aiPopup__customPrompt_1m4qc_691 {
    width: 95vw;
    max-height: 90vh;
    padding: 1rem;
    border-radius: 0.5rem;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  ._aiPopup__customPrompt_1m4qc_691 {
    width: 85vw;
    max-width: 500px;
  }
}
._aiPopup__customPromptHeader_1m4qc_739 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
._aiPopup__customPromptHeaderContent_1m4qc_745 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
._aiPopup__customPromptHeaderContent_1m4qc_745 h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 0.25rem 0;
}
@media (max-width: 640px) {
  ._aiPopup__customPromptHeaderContent_1m4qc_745 h4 {
    font-size: 0.9375rem;
  }
}
._aiPopup__customPromptHeaderContent_1m4qc_745 p {
  font-size: 0.875rem;
  color: var(--neutral-500);
  margin: 0;
}
@media (max-width: 640px) {
  ._aiPopup__customPromptHeaderContent_1m4qc_745 p {
    font-size: 0.8125rem;
  }
}
._aiPopup__customPromptIcon_1m4qc_771 {
  color: #7c3aed;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
._aiPopup__customPromptClose_1m4qc_776 {
  padding: 0.25rem;
  color: var(--neutral-400);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
._aiPopup__customPromptClose_1m4qc_776:hover {
  color: var(--neutral-600);
  background-color: var(--neutral-100);
}
._aiPopup__customPromptOriginal_1m4qc_789 {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 0.5rem;
  padding: 0.875rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
._aiPopup__customPromptOriginal_1m4qc_789 strong {
  display: block;
  color: var(--neutral-700);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
._aiPopup__customPromptOriginalText_1m4qc_803 {
  color: var(--neutral-500);
  font-style: italic;
  line-height: 1.5;
}
._aiPopup__customPromptInfo_1m4qc_808 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #1e40af;
}
._aiPopup__customPromptInfo_1m4qc_808 svg {
  flex-shrink: 0;
}
._aiPopup__customPromptInput_1m4qc_823 {
  margin-bottom: 0.75rem;
}
._aiPopup__customPromptTextarea_1m4qc_826 {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  border: 2px solid var(--neutral-200);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.2s ease;
  background-color: var(--pure-white);
  color: var(--neutral-900);
}
._aiPopup__customPromptTextarea_1m4qc_826:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
._aiPopup__customPromptTextarea_1m4qc_826::placeholder {
  color: var(--neutral-400);
}
._aiPopup__customPromptCounter_1m4qc_848 {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--neutral-500);
}
._aiPopup__customPromptCounter--warning_1m4qc_855 {
  color: var(--warning-500);
  font-weight: 500;
}
._aiPopup__customPromptExamples_1m4qc_859 {
  margin-bottom: 1rem;
}
._aiPopup__customPromptExamplesToggle_1m4qc_862 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: var(--primary-600);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}
._aiPopup__customPromptExamplesToggle_1m4qc_862:hover {
  background: var(--primary-100);
  border-color: var(--primary-300);
}
._aiPopup__customPromptExamplesToggle_1m4qc_862 svg {
  flex-shrink: 0;
}
._aiPopup__customPromptExamplesList_1m4qc_885 {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--neutral-50);
  border-radius: 0.375rem;
}
._aiPopup__customPromptExampleItem_1m4qc_895 {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.75rem;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 0.2s ease;
}
._aiPopup__customPromptExampleItem_1m4qc_895:hover {
  background: var(--neutral-50);
  border-color: var(--primary-300);
  color: var(--primary-600);
}
._aiPopup__customPromptActions_1m4qc_913 {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
._aiPopup__customPromptAction_1m4qc_913 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}
._aiPopup__customPromptAction--cancel_1m4qc_932 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
}
._aiPopup__customPromptAction--cancel_1m4qc_932:hover {
  background: var(--neutral-50);
}
._aiPopup__customPromptAction--generate_1m4qc_940 {
  background: var(--primary-600);
  color: var(--pure-white);
}
._aiPopup__customPromptAction--generate_1m4qc_940:hover:not(:disabled) {
  background: var(--primary-700);
}
._aiPopup__customPromptAction--generate_1m4qc_940:disabled {
  background: var(--neutral-300);
  cursor: not-allowed;
  opacity: 0.6;
}
._aiPopup__customPromptAction--generate_1m4qc_940 svg {
  animation: _pulse_1m4qc_1 2s ease-in-out infinite;
}
._aiPopup__customPromptHint_1m4qc_955 {
  text-align: center;
  font-size: 0.75rem;
  color: var(--neutral-500);
}
._aiPopup__customPromptHint_1m4qc_955 kbd {
  padding: 0.125rem 0.375rem;
  background-color: var(--neutral-200);
  color: var(--neutral-700);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-family: monospace;
}

@keyframes _fadeIn_1m4qc_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideInFromBottom_1m4qc_1 {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _spin_1m4qc_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes _pulse_1m4qc_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes _scaleIn_1m4qc_1 {
  from {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}/* RenderSections.module.css */
/* Container for all wizard sections - applies user-controllable page width and document-style separation */
/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */

  --wz-font-family-primary: Inter, system-ui, sans-serif;      /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif;    /* Body text, paragraphs (user-adjustable) */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary);       /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary);  /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary);     /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary);      /* Body text uses secondary font */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem;       /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem;  /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem;         /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem;    /* Labels, captions, metadata (user-adjustable) */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px;              /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px;     /* Small headings in specialized contexts */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem;   /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem;  /* 14px - Small */
  --wz-font-size-md: 1rem;      /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem;   /* 20px - Large */
  --wz-font-size-xl: 1.5rem;    /* 24px - Extra large */
  --wz-font-size-2xl: 2rem;     /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem;   /* 40px - 3x Extra large */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5;       /* Standard body text */
  --wz-line-height-title: 1.2;      /* Tight for large headings */
  --wz-line-height-subtitle: 1.4;   /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6;    /* Extra readable for long-form */

  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600;     /* Semibold for titles */
  --wz-font-weight-subtitles: 500;  /* Medium for subtitles */
  --wz-font-weight-body: 400;       /* Regular for body */
  --wz-font-weight-small: 400;      /* Regular for small text */

  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2;     /* Matches title style */
  --wz-line-height-subtitles: 1.4;  /* Matches subtitle style */
  --wz-line-height-body: 1.5;       /* Matches body style */
  --wz-line-height-small: 1.4;      /* Matches small text style */

  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */

  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px;     /* Controls overall document width */

  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem;     /* Horizontal padding inside container */

  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem;       /* Gap between wizard sections */

  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1;             /* Content arrangement pattern */

  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px;    /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px;    /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px;   /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px;   /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px;   /* Extra large: major component separation */
  --wz-spacing-2xl: 48px;  /* 2x Extra large: between major sections */

  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md);        /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm);       /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg);      /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl);       /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl);  /* Legacy: was 48px */

  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);

  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb;          /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff;       /* Page/section background */
  --wz-color-text: #111827;             /* Main body text color */

  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text);    /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text);  /* Alias for main text */
  --wz-color-text-muted: #9ca3af;                   /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280;                /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db;                       /* Default border color */
  --wz-color-border-light: #e5e7eb;                 /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af;                 /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa;                 /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef;                     /* Background on hover state */
  --wz-color-shadow: 0, 0, 0;                       /* RGB values for rgba() shadows */

  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text);       /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary);       /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888;                     /* DEPRECATED: Not used by any section */

  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */

  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05);           /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1);      /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1);     /* Modal/dropdown elevation */

  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease;     /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease;    /* Standard animations */

  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px;              /* Subtle rounding */
  --wz-radius-md: 8px;              /* Standard card rounding */
  --wz-radius-lg: 12px;             /* Prominent rounding */
  --wz-border-radius-small: 4px;    /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px;   /* Legacy alias for radius-md */

  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981;      /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b;      /* Amber - caution, pending states */
  --wz-color-error: #ef4444;        /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444;       /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6;         /* Blue - informational messages */

  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background);     /* Card surfaces */
  --wz-color-background-subtle: #f9fafb;                      /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover);      /* Alias for hover background */

  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1;     /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1;      /* Mobile column count */
  --wz-grid-gap: 24px;              /* Gap between grid items */

  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px;    /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px;    /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px;  /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px;     /* Wide screen breakpoint */

  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px;          /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px;  /* Comfortable touch target */

  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75;   /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875;  /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1;     /* 100% spacing on desktop */

  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */

  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5;        /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5;     /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1;           /* Body uses user's body size as-is */

  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px;       /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px;  /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px;       /* Spacing between hero content sections */

  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent;   /* Logo background color */
  --wz-hero-logo-bg-opacity: 0;           /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px;      /* Logo border radius */
  --wz-hero-logo-shadow: none;            /* Logo shadow */

  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0;       /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0;           /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px;            /* Minimum hero section height */

  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */

  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb;          /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827;     /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280;   /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af;       /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb;     /* Light border */
  --wz-timeline-border-medium: #d1d5db;    /* Medium border */
  --wz-timeline-background: #ffffff;       /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */

  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626;        /* Red for milestones */
  --wz-timeline-meeting: #2563eb;          /* Blue for meetings */
  --wz-timeline-email: #7c3aed;            /* Purple for emails */
  --wz-timeline-report: #059669;           /* Green for reports */
  --wz-timeline-deliverable: #ea580c;      /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d;          /* Pink for kickoffs */
  --wz-timeline-review: #0891b2;           /* Cyan for reviews */
  --wz-timeline-default: #6b7280;          /* Gray for default/other */

  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */

  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px;                   /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px;        /* Space between question and answer */
  --wz-faq-internal-padding: 20px;               /* Internal padding for FAQ items */

  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1;             /* Question font size relative to body */
  --wz-faq-question-weight: 600;                 /* Question font weight (semibold) */

  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95;              /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85;                 /* Answer text opacity */

  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px;                      /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1;                /* Icon scale on hover */
  --wz-faq-border-width: 1px;                    /* FAQ item border width */
  --wz-faq-border-radius: 8px;                   /* FAQ item border radius */

  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s;            /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */

  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light);        /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary);          /* Expanded item border */

}
/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_14xsu_1 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}
/* Layout Style 1: Center Layout (Default) */
._wizard-container_14xsu_1[data-layout-style="1"],
._wizard-container_14xsu_1[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}
._wizard-container_14xsu_1[data-layout-style="1"] ._wizard-section_14xsu_1,
._wizard-container_14xsu_1[style*="--wz-layout-style: 1"] ._wizard-section_14xsu_1 {
  margin-bottom: var(--wz-section-spacing);
}
/* Layout Style 2: Split Layout */
._wizard-container_14xsu_1[data-layout-style="2"],
._wizard-container_14xsu_1[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}
@media (max-width: 768px) {
  ._wizard-container_14xsu_1[data-layout-style="2"],
  ._wizard-container_14xsu_1[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_14xsu_1[data-layout-style="3"],
._wizard-container_14xsu_1[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}
._wizard-container_14xsu_1[data-layout-style="3"] ._wizard-section_14xsu_1,
._wizard-container_14xsu_1[style*="--wz-layout-style: 3"] ._wizard-section_14xsu_1 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}
._sectionsContainer_14xsu_6 {
  /* User-controllable container width via Wizard Settings */
  /* Page Width options: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  max-width: var(--wz-container-width);

  /* Document-style margin (centered with breathing room when enabled) */
  margin: var(--wz-document-margin, 0 auto);
  width: 100%;

  /* Document background (white or user-configured color) */
  background: var(--wz-color-background, #ffffff);

  /* Document-style shadow for visual separation (PDF-like appearance) */
  box-shadow: var(--wz-document-shadow, none);

  /* Subtle border radius for polished document appearance */
  border-radius: calc(var(--wz-spacing-base, 1rem) * 0.5);

  /* Base padding to prevent content touching edges */
  padding-left: 1rem;
  padding-right: 1rem;

  /* Vertical padding for document-style spacing */
  padding-top: calc(var(--wz-spacing-base, 1rem) * 1.5);
  padding-bottom: calc(var(--wz-spacing-base, 1rem) * 1.5);

  /* Responsive padding adjustments */
  @media (min-width: 768px) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: calc(var(--wz-spacing-base, 1rem) * 2);
    padding-bottom: calc(var(--wz-spacing-base, 1rem) * 2);
  }
}
/* Empty state — minimalist centered prompt to add the first section */
._emptyState_14xsu_42 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem 1rem;
  min-height: calc(100vh - 180px);
}
._emptyStateTitle_14xsu_53 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wz-color-text-primary, #1e293b);
}
._emptyStateMessage_14xsu_60 {
  margin: 0 0 0.5rem;
  max-width: 440px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wz-color-text-secondary, #64748b);
}
._title_nop7l_1 {
  font-family: var(--wz-font-family-primary, Inter, system-ui, sans-serif);
  font-size: calc(var(--wz-font-size-titles, 3rem) * var(--hero-title-size, 1.5));
  font-weight: 700;
  line-height: 1.15;
  color: var(--hero-title-color, var(--wz-color-primary, #1a1a1a));
  margin: 0;
  transition: font-size 0.3s ease;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._subtitle_nop7l_14 {
  font-family: var(--wz-font-family-secondary, Inter, system-ui, sans-serif);
  font-size: var(--hero-subtitle-size, calc(var(--wz-font-size-subtitles, 1.5rem) * 1));
  font-weight: 400;
  line-height: 1.4;
  color: var(--hero-subtitle-color, var(--wz-color-text, #111827));
  margin: 0;
  transition: font-size 0.3s ease;
  opacity: 0.9;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

._logo_nop7l_28 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-area: logo;
}
._logo_nop7l_28[data-position=left] {
  align-self: flex-start;
  justify-self: start;
}
._logo_nop7l_28[data-position=center] {
  align-self: center;
  justify-self: center;
}
._logo_nop7l_28[data-position=right] {
  align-self: flex-end;
  justify-self: end;
}
._logo_nop7l_28 img {
  display: block;
  max-width: 100%;
  height: auto;
}

._dateField_nop7l_52,
._proposalNumber_nop7l_53 {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
._dateField_nop7l_52 ._label_nop7l_58,
._proposalNumber_nop7l_53 ._label_nop7l_58 {
  font-family: var(--wz-font-family-secondary, Inter, system-ui, sans-serif);
  font-size: var(--wz-font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wz-color-text-tertiary, #718096);
  line-height: 1;
  margin: 0;
}
._dateField_nop7l_52,
._proposalNumber_nop7l_53 {
  font-family: var(--wz-font-family-secondary, Inter, system-ui, sans-serif);
  font-size: var(--wz-font-size-sm, 0.875rem);
  font-weight: 400;
  color: var(--wz-color-text-secondary, #2d3748);
  line-height: 1.3;
}
._dateField_nop7l_52 [class*=inlineEditor],
._dateField_nop7l_52 [class*=InlineEditor],
._dateField_nop7l_52 input,
._dateField_nop7l_52 span:not(._label_nop7l_58),
._proposalNumber_nop7l_53 [class*=inlineEditor],
._proposalNumber_nop7l_53 [class*=InlineEditor],
._proposalNumber_nop7l_53 input,
._proposalNumber_nop7l_53 span:not(._label_nop7l_58) {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
}

._formLabel_nop7l_91 {
  display: block;
  font-family: var(--wz-font-family-secondary, Inter, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wz-color-text, #111827);
  margin-bottom: 8px;
}
._formLabel_nop7l_91 ._required_nop7l_99 {
  color: var(--wz-color-error, #ef4444);
  margin-left: 4px;
}._contactCard_o0qhe_1 {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 12px;
  width: min(100%, var(--hero-side-width, 260px));
  /* Print optimization - remove all visual styling */
}
@media print {
  ._contactCard_o0qhe_1 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }
}
._contactCard_o0qhe_1 ._contactLabel_o0qhe_20 {
  font-family: var(--wz-font-family-secondary, Inter, system-ui, sans-serif);
  font-size: var(--wz-font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wz-color-text-tertiary, #718096);
  line-height: 1;
  margin: 0;
  margin-bottom: 0.2rem;
  /* Print optimization */
}
@media print {
  ._contactCard_o0qhe_1 ._contactLabel_o0qhe_20 {
    color: #666 !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
}
._contactCard_o0qhe_1 ._contactName_o0qhe_39 {
  font-size: var(--wz-font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--wz-color-primary, #1a1a1a);
  line-height: 1.15;
  margin: 0;
  /* Print optimization */
}
@media print {
  ._contactCard_o0qhe_1 ._contactName_o0qhe_39 {
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
  }
}
._contactCard_o0qhe_1 ._contactTitle_o0qhe_55,
._contactCard_o0qhe_1 ._contactCompany_o0qhe_56 {
  font-size: var(--wz-font-size-sm, 0.875rem);
  color: var(--wz-color-text, #111827);
  line-height: 1.2;
  margin: 0;
  /* Print optimization */
}
@media print {
  ._contactCard_o0qhe_1 ._contactTitle_o0qhe_55,
  ._contactCard_o0qhe_1 ._contactCompany_o0qhe_56 {
    color: #000 !important;
    font-size: 12px !important;
    margin: 0 0 1px 0 !important;
  }
}
._contactCard_o0qhe_1 ._contactDetails_o0qhe_71 {
  margin-top: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* Print optimization */
}
@media print {
  ._contactCard_o0qhe_1 ._contactDetails_o0qhe_71 {
    margin-top: 4px !important;
    gap: 2px !important;
  }
}
._contactCard_o0qhe_1 ._contactItem_o0qhe_84 {
  font-size: var(--wz-font-size-sm, 0.875rem);
  color: var(--wz-color-text-tertiary, #718096);
  line-height: 1.15;
  /* Print optimization */
}
@media print {
  ._contactCard_o0qhe_1 ._contactItem_o0qhe_84 {
    color: #666 !important;
    font-size: 11px !important;
  }
}

._metaInfo_o0qhe_97 {
  display: flex;
  gap: var(--wz-spacing-lg, 32px);
  align-items: center;
  justify-content: center;
}
._metaInfo_o0qhe_97[data-layout=vertical] {
  flex-direction: column;
  align-items: center;
  gap: var(--wz-spacing-sm, 16px);
}
._metaInfo_o0qhe_97[data-layout=horizontal] {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

._imageGrid_o0qhe_114 {
  display: grid;
  gap: 1rem;
  width: 100%;
}
._imageGrid_o0qhe_114._layout-single_o0qhe_119 {
  grid-template-columns: 1fr;
}
._imageGrid_o0qhe_114._layout-single_o0qhe_119 ._imageWrapper_o0qhe_122 {
  aspect-ratio: 16/9;
  max-width: 100%;
}
._imageGrid_o0qhe_114._layout-split_o0qhe_126 {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
._imageGrid_o0qhe_114._layout-split_o0qhe_126 ._imageWrapper_o0qhe_122 {
  aspect-ratio: 1;
}
._imageGrid_o0qhe_114._layout-triple_o0qhe_133 {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
._imageGrid_o0qhe_114._layout-triple_o0qhe_133 ._imageWrapper_o0qhe_122 {
  aspect-ratio: 4/3;
}
._imageGrid_o0qhe_114._layout-grid_o0qhe_140 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
._imageGrid_o0qhe_114._layout-grid_o0qhe_140 ._imageWrapper_o0qhe_122 {
  aspect-ratio: 1;
}
._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 1rem;
}
._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="0"] {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}
._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="1"], ._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="2"] {
  aspect-ratio: 1;
}
._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="3"], ._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="4"] {
  aspect-ratio: 16/9;
}
._imageGrid_o0qhe_114._layout-collage_o0qhe_166 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(120px, 1fr));
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
}
._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="0"] {
  grid-column: span 2;
  grid-row: span 2;
}
._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="1"] {
  grid-column: span 2;
}
._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="2"] {
  grid-row: span 2;
}
._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="3"], ._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="4"], ._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122[data-index="5"] {
  aspect-ratio: 1;
}
._imageGrid_o0qhe_114._layout-background_o0qhe_186 {
  position: absolute;
  inset: 0;
  z-index: -1;
}
._imageGrid_o0qhe_114._layout-background_o0qhe_186 ._imageWrapper_o0qhe_122 {
  width: 100%;
  height: 100%;
}
._imageGrid_o0qhe_114._layout-background_o0qhe_186 ._imageWrapper_o0qhe_122 img {
  filter: brightness(0.7);
  object-position: center;
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122 {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: #f5f5f5;
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122:hover img {
  transform: scale(1.08);
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122:hover ._imageCaption_o0qhe_214 {
  opacity: 1;
  transform: translateY(0);
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
._imageGrid_o0qhe_114 ._imageWrapper_o0qhe_122 ._imageCaption_o0qhe_214 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

@media (max-width: 768px) {
  ._contactCard_o0qhe_1 {
    padding: 12px 16px;
  }
  ._imageGrid_o0qhe_114 {
    gap: 0.75rem;
  }
  ._imageGrid_o0qhe_114._layout-split_o0qhe_126 {
    grid-template-columns: 1fr;
  }
  ._imageGrid_o0qhe_114._layout-split_o0qhe_126 ._imageWrapper_o0qhe_122 {
    aspect-ratio: 16/9;
  }
  ._imageGrid_o0qhe_114._layout-triple_o0qhe_133 {
    grid-template-columns: 1fr;
  }
  ._imageGrid_o0qhe_114._layout-triple_o0qhe_133 ._imageWrapper_o0qhe_122 {
    aspect-ratio: 16/9;
  }
  ._imageGrid_o0qhe_114._layout-grid_o0qhe_140 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  ._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._imageGrid_o0qhe_114._layout-masonry_o0qhe_150 ._imageWrapper_o0qhe_122[data-index="0"] {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16/9;
  }
  ._imageGrid_o0qhe_114._layout-collage_o0qhe_166 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  ._imageGrid_o0qhe_114._layout-collage_o0qhe_166 ._imageWrapper_o0qhe_122 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 1;
  }
}._imageHeader_97lkx_1 {
  grid-area: image;
  width: var(--hero-image-width, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: var(--hero-image-border-radius, 8px);
  border: var(--hero-image-border-width, 0) solid var(--hero-image-border-color, transparent);
  position: relative;
  z-index: 1;
  padding-top: var(--hero-image-padding-top, 0);
  padding-bottom: var(--hero-image-padding-bottom, 0);
  padding-left: var(--hero-image-padding-left, 0);
  padding-right: var(--hero-image-padding-right, 0);
}
._imageHeader_97lkx_1 ._imageOverlay_97lkx_16 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--hero-image-overlay-bg, transparent);
  opacity: var(--hero-image-overlay-opacity, 0);
}

._bannerImage_97lkx_25 {
  object-fit: cover;
  object-position: center;
  width: 100%;
  display: block;
  height: var(--hero-image-height, 350px);
  min-height: 150px;
  object-position: center;
  transform: translate(var(--hero-image-translate-x, 0%), var(--hero-image-translate-y, 0%)) scale(var(--hero-image-scale, 1));
  transform-origin: center;
}

._emptyImagePlaceholder_97lkx_37 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--wz-color-background-secondary, #f5f5f5);
  border: 2px dashed var(--wz-color-border, #e0e0e0);
  border-radius: 8px;
  color: var(--wz-color-text-tertiary, #718096);
  font-size: 0.875rem;
}
._emptyImagePlaceholder_97lkx_37::before {
  content: "Add image";
  opacity: 0.6;
}

._emptyLogoPlaceholder_97lkx_53 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--wz-color-background-secondary, #f5f5f5);
  border: 2px dashed var(--wz-color-border, #e0e0e0);
  border-radius: 50%;
  color: var(--wz-color-text-tertiary, #718096);
  font-size: 0.75rem;
}

._contactRow_97lkx_66 {
  grid-area: contacts;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

._logoArea_97lkx_76 {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -110px;
  z-index: 2;
}
._logoArea_97lkx_76 > * {
  width: var(--logo-size, 180px);
  height: var(--logo-size, 180px);
  border-radius: var(--logo-border-radius, 50%);
  background: var(--logo-bg-color, #ffffff);
  border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transform: translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
}

._titleArea_97lkx_99 {
  grid-area: title;
  text-align: center;
  width: 100%;
  max-width: clamp(540px, 60vw, 960px);
  margin: 0 auto;
}

._subtitleArea_97lkx_107 {
  grid-area: subtitle;
  text-align: center;
  margin-top: 0.5rem;
  max-width: clamp(420px, 48vw, 800px);
  margin-left: auto;
  margin-right: auto;
}

._metaArea_97lkx_116 {
  grid-area: meta;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.9;
  margin-top: 0.5rem;
  max-width: clamp(360px, 42vw, 720px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  ._bannerImage_97lkx_25 {
    height: 250px;
  }
  ._logoArea_97lkx_76 {
    margin-top: -75px;
  }
  ._logoArea_97lkx_76 > * {
    width: 150px;
    height: 150px;
    border: 4px solid white;
  }
  ._contactRow_97lkx_66 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  ._metaArea_97lkx_116 {
    font-size: 0.85em;
  }
  ._metaArea_97lkx_116 .metaInfo {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
@media (max-width: 480px) {
  ._bannerImage_97lkx_25 {
    height: 200px;
  }
  ._logoArea_97lkx_76 {
    margin-top: -100px;
  }
  ._logoArea_97lkx_76 > * {
    width: 160px;
    height: 160px;
    border: 3px solid white;
  }
  ._contactRow_97lkx_66 {
    gap: 12px;
  }
  ._subtitleArea_97lkx_107 {
    margin-top: 0.25rem;
  }
  ._metaArea_97lkx_116 {
    font-size: 0.8em;
    margin-top: 0.25rem;
  }
  ._businessLogoArea_97lkx_175 > * {
    width: 160px;
    height: 160px;
    border: 3px solid white;
  }
  ._businessImageHeader_97lkx_180 {
    margin-top: -100px;
  }
  ._businessBannerImage_97lkx_183 {
    height: 200px;
  }
  ._businessContactRow_97lkx_186 {
    gap: 12px;
  }
  ._minimalLogoArea_97lkx_189 > * {
    width: 150px;
    height: 150px;
    border: 3px solid white;
  }
  ._minimalContactRow_97lkx_194 {
    gap: 12px;
  }
  ._minimalImage_97lkx_197 {
    max-height: 250px;
  }
}
._businessLogoArea_97lkx_175 {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 2;
}
._businessLogoArea_97lkx_175 > * {
  width: var(--logo-size, 180px);
  height: var(--logo-size, 180px);
  border-radius: var(--logo-border-radius, 50%);
  background: var(--logo-bg-color, #ffffff);
  border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transform: translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
}

._businessImageHeader_97lkx_180 {
  grid-area: image;
  width: var(--hero-image-width, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: var(--hero-image-border-radius, 8px);
  border: var(--hero-image-border-width, 0) solid var(--hero-image-border-color, transparent);
  margin-top: -110px;
  z-index: 1;
  position: relative;
  padding-top: var(--hero-image-padding-top, 0);
  padding-bottom: var(--hero-image-padding-bottom, 0);
  padding-left: var(--hero-image-padding-left, 0);
  padding-right: var(--hero-image-padding-right, 0);
}
._businessImageHeader_97lkx_180 ._imageOverlay_97lkx_16 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--hero-image-overlay-bg, transparent);
  opacity: var(--hero-image-overlay-opacity, 0);
}

._businessBannerImage_97lkx_183 {
  width: 100%;
  height: var(--hero-image-height, 350px);
  object-fit: cover;
  display: block;
  object-position: center;
  transform: translate(var(--hero-image-translate-x, 0%), var(--hero-image-translate-y, 0%)) scale(var(--hero-image-scale, 1));
  transform-origin: center;
}

._businessTitleArea_97lkx_258 {
  grid-area: title;
  text-align: center;
  width: 100%;
  max-width: clamp(540px, 60vw, 960px);
  margin: 0 auto;
}

._businessSubtitleArea_97lkx_266 {
  grid-area: subtitle;
  text-align: center;
  margin-top: 0.5rem;
  max-width: clamp(420px, 48vw, 800px);
  margin-left: auto;
  margin-right: auto;
}

._businessMetaArea_97lkx_275 {
  grid-area: meta;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.9;
  margin-top: 0.5rem;
  max-width: clamp(360px, 42vw, 720px);
  margin-left: auto;
  margin-right: auto;
}

._businessContactRow_97lkx_186 {
  grid-area: contacts;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

._minimalLogoArea_97lkx_189 {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
._minimalLogoArea_97lkx_189 > * {
  width: var(--logo-size, 180px);
  height: var(--logo-size, 180px);
  border-radius: var(--logo-border-radius, 50%);
  background: var(--logo-bg-color, #ffffff);
  border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transform: translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
}

._minimalTitleArea_97lkx_317 {
  grid-area: title;
  text-align: center;
  width: 100%;
  max-width: clamp(540px, 60vw, 960px);
  margin: 0 auto;
}

._minimalSubtitleArea_97lkx_325 {
  grid-area: subtitle;
  text-align: center;
  max-width: clamp(420px, 48vw, 800px);
  margin: 0 auto;
}

._minimalMetaArea_97lkx_332 {
  grid-area: meta;
  text-align: center;
  font-size: 0.9em;
  opacity: 0.9;
  max-width: clamp(360px, 42vw, 720px);
  margin: 0 auto;
}

._minimalContactRow_97lkx_194 {
  grid-area: contacts;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

._minimalImageArea_97lkx_351 {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: var(--hero-image-padding-top, 0);
  padding-bottom: var(--hero-image-padding-bottom, 0);
  padding-left: var(--hero-image-padding-left, 0);
  padding-right: var(--hero-image-padding-right, 0);
}

._minimalImageWrapper_97lkx_363 {
  position: relative;
  display: inline-block;
  width: var(--hero-image-width, 100%);
  max-width: 800px;
  overflow: hidden;
  border-radius: var(--hero-image-border-radius, 8px);
}
._minimalImageWrapper_97lkx_363 ._imageOverlay_97lkx_16 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--hero-image-border-radius, 8px);
  background: var(--hero-image-overlay-bg, transparent);
  opacity: var(--hero-image-overlay-opacity, 0);
}

._minimalImage_97lkx_197 {
  width: 100%;
  height: var(--hero-image-height, 350px);
  object-fit: cover;
  border-radius: var(--hero-image-border-radius, 8px);
  border: var(--hero-image-border-width, 0) solid var(--hero-image-border-color, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-position: center;
  transform: translate(var(--hero-image-translate-x, 0%), var(--hero-image-translate-y, 0%)) scale(var(--hero-image-scale, 1));
  transform-origin: center;
}

._cardLayout_97lkx_393 {
  grid-area: card;
  width: 100%;
  overflow: visible;
}

._cardImageContainer_97lkx_399 {
  width: var(--hero-image-width, 100%);
  margin-left: auto;
  margin-right: auto;
  min-height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: var(--hero-image-border-radius, 0);
  border: var(--hero-image-border-width, 0) solid var(--hero-image-border-color, transparent);
  padding-top: var(--hero-image-padding-top, 0);
  padding-bottom: var(--hero-image-padding-bottom, 0);
  padding-left: var(--hero-image-padding-left, 0);
  padding-right: var(--hero-image-padding-right, 0);
}
._cardImageContainer_97lkx_399 ._imageOverlay_97lkx_16 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--hero-image-overlay-bg, transparent);
  opacity: var(--hero-image-overlay-opacity, 0);
}

._cardImage_97lkx_399 {
  width: 100%;
  height: var(--hero-image-height, 350px);
  object-fit: cover;
  display: block;
  object-position: center;
  transform: translate(var(--hero-image-translate-x, 0%), var(--hero-image-translate-y, 0%)) scale(var(--hero-image-scale, 1));
  transform-origin: center;
}

._cardContentRow_97lkx_432 {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0 48px;
  margin-top: -57px;
  gap: 32px;
  z-index: 2;
}

._cardLogoCircle_97lkx_442 {
  flex-shrink: 0;
  width: var(--logo-size, 180px);
  height: var(--logo-size, 180px);
  border-radius: var(--logo-border-radius, 50%);
  background: var(--logo-bg-color, #ffffff);
  border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  align-self: start;
  transform: translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
}
._cardLogoCircle_97lkx_442 > * {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._cardTextContent_97lkx_464 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--wz-color-text-primary);
  padding-top: calc(95px - 0.5em);
  padding-bottom: 32px;
}
._cardTextContent_97lkx_464 h1, ._cardTextContent_97lkx_464 h2, ._cardTextContent_97lkx_464 h3, ._cardTextContent_97lkx_464 [class*=title] {
  margin: 0;
  text-align: left;
  line-height: 1.2;
}
._cardTextContent_97lkx_464 p, ._cardTextContent_97lkx_464 [class*=subtitle] {
  margin: 0;
  color: var(--wz-color-text-secondary);
  text-align: left;
  line-height: 1.5;
}

._cardMetaInline_97lkx_484 {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--wz-color-text-tertiary);
  text-align: left;
}
._cardMetaInline_97lkx_484 [class*=metaInfo] {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

._cardContactsInline_97lkx_497 {
  display: flex;
  flex-direction: row;
  gap: var(--wz-spacing-xl, 48px);
  margin-top: var(--wz-spacing-md, 24px);
}
._cardContactsInline_97lkx_497 > * {
  flex: 1;
  max-width: 280px;
}
@media (max-width: 768px) {
  ._cardContactsInline_97lkx_497 {
    flex-direction: column;
    gap: var(--wz-spacing-md, 24px);
  }
  ._cardContactsInline_97lkx_497 > * {
    max-width: 100%;
  }
}

._splitMain_97lkx_517 {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-md, 24px);
  padding: var(--wz-spacing-xl, 48px);
  justify-content: flex-start;
}
._splitMain_97lkx_517 [class*=metaInfo] {
  justify-content: flex-start;
}

._splitSidebar_97lkx_529 {
  grid-area: sidebar;
  position: relative;
  height: var(--hero-image-height, 750px);
  overflow: hidden;
  border-radius: var(--hero-image-border-radius, 8px);
  border: var(--hero-image-border-width, 0) solid var(--hero-image-border-color, transparent);
}
._splitSidebar_97lkx_529 ._imageOverlay_97lkx_16 {
  position: absolute;
  top: var(--hero-image-padding-top, 0);
  left: var(--hero-image-padding-left, 0);
  right: var(--hero-image-padding-right, 0);
  bottom: var(--hero-image-padding-bottom, 0);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--hero-image-border-radius, 8px);
  background: var(--hero-image-overlay-bg, transparent);
  opacity: var(--hero-image-overlay-opacity, 0);
}

._splitBackgroundImage_97lkx_550 {
  position: absolute;
  top: var(--hero-image-padding-top, 0);
  left: var(--hero-image-padding-left, 0);
  right: var(--hero-image-padding-right, 0);
  bottom: var(--hero-image-padding-bottom, 0);
  width: calc(100% - var(--hero-image-padding-left, 0px) - var(--hero-image-padding-right, 0px));
  height: calc(100% - var(--hero-image-padding-top, 0px) - var(--hero-image-padding-bottom, 0px));
  object-fit: cover;
  z-index: 0;
  object-position: center;
  transform: translate(var(--hero-image-translate-x, 0%), var(--hero-image-translate-y, 0%)) scale(var(--hero-image-scale, 1));
  transform-origin: center;
}

._splitLogoWrapper_97lkx_565 {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%) translate(var(--logo-offset-x, 0), var(--logo-offset-y, 0));
  z-index: 2;
}
._splitLogoWrapper_97lkx_565 > * {
  width: var(--logo-size, 180px);
  height: var(--logo-size, 180px);
  border-radius: var(--logo-border-radius, 50%);
  background: var(--logo-bg-color, #ffffff);
  border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  ._classicHeader_97lkx_586 {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  ._classicHeader_97lkx_586 > *:last-child {
    margin-left: 0;
    margin-top: 1rem;
  }
  ._classicContent_97lkx_595 {
    margin-top: 2rem;
  }
  ._classicContent_97lkx_595 > *:nth-child(3) {
    margin-top: 1.5rem;
  }
  ._classicFooter_97lkx_601 {
    margin-top: 2rem;
  }
}
@media (max-width: 768px) {
  ._businessLogoArea_97lkx_175 > * {
    width: 150px;
    height: 150px;
    border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  }
  ._businessImageHeader_97lkx_180 {
    margin-top: -75px;
  }
  ._businessBannerImage_97lkx_183 {
    height: 250px;
  }
  ._businessContactRow_97lkx_186 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  ._minimalLogoArea_97lkx_189 > * {
    width: 140px;
    height: 140px;
    border: var(--logo-border-width, 4px) solid var(--logo-border-color, #ffffff);
  }
  ._minimalContactRow_97lkx_194 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  ._minimalImage_97lkx_197 {
    max-height: 300px;
  }
  ._cardImageContainer_97lkx_399 {
    min-height: 250px;
  }
  ._cardImage_97lkx_399 {
    min-height: 250px;
  }
  ._cardContentRow_97lkx_432 {
    grid-template-columns: 1fr;
    margin-top: -45px;
    padding: 0 24px;
    gap: 16px;
  }
  ._cardLogoCircle_97lkx_442 {
    width: 130px;
    height: 130px;
    justify-self: center;
  }
  ._cardLogoCircle_97lkx_442 > * {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ._cardTextContent_97lkx_464 {
    padding-top: 0;
    padding-bottom: 24px;
    text-align: center;
    align-items: center;
  }
  ._cardTextContent_97lkx_464 h1, ._cardTextContent_97lkx_464 h2, ._cardTextContent_97lkx_464 h3, ._cardTextContent_97lkx_464 [class*=title],
  ._cardTextContent_97lkx_464 p, ._cardTextContent_97lkx_464 [class*=subtitle] {
    text-align: center;
  }
  ._cardMetaInline_97lkx_484 {
    text-align: center;
  }
  ._cardMetaInline_97lkx_484 [class*=metaInfo] {
    justify-content: center;
  }
  ._cardFooter_97lkx_675 {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }
  ._splitMain_97lkx_517 {
    padding: 18px;
    gap: 16px;
  }
  ._splitSidebar_97lkx_529 {
    min-height: 400px;
  }
  ._splitLogoWrapper_97lkx_565 {
    top: 24px;
  }
  ._splitLogoWrapper_97lkx_565 > * {
    width: 140px;
    height: 140px;
    border: 3px solid white;
  }
}._uploadContainer_1i3w6_1 {
  width: 100%;
}

._hiddenInput_1i3w6_5 {
  display: none;
}

._uploadArea_1i3w6_9 {
  position: relative;
  border: 2px dashed var(--wz-color-border, #e2e8f0);
  border-radius: var(--wz-border-radius-md, 8px);
  background: var(--wz-color-surface, #ffffff);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  overflow: hidden;
}
._uploadArea_1i3w6_9:hover {
  border-color: var(--wz-color-primary, #3b82f6);
  background: var(--wz-color-surface-hover, #f8fafc);
}
._uploadArea_1i3w6_9._dragActive_1i3w6_22 {
  border-color: var(--wz-color-primary, #3b82f6);
  background: var(--wz-color-primary-bg, rgba(59, 130, 246, 0.05));
  border-style: solid;
  transform: scale(1.02);
}
._uploadArea_1i3w6_9._hasImage_1i3w6_28 {
  border: 1px solid var(--wz-color-border, #e2e8f0);
  border-style: solid;
  padding: 0;
}
._uploadArea_1i3w6_9._hasImage_1i3w6_28:hover ._imageOverlay_1i3w6_33 {
  opacity: 1;
}
._uploadArea_1i3w6_9._disabled_1i3w6_36 {
  cursor: not-allowed;
  opacity: 0.6;
}
._uploadArea_1i3w6_9._disabled_1i3w6_36:hover {
  border-color: var(--wz-color-border, #e2e8f0);
  background: var(--wz-color-surface, #ffffff);
  transform: none;
}

._uploadPrompt_1i3w6_46 {
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 200px;
  justify-content: center;
}

._uploadIcon_1i3w6_57 {
  width: 3rem;
  height: 3rem;
  color: var(--wz-color-text-secondary, #64748b);
  margin-bottom: 0.5rem;
}

._uploadText_1i3w6_64 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._primaryText_1i3w6_70 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--wz-color-text-primary, #1e293b);
}

._secondaryText_1i3w6_76 {
  font-size: 0.875rem;
  color: var(--wz-color-text-secondary, #64748b);
}

._formatText_1i3w6_81 {
  font-size: 0.75rem;
  color: var(--wz-color-text-muted, #94a3b8);
  margin-top: 0.25rem;
}

._uploadingState_1i3w6_87 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

._uploadingText_1i3w6_94 {
  font-size: 0.875rem;
  color: var(--wz-color-text-secondary, #64748b);
}

._spinner_1i3w6_99 {
  width: 1.5rem;
  height: 1.5rem;
  animation: _spin_1i3w6_99 1s linear infinite;
  color: var(--wz-color-primary, #3b82f6);
}

@keyframes _spin_1i3w6_99 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._imagePreview_1i3w6_114 {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wz-border-radius-md, 8px);
  border: 3px solid transparent;
  transition: border-color 0.2s ease;
}
._imagePreview_1i3w6_114:hover ._removeButton_1i3w6_125 {
  opacity: 1;
}
._imagePreview_1i3w6_114:has(._removeButton_1i3w6_125:hover) {
  border-color: var(--wz-color-danger, #dc2626);
}

._previewImage_1i3w6_132 {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--wz-border-radius-md, 8px);
}

._removeButton_1i3w6_125 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
._removeButton_1i3w6_125:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.9);
}
._removeButton_1i3w6_125:focus-visible {
  outline: 2px solid var(--wz-color-primary, #3b82f6);
  outline-offset: 2px;
  opacity: 1;
}
._removeButton_1i3w6_125:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._removeIcon_1i3w6_170 {
  width: 1rem;
  height: 1rem;
  color: white;
}

._spinnerIcon_1i3w6_176 {
  width: 1rem;
  height: 1rem;
  color: white;
  animation: _spin_1i3w6_99 1s linear infinite;
}

._imageOverlay_1i3w6_33 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wz-border-radius-md, 8px);
}

._progressContainer_1i3w6_196 {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._progressBar_1i3w6_203 {
  flex: 1;
  height: 0.5rem;
  background: var(--wz-color-surface-secondary, #f1f5f9);
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--wz-color-border, #e2e8f0);
}

._progressFill_1i3w6_212 {
  height: 100%;
  background: var(--wz-color-primary, #3b82f6);
  border-radius: 9999px;
  transition: width 0.3s ease-in-out;
}

._progressText_1i3w6_219 {
  font-size: 0.75rem;
  color: var(--wz-color-text-secondary, #64748b);
  min-width: 2.5rem;
  text-align: right;
}

._errorMessage_1i3w6_226 {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--wz-color-error-bg, #fef2f2);
  border: 1px solid var(--wz-color-error-border, #fecaca);
  border-radius: var(--wz-border-radius-md, 8px);
  color: var(--wz-color-error, #dc2626);
  font-size: 0.875rem;
}

._errorIcon_1i3w6_239 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

._successMessage_1i3w6_245 {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--wz-color-success-bg, #f0fdf4);
  border: 1px solid var(--wz-color-success-border, #bbf7d0);
  border-radius: var(--wz-border-radius-md, 8px);
  color: var(--wz-color-success, #16a34a);
  font-size: 0.875rem;
}

._successIcon_1i3w6_258 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  ._uploadPrompt_1i3w6_46 {
    padding: 1.5rem 1rem;
    min-height: 150px;
  }
  ._uploadIcon_1i3w6_57 {
    width: 2.5rem;
    height: 2.5rem;
  }
  ._imagePreview_1i3w6_114 {
    height: 150px;
  }
  ._removeButton_1i3w6_125 {
    top: 0.375rem;
    right: 0.375rem;
    padding: 0.375rem;
  }
  ._removeIcon_1i3w6_170,
  ._spinnerIcon_1i3w6_176 {
    width: 0.875rem;
    height: 0.875rem;
  }
}
@media (prefers-contrast: high) {
  ._uploadArea_1i3w6_9 {
    border-width: 3px;
  }
  ._uploadArea_1i3w6_9._dragActive_1i3w6_22 {
    border-width: 4px;
  }
  ._imageOverlay_1i3w6_33 {
    background: rgba(0, 0, 0, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._uploadArea_1i3w6_9 {
    transition: none;
  }
  ._imageOverlay_1i3w6_33 {
    transition: none;
  }
  ._spinner_1i3w6_99 {
    animation: none;
  }
  ._dragActive_1i3w6_22 {
    transform: none;
  }
}
._sheetContent_d47hx_2 {
  width: 600px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

._libraryContent_d47hx_10 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: var(--spacing-md) 0;
}

._searchContainer_d47hx_18 {
  margin-bottom: var(--spacing-md);
}

._searchInputContainer_d47hx_22 {
  position: relative;
  display: flex;
  align-items: center;
}

._searchIcon_d47hx_28 {
  position: absolute;
  left: var(--spacing-sm);
  width: 16px;
  height: 16px;
  color: var(--neutral-500);
  z-index: 2;
}

._searchInput_d47hx_22 {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}
._searchInput_d47hx_22:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 0px;
}

._clearSearch_d47hx_46 {
  position: absolute;
  right: var(--spacing-xs);
  z-index: 2;
  padding: var(--spacing-xs);
  height: auto;
  width: auto;
  min-width: auto;
}

._clearIcon_d47hx_56 {
  width: 14px;
  height: 14px;
}

._assetsGrid_d47hx_61 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-y: auto;
  padding: var(--spacing-xs);
  max-height: calc(100vh - 300px);
}

._assetItem_d47hx_71 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--neutral-50);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 80px;
}
._assetItem_d47hx_71:hover {
  border-color: var(--primary-300);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
._assetItem_d47hx_71._selected_d47hx_89 {
  border-color: var(--primary-500);
  background: var(--primary-50);
}
._assetItem_d47hx_71:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

._imageContainer_d47hx_98 {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

._image_d47hx_98 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}
._image_d47hx_98._loaded_d47hx_118 {
  opacity: 1;
}

._imagePlaceholder_d47hx_122 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--neutral-500);
}

._errorState_d47hx_131 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--neutral-500);
  text-align: center;
}

._errorIcon_d47hx_142 {
  width: 24px;
  height: 24px;
  margin-bottom: var(--spacing-xs);
}

._errorText_d47hx_148 {
  font-size: var(--font-size-xs);
}

._selectedOverlay_d47hx_152 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-500);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

._selectedIcon_d47hx_168 {
  width: 18px;
  height: 18px;
}

._loadingIcon_d47hx_173 {
  width: 20px;
  height: 20px;
  animation: _spin_d47hx_1 1s linear infinite;
}

@keyframes _spin_d47hx_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._assetInfo_d47hx_187 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

._assetName_d47hx_195 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

._assetMeta_d47hx_205 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
  align-items: center;
}

._dimensions_d47hx_215 {
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 4px;
}
._dimensions_d47hx_215::before {
  content: "📐";
  font-size: 12px;
}

._fileSize_d47hx_226 {
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}
._fileSize_d47hx_226::before {
  content: "💾";
  font-size: 12px;
}

._loadingState_d47hx_237,
._emptyState_d47hx_238 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--neutral-600);
  padding: var(--spacing-xl);
}
._loadingState_d47hx_237 p,
._emptyState_d47hx_238 p {
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-md);
}

._emptyState_d47hx_238 ._emptyIcon_d47hx_254 {
  width: 48px;
  height: 48px;
  color: var(--neutral-400);
  margin-bottom: var(--spacing-md);
}
._emptyState_d47hx_238 ._emptySubText_d47hx_260 {
  font-size: var(--font-size-sm);
  color: var(--neutral-500);
}

._errorState_d47hx_131 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--error-600);
  padding: var(--spacing-xl);
}
._errorState_d47hx_131 p {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
}

._resultsInfo_d47hx_280 {
  padding: var(--spacing-sm) var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  text-align: center;
  border-top: 1px solid var(--neutral-200);
  margin-top: var(--spacing-sm);
}

._footer_d47hx_289 {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--neutral-200);
  justify-content: flex-end;
}

._cancelButton_d47hx_297,
._selectButton_d47hx_298 {
  min-width: 100px;
}

[data-theme=dark] ._assetItem_d47hx_71 {
  background: var(--neutral-800);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._assetItem_d47hx_71:hover {
  border-color: var(--primary-400);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] ._assetItem_d47hx_71._selected_d47hx_89 {
  background: var(--primary-900);
  border-color: var(--primary-500);
}
[data-theme=dark] ._imageContainer_d47hx_98 {
  background: var(--neutral-700);
}
[data-theme=dark] ._assetName_d47hx_195 {
  color: var(--neutral-100);
}
[data-theme=dark] ._assetMeta_d47hx_205 {
  color: var(--neutral-400);
}
[data-theme=dark] ._searchIcon_d47hx_28 {
  color: var(--neutral-400);
}
[data-theme=dark] ._resultsInfo_d47hx_280 {
  color: var(--neutral-400);
  border-top-color: var(--neutral-700);
}
[data-theme=dark] ._footer_d47hx_289 {
  border-top-color: var(--neutral-700);
}

@media (max-width: 768px) {
  ._sheetContent_d47hx_2 {
    width: 100vw;
    max-width: none;
  }
  ._assetItem_d47hx_71 {
    gap: var(--spacing-sm);
    min-height: 70px;
  }
  ._imageContainer_d47hx_98 {
    width: 56px;
    height: 56px;
  }
  ._assetName_d47hx_195 {
    font-size: var(--font-size-xs);
  }
  ._assetMeta_d47hx_205 {
    font-size: 11px;
    gap: var(--spacing-xs);
  }
}._assetContainer_133oa_1 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

._label_133oa_8 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

._errorBanner_133oa_15 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.375rem;
  color: #dc2626;
  font-size: 0.875rem;
  animation: _slideDown_133oa_1 0.2s ease-out;
}
._errorBanner_133oa_15 ._errorIcon_133oa_27 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

._imageWrapper_133oa_33 {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--muted);
}

._imageContainer_133oa_41 {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 3px solid transparent;
  transition: border-color 0.2s ease;
}
._imageContainer_133oa_41:hover ._removeButton_133oa_52 {
  opacity: 1;
}
._imageContainer_133oa_41:has(._removeButton_133oa_52:hover) {
  border-color: #dc2626;
}

._imagePlaceholder_133oa_59 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--muted);
  color: var(--muted-foreground);
}
._imagePlaceholder_133oa_59 ._placeholderIcon_133oa_70 {
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
}
._imagePlaceholder_133oa_59 span {
  font-size: 0.875rem;
}

._image_133oa_33 {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._image_133oa_33._loaded_133oa_86 {
  opacity: 1;
}

._removeButton_133oa_52 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
._removeButton_133oa_52:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.9);
}
._removeButton_133oa_52:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  opacity: 1;
}
._removeButton_133oa_52:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._removeIcon_133oa_119 {
  width: 1rem;
  height: 1rem;
  color: white;
}

._spinnerIcon_133oa_125 {
  width: 1rem;
  height: 1rem;
  color: white;
  animation: _spin_133oa_125 1s linear infinite;
}

._metadata_133oa_132 {
  padding: 0.75rem;
  background-color: var(--muted);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
._metadata_133oa_132 ._filename_133oa_142 {
  font-weight: 500;
  color: var(--foreground);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._metadata_133oa_132 ._dimensions_133oa_151,
._metadata_133oa_132 ._filesize_133oa_152 {
  opacity: 0.8;
}

._progressBar_133oa_156 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--muted);
  overflow: hidden;
}

._progressFill_133oa_166 {
  height: 100%;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

@keyframes _slideDown_133oa_1 {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._uploadOptions_133oa_182 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

._divider_133oa_190 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0.5rem 0;
}
._divider_133oa_190::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
._divider_133oa_190 span {
  background: var(--background);
  padding: 0 1rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

._libraryButton_133oa_214 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px dashed var(--border);
  background: var(--muted);
  border-radius: 0.5rem;
  color: var(--muted-foreground);
  font-weight: 500;
  transition: all 0.2s ease;
}
._libraryButton_133oa_214:hover:not(:disabled) {
  border-color: var(--primary);
  background: hsl(var(--primary)/0.1);
  color: var(--primary);
}
._libraryButton_133oa_214:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._libraryIcon_133oa_238,
._buttonIcon_133oa_239 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@keyframes _spin_133oa_125 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 640px) {
  ._imageContainer_133oa_41 {
    min-height: 150px;
  }
  ._removeButton_133oa_52 {
    top: 0.375rem;
    right: 0.375rem;
    padding: 0.375rem;
  }
  ._removeIcon_133oa_119,
  ._spinnerIcon_133oa_125 {
    width: 0.875rem;
    height: 0.875rem;
  }
}._heroSettings_12utb_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_12utb_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_12utb_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_12utb_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_12utb_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_12utb_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_12utb_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_12utb_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_12utb_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_12utb_47 ._layoutGrid_12utb_47 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (min-width: 768px) {
  ._layoutSelector_12utb_47 ._layoutGrid_12utb_47 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  ._layoutSelector_12utb_47 ._layoutGrid_12utb_47 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_12utb_64 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_12utb_64:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_12utb_64._selected_12utb_84 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_12utb_64._selected_12utb_84 ._layoutIcon_12utb_89 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_12utb_64 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_12utb_64 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_12utb_89 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_12utb_89 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_12utb_89 {
    margin-bottom: 6px;
  }
  ._layoutIcon_12utb_89 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_12utb_126 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_12utb_126 {
    font-size: 12px;
  }
}

._typographyControls_12utb_139 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._visibilityControls_12utb_145 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._imageSection_12utb_151 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._uploadSection_12utb_157 {
  margin: 8px 0;
}
@media (max-width: 640px) {
  ._uploadSection_12utb_157 {
    margin: 6px 0;
  }
}

._assetUpload_12utb_166 {
  border: 2px dashed var(--neutral-200);
  border-radius: 8px;
  padding: 12px;
}
@media (max-width: 640px) {
  ._assetUpload_12utb_166 {
    padding: 10px;
  }
  ._assetUpload_12utb_166 img {
    max-height: 200px;
    object-fit: contain;
  }
}

@media (prefers-contrast: high) {
  ._layoutOption_12utb_64 {
    border-width: 2px;
  }
  ._layoutOption_12utb_64._selected_12utb_84 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_12utb_64 {
    transition: none;
  }
  ._layoutOption_12utb_64:hover {
    transform: none;
  }
}
._controlGroup_12utb_197 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--neutral-50);
  border-radius: 8px;
  border: 1px solid var(--neutral-100);
}

._controlLabel_12utb_207 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 4px;
}

._segmentedControl_12utb_214 {
  display: flex;
  gap: 0;
  background: var(--neutral-100);
  border-radius: 8px;
  padding: 2px;
}

._segmentButton_12utb_222 {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
._segmentButton_12utb_222:hover {
  color: var(--neutral-800);
  background: var(--neutral-50);
}
._segmentButton_12utb_222._selected_12utb_84 {
  color: var(--primary-700);
  background: var(--pure-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
  ._segmentButton_12utb_222 {
    padding: 10px 8px;
    font-size: 12px;
  }
}

._selectControl_12utb_251 {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--neutral-900);
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
._selectControl_12utb_251:hover {
  border-color: var(--neutral-300);
}
._selectControl_12utb_251:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
@media (max-width: 640px) {
  ._selectControl_12utb_251 {
    padding: 12px;
    font-size: 16px;
  }
}

@media (prefers-contrast: high) {
  ._controlGroup_12utb_197 {
    border-width: 2px;
  }
  ._segmentButton_12utb_222._selected_12utb_84 {
    outline: 2px solid var(--primary-700);
  }
  ._selectControl_12utb_251 {
    border-width: 2px;
  }
}._wrapper_s1f5l_1 {
  position: relative;
  width: 100%;
}
._wrapper_s1f5l_1:hover ._sectionControlsWrapper_s1f5l_5 {
  opacity: 1;
  transition: opacity 0.3s ease;
}

._sectionControlsWrapper_s1f5l_5 {
  position: absolute;
  top: var(--wz-spacing-sm, 16px);
  right: var(--wz-spacing-sm, 16px);
  z-index: 100;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._settingsSheet_s1f5l_22 {
  width: 480px !important;
  max-width: 100vw;
}
._settingsSheet_s1f5l_22 h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wz-color-primary, #1a1a1a);
  margin: 0;
}

._heroCover_s1f5l_33 {
  position: relative;
  width: 100%;
  min-height: var(--hero-min-height, 600px);
  padding: var(--wz-spacing-xl, 48px);
  background: var(--hero-bg-color, transparent);
  display: grid;
  gap: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  --hero-side-width: clamp(200px, 24vw, 280px);
  --hero-side-min: clamp(96px, 18vw, 160px);
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-classic_s1f5l_46 ._titleArea_s1f5l_46 {
  margin-top: var(--wz-spacing-lg, 32px);
  z-index: 3;
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-classic_s1f5l_46 ._imageHeader_s1f5l_50 {
  margin-bottom: 0;
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-business_s1f5l_53 ._businessTitleArea_s1f5l_53 {
  margin-top: var(--wz-spacing-lg, 32px);
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-business_s1f5l_53 ._businessImageHeader_s1f5l_56 {
  margin-top: 0;
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-card_s1f5l_59 ._cardContentRow_s1f5l_59 {
  margin-top: var(--wz-spacing-md, 24px);
  grid-template-columns: 1fr;
}
._heroCover_s1f5l_33._noLogo_s1f5l_46._layout-card_s1f5l_59 ._cardTextContent_s1f5l_63 {
  padding-top: 0;
}
._heroCover_s1f5l_33._layout-classic_s1f5l_46 {
  grid-template-areas: "image image image" "logo logo logo" "title title title" "subtitle subtitle subtitle" "meta meta meta" "contacts contacts contacts";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  justify-items: center;
  align-items: start;
  text-align: center;
  padding: 0 0 48px 0;
  min-height: 600px;
  row-gap: 32px;
}
._heroCover_s1f5l_33._layout-classic_s1f5l_46 > [class*=logoArea] + [class*=titleArea] {
  margin-top: 16px;
}
._heroCover_s1f5l_33._layout-classic_s1f5l_46 > [class*=titleArea] + [class*=subtitleArea] {
  margin-top: -24px;
}
@media (max-width: 768px) {
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 {
    grid-template-areas: "image" "logo" "title" "subtitle" "meta" "contacts";
    grid-template-columns: 1fr;
    padding: 0 0 32px 0;
    row-gap: 24px;
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 > [class*=logoArea] + [class*=titleArea] {
    margin-top: 12px;
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 > [class*=titleArea] + [class*=subtitleArea] {
    margin-top: -16px;
  }
}
._heroCover_s1f5l_33._layout-business_s1f5l_53 {
  grid-template-areas: "logo logo logo" "image image image" "title title title" "subtitle subtitle subtitle" "meta meta meta" "contacts contacts contacts";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  justify-items: center;
  align-items: start;
  text-align: center;
  padding: 48px 0 48px 0;
  min-height: 600px;
  row-gap: 32px;
}
._heroCover_s1f5l_33._layout-business_s1f5l_53 > [class*=businessImageHeader] + [class*=businessTitleArea] {
  margin-top: 16px;
}
._heroCover_s1f5l_33._layout-business_s1f5l_53 > [class*=businessTitleArea] + [class*=businessSubtitleArea] {
  margin-top: -24px;
}
._heroCover_s1f5l_33._layout-minimal_s1f5l_114 {
  grid-template-areas: "logo logo logo" "title title title" "subtitle subtitle subtitle" "meta meta meta" "contacts contacts contacts" "image image image";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  justify-items: center;
  align-items: start;
  text-align: center;
  padding: 48px;
  min-height: 500px;
  row-gap: 32px;
}
._heroCover_s1f5l_33._layout-minimal_s1f5l_114 > [class*=minimalTitleArea] + [class*=minimalSubtitleArea] {
  margin-top: -24px;
}
@media (max-width: 768px) {
  ._heroCover_s1f5l_33._layout-minimal_s1f5l_114 {
    grid-template-areas: "logo" "title" "subtitle" "meta" "contacts" "image";
    padding: 32px 24px;
    row-gap: 24px;
  }
  ._heroCover_s1f5l_33._layout-minimal_s1f5l_114 > [class*=minimalTitleArea] + [class*=minimalSubtitleArea] {
    margin-top: -16px;
  }
}
._heroCover_s1f5l_33._layout-card_s1f5l_59 {
  padding: 0;
  margin: 0;
  grid-template-areas: "card";
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
._heroCover_s1f5l_33._layout-split_s1f5l_146 {
  grid-template-columns: 2fr var(--split-sidebar-width, 1fr);
  grid-template-areas: "main sidebar";
  padding: 0;
}
._heroCover_s1f5l_33._layout-split_s1f5l_146 [class*=subtitle] {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1024px) {
  ._heroCover_s1f5l_33 {
    padding: calc(var(--hero-padding, 48px) * 0.75);
    min-height: var(--hero-min-height, 450px);
  }
  ._heroCover_s1f5l_33._layout-business_s1f5l_53 {
    grid-template-areas: "logo" "image" "title" "subtitle" "meta" "contacts";
    grid-template-columns: 1fr;
    padding: 32px 0 32px 0;
    row-gap: 24px;
  }
  ._heroCover_s1f5l_33._layout-business_s1f5l_53 > [class*=businessImageHeader] + [class*=businessTitleArea] {
    margin-top: 12px;
  }
  ._heroCover_s1f5l_33._layout-business_s1f5l_53 > [class*=businessTitleArea] + [class*=businessSubtitleArea] {
    margin-top: -16px;
  }
  ._heroCover_s1f5l_33._layout-split_s1f5l_146 {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
  }
  ._heroCover_s1f5l_33 {
    --hero-title-size: 1.2;
    --hero-subtitle-size: 1.25rem;
  }
}
@media (max-width: 768px) {
  ._wrapper_s1f5l_1 ._sectionControlsWrapper_s1f5l_5 {
    top: 4px;
    right: 4px;
  }
  ._heroCover_s1f5l_33 {
    padding: calc(var(--hero-padding, 48px) * 0.5);
    min-height: 400px;
    --hero-title-size: 1.0;
    --hero-subtitle-size: 1.1rem;
  }
  ._heroCover_s1f5l_33._layout-card_s1f5l_59 {
    border-radius: 0;
    box-shadow: none;
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 > * {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 [class*=contactRow] {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  ._heroCover_s1f5l_33._layout-split_s1f5l_146 [class*=subtitle] {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  ._heroCover_s1f5l_33._layout-split_s1f5l_146 [class*=metaInfo] {
    justify-content: flex-start !important;
  }
  ._heroCover_s1f5l_33._layout-card_s1f5l_59 [class*=cardContentRow] {
    flex-direction: column;
    align-items: flex-start;
  }
  ._heroCover_s1f5l_33._layout-card_s1f5l_59 [class*=cardTextContent] {
    padding-top: 16px;
  }
}
@media print {
  /* Hide all interactive elements */
  ._controls_s1f5l_225,
  ._sectionControlsWrapper_s1f5l_5,
  ._settingsSheet_s1f5l_22 {
    display: none !important;
  }
  /* Hero container print optimizations */
  ._heroCover_s1f5l_33 {
    /* Page break management */
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    /* Remove visual chrome */
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    /* Optimize dimensions for print */
    min-height: var(--wz-print-hero-min-height, 200px) !important;
    padding: var(--wz-print-hero-spacing-internal, 16px) !important;
    margin-bottom: var(--wz-print-hero-spacing-sections, 24px) !important;
    /* Remove overlay effects for print */
  }
  ._heroCover_s1f5l_33::before {
    display: none !important;
  }
  ._heroCover_s1f5l_33 {
    /* Use print-optimized typography - override base to print size, set multiplier */
    --wz-font-size-titles: var(--wz-print-font-size-base, 14px) !important;
    --hero-title-size: 3.5 !important; /* Unitless multiplier for print title */
    --hero-subtitle-size: calc(var(--wz-print-font-size-base, 14px) * var(--wz-print-hero-subtitle-multiplier, 1.3)) !important;
    --hero-content-size: var(--wz-print-font-size-base, 14px) !important;
    --hero-meta-size: var(--wz-print-font-size-small, 12px) !important;
    /* Force black text for print readability */
    --hero-title-color: #000 !important;
    --hero-subtitle-color: #000 !important;
    --hero-content-color: #000 !important;
    --hero-label-color: #333 !important;
    --hero-meta-color: #666 !important;
    /* Optimize spacing for print density */
    gap: var(--wz-print-base-spacing, 12px) !important;
    /* Layout adjustments for print */
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46, ._heroCover_s1f5l_33._layout-card_s1f5l_59, ._heroCover_s1f5l_33._layout-split_s1f5l_146 {
    /* Force single column layout for print */
    grid-template-columns: 1fr !important;
    grid-template-areas: "prepare-by" "prepare-for" "title" "subtitle" "meta" "images" !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    justify-items: center !important;
    text-align: center !important;
    /* Optimize internal spacing */
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 > *, ._heroCover_s1f5l_33._layout-card_s1f5l_59 > *, ._heroCover_s1f5l_33._layout-split_s1f5l_146 > * {
    margin-bottom: var(--wz-print-base-spacing, 12px) !important;
  }
  ._heroCover_s1f5l_33._layout-classic_s1f5l_46 > *:last-child, ._heroCover_s1f5l_33._layout-card_s1f5l_59 > *:last-child, ._heroCover_s1f5l_33._layout-split_s1f5l_146 > *:last-child {
    margin-bottom: 0 !important;
  }
  ._heroCover_s1f5l_33 {
    /* Contact cards optimization for print */
  }
  ._heroCover_s1f5l_33 [class*=contactCard],
  ._heroCover_s1f5l_33 [class*=contact] {
    padding: var(--wz-print-base-spacing, 12px) !important;
    background: transparent !important;
    font-size: var(--wz-print-font-size-small, 12px) !important;
    page-break-inside: avoid !important;
  }
  ._heroCover_s1f5l_33 {
    /* Logo optimization */
  }
  ._heroCover_s1f5l_33 [class*=logo] {
    max-height: 60px !important;
    max-width: 200px !important;
    margin: 0 0 var(--wz-print-base-spacing, 12px) 0 !important;
  }
  ._heroCover_s1f5l_33 {
    /* Meta information (proposal #, dates, etc.) */
  }
  ._heroCover_s1f5l_33 [class*=meta],
  ._heroCover_s1f5l_33 [class*=info] {
    font-size: var(--wz-print-font-size-small, 12px) !important;
    color: #666 !important;
    line-height: 1.3 !important;
  }
  ._heroCover_s1f5l_33 {
    /* Specific title size override - ensure H1 stays large */
  }
  ._heroCover_s1f5l_33 [class*=title],
  ._heroCover_s1f5l_33 [class*=heading] h1,
  ._heroCover_s1f5l_33 [class*=Title] {
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.2 !important;
  }
  ._heroCover_s1f5l_33 {
    /* Subtitle should be smaller but still prominent */
  }
  ._heroCover_s1f5l_33 [class*=subtitle],
  ._heroCover_s1f5l_33 [class*=Subtitle] {
    font-weight: 500 !important;
    color: #333 !important;
  }
}._docHeaderSettings_tjtas_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_tjtas_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_tjtas_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_tjtas_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_tjtas_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_tjtas_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_tjtas_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_tjtas_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_tjtas_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._typographySettings_tjtas_47 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._logoSettings_tjtas_53 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._uploadSection_tjtas_59 {
  margin: 8px 0;
}

._logoUpload_tjtas_63 {
  border: 2px dashed var(--neutral-200);
  border-radius: 8px;
  padding: 12px;
}

._controlGroup_tjtas_69 {
  margin: 16px 0;
}
._controlGroup_tjtas_69 h5 {
  margin-bottom: 8px;
  color: var(--neutral-900);
  font-size: 14px;
  font-weight: 600;
}

._sizeOptions_tjtas_79,
._aspectOptions_tjtas_80 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  ._sizeOptions_tjtas_79,
  ._aspectOptions_tjtas_80 {
    gap: 6px;
  }
}

._sizeOption_tjtas_79,
._aspectOption_tjtas_80 {
  padding: 8px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--neutral-50);
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._sizeOption_tjtas_79:hover,
._aspectOption_tjtas_80:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  color: var(--neutral-900);
}
._sizeOption_tjtas_79._selected_tjtas_114,
._aspectOption_tjtas_80._selected_tjtas_114 {
  background: var(--primary-500);
  color: var(--pure-white);
  border-color: var(--primary-600);
  font-weight: 600;
}
@media (max-width: 640px) {
  ._sizeOption_tjtas_79,
  ._aspectOption_tjtas_80 {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

._backgroundSettings_tjtas_130 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-200);
}
._backgroundSettings_tjtas_130 h5 {
  margin-bottom: 8px;
  color: var(--neutral-900);
  font-size: 14px;
  font-weight: 600;
}

._control_tjtas_69 {
  margin: 12px 0;
}
._control_tjtas_69 label {
  display: block;
  margin-bottom: 8px;
  color: var(--neutral-800);
  font-weight: 500;
  font-size: 13px;
}

._borderStyleOptions_tjtas_153 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  ._borderStyleOptions_tjtas_153 {
    gap: 6px;
  }
}

._borderStyleOption_tjtas_153 {
  padding: 8px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--neutral-50);
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: capitalize;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._borderStyleOption_tjtas_153:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-300);
  color: var(--neutral-900);
}
._borderStyleOption_tjtas_153._selected_tjtas_114 {
  background: var(--primary-500);
  color: var(--pure-white);
  border-color: var(--primary-600);
  font-weight: 600;
}
@media (max-width: 640px) {
  ._borderStyleOption_tjtas_153 {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

._switchItem_tjtas_199 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--neutral-50);
  margin-bottom: 16px;
}
._switchItem_tjtas_199 label {
  flex: 1;
  cursor: pointer;
}

._toggleLabel_tjtas_214 {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

._toggleDescription_tjtas_222 {
  display: block;
  font-size: 13px;
  color: var(--neutral-600);
  line-height: 1.3;
}

._layoutSelector_tjtas_229 ._layoutGrid_tjtas_229 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (min-width: 768px) {
  ._layoutSelector_tjtas_229 ._layoutGrid_tjtas_229 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  ._layoutSelector_tjtas_229 ._layoutGrid_tjtas_229 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_tjtas_246 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_tjtas_246:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_tjtas_246._selected_tjtas_114 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_tjtas_246._selected_tjtas_114 ._layoutIcon_tjtas_271 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_tjtas_246 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_tjtas_246 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_tjtas_271 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_tjtas_271 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_tjtas_271 {
    margin-bottom: 6px;
  }
  ._layoutIcon_tjtas_271 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_tjtas_308 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_tjtas_308 {
    font-size: 12px;
  }
}

@media (prefers-contrast: high) {
  ._layoutOption_tjtas_246,
  ._sizeOption_tjtas_79,
  ._aspectOption_tjtas_80,
  ._borderStyleOption_tjtas_153 {
    border-width: 2px;
  }
  ._layoutOption_tjtas_246._selected_tjtas_114,
  ._sizeOption_tjtas_79._selected_tjtas_114,
  ._aspectOption_tjtas_80._selected_tjtas_114,
  ._borderStyleOption_tjtas_153._selected_tjtas_114 {
    border-width: 3px;
  }
  ._collapsibleSection_tjtas_334 {
    border-width: 2px;
  }
}
._fieldsManagement_tjtas_338 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._fieldsList_tjtas_344 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 640px) {
  ._fieldsList_tjtas_344 {
    max-height: 400px;
    overflow-y: auto;
  }
}

._addFieldButton_tjtas_356 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  margin-top: 8px;
  border: 2px dashed var(--neutral-200);
  border-radius: 8px;
  background: var(--neutral-50);
  color: var(--neutral-600);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._addFieldButton_tjtas_356:hover {
  border-color: var(--primary-500);
  background: var(--primary-50);
  color: var(--primary-600);
}
._addFieldButton_tjtas_356:active {
  transform: translateY(1px);
}
._addFieldButton_tjtas_356:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._addFieldButton_tjtas_356:disabled:hover {
  border-color: var(--neutral-200);
  background: var(--neutral-50);
  color: var(--neutral-600);
  transform: none;
}
@media (max-width: 640px) {
  ._addFieldButton_tjtas_356 {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

._noFields_tjtas_398 {
  padding: 20px;
  text-align: center;
  color: var(--neutral-600);
  font-style: italic;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--neutral-50);
  font-size: 14px;
}

._settingGroup_tjtas_409 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._settingDescription_tjtas_415 {
  font-size: 13px;
  color: var(--neutral-600);
  margin-bottom: 12px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  ._layoutOption_tjtas_246,
  ._sizeOption_tjtas_79,
  ._aspectOption_tjtas_80,
  ._borderStyleOption_tjtas_153,
  ._addFieldButton_tjtas_356 {
    transition: none;
  }
  ._layoutOption_tjtas_246:hover,
  ._sizeOption_tjtas_79:hover,
  ._aspectOption_tjtas_80:hover,
  ._borderStyleOption_tjtas_153:hover,
  ._addFieldButton_tjtas_356:hover {
    transform: none;
  }
}._fieldItem_bx2yf_1 {
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin-bottom: 0;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  transition: all 0.2s ease;
}
._fieldItem_bx2yf_1:hover {
  border-color: var(--neutral-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

._fieldHeader_bx2yf_16 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

._fieldLabel_bx2yf_23 {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 12px;
}

._fieldLabelText_bx2yf_30 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

._fieldControls_bx2yf_36 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

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

._controlWrapper_bx2yf_49 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._visibilityIcon_bx2yf_55 {
  color: var(--neutral-600);
  transition: color 0.2s ease;
}

._iconButton_bx2yf_60 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._iconButton_bx2yf_60:hover {
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--neutral-900);
}
._iconButton_bx2yf_60:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
._iconButton_bx2yf_60._active_bx2yf_83 {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: var(--pure-white);
}
._iconButton_bx2yf_60._active_bx2yf_83:hover {
  border-color: var(--primary-600);
  background: var(--primary-600);
}
._iconButton_bx2yf_60._deleteButton_bx2yf_92:hover {
  border-color: var(--negative-500);
  background: var(--negative-50);
  color: var(--negative-500);
}

._fieldSlider_bx2yf_98 {
  margin-top: 6px;
}

._sliderWrapper_bx2yf_102 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._sliderLabel_bx2yf_108 {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
}

._slider_bx2yf_102 {
  width: 100%;
}

@media (max-width: 640px) {
  ._fieldItem_bx2yf_1 {
    padding: 12px;
    margin-bottom: 8px;
  }
  ._fieldHeader_bx2yf_16 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 8px;
  }
  ._fieldLabel_bx2yf_23 {
    margin-right: 0;
  }
  ._fieldControls_bx2yf_36 {
    justify-content: space-between;
  }
  ._centerControls_bx2yf_43 {
    gap: 8px;
  }
  ._iconButton_bx2yf_60 {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 480px) {
  ._fieldControls_bx2yf_36 {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
  }
  ._centerControls_bx2yf_43 {
    gap: 6px;
  }
  ._controlWrapper_bx2yf_49 {
    gap: 2px;
  }
}
._iconButton_bx2yf_60:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  ._fieldItem_bx2yf_1 {
    border-width: 2px;
  }
  ._iconButton_bx2yf_60 {
    border-width: 2px;
  }
  ._iconButton_bx2yf_60._active_bx2yf_83 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._fieldItem_bx2yf_1,
  ._iconButton_bx2yf_60,
  ._visibilityIcon_bx2yf_55 {
    transition: none;
  }
}._wrapper_2z9fa_1 {
  position: relative;
  width: 100%;
}
._wrapper_2z9fa_1:hover ._sectionControlsWrapper_2z9fa_5 {
  opacity: 1;
  transition: opacity 0.3s ease;
}

._sectionControlsWrapper_2z9fa_5 {
  position: sticky;
  top: 8px;
  right: -45px;
  z-index: 10;
  margin-right: -45px;
  float: right;
  opacity: 0;
}

._settingsSheet_2z9fa_20 {
  width: 480px !important;
  max-width: 100vw;
}
._settingsSheet_2z9fa_20 h2 {
  font-size: calc(var(--wz-font-size-base) * 1.25);
  font-weight: 600;
  color: var(--wz-color-text-primary);
  margin: 0;
}

._docHeader_2z9fa_31 {
  position: relative;
  width: 100%;
  min-height: 200px;
  padding: var(--wz-spacing-section);
  background: var(--wz-color-background);
  color: var(--wz-color-text-primary);
  transition: all 0.3s ease;
  overflow: hidden;
}
._docHeader_2z9fa_31 ._content_2z9fa_41 {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

@media print {
  ._docHeader_2z9fa_31 {
    min-height: auto;
    padding: 0;
    break-inside: avoid;
  }
  ._sectionControlsWrapper_2z9fa_5 {
    display: none;
  }
  ._settingsSheet_2z9fa_20 {
    display: none;
  }
}
@media (prefers-contrast: high) {
  ._docHeader_2z9fa_31 {
    border: 2px solid var(--wz-color-text-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._docHeader_2z9fa_31 {
    transition: none;
  }
  ._sectionControlsWrapper_2z9fa_5 {
    transition: none;
  }
}._tableSettings_1sr6j_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_1sr6j_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_1sr6j_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_1sr6j_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_1sr6j_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_1sr6j_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_1sr6j_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_1sr6j_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_1sr6j_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_1sr6j_47 ._layoutGrid_1sr6j_47 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_1sr6j_47 ._layoutGrid_1sr6j_47 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_1sr6j_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_1sr6j_59:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_1sr6j_59._selected_1sr6j_79 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_1sr6j_59._selected_1sr6j_79 ._layoutIcon_1sr6j_84 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_1sr6j_59 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_1sr6j_59 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_1sr6j_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_1sr6j_84 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_1sr6j_84 {
    margin-bottom: 6px;
  }
  ._layoutIcon_1sr6j_84 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_1sr6j_121 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_1sr6j_121 {
    font-size: 12px;
  }
}

._currencySettings_1sr6j_134 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

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

._positionLabel_1sr6j_152 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}

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

._radioItem_1sr6j_165 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
}
._radioItem_1sr6j_165:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._radioItem_1sr6j_165 input[type=radio] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-500);
}
._radioItem_1sr6j_165 input[type=radio]:not(:checked) {
  border-color: var(--neutral-300);
}
._radioItem_1sr6j_165 input[type=radio]:checked + span {
  font-weight: 600;
  color: var(--neutral-900);
}
._radioItem_1sr6j_165 span {
  font-size: 13px;
  color: var(--neutral-700);
  transition: all 0.2s ease;
}
@media (max-width: 640px) {
  ._radioItem_1sr6j_165 {
    min-height: 44px;
    padding: 12px 14px;
  }
  ._radioItem_1sr6j_165 span {
    font-size: 14px;
  }
  ._radioItem_1sr6j_165 input[type=radio] {
    width: 20px;
    height: 20px;
  }
}

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

._label_1sr6j_217 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}

._selectWrapper_1sr6j_224 {
  position: relative;
  display: flex;
  align-items: center;
}

._select_1sr6j_79 {
  flex: 1;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  color: var(--neutral-900);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}
._select_1sr6j_79:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._select_1sr6j_79:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
@media (max-width: 640px) {
  ._select_1sr6j_79 {
    min-height: 44px;
    padding: 12px 36px 12px 12px;
    font-size: 14px;
  }
}

._selectIcon_1sr6j_260 {
  position: absolute;
  right: 12px;
  color: var(--neutral-400);
  pointer-events: none;
}

._inputWrapper_1sr6j_267 {
  position: relative;
  display: flex;
  align-items: center;
}

._input_1sr6j_267 {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  color: var(--neutral-900);
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s ease;
}
._input_1sr6j_267:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._input_1sr6j_267:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
._input_1sr6j_267:has(+ ._inputPrefix_1sr6j_293) {
  padding-left: 32px;
}
._inputWrapper_1sr6j_267:has(._inputPrefix_1sr6j_293) ._input_1sr6j_267 {
  padding-left: 32px;
}
._inputWrapper_1sr6j_267:has(._inputSuffix_1sr6j_299) ._input_1sr6j_267 {
  padding-right: 32px;
}
@media (max-width: 640px) {
  ._input_1sr6j_267 {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 14px;
  }
  ._inputWrapper_1sr6j_267:has(._inputPrefix_1sr6j_293) ._input_1sr6j_267 {
    padding-left: 36px;
  }
  ._inputWrapper_1sr6j_267:has(._inputSuffix_1sr6j_299) ._input_1sr6j_267 {
    padding-right: 36px;
  }
}

._inputPrefix_1sr6j_293 {
  position: absolute;
  left: 12px;
  color: var(--neutral-500);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

._inputSuffix_1sr6j_299 {
  position: absolute;
  right: 12px;
  color: var(--neutral-500);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

._calculations_1sr6j_334 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._subsection_1sr6j_340 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  background: var(--neutral-50);
}

._nestedControls_1sr6j_349 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 28px;
  margin-top: 8px;
  border-left: 2px solid var(--neutral-200);
}
@media (max-width: 640px) {
  ._nestedControls_1sr6j_349 {
    padding-left: 16px;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  ._nestedControls_1sr6j_349 {
    padding-left: 12px;
    gap: 8px;
  }
}

._visibilityControls_1sr6j_370 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_1sr6j_59 {
    border-width: 2px;
  }
  ._layoutOption_1sr6j_59._selected_1sr6j_79 {
    border-width: 3px;
  }
  ._radioItem_1sr6j_165,
  ._select_1sr6j_79,
  ._input_1sr6j_267 {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_1sr6j_59,
  ._radioItem_1sr6j_165,
  ._select_1sr6j_79,
  ._input_1sr6j_267 {
    transition: none;
  }
  ._layoutOption_1sr6j_59:hover,
  ._radioItem_1sr6j_165:hover,
  ._select_1sr6j_79:hover,
  ._input_1sr6j_267:hover {
    transform: none;
  }
}
/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_vns1w_359 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_vns1w_359[data-layout-style="1"],
._wizard-container_vns1w_359[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_vns1w_359[data-layout-style="1"] ._wizard-section_vns1w_372,
._wizard-container_vns1w_359[style*="--wz-layout-style: 1"] ._wizard-section_vns1w_372 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_vns1w_359[data-layout-style="2"],
._wizard-container_vns1w_359[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_vns1w_359[data-layout-style="2"],
  ._wizard-container_vns1w_359[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_vns1w_359[data-layout-style="3"],
._wizard-container_vns1w_359[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_vns1w_359[data-layout-style="3"] ._wizard-section_vns1w_372,
._wizard-container_vns1w_359[style*="--wz-layout-style: 3"] ._wizard-section_vns1w_372 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* ===== SCSS VARIABLES (Build-time, not runtime) ===== */
/* These are constants that don't change dynamically */
/* ===== TABLE WRAPPER ===== */
._tableWrapper_vns1w_409 {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  position: relative;
  /* Remove horizontal scrolling */
  overflow-x: visible;
  /* Full width option for tables that need maximum space */
}
._tableWrapper_vns1w_409._fullWidth_vns1w_420 {
  margin: 0 calc(var(--wz-spacing-base) * -1);
  width: calc(100% + var(--wz-spacing-base) * 2);
  padding: 0 var(--wz-spacing-base);
}

/* ===== TABLE HEADER ===== */
._header_vns1w_427 {
  margin-bottom: calc(var(--wz-spacing-section) / 2);
  text-align: center;
}
._header_vns1w_427 h2 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-titles);
  font-weight: 600;
  color: var(--wz-color-text-primary);
  margin: 0;
  line-height: var(--wz-line-height-title);
}
._header_vns1w_427 p {
  font-family: var(--wz-font-family-body);
  color: var(--wz-color-text-secondary);
  margin: calc(var(--wz-spacing-base) / 3) 0 0;
  line-height: var(--wz-line-height-base);
  font-size: var(--wz-font-size-body);
}

/* ===== MAIN TABLE ===== */
._table_vns1w_409 {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--wz-spacing-base);
  font-family: var(--wz-font-family-body);
  table-layout: fixed;
  background: var(--wz-color-background);
  /* Table cells - unified styling */
}
._table_vns1w_409 th,
._table_vns1w_409 td {
  padding: 6px;
  border-bottom: 1px solid var(--wz-color-border-light);
  text-align: left;
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-base);
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
}
._table_vns1w_409 {
  /* Table headers */
}
._table_vns1w_409 th {
  background-color: rgba(0, 0, 0, 0.02);
  font-weight: 600;
  color: var(--wz-color-text-primary);
  white-space: nowrap;
  font-family: var(--wz-font-family-title);
  text-transform: uppercase;
  font-size: var(--wz-font-size-small);
  letter-spacing: 0.025em;
  border-bottom: 2px solid var(--wz-color-border-light);
}

/* ===== COLUMN DEFINITIONS ===== */
/* Percentage-based widths for responsive layout */
._descriptionColumn_vns1w_485 {
  width: 45%;
  text-align: left;
  max-width: 45%;
  overflow: hidden;
}

._extraWidth_vns1w_492 {
  width: auto !important;
}

._unitColumn_vns1w_496 {
  width: 10%;
  text-align: center;
  max-width: 10%;
}

._priceColumn_vns1w_502 {
  width: 15%;
  text-align: right !important;
  max-width: 15%;
}

._quantityColumn_vns1w_508 {
  width: 10%;
  text-align: center;
  max-width: 10%;
}

._totalColumn_vns1w_514 {
  width: 20%;
  text-align: right !important;
  max-width: 20%;
}
@media print {
  ._totalColumn_vns1w_514 {
    width: 100% !important;
    max-width: 100% !important;
    display: inline-flex !important;
  }
}

/* Column width adjustments when unit column is hidden are handled by CSS variables */
/* ===== ACTION COLUMN ===== */
/* Default action column - minimal width, just for the button */
._actionColumn_vns1w_530 {
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

/* ===== CONDITIONAL LAYOUT: QUANTITY HIDDEN ===== */
/* When quantity column is hidden, redistribute space and align price to the right */
._table_vns1w_409._hideQuantity_vns1w_542 ._descriptionColumn_vns1w_485 {
  width: 70%;
  max-width: 70%;
}
._table_vns1w_409._hideQuantity_vns1w_542 ._priceColumn_vns1w_502 {
  width: calc(30% - 50px); /* Remaining space minus action column */
  max-width: calc(30% - 50px);
}
._table_vns1w_409._hideQuantity_vns1w_542 {
  /* Keep action column minimal and fixed */
}
._table_vns1w_409._hideQuantity_vns1w_542 ._actionColumn_vns1w_530 {
  width: 50px;
  max-width: 50px;
}

/* ===== TABLE ROWS ===== */
._itemRow_vns1w_559 {
  position: relative;
  transition: background-color var(--wz-transition-fast);
}
._itemRow_vns1w_559:hover {
  background-color: var(--wz-color-bg-hover);
}
._itemRow_vns1w_559:hover ._removeButton_vns1w_566 {
  opacity: 1;
  visibility: visible;
}

/* ===== CELL CONTENT ===== */
._cellContent_vns1w_572 {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: var(--wz-line-height-base);
}
._cellContent_vns1w_572._multiline_vns1w_581 {
  white-space: normal;
  line-height: var(--wz-line-height-base);
  max-height: calc(var(--wz-line-height-base) * 3em);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Description column gets special text wrapping treatment */
._descriptionColumn_vns1w_485 ._cellContent_vns1w_572 {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(var(--wz-line-height-base) * 3em);
  line-height: var(--wz-line-height-base);
  /* Ensure InlineEditor content also wraps */
}
._descriptionColumn_vns1w_485 ._cellContent_vns1w_572 > div {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== PRICE INPUT STYLING ===== */
._priceInputWrapper_vns1w_613 {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all var(--wz-transition-fast);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--wz-color-border);
  background: var(--wz-color-background);
  height: auto;
}
._priceInputWrapper_vns1w_613:focus-within {
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

._currencySymbol_vns1w_630 {
  padding: calc(var(--wz-spacing-small) / 2) var(--wz-spacing-small);
  font-size: var(--wz-font-size-base);
  font-weight: 600;
  color: var(--wz-color-text-secondary);
  font-family: var(--wz-font-family-body);
  user-select: none;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.02);
  border-right: 1px solid var(--wz-color-border-light);
  display: flex;
  align-items: center;
  height: 100%;
}

._priceInput_vns1w_613 {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  padding: calc(var(--wz-spacing-small) / 2) var(--wz-spacing-small);
  font-size: var(--wz-font-size-base);
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  line-height: var(--wz-line-height-base);
  min-width: 0;
  width: 100%;
  font-feature-settings: "tnum";
}
._priceInput_vns1w_613:disabled {
  background: transparent;
  cursor: not-allowed;
  color: var(--wz-color-text-muted);
}
._priceInput_vns1w_613::placeholder {
  color: var(--wz-color-text-muted);
}
._priceInput_vns1w_613 {
  /* Remove spinner arrows */
}
._priceInput_vns1w_613::-webkit-outer-spin-button, ._priceInput_vns1w_613::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
._priceInput_vns1w_613[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ===== GENERAL INPUT STYLING ===== */
._table_vns1w_409 input {
  width: 100%;
  max-width: 100%;
  padding: calc(var(--wz-spacing-small) / 2) var(--wz-spacing-small);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--wz-font-size-base);
  color: var(--wz-color-text-primary);
  background: transparent;
  transition: all var(--wz-transition-fast);
  font-family: var(--wz-font-family-body);
  line-height: var(--wz-line-height-base);
  box-sizing: border-box;
  min-width: 0;
}
._table_vns1w_409 input:hover {
  background: rgba(0, 0, 0, 0.02);
}
._table_vns1w_409 input:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
._table_vns1w_409 input:disabled {
  background: rgba(0, 0, 0, 0.02);
  cursor: not-allowed;
  color: var(--wz-color-text-muted);
}
._table_vns1w_409 input::placeholder {
  color: var(--wz-color-text-muted);
}

/* ===== TEXTAREA STYLING ===== */
._table_vns1w_409 textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--wz-spacing-small);
  border: 1px solid var(--wz-color-border-light);
  border-radius: 4px;
  font-size: var(--wz-font-size-base);
  color: var(--wz-color-text-primary);
  background: var(--wz-color-background);
  transition: all var(--wz-transition-fast);
  font-family: var(--wz-font-family-body);
  line-height: var(--wz-line-height-base);
  resize: vertical;
  min-height: 2.5em;
  max-height: 8em;
  box-sizing: border-box;
}
._table_vns1w_409 textarea:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* ===== REMOVE BUTTON ===== */
._removeButton_vns1w_566 {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wz-color-background);
  color: var(--wz-color-text-muted);
  cursor: pointer;
  transition: all var(--wz-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--wz-shadow-small);
  z-index: 10;
  margin: 0 auto; /* Center in action column */
  flex-shrink: 0;
}
._removeButton_vns1w_566:hover {
  background: var(--wz-color-bg-hover);
  color: var(--wz-color-danger);
  transform: scale(1.05);
  box-shadow: var(--wz-shadow-medium);
}
._removeButton_vns1w_566:focus {
  outline: 2px solid var(--wz-color-danger);
  outline-offset: 2px;
  opacity: 1;
  visibility: visible;
}
._removeButton_vns1w_566:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
}

/* Show remove button on row hover */
._itemRow_vns1w_559:hover ._removeButton_vns1w_566 {
  opacity: 1;
  visibility: visible;
}

/* ===== ADD BUTTON CONTAINER ===== */
._addButtonContainer_vns1w_782 {
  text-align: center;
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
._addButtonContainer_vns1w_782 button {
  width: 100%;
}

._addButton_vns1w_782 {
  margin: 0 auto;
  align-items: center;
  gap: var(--wz-spacing-small);
  width: 100%;
}

/* ===== TOTALS SECTION ===== */
._totalsSection_vns1w_802 {
  margin-top: var(--wz-spacing-base);
  margin-bottom: var(--wz-spacing-base);
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

._totalsBox_vns1w_810 {
  background: var(--wz-color-background);
  border: 1px solid var(--wz-color-border-light);
  border-radius: 8px;
  padding: var(--wz-spacing-base);
  min-width: 250px;
  max-width: 350px;
  box-shadow: var(--wz-shadow-small);
  font-family: var(--wz-font-family-body);
  flex-shrink: 0;
}

._totalsRow_vns1w_822 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: var(--wz-font-size-base);
  color: var(--wz-color-text-primary);
  line-height: var(--wz-line-height-base);
  /* Remove bottom border from second-to-last row when followed by the Total row */
}
._totalsRow_vns1w_822:not(:last-child):not(:nth-last-child(2)) {
  border-bottom: 1px solid var(--wz-color-border-light);
}
._totalsRow_vns1w_822:last-child {
  border-top: 2px solid var(--wz-color-border-light);
  padding-top: var(--wz-spacing-small);
  margin-top: var(--wz-spacing-small);
  font-weight: 700;
  font-size: var(--wz-font-size-base);
}
._totalsRow_vns1w_822:last-child ._totalsLabel_vns1w_842,
._totalsRow_vns1w_822:last-child ._totalsValue_vns1w_843 {
  color: var(--wz-color-text-primary);
  font-weight: 700;
}

._totalsLabel_vns1w_842 {
  color: var(--wz-color-text-secondary);
  font-weight: 500;
  font-family: var(--wz-font-family-body);
}

._totalsValue_vns1w_843 {
  font-weight: 600;
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  font-feature-settings: "tnum";
}

._totalValue_vns1w_861 {
  font-weight: 600;
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  font-feature-settings: "tnum";
  text-align: right;
  display: block;
  white-space: nowrap;
}

._priceValue_vns1w_871 {
  font-weight: 600;
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  font-feature-settings: "tnum";
  text-align: right;
  display: block;
  white-space: nowrap;
  padding: calc(var(--wz-spacing-small) / 2) var(--wz-spacing-small);
}

/* ===== RESPONSIVE DESIGN ===== */
/* Desktop/Tablet Layout - Hide mobile cards */
@media (min-width: 769px) {
  ._mobileCards_vns1w_885 {
    display: none;
  }
}
/* Tablet Layout */
@media (max-width: 1024px) {
  ._table_vns1w_409 {
    width: 100%;
  }
  /* Adjust column widths for tablet - give more space to description */
  ._descriptionColumn_vns1w_485 {
    width: 50%;
    max-width: 50%;
  }
  ._unitColumn_vns1w_496 {
    width: 10%;
    max-width: 10%;
  }
  ._priceColumn_vns1w_502 {
    width: 15%;
    max-width: 15%;
  }
  ._quantityColumn_vns1w_508 {
    width: 10%;
    max-width: 10%;
  }
  ._totalColumn_vns1w_514 {
    width: 15%;
    max-width: 15%;
  }
  /* When quantity is hidden on tablet, adjust widths */
  ._table_vns1w_409._hideQuantity_vns1w_542 ._descriptionColumn_vns1w_485 {
    width: 65%;
    max-width: 65%;
  }
  ._table_vns1w_409._hideQuantity_vns1w_542 ._priceColumn_vns1w_502 {
    width: calc(35% - 50px);
    max-width: calc(35% - 50px);
  }
  ._table_vns1w_409._hideQuantity_vns1w_542 ._actionColumn_vns1w_530 {
    width: 50px;
    max-width: 50px;
  }
  ._removeButton_vns1w_566 {
    opacity: 1;
    visibility: visible;
  }
  ._totalsBox_vns1w_810 {
    min-width: 220px;
  }
}
/* ===== TABLE SCROLL CONTAINER ===== */
/* Wraps only the <table> element so horizontal scroll doesn't affect totals/notes */
._tableScrollContainer_vns1w_938 {
  width: 100%;
}

/* Mobile Layout - Horizontal Scroll Table */
@media (max-width: 768px) {
  /* Scroll container wraps only the table — totals/notes stay outside */
  ._tableScrollContainer_vns1w_938 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  /* Table with minimum width to enable horizontal scroll */
  ._table_vns1w_409 {
    min-width: 550px;
  }
  ._table_vns1w_409 th,
  ._table_vns1w_409 td {
    padding: 8px 10px;
    font-size: 13px;
  }
  ._table_vns1w_409 th {
    font-size: 11px;
  }
  /* Mobile column widths */
  ._descriptionColumn_vns1w_485 {
    width: 40%;
    min-width: 160px;
  }
  ._unitColumn_vns1w_496 {
    width: 12%;
    min-width: 55px;
  }
  ._priceColumn_vns1w_502 {
    width: 15%;
    min-width: 70px;
  }
  ._quantityColumn_vns1w_508 {
    width: 12%;
    min-width: 50px;
  }
  ._totalColumn_vns1w_514 {
    width: 18%;
    min-width: 80px;
  }
  ._actionColumn_vns1w_530 {
    width: 36px;
    min-width: 36px;
  }
  /* Always show remove button on mobile (no hover on touch) */
  ._removeButton_vns1w_566 {
    opacity: 1;
    visibility: visible;
  }
  /* Totals section stays outside scroll container — center it on mobile */
  ._totalsSection_vns1w_802 {
    justify-content: center;
  }
  ._totalsBox_vns1w_810 {
    min-width: 240px;
    padding: var(--wz-spacing-small);
    margin-top: var(--wz-spacing-base);
  }
  ._totalsRow_vns1w_822 {
    font-size: calc(var(--wz-font-size-base) * 0.9);
  }
  ._totalsRow_vns1w_822:last-child {
    font-size: var(--wz-font-size-base);
  }
  /* Add button styling for mobile */
  ._addButtonContainer_vns1w_782 {
    margin-top: var(--wz-spacing-base);
  }
}
/* ===== ACCESSIBILITY & MOTION ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
  ._table_vns1w_409 th,
  ._table_vns1w_409 td {
    border-bottom: 2px solid;
  }
  ._removeButton_vns1w_566 {
    border: 1px solid;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ._itemRow_vns1w_559,
  ._removeButton_vns1w_566,
  ._priceInputWrapper_vns1w_613,
  ._table_vns1w_409 input {
    transition: none;
  }
}
/* ===== SAVING INDICATOR ===== */
._savingIndicator_vns1w_1033 {
  position: absolute;
  top: calc(var(--wz-spacing-base) * -2);
  right: 0;
  background: var(--wz-color-success);
  color: var(--wz-color-text-inverse);
  padding: calc(var(--wz-spacing-base) / 3) var(--wz-spacing-small);
  border-radius: 4px;
  font-size: calc(var(--wz-font-size-base) * 0.75);
  font-weight: 500;
  box-shadow: var(--wz-shadow-small);
  z-index: 100;
  animation: _fadeInOut_vns1w_1 2s ease-in-out;
}
._savingIndicator_vns1w_1033::before {
  content: "✓ ";
  margin-right: calc(var(--wz-spacing-base) / 4);
}

@keyframes _fadeInOut_vns1w_1 {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* ===== EDITABLE TOTALS ===== */
._editableTotalWrapper_vns1w_1071 {
  display: flex;
  align-items: center;
  min-width: 120px;
}

._editableTotal_vns1w_1071 {
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  background: var(--wz-color-background);
  padding: calc(var(--wz-spacing-base) / 4) calc(var(--wz-spacing-base) / 2);
  font-size: var(--wz-font-size-base);
  font-weight: 600;
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  text-align: right;
  width: 100%;
  min-width: 0;
  font-feature-settings: "tnum";
  transition: all var(--wz-transition-fast);
}
._editableTotal_vns1w_1071:focus {
  outline: none;
  border-color: var(--wz-color-info);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
._editableTotal_vns1w_1071:disabled {
  background: var(--wz-color-bg-muted);
  color: var(--wz-color-text-muted);
  cursor: not-allowed;
}
._editableTotal_vns1w_1071::placeholder {
  color: var(--wz-color-text-muted);
  font-weight: normal;
}

/* ===== NOTES SECTION ===== */
._notesSection_vns1w_1108 {
  margin-top: var(--wz-spacing-base);
  margin-bottom: calc(var(--wz-spacing-base) / 2);
}

._notesWrapper_vns1w_1113 {
  background: rgba(0, 0, 0, 0.01);
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-medium);
  padding: var(--wz-spacing-base);
}

._notesText_vns1w_1120 {
  font-size: calc(var(--wz-font-size-base) * 0.9);
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  line-height: var(--wz-line-height-relaxed);
  white-space: pre-wrap;
  min-height: 20px;
}
._notesText_vns1w_1120:empty::before {
  content: "Add footer notes here...";
  color: var(--wz-color-text-muted);
  font-style: italic;
}

._notesInput_vns1w_1134 {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: calc(var(--wz-font-size-base) * 0.9);
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-family-body);
  line-height: var(--wz-line-height-relaxed);
  resize: vertical;
  min-height: 60px;
  transition: all var(--wz-transition-fast);
}
._notesInput_vns1w_1134:focus {
  outline: none;
}
._notesInput_vns1w_1134::placeholder {
  color: var(--wz-color-text-muted);
  font-style: italic;
}

/* ===== RESPONSIVE NOTES ===== */
@media (max-width: 768px) {
  ._notesWrapper_vns1w_1113 {
    padding: calc(var(--wz-spacing-base) * 0.75);
  }
  ._notesInput_vns1w_1134 {
    font-size: calc(var(--wz-font-size-base) * 0.85);
  }
}
/* ===== PRINT STYLES MOVED TO TableSection.print.css ===== */
/* All print styles have been moved to the dedicated print CSS file for better separation of concerns */._faqSettings_1eanb_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_1eanb_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_1eanb_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_1eanb_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_1eanb_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_1eanb_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_1eanb_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_1eanb_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_1eanb_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_1eanb_47 ._layoutGrid_1eanb_47 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_1eanb_47 ._layoutGrid_1eanb_47 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_1eanb_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_1eanb_59:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_1eanb_59._selected_1eanb_79 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_1eanb_59._selected_1eanb_79 ._layoutIcon_1eanb_84 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_1eanb_59 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_1eanb_59 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_1eanb_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_1eanb_84 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_1eanb_84 {
    margin-bottom: 6px;
  }
  ._layoutIcon_1eanb_84 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_1eanb_121 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_1eanb_121 {
    font-size: 12px;
  }
}

._visibilityControls_1eanb_134 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_1eanb_59 {
    border-width: 2px;
  }
  ._layoutOption_1eanb_59._selected_1eanb_79 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_1eanb_59 {
    transition: none;
  }
  ._layoutOption_1eanb_59:hover {
    transform: none;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_gctta_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_gctta_358[data-layout-style="1"],
._wizard-container_gctta_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_gctta_358[data-layout-style="1"] ._wizard-section_gctta_371,
._wizard-container_gctta_358[style*="--wz-layout-style: 1"] ._wizard-section_gctta_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_gctta_358[data-layout-style="2"],
._wizard-container_gctta_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_gctta_358[data-layout-style="2"],
  ._wizard-container_gctta_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_gctta_358[data-layout-style="3"],
._wizard-container_gctta_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_gctta_358[data-layout-style="3"] ._wizard-section_gctta_371,
._wizard-container_gctta_358[style*="--wz-layout-style: 3"] ._wizard-section_gctta_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* ========================= FAQSection.module.scss ========================= */
/* FAQ section styles with wizard variables and responsive behavior */
._faqSection_gctta_407 {
  width: 100%;
  font-family: var(--wz-font-family-body);
  /* Apply responsive grid system */
  display: grid;
  grid-template-columns: repeat(var(--wz-grid-columns-desktop), 1fr);
  gap: var(--wz-grid-gap);
}
@media (max-width: 768px) {
  ._faqSection_gctta_407 {
    grid-template-columns: repeat(var(--wz-grid-columns-mobile), 1fr);
    gap: calc(var(--wz-grid-gap) * 0.75);
  }
}
._faqSection_gctta_407 {
  /* Loading state */
}
._faqSection__loading_gctta_424 {
  grid-column: 1/-1;
  padding: var(--wz-spacing-section);
  text-align: center;
  color: var(--wz-color-text-secondary);
  font-style: italic;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
}
._faqSection_gctta_407 {
  /* Error state - FIXED: Use CSS variables instead of hard-coded colors */
}
._faqSection__error_gctta_436 {
  grid-column: 1/-1;
  padding: var(--wz-spacing-section);
  background: color-mix(in srgb, var(--wz-color-error) 10%, transparent);
  border: var(--wz-faq-border-width) solid color-mix(in srgb, var(--wz-color-error) 30%, transparent);
  border-radius: var(--wz-border-radius-small);
  color: var(--wz-color-error);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
}

/* ===== FAQ LIST CONTAINER ===== */
._faqList_gctta_448 {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: var(--wz-faq-item-spacing);
  width: 100%;
  /* FIXED: Remove RGB dependency and use proper CSS variables */
}
._faqList_gctta_448._draggingOver_gctta_456 {
  background: color-mix(in srgb, var(--wz-color-primary) 5%, transparent);
  border-radius: var(--wz-border-radius-medium);
  transition: background-color var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
}

/* ===== INDIVIDUAL FAQ ITEM ===== */
._faqItem_gctta_463 {
  position: relative;
  background: var(--wz-color-card-background);
  border: var(--wz-faq-border-width) solid var(--wz-faq-border-color);
  border-radius: var(--wz-faq-border-radius);
  overflow: hidden;
  transition: all var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
  /* Accessibility: Focus management */
}
._faqItem_gctta_463:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._faqItem_gctta_463:hover {
  border-color: var(--wz-faq-expanded-border);
  box-shadow: var(--wz-shadow-medium);
  background: var(--wz-faq-hover-background);
}
._faqItem_gctta_463._expanded_gctta_481 {
  border-color: var(--wz-faq-expanded-border);
}
._faqItem_gctta_463._expanded_gctta_481 ._faqItemHeader_gctta_484 {
  border-bottom: var(--wz-faq-border-width) solid var(--wz-faq-border-color);
}
._faqItem_gctta_463._expanded_gctta_481 ._faqIcon_gctta_487 {
  transform: rotate(180deg);
  color: var(--wz-faq-expanded-border);
}
._faqItem_gctta_463._dragging_gctta_456 {
  transform: rotate(2deg) scale(1.02);
  box-shadow: var(--wz-shadow-large);
  z-index: 1000;
  border-color: var(--wz-color-primary);
}
._faqItem_gctta_463 {
  /* Reduced motion support */
}
@media (prefers-reduced-motion: reduce) {
  ._faqItem_gctta_463._dragging_gctta_456 {
    transform: scale(1.02);
  }
  ._faqItem_gctta_463 ._faqIcon_gctta_487 {
    transition: none;
  }
}

/* ===== FAQ ITEM HEADER ===== */
._faqItemHeader_gctta_484 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-small);
  padding: var(--wz-faq-internal-padding);
  cursor: pointer;
  transition: background-color var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
  /* Improved accessibility */
  position: relative;
}
._faqItemHeader_gctta_484:hover {
  background: var(--wz-faq-hover-background);
}
._faqItemHeader_gctta_484 {
  /* Focus management for keyboard navigation */
}
._faqItemHeader_gctta_484:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: -2px;
}
._faqItemHeader_gctta_484 ._dragHandle_gctta_530 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wz-faq-icon-size);
  height: var(--wz-faq-icon-size);
  cursor: grab;
  color: var(--wz-color-text-muted);
  transition: all var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
  border-radius: var(--wz-border-radius-small);
}
._faqItemHeader_gctta_484 ._dragHandle_gctta_530:hover {
  color: var(--wz-color-text-secondary);
  background: var(--wz-faq-hover-background);
  transform: scale(var(--wz-faq-icon-hover-scale));
}
._faqItemHeader_gctta_484 ._dragHandle_gctta_530:active {
  cursor: grabbing;
}
._faqItemHeader_gctta_484 ._faqIcon_gctta_487 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wz-faq-icon-size);
  height: var(--wz-faq-icon-size);
  cursor: pointer;
  color: var(--wz-color-primary);
  transition: all var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
  border-radius: var(--wz-border-radius-small);
  flex-shrink: 0;
  /* Accessibility improvements */
}
._faqItemHeader_gctta_484 ._faqIcon_gctta_487:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._faqItemHeader_gctta_484 ._faqIcon_gctta_487:hover {
  background: color-mix(in srgb, var(--wz-color-primary) 10%, transparent);
  transform: scale(var(--wz-faq-icon-hover-scale));
}
._faqItemHeader_gctta_484 ._faqIcon_gctta_487[tabindex="-1"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
._faqItemHeader_gctta_484 ._faqQuestion_gctta_575 {
  flex: 1;
  cursor: pointer;
  min-width: 0; /* Prevents text overflow issues */
}
._faqItemHeader_gctta_484 ._faqQuestion_gctta_575 ._questionEditor_gctta_580 {
  font-weight: var(--wz-faq-question-weight);
  font-size: calc(var(--wz-font-size-body) * var(--wz-faq-question-multiplier));
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-primary);
  word-wrap: break-word;
}
._faqItemHeader_gctta_484 ._faqQuestion_gctta_575 span {
  font-weight: var(--wz-faq-question-weight);
  font-size: calc(var(--wz-font-size-body) * var(--wz-faq-question-multiplier));
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-primary);
  word-wrap: break-word;
}
._faqItemHeader_gctta_484 ._removeButton_gctta_594 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wz-faq-icon-size);
  height: var(--wz-faq-icon-size);
  cursor: pointer;
  color: var(--wz-color-text-muted);
  transition: all var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
  border-radius: var(--wz-border-radius-small);
  flex-shrink: 0;
  /* Accessibility */
}
._faqItemHeader_gctta_484 ._removeButton_gctta_594:focus {
  outline: 2px solid var(--wz-color-danger);
  outline-offset: 2px;
}
._faqItemHeader_gctta_484 ._removeButton_gctta_594:hover {
  background: color-mix(in srgb, var(--wz-color-danger) 10%, transparent);
  color: var(--wz-color-danger);
  transform: scale(var(--wz-faq-icon-hover-scale));
}

/* ===== FAQ ANSWER ===== */
._faqAnswer_gctta_618 {
  padding: var(--wz-faq-internal-padding);
  padding-top: var(--wz-faq-question-answer-spacing);
  /* IMPROVED: Better animation using transform instead of height-based */
  transform-origin: top;
  animation: _expandAnswer_gctta_1 var(--wz-faq-animation-duration) var(--wz-faq-animation-easing);
}
._faqAnswer_gctta_618 ._answerContent_gctta_625 {
  font-size: calc(var(--wz-font-size-body) * var(--wz-faq-answer-multiplier));
  line-height: var(--wz-line-height-relaxed);
  color: var(--wz-color-text-secondary);
  opacity: var(--wz-faq-answer-opacity);
  white-space: pre-wrap;
  word-wrap: break-word;
  /* Better text formatting */
}
._faqAnswer_gctta_618 ._answerContent_gctta_625 p {
  margin: 0 0 var(--wz-spacing-small) 0;
}
._faqAnswer_gctta_618 ._answerContent_gctta_625 p:last-child {
  margin-bottom: 0;
}
._faqAnswer_gctta_618 ._answerEditor_gctta_640 {
  width: 100%;
  min-height: 60px;
  font-size: calc(var(--wz-font-size-body) * var(--wz-faq-answer-multiplier));
  line-height: var(--wz-line-height-relaxed);
  color: var(--wz-color-text-secondary);
  opacity: var(--wz-faq-answer-opacity);
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
}
._faqAnswer_gctta_618 ._answerEditor_gctta_640:focus {
  opacity: 1;
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

/* ===== ADD ITEM CONTAINER ===== */
._addItemContainer_gctta_659 {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  padding: var(--wz-spacing-section) 0;
  margin-top: var(--wz-spacing-medium);
}
._addItemContainer_gctta_659 ._addButton_gctta_666 {
  display: flex;
  align-items: center;
  flex: 1;
  /* Enhanced button styling */
}
._addItemContainer_gctta_659 ._addButton_gctta_666:hover {
  transform: translateY(-2px);
  border-color: var(--wz-color-primary);
  background: var(--wz-faq-hover-background);
  box-shadow: var(--wz-shadow-small);
}
._addItemContainer_gctta_659 ._addButton_gctta_666:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._addItemContainer_gctta_659 ._addButton_gctta_666 {
  /* Reduced motion support */
}
@media (prefers-reduced-motion: reduce) {
  ._addItemContainer_gctta_659 ._addButton_gctta_666:hover {
    transform: none;
  }
}

/* ===== BEHAVIOR-SPECIFIC STYLES ===== */
/* Accordion behavior */
._faqSection_gctta_407[data-behavior=accordion] ._faqItem_gctta_463:not(._expanded_gctta_481) ._faqAnswer_gctta_618 {
  display: none;
}

/* Static behavior */
._faqSection_gctta_407[data-behavior=static] ._faqIcon_gctta_487 {
  opacity: 0.5;
  cursor: not-allowed;
}
._faqSection_gctta_407[data-behavior=static] ._faqItemHeader_gctta_484 {
  cursor: default;
}
._faqSection_gctta_407[data-behavior=static] ._faqItemHeader_gctta_484:hover {
  background: transparent;
}
._faqSection_gctta_407[data-behavior=static] ._faqQuestion_gctta_575 {
  cursor: default;
}

/* Cards behavior */
._faqSection_gctta_407[data-behavior=cards] ._faqList_gctta_448 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--wz-spacing-large);
}
._faqSection_gctta_407[data-behavior=cards] ._faqItem_gctta_463 {
  height: fit-content;
}

/* List behavior */
._faqSection_gctta_407[data-behavior=list] ._faqItem_gctta_463 {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
._faqSection_gctta_407[data-behavior=list] ._faqItem_gctta_463:last-child {
  border-bottom: none;
}

/* ===== IMPROVED ANIMATION SYSTEM ===== */
/* FIXED: Transform-based animations that don't depend on fixed heights */
@keyframes _expandAnswer_gctta_1 {
  from {
    opacity: 0;
    transform: scaleY(0.8) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}
@keyframes _collapseAnswer_gctta_1 {
  from {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scaleY(0.8) translateY(-8px);
  }
}
/* Smooth icon rotation */
@keyframes _rotateIcon_gctta_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  ._faqAnswer_gctta_618 {
    animation: none;
  }
  ._faqIcon_gctta_487 {
    transition: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* Animation speed variations */
._faqSection_gctta_407[data-animation-speed=fast] ._faqAnswer_gctta_618 {
  animation-duration: 0.15s;
}
._faqSection_gctta_407[data-animation-speed=fast] ._faqItem_gctta_463 {
  transition-duration: 0.15s;
}

._faqSection_gctta_407[data-animation-speed=medium] ._faqAnswer_gctta_618 {
  animation-duration: 0.3s;
}
._faqSection_gctta_407[data-animation-speed=medium] ._faqItem_gctta_463 {
  transition-duration: 0.3s;
}

._faqSection_gctta_407[data-animation-speed=slow] ._faqAnswer_gctta_618 {
  animation-duration: 0.5s;
}
._faqSection_gctta_407[data-animation-speed=slow] ._faqItem_gctta_463 {
  transition-duration: 0.5s;
}

/* ===== RESPONSIVE BEHAVIOR ===== */
@media (max-width: 768px) {
  ._faqSection_gctta_407[data-behavior=cards] ._faqList_gctta_448 {
    grid-template-columns: 1fr;
  }
  ._faqItemHeader_gctta_484 {
    padding: var(--wz-spacing-small);
  }
  ._faqItemHeader_gctta_484 ._dragHandle_gctta_530 {
    width: 16px;
    height: 16px;
  }
  ._faqItemHeader_gctta_484 ._faqIcon_gctta_487 {
    width: 20px;
    height: 20px;
  }
  ._faqItemHeader_gctta_484 ._removeButton_gctta_594 {
    width: 20px;
    height: 20px;
  }
  ._faqAnswer_gctta_618 {
    padding: var(--wz-spacing-small);
    padding-top: 0;
  }
}
/* ===== ACCESSIBILITY ===== */
._faqItem_gctta_463:focus-within {
  outline: 2px solid var(--wz-color-primary, #3b82f6);
  outline-offset: 2px;
}

._faqIcon_gctta_487:focus,
._removeButton_gctta_594:focus {
  outline: 2px solid var(--wz-color-primary, #3b82f6);
  outline-offset: 2px;
}

/* ===== ENHANCED PRINT STYLES ===== */
@media print {
  ._dragHandle_gctta_530,
  ._removeButton_gctta_594,
  ._addItemContainer_gctta_659 {
    display: none !important;
  }
  ._faqSection_gctta_407 {
    display: block !important;
    grid-template-columns: none !important;
  }
  ._faqList_gctta_448 {
    display: block !important;
    grid-template-columns: none !important;
  }
  ._faqItem_gctta_463 {
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    break-inside: avoid;
    box-shadow: none !important;
    /* Ensure all content is visible */
  }
  ._faqItem_gctta_463._expanded_gctta_481 ._faqAnswer_gctta_618, ._faqItem_gctta_463:not(._expanded_gctta_481) ._faqAnswer_gctta_618 {
    display: block !important;
    animation: none !important;
  }
  ._faqItemHeader_gctta_484 {
    border-bottom: 1px solid #ccc !important;
    background: #f5f5f5 !important;
  }
  ._faqItemHeader_gctta_484 ._faqIcon_gctta_487 {
    display: none !important;
  }
  ._faqQuestion_gctta_575 ._questionEditor_gctta_580,
  ._faqQuestion_gctta_575 span {
    font-weight: bold !important;
    color: #000 !important;
  }
  ._faqAnswer_gctta_618 ._answerContent_gctta_625 {
    color: #333 !important;
    opacity: 1 !important;
  }
  /* Page break handling */
  ._faqItem_gctta_463 {
    page-break-inside: avoid;
  }
  ._faqList_gctta_448 {
    orphans: 2;
    widows: 2;
  }
}
/* ===== ENHANCED ACCESSIBILITY ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
  ._faqItem_gctta_463 {
    border-width: 2px;
  }
  ._faqItem_gctta_463._expanded_gctta_481 {
    border-width: 3px;
  }
  ._faqIcon_gctta_487:focus,
  ._removeButton_gctta_594:focus,
  ._dragHandle_gctta_530:focus {
    outline-width: 3px;
  }
}
/* Focus management for screen readers */
._faqItem_gctta_463[aria-expanded=true] ._faqAnswer_gctta_618 {
  /* Ensure content is announced when expanded */
}
._faqItem_gctta_463[aria-expanded=true] ._faqAnswer_gctta_618:focus {
  outline: none;
}

/* Keyboard navigation improvements */
._faqItemHeader_gctta_484 {
  /* Make entire header focusable for keyboard users */
}
._faqItemHeader_gctta_484[tabindex="0"]:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

/* Screen reader only content */
._sr-only_gctta_921 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}._pricingTiersSettings_erly8_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_erly8_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_erly8_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_erly8_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_erly8_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_erly8_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_erly8_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_erly8_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_erly8_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_erly8_47 ._layoutGrid_erly8_47 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_erly8_47 ._layoutGrid_erly8_47 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_erly8_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_erly8_59:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_erly8_59._selected_erly8_79 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_erly8_59._selected_erly8_79 ._layoutIcon_erly8_84 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_erly8_59 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_erly8_59 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_erly8_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_erly8_84 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_erly8_84 {
    margin-bottom: 6px;
  }
  ._layoutIcon_erly8_84 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_erly8_121 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_erly8_121 {
    font-size: 12px;
  }
}

._layoutDescription_erly8_134 {
  font-size: 11px;
  color: var(--neutral-500);
  margin-top: 4px;
  line-height: 1.3;
}
@media (max-width: 480px) {
  ._layoutDescription_erly8_134 {
    font-size: 10px;
    margin-top: 2px;
  }
}

._currencySettings_erly8_147 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._currencySelector_erly8_153 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._label_erly8_159 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
}

._selectWrapper_erly8_165 {
  position: relative;
  display: flex;
  align-items: center;
}

._select_erly8_79 {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: var(--neutral-900);
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}
._select_erly8_79:hover {
  border-color: var(--neutral-300);
}
._select_erly8_79:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
._select_erly8_79:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectIcon_erly8_196 {
  position: absolute;
  right: 12px;
  color: var(--neutral-400);
  pointer-events: none;
}

._visibilityControls_erly8_203 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._toggleGroup_erly8_209 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._toggleLabel_erly8_215 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--neutral-700);
  cursor: pointer;
}
._toggleLabel_erly8_215 input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-500);
  cursor: pointer;
}
._toggleLabel_erly8_215 span {
  flex: 1;
}
._toggleLabel_erly8_215:hover {
  color: var(--neutral-900);
}

._cardsSettings_erly8_236 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

@media (prefers-contrast: high) {
  ._layoutOption_erly8_59 {
    border-width: 2px;
  }
  ._layoutOption_erly8_59._selected_erly8_79 {
    border-width: 3px;
  }
  ._select_erly8_79 {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_erly8_59,
  ._select_erly8_79 {
    transition: none;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_14ka3_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_14ka3_358[data-layout-style="1"],
._wizard-container_14ka3_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_14ka3_358[data-layout-style="1"] ._wizard-section_14ka3_371,
._wizard-container_14ka3_358[style*="--wz-layout-style: 1"] ._wizard-section_14ka3_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_14ka3_358[data-layout-style="2"],
._wizard-container_14ka3_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_14ka3_358[data-layout-style="2"],
  ._wizard-container_14ka3_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_14ka3_358[data-layout-style="3"],
._wizard-container_14ka3_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_14ka3_358[data-layout-style="3"] ._wizard-section_14ka3_371,
._wizard-container_14ka3_358[style*="--wz-layout-style: 3"] ._wizard-section_14ka3_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._pricingTiersSection_14ka3_405 {
  width: 100%;
  padding: var(--wz-spacing-md, 16px) 0;
}

._tiersContainer_14ka3_410 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wz-spacing-lg, 24px);
  justify-content: center;
  padding-top: 16px;
}
._tiersContainer_14ka3_410._cardsLayout_14ka3_417 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}
._tiersContainer_14ka3_410._cardsLayout_14ka3_417._oneTier_14ka3_423 {
  grid-template-columns: 1fr;
  max-width: 340px;
}
._tiersContainer_14ka3_410._cardsLayout_14ka3_417._twoTiers_14ka3_427 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}
._tiersContainer_14ka3_410._cardsLayout_14ka3_417._threeTiers_14ka3_431 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}
._tiersContainer_14ka3_410._cardsLayout_14ka3_417._fourTiers_14ka3_435 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}
._tiersContainer_14ka3_410._verticalLayout_14ka3_439 {
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}
._tiersContainer_14ka3_410._tableLayout_14ka3_445 {
  display: block;
  overflow-x: auto;
}
._tiersContainer_14ka3_410._draggingOver_14ka3_449 {
  background-color: var(--wz-color-background-subtle, rgba(0, 0, 0, 0.02));
  border-radius: var(--wz-radius-md, 8px);
}

._tierCard_14ka3_454 {
  width: 100%;
  background: var(--wz-color-background, #ffffff);
  border: 1px solid var(--wz-color-border, #e5e7eb);
  border-radius: var(--wz-radius-lg, 12px);
  padding: var(--wz-spacing-lg, 24px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: visible;
}
._tierCard_14ka3_454:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
._tierCard_14ka3_454._highlighted_14ka3_468 {
  border-color: var(--wz-color-primary, #3b82f6);
  border-width: 2px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
._tierCard_14ka3_454._dragging_14ka3_449 {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: rotate(1deg);
}
._verticalLayout_14ka3_439 ._tierCard_14ka3_454 {
  max-width: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wz-spacing-lg, 24px);
}

._tierHeader_14ka3_487 {
  display: flex;
  align-items: flex-start;
  gap: var(--wz-spacing-sm, 8px);
  margin-bottom: var(--wz-spacing-md, 16px);
}
._verticalLayout_14ka3_439 ._tierHeader_14ka3_487 {
  flex: 1 1 auto;
  margin-bottom: 0;
  align-items: center;
}

._dragHandle_14ka3_499 {
  cursor: grab;
  color: var(--wz-color-text-muted, #9ca3af);
  padding: var(--wz-spacing-xs, 4px);
  border-radius: var(--wz-radius-sm, 4px);
  transition: color 0.15s ease, background-color 0.15s ease;
}
._dragHandle_14ka3_499:hover {
  color: var(--wz-color-text-secondary, #6b7280);
  background-color: var(--wz-color-background-subtle, #f3f4f6);
}
._dragHandle_14ka3_499:active {
  cursor: grabbing;
}

._tierInfo_14ka3_514 {
  flex: 1;
}

._tierBadge_14ka3_518 {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wz-color-primary, #3b82f6);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

._badgeRemove_14ka3_539 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
  margin-left: 2px;
}
._badgeRemove_14ka3_539:hover {
  color: white;
  background: rgba(0, 0, 0, 0.2);
}

._tierName_14ka3_557 {
  font-size: var(--wz-font-size-lg, 20px);
  font-weight: 600;
  color: var(--wz-color-text-primary, #1f2937);
  margin: 0 0 var(--wz-spacing-xs, 4px) 0;
}

._tierDescription_14ka3_564 {
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
  margin: 0;
  line-height: 1.5;
}
._verticalLayout_14ka3_439 ._tierDescription_14ka3_564 {
  display: none;
}

._verticalTierDescription_14ka3_574 {
  flex: 0 0 100%;
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
  line-height: 1.5;
  margin: 0;
}

._tierActions_14ka3_582 {
  display: flex;
  gap: var(--wz-spacing-xs, 4px);
}

._removeButton_14ka3_587 {
  cursor: pointer;
  color: var(--wz-color-text-muted, #9ca3af);
  padding: var(--wz-spacing-xs, 4px);
  border-radius: var(--wz-radius-sm, 4px);
  transition: color 0.15s ease, background-color 0.15s ease;
}
._removeButton_14ka3_587:hover {
  color: var(--wz-color-error, #ef4444);
  background-color: rgba(239, 68, 68, 0.1);
}

._starButton_14ka3_599 {
  cursor: pointer;
  padding: var(--wz-spacing-xs, 4px);
  border: none;
  background: transparent;
  color: var(--wz-color-text-muted, #9ca3af);
  border-radius: var(--wz-radius-sm, 4px);
  transition: color 0.15s ease, background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
._starButton_14ka3_599:hover {
  color: var(--wz-color-warning, #f59e0b);
  background-color: rgba(245, 158, 11, 0.1);
}
._starButton_14ka3_599._highlighted_14ka3_468 {
  color: var(--wz-color-warning, #f59e0b);
}

._priceContainer_14ka3_619 {
  text-align: center;
  padding: var(--wz-spacing-md, 16px) 0;
  border-top: 1px solid var(--wz-color-border-light, #f3f4f6);
  border-bottom: 1px solid var(--wz-color-border-light, #f3f4f6);
  margin: var(--wz-spacing-md, 16px) 0;
}
._verticalLayout_14ka3_439 ._priceContainer_14ka3_619 {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  padding-left: var(--wz-spacing-lg, 24px);
  margin: 0;
}

._priceAmount_14ka3_634 {
  font-size: var(--wz-font-size-3xl, 36px);
  font-weight: 700;
  color: var(--wz-color-text-primary, #1f2937);
  line-height: 1.2;
}
._priceAmount_14ka3_634._contactPrice_14ka3_640 {
  font-size: var(--wz-font-size-xl, 20px);
  color: var(--wz-color-primary, #3b82f6);
}

._pricePrefix_14ka3_645 {
  font-size: var(--wz-font-size-lg, 20px);
  font-weight: 400;
}

._priceFrequency_14ka3_650 {
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
  margin-top: var(--wz-spacing-xs, 4px);
}

._featuresContainer_14ka3_656 {
  margin-top: var(--wz-spacing-md, 16px);
}
._verticalLayout_14ka3_439 ._featuresContainer_14ka3_656 {
  flex: 0 0 100%;
  margin-top: 0;
}

._featuresLabel_14ka3_664 {
  font-size: var(--wz-font-size-xs, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wz-color-text-muted, #9ca3af);
  margin-bottom: var(--wz-spacing-sm, 8px);
}

._featuresList_14ka3_673 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-sm, 8px);
}

._featureItem_14ka3_682 {
  display: flex;
  align-items: flex-start;
  gap: var(--wz-spacing-sm, 8px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
}
._featureItem_14ka3_682._excluded_14ka3_689 {
  color: var(--wz-color-text-muted, #9ca3af);
  text-decoration: line-through;
}

._featureIcon_14ka3_694 {
  flex-shrink: 0;
  margin-top: 2px;
}
._featureIcon_14ka3_694._included_14ka3_698 {
  color: var(--wz-color-success, #10b981);
}
._featureIcon_14ka3_694._excluded_14ka3_689 {
  color: var(--wz-color-text-muted, #d1d5db);
}

._featureName_14ka3_705 {
  flex: 1;
}

._featureValue_14ka3_709 {
  font-weight: 500;
  color: var(--wz-color-primary, #3b82f6);
}

._featureTooltip_14ka3_714 {
  cursor: help;
  color: var(--wz-color-text-muted, #9ca3af);
}

._verticalLayout_14ka3_439 ._tierNotesWrapper_14ka3_719 {
  flex: 0 0 100%;
}

._tierNotes_14ka3_719 {
  margin-top: var(--wz-spacing-md, 16px);
  padding-top: var(--wz-spacing-md, 16px);
  border-top: 1px dashed var(--wz-color-border-light, #f3f4f6);
  font-size: var(--wz-font-size-xs, 12px);
  color: var(--wz-color-text-muted, #9ca3af);
  font-style: italic;
}

._ctaContainer_14ka3_732 {
  margin-top: var(--wz-spacing-lg, 24px);
}

._ctaButton_14ka3_736 {
  width: 100%;
  padding: var(--wz-spacing-sm, 8px) var(--wz-spacing-md, 16px);
  border-radius: var(--wz-radius-md, 8px);
  font-weight: 600;
  font-size: var(--wz-font-size-sm, 14px);
  cursor: pointer;
  transition: all 0.15s ease;
}
._ctaButton_14ka3_736._primary_14ka3_745 {
  background: var(--wz-color-primary, #3b82f6);
  color: white;
  border: none;
}
._ctaButton_14ka3_736._primary_14ka3_745:hover {
  background: var(--wz-color-primary-dark, #2563eb);
}
._ctaButton_14ka3_736._secondary_14ka3_753 {
  background: var(--wz-color-background-subtle, #f3f4f6);
  color: var(--wz-color-text-primary, #1f2937);
  border: none;
}
._ctaButton_14ka3_736._secondary_14ka3_753:hover {
  background: var(--wz-color-border, #e5e7eb);
}
._ctaButton_14ka3_736._outline_14ka3_761 {
  background: transparent;
  color: var(--wz-color-primary, #3b82f6);
  border: 2px solid var(--wz-color-primary, #3b82f6);
}
._ctaButton_14ka3_736._outline_14ka3_761:hover {
  background: var(--wz-color-primary, #3b82f6);
  color: white;
}

._comparisonTable_14ka3_771 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wz-font-size-sm, 14px);
  margin-top: 28px;
}
._comparisonTable_14ka3_771 th, ._comparisonTable_14ka3_771 td {
  padding: var(--wz-spacing-sm, 8px) var(--wz-spacing-md, 16px);
  text-align: center;
  border-bottom: 1px solid var(--wz-color-border-light, #f3f4f6);
}
._comparisonTable_14ka3_771 th {
  background: var(--wz-color-background-subtle, #f9fafb);
  font-weight: 600;
  color: var(--wz-color-text-primary, #1f2937);
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: top;
  padding-top: var(--wz-spacing-md, 16px);
  overflow: visible;
}
._comparisonTable_14ka3_771 th:first-child {
  vertical-align: bottom;
  text-align: left;
}
._comparisonTable_14ka3_771 td:first-child {
  text-align: left;
  font-weight: 500;
}
._comparisonTable_14ka3_771 ._highlightedColumn_14ka3_801 {
  background: #f5f9ff;
}
._comparisonTable_14ka3_771 th._highlightedColumn_14ka3_801 {
  background: #eff4fb;
}
._comparisonTable_14ka3_771 ._tierBadge_14ka3_518 {
  position: absolute;
  transform: none;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  text-align: center;
  text-wrap: auto;
}

._tableHeaderActions_14ka3_820 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

._tableRemoveButton_14ka3_828 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--wz-color-text-muted, #9ca3af);
  cursor: pointer;
  border-radius: var(--wz-radius-sm, 4px);
  transition: color 0.15s ease, background-color 0.15s ease;
}
._tableRemoveButton_14ka3_828:hover {
  color: var(--wz-color-danger, #ef4444);
  background-color: rgba(239, 68, 68, 0.1);
}

._tableTierName_14ka3_845 {
  font-weight: 600;
  margin-bottom: 2px;
}

._tablePriceContainer_14ka3_850 {
  margin-top: var(--wz-spacing-xs, 4px);
}

._tableActionsColumn_14ka3_854 {
  width: 36px;
  padding: 4px !important;
}

._tableFeatureRow_14ka3_859 ._tableFeatureRemove_14ka3_859 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--wz-color-text-muted, #9ca3af);
  cursor: pointer;
  border-radius: var(--wz-radius-sm, 4px);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
._tableFeatureRow_14ka3_859 ._tableFeatureRemove_14ka3_859:hover {
  color: var(--wz-color-danger, #ef4444);
}
._tableFeatureRow_14ka3_859:hover ._tableFeatureRemove_14ka3_859 {
  opacity: 1;
}

._tableGhostRow_14ka3_879 td {
  border-bottom: none;
}

._tableGhostCell_14ka3_883 {
  text-align: left !important;
  padding-top: var(--wz-spacing-md, 16px) !important;
}

._tableGhostText_14ka3_888 {
  color: var(--wz-color-text-muted, #9ca3af);
  cursor: pointer;
  font-style: italic;
  padding: 4px 8px;
  border-radius: var(--wz-radius-sm, 4px);
  transition: color 0.15s ease, background-color 0.15s ease;
}
._tableGhostText_14ka3_888:hover {
  color: var(--wz-color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

._tableGhostInput_14ka3_901 {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--wz-color-primary, #3b82f6);
  border-radius: var(--wz-radius-sm, 4px);
  font-size: inherit;
  font-style: italic;
  font-family: inherit;
  outline: none;
  background: var(--wz-color-background, #ffffff);
  color: var(--wz-color-text-primary, #1f2937);
}

._featureToggle_14ka3_914 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--wz-radius-sm, 4px);
  transition: background-color 0.15s ease;
}
._featureToggle_14ka3_914:hover {
  background-color: var(--wz-color-background-subtle, #f3f4f6);
}

._tableFeatureNameCell_14ka3_929 {
  text-align: left !important;
  font-weight: 500;
}

._tableFeatureNameText_14ka3_934 {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--wz-radius-sm, 4px);
  transition: background-color 0.15s ease;
}
._tableFeatureNameText_14ka3_934:hover {
  background-color: var(--wz-color-background-subtle, #f3f4f6);
}

._tableFeatureNameInput_14ka3_944 {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--wz-color-primary, #3b82f6);
  border-radius: var(--wz-radius-sm, 4px);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  outline: none;
  background: var(--wz-color-background, #ffffff);
}

._sectionNotes_14ka3_956 {
  margin-top: var(--wz-spacing-xl, 32px);
  padding: var(--wz-spacing-md, 16px);
  background: var(--wz-color-background-subtle, #f9fafb);
  border-radius: var(--wz-radius-md, 8px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
  text-align: center;
}

._addTierContainer_14ka3_966 {
  display: flex;
  justify-content: center;
  margin-top: var(--wz-spacing-lg, 24px);
}

._addButton_14ka3_972 {
  display: inline-flex;
  align-items: center;
  gap: var(--wz-spacing-xs, 4px);
}

@media (max-width: 768px) {
  ._tiersContainer_14ka3_410._cardsLayout_14ka3_417 {
    flex-direction: column;
    align-items: center;
  }
  ._tierCard_14ka3_454 {
    max-width: 100%;
    min-width: auto;
    width: 100%;
  }
  ._verticalLayout_14ka3_439 ._tierCard_14ka3_454 {
    flex-direction: column;
  }
  ._verticalLayout_14ka3_439 ._tierHeader_14ka3_487,
  ._verticalLayout_14ka3_439 ._priceContainer_14ka3_619,
  ._verticalLayout_14ka3_439 ._featuresContainer_14ka3_656,
  ._verticalLayout_14ka3_439 ._verticalTierDescription_14ka3_574 {
    flex: none;
    width: 100%;
  }
  ._verticalLayout_14ka3_439 ._tierDescription_14ka3_564 {
    display: block;
  }
  ._verticalLayout_14ka3_439 ._verticalTierDescription_14ka3_574 {
    display: none;
  }
}._notesEditor_135qi_1 {
  margin-top: var(--wz-spacing-md, 16px);
  padding-top: var(--wz-spacing-md, 16px);
  border-top: 1px dashed var(--wz-color-border-light, #f3f4f6);
}

._notesInput_135qi_7 {
  width: 100%;
  padding: var(--wz-spacing-sm, 8px);
  border: 1px dashed var(--wz-color-border-light, #e5e7eb);
  border-radius: var(--wz-radius-sm, 4px);
  font-size: var(--wz-font-size-xs, 12px);
  color: var(--wz-color-text-muted, #9ca3af);
  font-style: italic;
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
._notesInput_135qi_7::placeholder {
  color: var(--wz-color-text-muted, #9ca3af);
  opacity: 0.6;
}
._notesInput_135qi_7:hover {
  border-color: var(--wz-color-border, #d1d5db);
}
._notesInput_135qi_7._focused_135qi_25 {
  border-color: var(--wz-color-primary, #3b82f6);
  background-color: var(--wz-color-background, #ffffff);
  color: var(--wz-color-text-secondary, #6b7280);
  outline: none;
}
._notesInput_135qi_7._hasValue_135qi_31 {
  color: var(--wz-color-text-secondary, #6b7280);
}

._notesDisplay_135qi_35 {
  margin-top: var(--wz-spacing-md, 16px);
  padding-top: var(--wz-spacing-md, 16px);
  border-top: 1px dashed var(--wz-color-border-light, #f3f4f6);
  font-size: var(--wz-font-size-xs, 12px);
  color: var(--wz-color-text-muted, #9ca3af);
  font-style: italic;
}._featureItem_1t460_1 {
  display: flex;
  align-items: flex-start;
  gap: var(--wz-spacing-sm, 8px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
}

._featureItemEditable_1t460_9 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-sm, 8px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
}
._featureItemEditable_1t460_9:hover ._featureDelete_1t460_16 {
  opacity: 1;
}

._featureIcon_1t460_20 {
  flex-shrink: 0;
  color: var(--wz-color-success, #10b981);
  margin-top: 2px;
}

._featureName_1t460_26 {
  flex: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--wz-radius-sm, 4px);
  transition: background-color 0.15s ease;
}
._featureName_1t460_26:hover {
  background-color: var(--wz-color-background-subtle, #f3f4f6);
}

._featureInput_1t460_37 {
  flex: 1;
  padding: 2px 4px;
  border: 1px solid var(--wz-color-primary, #3b82f6);
  border-radius: var(--wz-radius-sm, 4px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
  outline: none;
  background-color: var(--wz-color-background, #ffffff);
}
._featureInput_1t460_37:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

._featureDelete_1t460_16 {
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  cursor: pointer;
  color: var(--wz-color-text-muted, #9ca3af);
  background: none;
  border: none;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._featureDelete_1t460_16:hover {
  color: var(--wz-color-error, #ef4444);
}._addFeatureButton_1wyh0_1 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-xs, 4px);
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  margin-top: var(--wz-spacing-sm, 8px);
  border: 1px dashed var(--wz-color-border-light, #e5e7eb);
  border-radius: var(--wz-radius-sm, 4px);
  background: transparent;
  color: var(--wz-color-text-muted, #9ca3af);
  font-size: var(--wz-font-size-xs, 12px);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  justify-content: center;
}
._addFeatureButton_1wyh0_1:hover {
  border-color: var(--wz-color-primary, #3b82f6);
  color: var(--wz-color-primary, #3b82f6);
  background-color: rgba(59, 130, 246, 0.05);
}._priceDisplay_19q6f_1 {
  text-align: center;
}

._priceDisplayEditable_19q6f_5 {
  text-align: center;
  cursor: pointer;
  position: relative;
  padding: var(--wz-spacing-sm, 8px);
  border-radius: var(--wz-radius-md, 8px);
  transition: background-color 0.15s ease;
}
._priceDisplayEditable_19q6f_5:hover {
  background-color: var(--wz-color-background-subtle, #f3f4f6);
}
._priceDisplayEditable_19q6f_5:hover ._editHint_19q6f_16 {
  opacity: 1;
  display: block;
}

._priceAmount_19q6f_21 {
  font-size: var(--wz-font-size-3xl, 36px);
  font-weight: 700;
  color: var(--wz-color-text-primary, #1f2937);
  line-height: 1.2;
}

._pricePrefix_19q6f_28 {
  font-size: var(--wz-font-size-lg, 20px);
  font-weight: 400;
  color: var(--wz-color-text-secondary, #6b7280);
}

._editHint_19q6f_16 {
  display: none;
  font-size: var(--wz-font-size-xs, 12px);
  color: var(--wz-color-text-muted, #9ca3af);
  margin-top: var(--wz-spacing-xs, 4px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

._priceEditor_19q6f_43 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-sm, 8px);
  padding: var(--wz-spacing-sm, 8px);
  background: var(--wz-color-background-subtle, #f9fafb);
  border-radius: var(--wz-radius-md, 8px);
  border: 1px solid var(--wz-color-border-light, #e5e7eb);
}

._typeSelector_19q6f_53 {
  position: relative;
  display: flex;
  align-items: center;
}

._typeSelect_19q6f_53 {
  width: 100%;
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  padding-right: var(--wz-spacing-lg, 24px);
  border: 1px solid var(--wz-color-border, #d1d5db);
  border-radius: var(--wz-radius-sm, 4px);
  background: var(--wz-color-background, #ffffff);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
  appearance: none;
  cursor: pointer;
}
._typeSelect_19q6f_53:focus {
  outline: none;
  border-color: var(--wz-color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

._selectIcon_19q6f_77 {
  position: absolute;
  right: var(--wz-spacing-sm, 8px);
  color: var(--wz-color-text-muted, #9ca3af);
  pointer-events: none;
}

._priceInputs_19q6f_84 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-sm, 8px);
  justify-content: center;
}

._inputGroup_19q6f_91 {
  display: flex;
  align-items: center;
  background: var(--wz-color-background, #ffffff);
  border: 1px solid var(--wz-color-border, #d1d5db);
  border-radius: var(--wz-radius-sm, 4px);
  overflow: hidden;
}
._inputGroup_19q6f_91:focus-within {
  border-color: var(--wz-color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

._currencySymbol_19q6f_104 {
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  background: var(--wz-color-background-subtle, #f3f4f6);
  color: var(--wz-color-text-secondary, #6b7280);
  font-size: var(--wz-font-size-sm, 14px);
  border-right: 1px solid var(--wz-color-border-light, #e5e7eb);
}

._priceInput_19q6f_84 {
  flex: 1;
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  border: none;
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
  width: 80px;
  outline: none;
  background-color: var(--neutral-50);
}
._priceInput_19q6f_84::-webkit-inner-spin-button, ._priceInput_19q6f_84::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._priceInput_19q6f_84[type=number] {
  -moz-appearance: textfield;
}

._rangeSeparator_19q6f_130 {
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-muted, #9ca3af);
}

._actions_19q6f_135 {
  display: flex;
  gap: var(--wz-spacing-sm, 8px);
  justify-content: flex-end;
  margin-top: var(--wz-spacing-xs, 4px);
}
._actions_19q6f_135 button {
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
}._frequencyDisplay_1btvl_1 {
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
}

._frequencyDisplayEditable_1btvl_6 {
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-secondary, #6b7280);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--wz-radius-sm, 4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}
._frequencyDisplayEditable_1btvl_6:hover {
  background-color: var(--wz-color-background-subtle, #f3f4f6);
  color: var(--wz-color-text-primary, #1f2937);
}

._frequencyEditor_1btvl_19 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-xs, 4px);
  margin-top: var(--wz-spacing-xs, 4px);
}

._selectWrapper_1btvl_26 {
  position: relative;
  display: flex;
  align-items: center;
}

._frequencySelect_1btvl_32 {
  width: 100%;
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-lg, 24px) var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  border: 1px solid var(--wz-color-border, #d1d5db);
  border-radius: var(--wz-radius-sm, 4px);
  background: var(--wz-color-background, #ffffff);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
  appearance: none;
  cursor: pointer;
}
._frequencySelect_1btvl_32:focus {
  outline: none;
  border-color: var(--wz-color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

._selectIcon_1btvl_49 {
  position: absolute;
  right: var(--wz-spacing-sm, 8px);
  color: var(--wz-color-text-muted, #9ca3af);
  pointer-events: none;
}

._customInput_1btvl_56 {
  display: flex;
  gap: var(--wz-spacing-xs, 4px);
  align-items: center;
}

._customLabelInput_1btvl_62 {
  flex: 1;
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  border: 1px solid var(--wz-color-border, #d1d5db);
  border-radius: var(--wz-radius-sm, 4px);
  font-size: var(--wz-font-size-sm, 14px);
  color: var(--wz-color-text-primary, #1f2937);
  background-color: var(--neutral-50);
}
._customLabelInput_1btvl_62:focus {
  outline: none;
  border-color: var(--wz-color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
._customLabelInput_1btvl_62::placeholder {
  color: var(--wz-color-text-muted, #9ca3af);
}

._saveButton_1btvl_80 {
  padding: var(--wz-spacing-xs, 4px) var(--wz-spacing-sm, 8px);
  border: none;
  border-radius: var(--wz-radius-sm, 4px);
  background: var(--wz-color-primary, #3b82f6);
  color: white;
  font-size: var(--wz-font-size-xs, 12px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._saveButton_1btvl_80:hover {
  background: var(--wz-color-primary-dark, #2563eb);
}._modalOverlay_dn6b3_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-md);
  animation: _fadeIn_dn6b3_1 0.2s ease-out;
}

@keyframes _fadeIn_dn6b3_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._modalContainer_dn6b3_25 {
  background: var(--pure-white);
  border-radius: var(--spacing-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: _slideUp_dn6b3_1 0.3s ease-out;
}

@keyframes _slideUp_dn6b3_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
._modalHeader_dn6b3_47 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--neutral-200);
}

._headerTitle_dn6b3_55 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
._headerTitle_dn6b3_55 svg {
  color: var(--primary-500);
}
._headerTitle_dn6b3_55 h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
}

._closeButton_dn6b3_70 {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--neutral-600);
  border-radius: 4px;
  transition: all 0.2s ease;
}
._closeButton_dn6b3_70:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}

._legalBanner_dn6b3_84 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: #fef3cd;
  border-bottom: 1px solid var(--warning-500);
  color: #92400e;
  font-size: 0.875rem;
  line-height: 1.5;
}

._bannerIcon_dn6b3_96 {
  color: var(--warning-500);
  flex-shrink: 0;
  margin-top: 2px;
}

._bannerContent_dn6b3_102 {
  flex: 1;
}
._bannerContent_dn6b3_102 strong {
  font-weight: 600;
}

._searchContainer_dn6b3_109 {
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--neutral-200);
}

._modalBody_dn6b3_114 {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

._mobileCategorySelect_dn6b3_121 {
  display: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}
@media (max-width: 768px) {
  ._mobileCategorySelect_dn6b3_121 {
    display: block;
  }
}

._categorySelect_dn6b3_133 {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--neutral-900);
  background-color: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  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' 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 0.75rem center;
  transition: border-color 0.2s ease;
}
._categorySelect_dn6b3_133:hover {
  border-color: var(--neutral-300);
}
._categorySelect_dn6b3_133:focus {
  outline: none;
  border-color: var(--primary-500);
}

._categoryNav_dn6b3_158 {
  width: 200px;
  border-right: 1px solid var(--neutral-200);
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

._categoryButton_dn6b3_168 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  white-space: nowrap;
}
._categoryButton_dn6b3_168 svg {
  flex-shrink: 0;
}
._categoryButton_dn6b3_168:hover {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
._categoryButton_dn6b3_168._active_dn6b3_190 {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 500;
}

._categorySeparator_dn6b3_196 {
  height: 1px;
  background: var(--neutral-200);
  margin: var(--spacing-xs) 0;
}

._clauseList_dn6b3_202 {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

._loadingState_dn6b3_211 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl);
  color: var(--neutral-500);
  min-height: 300px;
}
._loadingState_dn6b3_211 svg {
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
  animation: _pulse_dn6b3_1 1.5s ease-in-out infinite;
}
._loadingState_dn6b3_211 p {
  font-size: 1rem;
  color: var(--neutral-600);
  margin: 0;
}

@keyframes _pulse_dn6b3_1 {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}
._emptyState_dn6b3_239 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl);
  color: var(--neutral-500);
}
._emptyState_dn6b3_239 svg {
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
}
._emptyState_dn6b3_239 p {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--neutral-700);
}
._emptyState_dn6b3_239 span {
  font-size: 0.875rem;
}

._clauseCard_dn6b3_261 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: var(--spacing-lg);
  transition: all 0.2s ease;
}
._clauseCard_dn6b3_261:hover {
  border-color: var(--neutral-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._clauseHeader_dn6b3_273 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

._clauseTitle_dn6b3_281 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutral-900);
  flex: 1;
}

._clauseBadges_dn6b3_289 {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

._tag_dn6b3_295 {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-size: 0.75rem;
  border-radius: 12px;
  font-weight: 500;
  text-transform: lowercase;
  white-space: nowrap;
}

._clauseDescription_dn6b3_306 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--neutral-600);
  font-size: 0.875rem;
  line-height: 1.5;
}

._clausePreview_dn6b3_313 {
  background: var(--neutral-50);
  border-left: 3px solid var(--primary-500);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: 4px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--neutral-800);
  max-height: 150px;
  overflow: hidden;
}

._previewLine_dn6b3_327 {
  white-space: pre-wrap;
  word-break: break-word;
}
._previewLine_dn6b3_327:not(:last-child) {
  margin-bottom: 4px;
}

._previewMore_dn6b3_335 {
  color: var(--neutral-500);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

._clauseMeta_dn6b3_341 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--neutral-200);
}

._recommendedFor_dn6b3_350 {
  font-size: 0.8125rem;
  color: var(--neutral-600);
}
._recommendedFor_dn6b3_350 span {
  color: var(--primary-600);
  font-weight: 500;
  text-transform: capitalize;
}

._clauseActions_dn6b3_360 {
  display: flex;
  gap: var(--spacing-sm);
}

._copyButton_dn6b3_365,
._insertButton_dn6b3_366 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._copyButton_dn6b3_365 svg,
._insertButton_dn6b3_366 svg {
  flex-shrink: 0;
}

._copyButton_dn6b3_365 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
}
._copyButton_dn6b3_365:hover:not(:disabled) {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
}
._copyButton_dn6b3_365:disabled {
  background: var(--positive-50);
  border-color: var(--positive-300);
  color: var(--positive-700);
  cursor: default;
}

._insertButton_dn6b3_366 {
  background: var(--primary-500);
  border: 1px solid var(--primary-500);
  color: var(--pure-white);
}
._insertButton_dn6b3_366:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
}
._insertButton_dn6b3_366:active {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

._modalFooter_dn6b3_412 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}

._footerInfo_dn6b3_421 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--neutral-600);
}

._filterBadge_dn6b3_429 {
  padding: var(--spacing-2xs) var(--spacing-md);
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: 4px;
  font-weight: 500;
  text-transform: capitalize;
}

._footerHint_dn6b3_438 {
  font-size: 0.8125rem;
  color: var(--neutral-500);
}
._footerHint_dn6b3_438 kbd {
  padding: 2px 6px;
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  border-radius: 3px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--neutral-700);
}

@media (max-width: 768px) {
  ._modalContainer_dn6b3_25 {
    max-height: 95vh;
  }
  ._modalBody_dn6b3_114 {
    flex-direction: column;
  }
  ._categoryNav_dn6b3_158 {
    display: none;
  }
  ._categorySeparator_dn6b3_196 {
    display: none;
  }
  ._clauseList_dn6b3_202 {
    padding: var(--spacing-md);
  }
  ._modalHeader_dn6b3_47 {
    padding: var(--spacing-md);
  }
  ._searchContainer_dn6b3_109 {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  ._modalFooter_dn6b3_412 {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }
  ._footerHint_dn6b3_438 {
    display: none;
  }
}
@media (max-width: 480px) {
  ._clauseHeader_dn6b3_273 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._clauseActions_dn6b3_360 {
    width: 100%;
  }
  ._clauseActions_dn6b3_360 button {
    flex: 1;
  }
}
._selectionBadge_dn6b3_495 {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #4f46e5);
  background: var(--color-primary-50, #eef2ff);
  border-radius: 999px;
  margin-left: 0.5rem;
}

._checkbox_dn6b3_507 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, #d1d5db);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  color: white;
}

._checkboxChecked_dn6b3_520 {
  background: var(--color-primary, #4f46e5);
  border-color: var(--color-primary, #4f46e5);
}

._clauseCardSelected_dn6b3_525 {
  border-color: var(--color-primary, #4f46e5) !important;
  background: var(--color-primary-50, #eef2ff) !important;
}

._addSelectedButton_dn6b3_530 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary, #4f46e5);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
._addSelectedButton_dn6b3_530:hover {
  background: var(--color-primary-dark, #4338ca);
}._termsSettings_1sp1o_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_1sp1o_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_1sp1o_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_1sp1o_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_1sp1o_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_1sp1o_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_1sp1o_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_1sp1o_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_1sp1o_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

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

._browseLibraryBtn_1sp1o_53 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pure-white);
  background: var(--primary-500);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._browseLibraryBtn_1sp1o_53:hover {
  background: var(--primary-600);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
._browseLibraryBtn_1sp1o_53:active {
  background: var(--primary-700);
}
._browseLibraryBtn_1sp1o_53:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  ._browseLibraryBtn_1sp1o_53 {
    padding: 10px 14px;
    font-size: 13px;
  }
}

._libraryHint_1sp1o_87 {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 0;
  text-align: center;
}

._layoutSelector_1sp1o_94 ._layoutGrid_1sp1o_94 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_1sp1o_94 ._layoutGrid_1sp1o_94 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

._layoutOption_1sp1o_106 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 80px;
}
._layoutOption_1sp1o_106:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_1sp1o_106._selected_1sp1o_126 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_1sp1o_106._selected_1sp1o_126 ._layoutIcon_1sp1o_131 {
  color: var(--primary-600);
}
@media (max-width: 640px) {
  ._layoutOption_1sp1o_106 {
    min-height: 90px;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  ._layoutOption_1sp1o_106 {
    min-height: 85px;
    padding: 8px;
  }
}

._layoutIcon_1sp1o_131 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--neutral-600);
}
._layoutIcon_1sp1o_131 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_1sp1o_131 {
    margin-bottom: 6px;
  }
  ._layoutIcon_1sp1o_131 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_1sp1o_168 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_1sp1o_168 {
    font-size: 12px;
  }
}

._visibilityControls_1sp1o_181 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_1sp1o_106 {
    border-width: 2px;
  }
  ._layoutOption_1sp1o_106._selected_1sp1o_126 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_1sp1o_106,
  ._browseLibraryBtn_1sp1o_53 {
    transition: none;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_j268g_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_j268g_358[data-layout-style="1"],
._wizard-container_j268g_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_j268g_358[data-layout-style="1"] ._wizard-section_j268g_371,
._wizard-container_j268g_358[style*="--wz-layout-style: 1"] ._wizard-section_j268g_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_j268g_358[data-layout-style="2"],
._wizard-container_j268g_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_j268g_358[data-layout-style="2"],
  ._wizard-container_j268g_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_j268g_358[data-layout-style="3"],
._wizard-container_j268g_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_j268g_358[data-layout-style="3"] ._wizard-section_j268g_371,
._wizard-container_j268g_358[style*="--wz-layout-style: 3"] ._wizard-section_j268g_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._termsSection_j268g_405 {
  width: 100%;
  font-family: var(--wz-font-family-body);
  color: var(--wz-color-text-primary);
}

._description_j268g_411 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-relaxed);
  color: var(--wz-color-text-secondary);
  margin: 0 0 var(--wz-spacing-lg) 0;
}

._clauseList_j268g_420 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-lg);
}

._clause_j268g_420 {
  position: relative;
  background: var(--wz-color-card-background);
  border: 1px solid var(--wz-color-border-light);
  border-radius: var(--wz-radius-md);
  padding: var(--wz-spacing-md);
  transition: var(--wz-transition-fast);
}
._clause_j268g_420:hover {
  background: var(--wz-color-background-subtle);
  border-color: var(--wz-color-border);
  box-shadow: var(--wz-shadow-small);
}
._clause_j268g_420:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._clauseHeader_j268g_444 {
  display: flex;
  align-items: baseline;
  gap: var(--wz-spacing-sm);
}

._number_j268g_450 {
  color: var(--wz-color-primary);
  font-weight: var(--wz-font-weight-titles);
  min-width: var(--wz-spacing-xl);
  flex-shrink: 0;
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-base);
}

._clauseTitle_j268g_459 {
  font-family: var(--wz-font-family-title);
  font-weight: var(--wz-font-weight-titles);
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-primary);
  flex: 1;
}

._clauseActions_j268g_468 {
  display: flex;
  gap: var(--wz-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transition: var(--wz-transition-fast);
}

._clauseActionBtn_j268g_476 {
  width: calc(var(--wz-spacing-md) * 1.75);
  height: calc(var(--wz-spacing-md) * 1.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--wz-font-size-md);
  color: var(--wz-color-text-muted);
  padding: 0;
  border-radius: var(--wz-radius-sm);
  line-height: 1;
  transition: var(--wz-transition-fast);
}
._clauseActionBtn_j268g_476:hover {
  color: var(--wz-color-primary);
  background: var(--wz-color-background-subtle);
  border-color: var(--wz-color-border-light);
}
._clauseActionBtn_j268g_476:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._clauseContent_j268g_502 {
  margin-top: var(--wz-spacing-xs);
  padding-left: calc(var(--wz-spacing-xl) + var(--wz-spacing-sm));
}
._clauseContent_j268g_502 p {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-body);
  color: var(--wz-color-text-secondary);
  line-height: var(--wz-line-height-relaxed);
  margin: 0;
}

._subClauseList_j268g_515 {
  margin-top: calc(var(--wz-spacing-md) * 0.75);
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-spacing-md) * 0.75);
}

._subClause_j268g_515 {
  margin-left: var(--wz-spacing-xl);
  position: relative;
  padding: var(--wz-spacing-sm) 0;
  padding-left: var(--wz-spacing-md);
  border-left: var(--wz-spacing-xs) solid var(--wz-color-border-light);
}

._emptyState_j268g_530 {
  text-align: center;
  padding: var(--wz-spacing-2xl) var(--wz-spacing-md);
  border: calc(var(--wz-spacing-xs) / 2) dashed var(--wz-color-border);
  border-radius: var(--wz-radius-md);
}

._emptyStateTitle_j268g_537 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-titles);
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-primary);
  margin: 0 0 var(--wz-spacing-xs) 0;
}

._emptyStateDescription_j268g_546 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-secondary);
  margin: 0 0 var(--wz-spacing-md) 0;
}

._addClauseBtn_j268g_555 {
  display: inline-flex;
  align-items: center;
  gap: var(--wz-spacing-xs);
  padding: var(--wz-spacing-sm) var(--wz-spacing-md);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-primary);
  background: transparent;
  border: 1px dashed var(--wz-color-primary);
  border-radius: calc((var(--wz-radius-sm) + var(--wz-radius-md)) / 2);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._addClauseBtn_j268g_555:hover {
  background: var(--wz-color-background-subtle);
}
._addClauseBtn_j268g_555:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._layoutCompact_j268g_579 ._clauseList_j268g_420 {
  gap: calc(var(--wz-spacing-lg) * 0.5);
}
._layoutCompact_j268g_579 ._subClause_j268g_515 {
  margin-left: calc(var(--wz-spacing-xl) * 0.75);
}
._layoutCompact_j268g_579 ._subClauseList_j268g_515 {
  gap: var(--wz-spacing-sm);
}

._layoutLegal_j268g_589 ._clauseList_j268g_420 {
  gap: calc(var(--wz-spacing-lg) * 1.33);
}
._layoutLegal_j268g_589 ._clauseTitle_j268g_459 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
._layoutLegal_j268g_589 ._subClause_j268g_515 {
  margin-left: calc(var(--wz-spacing-xl) * 1.25);
}

/* Show action buttons on hover/focus */
._clause_j268g_420:hover ._clauseActions_j268g_468,
._subClause_j268g_515:hover ._clauseActions_j268g_468,
._clauseHeader_j268g_444:focus-within ._clauseActions_j268g_468 {
  opacity: 1;
  visibility: visible;
}._gallerySettings_y3539_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_y3539_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_y3539_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_y3539_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_y3539_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_y3539_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_y3539_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_y3539_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_y3539_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_y3539_47 ._layoutGrid_y3539_47 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_y3539_47 ._layoutGrid_y3539_47 {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

._layoutOption_y3539_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 72px;
}
._layoutOption_y3539_59:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_y3539_59._selected_y3539_79 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_y3539_59._selected_y3539_79 ._layoutIcon_y3539_84 {
  color: var(--primary-600);
}
@media (max-width: 480px) {
  ._layoutOption_y3539_59 {
    min-height: 68px;
    padding: 8px;
  }
}

._layoutIcon_y3539_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--neutral-600);
}
._layoutIcon_y3539_84 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_y3539_84 {
    margin-bottom: 4px;
  }
  ._layoutIcon_y3539_84 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_y3539_115 {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_y3539_115 {
    font-size: 11px;
  }
}

._gridControls_y3539_128 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._stylingControls_y3539_134 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

._controlLabel_y3539_146 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
}

._objectFitGrid_y3539_152 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

._objectFitOption_y3539_158 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  transition: all 0.2s ease;
}
._objectFitOption_y3539_158:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._objectFitOption_y3539_158._selected_y3539_79 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  color: var(--primary-700);
}

._visibilityControls_y3539_183 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_y3539_59,
  ._objectFitOption_y3539_158 {
    border-width: 2px;
  }
  ._layoutOption_y3539_59._selected_y3539_79,
  ._objectFitOption_y3539_158._selected_y3539_79 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_y3539_59,
  ._objectFitOption_y3539_158 {
    transition: none;
  }
}._dialogContent_1ja7w_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 280px;
}

._tabSelector_1ja7w_8 {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: 12px;
}

._tab_1ja7w_8 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-600);
  transition: all 0.2s ease;
  flex: 1;
  justify-content: center;
}
._tab_1ja7w_8:hover:not(:disabled) {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  color: var(--neutral-800);
}
._tab_1ja7w_8:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._tab_1ja7w_8._tabActive_1ja7w_40 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  color: var(--primary-700);
}
._tab_1ja7w_8._tabActive_1ja7w_40 svg {
  color: var(--primary-600);
}
@media (max-width: 480px) {
  ._tab_1ja7w_8 {
    padding: 8px 10px;
    font-size: 12px;
    gap: 4px;
  }
  ._tab_1ja7w_8 svg {
    width: 16px;
    height: 16px;
  }
}

._tabContent_1ja7w_60 {
  flex: 1;
  min-height: 200px;
}

._uploadPanel_1ja7w_65 {
  width: 100%;
}

._videoPanel_1ja7w_69 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._fieldGroup_1ja7w_75 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._fieldLabel_1ja7w_81 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
}

._fieldInput_1ja7w_87 {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  font-size: 14px;
  color: var(--neutral-900);
  background: var(--pure-white);
  outline: none;
  transition: all 0.2s ease;
}
._fieldInput_1ja7w_87::placeholder {
  color: var(--neutral-400);
}
._fieldInput_1ja7w_87:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._fieldError_1ja7w_106 {
  font-size: 12px;
  color: var(--negative-600);
  margin: 0;
}

._fieldHint_1ja7w_112 {
  font-size: 12px;
  color: var(--neutral-500);
  margin: 0;
}

._libraryPanel_1ja7w_118 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  text-align: center;
}

._libraryDescription_1ja7w_127 {
  font-size: 14px;
  color: var(--neutral-600);
  margin: 0;
}

._browseLibraryBtn_1ja7w_133 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pure-white);
  background: var(--primary-500);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._browseLibraryBtn_1ja7w_133:hover {
  background: var(--primary-600);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
._browseLibraryBtn_1ja7w_133:active {
  background: var(--primary-700);
}
._browseLibraryBtn_1ja7w_133:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  ._tab_1ja7w_8 {
    border-width: 2px;
  }
  ._tab_1ja7w_8._tabActive_1ja7w_40 {
    border-width: 3px;
  }
  ._fieldInput_1ja7w_87 {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._tab_1ja7w_8,
  ._fieldInput_1ja7w_87,
  ._browseLibraryBtn_1ja7w_133 {
    transition: none;
  }
}
/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_1msgr_359 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_1msgr_359[data-layout-style="1"],
._wizard-container_1msgr_359[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_1msgr_359[data-layout-style="1"] ._wizard-section_1msgr_372,
._wizard-container_1msgr_359[style*="--wz-layout-style: 1"] ._wizard-section_1msgr_372 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_1msgr_359[data-layout-style="2"],
._wizard-container_1msgr_359[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_1msgr_359[data-layout-style="2"],
  ._wizard-container_1msgr_359[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_1msgr_359[data-layout-style="3"],
._wizard-container_1msgr_359[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_1msgr_359[data-layout-style="3"] ._wizard-section_1msgr_372,
._wizard-container_1msgr_359[style*="--wz-layout-style: 3"] ._wizard-section_1msgr_372 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

/* Gallery Section Styles - Using --wz-* CSS variables */
._gallerySection_1msgr_407 {
  width: 100%;
  padding: var(--wz-spacing-section) 0;
  font-family: var(--wz-font-family-body);
  color: var(--wz-color-text-primary);
}

/* Content area */
._content_1msgr_415 {
  padding: var(--wz-spacing-base);
}

/* Layout Variants */
._layoutSingle_1msgr_420 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-sm);
}

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

._layoutGrid_1msgr_432 {
  display: grid;
  gap: var(--wz-spacing-sm);
}

._layoutMasonry_1msgr_437 {
  column-gap: var(--wz-spacing-sm);
}

._layoutCarousel_1msgr_441 {
  display: flex;
  gap: var(--wz-spacing-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--wz-spacing-sm);
}
._layoutCarousel_1msgr_441::-webkit-scrollbar {
  height: var(--wz-spacing-xs);
}
._layoutCarousel_1msgr_441::-webkit-scrollbar-track {
  background: var(--wz-color-background-subtle);
  border-radius: calc(var(--wz-radius-sm) / 2);
}
._layoutCarousel_1msgr_441::-webkit-scrollbar-thumb {
  background: var(--wz-color-border);
  border-radius: calc(var(--wz-radius-sm) / 2);
}

/* Gallery Item */
._galleryItem_1msgr_462 {
  position: relative;
  overflow: hidden;
  border-radius: var(--wz-radius-md);
  background: var(--wz-color-background-subtle);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._galleryItem_1msgr_462:hover {
  transform: translateY(-1px);
  box-shadow: var(--wz-shadow-medium);
}
._galleryItem_1msgr_462:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._galleryItemCarousel_1msgr_479 {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 280px;
}

._itemImage_1msgr_485 {
  width: 100%;
  height: 100%;
  display: block;
}

._itemPlaceholder_1msgr_491 {
  min-height: 120px;
  background: var(--wz-color-text-primary);
}

/* Media container inside gallery item */
._itemMedia_1msgr_497 {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Caption area below media */
._itemCaptionArea_1msgr_504 {
  padding: var(--wz-spacing-xs) var(--wz-spacing-sm);
}

._itemCaption_1msgr_504 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-secondary);
  margin: 0;
}

._captionInput_1msgr_517 {
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  color: var(--wz-color-text-secondary);
  padding: var(--wz-spacing-xs) 0;
  outline: none;
  transition: var(--wz-transition-fast);
}
._captionInput_1msgr_517:focus {
  border-bottom-color: var(--wz-color-primary);
}
._captionInput_1msgr_517::placeholder {
  color: var(--wz-color-text-secondary);
  opacity: 0.5;
}

._videoIndicator_1msgr_537 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--wz-spacing-2xl);
  height: var(--wz-spacing-2xl);
  background: rgba(var(--wz-color-shadow), 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
._videoIndicator_1msgr_537::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent white;
  margin-left: 3px;
}

/* Delete button on items */
._itemDeleteBtn_1msgr_562 {
  position: absolute;
  top: var(--wz-spacing-sm);
  right: var(--wz-spacing-sm);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--wz-color-shadow), 0.4);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: var(--wz-transition-fast);
}
._itemMedia_1msgr_497:hover ._itemDeleteBtn_1msgr_562 {
  opacity: 0.7;
}
._itemDeleteBtn_1msgr_562:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--wz-color-danger) 80%, transparent);
}
._itemDeleteBtn_1msgr_562:focus {
  opacity: 1;
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

/* Edit overlay on gallery items (edit mode) */
._itemEditOverlay_1msgr_596 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-xs);
  background: rgba(var(--wz-color-shadow), 0.5);
  color: white;
  opacity: 0;
  transition: var(--wz-transition-fast);
  cursor: pointer;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  border-radius: inherit;
  pointer-events: none;
}
._itemMedia_1msgr_497:hover ._itemEditOverlay_1msgr_596 {
  opacity: 1;
}

/* Expand button — all modes */
._expandBtn_1msgr_619 {
  position: absolute;
  bottom: var(--wz-spacing-sm);
  right: var(--wz-spacing-sm);
  background: rgba(var(--wz-color-shadow), 0.5);
  color: white;
  border: none;
  border-radius: var(--wz-radius-sm);
  padding: var(--wz-spacing-xs);
  cursor: pointer;
  opacity: 0;
  transition: var(--wz-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
._itemMedia_1msgr_497:hover ._expandBtn_1msgr_619 {
  opacity: 1;
}
._expandBtn_1msgr_619:hover {
  background: rgba(var(--wz-color-shadow), 0.7);
}

/* Carousel wrapper + arrows */
._carouselWrapper_1msgr_644 {
  position: relative;
}

._carouselPrev_1msgr_648,
._carouselNext_1msgr_649 {
  position: absolute;
  bottom: var(--wz-spacing-md);
  z-index: 2;
  padding: 0;
  background: rgba(var(--wz-color-shadow), 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--wz-radius-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: inherit;
  transition: var(--wz-transition-fast);
}
._carouselPrev_1msgr_648:hover,
._carouselNext_1msgr_649:hover {
  background: rgba(var(--wz-color-shadow), 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
._carouselPrev_1msgr_648:focus,
._carouselNext_1msgr_649:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._carouselPrev_1msgr_648 {
  left: var(--wz-spacing-sm);
}

._carouselNext_1msgr_649 {
  right: var(--wz-spacing-sm);
}

/* Empty State */
._emptyState_1msgr_690 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wz-spacing-2xl) var(--wz-spacing-lg);
  border: calc(var(--wz-spacing-xs) / 2) dashed var(--wz-color-border);
  border-radius: var(--wz-radius-md);
  text-align: center;
}

._emptyStateTitle_1msgr_701 {
  font-family: var(--wz-font-family-title);
  font-size: var(--wz-font-size-subtitles);
  font-weight: var(--wz-font-weight-subtitles);
  line-height: var(--wz-line-height-subtitle);
  color: var(--wz-color-text-primary);
  margin: 0 0 var(--wz-spacing-xs) 0;
}

._emptyStateDescription_1msgr_710 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-base);
  color: var(--wz-color-text-secondary);
  margin: 0 0 var(--wz-spacing-md) 0;
}

._addMediaBtn_1msgr_719 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-xs);
  padding: var(--wz-spacing-sm) var(--wz-spacing-md);
  width: 100%;
  color: var(--wz-color-primary);
  background: transparent;
  border: 1px dashed var(--wz-color-primary);
  border-radius: calc((var(--wz-radius-sm) + var(--wz-radius-md)) / 2);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-base);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._addMediaBtn_1msgr_719:hover {
  background: var(--wz-color-background-subtle);
}
._addMediaBtn_1msgr_719:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

/* Lightbox */
._lightboxOverlay_1msgr_746 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(var(--wz-color-shadow), 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Override readOnly pointer-events: none */
}

._lightboxContent_1msgr_757 {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

._lightboxImage_1msgr_763 {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--wz-radius-sm);
}

._lightboxCaption_1msgr_770 {
  text-align: center;
  color: white;
  padding: calc(var(--wz-spacing-sm) + var(--wz-spacing-xs)) 0;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  font-weight: var(--wz-font-weight-body);
  line-height: var(--wz-line-height-base);
}

._lightboxClose_1msgr_780 {
  position: absolute;
  top: calc(var(--wz-spacing-2xl) * -1);
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: var(--wz-font-size-xl);
  cursor: pointer;
  padding: var(--wz-spacing-sm);
  border-radius: var(--wz-radius-sm);
  transition: var(--wz-transition-fast);
}
._lightboxClose_1msgr_780:hover {
  opacity: 0.8;
}
._lightboxClose_1msgr_780:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._lightboxNav_1msgr_801 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--wz-color-background) 15%, transparent);
  border: none;
  color: white;
  font-size: var(--wz-font-size-xl);
  padding: var(--wz-spacing-md) calc(var(--wz-spacing-sm) + var(--wz-spacing-xs));
  cursor: pointer;
  border-radius: var(--wz-radius-sm);
  transition: var(--wz-transition-fast);
}
._lightboxNav_1msgr_801:hover {
  background: color-mix(in srgb, var(--wz-color-background) 25%, transparent);
}
._lightboxNav_1msgr_801:focus {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._lightboxPrev_1msgr_822 {
  left: -60px;
}

._lightboxNext_1msgr_826 {
  right: -60px;
}

/* Video Player */
._videoPlayer_1msgr_831 {
  position: relative;
  width: 80vw;
  max-width: 960px;
  padding-bottom: min(45vw, 540px); /* 16:9 ratio of the width */
  background: rgba(var(--wz-color-shadow), 1);
  border-radius: var(--wz-radius-md);
  overflow: hidden;
}

._videoIframe_1msgr_841 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

._addMediaActions_1msgr_850 {
  margin-top: calc(var(--wz-spacing-sm) + var(--wz-spacing-xs));
  display: flex;
  justify-content: center;
}._signatureSettings_hjthj_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_hjthj_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_hjthj_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_hjthj_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_hjthj_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_hjthj_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsContent_hjthj_8 {
    padding: 14px;
    padding-bottom: 28px;
  }
}
@media (max-width: 640px) {
  ._settingsContent_hjthj_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}
@media (max-width: 480px) {
  ._settingsContent_hjthj_8 {
    padding: 10px;
    padding-bottom: 20px;
  }
}

._layoutSelector_hjthj_47 ._layoutGrid_hjthj_47 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  ._layoutSelector_hjthj_47 ._layoutGrid_hjthj_47 {
    gap: 6px;
  }
}

._layoutOption_hjthj_58 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 72px;
}
._layoutOption_hjthj_58:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._layoutOption_hjthj_58._selected_hjthj_78 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._layoutOption_hjthj_58._selected_hjthj_78 ._layoutIcon_hjthj_83 {
  color: var(--primary-600);
}
@media (max-width: 480px) {
  ._layoutOption_hjthj_58 {
    min-height: 68px;
    padding: 8px;
  }
}

._layoutIcon_hjthj_83 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--neutral-600);
}
._layoutIcon_hjthj_83 svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  ._layoutIcon_hjthj_83 {
    margin-bottom: 4px;
  }
  ._layoutIcon_hjthj_83 svg {
    width: 16px;
    height: 16px;
  }
}

._layoutLabel_hjthj_114 {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 480px) {
  ._layoutLabel_hjthj_114 {
    font-size: 11px;
  }
}

._methodControls_hjthj_127 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._canvasControls_hjthj_133 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._requirementControls_hjthj_139 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._visibilityControls_hjthj_145 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-contrast: high) {
  ._layoutOption_hjthj_58 {
    border-width: 2px;
  }
  ._layoutOption_hjthj_58._selected_hjthj_78 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._layoutOption_hjthj_58 {
    transition: none;
  }
}/* ============================================================
 * WIZARD CSS VARIABLE SYSTEM
 * ============================================================
 * This file defines all CSS custom properties for the wizard theming system.
 *
 * VARIABLE CATEGORIES:
 *
 * 1. USER-CONTROLLABLE: Modified by cssVariableManager.applySettings()
 *    when user changes Document Settings. These reflect user preferences.
 *    - Colors (primary, background, text)
 *    - Typography (font families, semantic font sizes)
 *    - Layout (container width, section spacing, layout style)
 *
 * 2. FIXED (Design System): Constants that maintain visual consistency.
 *    Never modified at runtime. Used for spacing scale, font scale, etc.
 *    - Spacing scale (xs, sm, md, lg, xl, 2xl)
 *    - Font size scale (xs, sm, md, lg, xl, 2xl, 3xl)
 *    - Line heights, font weights
 *    - Colors (borders, semantic states, shadows)
 *    - Shadows, transitions, radii
 *
 * 3. SECTION-SPECIFIC: Fixed values for specific section styling.
 *    - Hero, Timeline, FAQ specific variables
 *
 * 4. DEPRECATED: Kept for backwards compatibility, will be removed.
 *
 * See also: cssVariableManager.ts for how these are applied at runtime.
 * ============================================================ */
:root {
  /* ============================================================
   * TYPOGRAPHY - Font Families (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Typography
   * Modified by: cssVariableManager.applySettings(settings.typography)
   *
   * Primary font -> Used for headings, titles, and emphasis
   * Secondary font -> Used for body text, descriptions, and paragraphs
   * ============================================================ */
  --wz-font-family-primary: Inter, system-ui, sans-serif; /* Headings, titles (user-adjustable) */
  --wz-font-family-secondary: Inter, system-ui, sans-serif; /* Body text, paragraphs (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Derived Font Mappings (FIXED)
   * ------------------------------------------------------------
   * Auto-set by cssVariableManager based on primary/secondary.
   * These provide semantic naming for sections to consume.
   * ------------------------------------------------------------ */
  --wz-font-family-title: var(--wz-font-family-primary); /* Titles use primary font */
  --wz-font-family-subtitle: var(--wz-font-family-secondary); /* Subtitles use secondary font */
  --wz-font-family-heading: var(--wz-font-family-primary); /* Headings use primary font */
  --wz-font-family-body: var(--wz-font-family-secondary); /* Body text uses secondary font */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Semantic Font Sizes (USER-CONTROLLABLE)
   * ------------------------------------------------------------
   * Adjustable via Document Settings > Typography sliders.
   * These represent semantic text roles, not raw sizes.
   * Modified by: cssVariableManager.applySettings(settings.typography)
   * ------------------------------------------------------------ */
  --wz-font-size-titles: 2rem; /* Section titles, major headings (user-adjustable) */
  --wz-font-size-subtitles: 1.5rem; /* Secondary headings, subheadings (user-adjustable) */
  --wz-font-size-body: 1rem; /* Body paragraphs, descriptions (user-adjustable) */
  --wz-font-size-small: 0.875rem; /* Labels, captions, metadata (user-adjustable) */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Fixed Base Sizes (FIXED)
   * ------------------------------------------------------------
   * Design system constants for special cases.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-size-base: 16px; /* Base reference size for calculations */
  --wz-font-size-heading-small: 18px; /* Small headings in specialized contexts */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Size Scale (FIXED)
   * ------------------------------------------------------------
   * Design system constants. Use these for consistent sizing.
   * NOT user-adjustable - provides predictable size relationships.
   *
   * Usage guide:
   *   xs (12px) - Fine print, badges, counters
   *   sm (14px) - Secondary text, labels
   *   md (16px) - Body text (base)
   *   lg (20px) - Emphasized text, large labels
   *   xl (24px) - Small headings
   *   2xl (32px) - Section headings
   *   3xl (40px) - Page titles
   * ------------------------------------------------------------ */
  --wz-font-size-xs: 0.75rem; /* 12px - Extra small */
  --wz-font-size-sm: 0.875rem; /* 14px - Small */
  --wz-font-size-md: 1rem; /* 16px - Medium (base) */
  --wz-font-size-lg: 1.25rem; /* 20px - Large */
  --wz-font-size-xl: 1.5rem; /* 24px - Extra large */
  --wz-font-size-2xl: 2rem; /* 32px - 2x Extra large */
  --wz-font-size-3xl: 2.5rem; /* 40px - 3x Extra large */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Line Heights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for vertical rhythm.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-line-height-base: 1.5; /* Standard body text */
  --wz-line-height-title: 1.2; /* Tight for large headings */
  --wz-line-height-subtitle: 1.4; /* Slightly looser for subtitles */
  --wz-line-height-relaxed: 1.6; /* Extra readable for long-form */
  /* ------------------------------------------------------------
   * TYPOGRAPHY - Font Weights (FIXED)
   * ------------------------------------------------------------
   * Design system constants for text emphasis.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-font-weight-titles: 600; /* Semibold for titles */
  --wz-font-weight-subtitles: 500; /* Medium for subtitles */
  --wz-font-weight-body: 400; /* Regular for body */
  --wz-font-weight-small: 400; /* Regular for small text */
  /* Per-type line heights (FIXED) */
  --wz-line-height-titles: 1.2; /* Matches title style */
  --wz-line-height-subtitles: 1.4; /* Matches subtitle style */
  --wz-line-height-body: 1.5; /* Matches body style */
  --wz-line-height-small: 1.4; /* Matches small text style */
  /* ============================================================
   * LAYOUT - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Layout
   * Modified by: cssVariableManager.applySettings(settings.layout)
   * ============================================================ */
  /* Page width presets: 800px (Narrow), 960px (Medium), 1200px (Wide) */
  --wz-container-width: 1200px; /* Controls overall document width */
  /* Auto-calculated by cssVariableManager based on width selection */
  /* Wide: 3rem, Medium: 2.5rem, Narrow: 2rem */
  --wz-container-padding: 3rem; /* Horizontal padding inside container */
  /* Vertical spacing between sections: 1rem (Tight), 3rem (Comfortable), 5rem (Spacious) */
  --wz-section-spacing: 3rem; /* Gap between wizard sections */
  /* Layout style: 1 (Center), 2 (Split), 3 (Stacked) */
  --wz-layout-style: 1; /* Content arrangement pattern */
  /* ------------------------------------------------------------
   * SPACING - Scale (FIXED)
   * ------------------------------------------------------------
   * Design system spacing constants. Use xs/sm/md/lg/xl/2xl names.
   * NOT user-adjustable - provides consistent spacing relationships.
   *
   * Usage guide:
   *   xs (4px)  - Tight gaps: icon-text, inline elements
   *   sm (8px)  - Small gaps: list items, form field margins
   *   md (16px) - Medium gaps: card padding, paragraph spacing
   *   lg (24px) - Large gaps: section internal spacing
   *   xl (32px) - Extra large: major component separation
   *   2xl (48px) - 2x Extra large: between major sections
   *
   * Legacy aliases (--wz-spacing-base, etc.) map to these values.
   * ------------------------------------------------------------ */
  --wz-spacing-xs: 4px; /* Tight gaps: icon-text, inline elements */
  --wz-spacing-sm: 8px; /* Small gaps: list items, form field margins */
  --wz-spacing-md: 16px; /* Medium gaps: card padding, paragraph spacing */
  --wz-spacing-lg: 24px; /* Large gaps: section internal spacing */
  --wz-spacing-xl: 32px; /* Extra large: major component separation */
  --wz-spacing-2xl: 48px; /* 2x Extra large: between major sections */
  /* ------------------------------------------------------------
   * SPACING - Backwards Compatibility Aliases (FIXED)
   * ------------------------------------------------------------
   * Legacy variable names mapped to standard scale.
   * Use standard scale (xs/sm/md/lg/xl/2xl) in new code.
   * ------------------------------------------------------------ */
  --wz-spacing-base: var(--wz-spacing-md); /* Legacy: was 16px */
  --wz-spacing-small: var(--wz-spacing-sm); /* Legacy: was 8px */
  --wz-spacing-medium: var(--wz-spacing-lg); /* Legacy: was 24px */
  --wz-spacing-large: var(--wz-spacing-xl); /* Legacy: was 32px */
  --wz-spacing-component: var(--wz-spacing-2xl); /* Legacy: was 48px */
  /* Section spacing alias (FIXED - references user-controllable section-spacing) */
  --wz-spacing-section: var(--wz-section-spacing);
  /* ============================================================
   * COLORS - Core (USER-CONTROLLABLE)
   * ============================================================
   * Adjustable via Document Settings > Colors
   * Modified by: cssVariableManager.applySettings(settings.colors)
   * ============================================================ */
  --wz-color-primary: #2563eb; /* Brand/accent - buttons, links, highlights */
  --wz-color-background: #ffffff; /* Page/section background */
  --wz-color-text: #111827; /* Main body text color */
  /* ------------------------------------------------------------
   * COLORS - Derived & Semantic (FIXED)
   * ------------------------------------------------------------
   * Design system constants computed from or complementing core colors.
   * NOT user-adjustable.
   * ------------------------------------------------------------ */
  --wz-color-text-primary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-secondary: var(--wz-color-text); /* Alias for main text */
  --wz-color-text-muted: #9ca3af; /* Light gray for muted/deemphasized text */
  --wz-color-text-tertiary: #6b7280; /* Gray for tertiary text (labels, meta) */
  --wz-color-border: #d1d5db; /* Default border color */
  --wz-color-border-light: #e5e7eb; /* Light border for subtle separation */
  --wz-color-border-hover: #9ca3af; /* Border color on hover state */
  --wz-color-bg-secondary: #f8f9fa; /* Secondary/alternate background */
  --wz-color-bg-hover: #e9ecef; /* Background on hover state */
  --wz-color-shadow: 0, 0, 0; /* RGB values for rgba() shadows */
  /* ------------------------------------------------------------
   * COLORS - Deprecated (kept for backwards compatibility)
   * ------------------------------------------------------------
   * Will be removed in v3.0. Use alternatives listed.
   * ------------------------------------------------------------ */
  --wz-color-secondary: var(--wz-color-text); /* DEPRECATED: Use --wz-color-text */
  --wz-color-accent: var(--wz-color-primary); /* DEPRECATED: Use --wz-color-primary */
  --wz-color-tertiary: #888888; /* DEPRECATED: Not used by any section */
  /* ============================================================
   * UTILITY VARIABLES (FIXED)
   * ============================================================
   * Design system constants for shadows, transitions, and radii.
   * Used across multiple sections for consistent styling.
   * NOT user-adjustable.
   * ============================================================ */
  /* ------------------------------------------------------------
   * Shadows (FIXED)
   * Used by: Table, FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle elevation */
  --wz-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Card-level elevation */
  --wz-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Modal/dropdown elevation */
  /* ------------------------------------------------------------
   * Transitions (FIXED)
   * Used by: Table, FAQ, Text
   * ------------------------------------------------------------ */
  --wz-transition-fast: all 0.15s ease; /* Quick micro-interactions */
  --wz-transition-normal: all 0.3s ease; /* Standard animations */
  /* ------------------------------------------------------------
   * Border Radius (FIXED)
   * Used by: Table, Text, PricingTiers
   * ------------------------------------------------------------ */
  --wz-radius-sm: 4px; /* Subtle rounding */
  --wz-radius-md: 8px; /* Standard card rounding */
  --wz-radius-lg: 12px; /* Prominent rounding */
  --wz-border-radius-small: 4px; /* Legacy alias for radius-sm */
  --wz-border-radius-medium: 8px; /* Legacy alias for radius-md */
  /* ------------------------------------------------------------
   * Semantic State Colors (FIXED)
   * Used by: FAQ, Table for validation/status states
   * ------------------------------------------------------------ */
  --wz-color-success: #10b981; /* Green - positive actions, confirmations */
  --wz-color-warning: #f59e0b; /* Amber - caution, pending states */
  --wz-color-error: #ef4444; /* Red - errors, destructive actions */
  --wz-color-danger: #ef4444; /* Alias for error (backwards compatibility) */
  --wz-color-info: #3b82f6; /* Blue - informational messages */
  /* ------------------------------------------------------------
   * Background Variants (FIXED)
   * Used by: FAQ, PricingTiers
   * ------------------------------------------------------------ */
  --wz-color-card-background: var(--wz-color-background); /* Card surfaces */
  --wz-color-background-subtle: #f9fafb; /* Very subtle background tint */
  --wz-color-background-hover: var(--wz-color-bg-hover); /* Alias for hover background */
  /* ------------------------------------------------------------
   * Grid System (FIXED)
   * Used by: FAQ for responsive layouts
   * ------------------------------------------------------------ */
  --wz-grid-columns-desktop: 1; /* FAQ uses single-column layout */
  --wz-grid-columns-mobile: 1; /* Mobile column count */
  --wz-grid-gap: 24px; /* Gap between grid items */
  /* ------------------------------------------------------------
   * Responsive Breakpoints (FIXED)
   * Used by: Text section for responsive behavior
   * ------------------------------------------------------------ */
  --wz-breakpoint-mobile: 640px; /* Mobile breakpoint */
  --wz-breakpoint-tablet: 768px; /* Tablet breakpoint */
  --wz-breakpoint-desktop: 1024px; /* Desktop breakpoint */
  --wz-breakpoint-wide: 1366px; /* Wide screen breakpoint */
  /* ------------------------------------------------------------
   * Accessibility - Touch Targets (FIXED)
   * ------------------------------------------------------------ */
  --wz-touch-target-min: 44px; /* WCAG minimum touch target */
  --wz-touch-target-comfortable: 48px; /* Comfortable touch target */
  /* ------------------------------------------------------------
   * Spacing Multipliers for Responsive Design (FIXED)
   * ------------------------------------------------------------ */
  --wz-spacing-mobile-multiplier: 0.75; /* 75% spacing on mobile */
  --wz-spacing-tablet-multiplier: 0.875; /* 87.5% spacing on tablet */
  --wz-spacing-desktop-multiplier: 1; /* 100% spacing on desktop */
  /* ============================================================
   * HERO SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Hero section styling.
   * These maintain consistent hero proportions and spacing.
   * NOT user-adjustable.
   * ============================================================ */
  /* Hero Typography Multipliers - applied to user's font size settings */
  --wz-hero-title-multiplier: 3.5; /* Title gets 3.5x user's title size */
  --wz-hero-subtitle-multiplier: 1.5; /* Subtitle gets 1.5x user's subtitle size */
  --wz-hero-body-multiplier: 1; /* Body uses user's body size as-is */
  /* Hero Internal Spacing */
  --wz-hero-spacing-internal: 24px; /* Spacing between hero elements */
  --wz-hero-spacing-title-subtitle: 8px; /* Gap between title and subtitle */
  --wz-hero-spacing-sections: 40px; /* Spacing between hero content sections */
  /* Logo Styling */
  --wz-hero-logo-bg-color: transparent; /* Logo background color */
  --wz-hero-logo-bg-opacity: 0; /* Logo background opacity */
  --wz-hero-logo-border-radius: 8px; /* Logo border radius */
  --wz-hero-logo-shadow: none; /* Logo shadow */
  /* Background & Overlay */
  --wz-hero-overlay-color: 0, 0, 0; /* RGB values for rgba() overlay */
  --wz-hero-overlay-opacity: 0; /* Overlay opacity (0-1) */
  --wz-hero-min-height: 600px; /* Minimum hero section height */
  /* ============================================================
   * TIMELINE SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for Timeline section styling.
   * Includes colors for different event types.
   * NOT user-adjustable.
   * ============================================================ */
  /* Timeline Base Colors */
  --wz-timeline-primary: #2563eb; /* Blue for primary actions/highlights */
  --wz-timeline-text-primary: #111827; /* Almost black for main text */
  --wz-timeline-text-secondary: #6b7280; /* Gray for secondary text */
  --wz-timeline-text-muted: #9ca3af; /* Light gray for muted text */
  --wz-timeline-border-light: #e5e7eb; /* Light border */
  --wz-timeline-border-medium: #d1d5db; /* Medium border */
  --wz-timeline-background: #ffffff; /* Clean white background */
  --wz-timeline-background-hover: #f9fafb; /* Subtle hover background */
  /* Timeline Event Type Colors - each event type has its own color */
  --wz-timeline-milestone: #dc2626; /* Red for milestones */
  --wz-timeline-meeting: #2563eb; /* Blue for meetings */
  --wz-timeline-email: #7c3aed; /* Purple for emails */
  --wz-timeline-report: #059669; /* Green for reports */
  --wz-timeline-deliverable: #ea580c; /* Orange for deliverables */
  --wz-timeline-kickoff: #be185d; /* Pink for kickoffs */
  --wz-timeline-review: #0891b2; /* Cyan for reviews */
  --wz-timeline-default: #6b7280; /* Gray for default/other */
  /* ============================================================
   * FAQ SECTION VARIABLES (FIXED)
   * ============================================================
   * Section-specific constants for FAQ section styling.
   * Controls layout, typography, and animations.
   * NOT user-adjustable.
   * ============================================================ */
  /* FAQ Layout & Spacing */
  --wz-faq-item-spacing: 16px; /* Gap between FAQ items */
  --wz-faq-question-answer-spacing: 12px; /* Space between question and answer */
  --wz-faq-internal-padding: 20px; /* Internal padding for FAQ items */
  /* FAQ Question Styling */
  --wz-faq-question-multiplier: 1.1; /* Question font size relative to body */
  --wz-faq-question-weight: 600; /* Question font weight (semibold) */
  /* FAQ Answer Styling */
  --wz-faq-answer-multiplier: 0.95; /* Answer font size relative to body */
  --wz-faq-answer-opacity: 0.85; /* Answer text opacity */
  /* FAQ Interactive Elements */
  --wz-faq-icon-size: 20px; /* Expand/collapse icon size */
  --wz-faq-icon-hover-scale: 1.1; /* Icon scale on hover */
  --wz-faq-border-width: 1px; /* FAQ item border width */
  --wz-faq-border-radius: 8px; /* FAQ item border radius */
  /* FAQ Animation Timing */
  --wz-faq-animation-duration: 0.25s; /* Default animation duration */
  --wz-faq-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  /* FAQ Colors (reference global colors) */
  --wz-faq-border-color: var(--wz-color-border-light); /* Item borders */
  --wz-faq-hover-background: var(--wz-color-background-hover); /* Hover state */
  --wz-faq-expanded-border: var(--wz-color-primary); /* Expanded item border */
}

/* ============================================================
 * LAYOUT STYLE IMPLEMENTATIONS (FIXED)
 * ============================================================
 * CSS rules that implement the three layout styles.
 * Controlled by --wz-layout-style variable (USER-CONTROLLABLE).
 * ============================================================ */
/* Apply layout styles based on --wz-layout-style variable */
._wizard-container_1gomh_358 {
  max-width: var(--wz-container-width);
  padding: var(--wz-container-padding);
  margin: 0 auto;
}

/* Layout Style 1: Center Layout (Default) */
._wizard-container_1gomh_358[data-layout-style="1"],
._wizard-container_1gomh_358[style*="--wz-layout-style: 1"] {
  display: block;
  text-align: left;
}

._wizard-container_1gomh_358[data-layout-style="1"] ._wizard-section_1gomh_371,
._wizard-container_1gomh_358[style*="--wz-layout-style: 1"] ._wizard-section_1gomh_371 {
  margin-bottom: var(--wz-section-spacing);
}

/* Layout Style 2: Split Layout */
._wizard-container_1gomh_358[data-layout-style="2"],
._wizard-container_1gomh_358[style*="--wz-layout-style: 2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--wz-section-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  ._wizard-container_1gomh_358[data-layout-style="2"],
  ._wizard-container_1gomh_358[style*="--wz-layout-style: 2"] {
    grid-template-columns: 1fr;
    gap: var(--wz-section-spacing);
  }
}
/* Layout Style 3: Stacked Layout */
._wizard-container_1gomh_358[data-layout-style="3"],
._wizard-container_1gomh_358[style*="--wz-layout-style: 3"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wz-section-spacing) * 0.75); /* Tighter spacing */
}

._wizard-container_1gomh_358[data-layout-style="3"] ._wizard-section_1gomh_371,
._wizard-container_1gomh_358[style*="--wz-layout-style: 3"] ._wizard-section_1gomh_371 {
  margin-bottom: 0; /* Remove default margin, use gap instead */
}

._signatureSection_1gomh_405 {
  width: 100%;
  font-family: var(--wz-font-family-body);
  color: var(--wz-color-text-primary);
}

._signersContainer_1gomh_411 {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 600px;
}
._signersContainer_1gomh_411._horizontal_1gomh_417 {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--wz-spacing-lg);
  max-width: none;
}
._signersContainer_1gomh_411._horizontal_1gomh_417 ._signerBlock_1gomh_423 {
  flex: 1;
  min-width: 280px;
  border-bottom: none;
  border-right: 1px solid var(--wz-color-border-light);
}
._signersContainer_1gomh_411._horizontal_1gomh_417 ._signerBlock_1gomh_423:last-child {
  border-right: none;
}
._signersContainer_1gomh_411._horizontal_1gomh_417 ._signerBlock_1gomh_423 ._signerIdentity_1gomh_432 {
  align-items: flex-start;
  text-align: left;
}
._signersContainer_1gomh_411._grid_1gomh_436 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wz-spacing-lg);
  max-width: none;
}
._signersContainer_1gomh_411._grid_1gomh_436 ._signerBlock_1gomh_423 {
  border-bottom: none;
}
._signersContainer_1gomh_411._grid_1gomh_436 ._signerBlock_1gomh_423 ._signerIdentity_1gomh_432 {
  align-items: flex-start;
  text-align: left;
}

._signerBlock_1gomh_423 {
  position: relative;
  border: none;
  border-radius: 0;
  padding: var(--wz-spacing-lg) var(--wz-spacing-md) var(--wz-spacing-xl, 32px);
  background: transparent;
  box-shadow: none;
  transition: var(--wz-transition-fast);
  border-bottom: 1px solid var(--wz-color-border-light);
}
._signerBlock_1gomh_423:last-child {
  border-bottom: none;
}
._signerBlock_1gomh_423:focus-within {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}
._signerBlock_1gomh_423._signed_1gomh_467 {
  border-left: 3px solid var(--wz-color-success);
  padding-left: calc(var(--wz-spacing-md) - 3px);
}
._signerBlock_1gomh_423._declined_1gomh_471 {
  border-left: 3px solid var(--wz-color-danger);
  padding-left: calc(var(--wz-spacing-md) - 3px);
}
._signerBlock_1gomh_423._clickable_1gomh_475 ._signatureArea_1gomh_475 {
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._signerBlock_1gomh_423._clickable_1gomh_475 ._signatureArea_1gomh_475:hover {
  background: color-mix(in srgb, var(--wz-color-primary) 4%, transparent);
}
._signerBlock_1gomh_423._clickable_1gomh_475 ._signatureArea_1gomh_475:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._removeButton_1gomh_487 {
  position: absolute;
  top: var(--wz-spacing-lg);
  right: var(--wz-spacing-md);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--wz-color-text-muted);
  border-radius: var(--wz-border-radius-small);
  transition: var(--wz-transition-fast);
  z-index: 1;
  opacity: 0.5;
}
._removeButton_1gomh_487:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--wz-color-danger) 10%, transparent);
  color: var(--wz-color-danger);
}
._removeButton_1gomh_487:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wz-color-danger);
  outline-offset: 2px;
}

._legalTextWrapper_1gomh_517 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: var(--wz-font-weight-small);
  line-height: var(--wz-line-height-relaxed);
  color: var(--wz-color-text-tertiary);
  max-width: 60ch;
  margin-bottom: var(--wz-spacing-lg);
  padding-bottom: var(--wz-spacing-md);
  border-bottom: 1px solid var(--wz-color-border-light);
}
._legalTextWrapper_1gomh_517 ._legalText_1gomh_517 {
  margin: 0;
}

._signerIdentity_1gomh_432 {
  margin-top: var(--wz-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-xs);
  align-items: center;
  text-align: center;
}
._signerIdentity_1gomh_432 ._signerName_1gomh_540 {
  font-family: var(--wz-font-family-heading);
  font-weight: var(--wz-font-weight-titles);
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-body);
  color: var(--wz-color-text-primary);
}
._signerIdentity_1gomh_432 ._signerTitle_1gomh_547,
._signerIdentity_1gomh_432 ._signerCompany_1gomh_548 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-secondary);
}
._signerIdentity_1gomh_432 ._signedDate_1gomh_554 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-secondary);
  margin-top: var(--wz-spacing-xs);
}

._signatureArea_1gomh_475 {
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--wz-spacing-md) var(--wz-spacing-sm) var(--wz-spacing-sm);
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 2px solid var(--wz-color-text-primary);
  margin-bottom: var(--wz-spacing-sm);
}
._signatureArea_1gomh_475 ._signedState_1gomh_574 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wz-spacing-xs);
}
._signatureArea_1gomh_475 ._signatureImage_1gomh_580 {
  max-width: 240px;
  max-height: 90px;
  object-fit: contain;
  margin-bottom: -2px;
}
._signatureArea_1gomh_475 ._clearSignatureButton_1gomh_586 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-xs);
  padding: 2px var(--wz-spacing-sm) !important;
  font-family: var(--wz-font-family-body);
  font-size: calc(var(--wz-font-size-small) * 0.85);
  line-height: 1;
  color: var(--wz-color-text-muted);
  background: transparent;
  border: 1px solid var(--wz-color-border-light);
  border-radius: var(--wz-border-radius-small);
  cursor: pointer;
  transition: var(--wz-transition-fast);
  opacity: 0;
}
._signerBlock_1gomh_423:hover ._signatureArea_1gomh_475 ._clearSignatureButton_1gomh_586 {
  opacity: 1;
}
._signatureArea_1gomh_475 ._clearSignatureButton_1gomh_586:hover {
  color: var(--wz-color-danger);
  border-color: var(--wz-color-danger);
  background: color-mix(in srgb, var(--wz-color-danger) 8%, transparent);
}
._signatureArea_1gomh_475 ._clearSignatureButton_1gomh_586:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wz-color-danger);
  outline-offset: 2px;
}
._signatureArea_1gomh_475 ._placeholderLine_1gomh_616 {
  display: none;
}
._signatureArea_1gomh_475 ._declinedLabel_1gomh_619 {
  color: var(--wz-color-danger);
  font-weight: var(--wz-font-weight-subtitles);
  font-size: var(--wz-font-size-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
._signatureArea_1gomh_475 ._pendingLabel_1gomh_626 {
  color: var(--wz-color-text-muted);
  font-size: var(--wz-font-size-small);
  font-style: normal;
  letter-spacing: 0.02em;
}

._pendingState_1gomh_633 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wz-spacing-sm);
  padding: var(--wz-spacing-lg) 0 0;
  width: 100%;
  margin-bottom: var(--wz-spacing-sm);
}

._signButton_1gomh_643 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-xs);
  margin-top: var(--wz-spacing-sm);
  padding: var(--wz-spacing-xs) var(--wz-spacing-md) !important;
  min-height: var(--wz-touch-target-min);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  font-weight: 500;
  line-height: 1;
  color: var(--wz-color-primary);
  background: transparent;
  border: 1px solid var(--wz-color-primary);
  border-radius: var(--wz-border-radius-small);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._signButton_1gomh_643:hover {
  background: var(--wz-color-primary);
  color: #fff;
  box-shadow: var(--wz-shadow-small);
}
._signButton_1gomh_643:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._datePlaceholder_1gomh_672 {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-muted);
  font-style: normal;
  margin-top: var(--wz-spacing-xs);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--wz-spacing-xs);
}

._dateLine_1gomh_685 {
  display: inline-block;
  width: 120px;
  border-bottom: 1px solid var(--wz-color-border);
  vertical-align: baseline;
}

._signingModalContent_1gomh_692 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-md);
}

._addSignerButton_1gomh_698 {
  margin-top: var(--wz-spacing-md);
  max-width: 600px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-sm);
  padding: var(--wz-spacing-sm) var(--wz-spacing-md);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  color: var(--wz-color-text-muted);
  background: transparent;
  border: 1px dashed var(--wz-color-border-light);
  border-radius: var(--wz-border-radius-small);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._addSignerButton_1gomh_698:hover {
  border-color: var(--wz-color-primary);
  color: var(--wz-color-primary);
  background: color-mix(in srgb, var(--wz-color-primary) 4%, transparent);
}
._addSignerButton_1gomh_698:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._signingInterface_1gomh_726 {
  margin-top: var(--wz-spacing-md);
  border: 1px solid var(--wz-color-border-light);
  border-radius: var(--wz-border-radius-medium);
  padding: var(--wz-spacing-md);
  background: var(--wz-color-background-subtle);
  box-shadow: var(--wz-shadow-small);
}

._methodTabs_1gomh_735 {
  display: flex;
  gap: var(--wz-spacing-sm);
  margin-bottom: var(--wz-spacing-md);
  border-bottom: 1px solid var(--wz-color-border-light);
  padding-bottom: var(--wz-spacing-sm);
  flex-wrap: wrap;
}

._methodTab_1gomh_735 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--wz-color-text-secondary);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  transition: var(--wz-transition-fast);
}
._methodTab_1gomh_735._active_1gomh_759 {
  border-bottom-color: var(--wz-color-primary);
  color: var(--wz-color-primary);
  font-weight: var(--wz-font-weight-subtitles);
}
._methodTab_1gomh_735:hover {
  color: var(--wz-color-text-primary);
  background: color-mix(in srgb, var(--wz-color-primary) 7%, transparent);
  border-radius: var(--wz-border-radius-small);
}
._methodTab_1gomh_735:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._canvasContainer_1gomh_774 {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 3/1;
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  background: var(--wz-color-background);
  touch-action: none;
  cursor: crosshair;
}

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

._clearButton_1gomh_790 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wz-spacing-xs) var(--wz-spacing-sm) !important;
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  background: var(--wz-color-background);
  color: var(--wz-color-text-secondary);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}
._clearButton_1gomh_790:hover {
  border-color: var(--wz-color-border-hover, var(--wz-color-border));
  color: var(--wz-color-text-primary);
  background: var(--wz-color-background-hover, var(--wz-color-background-subtle));
}
._clearButton_1gomh_790:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._consentArea_1gomh_815 {
  margin-top: var(--wz-spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--wz-spacing-sm);
}
._consentArea_1gomh_815 input[type=checkbox] {
  accent-color: var(--wz-color-primary);
}
._consentArea_1gomh_815 label {
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-primary);
  cursor: pointer;
}

._signActions_1gomh_832 {
  margin-top: var(--wz-spacing-md);
  display: flex;
  gap: var(--wz-spacing-md);
  flex-wrap: wrap;
}

._actionButton_1gomh_839 {
  min-height: var(--wz-touch-target-min);
  padding: calc(var(--wz-spacing-xs) * 2) var(--wz-spacing-md);
  border-radius: var(--wz-border-radius-medium);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-body);
  cursor: pointer;
  transition: var(--wz-transition-fast);
}

._primaryActionButton_1gomh_850 {
  border: 1px solid var(--wz-color-primary);
  background: var(--wz-color-primary);
  color: var(--wz-color-background);
}
._primaryActionButton_1gomh_850:hover:not(:disabled) {
  filter: brightness(0.97);
  box-shadow: var(--wz-shadow-small);
}

._dangerActionButton_1gomh_860 {
  border: 1px solid color-mix(in srgb, var(--wz-color-danger) 50%, var(--wz-color-border));
  background: transparent;
  color: var(--wz-color-danger);
}
._dangerActionButton_1gomh_860:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wz-color-danger) 8%, transparent);
  border-color: var(--wz-color-danger);
}

._actionButton_1gomh_839:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._previewContainer_1gomh_875 {
  margin-top: var(--wz-spacing-sm);
  padding: var(--wz-spacing-sm);
  background: var(--wz-color-background);
  border: 1px solid var(--wz-color-border-light);
  border-radius: var(--wz-border-radius-small);
}

._previewImage_1gomh_883 {
  display: block;
  max-width: 300px;
  max-height: 100px;
}

._statusMessage_1gomh_889 {
  margin: 0;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-body);
  line-height: var(--wz-line-height-body);
  color: var(--wz-color-text-primary);
}

._successMessage_1gomh_897 {
  color: var(--wz-color-success);
}

._declinedMessage_1gomh_901 {
  color: var(--wz-color-danger);
}

._errorMessage_1gomh_905 {
  margin-top: var(--wz-spacing-sm);
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-danger);
}

._uploadInput_1gomh_913 {
  width: 100%;
  font-family: var(--wz-font-family-body);
  font-size: var(--wz-font-size-small);
  line-height: var(--wz-line-height-small);
  color: var(--wz-color-text-primary);
}

._typedRoot_1gomh_921 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-sm);
}

._typedInput_1gomh_927 {
  width: 100%;
  min-height: var(--wz-touch-target-min);
  padding: var(--wz-spacing-sm);
  font-size: calc(var(--wz-font-size-body) * 1.5);
  line-height: var(--wz-line-height-title);
  color: var(--wz-color-text-primary);
  background: var(--wz-color-background);
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  transition: var(--wz-transition-fast);
}
._typedInput_1gomh_927:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wz-color-primary) 18%, transparent);
}
._typedInput_1gomh_927::placeholder {
  color: var(--wz-color-text-muted);
  font-style: italic;
}

._fontOptions_1gomh_949 {
  display: flex;
  gap: var(--wz-spacing-sm);
  flex-wrap: wrap;
}

._fontOptionButton_1gomh_955 {
  min-height: var(--wz-touch-target-min);
  padding: calc(var(--wz-spacing-xs) * 2) var(--wz-spacing-md);
  border: 1px solid var(--wz-color-border);
  border-radius: var(--wz-border-radius-small);
  background: var(--wz-color-background);
  color: var(--wz-color-text-primary);
  cursor: pointer;
  transition: var(--wz-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
._fontOptionButton_1gomh_955:hover {
  border-color: var(--wz-color-border-hover);
  background: var(--wz-color-background-hover);
}
._fontOptionButton_1gomh_955:focus-visible {
  outline: 2px solid var(--wz-color-primary);
  outline-offset: 2px;
}

._fontOptionButtonActive_1gomh_977 {
  border-width: 2px;
  border-color: var(--wz-color-primary);
}._modernColorPicker_1w3is_1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._colorPreviewCard_1w3is_8 {
  position: relative;
  width: 100%;
}

._colorDisplay_1w3is_13 {
  position: relative;
  width: 100%;
  min-height: 160px;
  border: none;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
._colorDisplay_1w3is_13:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
._colorDisplay_1w3is_13:active {
  transform: translateY(0);
}
._colorDisplay_1w3is_13:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

._clipCorner_1w3is_37 {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}

._colorInfo_1w3is_49 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

._colorLabel_1w3is_58 {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

._colorHex_1w3is_66 {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-code);
  letter-spacing: 1px;
}

._colorRgb_1w3is_73 {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.8;
  font-family: var(--font-code);
}

._contrastBadge_1w3is_80 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

._contrastRatio_1w3is_93 {
  font-family: var(--font-code);
  font-size: 14px;
}

._contrastLevel_1w3is_98 {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

._paletteIcon_1w3is_106 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
._colorDisplay_1w3is_13:hover ._paletteIcon_1w3is_106 {
  opacity: 0.5;
}

._pickerPopover_1w3is_117 {
  position: fixed;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
  padding: 12px;
  z-index: 9999;
  animation: _slideIn_1w3is_1 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes _slideIn_1w3is_1 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._pickerPopover_1w3is_117 .react-colorful {
  width: 220px;
  height: 220px;
}
._pickerPopover_1w3is_117 .react-colorful__saturation {
  border-radius: 8px 8px 0 0;
}
._pickerPopover_1w3is_117 .react-colorful__hue {
  height: 20px;
  border-radius: 0 0 8px 8px;
}
._pickerPopover_1w3is_117 .react-colorful__saturation-pointer,
._pickerPopover_1w3is_117 .react-colorful__hue-pointer {
  width: 20px;
  height: 20px;
  border-width: 3px;
}

._description_1w3is_155 {
  font-size: 13px;
  color: var(--neutral-600);
  line-height: 1.5;
  margin: 0;
}

._accessibilityAlert_1w3is_162 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 500;
  animation: _slideIn_1w3is_1 0.3s ease;
}
@keyframes _slideIn_1w3is_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._accessibilityAlert_1w3is_162 svg {
  flex-shrink: 0;
  margin-top: 1px;
}

._alertContent_1w3is_188 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

._alertMessage_1w3is_195 {
  line-height: 1.4;
}

._alertRatio_1w3is_199 {
  font-size: 12px;
  opacity: 0.9;
  font-family: var(--font-code);
}

._statusExcellent_1w3is_205 {
  background: var(--positive-50);
  border-color: var(--positive-500);
  color: var(--positive-700);
}
._statusExcellent_1w3is_205 svg {
  color: var(--positive-600);
}

._statusGood_1w3is_214 {
  background: var(--positive-50);
  border-color: var(--positive-400);
  color: var(--positive-700);
}
._statusGood_1w3is_214 svg {
  color: var(--positive-500);
}

._statusWarning_1w3is_223 {
  background: var(--warning-50);
  border-color: var(--warning-500);
  color: var(--warning-800);
}
._statusWarning_1w3is_223 svg {
  color: var(--warning-600);
}

._statusError_1w3is_232 {
  background: var(--negative-50);
  border-color: var(--negative-500);
  color: var(--negative-800);
}
._statusError_1w3is_232 svg {
  color: var(--negative-600);
}

[data-theme=dark] ._pickerPopover_1w3is_117 {
  background: var(--neutral-900);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._description_1w3is_155 {
  color: var(--neutral-400);
}
[data-theme=dark] ._statusExcellent_1w3is_205,
[data-theme=dark] ._statusGood_1w3is_214 {
  background: rgba(45, 134, 86, 0.15);
  border-color: var(--positive-600);
  color: var(--positive-300);
}
[data-theme=dark] ._statusExcellent_1w3is_205 svg,
[data-theme=dark] ._statusGood_1w3is_214 svg {
  color: var(--positive-400);
}
[data-theme=dark] ._statusWarning_1w3is_223 {
  background: rgba(255, 191, 15, 0.15);
  border-color: var(--warning-600);
  color: var(--warning-300);
}
[data-theme=dark] ._statusWarning_1w3is_223 svg {
  color: var(--warning-400);
}
[data-theme=dark] ._statusError_1w3is_232 {
  background: rgba(242, 65, 90, 0.15);
  border-color: var(--negative-600);
  color: var(--negative-300);
}
[data-theme=dark] ._statusError_1w3is_232 svg {
  color: var(--negative-400);
}/**
 * SimpleFontPicker Styles
 * Clean, minimal design for wizard settings panel
 */
._simpleFontPicker_i96cw_5 {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

._label_i96cw_11 {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  margin-bottom: 6px;
}

/* Selected Font Button */
._selectButton_i96cw_20 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._selectButton_i96cw_20:hover {
  border-color: var(--primary-500);
  background: var(--neutral-50);
}
._selectButton_i96cw_20:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._selectedContent_i96cw_42 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._fontName_i96cw_49 {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-900);
}

._fontCategory_i96cw_55 {
  font-size: 11px;
  color: var(--neutral-500);
  padding: 2px 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  text-transform: capitalize;
}

._chevron_i96cw_64 {
  color: var(--neutral-500);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
._chevron_i96cw_64._chevronOpen_i96cw_69 {
  transform: rotate(180deg);
}

/* Dropdown */
._dropdown_i96cw_74 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Search Input */
._searchWrapper_i96cw_91 {
  padding: 12px;
  border-bottom: 1px solid var(--neutral-200);
}

._searchInput_i96cw_96 {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease;
}
._searchInput_i96cw_96:focus {
  border-color: var(--primary-500);
}
._searchInput_i96cw_96::placeholder {
  color: var(--neutral-400);
}

/* Category Filters */
._categoryFilters_i96cw_113 {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--neutral-200);
  overflow-x: auto;
  flex-shrink: 0;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._categoryFilters_i96cw_113::-webkit-scrollbar {
  display: none;
}

._categoryButton_i96cw_128 {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-600);
  background: var(--neutral-100);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
._categoryButton_i96cw_128:hover {
  background: var(--neutral-200);
}
._categoryButton_i96cw_128._active_i96cw_144 {
  color: var(--primary-700);
  background: var(--primary-50);
  border-color: var(--primary-300);
}

/* Font List */
._fontList_i96cw_151 {
  overflow-y: auto;
  max-height: 280px;
  padding: 4px;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}
._fontList_i96cw_151::-webkit-scrollbar {
  width: 6px;
}
._fontList_i96cw_151::-webkit-scrollbar-track {
  background: transparent;
}
._fontList_i96cw_151::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 3px;
}
._fontList_i96cw_151::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

._fontOption_i96cw_173 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}
._fontOption_i96cw_173:hover {
  background: var(--neutral-50);
}
._fontOption_i96cw_173._selected_i96cw_42 {
  background: var(--primary-50);
}
._fontOption_i96cw_173._selected_i96cw_42 ._fontLabel_i96cw_192 {
  color: var(--primary-700);
  font-weight: 600;
}

._fontInfo_i96cw_197 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

._fontLabel_i96cw_192 {
  font-size: 14px;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

._categoryBadge_i96cw_219 {
  font-size: 10px;
  color: var(--neutral-500);
  padding: 2px 6px;
  background: var(--neutral-100);
  border-radius: 3px;
  text-transform: capitalize;
}

._popularBadge_i96cw_228 {
  font-size: 10px;
  font-weight: 600;
  color: var(--warning-700);
  padding: 2px 6px;
  background: var(--warning-50);
  border: 1px solid var(--warning-200);
  border-radius: 3px;
}

._checkIcon_i96cw_238 {
  color: var(--primary-600);
  flex-shrink: 0;
}

._noResults_i96cw_243 {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--neutral-500);
}

/* Dark Theme Support */
[data-theme=dark] ._selectButton_i96cw_20 {
  background: var(--neutral-800);
  border-color: var(--neutral-600);
}
[data-theme=dark] ._selectButton_i96cw_20:hover {
  background: var(--neutral-700);
  border-color: var(--primary-400);
}
[data-theme=dark] ._selectButton_i96cw_20:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
[data-theme=dark] ._label_i96cw_11 {
  color: var(--neutral-300);
}
[data-theme=dark] ._fontName_i96cw_49 {
  color: var(--neutral-100);
}
[data-theme=dark] ._fontCategory_i96cw_55 {
  background: var(--neutral-700);
  color: var(--neutral-400);
}
[data-theme=dark] ._chevron_i96cw_64 {
  color: var(--neutral-400);
}
[data-theme=dark] ._dropdown_i96cw_74 {
  background: var(--neutral-800);
  border-color: var(--neutral-600);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] ._searchWrapper_i96cw_91 {
  border-bottom-color: var(--neutral-700);
}
[data-theme=dark] ._searchInput_i96cw_96 {
  background: var(--neutral-900);
  border-color: var(--neutral-600);
  color: var(--neutral-100);
}
[data-theme=dark] ._searchInput_i96cw_96:focus {
  border-color: var(--primary-400);
}
[data-theme=dark] ._searchInput_i96cw_96::placeholder {
  color: var(--neutral-500);
}
[data-theme=dark] ._categoryFilters_i96cw_113 {
  border-bottom-color: var(--neutral-700);
}
[data-theme=dark] ._categoryButton_i96cw_128 {
  background: var(--neutral-700);
  color: var(--neutral-300);
}
[data-theme=dark] ._categoryButton_i96cw_128:hover {
  background: var(--neutral-600);
}
[data-theme=dark] ._categoryButton_i96cw_128._active_i96cw_144 {
  background: var(--primary-900);
  border-color: var(--primary-600);
  color: var(--primary-200);
}
[data-theme=dark] ._fontOption_i96cw_173:hover {
  background: var(--neutral-700);
}
[data-theme=dark] ._fontOption_i96cw_173._selected_i96cw_42 {
  background: var(--primary-900);
}
[data-theme=dark] ._fontOption_i96cw_173._selected_i96cw_42 ._fontLabel_i96cw_192 {
  color: var(--primary-200);
}
[data-theme=dark] ._fontLabel_i96cw_192 {
  color: var(--neutral-100);
}
[data-theme=dark] ._categoryBadge_i96cw_219 {
  background: var(--neutral-700);
  color: var(--neutral-400);
}
[data-theme=dark] ._popularBadge_i96cw_228 {
  background: var(--warning-900);
  border-color: var(--warning-700);
  color: var(--warning-200);
}
[data-theme=dark] ._checkIcon_i96cw_238 {
  color: var(--primary-400);
}
[data-theme=dark] ._noResults_i96cw_243 {
  color: var(--neutral-400);
}._wizardSettings_aetvn_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

._settingsContent_aetvn_8 {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 32px;
}
._settingsContent_aetvn_8::-webkit-scrollbar {
  width: 6px;
}
._settingsContent_aetvn_8::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._settingsContent_aetvn_8::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._settingsContent_aetvn_8::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 640px) {
  ._settingsContent_aetvn_8 {
    padding: 12px;
    padding-bottom: 24px;
  }
}

._colorPalette_aetvn_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._primaryColorSection_aetvn_41 {
  width: 100%;
}

._contrastColorSection_aetvn_45 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  ._contrastColorSection_aetvn_45 {
    grid-template-columns: 1fr;
  }
}

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

._fontFamilies_aetvn_62 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

._fontLabel_aetvn_74 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}

._fontSelect_aetvn_83 {
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 6px;
  background: var(--pure-white);
  color: var(--neutral-900);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._fontSelect_aetvn_83:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}
._fontSelect_aetvn_83:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._fontSizes_aetvn_103 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

._optionSection_aetvn_115 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._groupTitle_aetvn_121 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}

._optionGrid_aetvn_128 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
  ._optionGrid_aetvn_128 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  ._optionGrid_aetvn_128 {
    grid-template-columns: 1fr;
  }
}

._optionCard_aetvn_144 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  gap: 8px;
}
._optionCard_aetvn_144:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._optionCard_aetvn_144._selected_aetvn_163 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
._optionCard_aetvn_144._selected_aetvn_163 ._optionIcon_aetvn_168 {
  color: var(--primary-600);
}

._optionIcon_aetvn_168 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600);
  transition: color 0.2s ease;
}
._optionIcon_aetvn_168 svg {
  width: 18px;
  height: 18px;
}

._optionContent_aetvn_184 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._optionLabel_aetvn_190 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.2;
}

._optionDescription_aetvn_197 {
  font-size: 11px;
  color: var(--neutral-500);
  line-height: 1.3;
}

._toggleOption_aetvn_203 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--pure-white);
  cursor: pointer;
  transition: all 0.2s ease;
}
._toggleOption_aetvn_203:hover {
  border-color: var(--neutral-300);
  background-color: var(--neutral-50);
}

._toggleInfo_aetvn_219 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}
._toggleInfo_aetvn_219 svg {
  color: var(--neutral-600);
  flex-shrink: 0;
  margin-top: 2px;
}
._toggleInfo_aetvn_219 > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._toggleLabel_aetvn_236 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  display: block;
}

._toggleDescription_aetvn_243 {
  font-size: 12px;
  color: var(--neutral-500);
  display: block;
}

._toggleCheckbox_aetvn_249 {
  width: 44px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--primary-500);
}

@media (prefers-contrast: high) {
  ._optionCard_aetvn_144,
  ._toggleOption_aetvn_203,
  ._fontSelect_aetvn_83 {
    border-width: 2px;
  }
  ._optionCard_aetvn_144._selected_aetvn_163 {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._optionCard_aetvn_144,
  ._toggleOption_aetvn_203,
  ._fontSelect_aetvn_83 {
    transition: none;
  }
}._panelContainer_qym2d_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 500px) {
  ._panelContainer_qym2d_1 {
    max-width: 100vw;
    box-sizing: border-box;
  }
}

._content_qym2d_17 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 100%;
  box-sizing: border-box;
}
._content_qym2d_17::-webkit-scrollbar {
  width: 6px;
}
._content_qym2d_17::-webkit-scrollbar-track {
  background: transparent;
}
._content_qym2d_17::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 3px;
}
._content_qym2d_17::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-300);
}
@media (max-width: 768px) {
  ._content_qym2d_17 {
    padding: 1rem 0;
    gap: 1.25rem;
  }
}
@media (max-width: 500px) {
  ._content_qym2d_17 {
    padding: 0.875rem 0;
    gap: 1rem;
    max-width: 100%;
  }
  ._content_qym2d_17 > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

._footer_qym2d_59 {
  padding: 1rem 0 0 0;
  border-top: 1px solid var(--neutral-200);
  margin-top: auto;
  flex-shrink: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  ._footer_qym2d_59 {
    padding: 0.75rem 0 0 0;
  }
}
@media (max-width: 500px) {
  ._footer_qym2d_59 {
    padding: 0.625rem 0 0 0;
  }
}

._resetSection_qym2d_78 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

._resetHeader_qym2d_86 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._helpIcon_qym2d_92 {
  color: var(--neutral-500);
  cursor: help;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
._helpIcon_qym2d_92:hover {
  color: var(--neutral-700);
}

._resetButton_qym2d_102 {
  flex: 1;
  transition: all 0.2s ease;
  font-weight: 500;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  ._resetButton_qym2d_102 {
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
  }
}
@media (max-width: 500px) {
  ._resetButton_qym2d_102 {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }
}

._loadingState_qym2d_121 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--neutral-600);
  font-size: 0.875rem;
}/**
 * SaveStatusIcon Animations
 *
 * All animations for the circular save status icon
 * Uses ONLY MonoWaco design system colors from packages/ui/dist/css/main.css
 * NO --wz-* variables
 */
._statusIcon_1jacj_8 {
  display: inline-block;
  vertical-align: middle;
  color: var(--positive-500);
}
._statusIcon_1jacj_8._idle_1jacj_13 {
  color: var(--positive-500);
}
._statusIcon_1jacj_8._idle_1jacj_13 ._statusCircle_1jacj_16 {
  stroke: var(--positive-500);
}
._statusIcon_1jacj_8._saving_1jacj_19 {
  color: var(--warning-500);
}
._statusIcon_1jacj_8._saving_1jacj_19 ._statusCircle_1jacj_16 {
  stroke: var(--warning-500);
}
._statusIcon_1jacj_8._saved_1jacj_25 {
  color: var(--positive-500);
}
._statusIcon_1jacj_8._saved_1jacj_25 ._statusCircle_1jacj_16 {
  stroke: var(--positive-500);
}
._statusIcon_1jacj_8._saved_1jacj_25 {
  animation: _pulseIcon_1jacj_1 0.6s ease-out;
}
._statusIcon_1jacj_8._error_1jacj_34 {
  color: var(--negative-500);
}
._statusIcon_1jacj_8._error_1jacj_34 ._statusCircle_1jacj_16 {
  stroke: var(--negative-500);
}
._statusIcon_1jacj_8._error_1jacj_34 {
  animation: _shakeIcon_1jacj_1 0.4s ease-out;
}
._statusIcon_1jacj_8._mixed_1jacj_43 {
  color: var(--warning-500);
}
._statusIcon_1jacj_8._mixed_1jacj_43 ._statusCircle_1jacj_16 {
  stroke: var(--warning-500);
}

._statusCircle_1jacj_16 {
  stroke: var(--positive-500);
  transition: stroke 0.3s ease-out;
}

._checkmarkPath_1jacj_55 {
  stroke: currentColor;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
._checkmarkPath_1jacj_55._visible_1jacj_64 {
  opacity: 1;
  transform: scale(1);
  stroke-dashoffset: 0;
  animation: _drawCheckmark_1jacj_1 0.4s ease-out forwards;
  transition: opacity 0.3s ease-out 0.2s, transform 0.3s ease-out 0.2s;
}
._checkmarkPath_1jacj_55._hidden_1jacj_71 {
  opacity: 0;
  transform: scale(0.8);
  stroke-dashoffset: 20;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

@keyframes _drawCheckmark_1jacj_1 {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}
._loaderPath_1jacj_86 {
  stroke: currentColor;
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
._loaderPath_1jacj_86._visible_1jacj_64 {
  opacity: 1;
  animation: _spinLoader_1jacj_1 1s linear infinite;
  transition: opacity 0.3s ease-out 0.15s;
}
._loaderPath_1jacj_86._hidden_1jacj_71 {
  opacity: 0;
  animation: none;
  transition: opacity 0.2s ease-out;
}

@keyframes _spinLoader_1jacj_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._errorPath_1jacj_111 {
  stroke: currentColor;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
._errorPath_1jacj_111._visible_1jacj_64 {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
._errorPath_1jacj_111._hidden_1jacj_71 {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

._warningPath_1jacj_129 {
  stroke: currentColor;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
._warningPath_1jacj_129._visible_1jacj_64 {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
._warningPath_1jacj_129._hidden_1jacj_71 {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

@keyframes _pulseIcon_1jacj_1 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes _shakeIcon_1jacj_1 {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._statusIcon_1jacj_8,
  ._statusCircle_1jacj_16,
  ._checkmarkPath_1jacj_55,
  ._loaderPath_1jacj_86,
  ._errorPath_1jacj_111,
  ._warningPath_1jacj_129 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ._statusIcon_1jacj_8._saved_1jacj_25,
  ._statusIcon_1jacj_8._error_1jacj_34 {
    animation: none !important;
  }
}/**
 * SaveStatusIndicator Styles
 *
 * Uses ONLY MonoWaco design system colors from packages/ui/dist/css/main.css
 * NO --wz-* variables - follows design system exclusively
 * Includes container styles and state-based colors
 * Icon animations are in SaveStatusIcon.module.scss
 */
._indicator_jb50t_9 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 200ms ease-in-out;
  cursor: default;
  user-select: none;
  animation: _fadeIn_jb50t_1 300ms ease-in-out;
}
._indicator_jb50t_9 ._text_jb50t_22 {
  display: inline;
}
@media (max-width: 768px) {
  ._indicator_jb50t_9 {
    padding: 6px 12px;
  }
  ._indicator_jb50t_9 ._text_jb50t_22 {
    display: none;
  }
}
@media (max-width: 480px) {
  ._indicator_jb50t_9 {
    padding: 8px;
    min-height: 32px;
    min-width: 32px;
    justify-content: center;
  }
}

._saving_jb50t_42 {
  color: var(--warning-700);
  background-color: color-mix(in srgb, var(--warning-500) 10%, transparent);
}
._saving_jb50t_42 svg {
  color: var(--warning-500);
}

._saved_jb50t_50 {
  position: relative;
  color: var(--positive-700);
  background-color: color-mix(in srgb, var(--positive-500) 8%, transparent);
  animation: _fadeIn_jb50t_1 300ms ease-in-out, _pulse_jb50t_1 400ms ease-in-out;
}
._saved_jb50t_50 svg {
  color: var(--positive-500);
}
._saved_jb50t_50::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--positive-500) 8%, transparent);
  border-radius: inherit;
  animation: _fadeOutBackground_jb50t_1 1s ease-in-out 1s forwards;
  pointer-events: none;
}
._saved_jb50t_50[data-status=idle] {
  color: var(--positive-600);
  background-color: transparent;
  animation: none;
}
._saved_jb50t_50[data-status=idle] svg {
  color: var(--positive-500);
}
._saved_jb50t_50[data-status=idle]::after {
  display: none;
}
._saved_jb50t_50[data-status=idle]:hover {
  background-color: color-mix(in srgb, var(--positive-500) 5%, transparent);
}

._error_jb50t_83 {
  color: var(--negative-700);
  background-color: color-mix(in srgb, var(--negative-500) 10%, transparent);
  animation: _fadeIn_jb50t_1 300ms ease-in-out, _shake_jb50t_1 400ms ease-in-out;
}
._error_jb50t_83 svg {
  color: var(--negative-500);
}

._mixed_jb50t_92 {
  color: var(--warning-700);
  background-color: color-mix(in srgb, var(--warning-500) 10%, transparent);
  animation: _fadeIn_jb50t_1 300ms ease-in-out;
}
._mixed_jb50t_92 svg {
  color: var(--warning-500);
}

@keyframes _fadeIn_jb50t_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeOutBackground_jb50t_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes _pulse_jb50t_1 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes _shake_jb50t_1 {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
._indicator_jb50t_9:hover {
  filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
  ._indicator_jb50t_9 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ._saved_jb50t_50::after {
    animation: none;
  }
}/**
 * WizardActionsMenu Component Styles
 * Clean dropdown menu for wizard toolbar actions
 * Uses semantic color tokens that automatically support light/dark modes
 */
._actionsMenu_u0qms_6 {
  position: relative;
  display: inline-block;
}

._trigger_u0qms_11 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border: none;
  border-radius: 8px;
  background-color: transparent;
  color: var(--neutral-700);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
._trigger_u0qms_11 svg {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
._trigger_u0qms_11:hover:not(:disabled) {
  background-color: var(--neutral-100);
  color: var(--primary-600);
}
._trigger_u0qms_11:hover:not(:disabled) svg {
  transform: scale(1.1);
}
._trigger_u0qms_11:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  background-color: var(--neutral-50);
}
._trigger_u0qms_11:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._triggerActive_u0qms_45 {
  background-color: var(--primary-50);
  color: var(--primary-600);
}
._triggerActive_u0qms_45 svg {
  transform: scale(1.05);
}

._triggerText_u0qms_53 {
  color: var(--neutral-700);
  font-weight: 500;
}

._sheetContent_u0qms_58 {
  border-radius: 18px 18px 0 0;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
  background: var(--pure-white);
  max-height: 78vh;
  overflow-y: auto;
}

._sheetHeader_u0qms_66 {
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--neutral-200);
}

._sheetTitle_u0qms_71 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
}

._sheetDescription_u0qms_78 {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin-top: var(--spacing-xs);
}

._sheetList_u0qms_84 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
}

._sheetItem_u0qms_91 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-sm);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
._sheetItem_u0qms_91:hover:not(:disabled) {
  border-color: var(--primary-200);
  background: var(--primary-50);
}
._sheetItem_u0qms_91:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._sheetItemPrimary_u0qms_113 {
  border-color: var(--positive-300, #86efac);
  background: var(--positive-50, #ecfdf3);
}
._sheetItemPrimary_u0qms_113 ._itemIcon_u0qms_117 {
  background: rgba(34, 197, 94, 0.12);
  color: var(--positive-700, #15803d);
}
._sheetItemPrimary_u0qms_113 ._itemLabel_u0qms_121 {
  color: var(--positive-800, #166534);
}
._sheetItemPrimary_u0qms_113:hover:not(:disabled) {
  border-color: var(--positive-400, #4ade80);
  background: var(--positive-100, #dcfce7);
}

._itemIcon_u0qms_117 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--neutral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-700);
}

._itemText_u0qms_140 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._itemLabel_u0qms_121 {
  font-weight: 700;
  color: var(--neutral-900);
}

._itemHint_u0qms_151 {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
}

._sheetSeparator_u0qms_156 {
  height: 1px;
  width: 100%;
  background: var(--neutral-200);
  margin: var(--spacing-xs) 0;
}

@media (max-width: 768px) {
  ._triggerText_u0qms_53 {
    display: none;
  }
  ._trigger_u0qms_11 {
    padding: var(--spacing-sm);
  }
}
/**
 * WizardToolbar Styles - Fully Responsive with Container Queries
 *
 * Progressive disclosure stages:
 * Stage 1 (>1200px): All buttons with full text
 * Stage 2 (900-1200px): Left buttons icon-only, right buttons full text
 * Stage 3 (700-900px): All icons, "Preview Quote" → "Preview"
 * Stage 4 (500-700px): Hide low-priority buttons, show some in Actions menu
 * Stage 5 (<500px): Hide all buttons, show only Actions menu
 *
 * Uses semantic color tokens for light/dark mode support
 */
._wizardToolbar_93nhj_14 {
  container-type: inline-size;
  container-name: wizard-toolbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  padding: 0 var(--spacing-lg);
  background-color: var(--pure-white);
  border-bottom: 1px solid var(--neutral-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  gap: var(--spacing-lg);
  position: relative;
  z-index: 10;
}

._leftSection_93nhj_31,
._centerSection_93nhj_32,
._rightSection_93nhj_33 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

._leftSection_93nhj_31 {
  flex-shrink: 0;
}

._centerSection_93nhj_32 {
  flex: 1;
  justify-content: center;
  min-width: 0;
}

._rightSection_93nhj_33 {
  flex-shrink: 0;
}

._actionsMenuWrapper_93nhj_53 {
  display: none;
}

._active_93nhj_57 {
  background-color: var(--primary-100) !important;
  border-color: var(--primary-500) !important;
  color: var(--primary-700) !important;
}

/**
 * =================================================================
 * CONTAINER QUERY STAGES - Progressive Disclosure (UPDATED)
 * =================================================================
 * User's desired progression:
 * Stage 1 (>900px): All buttons with text
 * Stage 2 (700-900px): "Wizard Settings" & "Convert to Template" → icons only
 * Stage 3 (500-700px): "Preview Quote" → icon only (keep Publish with text)
 * Stage 4 (<500px): Hide ALL individual buttons, show ONLY Actions menu
 */
/**
 * Stage 1: Full Text Mode (>900px)
 * All buttons visible with full text + icons
 * Actions menu hidden
 */
@container wizard-toolbar (min-width: 900px) {
  ._wizardToolbar_93nhj_14 {
    gap: var(--spacing-lg);
  }
  ._actionsMenuWrapper_93nhj_53 {
    display: none;
  }
}
/**
 * Stage 2: Left Buttons Icon-Only (700-900px)
 * "Wizard Settings" & "Convert to Template" → icon-only
 * "AI Text Tools", "Preview Quote", "Publish" → keep text
 * Actions menu hidden
 */
@container wizard-toolbar (min-width: 700px) and (max-width: 899px) {
  ._wizardToolbar_93nhj_14 {
    gap: var(--spacing-md);
  }
  ._leftSection_93nhj_31 {
    gap: var(--spacing-sm);
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
    min-width: 40px;
    padding: var(--spacing-sm) !important;
    justify-content: center;
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:not(:first-child),
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:not(:first-child) {
    display: none !important;
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:first-child,
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:first-child {
    margin: 0 !important;
  }
  ._rightSection_93nhj_33 {
    gap: var(--spacing-sm);
  }
  ._actionsMenuWrapper_93nhj_53 {
    display: none;
  }
}
/**
 * Stage 3: Preview Icon-Only (500-700px)
 * Settings, Convert → icon-only
 * AI Tools → keep text
 * Preview → icon-only
 * Publish → keep text (most important!)
 * Actions menu hidden
 */
@container wizard-toolbar (min-width: 500px) and (max-width: 699px) {
  ._wizardToolbar_93nhj_14 {
    gap: var(--spacing-sm);
  }
  ._leftSection_93nhj_31 {
    gap: var(--spacing-xs);
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
    min-width: 40px;
    padding: var(--spacing-sm) !important;
    justify-content: center;
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:not(:first-child),
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:not(:first-child) {
    display: none !important;
  }
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:first-child,
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:first-child {
    margin: 0 !important;
  }
  ._rightSection_93nhj_33 {
    gap: var(--spacing-xs);
  }
  ._rightSection_93nhj_33 ._previewButton_93nhj_152 {
    min-width: 40px;
    padding: var(--spacing-sm) !important;
    justify-content: center;
  }
  ._rightSection_93nhj_33 ._previewButton_93nhj_152 > span:not(:first-child) {
    display: none !important;
  }
  ._rightSection_93nhj_33 ._previewButton_93nhj_152 > span:first-child {
    margin: 0 !important;
  }
  ._actionsMenuWrapper_93nhj_53 {
    display: none;
  }
}
/**
 * Stage 4: Actions Menu Only (<500px)
 * Hide ALL individual buttons
 * Show ONLY Actions dropdown menu
 * Clean, simple mobile experience
 */
@container wizard-toolbar (max-width: 499px) {
  ._wizardToolbar_93nhj_14 {
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    height: 48px;
  }
  ._leftSection_93nhj_31 ._aiButton_93nhj_179,
  ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
  ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
    display: none;
  }
  ._rightSection_93nhj_33 ._previewButton_93nhj_152,
  ._rightSection_93nhj_33 ._publishButton_93nhj_185,
  ._rightSection_93nhj_33 ._saveButton_93nhj_186 {
    display: none;
  }
  ._actionsMenuWrapper_93nhj_53 {
    display: block;
  }
}
/**
 * =================================================================
 * FALLBACK: Traditional Media Queries for Browser Compatibility
 * =================================================================
 * For browsers that don't support container queries (pre-2023)
 * Mirrors the container query stages above
 */
@supports not (container-type: inline-size) {
  @media (min-width: 700px) and (max-width: 899px) {
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
      min-width: 40px;
      padding: var(--spacing-sm) !important;
      justify-content: center;
    }
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:not(:first-child),
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:not(:first-child) {
      display: none !important;
    }
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:first-child,
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:first-child {
      margin: 0 !important;
    }
    ._actionsMenuWrapper_93nhj_53 {
      display: none;
    }
  }
  @media (min-width: 500px) and (max-width: 699px) {
    ._leftSection_93nhj_31 {
      gap: var(--spacing-xs);
    }
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
      min-width: 40px;
      padding: var(--spacing-sm) !important;
      justify-content: center;
    }
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:not(:first-child),
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:not(:first-child) {
      display: none !important;
    }
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99 > span:first-child,
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 > span:first-child {
      margin: 0 !important;
    }
    ._rightSection_93nhj_33 ._previewButton_93nhj_152 {
      min-width: 40px;
      padding: var(--spacing-sm) !important;
      justify-content: center;
    }
    ._rightSection_93nhj_33 ._previewButton_93nhj_152 > span:not(:first-child) {
      display: none !important;
    }
    ._rightSection_93nhj_33 ._previewButton_93nhj_152 > span:first-child {
      margin: 0 !important;
    }
    ._actionsMenuWrapper_93nhj_53 {
      display: none;
    }
  }
  @media (max-width: 499px) {
    ._leftSection_93nhj_31 ._aiButton_93nhj_179,
    ._leftSection_93nhj_31 ._settingsButton_93nhj_99,
    ._leftSection_93nhj_31 ._templateButton_93nhj_100 {
      display: none;
    }
    ._rightSection_93nhj_33 ._previewButton_93nhj_152,
    ._rightSection_93nhj_33 ._publishButton_93nhj_185,
    ._rightSection_93nhj_33 ._saveButton_93nhj_186 {
      display: none;
    }
    ._actionsMenuWrapper_93nhj_53 {
      display: block;
    }
  }
}
/**
 * =================================================================
 * RESPONSIVE ADJUSTMENTS
 * =================================================================
 */
@media (max-width: 768px) {
  ._wizardToolbar_93nhj_14 {
    height: 48px;
  }
}
@media (max-width: 480px) {
  ._wizardToolbar_93nhj_14 {
    height: 44px;
    padding: 0 var(--spacing-xs);
  }
  ._leftSection_93nhj_31,
  ._rightSection_93nhj_33 {
    gap: 4px;
  }
}/**
 * Template Editing Banner Styles
 * Info-style banner shown when editing a master template
 */
._templateBanner_ow8hc_5 {
  width: 100%;
  background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%);
  border-bottom: 2px solid var(--primary-400);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-primary);
}

._bannerContent_ow8hc_13 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--primary-900);
}

._bannerIcon_ow8hc_21 {
  width: 20px;
  height: 20px;
  color: var(--primary-700);
  flex-shrink: 0;
}

._bannerText_ow8hc_28 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
._bannerText_ow8hc_28 strong {
  font-weight: 600;
  color: var(--primary-900);
}
._bannerText_ow8hc_28 span {
  color: var(--primary-700);
}

._separator_ow8hc_43 {
  color: var(--primary-400);
  margin: 0 var(--spacing-xs);
}

@media (max-width: 768px) {
  ._bannerContent_ow8hc_13 {
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: center;
  }
  ._separator_ow8hc_43 {
    display: none;
  }
}/**
 * ContentLayoutShell styles
 * Flexible content layout with responsive side panel
 */
._container_1i8dx_5 {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

._mainContent_1i8dx_13 {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: auto;
  transition: all 0.3s ease;
}
._mainContent_1i8dx_13._withSidePanel_1i8dx_21 {
  flex: 1;
}

._sidePanel_1i8dx_25 {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  height: 100%;
  background: var(--primary-50);
  border-left: 1px solid var(--neutral-300);
  overflow: auto;
  transition: all 0.3s ease;
  z-index: 1100;
  animation: _slideInFromRight_1i8dx_1 0.3s ease;
}

@keyframes _slideInFromRight_1i8dx_1 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
._overlayPanel_1i8dx_48 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  pointer-events: none;
}
._overlayPanel_1i8dx_48 ._overlayBackdrop_1i8dx_57 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: _fadeIn_1i8dx_1 0.3s ease forwards;
  z-index: 1;
}
._overlayPanel_1i8dx_48 ._overlayContent_1i8dx_68 {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--primary-50);
  border-left: 1px solid var(--neutral-300);
  overflow: auto;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  animation: _slideInFromRight_1i8dx_1 0.3s ease forwards;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

@keyframes _fadeIn_1i8dx_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 1199px) {
  ._sidePanel_1i8dx_25 {
    display: none;
  }
}
@media (max-width: 768px) {
  ._overlayPanel_1i8dx_48 ._overlayContent_1i8dx_68 {
    width: 100%;
    max-width: 320px;
  }
}._container_1tkk5_1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-50, #f8fafc);
}

._header_1tkk5_8 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
  background-color: var(--neutral-25, #fafbfc);
  flex-shrink: 0;
  transition: background-color 0.3s ease, border-left-color 0.3s ease;
  border-left: 3px solid transparent;
}

._headerOutOfView_1tkk5_20 {
  background-color: var(--primary-50, #eff6ff);
  border-left-color: var(--primary-400, #60a5fa);
}

._headerIdentity_1tkk5_25 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._sectionTypeTag_1tkk5_32 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500, #6b7280);
}

._title_1tkk5_43 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._headerActions_1tkk5_53 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

._locateButton_1tkk5_60 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--neutral-400, #9ca3af);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
._locateButton_1tkk5_60:hover {
  background-color: var(--neutral-100, #f3f4f6);
  color: var(--neutral-600, #4b5563);
}

._locateActive_1tkk5_79 {
  color: var(--primary-500, #3b82f6);
  animation: _locatePulse_1tkk5_1 2s ease-in-out infinite;
}
._locateActive_1tkk5_79:hover {
  background-color: var(--primary-50, #eff6ff);
  color: var(--primary-600, #2563eb);
}

@keyframes _locatePulse_1tkk5_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
._closeButton_1tkk5_96 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--neutral-500, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
._closeButton_1tkk5_96:hover {
  background-color: var(--neutral-100, #f3f4f6);
  color: var(--neutral-700, #374151);
}
._closeButton_1tkk5_96:active {
  background-color: var(--neutral-200, #e5e7eb);
}

._content_1tkk5_118 {
  flex: 1;
  overflow: auto;
  padding: 0;
  transition: opacity 0.3s ease;
}
._content_1tkk5_118::-webkit-scrollbar {
  width: 6px;
}
._content_1tkk5_118::-webkit-scrollbar-track {
  background: transparent;
}
._content_1tkk5_118::-webkit-scrollbar-thumb {
  background: var(--neutral-300, #d1d5db);
  border-radius: 3px;
}
._content_1tkk5_118::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400, #9ca3af);
}

._contentOutOfView_1tkk5_138 {
  opacity: 0.6;
}

._emptyState_1tkk5_142 ._emptyContent_1tkk5_142 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
}
._emptyState_1tkk5_142 ._emptyText_1tkk5_149 {
  color: var(--neutral-500, #6b7280);
  font-size: 14px;
  text-align: center;
  margin: 0;
}

._unsupported_1tkk5_156 {
  padding: 20px;
  text-align: center;
}
._unsupported_1tkk5_156 h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-700, #374151);
  margin: 0 0 8px 0;
}
._unsupported_1tkk5_156 p {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin: 0;
}/* ===== WIZARD PRINT STYLES - MODULAR ARCHITECTURE ===== */
/* Main entry point for all wizard print optimizations */
/* This file replaces the monolithic wizardPrint.css with modular imports */
/*
 * ARCHITECTURE OVERVIEW:
 * 1. _variables.css - All CSS custom properties (--wz-print-*)
 * 2. _global.css - Universal print rules, page setup, element visibility
 * 3. sections/*.print.css - Individual section-specific optimizations
 * 
 * BENEFITS:
 * - Easy maintenance: Each section isolated in dedicated file
 * - Clear separation: Variables, globals, and sections clearly organized
 * - Scalable: Add new section types by creating new .print.css files
 * - Preserved functionality: All existing optimizations maintained
 */
/* ===== FOUNDATION IMPORTS ===== */
/* Variables must be imported first for CSS custom property cascade */
/* ===== WIZARD PRINT VARIABLES ===== */
/* Centralized CSS custom properties for all wizard print optimizations */
/* This file contains all --wz-print-* variables used across section stylesheets */
@media print {
  :root {
    /* ===== CORE TYPOGRAPHY ===== */
    --wz-print-font-size-base: 14px;
    --wz-print-font-size-small: 12px;
    --wz-print-line-height-base: 1.4;
    --wz-print-line-height-title: 1.3;
    
    /* ===== HERO SECTION VARIABLES ===== */
    --wz-print-hero-title-size: 48px;              /* Very large title size */
    --wz-print-hero-subtitle-size: 24px;           /* Proportional subtitle size */
    --wz-print-hero-meta-size: 14px;               /* Proposal info size */
    --wz-print-hero-contact-size: 12px;            /* Contact card text size */
    --wz-print-hero-min-height: 100vh;             /* Full page height */
    --wz-print-hero-page-padding: 40px;            /* Edge spacing for elements */
    --wz-print-hero-title-margin: 24px;            /* Space below title */
    --wz-print-hero-subtitle-margin: 16px;         /* Space below subtitle */
    --wz-print-hero-logo-max-width: 150px;         /* Logo maximum width */
    --wz-print-hero-logo-max-height: 60px;         /* Logo maximum height */
    
    /* ===== GLOBAL SPACING VARIABLES ===== */
    --wz-print-section-spacing: 12px;              /* Reduced from 16px */
    --wz-print-component-spacing: 16px;            /* Reduced from 20px */
    --wz-print-base-spacing: 6px;                  /* Reduced from 12px */
    --wz-print-tight-spacing: 3px;                 /* New - extra tight spacing */
    
    /* ===== TABLE SECTION VARIABLES ===== */
    --wz-print-table-font-size: 12px;
    --wz-print-table-cell-padding-x: 6px;          /* Reduced from 8px */
    --wz-print-table-cell-padding-y: 4px;          /* Reduced from 6px */
    --wz-print-table-totals-padding: 4px;          /* New - tight totals spacing */
    
    /* ===== TIMELINE SECTION VARIABLES - ULTRA COMPACT ===== */
    --wz-print-timeline-item-spacing: 2px;         /* Ultra tight timeline item spacing - was 6px */
    --wz-print-timeline-card-padding: 3px;         /* Ultra compact card padding - was 6px */
    --wz-print-timeline-title-size: 1.0;           /* Timeline titles same as base - was 1.1 */
    --wz-print-timeline-line-height: 1.2;          /* Tighter line height for timeline text */
    
    /* ===== CONTAINER & LAYOUT VARIABLES ===== */
    --wz-print-container-padding: 0;               /* Remove container padding */
    --wz-print-container-max-width: 100%;
    
    /* ===== FAQ SECTION VARIABLES ===== */
    --wz-print-faq-spacing: 8px;                   /* Spacing between FAQ items */
    --wz-print-faq-question-padding: 4px;          /* Padding for FAQ questions */
    --wz-print-faq-answer-padding: 6px;            /* Padding for FAQ answers */
    
    /* ===== PRICING TIERS SECTION VARIABLES ===== */
    --wz-print-pricing-card-padding: 8px;              /* Card internal padding */
    --wz-print-pricing-tier-gap: 8px;                  /* Gap between tier cards */
    --wz-print-pricing-internal-spacing: 4px;           /* Internal element spacing */
    --wz-print-pricing-feature-spacing: 2px;            /* Feature list spacing */

    /* ===== TEXT SECTION VARIABLES ===== */
    --wz-print-text-paragraph-spacing: 8px;        /* Spacing between text paragraphs */
    --wz-print-text-heading-spacing: 10px;         /* Spacing around text headings */

    /* ===== GALLERY SECTION VARIABLES ===== */
    --wz-print-gallery-columns: 3;                 /* Default print grid columns */
    --wz-print-gallery-gap: 10px;                  /* Gap between gallery items */
    --wz-print-gallery-max-item-height: 250px;     /* Max image height */
    --wz-print-gallery-caption-size: 11px;         /* Caption font size */
  }
}
/* Global rules provide universal print foundation */
/* ===== WIZARD PRINT GLOBAL RULES ===== */
/* Universal print optimizations that apply to the entire wizard system */
/* This file handles page setup, element visibility, and layout foundations */
@media print {
  /* ===== PAGE SETUP ===== */
  
  /* Page setup - MAXIMIZED WIDTH */
  @page {
    margin: 0.2in;  /* Reduced from 0.75in for more content area */
    size: letter;
  }
  
  /* ===== UNIVERSAL BROWSER PRINT RESETS ===== */
  
  /* Reset browser print styles - UNIVERSAL SETTINGS ONLY */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    
    /* Remove visual effects universally */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* ===== CONTENT VISIBILITY RULES ===== */
  
  /* TARGET SPECIFIC CONTENT ELEMENTS FOR WHITE BACKGROUNDS */
  /* Only apply white backgrounds to actual content, not structural elements */
  body, 
  main, 
  article, 
  section,
  p, 
  div[class*="text"], 
  div[class*="content"],
  h1, h2, h3, h4, h5, h6,
  [class*="wizard"]:not([class*="overlay"]):not([class*="backdrop"]),
  [class*="section"]:not([class*="overlay"]):not([class*="backdrop"]):not(table):not(thead):not(tbody):not(tr):not(td):not(th),
  [class*="container"]:not([class*="overlay"]):not([class*="backdrop"]),
  [class*="wrapper"]:not([class*="overlay"]):not([class*="backdrop"]),
  [class*="card"]:not([class*="overlay"]):not([class*="backdrop"]),
  [class*="panel"]:not([class*="overlay"]):not([class*="backdrop"]),
  /* TIMELINE ELEMENTS - ENSURE VISIBILITY */
  [class*="timeline"]:not([class*="line"]):not([class*="connector"]):not([class*="dot"]),
  [class*="event"],
  [class*="timelineEvent"],
  [class*="timeline-item"],
  [class*="timelineItem"] {
    background-color: white !important;
    background-image: none !important;
    color: #000 !important;
    /* Force visibility for non-table elements */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* SEPARATE RULES FOR TABLE ELEMENTS - Preserve table display properties */
  table {
    background-color: white !important;
    background-image: none !important;
    color: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* DO NOT force display:block on tables */
  }
  
  thead, tbody, tfoot, tr, th, td {
    background-color: white !important;
    color: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* DO NOT force display on table structure elements */
  }
  
  /* ENSURE STRUCTURAL ELEMENTS REMAIN TRANSPARENT */
  /* These elements should NOT have white backgrounds */
  [class*="overlay"],
  [class*="backdrop"], 
  [class*="modal"],
  [class*="absolute"],
  [class*="fixed"],
  [class*="relative"]:empty,
  div:empty,
  span:empty {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ===== HIDE INTERACTIVE ELEMENTS ===== */
  
  /* Hide all interactive elements in print */
  button,
  [role="button"],
  input:not([readonly]),
  textarea:not([readonly]),
  select,
  [contenteditable="true"],
  [class*="settings"],
  [class*="controls"],
  [class*="grip"],
  [class*="drag"],
  [aria-label*="setting"],
  [aria-label*="delete"],
  [aria-label*="move"],
  [aria-label*="add"] {
    display: none !important;
  }
  
  /* Special case: Hide print button itself */
  .printButton,
  [aria-label*="print" i] {
    display: none !important;
  }
  
  /* Hide page headers, titles, and preview elements globally in print */
  .pageHeader,
  [class*="pageHeader"],
  [class*="page-header"],
  [class*="quote-preview"],
  [class*="quotePreview"],
  h1[class*="preview" i],
  .page-title,
  [aria-label*="preview" i],
  [data-testid*="header"],
  .app-header,
  [class*="app-header"] {
    display: none !important;
  }

  /* ===== MAIN LAYOUT FOUNDATIONS ===== */
  
  /* Wizard page layout optimizations - MAXIMIZED WIDTH */
  .wizardPageLayout,
  [class*="wizardPageLayout"] {
    font-size: var(--wz-print-font-size-base) !important;
    line-height: var(--wz-print-line-height-base) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }
  
  /* Container optimizations - REMOVE ALL PADDING */
  .wizard-container,
  [class*="container"],
  [class*="wrapper"] {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Section shell optimizations - BORDERLESS & COMPACT */
  .type--hero,
  .type--text,
  .type--timeline,
  .type--faq,
  [class*="sectionShell"] {
    border: none !important;
    margin-bottom: var(--wz-print-section-spacing) !important;
    padding: 0 !important;
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
  }
  
  /* Special handling for table sections to keep them together */
  .type--table {
    border: none !important;
    margin-bottom: var(--wz-print-section-spacing) !important;
    padding: 0 !important;
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    /* If table section is too large for one page, allow break before the section */
    page-break-before: auto !important;
  }
}
/* ===== SECTION-SPECIFIC IMPORTS ===== */
/* Each section type has dedicated print optimizations */
/* Hero/Cover section - Contact cards, titles, grid layouts */
/* ===== HERO SECTION PRINT LAYOUT - ABSOLUTE POSITIONING ===== */
/* Professional cover page layout with precise element positioning */
/* Black & white, simple, with PreparedBy/For at top, title centered, meta at bottom */
@media print {
  /* ===== FULL-PAGE HERO CONTAINER ===== */
  
  [data-section-type="hero"],
  [data-print-layout="cover"],
  .type--hero {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    overflow: hidden !important;
    page-break-after: always !important;
    page-break-before: auto !important;
    page-break-inside: avoid !important;
    
    /* Remove any flex/grid layouts from web version */
    display: block !important;
    grid-template: none !important;
    flex-direction: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
  }
  
  /* Hide all overlays and backgrounds for print */
  [data-section-type="hero"] .overlay,
  [data-section-type="hero"] [class*="overlay"],
  [data-section-type="hero"] [class*="background"] {
    display: none !important;
  }
  
  /* ===== CONTACT CARDS - TOP POSITIONED ===== */
  
  /* PreparedBy - Top Left */
  [data-print-role="preparedBy"] {
    position: absolute !important;
    top: var(--wz-print-hero-page-padding) !important;
    left: var(--wz-print-hero-page-padding) !important;
    right: auto !important;
    bottom: auto !important;
    width: 200px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: var(--wz-print-hero-contact-size) !important;
    line-height: 1.4 !important;
    color: #000 !important;
  }
  
  /* PreparedFor - Top Right */
  [data-print-role="preparedFor"] {
    position: absolute !important;
    top: var(--wz-print-hero-page-padding) !important;
    right: var(--wz-print-hero-page-padding) !important;
    left: auto !important;
    bottom: auto !important;
    width: 200px !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: var(--wz-print-hero-contact-size) !important;
    line-height: 1.4 !important;
    color: #000 !important;
  }
  
  /* Aggressive border removal for all contact card children */
  [data-print-role="preparedBy"] *,
  [data-print-role="preparedFor"] * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  /* Contact card labels */
  [data-print-role="preparedBy"] h3,
  [data-print-role="preparedFor"] h3,
  [data-print-role] [class*="contactLabel"] {
    font-size: var(--wz-print-hero-contact-size) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }
  
  /* Contact card content */
  [data-print-role] [class*="contactName"],
  [data-print-role] [class*="contactTitle"],
  [data-print-role] [class*="contactCompany"] {
    font-size: var(--wz-print-hero-contact-size) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }
  
  /* ===== LOGO - ABOVE TITLE ===== */
  
  [data-print-element="hero-logo"] {
    position: absolute !important;
    top: 38% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: var(--wz-print-hero-logo-max-width) !important;
    max-height: var(--wz-print-hero-logo-max-height) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  [data-print-element="hero-logo"] img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  /* ===== TITLE & SUBTITLE - CENTER POSITIONED ===== */
  
  /* Main title - Very Large */
  [data-print-element="hero-title"] {
    position: absolute !important;
    top: 46% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--wz-print-hero-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    color: #000 !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* Hide inline editor controls in print */
  [data-print-element="hero-title"] [contenteditable],
  [data-print-element="hero-title"] button,
  [data-print-element="hero-title"] [class*="editor"] {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
  }
  
  /* Subtitle */
  [data-print-element="hero-subtitle"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--wz-print-hero-subtitle-size) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #333 !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* ===== PROPOSAL META - BOTTOM POSITIONED ===== */
  
  [data-print-element="hero-meta"] {
    position: absolute !important;
    bottom: var(--wz-print-hero-page-padding) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
  }
  
  /* Proposal number and date styling */
  [data-print-element="hero-meta"] > * {
    display: inline-block !important;
    margin: 0 8px !important;
    font-size: var(--wz-print-hero-meta-size) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #000 !important;
  }
  
  [data-print-element="hero-meta"] [class*="proposalNumber"]:before {
    content: "PROPOSAL # " !important;
  }
  
  [data-print-element="hero-meta"] [class*="date"]:before {
    content: "DATE: " !important;
  }
  
  /* ===== HIDE UNNECESSARY ELEMENTS ===== */
  
  /* Hide all controls, editors, and interactive elements */
  [data-section-type="hero"] [class*="controls"],
  [data-section-type="hero"] [class*="settings"],
  [data-section-type="hero"] [class*="toolbar"],
  [data-section-type="hero"] button:not([data-print-element]),
  [data-section-type="hero"] [contenteditable="true"]:empty:before,
  [data-section-type="hero"] [class*="placeholder"] {
    display: none !important;
  }
  
  /* Hide image grids - not needed for print */
  [data-section-type="hero"] [class*="imageGrid"],
  [data-section-type="hero"] [class*="images"] {
    display: none !important;
  }
  
  /* ===== OVERRIDE WEB LAYOUTS ===== */
  
  /* Remove any grid/flex layouts from variants */
  [data-section-type="hero"][class*="layout"],
  [data-section-type="hero"] [class*="content"],
  [data-section-type="hero"] [class*="wrapper"] {
    display: block !important;
    position: static !important;
    grid-template: none !important;
    flex-direction: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  
  /* Ensure all text is black for print */
  [data-section-type="hero"] * {
    color: #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* ===== HIDE UNWANTED ELEMENTS IN PRINT ===== */
  
  /* Hide Quote Preview header and page headers */
  .pageHeader,
  [class*="pageHeader"],
  [class*="quote-preview"],
  [class*="quotePreview"],
  h1[class*="preview"],
  .page-title,
  [aria-label*="preview"],
  hr,
  .horizontal-line,
  [class*="horizontal-line"] {
    display: none !important;
  }
  
  /* Prevent duplicate proposal meta - only show the one positioned at bottom */
  [data-print-element="hero-meta"] ~ [data-print-element="hero-meta"],
  [data-section-type="hero"] [class*="proposalMeta"]:not([data-print-element="hero-meta"]),
  [data-section-type="hero"] [class*="proposal-meta"]:not([data-print-element="hero-meta"]),
  .proposal-info:not([data-print-element="hero-meta"]) {
    display: none !important;
  }
  [data-print-role="preparedFor"] {
    border-radius: 0 !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
  }

  [data-print-role="preparedFor"] *,
  [data-print-role="preparedBy"] * {
    border-radius: 0 !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
  }
  [class*="wizardHeader"] {
    display: none !important;
    background:blue
  }
}
/* Text section - Typography, paragraphs, headings, lists */
/* ===== TEXT SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard text content sections */
/* Optimizes typography, spacing, and readability for printed text content */
@media print {
  /* ===== TEXT SECTION CONTAINER ===== */
  
  .type--text,
  [class*="textSection"] {
    margin-bottom: var(--wz-print-section-spacing) !important;
  }
  
  /* ===== TEXT SECTION HEADINGS ===== */
  
  .type--text h1,
  .type--text h2,
  .type--text h3,
  [class*="textSection"] h1,
  [class*="textSection"] h2,
  [class*="textSection"] h3 {
    font-size: calc(var(--wz-print-font-size-base) * 1.3) !important;
    margin-bottom: var(--wz-print-text-heading-spacing) !important;
    margin-top: 16px !important;
    page-break-after: avoid !important;
    line-height: var(--wz-print-line-height-title) !important;
    color: #000 !important;
  }
  
  .type--text h1:first-child,
  .type--text h2:first-child,
  .type--text h3:first-child,
  [class*="textSection"] h1:first-child,
  [class*="textSection"] h2:first-child,
  [class*="textSection"] h3:first-child {
    margin-top: 0 !important;
  }
  
  /* ===== TEXT SECTION PARAGRAPHS ===== */
  
  .type--text p,
  [class*="textSection"] p {
    margin-bottom: var(--wz-print-text-paragraph-spacing) !important;
    line-height: var(--wz-print-line-height-base) !important;
    font-size: var(--wz-print-font-size-base) !important;
    color: #000 !important;
    
    /* Typography optimization for print */
    orphans: 2 !important;
    widows: 2 !important;
  }
  
  /* ===== TEXT SECTION LISTS ===== */
  
  .type--text ul,
  .type--text ol,
  [class*="textSection"] ul,
  [class*="textSection"] ol {
    margin-bottom: var(--wz-print-text-paragraph-spacing) !important;
    padding-left: 20px !important;
  }
  
  .type--text li,
  [class*="textSection"] li {
    margin-bottom: 4px !important;
    line-height: var(--wz-print-line-height-base) !important;
    font-size: var(--wz-print-font-size-base) !important;
    color: #000 !important;
  }
  
  /* ===== TEXT SECTION EMPHASIS ===== */
  
  .type--text strong,
  .type--text b,
  [class*="textSection"] strong,
  [class*="textSection"] b {
    font-weight: 700 !important;
    color: #000 !important;
  }
  
  .type--text em,
  .type--text i,
  [class*="textSection"] em,
  [class*="textSection"] i {
    font-style: italic !important;
    color: #000 !important;
  }
  
  /* ===== TEXT SECTION QUOTES ===== */
  
  .type--text blockquote,
  [class*="textSection"] blockquote {
    margin: var(--wz-print-component-spacing) 0 !important;
    padding: var(--wz-print-base-spacing) var(--wz-print-component-spacing) !important;
    border-left: 3px solid #000 !important;
    background: transparent !important;
    font-style: italic !important;
    color: #333 !important;
  }

  /* ===== COLUMN LAYOUT - FORCE SINGLE COLUMN FOR PRINT ===== */
  /* Uses attribute selectors to match CSS modules hashed class names */

  /* Force columnsContainer to stack vertically */
  .type--text [class*="columnsContainer"],
  [class*="textSection"] [class*="columnsContainer"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: var(--wz-print-section-spacing, 12px) !important;
    width: 100% !important;
  }

  /* Force double and triple column variants to full width */
  .type--text [class*="column--double"],
  .type--text [class*="column--triple"],
  [class*="textSection"] [class*="column--double"],
  [class*="textSection"] [class*="column--triple"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}
/* Table section - Borderless tables, ultra-compact totals */
/* ===== TABLE SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard table sections */
/* Optimizes table layouts, removes borders, and ultra-compact totals for print */
@media print {
  /* ===== FORCE HIDE MOBILE CARDS - HIGHEST PRIORITY ===== */

  /* Hide all mobile card variations with maximum specificity */
  div[class*="mobileCard"],
  div[class*="mobile-card"],
  [class*="mobileCards"],
  [class*="mobile-cards"],
  .mobileCard,
  .mobileCards,
  [class*="cardDescription"],
  [class*="card-description"],
  [class*="cardMeta"],
  [class*="card-meta"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
  }

  /* ===== TABLE SECTION CONTAINER ===== */

  .type--table,
  [class*="tableSection"] {
    margin-bottom: var(--wz-print-section-spacing) !important;
    background: white !important;
    page-break-inside: avoid !important;
    page-break-before: auto !important;
    /* Keep table sections together - title with content */
    break-inside: avoid !important;
  }
  
  /* Ensure table title and table stay together */
  .type--table > *:first-child,
  [class*="tableSection"] > *:first-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  
  /* Prevent orphaned table titles */
  .type--table h1,
  .type--table h2,
  .type--table h3,
  [class*="tableSection"] h1,
  [class*="tableSection"] h2,
  [class*="tableSection"] h3 {
    page-break-after: avoid !important;
    break-after: avoid !important;
    orphans: 3 !important;
    widows: 3 !important;
  }
  
  /* Avoid using [class*="table"] as it matches table elements themselves */
  
  /* ===== TABLE STRUCTURE - PROPER TABLE LAYOUT ===== */
  
  table {
    display: table !important; /* Force table display */
    width: 100% !important;
    font-size: var(--wz-print-table-font-size) !important;
    border-collapse: collapse !important;
    margin-bottom: var(--wz-print-base-spacing) !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important; /* Modern syntax */
    page-break-before: auto !important; /* Allow break before if needed */
    page-break-after: auto !important; /* Allow break after if needed */
    background: white !important;
    border: 1px solid #ddd !important; /* Subtle outer border for definition */
    table-layout: auto !important; /* Ensure proper column sizing */
  }
  
  /* Keep table and its totals section together */
  table + [class*="totals"],
  table + [class*="summary"] {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }
  
  /* Force proper table structure display */
  thead {
    display: table-header-group !important;
  }
  
  tbody {
    display: table-row-group !important;
  }
  
  tr {
    display: table-row !important;
  }
  
  /* ===== TABLE CELLS - PROPER CELL DISPLAY - TIGHTER SPACING ===== */

  th, td {
    display: table-cell !important; /* Force table-cell display */
    padding: 3px 5px !important; /* Reduced from default for tighter layout */
    border: 1px solid #ddd !important; /* Clean, subtle borders for structure */
    line-height: 1.2 !important; /* Tighter line height */
    vertical-align: top !important;
    background: white !important;
    color: #000 !important;
    text-align: left !important; /* Default text alignment */
  }
  
  /* Right-align numeric columns */
  td:last-child,
  td:nth-last-child(2) {
    text-align: right !important; /* Right-align price and total columns */
  }
  
  /* ===== TABLE HEADERS - CLEAR SEPARATION with color-adjust ===== */

  th {
    background-color: #f8f8f8 !important; /* Very light gray for headers */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    font-weight: 700 !important;
    font-size: calc(var(--wz-print-table-font-size) * 0.9) !important;
    border: 1px solid #ddd !important; /* Keep consistent borders */
    border-bottom: 2px solid #333 !important; /* Stronger bottom border for headers */
    color: #000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  /* ===== TABLE ROWS - CLEAN STRUCTURE ===== */
  
  tbody tr {
    /* Rows already have borders from cells, no need for additional row borders */
    background: white !important;
  }
  
  /* Alternating row colors for better readability */
  tbody tr:nth-child(even) {
    background-color: #fafafa !important; /* Very subtle alternating rows */
  }
  
  /* ===== TABLE TOTALS SECTION - ULTRA-COMPACT ===== */

  [class*="totals"],
  [class*="summary"],
  [class*="totalsBox"],
  .totalsSection,
  .totalsContainer {
    /* DRASTICALLY reduced spacing */
    margin-top: 4px !important; /* Minimal top margin */
    margin-bottom: 0 !important;
    padding: 4px !important; /* Minimal container padding */

    /* Remove borders, ensure background renders */
    border: 1px solid #ddd !important;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;

    /* Typography */
    font-size: var(--wz-print-font-size-base) !important;
    line-height: 1.2 !important;

    /* CRITICAL: Page break management - NEVER break totals section */
    page-break-inside: avoid !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    break-inside: avoid-page !important;
    break-before: avoid-page !important;
    break-after: avoid-page !important;

    /* Force totals to stay together as a unit */
    display: block !important;
    position: relative !important;

    /* Width optimization */
    width: auto !important;
    max-width: 280px !important;
    margin-left: auto !important; /* Right align */
  }

  /* ===== TOTALS ROWS - ULTRA-MINIMAL SPACING ===== */

  [class*="totals"] [class*="row"],
  [class*="summary"] [class*="row"],
  [class*="totalsRow"],
  .totalsBox [class*="row"],
  .totalsSection [class*="row"],
  .totalsContainer [class*="row"] {
    /* ULTRA-TIGHT spacing - absolute minimum */
    padding: 1px 0 !important; /* Minimal padding */
    margin: 0 !important;
    line-height: 1.2 !important; /* Tight line height */

    /* Background for proper rendering */
    border: none !important;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;

    /* Typography - compact */
    font-size: var(--wz-print-font-size-base) !important;
    color: #000 !important;

    /* Layout - minimal footprint */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: auto !important;
  }
  
  /* ===== INDIVIDUAL TOTALS ELEMENTS - REMOVE ALL SPACING ===== */
  
  [class*="totals"] [class*="label"],
  [class*="totals"] [class*="value"],
  [class*="summary"] [class*="label"],
  [class*="summary"] [class*="value"],
  [class*="totalsLabel"],
  [class*="totalsValue"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    border: none !important;
    background: transparent !important;
  }
  
  /* ===== FINAL TOTAL ROW - MINIMAL EMPHASIS ===== */
  
  [class*="totals"] [class*="row"]:last-child,
  [class*="summary"] [class*="row"]:last-child,
  [class*="totalsRow"]:last-child,
  .totalsBox [class*="row"]:last-child {
    /* Only a subtle top line for emphasis */
    border-top: 1px solid #000 !important; /* Thinner emphasis line */
    padding-top: 2px !important; /* Minimal top padding */
    margin-top: 2px !important; /* Minimal top margin */
    font-weight: 700 !important;
    font-size: calc(var(--wz-print-font-size-base) * 1.05) !important; /* Slightly larger, not much */
  }
  
  /* ===== TOTALS LABELS AND VALUES - ULTRA-COMPACT ===== */
  
  [class*="totals"] [class*="label"],
  [class*="totalsLabel"] {
    color: #333 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: var(--wz-print-font-size-base) !important;
  }
  
  [class*="totals"] [class*="value"],
  [class*="totalsValue"] {
    color: #000 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: var(--wz-print-font-size-base) !important;
    font-feature-settings: 'tnum' !important; /* Tabular numbers */
    text-align: right !important;
  }
}
/* Timeline section - Ultra-compact events with maximum content density */
/* ===== TIMELINE SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard timeline sections */
/* Ultra-compact timeline with maximum content density and minimal spacing */
@media print {
  /* ===== TIMELINE SECTION CONTAINER ===== */
  
  .type--timeline,
  [class*="timeline"] {
    margin-bottom: var(--wz-print-section-spacing) !important;
    background: white !important;
    padding: 0 !important;
    
    /* Ultra compact timeline container */
    line-height: var(--wz-print-timeline-line-height) !important;
  }
  
  /* ===== TIMELINE WRAPPER ELEMENT SPACING RESET ===== */
  
  /* Remove any default spacing from timeline wrapper elements */
  [class*="timeline"] > *:first-child {
    margin-top: 0 !important;
  }
  
  [class*="timeline"] > *:last-child {
    margin-bottom: 0 !important;
  }
  
  /* ===== TIMELINE TITLE OPTIMIZATION ===== */
  
  [class*="timeline"] h2,
  [class*="timeline"] h3,
  [class*="timeline"] [class*="title"] {
    font-size: calc(var(--wz-print-font-size-base) * 1.2) !important; /* Reduced from 1.3 */
    margin-bottom: var(--wz-print-base-spacing) !important;
    color: #000 !important;
    page-break-after: avoid !important;
    background: white !important;
  }
  
  /* ===== TIMELINE EVENTS - ULTRA COMPACT WITH FORCED VISIBILITY ===== */
  
  [class*="event"],
  [class*="timeline-item"],
  [class*="timelineEvent"],
  .timelineEvent,
  .timeline-item {
    /* FORCE VISIBILITY - Critical for timeline display */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    
    /* Remove all visual chrome */
    background: white !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* ULTRA TIGHT spacing - maximized content density */
    margin-bottom: var(--wz-print-timeline-item-spacing) !important; /* Now 2px instead of 6px */
    margin-top: 0 !important;
    padding: var(--wz-print-timeline-card-padding) !important; /* Now 3px instead of 6px */
    
    /* Page break management */
    page-break-inside: avoid !important;
    
    /* Typography reset with visibility */
    font-size: var(--wz-print-font-size-base) !important;
    line-height: var(--wz-print-line-height-base) !important;
    color: #000 !important;
  }
  
  /* ===== TIMELINE EVENT DATES - ULTRA COMPACT ===== */
  
  [class*="event"] [class*="date"],
  [class*="timeline"] [class*="date"],
  [class*="timelineEvent"] [class*="date"] {
    font-weight: 600 !important;
    font-size: var(--wz-print-font-size-small) !important; /* Keep small for dates */
    color: #666 !important;
    margin-bottom: 1px !important; /* Ultra tight - was 3px */
    margin-top: 0 !important;
    line-height: var(--wz-print-timeline-line-height) !important; /* Use tighter line height */
  }
  
  /* ===== TIMELINE EVENT TITLES - ULTRA COMPACT ===== */
  
  [class*="event"] [class*="title"],
  [class*="event"] h4,
  [class*="event"] h5,
  [class*="timelineEvent"] [class*="title"] {
    font-size: calc(var(--wz-print-font-size-base) * var(--wz-print-timeline-title-size)) !important; /* Now 1.0x base */
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 1px !important; /* Ultra tight - was 3px */
    margin-top: 0 !important;
    line-height: var(--wz-print-timeline-line-height) !important; /* Use tighter line height */
    page-break-after: avoid !important;
  }
  
  /* ===== TIMELINE EVENT CONTENT - ULTRA COMPACT ===== */
  
  [class*="event"] [class*="content"],
  [class*="event"] [class*="description"],
  [class*="event"] p,
  [class*="timelineEvent"] [class*="content"] {
    font-size: var(--wz-print-font-size-base) !important; /* Match body text */
    line-height: var(--wz-print-timeline-line-height) !important; /* Use tighter line height */
    color: #000 !important;
    margin-bottom: 0 !important; /* Remove all bottom margin for ultra compactness */
    margin-top: 0 !important;
    
    /* Ensure readability */
    orphans: 2 !important;
    widows: 2 !important;
  }
  
  /* ===== TIMELINE EVENT TYPE BADGES - ULTRA MINIMAL ===== */
  
  [class*="event"] [class*="type"],
  [class*="event"] [class*="category"],
  [class*="timelineEvent"] [class*="type"] {
    font-size: calc(var(--wz-print-font-size-small) * 0.9) !important; /* Very small */
    background: transparent !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 1px 3px !important; /* Reduced from 2px 4px */
    color: #666 !important;
    margin-bottom: 0 !important; /* Remove all bottom margin */
    margin-top: 0 !important;
    line-height: 1.1 !important; /* Tighter line height for badges */
  }
  
  /* ===== TIMELINE VISUAL INDICATORS - SELECTIVE HIDING ===== */
  
  /* Remove ONLY decorative timeline visual indicators for print */
  [class*="timeline-line"],
  [class*="timeline-connector"], 
  [class*="timeline-dot"],
  [class*="timeline-indicator"],
  [class*="timeline"] [class*="visual-line"],
  [class*="timeline"] [class*="decorative-dot"],
  [class*="timeline"] [class*="connection-line"] {
    display: none !important;
  }
  
  /* ===== FORCE VISIBILITY FOR TIMELINE CONTENT ===== */
  
  /* FORCE VISIBILITY for timeline content elements */
  [class*="timeline"] [class*="event"],
  [class*="timeline"] [class*="item"],
  [class*="timeline"] [class*="content"],
  [class*="timeline"] [class*="date"],
  [class*="timeline"] [class*="title"],
  [class*="timeline"] [class*="description"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #000 !important;
    background: white !important;
  }
  
  /* ===== TIMELINE CONTAINER CLEANUP ===== */
  
  /* Timeline container - clean layout */
  [class*="timeline"] [class*="container"],
  [class*="timeline"] [class*="wrapper"] {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* FAQ section - Force expansion, hide interactive elements */
/* ===== FAQ SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard FAQ sections */
/* Forces FAQ expansion, removes interactive elements, optimizes for print readability */
@media print {
  /* ===== FAQ SECTION CONTAINER ===== */
  
  .type--faq,
  [class*="faqSection"] {
    margin-bottom: var(--wz-print-section-spacing) !important;
    background: white !important;
  }
  
  /* ===== FAQ SECTION TITLE ===== */
  
  [class*="faq"] h2,
  [class*="faq"] h3 {
    font-size: calc(var(--wz-print-font-size-base) * 1.2) !important; /* Reduced from 1.3 */
    margin-bottom: var(--wz-print-base-spacing) !important;
    color: #000 !important;
    page-break-after: avoid !important;
    background: white !important;
  }
  
  /* ===== FAQ ITEMS - REMOVE BORDERS AND FORCE EXPAND ===== */
  
  [class*="faq-item"],
  [class*="question"],
  [class*="faqItem"] {
    margin-bottom: var(--wz-print-faq-spacing) !important;
    padding: var(--wz-print-faq-question-padding) 0 !important;
    
    /* Remove all visual chrome */
    border: none !important;
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* Page break management */
    page-break-inside: avoid !important;
  }
  
  /* ===== HIDE FAQ INTERACTIVE ELEMENTS ===== */
  
  /* Force expanded state - hide collapse/expand controls */
  [class*="faq-item"] [class*="toggle"],
  [class*="faq-item"] [class*="icon"],
  [class*="faq-item"] [class*="chevron"],
  [class*="faq-item"] [class*="expand"],
  [class*="faq-item"] [class*="collapse"],
  [class*="question"] [class*="toggle"],
  [class*="question"] [class*="icon"],
  [class*="question"] [class*="chevron"],
  [class*="question"] [class*="expand"],
  [class*="question"] [class*="collapse"],
  [class*="faqItem"] [class*="toggle"],
  [class*="faqItem"] [class*="icon"],
  [class*="faqItem"] [class*="chevron"],
  [class*="faqItem"] [class*="expand"],
  [class*="faqItem"] [class*="collapse"] {
    display: none !important;
  }
  
  /* ===== FORCE FAQ CONTENT VISIBILITY ===== */
  
  /* Force all FAQ content to be visible */
  [class*="faq"] [class*="collapsed"],
  [class*="faq"] [class*="hidden"],
  [data-state="closed"],
  [data-expanded="false"] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* ===== FAQ QUESTIONS - CLEAN STYLING ===== */
  
  [class*="faq"] [class*="question"],
  [class*="faq"] dt,
  [class*="faqQuestion"] {
    font-weight: 600 !important;
    font-size: calc(var(--wz-print-font-size-base) * 1.1) !important;
    color: #000 !important;
    margin-bottom: var(--wz-print-tight-spacing) !important; /* Tighter spacing */
    page-break-after: avoid !important;
    background: white !important;
    
    /* Remove interactive styling */
    cursor: default !important;
    pointer-events: none !important;
  }
  
  /* ===== FAQ ANSWERS - BODY TEXT ===== */
  
  [class*="faq"] [class*="answer"],
  [class*="faq"] dd,
  [class*="faqAnswer"] {
    font-size: var(--wz-print-font-size-base) !important;
    line-height: var(--wz-print-line-height-base) !important;
    color: #000 !important;
    margin-bottom: var(--wz-print-faq-answer-padding) !important;
    margin-left: 0 !important;
    padding: 0 !important;
    
    /* Ensure visibility */
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    
    /* Page break optimization */
    orphans: 2 !important;
    widows: 2 !important;
  }
}
/* Pricing Tiers section - Cards grid layout, stripped interactivity */
/* ===== PRICING TIERS SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard Pricing Tiers sections */
/* Forces cards grid layout, removes interactive elements, optimizes for print */
/* Uses broad attribute selectors for Puppeteer backend PDF path */
@media print {
  /* ===== PRICING TIERS SECTION CONTAINER ===== */

  .type--pricingTiers,
  [class*="pricingTiersSection"],
  [data-section-type="pricingTiers"] {
    margin-bottom: var(--wz-print-section-spacing, 12px) !important;
    background: white !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ===== FORCE CARDS GRID LAYOUT ===== */

  [data-section-type="pricingTiers"] [class*="tiersContainer"] {
    display: grid !important;
    gap: var(--wz-print-pricing-tier-gap, 8px) !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  /* Hide comparison table in PDF - cards grid is used instead */
  [data-section-type="pricingTiers"] [class*="comparisonTable"],
  [data-section-type="pricingTiers"] table {
    display: none !important;
  }

  /* ===== TIER CARDS ===== */

  [data-section-type="pricingTiers"] [class*="tierCard"] {
    border: 1px solid #000 !important;
    padding: var(--wz-print-pricing-card-padding, 8px) !important;
    page-break-inside: avoid !important;
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Highlighted tier card */
  [data-section-type="pricingTiers"] [class*="tierCard"][class*="highlighted"] {
    border-width: 2px !important;
  }

  /* ===== TIER BADGE - STATIC POSITIONING ===== */

  [data-section-type="pricingTiers"] [class*="tierBadge"] {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    background: #f5f5f5 !important;
    color: #000 !important;
    font-size: var(--wz-print-font-size-small, 12px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: var(--wz-print-pricing-internal-spacing, 4px) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ===== TIER NAMES ===== */

  [data-section-type="pricingTiers"] [class*="tierName"] {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 1.1) !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 2px !important;
    page-break-after: avoid !important;
  }

  /* ===== TIER DESCRIPTION ===== */

  [data-section-type="pricingTiers"] [class*="tierDescription"] {
    font-size: var(--wz-print-font-size-base, 14px) !important;
    color: #666 !important;
    margin-bottom: var(--wz-print-pricing-internal-spacing, 4px) !important;
  }

  /* ===== PRICE DISPLAY ===== */

  [data-section-type="pricingTiers"] [class*="priceContainer"] {
    text-align: center !important;
    padding: var(--wz-print-pricing-internal-spacing, 4px) 0 !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    margin: var(--wz-print-pricing-internal-spacing, 4px) 0 !important;
  }

  [data-section-type="pricingTiers"] [class*="priceAmount"] {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 1.6) !important;
    font-weight: 700 !important;
    color: #000 !important;
    font-feature-settings: 'tnum' !important;
  }

  [data-section-type="pricingTiers"] [class*="pricePrefix"] {
    font-size: var(--wz-print-font-size-base, 14px) !important;
    color: #333 !important;
  }

  [data-section-type="pricingTiers"] [class*="priceFrequency"],
  [data-section-type="pricingTiers"] [class*="frequencyDisplay"] {
    font-size: var(--wz-print-font-size-small, 12px) !important;
    color: #666 !important;
    margin-top: 2px !important;
  }

  /* ===== FEATURES LIST ===== */

  [data-section-type="pricingTiers"] [class*="featuresContainer"] {
    margin-top: var(--wz-print-pricing-internal-spacing, 4px) !important;
  }

  [data-section-type="pricingTiers"] [class*="featuresList"] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  [data-section-type="pricingTiers"] [class*="featureItem"] {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 0.9) !important;
    color: #000 !important;
    margin-bottom: var(--wz-print-pricing-feature-spacing, 2px) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* ===== TIER NOTES ===== */

  [data-section-type="pricingTiers"] [class*="tierNotes"] {
    margin-top: var(--wz-print-pricing-internal-spacing, 4px) !important;
    padding-top: var(--wz-print-pricing-internal-spacing, 4px) !important;
    border-top: 1px dashed #ccc !important;
    font-size: var(--wz-print-font-size-small, 12px) !important;
    color: #666 !important;
    font-style: italic !important;
  }

  /* ===== SECTION NOTES ===== */

  [data-section-type="pricingTiers"] [class*="sectionNotes"] {
    margin-top: var(--wz-print-base-spacing, 6px) !important;
    padding: var(--wz-print-base-spacing, 6px) !important;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: var(--wz-print-font-size-base, 14px) !important;
    color: #333 !important;
    page-break-inside: avoid !important;
  }

  /* ===== INPUT CLEANUP ===== */

  [data-section-type="pricingTiers"] input,
  [data-section-type="pricingTiers"] textarea,
  [data-section-type="pricingTiers"] [contenteditable] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: #000 !important;
    font-family: inherit !important;
  }

  [data-section-type="pricingTiers"] input::placeholder,
  [data-section-type="pricingTiers"] textarea::placeholder {
    display: none !important;
    color: transparent !important;
  }

  /* ===== HIDE INTERACTIVE ELEMENTS ===== */

  [data-section-type="pricingTiers"] [class*="dragHandle"],
  [data-section-type="pricingTiers"] [class*="removeButton"],
  [data-section-type="pricingTiers"] [class*="starButton"],
  [data-section-type="pricingTiers"] [class*="addButton"],
  [data-section-type="pricingTiers"] [class*="addTier"],
  [data-section-type="pricingTiers"] [class*="badgeRemove"],
  [data-section-type="pricingTiers"] [class*="tierActions"],
  [data-section-type="pricingTiers"] [class*="featureToggle"],
  [data-section-type="pricingTiers"] [class*="featureDelete"],
  [data-section-type="pricingTiers"] [class*="addFeature"],
  [data-section-type="pricingTiers"] [class*="editHint"],
  [data-section-type="pricingTiers"] [class*="ghostRow"],
  [data-section-type="pricingTiers"] [class*="tableActions"],
  [data-section-type="pricingTiers"] [class*="ctaContainer"],
  [data-section-type="pricingTiers"] [class*="ctaButton"],
  [data-section-type="pricingTiers"] [class*="control"],
  [data-section-type="pricingTiers"] [class*="Control"],
  [data-section-type="pricingTiers"] [class*="settings"],
  [data-section-type="pricingTiers"] [class*="Settings"] {
    display: none !important;
    visibility: hidden !important;
  }
}
/* Gallery section - Convert all layouts to static grid, hide interactive elements */
/* ===== GALLERY SECTION PRINT OPTIMIZATIONS ===== */
/* Dedicated print styles for wizard gallery sections */
/*
 * Converts all gallery layouts (carousel, masonry, single, split, grid) to a
 * static CSS Grid for clean PDF output. Hides all interactive elements.
 *
 * KEY DECISIONS:
 * 1. Carousel -> Grid (horizontal scroll is unusable in PDF)
 * 2. Masonry -> Grid (column-count has fragmentation issues in print engines)
 * 3. Border radius PRESERVED (inline styles have higher specificity than global reset)
 * 4. --print-gallery-cols CSS variable is set from React for smart column adaptation
 * 5. Section allows page-break-inside: auto (gallery can span pages)
 *    Individual items use break-inside: avoid
 */
@media print {

  /* ===== GALLERY SECTION CONTAINER ===== */

  [data-section-type="gallery"],
  [class*="gallerySection"] {
    background: white !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: var(--wz-print-section-spacing, 12px) !important;
    padding: 0 !important;
    width: 100% !important;

    /* Gallery can span pages — items avoid breaking individually */
    page-break-inside: auto !important;
    page-break-after: avoid !important;
  }

  /* Keep gallery heading with content */
  [data-section-type="gallery"] [class*="sectionHeader"],
  [data-section-type="gallery"] [class*="shellHeader"] {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* ===== FORCE ALL LAYOUTS TO STATIC GRID ===== */

  [data-section-type="gallery"] [class*="layout"] {
    /* Reset non-grid layout properties */
    display: grid !important;
    overflow: visible !important;                /* Remove carousel overflow-x: auto */
    scroll-snap-type: none !important;           /* Remove carousel snap */
    -webkit-overflow-scrolling: auto !important;
    flex-direction: unset !important;            /* Remove flex for carousel/single */
    column-count: unset !important;              /* Remove masonry column-count */
    column-gap: unset !important;                /* Remove masonry column-gap */

    /* Smart grid columns — --print-gallery-cols is set from React based on item count */
    grid-template-columns: repeat(var(--print-gallery-cols, var(--wz-print-gallery-columns, 3)), 1fr) !important;
    gap: var(--wz-print-gallery-gap, 10px) !important;

    /* Clean layout */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove carousel scrollbar artifacts */
  [data-section-type="gallery"] [class*="layoutCarousel"]::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  /* ===== GALLERY ITEMS ===== */

  [data-section-type="gallery"] [class*="galleryItem"] {
    /* Page break control — individual items should not break */
    page-break-inside: avoid !important;
    break-inside: avoid !important;

    /* Clean print appearance */
    background: white !important;
    box-shadow: none !important;
    cursor: default !important;
    transition: none !important;
    transform: none !important;

    /*
     * BORDER RADIUS EXCEPTION:
     * Unlike other sections, gallery items PRESERVE their border-radius.
     * The user sets borderRadius in gallery settings (0-32px) and it is applied
     * as an inline style on .galleryItem. Inline styles have higher specificity
     * than the global --wz-print-border-radius: 0 wildcard reset.
     * We intentionally do NOT add border-radius: 0 here.
     */
  }

  /* Carousel items: remove fixed width constraint */
  [data-section-type="gallery"] [class*="galleryItemCarousel"] {
    flex: unset !important;
    width: auto !important;
    scroll-snap-align: unset !important;
  }

  /* ===== IMAGE RENDERING ===== */

  [data-section-type="gallery"] [class*="itemMedia"] {
    overflow: hidden !important;
    /* borderRadius is inherited from .galleryItem inline style — preserved */
  }

  [data-section-type="gallery"] [class*="itemImage"] {
    width: 100% !important;
    height: auto !important;
    max-height: var(--wz-print-gallery-max-item-height, 250px) !important;
    display: block !important;
    /* object-fit is set inline from user settings — preserved */

    /* Print rendering quality */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    image-rendering: auto !important;
  }

  /* Video placeholder items */
  [data-section-type="gallery"] [class*="itemPlaceholder"] {
    min-height: 80px !important;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ===== CAPTIONS ===== */

  [data-section-type="gallery"] [class*="itemCaptionArea"] {
    padding: 4px 0 0 0 !important;
  }

  [data-section-type="gallery"] [class*="itemCaption"] {
    font-size: var(--wz-print-gallery-caption-size, 11px) !important;
    font-style: italic !important;
    color: #666666 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide caption input (edit mode artifact) */
  [data-section-type="gallery"] [class*="captionInput"] {
    display: none !important;
  }

  /* ===== VIDEO ITEMS ===== */

  /* Hide the video play button overlay */
  [data-section-type="gallery"] [class*="videoIndicator"] {
    display: none !important;
  }

  /* ===== HIDE ALL INTERACTIVE ELEMENTS ===== */

  /* Lightbox overlay and all children */
  [data-section-type="gallery"] [class*="lightbox"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Video player (within lightbox) */
  [data-section-type="gallery"] [class*="videoPlayer"],
  [data-section-type="gallery"] [class*="videoIframe"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Carousel navigation arrows */
  [data-section-type="gallery"] [class*="carouselPrev"],
  [data-section-type="gallery"] [class*="carouselNext"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Expand button */
  [data-section-type="gallery"] [class*="expandBtn"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Delete button */
  [data-section-type="gallery"] [class*="itemDeleteBtn"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Edit overlay */
  [data-section-type="gallery"] [class*="itemEditOverlay"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Add media button and actions */
  [data-section-type="gallery"] [class*="addMedia"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Empty state */
  [data-section-type="gallery"] [class*="emptyState"] {
    display: none !important;
  }

  /* Generic interactive elements (scoped to gallery) */
  [data-section-type="gallery"] [class*="button"]:not([class*="galleryItem"]),
  [data-section-type="gallery"] [class*="Button"],
  [data-section-type="gallery"] [class*="control"],
  [data-section-type="gallery"] [class*="Control"],
  [data-section-type="gallery"] [class*="edit"]:not([class*="itemEdit"]),
  [data-section-type="gallery"] [class*="Edit"],
  [data-section-type="gallery"] [class*="settings"],
  [data-section-type="gallery"] [class*="Settings"],
  [data-section-type="gallery"] [class*="drag"],
  [data-section-type="gallery"] [class*="Drag"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* Input fields in gallery */
  [data-section-type="gallery"] input,
  [data-section-type="gallery"] textarea,
  [data-section-type="gallery"] [contenteditable] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: #000 !important;
    font-family: inherit !important;
    line-height: inherit !important;
  }

  [data-section-type="gallery"] input::placeholder,
  [data-section-type="gallery"] textarea::placeholder {
    display: none !important;
    color: transparent !important;
  }

  /* ===== IMAGE VISIBILITY CONTROLS ===== */

  /* Hide gallery images when data-hide-images is active */
  [data-hide-images="true"] [data-section-type="gallery"] [class*="itemMedia"],
  [data-hide-images="1"] [data-section-type="gallery"] [class*="itemMedia"] {
    display: none !important;
  }
}
/*
 * USAGE:
 * Import this file in components that need wizard print functionality:
 * import '../../components/wizard/print/index.css';
 * 
 * TO ADD NEW SECTION TYPES:
 * 1. Create new file: sections/newsection.print.css
 * 2. Add import above: @import './sections/newsection.print.css';
 * 3. Add any new CSS variables to _variables.css if needed
 *//* =============================================================================
   PDF VARIABLES INFRASTRUCTURE - ARCHITECTURE ALIGNED
   ============================================================================= */

/**
 * CSS Variables system for PDF mode following the architecture document
 *
 * Features:
 * - --wz-* variable system for consistent theming
 * - PDF-specific overrides via data attributes
 * - Typography scaling system
 * - Section-level customization
 * - Print media queries
 */

/* =============================================================================
   ROOT VARIABLES - BASE SYSTEM
   ============================================================================= */

:root {
  /* PDF Configuration Variables */
  --pdf-margin: 0.75in;
  --section-pad: 24px;
  --title-scale: 0;
  --body-scale: 0;

  /* Typography Base Sizes */
  --title-base: 2rem;
  --subtitle-base: 1.5rem;
  --body-base: 1rem;
  --small-base: 0.875rem;

  /* Wizard Color Variables (--wz-* system) */
  --wz-color-primary: #2563eb;
  --wz-color-secondary: #64748b;
  --wz-color-background: #ffffff;
  --wz-color-text-primary: #1e293b;
  --wz-color-text-secondary: #64748b;

  /* Wizard Typography Variables */
  --wz-font-primary: 'Inter', sans-serif;
  --wz-font-secondary: 'Roboto', sans-serif;
  --wz-size-title: var(--title-base);
  --wz-size-subtitle: var(--subtitle-base);
  --wz-size-body: var(--body-base);
  --wz-size-small: var(--small-base);

  /* Wizard Layout Variables */
  --wz-container-width: 1200px;
  --wz-section-spacing: 1.5rem;
  --wz-border-radius: 0.5rem;
  --wz-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   PDF MODE ACTIVATION
   ============================================================================= */

:root[data-pdf-mode="1"] {
  /* Override base variables for PDF mode */
  --pdf-margin: 0.75in;
  --section-pad: 24px;
  --title-scale: 0;
  --body-scale: 0;

  /* Typography scaling for PDF mode */
  --wz-size-title: calc(var(--title-base) * (1 + 0.1 * var(--title-scale)));
  --wz-size-subtitle: calc(var(--subtitle-base) * (1 + 0.1 * var(--title-scale)));
  --wz-size-body: calc(var(--body-base) * (1 + 0.1 * var(--body-scale)));
  --wz-size-small: calc(var(--small-base) * (1 + 0.1 * var(--body-scale)));

  /* PDF-specific layout adjustments */
  --wz-container-width: 100%;
  --wz-section-spacing: var(--section-pad);
  --wz-border-radius: 0;
  --wz-shadow: none;
}

/* =============================================================================
   PDF COLOR MODE OVERRIDES
   ============================================================================= */

/* Black & White mode */
:root[data-pdf-mode="1"][data-color-mode="bw"] {
  --wz-color-primary: #000000;
  --wz-color-secondary: #666666;
  --wz-color-background: #ffffff;
  --wz-color-text-primary: #000000;
  --wz-color-text-secondary: #666666;
}

/* =============================================================================
   SECTION WRAPPER STYLES
   ============================================================================= */

.wz-section {
  padding-block: var(--wz-section-spacing);
  color: var(--wz-color-text-primary);
  font-family: var(--wz-font-primary);
  font-size: var(--wz-size-body);
  line-height: 1.6;
}

/* PDF mode section adjustments */
:root[data-pdf-mode="1"] .wz-section {
  padding-block: var(--section-pad);
  page-break-inside: avoid;
}

/* Section-level data attributes */
.wz-section[data-keep-together="true"] {
  break-inside: avoid;
}

.wz-section[data-break-before="true"] {
  break-before: page;
}

.wz-section[data-break-after="true"] {
  break-after: page;
}

.wz-section[data-hide-on-pdf="true"] {
  display: none !important;
}

/* =============================================================================
   TYPOGRAPHY STYLES
   ============================================================================= */

/* Headings with scaling support */
:root[data-pdf-mode="1"] h1,
:root[data-pdf-mode="1"] .wz-title {
  font-size: var(--wz-size-title);
  color: var(--wz-color-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

:root[data-pdf-mode="1"] h2,
:root[data-pdf-mode="1"] .wz-subtitle {
  font-size: var(--wz-size-subtitle);
  color: var(--wz-color-text-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

:root[data-pdf-mode="1"] h3,
:root[data-pdf-mode="1"] .wz-subheading {
  font-size: calc(var(--wz-size-body) * 1.25);
  color: var(--wz-color-text-primary);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

:root[data-pdf-mode="1"] p,
:root[data-pdf-mode="1"] .wz-body {
  font-size: var(--wz-size-body);
  color: var(--wz-color-text-primary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

:root[data-pdf-mode="1"] .wz-small {
  font-size: var(--wz-size-small);
  color: var(--wz-color-text-secondary);
  line-height: 1.5;
}

/* =============================================================================
   VISIBILITY CONTROLS
   ============================================================================= */

/* Hide images in PDF mode */
:root[data-pdf-mode="1"][data-hide-images="1"] img {
  display: none !important;
}

/* Hide hero backgrounds in PDF mode */
:root[data-pdf-mode="1"][data-hide-hero-bg="1"] .hero,
:root[data-pdf-mode="1"][data-hide-hero-bg="1"] .wz-hero {
  background: none !important;
  background-image: none !important;
}

/* Hide logos in PDF mode */
:root[data-pdf-mode="1"][data-hide-logos="1"] .logo,
:root[data-pdf-mode="1"][data-hide-logos="1"] .wz-logo {
  display: none !important;
}

/* =============================================================================
   PRINT MEDIA QUERIES
   ============================================================================= */

@media print {
  /* Page setup */
  @page {
    size: Letter;
    margin: var(--pdf-margin, 0.75in);
  }

  html, body {
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Ensure sections break properly */
  .wz-section {
    orphans: 2;
    widows: 2;
  }

  /* Force page breaks */
  .wz-section[data-break-before="true"] {
    break-before: page;
  }

  .wz-section[data-break-after="true"] {
    break-after: page;
  }

  /* Keep sections together when requested */
  .wz-section[data-keep-together="true"] {
    break-inside: avoid;
  }

  /* Hide elements marked for PDF hiding */
  .wz-section[data-hide-on-pdf="true"] {
    display: none !important;
  }
}

/* =============================================================================
   COMPONENT-SPECIFIC PDF STYLES
   ============================================================================= */

/* Hero Section */
:root[data-pdf-mode="1"] .wz-hero {
  padding: 2rem 0;
  text-align: center;
}

:root[data-pdf-mode="1"] .wz-hero-title {
  font-size: var(--wz-size-title);
  color: var(--wz-color-primary);
  margin-bottom: 1rem;
}

:root[data-pdf-mode="1"] .wz-hero-subtitle {
  font-size: var(--wz-size-subtitle);
  color: var(--wz-color-text-secondary);
  margin-bottom: 0.5rem;
}

/* Timeline Section */
:root[data-pdf-mode="1"] .wz-timeline {
  margin: 2rem 0;
}

:root[data-pdf-mode="1"] .wz-timeline-item {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  position: relative;
  break-inside: avoid;
}

:root[data-pdf-mode="1"] .wz-timeline-marker {
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wz-color-primary);
}

/* Table Section */
:root[data-pdf-mode="1"] .wz-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

:root[data-pdf-mode="1"] .wz-table th,
:root[data-pdf-mode="1"] .wz-table td {
  padding: 0.75rem;
  border: 1px solid var(--wz-color-text-secondary);
  text-align: left;
}

:root[data-pdf-mode="1"] .wz-table th {
  background: var(--wz-color-primary);
  color: white;
  font-weight: bold;
}

/* Text Section */
:root[data-pdf-mode="1"] .wz-text {
  margin: 1rem 0;
  line-height: 1.6;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Force page break utilities */
.pdf-break-before {
  break-before: page;
}

.pdf-break-after {
  break-after: page;
}

.pdf-keep-together {
  break-inside: avoid;
}

.pdf-hide {
  display: none !important;
}

/* Margin utilities for PDF */
.pdf-margin-tight {
  --pdf-margin: 0.5in;
}

.pdf-margin-normal {
  --pdf-margin: 0.75in;
}

.pdf-margin-roomy {
  --pdf-margin: 1in;
}._viewQuotePage_u9smy_1 {
  min-height: 100vh;
  background: var(--wz-color-background, #ffffff);
  color: var(--wz-color-text, #1e293b);
  font-family: var(--wz-font-family-primary, "Inter", sans-serif);
  padding: 10vh 0 20vh 0;
}
._viewQuotePage_u9smy_1 ._quoteContent_u9smy_8 {
  width: 100%;
  min-height: 100vh;
  max-width: 960px;
  margin: 0 auto;
}

._passwordPrompt_u9smy_15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  text-align: center;
  max-width: 450px;
  margin: 0 auto;
}

._lockIcon_u9smy_27 {
  color: var(--wz-color-text-secondary, #6b7280);
  margin-bottom: 1rem;
  opacity: 0.8;
}

._passwordTitle_u9smy_33 {
  font-family: var(--wz-font-family-title, "Inter, sans-serif");
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--wz-color-text-primary, #1e293b);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

._passwordSubtitle_u9smy_42 {
  font-family: var(--wz-font-family-body, "Inter, sans-serif");
  font-size: 1rem;
  color: var(--wz-color-text-secondary, #6b7280);
  margin: 0 0 2rem 0;
  line-height: 1.5;
}

._passwordForm_u9smy_50 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

._passwordInputWrapper_u9smy_57 {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

._passwordInput_u9smy_57 {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--wz-color-border, #e2e8f0);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--wz-color-background, #ffffff);
  color: var(--wz-color-text-primary, #1e293b);
  transition: all 0.2s ease;
}
._passwordInput_u9smy_57:focus {
  outline: none;
  border-color: var(--wz-color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
._passwordInput_u9smy_57:disabled {
  background: var(--wz-color-bg-secondary, #f8fafc);
  opacity: 0.6;
  cursor: not-allowed;
}
._passwordInput_u9smy_57::placeholder {
  color: var(--wz-color-text-muted, #94a3b8);
}

._warningText_u9smy_87 {
  font-size: 0.875rem;
  color: #dc2626;
  margin: 0;
  padding: 0.5rem;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
}

._container_u9smy_97 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--wz-color-background, #ffffff);
}

._loadingState_u9smy_106 {
  text-align: center;
  max-width: 300px;
}
._loadingState_u9smy_106 ._spinner_u9smy_110 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--wz-color-background, #f3f4f6);
  border-top: 3px solid var(--wz-color-primary, #3b82f6);
  border-radius: 50%;
  animation: _spin_u9smy_110 1s linear infinite;
  margin: 0 auto 1rem;
}
._loadingState_u9smy_106 h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--wz-color-text, #1e293b);
}

._errorState_u9smy_126 {
  text-align: center;
  max-width: 400px;
}
._errorState_u9smy_126 h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wz-color-text, #1e293b);
}
._errorState_u9smy_126 p {
  margin: 0;
  font-size: 1rem;
  color: var(--wz-color-text, #64748b);
  line-height: 1.5;
}

@keyframes _spin_u9smy_110 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media print {
  ._viewQuotePage_u9smy_1 {
    background: white !important;
    color: black !important;
    padding: 0 !important;
  }
  ._container_u9smy_97,
  ._loadingState_u9smy_106,
  ._errorState_u9smy_126 {
    display: none !important;
  }
  ._quoteContent_u9smy_8 {
    min-height: auto;
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 768px) {
  ._container_u9smy_97 {
    padding: 1.5rem;
  }
  ._errorState_u9smy_126 {
    max-width: 300px;
  }
  ._errorState_u9smy_126 h1 {
    font-size: 1.25rem;
  }
  ._errorState_u9smy_126 p {
    font-size: 0.9rem;
  }
  ._loadingState_u9smy_106 h2 {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  ._container_u9smy_97 {
    padding: 1rem;
  }
}/* SharePage.module.scss - Wizard Share Page Styles */
/* Using CSS variables for theming and responsive design */
._container_dm65f_3 {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--wz-spacing-section);
  min-height: 100vh;
  color: var(--wz-color-text-primary);
}
@media (max-width: 768px) {
  ._container_dm65f_3 {
    padding: 80px var(--wz-spacing-base) var(--wz-spacing-base);
  }
}

._header_dm65f_16 {
  text-align: center;
  margin-bottom: var(--wz-spacing-component);
}
@media (max-width: 768px) {
  ._header_dm65f_16 {
    margin-bottom: var(--wz-spacing-medium);
  }
}

._titleWithTrigger_dm65f_26 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

._title_dm65f_26 {
  font-family: var(--wz-font-family-title);
  font-size: calc(var(--wz-font-size-base) * 2);
  font-weight: 600;
  color: var(--wz-color-text-primary);
  margin: 0 0 var(--wz-spacing-base) 0;
  line-height: var(--wz-line-height-title);
}
@media (max-width: 768px) {
  ._title_dm65f_26 {
    font-size: calc(var(--wz-font-size-base) * 1.5);
  }
}

._subtitle_dm65f_47 {
  font-family: var(--wz-font-family-subtitle);
  font-size: calc(var(--wz-font-size-base) * 1.1);
  color: var(--wz-color-text-secondary);
  margin: 0 0 var(--wz-spacing-medium) 0;
  line-height: var(--wz-line-height-subtitle);
}
@media (max-width: 768px) {
  ._subtitle_dm65f_47 {
    font-size: var(--wz-font-size-base);
  }
}

._publishInfo_dm65f_60 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wz-spacing-small);
  font-size: var(--wz-font-size-small);
  color: var(--wz-color-text-muted);
  margin-bottom: var(--wz-spacing-medium);
}

._publishBadge_dm65f_70 {
  background: var(--wz-color-primary);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: calc(var(--wz-font-size-small) * 0.9);
}

._content_dm65f_79 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-section);
}
@media (max-width: 768px) {
  ._content_dm65f_79 {
    gap: var(--wz-spacing-medium);
  }
}

._urlSection_dm65f_90 {
  background: var(--wz-color-bg-secondary);
  border: 1px solid var(--wz-color-border-light);
  border-radius: 8px;
  padding: var(--wz-spacing-medium);
}

._urlLabel_dm65f_97 {
  display: block;
  font-weight: 600;
  color: var(--wz-color-text-primary);
  margin-bottom: var(--wz-spacing-small);
  font-size: var(--wz-font-size-small);
}

._urlContainer_dm65f_105 {
  display: flex;
  gap: var(--wz-spacing-small);
  align-items: stretch;
}
@media (max-width: 480px) {
  ._urlContainer_dm65f_105 {
    flex-direction: column;
  }
}

._urlInput_dm65f_116 {
  flex: 1;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: calc(var(--wz-font-size-small) * 0.95);
  padding: 12px;
  border: 1px solid var(--wz-color-border);
  border-radius: 6px;
  background: var(--wz-color-background);
  color: var(--wz-color-text-primary);
  cursor: pointer;
}
._urlInput_dm65f_116:hover {
  border-color: var(--wz-color-border-hover);
}
._urlInput_dm65f_116:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
._urlInput_dm65f_116:read-only {
  background: var(--wz-color-bg-secondary);
  cursor: text;
}

._copyButton_dm65f_140 {
  flex-shrink: 0;
  min-width: 120px;
}
@media (max-width: 480px) {
  ._copyButton_dm65f_140 {
    min-width: auto;
  }
}

._actionsSection_dm65f_150 {
  display: grid;
  gap: var(--wz-spacing-medium);
}
@media (min-width: 640px) {
  ._actionsSection_dm65f_150 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  ._actionsSection_dm65f_150 {
    gap: var(--wz-spacing-base);
  }
}

._actionGroup_dm65f_165 {
  border: 1px solid var(--wz-color-border-light);
  border-radius: 8px;
  padding: var(--wz-spacing-medium);
}
@media (max-width: 768px) {
  ._actionGroup_dm65f_165 {
    padding: var(--wz-spacing-base);
  }
}

._actionGroupTitle_dm65f_176 {
  font-weight: 600;
  color: var(--wz-color-text-primary);
  margin: 0 0 var(--wz-spacing-base) 0;
  font-size: calc(var(--wz-font-size-base) * 0.95);
}
@media (max-width: 768px) {
  ._actionGroupTitle_dm65f_176 {
    margin-bottom: var(--wz-spacing-small);
  }
}

._actionButtons_dm65f_188 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-small);
}

._actionDescription_dm65f_194 {
  font-size: calc(var(--wz-font-size-base) * 0.9);
  color: var(--wz-color-text-secondary);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}

._socialButtons_dm65f_202 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wz-spacing-small);
}
@media (max-width: 480px) {
  ._socialButtons_dm65f_202 {
    grid-template-columns: 1fr;
  }
}

._footerActions_dm65f_213 {
  margin-top: var(--wz-spacing-component);
  padding-top: var(--wz-spacing-medium);
  border-top: 1px solid var(--wz-color-border-light);
  text-align: center;
}
@media (max-width: 768px) {
  ._footerActions_dm65f_213 {
    margin-top: var(--wz-spacing-medium);
    padding-top: var(--wz-spacing-base);
  }
}

._backButton_dm65f_226 {
  min-width: 200px;
}
@media (max-width: 480px) {
  ._backButton_dm65f_226 {
    min-width: auto;
    width: 100%;
  }
}

/* Copy feedback animations */
._copySuccess_dm65f_237 {
  animation: _copyPulse_dm65f_1 0.3s ease-in-out;
}

@keyframes _copyPulse_dm65f_1 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* Loading states */
._loading_dm65f_253 {
  opacity: 0.6;
  pointer-events: none;
}

/* Error states */
._error_dm65f_259 {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}

/* Success states */
._success_dm65f_265 {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.05);
}

/* Password Protection Section */
._protectionSection_dm65f_271 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-medium);
}
@media (max-width: 768px) {
  ._protectionSection_dm65f_271 {
    gap: var(--wz-spacing-base);
  }
}

._protectionToggle_dm65f_282 {
  position: relative;
}

._toggleLabel_dm65f_286 {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
._toggleLabel_dm65f_286 input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
._toggleLabel_dm65f_286 input[type=checkbox]:checked ~ ._toggleSlider_dm65f_300 {
  background-color: var(--wz-color-primary);
}
._toggleLabel_dm65f_286 input[type=checkbox]:checked ~ ._toggleSlider_dm65f_300:before {
  transform: translateX(26px);
}
._toggleLabel_dm65f_286 input[type=checkbox]:disabled ~ ._toggleSlider_dm65f_300 {
  opacity: 0.5;
  cursor: not-allowed;
}

._toggleSlider_dm65f_300 {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.3s;
  margin-right: var(--wz-spacing-small);
}
._toggleSlider_dm65f_300:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

._toggleText_dm65f_333 {
  display: flex;
  align-items: center;
  gap: var(--wz-spacing-xs);
  font-size: var(--wz-font-size-base);
  font-weight: 500;
  color: var(--wz-color-text-primary);
}

._passwordSection_dm65f_342 {
  display: flex;
  flex-direction: column;
  gap: var(--wz-spacing-base);
  padding-top: var(--wz-spacing-base);
  border-top: 1px solid var(--wz-color-border-light);
}
@media (max-width: 768px) {
  ._passwordSection_dm65f_342 {
    gap: var(--wz-spacing-small);
  }
}

._passwordInputWrapper_dm65f_355 {
  display: flex;
  gap: var(--wz-spacing-small);
  position: relative;
}

._passwordInput_dm65f_355 {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--wz-color-border);
  border-radius: 6px;
  font-size: var(--wz-font-size-base);
  background: var(--wz-color-background);
  color: var(--wz-color-text-primary);
}
._passwordInput_dm65f_355:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
._passwordInput_dm65f_355:disabled {
  background: var(--wz-color-bg-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

._togglePasswordButton_dm65f_381 {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--wz-color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--wz-color-text-secondary);
}
._togglePasswordButton_dm65f_381:hover {
  background: var(--wz-color-bg-secondary);
  border-color: var(--wz-color-border-hover);
  color: var(--wz-color-text-primary);
}

._savePasswordButton_dm65f_396 {
  align-self: flex-start;
  min-width: 150px;
}
._savePasswordButton_dm65f_396:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  ._savePasswordButton_dm65f_396 {
    min-width: auto;
    width: 100%;
  }
}

._protectionNote_dm65f_411 {
  margin: 0;
  padding: var(--wz-spacing-small);
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  color: var(--wz-color-text-secondary);
}
._protectionNote_dm65f_411 small {
  font-size: calc(var(--wz-font-size-small) * 0.95);
}

/* PDF Export Section */
._pdfButtons_dm65f_424 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wz-spacing-small);
  margin-bottom: var(--wz-spacing-small);
}
@media (max-width: 480px) {
  ._pdfButtons_dm65f_424 {
    grid-template-columns: 1fr;
  }
}

._pdfButton_dm65f_424 {
  flex: 1;
  min-height: 44px;
  font-weight: 500;
}

._pdfNote_dm65f_442 {
  margin: 0;
  text-align: center;
  color: var(--wz-color-text-muted);
  font-size: var(--wz-font-size-small);
}
._pdfNote_dm65f_442 small {
  line-height: 1.4;
}/* ===== WIZARD PAGE LAYOUT STYLES ===== */
/* Universal layout for edit, preview, and published modes */
._wizardPageLayout_1z01b_3 {
  /* Base layout structure */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Apply wizard theme variables */
  /**
   * Document-style page background
   * Applied when documentStyleEnabled is true via CSS variable
   * Creates PDF-like visual separation between page and document
   */
  background: var(--wz-page-background, transparent);
  color: var(--wz-color-text-primary, #111827);
  font-family: var(--wz-font-family-body, Inter, system-ui, sans-serif);
  font-size: var(--wz-font-size-base, 16px);
  /* Smooth transitions for theme changes */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===== MODE-SPECIFIC LAYOUTS ===== */
/* Edit Mode - Full screen editor */
._mode--edit_1z01b_24 {
  height: 100vh;
  overflow: hidden;
}
._mode--edit_1z01b_24 ._wizardContent_1z01b_28 {
  flex: 1;
  overflow: visible;
  padding: 0;
}
._mode--edit_1z01b_24 ._contentWrapper_1z01b_33 {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  /* Responsive adjustments */
}
@media (max-width: 1200px) {
  ._mode--edit_1z01b_24 ._contentWrapper_1z01b_33 {
    max-width: calc(100vw - 2rem);
    margin: 0 1rem;
  }
}
@media (max-width: 768px) {
  ._mode--edit_1z01b_24 ._contentWrapper_1z01b_33 {
    margin: 0 0.5rem;
    max-width: calc(100vw - 1rem);
  }
}

/* Preview Mode - Document-like view with chrome */
._mode--preview_1z01b_53 {
  min-height: 100vh;
}
._mode--preview_1z01b_53 ._wizardContent_1z01b_28 {
  flex: 1;
}
._mode--preview_1z01b_53 ._contentWrapper_1z01b_33 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  background-color: var(--wz-color-background, white);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* Subtle border for definition */
}
._mode--preview_1z01b_53 ._contentWrapper_1z01b_33::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
._mode--preview_1z01b_53 {
  /* Mobile adjustments */
}
@media (max-width: 768px) {
  ._mode--preview_1z01b_53 {
    padding: 1.5rem 0;
  }
  ._mode--preview_1z01b_53 ._contentWrapper_1z01b_33 {
    margin: 0 1rem;
    border-radius: 8px;
  }
  ._mode--preview_1z01b_53 ._contentWrapper_1z01b_33::before {
    border-radius: 8px;
  }
}

/* Published Mode - Clean, minimal */
._mode--published_1z01b_95 {
  background: var(--wz-color-background, white);
}
._mode--published_1z01b_95 ._wizardContent_1z01b_28 {
  flex: 1;
}
._mode--published_1z01b_95 ._contentWrapper_1z01b_33 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}
@media (max-width: 768px) {
  ._mode--published_1z01b_95 ._contentWrapper_1z01b_33 {
    padding: 1rem;
    margin: 0;
  }
}

/* ===== HEADER STYLES ===== */
._wizardHeader_1z01b_114 {
  flex-shrink: 0;
  padding: 10px;
  background: linear-gradient(to right, #f8fafc, #f1f5f9);
}
@media (max-width: 768px) {
  ._wizardHeader_1z01b_114 {
    padding: 1.5rem 1.5rem 1rem;
  }
}

._headerContent_1z01b_125 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  ._headerContent_1z01b_125 {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}

._headerLeft_1z01b_141 {
  flex: 1;
}

._headerTitle_1z01b_145 {
  font-family: var(--wz-font-family-title, Inter);
  font-size: calc(var(--wz-font-size-base, 16px) * 1.75);
  font-weight: var(--wz-font-weight-titles, 700);
  color: var(--wz-color-text-primary, #111827);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.025em;
}
@media (max-width: 768px) {
  ._headerTitle_1z01b_145 {
    font-size: calc(var(--wz-font-size-base, 16px) * 1.5);
  }
}

._headerSubtitle_1z01b_159 {
  font-family: var(--wz-font-family-body, Inter);
  color: var(--wz-color-text-secondary, #6b7280);
  margin: 0;
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._headerActions_1z01b_169 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  ._headerActions_1z01b_169 {
    align-items: flex-start;
  }
}

/* ===== CONTENT AREA ===== */
._wizardContent_1z01b_28 {
  position: relative;
  width: 100%;
}

._contentWrapper_1z01b_33 {
  /* Content wrapper is styled per mode above */
  position: relative;
}

/* ===== FOOTER STYLES ===== */
._wizardFooter_1z01b_194 {
  flex-shrink: 0;
  padding: 1.5rem 3rem 2rem;
  border-top: 1px solid var(--wz-color-border-light, #e5e7eb);
  background: #f8fafc;
  text-align: center;
}
@media (max-width: 768px) {
  ._wizardFooter_1z01b_194 {
    padding: 1.5rem;
  }
}

._defaultFooter_1z01b_207 {
  max-width: 1200px;
  margin: 0 auto;
}

._footerText_1z01b_212 {
  font-family: var(--wz-font-family-body, Inter);
  color: var(--wz-color-text-secondary, #6b7280);
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

._footerDisclaimer_1z01b_220 {
  font-family: var(--wz-font-family-body, Inter);
  color: var(--wz-color-text-muted, #9ca3af);
  font-size: calc(var(--wz-font-size-base, 16px) * 0.75);
  margin: 0;
  font-style: italic;
}

/* ===== LOADING STATES ===== */
._loadingState_1z01b_229 ._loadingContainer_1z01b_229 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
  padding: 2rem;
}
._loadingState_1z01b_229 ._loadingSpinner_1z01b_238 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--wz-color-border-light, #f3f3f3);
  border-top: 3px solid var(--wz-color-primary, #3498db);
  border-radius: 50%;
  animation: _spin_1z01b_1 1s linear infinite;
}
._loadingState_1z01b_229 ._loadingText_1z01b_246 {
  font-family: var(--wz-font-family-body, Inter);
  color: var(--wz-color-text-secondary, #666);
  font-size: var(--wz-font-size-base, 16px);
  margin: 0;
}
._loadingState_1z01b_229 ._loadingHint_1z01b_252 {
  font-size: calc(var(--wz-font-size-base, 16px) * 0.8);
  color: var(--wz-color-text-muted, #999);
}

@keyframes _spin_1z01b_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ===== ERROR STATES ===== */
._errorState_1z01b_266 ._errorContainer_1z01b_266 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}
._errorState_1z01b_266 ._errorTitle_1z01b_277 {
  font-family: var(--wz-font-family-title, Inter);
  color: var(--wz-color-text-primary, #333);
  font-size: calc(var(--wz-font-size-base, 16px) * 1.5);
  font-weight: 600;
  margin-bottom: 1rem;
}
._errorState_1z01b_266 ._errorMessage_1z01b_284 {
  font-family: var(--wz-font-family-body, Inter);
  color: var(--wz-color-text-secondary, #666);
  font-size: var(--wz-font-size-base, 16px);
  margin-bottom: 2rem;
  line-height: 1.6;
}
._errorState_1z01b_266 ._retryButton_1z01b_291 {
  background: var(--wz-color-primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: var(--wz-font-family-body, Inter);
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-bottom: 1rem;
}
._errorState_1z01b_266 ._retryButton_1z01b_291:hover {
  background: var(--wz-color-primary, #2563eb);
  opacity: 0.9;
}
._errorState_1z01b_266 ._retryButton_1z01b_291:focus {
  outline: 2px solid var(--wz-color-primary, #3b82f6);
  outline-offset: 2px;
}
._errorState_1z01b_266 ._errorDetails_1z01b_312 {
  margin-top: 1rem;
  font-size: calc(var(--wz-font-size-base, 16px) * 0.875);
  color: var(--wz-color-text-muted, #666);
  text-align: left;
  max-width: 100%;
}
._errorState_1z01b_266 ._errorDetails_1z01b_312 summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
}
._errorState_1z01b_266 ._errorDebug_1z01b_323 {
  font-size: calc(var(--wz-font-size-base, 16px) * 0.75);
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: auto;
  max-height: 200px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== PRINT STYLES ===== */
@media print {
  /* ===== PRINT PAGE SETUP ===== */
  @page {
    margin: 0.75in;
    size: letter;
  }
  /* ===== MAIN LAYOUT PRINT OPTIMIZATIONS ===== */
  ._wizardPageLayout_1z01b_3 {
    /* Clean print base */
    background: white !important;
    color: #000 !important;
    font-size: var(--wz-print-font-size-base, 14px) !important;
    line-height: var(--wz-print-line-height-base, 1.4) !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Ensure high-quality print output */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* ===== HEADER PRINT OPTIMIZATIONS ===== */
  ._wizardHeader_1z01b_114 {
    /* Streamlined header for print */
    padding: var(--wz-print-base-spacing, 12px) 0 var(--wz-print-base-spacing, 12px) !important;
    border-bottom: 2px solid #000 !important;
    background: transparent !important;
    margin-bottom: var(--wz-print-section-spacing, 16px) !important;
    page-break-after: avoid !important;
    /* Remove any gradients or fancy styling */
    background-image: none !important;
    box-shadow: none !important;
  }
  ._headerContent_1z01b_125 {
    display: block !important; /* Stack vertically for print */
    max-width: 100% !important;
    margin: 0 !important;
  }
  ._headerLeft_1z01b_141 {
    margin-bottom: var(--wz-print-base-spacing, 12px) !important;
  }
  ._headerTitle_1z01b_145 {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 1.6) !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 6px 0 !important;
    line-height: var(--wz-print-line-height-title, 1.3) !important;
    page-break-after: avoid !important;
  }
  ._headerSubtitle_1z01b_159 {
    font-size: calc(var(--wz-print-font-size-base, 14px) * 0.9) !important;
    color: #333 !important;
    margin: 0 0 4px 0 !important;
    text-transform: none !important; /* Remove uppercase for print */
    letter-spacing: normal !important;
    font-weight: 500 !important;
  }
  ._headerActions_1z01b_169 {
    /* Hide most header actions, but allow print-specific content */
    display: none !important;
    /* Show only elements marked for print */
  }
  ._headerActions_1z01b_169 ._print-only_1z01b_398 {
    display: block !important;
    font-size: var(--wz-print-font-size-small, 12px) !important;
    color: #666 !important;
    margin: 4px 0 !important;
  }
  /* ===== CONTENT AREA PRINT OPTIMIZATIONS ===== */
  ._wizardContent_1z01b_28 {
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  ._contentWrapper_1z01b_33 {
    /* Remove all visual chrome for print */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    /* Remove pseudo-elements */
  }
  ._contentWrapper_1z01b_33::before, ._contentWrapper_1z01b_33::after {
    display: none !important;
  }
  /* ===== FOOTER PRINT OPTIMIZATIONS ===== */
  ._wizardFooter_1z01b_194 {
    /* Compact footer for print */
    padding: var(--wz-print-base-spacing, 12px) 0 0 !important;
    border-top: 1px solid #999 !important;
    background: transparent !important;
    margin-top: var(--wz-print-section-spacing, 16px) !important;
    text-align: center !important;
    page-break-inside: avoid !important;
    /* Remove gradients */
    background-image: none !important;
  }
  ._defaultFooter_1z01b_207 {
    max-width: 100% !important;
    margin: 0 !important;
  }
  ._footerText_1z01b_212 {
    font-size: var(--wz-print-font-size-small, 12px) !important;
    color: #333 !important;
    margin: 0 0 4px 0 !important;
    font-weight: 400 !important;
  }
  ._footerDisclaimer_1z01b_220 {
    font-size: calc(var(--wz-print-font-size-small, 12px) * 0.9) !important;
    color: #666 !important;
    margin: 0 !important;
    font-style: italic;
  }
  /* ===== MODE OVERRIDES FOR PRINT ===== */
  /* All modes should look identical in print */
  ._wizardPageLayout_1z01b_3._mode--edit_1z01b_24,
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53,
  ._wizardPageLayout_1z01b_3._mode--published_1z01b_95 {
    background: white !important;
    padding: 0 !important;
    min-height: auto !important;
  }
  ._wizardPageLayout_1z01b_3._mode--edit_1z01b_24 ._wizardContent_1z01b_28,
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53 ._wizardContent_1z01b_28,
  ._wizardPageLayout_1z01b_3._mode--published_1z01b_95 ._wizardContent_1z01b_28 {
    overflow: visible !important;
    height: auto !important;
  }
  ._wizardPageLayout_1z01b_3._mode--edit_1z01b_24 ._contentWrapper_1z01b_33,
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53 ._contentWrapper_1z01b_33,
  ._wizardPageLayout_1z01b_3._mode--published_1z01b_95 ._contentWrapper_1z01b_33 {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  /* Preview mode specific overrides */
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53 {
    background: white !important; /* Remove gradient background */
  }
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53 ._contentWrapper_1z01b_33 {
    /* Remove document-like styling */
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  ._wizardPageLayout_1z01b_3._mode--preview_1z01b_53 ._contentWrapper_1z01b_33::before {
    display: none !important;
  }
  /* ===== PRINT QUALITY OPTIMIZATIONS ===== */
  /* Hide all loading and error states in print */
  ._loadingState_1z01b_229,
  ._errorState_1z01b_266,
  ._loading_1z01b_229,
  ._error_1z01b_266 {
    display: none !important;
  }
  /* Ensure text is crisp and readable */
  * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }
  /* ===== PRINT DEBUGGING (uncomment for debugging) ===== */
  /*
  .wizardPageLayout {
    border: 2px solid red !important;
  }

  .wizardHeader {
    border: 1px solid blue !important;
  }

  .wizardContent {
    border: 1px solid green !important;
  }

  .wizardFooter {
    border: 1px solid purple !important;
  }

  .contentWrapper {
    border: 1px dashed orange !important;
  }
  */
}
@media print {
  [data-hide-in-print=true] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}/**
 * Print Document Styles
 * 
 * Optimized for clean, print-ready layout with:
 * - 980px max width for standard paper sizes
 * - Minimal visual elements for ink efficiency
 * - Print-specific media queries
 */
._printPage_gsd2f_9 {
  min-height: 100vh;
  background: white;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

._printContainer_gsd2f_21 {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
@media screen {
  ._printContainer_gsd2f_21 {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    min-height: calc(100vh - 40px);
    margin: 20px auto;
  }
}

._loadingContainer_gsd2f_36 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
}
._loadingContainer_gsd2f_36 ._loadingSpinner_gsd2f_44 {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: _spin_gsd2f_1 1s linear infinite;
  margin-bottom: 20px;
}
._loadingContainer_gsd2f_36 p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

@keyframes _spin_gsd2f_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._errorContainer_gsd2f_67 {
  text-align: center;
  padding: 40px;
}
._errorContainer_gsd2f_67 h2 {
  color: #e74c3c;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
}
._errorContainer_gsd2f_67 p {
  color: #666;
  margin-bottom: 20px;
  font-size: 16px;
}
._errorContainer_gsd2f_67 ._errorDetails_gsd2f_82 {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 16px;
  text-align: left;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  color: #495057;
}

._noContent_gsd2f_93 {
  text-align: center;
  padding: 40px;
  color: #666;
}
._noContent_gsd2f_93 h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}
._noContent_gsd2f_93 p {
  font-size: 16px;
  margin: 0;
}

/**
 * Print-specific media queries
 */
@media print {
  ._printPage_gsd2f_9 {
    background: white !important;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  ._printContainer_gsd2f_21 {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    page-break-inside: avoid;
  }
  ._loadingContainer_gsd2f_36,
  ._errorContainer_gsd2f_67 {
    display: none;
  }
  button,
  input,
  textarea,
  select {
    display: none !important;
  }
  section,
  ._wizard-section_gsd2f_139 {
    page-break-inside: avoid;
    margin-bottom: 20pt;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    margin-bottom: 10pt;
    margin-top: 20pt;
  }
  ._timeline-container_gsd2f_148 {
    page-break-inside: avoid;
  }
  ._faq-item_gsd2f_151 {
    page-break-inside: avoid;
    margin-bottom: 15pt;
  }
  ._faq-answer_gsd2f_155 {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1pt solid #000;
    padding: 5pt;
    text-align: left;
  }
  [data-hide-in-print=true],
  ._settings-panel_gsd2f_172,
  ._wizard-toolbar_gsd2f_173,
  ._section-controls_gsd2f_174,
  ._drag-handle_gsd2f_175,
  ._add-button_gsd2f_176,
  ._remove-button_gsd2f_177,
  ._edit-button_gsd2f_178 {
    display: none !important;
  }
  /* ===== COMPREHENSIVE OVERRIDES FOR CLEAN PRINT ===== */
  /* Force remove ALL borders and backgrounds from ALL sections */
  * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    backdrop-filter: none !important;
    /* Exception: table borders and totals borders are allowed */
  }
  *:not(table):not(th):not(td):not([class*=totals]) {
    background: transparent !important;
  }
  /* Clean hero section contact cards - target containers AND all children */
  [data-print-role=preparedBy],
  [data-print-role=preparedBy] *,
  [data-print-role=preparedFor],
  [data-print-role=preparedFor] * {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
  }
  /* Ensure H1 titles stay large and prominent */
  h1,
  [class*=title]:first-child,
  [class*=Title]:first-child,
  [class*=heading] h1 {
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  /* Clean text sections */
  [class*=text] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }
  /* Force table totals visibility - EXCLUDE table cells AND totals section elements to prevent layout breaking */
  [class*=total]:not(input):not(textarea):not(td):not(th):not(tr):not([class*=totalsRow]):not([class*=totalsBox]):not([class*=totalsSection]),
  [class*=Total]:not(input):not(textarea):not(td):not(th):not(tr):not([class*=totalsRow]):not([class*=totalsBox]):not([class*=totalsSection]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
  }
  /* Ensure table cells with "total" remain as table-cell (DON'T force block) */
  td[class*=total],
  td[class*=Total],
  th[class*=total],
  th[class*=Total] {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
  }
  /* Ensure totals section maintains proper flexbox layout (DON'T force block on totalsRow) */
  [class*=totalsSection] {
    display: block !important; /* Section container stays block */
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important; /* Remove borders */
  }
  [class*=totalsBox] {
    display: block !important; /* Box container stays block */
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important; /* Remove borders */
  }
  [class*=totalsRow] {
    display: flex !important; /* CRITICAL: Rows use flexbox for alignment */
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important; /* Remove borders */
  }
  /* Clean section spacing */
  [class*=section],
  [class*=Section] {
    margin-bottom: 24px !important;
    page-break-inside: avoid !important;
  }
  /* Ensure proper text color and spacing */
  p, span, div {
    color: #000 !important;
    background: transparent !important;
    border: none !important;
  }
  /* Clean input fields to look like text */
  input, textarea {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #000 !important;
    font-family: inherit !important;
  }
}._personalSection_11y3e_1 {
  max-width: 1000px;
  margin: 0 auto;
}

._sectionHeader_11y3e_6 {
  margin-bottom: 2rem;
}
._sectionHeader_11y3e_6 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._sectionHeader_11y3e_6 p {
  color: var(--neutral-600);
  font-size: 0.875rem;
  line-height: 1.6;
}

._personalGrid_11y3e_21 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 768px) {
  ._personalGrid_11y3e_21 {
    gap: 1.5rem;
  }
}

._settingsSection_11y3e_32 {
  background: var(--primary-50);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsSection_11y3e_32 {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

._sectionTitle_11y3e_51 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._sectionTitle_11y3e_51 svg {
  color: var(--primary-500);
}
@media (max-width: 768px) {
  ._sectionTitle_11y3e_51 {
    font-size: 1rem;
  }
}

._sectionDescription_11y3e_69 {
  color: var(--neutral-600);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  ._sectionDescription_11y3e_69 {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
  }
}

._formGrid_11y3e_81 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  ._formGrid_11y3e_81 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

._inputGroup_11y3e_93 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._fieldLabel_11y3e_99 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-900);
}
@media (max-width: 768px) {
  ._fieldLabel_11y3e_99 {
    font-size: 0.8125rem;
  }
}

._helpIcon_11y3e_113 {
  color: var(--neutral-400);
  cursor: help;
  transition: color 0.2s ease;
}
._helpIcon_11y3e_113:hover {
  color: var(--primary-500);
}

._inputWithIndicator_11y3e_122 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
._inputWithIndicator_11y3e_122 input {
  width: 100%;
}

._inputFeedback_11y3e_132 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 1.25rem;
}

._charCounter_11y3e_139 {
  font-size: 0.75rem;
  color: var(--neutral-400);
  transition: color 0.2s ease;
}

._charCounterMax_11y3e_145 {
  color: var(--warning-500);
  font-weight: 500;
}

._saveIndicator_11y3e_150 {
  font-size: 0.75rem;
  color: var(--neutral-400);
  animation: _fadeIn_11y3e_1 0.2s ease;
}
@keyframes _fadeIn_11y3e_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._disabledInput_11y3e_164 {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--neutral-100);
}

._loadingState_11y3e_170,
._errorState_11y3e_171 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
  color: var(--neutral-600);
}

._loadingSpinner_11y3e_181 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--neutral-300);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: _spin_11y3e_1 0.8s linear infinite;
}
@keyframes _spin_11y3e_1 {
  to {
    transform: rotate(360deg);
  }
}

._errorState_11y3e_171 {
  color: var(--negative-500);
}._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 {
  margin-bottom: 2rem;
}
._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._headerText_1dc3z_10 {
  flex: 1;
}
._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._headerText_1dc3z_10 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
  margin-top: 0;
}
._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._headerText_1dc3z_10 p {
  color: var(--neutral-600);
  font-size: 0.95rem;
  margin: 0;
}
._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._manageButton_1dc3z_25 {
  flex-shrink: 0;
  min-width: 200px;
}
@media (max-width: 768px) {
  ._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  ._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._manageButton_1dc3z_25 {
    width: 100%;
    min-width: unset;
  }
}

._subscriptionGrid_1dc3z_41 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem; /* Increased gap for better separation */
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  ._subscriptionGrid_1dc3z_41 {
    gap: 1.5rem;
  }
}

._settingsSection_1dc3z_53 {
  margin-bottom: 2.5rem; /* Generous spacing between sections */
}
@media (max-width: 768px) {
  ._settingsSection_1dc3z_53 {
    margin-bottom: 1.5rem;
  }
}
._settingsSection_1dc3z_53 ._sectionTitle_1dc3z_61 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._settingsSection_1dc3z_53 ._sectionTitle_1dc3z_61 svg {
  color: var(--primary-500);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._settingsSection_1dc3z_53 ._sectionTitle_1dc3z_61 {
    font-size: 0.9375rem;
  }
}
._settingsSection_1dc3z_53 ._sectionDescription_1dc3z_79 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._settingsSection_1dc3z_53 ._sectionDescription_1dc3z_79 {
    font-size: 0.8125rem;
    margin: 0 0 1rem 0;
  }
}
._settingsSection_1dc3z_53 ._sectionTitleWithStatus_1dc3z_91 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
._settingsSection_1dc3z_53 ._sectionTitleWithStatus_1dc3z_91 ._titleWithIcon_1dc3z_98 {
  flex: 1;
}
._settingsSection_1dc3z_53 ._sectionTitleWithStatus_1dc3z_91 ._statusActions_1dc3z_101 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._settingsSection_1dc3z_53 ._sectionTitleWithStatus_1dc3z_91 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

._upgradeSection_1dc3z_115 {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
  color: white;
}

._statusBadge_1dc3z_123 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

._statusActive_1dc3z_135 {
  background-color: var(--positive-100);
  color: var(--positive-800);
}

._statusInactive_1dc3z_140,
._statusCancelled_1dc3z_141 {
  background-color: var(--negative-100);
  color: var(--negative-800);
}

._statusPastDue_1dc3z_146 {
  background-color: var(--warning-100);
  color: var(--warning-800);
}

._planDetails_1dc3z_151 ._planName_1dc3z_151 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._planDetails_1dc3z_151 ._planPrice_1dc3z_157 {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}
._planDetails_1dc3z_151 ._planPrice_1dc3z_157 ._amount_1dc3z_162 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-500);
}
._planDetails_1dc3z_151 ._planPrice_1dc3z_157 ._period_1dc3z_167 {
  font-size: 1rem;
  color: var(--neutral-600);
  margin-left: 0.25rem;
}
._planDetails_1dc3z_151 ._planPrice_1dc3z_157 ._freePrice_1dc3z_172 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--positive-500);
}
._planDetails_1dc3z_151 ._renewalInfo_1dc3z_177 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--neutral-600);
  font-size: 0.875rem;
}
._planDetails_1dc3z_151 ._renewalInfo_1dc3z_177 svg {
  color: var(--neutral-600);
}

._usageStats_1dc3z_188 {
  text-align: center;
}
._usageStats_1dc3z_188 ._usageNumbers_1dc3z_191 {
  margin-bottom: 0.5rem;
}
._usageStats_1dc3z_188 ._usageNumbers_1dc3z_191 ._usageCount_1dc3z_194 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-500);
}
._usageStats_1dc3z_188 ._usageNumbers_1dc3z_191 ._usageLimit_1dc3z_199 {
  font-size: 1.5rem;
  color: var(--neutral-600);
  margin-left: 0.25rem;
}
._usageStats_1dc3z_188 ._usageLabel_1dc3z_204 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin-bottom: 1rem;
}
._usageStats_1dc3z_188 ._usageBar_1dc3z_209 {
  width: 100%;
  height: 8px;
  background-color: var(--primary-50);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
._usageStats_1dc3z_188 ._usageBar_1dc3z_209 ._usageProgress_1dc3z_217 {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-300));
  border-radius: 4px;
  transition: width 0.3s ease;
}
._usageStats_1dc3z_188 ._usageText_1dc3z_223 {
  font-size: 0.875rem;
  color: var(--neutral-600);
}

._featuresList_1dc3z_228 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
._featuresList_1dc3z_228 ._featureItem_1dc3z_233 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
._featuresList_1dc3z_228 ._featureItem_1dc3z_233 ._featureIcon_1dc3z_238 {
  color: var(--positive-500);
  flex-shrink: 0;
}
._featuresList_1dc3z_228 ._featureItem_1dc3z_233 span {
  color: var(--neutral-900);
  font-size: 0.9rem;
}

._billingActions_1dc3z_247 ._billingDescription_1dc3z_247 {
  color: var(--neutral-600);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
._billingActions_1dc3z_247 ._manageButton_1dc3z_25 {
  width: 100%;
  margin-bottom: 1.5rem;
}
._billingActions_1dc3z_247 ._billingNote_1dc3z_256 {
  padding: 1rem;
  background-color: var(--primary-50);
  border-radius: 6px;
  font-size: 0.875rem;
}
._billingActions_1dc3z_247 ._billingNote_1dc3z_256 p {
  margin: 0 0 0.5rem 0;
  color: var(--neutral-600);
  font-weight: 500;
}
._billingActions_1dc3z_247 ._billingNote_1dc3z_256 ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--neutral-600);
}
._billingActions_1dc3z_247 ._billingNote_1dc3z_256 ul li {
  margin-bottom: 0.25rem;
}

._upgradeCard_1dc3z_276 {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border: none;
  color: white;
  margin-top: 1rem;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 ._upgradeIcon_1dc3z_288 {
  color: var(--warning-500);
  flex-shrink: 0;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 {
  flex: 1;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}
._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 button {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  ._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  ._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 {
    order: 2;
  }
  ._upgradeCard_1dc3z_276 ._upgradeContent_1dc3z_282 button {
    order: 3;
    width: 100%;
  }
  ._planPrice_1dc3z_157 {
    justify-content: center;
  }
  ._billingActions_1dc3z_247 ._manageButton_1dc3z_25 {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  ._subscriptionGrid_1dc3z_41 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 640px) {
  ._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 {
    margin-bottom: 1.5rem;
  }
  ._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._headerText_1dc3z_10 h2 {
    font-size: 1.25rem;
  }
  ._subscriptionSection_1dc3z_1 ._sectionHeader_1dc3z_1 ._headerContent_1dc3z_4 ._headerText_1dc3z_10 p {
    font-size: 0.875rem;
  }
  ._subscriptionGrid_1dc3z_41 {
    gap: 1.5rem;
  }
  ._settingsSection_1dc3z_53 ._sectionTitle_1dc3z_61 {
    font-size: 0.9375rem;
  }
  ._settingsSection_1dc3z_53 ._sectionDescription_1dc3z_79 {
    font-size: 0.8125rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionMain_1dc3z_354 {
    padding: 1.25rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionMain_1dc3z_354 ._planInfo_1dc3z_357 ._planName_1dc3z_151 {
    font-size: 1.25rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionMain_1dc3z_354 ._planPrice_1dc3z_157 ._amount_1dc3z_162 {
    font-size: 2rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionAlert_1dc3z_363 {
    padding: 1rem 1.25rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionAlert_1dc3z_363 ._alertIcon_1dc3z_366 {
    width: 36px;
    height: 36px;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionAlert_1dc3z_363 ._alertContent_1dc3z_370 ._alertTitle_1dc3z_370 {
    font-size: 0.8125rem;
  }
  ._subscriptionCard_1dc3z_354 ._subscriptionAlert_1dc3z_363 ._alertContent_1dc3z_370 ._alertMessage_1dc3z_373 {
    font-size: 0.9375rem;
  }
  ._paymentMethodDisplay_1dc3z_376 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  ._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodIcon_1dc3z_381 {
    width: 20px;
    height: 20px;
  }
  ._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodDetails_1dc3z_385 ._paymentMethodName_1dc3z_385 {
    font-size: 0.875rem;
  }
  ._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodDetails_1dc3z_385 ._paymentMethodExpiry_1dc3z_388 {
    font-size: 0.75rem;
  }
  ._paymentMethodDisplay_1dc3z_376 button {
    width: 100%;
  }
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 {
    padding: 1.5rem;
  }
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeIcon_1dc3z_288 svg,
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._trialEndedIcon_1dc3z_401 svg,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._upgradeIcon_1dc3z_288 svg,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._trialEndedIcon_1dc3z_401 svg,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._upgradeIcon_1dc3z_288 svg,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._trialEndedIcon_1dc3z_401 svg,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._upgradeIcon_1dc3z_288 svg,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedIcon_1dc3z_401 svg {
    width: 24px;
    height: 24px;
  }
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 h3,
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._trialEndedText_1dc3z_412 h3,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._upgradeText_1dc3z_292 h3,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 h3,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 h3,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._trialEndedText_1dc3z_412 h3,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._upgradeText_1dc3z_292 h3,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 h3 {
    font-size: 1.25rem;
  }
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 p,
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._trialEndedText_1dc3z_412 p,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._upgradeText_1dc3z_292 p,
  ._upgradeSection_1dc3z_115 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 p,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 p,
  ._trialEndedSection_1dc3z_396 ._upgradeContent_1dc3z_282 ._trialEndedText_1dc3z_412 p,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._upgradeText_1dc3z_292 p,
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 p {
    font-size: 0.9375rem;
  }
}
._paymentMethodDisplay_1dc3z_376 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--primary-50);
  border-radius: 8px;
  border: 1px solid var(--neutral-300);
}
._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodIcon_1dc3z_381 {
  color: var(--neutral-600);
  flex-shrink: 0;
}
._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodDetails_1dc3z_385 ._paymentMethodName_1dc3z_385 {
  font-weight: 500;
  color: var(--neutral-900);
  font-size: 0.9375rem;
}
._paymentMethodDisplay_1dc3z_376 ._paymentMethodInfo_1dc3z_381 ._paymentMethodDetails_1dc3z_385 ._paymentMethodExpiry_1dc3z_388 {
  font-size: 0.8125rem;
  color: var(--neutral-600);
  margin-top: 0.25rem;
}

._invoiceTable_1dc3z_461 {
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  overflow: hidden;
}
._invoiceTable_1dc3z_461 ._invoiceTableHeader_1dc3z_466,
._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467 {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  gap: 1rem;
  padding: 0.875rem 1rem;
  align-items: center;
}
._invoiceTable_1dc3z_461 ._invoiceTableHeader_1dc3z_466 {
  background-color: var(--primary-50);
  border-bottom: 1px solid var(--neutral-300);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--neutral-600);
}
._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467 {
  border-bottom: 1px solid var(--neutral-300);
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
}
._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467:last-child {
  border-bottom: none;
}
._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467:hover {
  background-color: var(--neutral-100);
}
._invoiceTable_1dc3z_461 ._invoiceDate_1dc3z_494 {
  color: var(--neutral-900);
}
._invoiceTable_1dc3z_461 ._invoiceAmount_1dc3z_497 {
  font-weight: 500;
  color: var(--neutral-900);
}
._invoiceTable_1dc3z_461 ._invoiceStatus_1dc3z_501 {
  display: flex;
  align-items: center;
}
._invoiceTable_1dc3z_461 ._invoiceAction_1dc3z_505 {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  ._invoiceTable_1dc3z_461 ._invoiceTableHeader_1dc3z_466,
  ._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  ._invoiceTable_1dc3z_461 ._invoiceTableHeader_1dc3z_466 {
    display: none;
  }
  ._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467 {
    padding: 1rem;
  }
  ._invoiceTable_1dc3z_461 ._invoiceTableRow_1dc3z_467 > div::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--neutral-600);
    display: block;
    margin-bottom: 0.25rem;
  }
}

._invoiceLoadingState_1dc3z_532 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}
._invoiceLoadingState_1dc3z_532 p {
  color: var(--neutral-600);
  font-size: 0.875rem;
}

._invoiceFooter_1dc3z_545 {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid var(--neutral-300);
  margin-top: 1rem;
}

._lastSynced_1dc3z_553 {
  text-align: right;
  font-size: 0.75rem;
  color: var(--neutral-400);
  margin-top: 0.75rem;
  font-style: italic;
}

._spinning_1dc3z_561 {
  animation: _spin_1dc3z_561 1s linear infinite;
}

@keyframes _spin_1dc3z_561 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._statusGreen_1dc3z_573 {
  background-color: var(--positive-100);
  color: var(--positive-800);
}

._statusYellow_1dc3z_578 {
  background-color: var(--warning-100);
  color: var(--warning-800);
}

._statusRed_1dc3z_583 {
  background-color: var(--negative-100);
  color: var(--negative-800);
}

._statusGray_1dc3z_588 {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

._subscriptionCard_1dc3z_354 {
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  overflow: hidden;
}

._subscriptionMain_1dc3z_354 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  gap: 1.5rem;
}
._subscriptionMain_1dc3z_354 ._planInfo_1dc3z_357 {
  flex: 1;
}
._subscriptionMain_1dc3z_354 ._planInfo_1dc3z_357 ._planName_1dc3z_151 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 0.25rem;
}
._subscriptionMain_1dc3z_354 ._planInfo_1dc3z_357 ._planInterval_1dc3z_616 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  font-weight: 500;
}
._subscriptionMain_1dc3z_354 ._planPrice_1dc3z_157 {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
._subscriptionMain_1dc3z_354 ._planPrice_1dc3z_157 ._amount_1dc3z_162 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-600);
  line-height: 1;
}
._subscriptionMain_1dc3z_354 ._planPrice_1dc3z_157 ._period_1dc3z_167 {
  font-size: 1rem;
  color: var(--neutral-600);
  font-weight: 500;
}
@media (max-width: 640px) {
  ._subscriptionMain_1dc3z_354 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

._subscriptionAlert_1dc3z_363 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--primary-50);
  border-top: 1px solid var(--primary-200);
}
._subscriptionAlert_1dc3z_363 ._alertIcon_1dc3z_366 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-100);
  border-radius: 50%;
  color: var(--primary-600);
}
._subscriptionAlert_1dc3z_363 ._alertContent_1dc3z_370 {
  flex: 1;
}
._subscriptionAlert_1dc3z_363 ._alertContent_1dc3z_370 ._alertTitle_1dc3z_370 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-800);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
._subscriptionAlert_1dc3z_363 ._alertContent_1dc3z_370 ._alertMessage_1dc3z_373 {
  font-size: 1rem;
  color: var(--neutral-900);
  line-height: 1.5;
}
._subscriptionAlert_1dc3z_363._alertWarning_1dc3z_680 {
  background-color: var(--warning-50);
  border-top-color: var(--warning-200);
}
._subscriptionAlert_1dc3z_363._alertWarning_1dc3z_680 ._alertIcon_1dc3z_366 {
  background-color: var(--warning-100);
  color: var(--warning-600);
}
._subscriptionAlert_1dc3z_363._alertWarning_1dc3z_680 ._alertTitle_1dc3z_370 {
  color: var(--warning-800);
}

._trialWarning_1dc3z_692,
._paymentWarning_1dc3z_693 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
._trialWarning_1dc3z_692 svg,
._paymentWarning_1dc3z_693 svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
._trialWarning_1dc3z_692 div,
._paymentWarning_1dc3z_693 div {
  flex: 1;
}
._trialWarning_1dc3z_692 div strong,
._paymentWarning_1dc3z_693 div strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
._trialWarning_1dc3z_692 div p,
._paymentWarning_1dc3z_693 div p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

._trialWarning_1dc3z_692 {
  background-color: var(--warning-50);
  border: 1px solid var(--warning-200);
  color: var(--warning-900);
}
._trialWarning_1dc3z_692 svg {
  color: var(--warning-600);
}

._paymentWarning_1dc3z_693 {
  background-color: var(--negative-50);
  border: 1px solid var(--negative-200);
  color: var(--negative-900);
}
._paymentWarning_1dc3z_693 svg {
  color: var(--negative-600);
}

._noSubscriptionMessage_1dc3z_741 {
  padding: 1.5rem;
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  text-align: center;
}
._noSubscriptionMessage_1dc3z_741 p {
  margin: 0;
  color: var(--neutral-600);
  font-size: 0.9375rem;
}

._loadingState_1dc3z_754,
._errorState_1dc3z_755 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 1rem;
}
._loadingState_1dc3z_754 p,
._errorState_1dc3z_755 p {
  color: var(--neutral-600);
  font-size: 0.9375rem;
  margin: 0;
}
._loadingState_1dc3z_754 h3,
._errorState_1dc3z_755 h3 {
  color: var(--neutral-900);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

._loadingSpinner_1dc3z_778 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: _spin_1dc3z_561 0.8s linear infinite;
}

._errorIcon_1dc3z_787 {
  color: var(--negative-500);
}

._upgradeSection_1dc3z_115 {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border-radius: 12px;
  padding: 0;
  margin-top: 2rem;
  color: var(--pure-white);
  overflow: hidden;
}
._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
}
._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeIcon_1dc3z_288 {
  flex-shrink: 0;
  color: var(--warning-300);
}
._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 {
  flex: 1;
}
._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--pure-white);
}
._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 ._upgradeText_1dc3z_292 p {
  margin: 0;
  opacity: 0.95;
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  ._upgradeSection_1dc3z_115 ._upgradeContent_1dc3z_282 button {
    width: 100%;
  }
}

._trialEndedSection_1dc3z_396 {
  background-color: var(--negative-50);
  border: 2px solid var(--negative-200);
  border-radius: 12px;
  padding: 0;
  margin-top: 2rem;
  overflow: hidden;
}
._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
}
._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedIcon_1dc3z_401 {
  flex-shrink: 0;
  color: var(--negative-600);
}
._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 {
  flex: 1;
}
._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--negative-900);
}
._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 ._trialEndedText_1dc3z_412 p {
  margin: 0;
  font-size: 1rem;
  color: var(--negative-800);
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  ._trialEndedSection_1dc3z_396 ._trialEndedContent_1dc3z_395 button {
    width: 100%;
  }
}

._yearlyUpsell_1dc3z_881 {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.02) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 12px;
  margin-top: 1.5rem;
}
._yearlyUpsell_1dc3z_881 ._upsellIcon_1dc3z_891 {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--warning-100);
  border-radius: 50%;
  color: var(--warning-600);
}
._yearlyUpsell_1dc3z_881 ._upsellContent_1dc3z_902 {
  flex: 1;
}
._yearlyUpsell_1dc3z_881 ._upsellContent_1dc3z_902 h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
}
._yearlyUpsell_1dc3z_881 ._upsellContent_1dc3z_902 p {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  color: var(--neutral-600);
  line-height: 1.4;
}
._yearlyUpsell_1dc3z_881 ._upsellContent_1dc3z_902 ._savingsNote_1dc3z_917 {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--positive-600);
  font-weight: 600;
}
._yearlyUpsell_1dc3z_881 button {
  flex-shrink: 0;
  min-width: 160px;
}
@media (max-width: 768px) {
  ._yearlyUpsell_1dc3z_881 {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem;
  }
  ._yearlyUpsell_1dc3z_881 ._upsellIcon_1dc3z_891 {
    width: 40px;
    height: 40px;
  }
  ._yearlyUpsell_1dc3z_881 ._upsellIcon_1dc3z_891 svg {
    width: 20px;
    height: 20px;
  }
  ._yearlyUpsell_1dc3z_881 ._upsellContent_1dc3z_902 h4 {
    font-size: 1.125rem;
  }
  ._yearlyUpsell_1dc3z_881 button {
    width: 100%;
    min-width: unset;
  }
}
._yearlyUpsell_1dc3z_881._winBackWidget_1dc3z_950 {
  background: linear-gradient(135deg, rgba(var(--warning-rgb, 234, 179, 8), 0.12) 0%, rgba(var(--warning-rgb, 234, 179, 8), 0.04) 100%);
  border-color: var(--warning-300);
}
._yearlyUpsell_1dc3z_881._winBackWidget_1dc3z_950 ._upsellIcon_1dc3z_891 {
  background-color: var(--warning-100);
  color: var(--warning-600);
}

._trialDeletionSection_1dc3z_959 {
  margin-top: 2rem;
  border: 2px solid var(--negative-200);
  border-radius: 12px;
  overflow: hidden;
}

._trialDeletionContent_1dc3z_966 {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--negative-50);
}
._trialDeletionContent_1dc3z_966 ._trialDeletionIcon_1dc3z_973 {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--negative-100);
  border-radius: 50%;
  color: var(--negative-600);
}
._trialDeletionContent_1dc3z_966 ._trialDeletionText_1dc3z_984 {
  flex: 1;
}
._trialDeletionContent_1dc3z_966 ._trialDeletionText_1dc3z_984 h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--negative-900);
}
._trialDeletionContent_1dc3z_966 ._trialDeletionText_1dc3z_984 p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--negative-800);
  line-height: 1.5;
}
._trialDeletionContent_1dc3z_966 button {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._trialDeletionContent_1dc3z_966 {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem;
  }
  ._trialDeletionContent_1dc3z_966 ._trialDeletionIcon_1dc3z_973 {
    width: 40px;
    height: 40px;
  }
  ._trialDeletionContent_1dc3z_966 ._trialDeletionIcon_1dc3z_973 svg {
    width: 20px;
    height: 20px;
  }
  ._trialDeletionContent_1dc3z_966 button {
    width: 100%;
  }
}

._trialDeletionConfirm_1dc3z_1022 {
  padding: 1.25rem 1.5rem;
  background-color: var(--negative-100);
  border-top: 1px solid var(--negative-200);
}
._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 ._confirmIcon_1dc3z_1033 {
  color: var(--negative-600);
  flex-shrink: 0;
}
._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 p {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--negative-900);
  line-height: 1.5;
}
._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 ._confirmActions_1dc3z_1045 {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  ._trialDeletionConfirm_1dc3z_1022 {
    padding: 1rem;
  }
  ._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 {
    flex-direction: column;
    text-align: center;
  }
  ._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 p {
    width: 100%;
    min-width: unset;
  }
  ._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 ._confirmActions_1dc3z_1045 {
    width: 100%;
    flex-direction: column;
  }
  ._trialDeletionConfirm_1dc3z_1022 ._confirmContent_1dc3z_1027 ._confirmActions_1dc3z_1045 button {
    width: 100%;
  }
}._mobileTabSelect_1re57_1 {
  margin-bottom: 1.5rem;
}

._tabSelect_1re57_5 {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--neutral-900);
  background-color: var(--pure-white);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' 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-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}
._tabSelect_1re57_5:hover {
  border-color: var(--primary-400);
  background-color: var(--primary-50);
}
._tabSelect_1re57_5:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(9, 0, 255, 0.1);
}
._tabSelect_1re57_5 option {
  padding: 0.5rem;
  font-weight: 500;
}

._tabsContentWrapper_1re57_38 {
  padding: 2rem;
  min-height: 400px;
}
@media (max-width: 768px) {
  ._tabsContentWrapper_1re57_38 {
    padding: 1rem;
  }
}._profilePage_w7zod_1 {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  animation: _fadeIn_w7zod_1 0.3s ease-in-out;
}
@keyframes _fadeIn_w7zod_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._profileHeader_w7zod_18 {
  margin-bottom: 2rem;
}
._profileHeader_w7zod_18 h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}

._profileSubtitle_w7zod_28 {
  color: var(--neutral-600);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 600px;
}

._titleWithTrigger_w7zod_35 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._profileContent_w7zod_41 {
  border-radius: 12px;
  overflow: hidden;
}

._profileTabs_w7zod_46 {
  width: 100%;
}

._tabsList_w7zod_50 {
  padding: 0;
  width: 100%;
}

._tabsContent_w7zod_55 {
  padding: 2rem;
  min-height: 500px;
}

._tabContent_w7zod_60 {
  animation: _slideIn_w7zod_1 0.3s ease;
}
@keyframes _slideIn_w7zod_1 {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

._helpSection_w7zod_74 {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--neutral-50);
  border-radius: 12px;
  border: 1px solid var(--neutral-200);
}

._helpTitle_w7zod_82 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 0.5rem 0;
}

._helpDescription_w7zod_89 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

._helpActions_w7zod_96 {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 1024px) and (min-width: 769px) {
  ._profilePage_w7zod_1 {
    padding: 1.5rem;
  }
  ._tabsContent_w7zod_55 {
    padding: 1.5rem;
  }
}
@media (max-width: 768px) {
  ._profilePage_w7zod_1 {
    padding: 80px 0.75rem 1rem 0.75rem;
  }
  ._profileHeader_w7zod_18 {
    margin-bottom: 1.5rem;
  }
  ._profileHeader_w7zod_18 h1 {
    font-size: 1.5rem;
  }
  ._tabsList_w7zod_50 {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  ._tabsContent_w7zod_55 {
    padding: 1rem;
  }
  ._helpSection_w7zod_74 {
    margin-top: 1.5rem;
    padding: 1rem;
  }
}._businessSection_y6shh_1 {
  max-width: 1200px;
  margin: 0 auto;
}

._sectionHeader_y6shh_6 {
  margin-bottom: 2rem;
}
._sectionHeader_y6shh_6 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._sectionHeader_y6shh_6 p {
  color: var(--neutral-600);
  font-size: 0.875rem;
  line-height: 1.6;
}

._headerWithTrigger_y6shh_21 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
@media (max-width: 768px) {
  ._headerWithTrigger_y6shh_21 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._businessGrid_y6shh_34 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 768px) {
  ._businessGrid_y6shh_34 {
    gap: 1.5rem;
  }
}

._settingsSection_y6shh_45 {
  background: var(--primary-50);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--neutral-300);
}
@media (max-width: 768px) {
  ._settingsSection_y6shh_45 {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

._sectionTitleWithToggle_y6shh_64 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  ._sectionTitleWithToggle_y6shh_64 {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
}

._sectionTitle_y6shh_64 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
}
._sectionTitle_y6shh_64 svg {
  color: var(--primary-500);
}
@media (max-width: 768px) {
  ._sectionTitle_y6shh_64 {
    font-size: 1rem;
  }
}

._toggleLabel_y6shh_96 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 768px) {
  ._toggleLabel_y6shh_96 {
    align-self: flex-start;
  }
}

._toggleText_y6shh_109 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._toggleText_y6shh_109 {
    font-size: 0.8125rem;
  }
}

._sectionDescription_y6shh_120 {
  color: var(--neutral-600);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  ._sectionDescription_y6shh_120 {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
  }
}

._formGrid_y6shh_132 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  ._formGrid_y6shh_132 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

._inputGroup_y6shh_144 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._fieldLabel_y6shh_150 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-900);
}
@media (max-width: 768px) {
  ._fieldLabel_y6shh_150 {
    font-size: 0.8125rem;
  }
}

._helpIcon_y6shh_164 {
  color: var(--neutral-400);
  cursor: help;
  transition: color 0.2s ease;
}
._helpIcon_y6shh_164:hover {
  color: var(--primary-500);
}

._inputWithIndicator_y6shh_173 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._inputWithIndicator_y6shh_173 input,
._inputWithIndicator_y6shh_173 [role=combobox] {
  flex: 1;
}

._saveIndicator_y6shh_184 {
  position: absolute;
  right: 0.75rem;
  font-size: 0.75rem;
  color: var(--neutral-400);
  animation: _fadeIn_y6shh_1 0.2s ease;
}
@keyframes _fadeIn_y6shh_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._addressRow_y6shh_200 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  grid-column: span 2;
}
@media (max-width: 768px) {
  ._addressRow_y6shh_200 {
    grid-template-columns: 1fr;
    grid-column: span 1;
    gap: 1.25rem;
  }
}

._currencyOption_y6shh_214 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  ._currencyOption_y6shh_214 {
    max-width: 100%;
  }
  ._currencyOption_y6shh_214 span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

._currencySymbol_y6shh_230 {
  font-weight: 600;
  color: var(--primary-500);
  min-width: 1.5rem;
  flex-shrink: 0;
}
[aria-selected=true] ._currencySymbol_y6shh_230 {
  color: var(--pure-white);
}
[data-state=checked] ._currencySymbol_y6shh_230 {
  color: var(--pure-white);
}

._loadingState_y6shh_243,
._errorState_y6shh_244 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
  color: var(--neutral-600);
}

._loadingSpinner_y6shh_254 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--neutral-300);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: _spin_y6shh_1 0.8s linear infinite;
}
@keyframes _spin_y6shh_1 {
  to {
    transform: rotate(360deg);
  }
}

._errorState_y6shh_244 {
  color: var(--negative-500);
}._fontPicker_1jmis_1 {
  position: relative;
  width: 100%;
}

._pickerHeader_1jmis_6 {
  margin-bottom: 12px;
}

._pickerLabel_1jmis_10 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 4px 0;
  letter-spacing: 0.3px;
}

._pickerDescription_1jmis_18 {
  font-size: 13px;
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.4;
}

._selectedFontPreview_1jmis_25 {
  position: relative;
  z-index: 2;
}

._previewButton_1jmis_30 {
  width: 100%;
  padding: 20px 24px;
  background: var(--pure-white);
  border: 2px solid var(--neutral-300);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
._previewButton_1jmis_30:hover {
  border-color: var(--primary-500);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
._previewButton_1jmis_30:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

._previewContent_1jmis_54 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._previewHeader_1jmis_61 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._fontName_1jmis_67 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-900);
}

._fontCategory_1jmis_73 {
  font-size: 12px;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

._previewSample_1jmis_82 {
  font-size: 18px;
  color: var(--neutral-700);
  line-height: 1.4;
  font-weight: 400;
}

._chevron_1jmis_89 {
  color: var(--neutral-500);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

._chevronOpen_1jmis_95 {
  transform: rotate(180deg);
}

._overlay_1jmis_99 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 50;
  animation: _fadeIn_1jmis_1 0.2s ease;
}
@keyframes _fadeIn_1jmis_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._fontDropdown_1jmis_118 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--pure-white);
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 100;
  max-height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: _slideDown_1jmis_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes _slideDown_1jmis_1 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._categoryFilters_1jmis_145 {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--neutral-200);
  overflow-x: auto;
  flex-wrap: wrap;
}
._categoryFilters_1jmis_145::-webkit-scrollbar {
  height: 4px;
}
._categoryFilters_1jmis_145::-webkit-scrollbar-track {
  background: transparent;
}
._categoryFilters_1jmis_145::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 2px;
}

._categoryButton_1jmis_164 {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  background: transparent;
  border: 1px solid var(--neutral-300);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._categoryButton_1jmis_164:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-400);
}
._categoryButton_1jmis_164._categoryActive_1jmis_180 {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}
._categoryButton_1jmis_164._categoryActive_1jmis_180:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
}

._fontList_1jmis_190 {
  overflow-y: auto;
  max-height: 380px;
  padding: 8px;
}
._fontList_1jmis_190::-webkit-scrollbar {
  width: 8px;
}
._fontList_1jmis_190::-webkit-scrollbar-track {
  background: transparent;
}
._fontList_1jmis_190::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 4px;
}
._fontList_1jmis_190::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

._fontOption_1jmis_209 {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  text-align: left;
}
._fontOption_1jmis_209:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
}
._fontOption_1jmis_209._fontSelected_1jmis_228 {
  background: var(--primary-100);
  border-color: var(--primary-500);
}

._fontOptionContent_1jmis_233 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

._fontOptionHeader_1jmis_241 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._fontOptionName_1jmis_248 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

._fontOptionCategory_1jmis_254 {
  font-size: 11px;
  color: var(--neutral-500);
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

._popularBadge_1jmis_263 {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-700);
  background: var(--primary-200);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._fontOptionPreview_1jmis_274 {
  font-size: 16px;
  color: var(--neutral-700);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._checkIcon_1jmis_283 {
  color: var(--primary-600);
  flex-shrink: 0;
}

[data-theme=dark] ._previewButton_1jmis_30 {
  background: var(--neutral-900);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._previewButton_1jmis_30:hover {
  border-color: var(--primary-400);
}
[data-theme=dark] ._fontName_1jmis_67 {
  color: var(--neutral-100);
}
[data-theme=dark] ._fontCategory_1jmis_73 {
  color: var(--neutral-400);
  background: var(--neutral-800);
}
[data-theme=dark] ._previewSample_1jmis_82 {
  color: var(--neutral-300);
}
[data-theme=dark] ._fontDropdown_1jmis_118 {
  background: var(--neutral-900);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._categoryFilters_1jmis_145 {
  border-bottom-color: var(--neutral-700);
}
[data-theme=dark] ._categoryButton_1jmis_164 {
  color: var(--neutral-300);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._categoryButton_1jmis_164:hover {
  background: var(--neutral-800);
  border-color: var(--neutral-600);
}
[data-theme=dark] ._categoryButton_1jmis_164._categoryActive_1jmis_180 {
  background: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}
[data-theme=dark] ._fontOption_1jmis_209:hover {
  background: rgba(9, 0, 255, 0.1);
  border-color: var(--primary-700);
}
[data-theme=dark] ._fontOption_1jmis_209._fontSelected_1jmis_228 {
  background: rgba(9, 0, 255, 0.2);
  border-color: var(--primary-600);
}
[data-theme=dark] ._fontOptionName_1jmis_248 {
  color: var(--neutral-100);
}
[data-theme=dark] ._fontOptionCategory_1jmis_254 {
  color: var(--neutral-400);
  background: var(--neutral-800);
}
[data-theme=dark] ._fontOptionPreview_1jmis_274 {
  color: var(--neutral-300);
}
[data-theme=dark] ._pickerLabel_1jmis_10 {
  color: var(--neutral-100);
}
[data-theme=dark] ._pickerDescription_1jmis_18 {
  color: var(--neutral-400);
}

@media (max-width: 768px) {
  ._fontDropdown_1jmis_118 {
    max-height: 400px;
  }
  ._fontList_1jmis_190 {
    max-height: 300px;
  }
  ._previewSample_1jmis_82 {
    font-size: 16px;
  }
  ._fontOptionPreview_1jmis_274 {
    font-size: 14px;
  }
}._brandingSection_tbvmy_1 ._sectionHeader_tbvmy_1 {
  margin-bottom: 2rem;
}
._brandingSection_tbvmy_1 ._sectionHeader_tbvmy_1 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._brandingSection_tbvmy_1 ._sectionHeader_tbvmy_1 p {
  color: var(--neutral-600);
  font-size: 0.95rem;
  margin: 0;
}
._brandingSection_tbvmy_1 ._headerWithTrigger_tbvmy_15 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
@media (max-width: 768px) {
  ._brandingSection_tbvmy_1 ._headerWithTrigger_tbvmy_15 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._brandingLayout_tbvmy_28 {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 1023px) {
  ._brandingLayout_tbvmy_28 {
    gap: 1.5rem;
  }
}
@media (max-width: 999px) {
  ._brandingLayout_tbvmy_28 {
    flex-direction: column;
    gap: 1rem;
  }
}

._mobileNavSelect_tbvmy_45 {
  display: none;
  width: 100%;
}
@media (max-width: 999px) {
  ._mobileNavSelect_tbvmy_45 {
    display: block;
  }
}

._sectionSelect_tbvmy_55 {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--neutral-900);
  background-color: var(--pure-white);
  border: 2px solid var(--neutral-200);
  border-radius: 8px;
  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' 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 1rem center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
._sectionSelect_tbvmy_55:hover {
  border-color: var(--neutral-300);
}
._sectionSelect_tbvmy_55:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246), 0.1);
}

._navSidebar_tbvmy_81 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 240px;
  flex-shrink: 0;
}
@media (max-width: 1399px) {
  ._navSidebar_tbvmy_81 {
    width: 200px;
  }
}
@media (max-width: 1023px) {
  ._navSidebar_tbvmy_81 {
    width: 180px;
  }
}
@media (max-width: 999px) {
  ._navSidebar_tbvmy_81 {
    display: none;
  }
}

._navCard_tbvmy_104 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--pure-white);
  border: 2px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral-700);
  font-family: inherit;
}
._navCard_tbvmy_104 svg {
  color: var(--neutral-500);
  flex-shrink: 0;
}
._navCard_tbvmy_104:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}
._navCard_tbvmy_104:hover svg {
  color: var(--primary-500);
}
._navCard_tbvmy_104:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

._navCardActive_tbvmy_136 {
  border-color: var(--primary-500);
  background: var(--primary-50);
  color: var(--primary-700);
}
._navCardActive_tbvmy_136 svg {
  color: var(--primary-500);
}
._navCardActive_tbvmy_136:hover {
  border-color: var(--primary-500);
}

._contentArea_tbvmy_148 {
  flex: 1;
  min-width: 0;
}

._contentHeader_tbvmy_153 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
._contentHeader_tbvmy_153 ._titleGroup_tbvmy_160 {
  flex: 1;
}
@media (max-width: 768px) {
  ._contentHeader_tbvmy_153 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._sectionTitle_tbvmy_170 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._sectionTitle_tbvmy_170 svg {
  color: var(--primary-500);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._sectionTitle_tbvmy_170 {
    font-size: 0.9375rem;
  }
}

._sectionDescription_tbvmy_189 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._sectionDescription_tbvmy_189 {
    font-size: 0.8125rem;
  }
}

._toggleLabel_tbvmy_201 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._toggleLabel_tbvmy_201 {
    align-self: flex-start;
  }
}

._toggleText_tbvmy_215 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._toggleText_tbvmy_215 {
    font-size: 0.8125rem;
  }
}

._logoSection_tbvmy_226 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

._logoPreview_tbvmy_235 {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}
._logoPreview_tbvmy_235 ._logoImage_tbvmy_240 {
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
  border: 2px solid var(--neutral-300);
  border-radius: 8px;
  background: var(--primary-50);
  padding: 1rem;
}
._logoPreview_tbvmy_235 ._logoActions_tbvmy_249 {
  margin-top: 1rem;
}

._logoUploadArea_tbvmy_253 {
  border: 2px dashed var(--neutral-300);
  border-radius: 12px;
  padding: 3rem 2rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}
._logoUploadArea_tbvmy_253:hover {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
}
._logoUploadArea_tbvmy_253 ._uploadIcon_tbvmy_264 {
  margin-bottom: 1rem;
  color: var(--neutral-600);
}
._logoUploadArea_tbvmy_253 h4 {
  margin: 0.5rem 0;
  color: var(--neutral-900);
  font-weight: 500;
  font-size: 1.125rem;
}
._logoUploadArea_tbvmy_253 ._uploadSubtext_tbvmy_274 {
  color: var(--neutral-600);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

._hiddenInput_tbvmy_281 {
  display: none;
}

._uploadButton_tbvmy_285 {
  cursor: pointer;
}
._uploadButton_tbvmy_285 button {
  pointer-events: none;
}

._colorSection_tbvmy_292 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

._palettePresets_tbvmy_298 h4,
._customColors_tbvmy_299 h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 1rem 0;
}

._paletteGrid_tbvmy_306 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

._paletteOption_tbvmy_312 {
  padding: 0.75rem;
  border: 2px solid var(--neutral-300);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
._paletteOption_tbvmy_312:hover {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
}
._paletteOption_tbvmy_312._selectedPalette_tbvmy_324 {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
}
._paletteOption_tbvmy_312 ._paletteColors_tbvmy_328 {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
._paletteOption_tbvmy_312 ._colorSwatch_tbvmy_334 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._paletteOption_tbvmy_312 ._paletteName_tbvmy_341 {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--neutral-900);
}

._colorPickerWrapper_tbvmy_347 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._colorValue_tbvmy_353 {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--neutral-600);
  background-color: var(--primary-50);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

._fontOption_tbvmy_362 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
._fontOption_tbvmy_362 ._fontName_tbvmy_367 {
  flex: 1;
}
._fontOption_tbvmy_362 ._fontCategory_tbvmy_370 {
  font-size: 0.8rem;
  color: var(--neutral-600);
}

._fontPreview_tbvmy_375 {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  background-color: var(--primary-50);
}
._fontPreview_tbvmy_375 h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
}
._fontPreview_tbvmy_375 p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

._brandingGroup_tbvmy_392 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._fieldLabel_tbvmy_398 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--neutral-900);
  font-size: 0.9rem;
}

._helpIcon_tbvmy_407 {
  color: var(--neutral-600);
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
._helpIcon_tbvmy_407:hover {
  opacity: 1;
  color: var(--primary-500);
}

._typographySection_tbvmy_418 {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 1.5rem;
}

._fontPickers_tbvmy_425 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 968px) {
  ._fontPickers_tbvmy_425 {
    grid-template-columns: 1fr;
  }
}

._fontPairingPreview_tbvmy_436 {
  margin-top: 1rem;
}

._previewTitle_tbvmy_440 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 16px 0;
  letter-spacing: 0.3px;
}

._previewCard_tbvmy_448 {
  padding: 32px;
  background: var(--pure-white);
  border: 2px solid var(--neutral-300);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}
._previewCard_tbvmy_448:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

._previewHeading_tbvmy_460 {
  font-size: 32px;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

._previewBody_tbvmy_468 {
  font-size: 16px;
  color: var(--neutral-700);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

._previewMetrics_tbvmy_475 {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-200);
}

._metricItem_tbvmy_482 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._metricLabel_tbvmy_488 {
  font-size: 12px;
  color: var(--neutral-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._metricValue_tbvmy_496 {
  font-size: 14px;
  color: var(--neutral-900);
  font-weight: 500;
}

._fontSelectors_tbvmy_502 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

._colorPickerGrid_tbvmy_508 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

._modernColorPickerGrid_tbvmy_514 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

._colorPickerLayout_tbvmy_521 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

._primaryColorSection_tbvmy_528 {
  width: 100%;
}

._contrastColorSection_tbvmy_532 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
@media (max-width: 768px) {
  ._contrastColorSection_tbvmy_532 {
    grid-template-columns: 1fr;
  }
}

._previewArea_tbvmy_543 {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--neutral-300);
  min-height: 200px;
}

._previewHeader_tbvmy_550 {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: white;
}
._previewHeader_tbvmy_550 ._previewLogo_tbvmy_557 {
  height: 32px;
  width: auto;
  object-fit: contain;
}
._previewHeader_tbvmy_550 ._previewTitle_tbvmy_440 {
  font-weight: 600;
  font-size: 1.125rem;
}

._previewContent_tbvmy_567 {
  padding: 1.5rem;
}

._previewDetails_tbvmy_571 {
  margin-bottom: 1rem;
}

._previewRow_tbvmy_575 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--neutral-200);
}
._previewRow_tbvmy_575:last-child {
  border-bottom: none;
  font-weight: 600;
}
._previewRow_tbvmy_575 span:first-child {
  color: var(--neutral-600);
}

._saveSection_tbvmy_590 {
  display: flex;
  justify-content: flex-end;
  padding-top: 2rem;
  border-top: 1px solid var(--neutral-200);
}

._saveIndicatorSection_tbvmy_597 {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  min-height: 2rem;
}

._saveIndicator_tbvmy_597 {
  font-size: 0.875rem;
  color: var(--positive-600);
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: var(--positive-50);
  border-radius: 6px;
  animation: _fadeIn_tbvmy_1 0.3s ease;
}
@keyframes _fadeIn_tbvmy_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme=dark] ._previewTitle_tbvmy_440 {
  color: var(--neutral-100);
}
[data-theme=dark] ._previewCard_tbvmy_448 {
  background: var(--neutral-900);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._previewHeading_tbvmy_460 {
  color: var(--neutral-100);
}
[data-theme=dark] ._previewBody_tbvmy_468 {
  color: var(--neutral-300);
}
[data-theme=dark] ._previewMetrics_tbvmy_475 {
  border-top-color: var(--neutral-700);
}
[data-theme=dark] ._metricLabel_tbvmy_488 {
  color: var(--neutral-400);
}
[data-theme=dark] ._metricValue_tbvmy_496 {
  color: var(--neutral-100);
}

@media (max-width: 768px) {
  ._paletteGrid_tbvmy_306 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._colorPickerGrid_tbvmy_508 {
    grid-template-columns: 1fr;
  }
  ._modernColorPickerGrid_tbvmy_514 {
    grid-template-columns: 1fr;
  }
  ._fontSelectors_tbvmy_502 {
    grid-template-columns: 1fr;
  }
  ._fontPickers_tbvmy_425 {
    grid-template-columns: 1fr;
  }
  ._colorSection_tbvmy_292 {
    gap: 1.5rem;
  }
  ._saveSection_tbvmy_590 {
    justify-content: stretch;
  }
  ._saveSection_tbvmy_590 button {
    width: 100%;
  }
  ._previewCard_tbvmy_448 {
    padding: 24px;
  }
  ._previewHeading_tbvmy_460 {
    font-size: 24px;
  }
  ._previewMetrics_tbvmy_475 {
    flex-direction: column;
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  ._brandingGrid_tbvmy_684 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}._itemList_1nkva_1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._itemCard_1nkva_7 {
  padding: 1rem;
  background-color: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  position: relative;
  transition: border-color 0.2s ease;
}
._itemCard_1nkva_7:hover {
  border-color: var(--neutral-300);
}
._itemCard_1nkva_7:hover ._deleteButton_1nkva_18 {
  opacity: 1;
  visibility: visible;
}

._itemHeader_1nkva_23 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

._itemTitle_1nkva_30 {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  background: transparent;
  padding: 0.375rem 0.5rem;
  color: var(--neutral-900);
  outline: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
._itemTitle_1nkva_30:focus {
  border-bottom-color: var(--primary-500);
}
._itemTitle_1nkva_30::placeholder {
  color: var(--neutral-400);
  font-weight: 400;
}
._itemTitle_1nkva_30:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._deleteButton_1nkva_18 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--neutral-400);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._deleteButton_1nkva_18:hover {
  background: var(--negative-50);
  border-color: var(--negative-300);
  color: var(--negative-600);
}
._deleteButton_1nkva_18:focus-visible {
  opacity: 1;
  visibility: visible;
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

._itemContent_1nkva_85 {
  min-height: 60px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
}
._itemContent_1nkva_85::placeholder {
  color: var(--neutral-400);
}

._sourceBadge_1nkva_96 {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--primary-600);
  background: var(--primary-50);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

._emptyState_1nkva_106 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 2px dashed var(--neutral-300);
  border-radius: 8px;
  background-color: var(--neutral-50);
}
._emptyState_1nkva_106 svg {
  color: var(--neutral-400);
}
._emptyState_1nkva_106 p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 0.875rem;
  line-height: 1.5;
}._termsSection_8zxlh_1 ._sectionHeader_8zxlh_1 {
  margin-bottom: 2rem;
}
._termsSection_8zxlh_1 ._sectionHeader_8zxlh_1 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._termsSection_8zxlh_1 ._sectionHeader_8zxlh_1 p {
  color: var(--neutral-600);
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}
._termsSection_8zxlh_1 ._headerWithTrigger_8zxlh_15 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
@media (max-width: 768px) {
  ._termsSection_8zxlh_1 ._headerWithTrigger_8zxlh_15 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._legalDisclaimer_8zxlh_28 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #fef3cd; /* Warning background - keeping as override for visibility */
  border: 1px solid var(--warning-500);
  border-radius: 8px;
  color: #92400e; /* Warning text - keeping as override for visibility */
  font-size: 0.875rem;
}
._legalDisclaimer_8zxlh_28 svg {
  color: var(--warning-500);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
._legalDisclaimer_8zxlh_28 strong {
  font-weight: 600;
}

._termsLayout_8zxlh_48 {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 1023px) {
  ._termsLayout_8zxlh_48 {
    gap: 1.5rem;
  }
}
@media (max-width: 999px) {
  ._termsLayout_8zxlh_48 {
    flex-direction: column;
    gap: 1rem;
  }
}

._mobileNavSelect_8zxlh_65 {
  display: none;
  width: 100%;
}
@media (max-width: 999px) {
  ._mobileNavSelect_8zxlh_65 {
    display: block;
  }
}

._sectionSelect_8zxlh_75 {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--neutral-900);
  background-color: var(--pure-white);
  border: 2px solid var(--neutral-200);
  border-radius: 8px;
  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' 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 1rem center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
._sectionSelect_8zxlh_75:hover {
  border-color: var(--neutral-300);
}
._sectionSelect_8zxlh_75:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246), 0.1);
}

._navSidebar_8zxlh_101 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 240px;
  flex-shrink: 0;
}
@media (max-width: 1399px) {
  ._navSidebar_8zxlh_101 {
    width: 200px;
  }
}
@media (max-width: 1023px) {
  ._navSidebar_8zxlh_101 {
    width: 180px;
  }
}
@media (max-width: 999px) {
  ._navSidebar_8zxlh_101 {
    display: none;
  }
}

._navCard_8zxlh_124 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--pure-white);
  border: 2px solid var(--neutral-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral-700);
  font-family: inherit;
}
._navCard_8zxlh_124 svg {
  color: var(--neutral-500);
  flex-shrink: 0;
}
._navCard_8zxlh_124:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}
._navCard_8zxlh_124:hover svg {
  color: var(--primary-500);
}
._navCard_8zxlh_124:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  ._navCard_8zxlh_124 {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

._navCardActive_8zxlh_164 {
  border-color: var(--primary-500);
  background: var(--primary-50);
  color: var(--primary-700);
}
._navCardActive_8zxlh_164 svg {
  color: var(--primary-500);
}
._navCardActive_8zxlh_164:hover {
  border-color: var(--primary-500);
}

._contentArea_8zxlh_176 {
  flex: 1;
  min-width: 0;
}

._contentHeader_8zxlh_181 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
._contentHeader_8zxlh_181 ._titleGroup_8zxlh_188 {
  flex: 1;
}
@media (max-width: 768px) {
  ._contentHeader_8zxlh_181 {
    flex-direction: column;
    gap: 0.75rem;
  }
}

._actionsRow_8zxlh_198 {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  ._actionsRow_8zxlh_198 {
    margin-bottom: 1rem;
  }
}

._clearButton_8zxlh_209 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  color: var(--neutral-500);
  cursor: pointer;
  transition: all 0.2s ease;
}
._clearButton_8zxlh_209:hover:not(:disabled) {
  background: var(--negative-50);
  border-color: var(--negative-300);
  color: var(--negative-600);
}
._clearButton_8zxlh_209:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
._clearButton_8zxlh_209:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

._sectionTitle_8zxlh_237 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}
._sectionTitle_8zxlh_237 svg {
  color: var(--primary-500);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._sectionTitle_8zxlh_237 {
    font-size: 0.9375rem;
  }
}

._sectionDescription_8zxlh_256 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._sectionDescription_8zxlh_256 {
    font-size: 0.8125rem;
  }
}

._toggleLabel_8zxlh_268 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._toggleLabel_8zxlh_268 {
    align-self: flex-start;
  }
}

._toggleText_8zxlh_282 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._toggleText_8zxlh_282 {
    font-size: 0.8125rem;
  }
}

._termsGroup_8zxlh_293 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._helpIcon_8zxlh_299 {
  color: var(--neutral-600);
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
._helpIcon_8zxlh_299:hover {
  opacity: 1;
  color: var(--primary-500);
}

._customClauses_8zxlh_310 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

._emptyClauses_8zxlh_316 {
  padding: 2rem;
  text-align: center;
  background-color: var(--primary-50);
  border-radius: 8px;
  border: 2px dashed var(--neutral-300);
}
._emptyClauses_8zxlh_316 p {
  margin: 0;
  color: var(--neutral-600);
  font-size: 0.9rem;
}

._clauseItem_8zxlh_329 {
  padding: 1rem;
  background-color: var(--primary-50);
  border-radius: 8px;
  border: 1px solid var(--neutral-300);
}

._clauseControls_8zxlh_336 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
._clauseControls_8zxlh_336 ._removeButton_8zxlh_341 {
  align-self: flex-end;
}

._saveSection_8zxlh_345 {
  display: flex;
  justify-content: flex-end;
  padding-top: 2rem;
  border-top: 1px solid var(--neutral-200);
}

._saveIndicatorSection_8zxlh_352 {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  min-height: 2rem;
}

._saveIndicator_8zxlh_352 {
  font-size: 0.875rem;
  color: var(--positive-600);
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: var(--positive-50);
  border-radius: 6px;
  animation: _fadeIn_8zxlh_1 0.3s ease;
}
@keyframes _fadeIn_8zxlh_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._loadingState_8zxlh_379,
._errorState_8zxlh_380 {
  padding: 2rem;
  text-align: center;
  color: var(--neutral-600);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  ._termsCard_8zxlh_388 ._cardHeader_8zxlh_388 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  ._termsCard_8zxlh_388 ._cardHeader_8zxlh_388 button {
    align-self: stretch;
  }
  ._clauseControls_8zxlh_336 ._removeButton_8zxlh_341 {
    align-self: stretch;
  }
  ._saveSection_8zxlh_345 {
    justify-content: stretch;
  }
  ._saveSection_8zxlh_345 button {
    width: 100%;
  }
}._documentDefaultsPage_1w5ka_1 {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  animation: _fadeIn_1w5ka_1 0.3s ease-in-out;
}
@keyframes _fadeIn_1w5ka_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._pageHeader_1w5ka_18 {
  margin-bottom: 2rem;
}
._pageHeader_1w5ka_18 h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}

._pageSubtitle_1w5ka_28 {
  color: var(--neutral-600);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 800px;
}

._pageContent_1w5ka_35 {
  border-radius: 12px;
  overflow: hidden;
}

._settingsTabs_1w5ka_40 {
  width: 100%;
}

._tabsList_1w5ka_44 {
  padding: 0 0 0 0;
  overflow-x: visible;
  width: 100%;
}

._tabsContent_1w5ka_50 {
  padding: 2rem;
  min-height: 500px;
}

._tabContent_1w5ka_55 {
  animation: _slideIn_1w5ka_1 0.3s ease;
}
@keyframes _slideIn_1w5ka_1 {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  ._documentDefaultsPage_1w5ka_1 {
    padding: 1.5rem;
  }
  ._tabsContent_1w5ka_50 {
    padding: 1.5rem;
  }
}
@media (max-width: 768px) {
  ._documentDefaultsPage_1w5ka_1 {
    padding: 80px 0.75rem 1rem 0.75rem;
  }
  ._pageHeader_1w5ka_18 {
    margin-bottom: 1.5rem;
  }
  ._pageHeader_1w5ka_18 h1 {
    font-size: 1.5rem;
  }
  ._tabsList_1w5ka_44 {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  ._tabsContent_1w5ka_50 {
    padding: 1rem;
  }
}/**
 * AssetGrid Styles
 * 
 * Responsive grid layout for asset thumbnails
 * Uses CSS Grid for flexible layouts
 */
._grid_1n3bv_7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0;
}
@media (max-width: 768px) {
  ._grid_1n3bv_7 {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 480px) {
  ._grid_1n3bv_7 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
  }
}

._assetCard_1n3bv_26 {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  overflow: visible;
  transition: all 0.2s ease;
  cursor: pointer;
}
._assetCard_1n3bv_26:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
._assetCard_1n3bv_26._isDefaultLogo_1n3bv_40 {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-100);
}
._assetCard_1n3bv_26._isDefaultLogo_1n3bv_40:hover {
  box-shadow: 0 0 0 2px var(--primary-200), 0 4px 12px rgba(0, 0, 0, 0.1);
}
[data-theme=dark] ._assetCard_1n3bv_26._isDefaultLogo_1n3bv_40 {
  box-shadow: 0 0 0 2px var(--primary-900);
}
[data-theme=dark] ._assetCard_1n3bv_26._isDefaultLogo_1n3bv_40:hover {
  box-shadow: 0 0 0 2px var(--primary-800), 0 4px 12px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] ._assetCard_1n3bv_26 {
  background: var(--neutral-800);
}

._defaultLogoBadge_1n3bv_57 {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--primary-500);
  color: white;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
._defaultLogoBadge_1n3bv_57 svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
._defaultLogoBadge_1n3bv_57 span {
  white-space: nowrap;
}
[data-theme=dark] ._defaultLogoBadge_1n3bv_57 {
  background: var(--primary-600);
}

._thumbnailContainer_1n3bv_85 {
  position: relative;
  width: 100%;
  height: 120px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--neutral-200);
  padding: 4px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
[data-theme=dark] ._thumbnailContainer_1n3bv_85 {
  background: transparent;
  border-bottom-color: var(--neutral-700);
}

._thumbnail_1n3bv_85 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  transition: transform 0.2s ease;
}
._assetCard_1n3bv_26:hover ._thumbnail_1n3bv_85 {
  transform: scale(1.05);
}
[data-theme=dark] ._thumbnail_1n3bv_85 {
  border-color: var(--neutral-700);
}

._imagePlaceholder_1n3bv_118 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--neutral-100);
  color: var(--neutral-400);
}
[data-theme=dark] ._imagePlaceholder_1n3bv_118 {
  background: var(--neutral-700);
  color: var(--neutral-500);
}

._assetInfo_1n3bv_132 {
  padding: 0.75rem;
}

._assetTitle_1n3bv_136 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 0.375rem 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

._assetMeta_1n3bv_149 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.375rem;
}

._fileSize_1n3bv_158 {
  font-weight: 500;
}

._fileType_1n3bv_162 {
  text-transform: capitalize;
  background: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}

._tags_1n3bv_169 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

._tag_1n3bv_169 {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--primary-100);
  color: var(--primary-700);
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  border: 1px solid var(--primary-200);
}
[data-theme=dark] ._tag_1n3bv_169 {
  background: var(--primary-900);
  color: var(--primary-300);
  border-color: var(--primary-800);
}

._tagMore_1n3bv_193 {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

._assetActions_1n3bv_199 {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
._assetCard_1n3bv_26:hover ._assetActions_1n3bv_199 {
  opacity: 1;
}

._actionButton_1n3bv_210 {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
._actionButton_1n3bv_210:hover {
  background: var(--background);
}
._actionButton_1n3bv_210[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: var(--neutral-900);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  animation: _tooltipFadeIn_1n3bv_1 0.15s ease-out;
}
[data-theme=dark] ._actionButton_1n3bv_210[data-tooltip]:hover::before {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
._actionButton_1n3bv_210[data-tooltip]:hover::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--neutral-900);
  z-index: 1000;
  pointer-events: none;
}
[data-theme=dark] ._actionButton_1n3bv_210[data-tooltip]:hover::after {
  border-top-color: var(--neutral-100);
}

@keyframes _tooltipFadeIn_1n3bv_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
._destructiveAction_1n3bv_271:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--destructive);
}
._destructiveAction_1n3bv_271 svg {
  color: var(--destructive);
}

._assetCardSkeleton_1n3bv_279 {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  overflow: hidden;
}

._thumbnailSkeleton_1n3bv_286 {
  width: 100%;
  height: 140px;
  background: linear-gradient(90deg, var(--muted) 25%, var(--muted/50) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1n3bv_1 1.5s infinite;
}

._contentSkeleton_1n3bv_294 {
  padding: 1rem;
}

._titleSkeleton_1n3bv_298 {
  width: 80%;
  height: 16px;
  background: linear-gradient(90deg, var(--muted) 25%, var(--muted/50) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1n3bv_1 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

._metaSkeleton_1n3bv_308 {
  width: 60%;
  height: 12px;
  background: linear-gradient(90deg, var(--muted) 25%, var(--muted/50) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1n3bv_1 1.5s infinite;
  border-radius: 4px;
}

@keyframes _shimmer_1n3bv_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
._emptyState_1n3bv_325 {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted-foreground);
}
._emptyState_1n3bv_325 h3 {
  margin: 1rem 0 0.5rem 0;
  color: var(--foreground);
  font-size: 1.25rem;
  font-weight: 600;
}
._emptyState_1n3bv_325 p {
  margin: 0;
  font-size: 0.875rem;
}

._emptyIcon_1n3bv_346 {
  opacity: 0.5;
}/**
 * AssetFilters Styles
 *
 * Responsive filter and search interface
 * Clean layout with proper spacing and visual hierarchy
 */
._filtersContainer_q8pa6_7 {
  background-color: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
[data-theme=dark] ._filtersContainer_q8pa6_7 {
  background-color: var(--neutral-900);
  border-color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._filtersContainer_q8pa6_7 {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
}

._searchInputWrapper_q8pa6_25 {
  flex: 1;
  max-width: 400px;
  min-width: 200px;
}
@media (max-width: 768px) {
  ._searchInputWrapper_q8pa6_25 {
    max-width: none;
    min-width: unset;
    width: 100%;
  }
}

._searchInput_q8pa6_25 {
  position: relative;
  width: 100%;
}

._searchIcon_q8pa6_43 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-500);
  z-index: 1;
}
[data-theme=dark] ._searchIcon_q8pa6_43 {
  color: var(--neutral-400);
}

._searchField_q8pa6_55 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

._clearSearch_q8pa6_60 {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}
._clearSearch_q8pa6_60:hover {
  background-color: var(--neutral-100);
}
[data-theme=dark] ._clearSearch_q8pa6_60:hover {
  background-color: var(--neutral-800);
}

._filterControls_q8pa6_78 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
@media (max-width: 768px) {
  ._filterControls_q8pa6_78 {
    gap: 0.75rem;
    flex-direction: column;
    align-items: stretch;
  }
}

._filterGroup_q8pa6_93 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

._filterLabel_q8pa6_100 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-900);
  margin: 0;
}
[data-theme=dark] ._filterLabel_q8pa6_100 {
  color: var(--neutral-100);
}

._sortSelect_q8pa6_110 {
  min-width: 180px;
}
@media (max-width: 768px) {
  ._sortSelect_q8pa6_110 {
    min-width: unset;
    width: 100%;
  }
}

._sortOption_q8pa6_120 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._sortOption_q8pa6_120 svg {
  opacity: 0.7;
}

._clearFilters_q8pa6_129 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--neutral-600);
}
._clearFilters_q8pa6_129:hover {
  color: var(--neutral-900);
}
[data-theme=dark] ._clearFilters_q8pa6_129 {
  color: var(--neutral-400);
}
[data-theme=dark] ._clearFilters_q8pa6_129:hover {
  color: var(--neutral-100);
}

._filterCount_q8pa6_145 {
  min-width: 20px;
  height: 20px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-100);
  color: var(--primary-700);
  border-radius: 10px;
  padding: 0.125rem 0.375rem;
  font-weight: 500;
  border: 1px solid var(--primary-200);
}
[data-theme=dark] ._filterCount_q8pa6_145 {
  background-color: var(--primary-900);
  color: var(--primary-300);
  border-color: var(--primary-800);
}

._resultsSummary_q8pa6_165 {
  display: none;
}

._resultsCount_q8pa6_169 {
  font-weight: 500;
  color: var(--neutral-900);
}
[data-theme=dark] ._resultsCount_q8pa6_169 {
  color: var(--neutral-100);
}

._searchSummary_q8pa6_177 {
  font-style: italic;
}
._searchSummary_q8pa6_177::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--neutral-400);
  margin: 0 0.5rem;
  vertical-align: middle;
}
[data-theme=dark] ._searchSummary_q8pa6_177::before {
  background-color: var(--neutral-600);
}
@media (max-width: 768px) {
  ._searchSummary_q8pa6_177::before {
    display: none;
  }
  ._searchSummary_q8pa6_177 {
    width: 100%;
    margin-top: 0.25rem;
  }
}/**
 * AssetUploadModal Styles
 * 
 * Modal styling for asset upload interface
 * Clean, focused design for optimal upload experience
 */
._modalContent_iqsqt_7 {
  max-width: 500px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}
@media (max-width: 640px) {
  ._modalContent_iqsqt_7 {
    width: 95vw;
    max-width: none;
    margin: 1rem;
  }
}

._modalTitle_iqsqt_21 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  flex: 1;
}

._closeButton_iqsqt_29 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}
._closeButton_iqsqt_29:hover {
  background: var(--muted);
}
._closeButton_iqsqt_29:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._modalBody_iqsqt_46 {
  padding: 1.5rem 0;
}
@media (max-width: 640px) {
  ._modalBody_iqsqt_46 {
    padding: 1rem 0;
  }
}

._uploadSection_iqsqt_55 {
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  ._uploadSection_iqsqt_55 {
    margin-bottom: 1.5rem;
  }
}

._uploader_iqsqt_64 {
  width: 100%;
}

._tagsSection_iqsqt_68 {
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  ._tagsSection_iqsqt_68 {
    margin-bottom: 1rem;
  }
}

._sectionLabel_iqsqt_77 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
._sectionLabel_iqsqt_77 svg {
  opacity: 0.7;
}

._tagInput_iqsqt_90 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  ._tagInput_iqsqt_90 {
    flex-direction: column;
    gap: 0.5rem;
  }
}

._tagField_iqsqt_102 {
  flex: 1;
}

._addTagButton_iqsqt_106 {
  min-width: 44px;
  width: 44px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 0.2s ease;
}
._addTagButton_iqsqt_106:hover:not(._disabled_iqsqt_121) {
  background: var(--neutral-100);
  border-color: var(--primary-500);
  color: var(--primary-600);
}
._addTagButton_iqsqt_106:focus {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}
._addTagButton_iqsqt_106._disabled_iqsqt_121 {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
._addTagButton_iqsqt_106 svg {
  pointer-events: none;
}
[data-theme=dark] ._addTagButton_iqsqt_106 {
  border-color: var(--neutral-600);
  color: var(--neutral-300);
}
[data-theme=dark] ._addTagButton_iqsqt_106:hover:not(._disabled_iqsqt_121) {
  background: var(--neutral-800);
  border-color: var(--primary-500);
  color: var(--primary-400);
}
@media (max-width: 480px) {
  ._addTagButton_iqsqt_106 {
    width: 100%;
    min-width: unset;
  }
}

._tagsList_iqsqt_154 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  ._tagsList_iqsqt_154 {
    gap: 0.375rem;
  }
}

._tag_iqsqt_68 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: 50px;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid var(--primary-200);
}
[data-theme=dark] ._tag_iqsqt_68 {
  background: var(--primary-900);
  color: var(--primary-300);
  border-color: var(--primary-800);
}
@media (max-width: 480px) {
  ._tag_iqsqt_68 {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }
}

._removeTagIcon_iqsqt_190 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.2s ease;
  color: inherit;
}
._removeTagIcon_iqsqt_190:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}
._removeTagIcon_iqsqt_190:focus {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
  opacity: 1;
}
._removeTagIcon_iqsqt_190[tabindex="-1"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
._removeTagIcon_iqsqt_190 svg {
  pointer-events: none;
}

._tagHint_iqsqt_220 {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 640px) {
  ._tagHint_iqsqt_220 {
    font-size: 0.75rem;
  }
}

._contextInfo_iqsqt_232 {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

._contextText_iqsqt_240 {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0;
  font-style: italic;
}

._modalFooter_iqsqt_247 {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  ._modalFooter_iqsqt_247 {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
}

._uploadButton_iqsqt_261 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
  justify-content: center;
}
@media (max-width: 480px) {
  ._uploadButton_iqsqt_261 {
    min-width: unset;
    width: 100%;
  }
}
._uploadButton_iqsqt_261:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._uploadingIcon_iqsqt_279 {
  animation: _spin_iqsqt_1 1s linear infinite;
}

@keyframes _spin_iqsqt_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}/**
 * AssetDetailModal Styles
 * 
 * Detailed modal layout for viewing and editing asset information
 * Clean, organized design with proper visual hierarchy
 */
._modalContent_1vtue_7 {
  max-width: 600px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) var(--neutral-100);
}
._modalContent_1vtue_7::-webkit-scrollbar {
  width: 8px;
}
._modalContent_1vtue_7::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 4px;
}
._modalContent_1vtue_7::-webkit-scrollbar-thumb {
  background: var(--neutral-400);
  border-radius: 4px;
}
._modalContent_1vtue_7::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}
[data-theme=dark] ._modalContent_1vtue_7 {
  scrollbar-color: var(--neutral-600) var(--neutral-800);
}
[data-theme=dark] ._modalContent_1vtue_7::-webkit-scrollbar-track {
  background: var(--neutral-800);
}
[data-theme=dark] ._modalContent_1vtue_7::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
}
[data-theme=dark] ._modalContent_1vtue_7::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}
@media (max-width: 768px) {
  ._modalContent_1vtue_7 {
    width: 95vw;
    max-width: none;
    margin: 1rem;
  }
}

._modalTitle_1vtue_49 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  flex: 1;
}

._closeButton_1vtue_57 {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}
._closeButton_1vtue_57:hover {
  background: var(--muted);
}
._closeButton_1vtue_57:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._modalBody_1vtue_74 {
  padding: 0.5rem 0;
}
@media (max-width: 640px) {
  ._modalBody_1vtue_74 {
    padding: 0.375rem 0;
  }
}

._loading_1vtue_83 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--muted-foreground);
}
._loading_1vtue_83 p {
  margin: 0.75rem 0 0 0;
  font-size: 0.875rem;
}

._loadingSkeleton_1vtue_97 {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, var(--muted) 25%, var(--muted/50) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1vtue_1 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 1rem;
}

@keyframes _shimmer_1vtue_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
._error_1vtue_115 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--destructive);
}
._error_1vtue_115 p {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
}

._previewSection_1vtue_129 {
  margin-bottom: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--muted);
}
@media (max-width: 640px) {
  ._previewSection_1vtue_129 {
    margin-bottom: 0.5rem;
  }
}

._defaultLogoSection_1vtue_141 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 6px;
}
[data-theme=dark] ._defaultLogoSection_1vtue_141 {
  background: var(--primary-950);
  border-color: var(--primary-800);
}
@media (max-width: 640px) {
  ._defaultLogoSection_1vtue_141 {
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.5rem;
  }
}

._defaultLogoIndicator_1vtue_162 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-700);
}
._defaultLogoIndicator_1vtue_162 svg {
  color: var(--primary-500);
  flex-shrink: 0;
}
[data-theme=dark] ._defaultLogoIndicator_1vtue_162 {
  color: var(--primary-300);
}
[data-theme=dark] ._defaultLogoIndicator_1vtue_162 svg {
  color: var(--primary-400);
}

._setDefaultButton_1vtue_181 {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
._setDefaultButton_1vtue_181 svg {
  flex-shrink: 0;
}

._removeDefaultButton_1vtue_193 {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
._removeDefaultButton_1vtue_193 svg {
  flex-shrink: 0;
}
._removeDefaultButton_1vtue_193:hover {
  color: var(--destructive);
}

._imagePreview_1vtue_209 {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  background: var(--background);
}

._filePreview_1vtue_217 {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  gap: 0.75rem;
  background: var(--background);
}
._filePreview_1vtue_217 svg {
  color: var(--muted-foreground);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  ._filePreview_1vtue_217 {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
  }
}

._fileInfo_1vtue_236 {
  flex: 1;
}
._fileInfo_1vtue_236 h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  word-break: break-word;
}
._fileInfo_1vtue_236 p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

._infoSection_1vtue_252 {
  margin-bottom: 0.625rem;
}
@media (max-width: 640px) {
  ._infoSection_1vtue_252 {
    margin-bottom: 0.5rem;
  }
}

._field_1vtue_261 {
  margin-bottom: 0.625rem;
}
._field_1vtue_261:last-child {
  margin-bottom: 0;
}

._fieldRow_1vtue_268 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  ._fieldRow_1vtue_268 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

._fieldColumn_1vtue_281 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
._fieldColumn_1vtue_281 label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 0;
}
[data-theme=dark] ._fieldColumn_1vtue_281 label {
  color: var(--neutral-300);
}
._fieldColumn_1vtue_281 p {
  font-size: 0.8125rem;
  color: var(--neutral-900);
  word-break: break-word;
  margin-top: 0;
  padding-top: 0;
}
[data-theme=dark] ._fieldColumn_1vtue_281 p {
  color: var(--neutral-100);
}
._fieldColumn_1vtue_281 input {
  font-size: 0.8125rem;
}

._fieldLabel_1vtue_309 {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}

._fieldValue_1vtue_317 {
  margin: 0;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--foreground);
  word-break: break-word;
}
._fieldValue_1vtue_317:empty::before {
  content: "Not set";
  color: var(--muted-foreground);
  font-style: italic;
}

._metadataGrid_1vtue_330 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
@media (max-width: 480px) {
  ._metadataGrid_1vtue_330 {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

._metaItem_1vtue_344 {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--muted);
  border-radius: 6px;
}
._metaItem_1vtue_344 svg {
  color: var(--primary-500);
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  margin-top: 0.125rem;
}
[data-theme=dark] ._metaItem_1vtue_344 svg {
  color: var(--primary-400);
}
._metaItem_1vtue_344 div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

._metaLabel_1vtue_370 {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

._metaValue_1vtue_376 {
  font-size: 0.8125rem;
  color: var(--foreground);
  font-weight: 600;
  word-break: break-word;
}

._tagsSection_1vtue_383 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
@media (max-width: 640px) {
  ._tagsSection_1vtue_383 {
    margin-bottom: 0.5rem;
  }
}
._tagsSection_1vtue_383 ._fieldLabel_1vtue_309 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}
._tagsSection_1vtue_383 ._fieldLabel_1vtue_309 svg {
  color: var(--primary-500);
  width: 14px;
  height: 14px;
}
[data-theme=dark] ._tagsSection_1vtue_383 ._fieldLabel_1vtue_309 svg {
  color: var(--primary-400);
}

._tagEditor_1vtue_410 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._tagInput_1vtue_416 {
  display: flex;
  gap: 0.375rem;
}
@media (max-width: 480px) {
  ._tagInput_1vtue_416 {
    flex-direction: column;
  }
}
._tagInput_1vtue_416 input {
  flex: 1;
}
._tagInput_1vtue_416 button {
  min-width: 40px;
  width: 40px;
  padding: 0;
}
@media (max-width: 480px) {
  ._tagInput_1vtue_416 button {
    width: 100%;
    min-width: unset;
  }
}

._tagsList_1vtue_440 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
@media (max-width: 480px) {
  ._tagsList_1vtue_440 {
    gap: 0.25rem;
  }
}

._editTag_1vtue_451 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}
@media (max-width: 480px) {
  ._editTag_1vtue_451 {
    padding: 0.1875rem 0.375rem;
    font-size: 0.6875rem;
  }
}

._removeTagButton_1vtue_464 {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.7;
}
._removeTagButton_1vtue_464:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

._noTags_1vtue_479 {
  margin: 0;
  color: var(--muted-foreground);
  font-style: italic;
  font-size: 0.8125rem;
  padding: 0.25rem 0;
}

._modalFooter_1vtue_487 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.875rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  ._modalFooter_1vtue_487 {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
}

._leftActions_1vtue_503 {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  ._leftActions_1vtue_503 {
    order: 2;
  }
}

._rightActions_1vtue_513 {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 640px) {
  ._rightActions_1vtue_513 {
    order: 1;
  }
}

._tag_1vtue_383 {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: 50px;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid var(--primary-200);
}
[data-theme=dark] ._tag_1vtue_383 {
  background: var(--primary-900);
  color: var(--primary-300);
  border-color: var(--primary-800);
}

._confirmDialog_1vtue_540 {
  max-width: 400px;
}

._confirmContent_1vtue_544 {
  padding: 0.75rem 0;
}

._confirmDescription_1vtue_548 {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
}

._confirmFooter_1vtue_554 {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

._editorShell_1vtue_562 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._editMode_1vtue_568 {
  max-width: 1000px !important;
  width: calc(100vw - 2rem);
}
@media (max-width: 768px) {
  ._editMode_1vtue_568 {
    max-width: 95vw !important;
    width: 95vw;
  }
}

._editorLayout_1vtue_579 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 1rem;
  min-height: 350px;
  align-items: start;
}
@media (max-width: 768px) {
  ._editorLayout_1vtue_579 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    min-height: auto;
  }
}

._canvasContainer_1vtue_594 {
  position: relative;
  background: var(--neutral-100);
  border-radius: 8px;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme=dark] ._canvasContainer_1vtue_594 {
  background: var(--neutral-800);
}
@media (max-width: 768px) {
  ._canvasContainer_1vtue_594 {
    min-height: 250px;
  }
}

._editorPreview_1vtue_613 {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 4px;
}
@media (max-width: 768px) {
  ._editorPreview_1vtue_613 {
    max-height: 300px;
  }
}

._cropperWrapper_1vtue_625 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

._controlsPanel_1vtue_633 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--neutral-50);
  border-radius: 6px;
  border: 1px solid var(--neutral-200);
  height: fit-content;
}
[data-theme=dark] ._controlsPanel_1vtue_633 {
  background: var(--neutral-850);
  border-color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._controlsPanel_1vtue_633 {
    padding: 0.625rem;
    gap: 0.75rem;
  }
}

._editorTabs_1vtue_654 {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
  background: var(--neutral-100);
  border-radius: 6px;
}
[data-theme=dark] ._editorTabs_1vtue_654 {
  background: var(--neutral-800);
}

._editorTab_1vtue_654 {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}
._editorTab_1vtue_654:hover:not(._editorTabActive_1vtue_681) {
  color: var(--neutral-800);
  background: var(--neutral-200);
}
[data-theme=dark] ._editorTab_1vtue_654 {
  color: var(--neutral-400);
}
[data-theme=dark] ._editorTab_1vtue_654:hover:not(._editorTabActive_1vtue_681) {
  color: var(--neutral-200);
  background: var(--neutral-700);
}
._editorTab_1vtue_654 svg {
  width: 14px;
  height: 14px;
}

._editorTabActive_1vtue_681 {
  background: var(--pure-white);
  color: var(--primary-600);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
[data-theme=dark] ._editorTabActive_1vtue_681 {
  background: var(--neutral-700);
  color: var(--primary-400);
}

._controlSection_1vtue_707 {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

._controlSectionLabel_1vtue_713 {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
}
[data-theme=dark] ._controlSectionLabel_1vtue_713 {
  color: var(--neutral-400);
}

._aspectButtons_1vtue_724 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

._aspectButton_1vtue_724 {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--neutral-300);
  background: var(--pure-white);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  transition: all 0.15s ease;
}
._aspectButton_1vtue_724:hover:not(._aspectButtonActive_1vtue_741) {
  border-color: var(--primary-400);
  color: var(--primary-600);
}
[data-theme=dark] ._aspectButton_1vtue_724 {
  background: var(--neutral-800);
  border-color: var(--neutral-600);
  color: var(--neutral-300);
}
[data-theme=dark] ._aspectButton_1vtue_724:hover:not(._aspectButtonActive_1vtue_741) {
  border-color: var(--primary-500);
  color: var(--primary-400);
}

._aspectButtonActive_1vtue_741 {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: var(--pure-white);
}
[data-theme=dark] ._aspectButtonActive_1vtue_741 {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--pure-white);
}

._sliderControl_1vtue_766 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._zoomSlider_1vtue_772 {
  margin-top: 0.25rem;
}

._editorActionBar_1vtue_776 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--neutral-200);
}
[data-theme=dark] ._editorActionBar_1vtue_776 {
  border-color: var(--neutral-700);
}
@media (max-width: 768px) {
  ._editorActionBar_1vtue_776 {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 0 0.25rem;
    background: var(--background);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}

._editorActionLeft_1vtue_799 {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  ._editorActionLeft_1vtue_799 {
    order: 2;
    width: 100%;
  }
  ._editorActionLeft_1vtue_799 button {
    width: 100%;
  }
}

._editorActionRight_1vtue_813 {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  ._editorActionRight_1vtue_813 {
    order: 1;
    width: 100%;
  }
  ._editorActionRight_1vtue_813 button {
    flex: 1;
  }
}

._editorLoading_1vtue_827 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--neutral-500);
}

._editorSpinner_1vtue_837 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: _spin_1vtue_1 1s linear infinite;
}

@keyframes _spin_1vtue_1 {
  to {
    transform: rotate(360deg);
  }
}
._editorError_1vtue_851 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: var(--negative-600);
}
._editorError_1vtue_851 svg {
  width: 48px;
  height: 48px;
  color: var(--negative-500);
}
._editorError_1vtue_851 p {
  margin: 0;
  font-size: 0.875rem;
}

._savingOverlay_1vtue_871 {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
  border-radius: 8px;
}
[data-theme=dark] ._savingOverlay_1vtue_871 {
  background: rgba(0, 0, 0, 0.85);
}

._savingProgress_1vtue_887 {
  width: 200px;
  height: 6px;
  background: var(--neutral-200);
  border-radius: 3px;
  overflow: hidden;
}
[data-theme=dark] ._savingProgress_1vtue_887 {
  background: var(--neutral-700);
}

._savingProgressFill_1vtue_898 {
  height: 100%;
  background: var(--primary-500);
  border-radius: 3px;
  transition: width 0.3s ease;
}

._savingText_1vtue_905 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-700);
}
[data-theme=dark] ._savingText_1vtue_905 {
  color: var(--neutral-300);
}._assetsPage_da1fs_1 {
  min-height: 100vh;
  background: var(--background);
  padding: 2rem;
}
@media (max-width: 768px) {
  ._assetsPage_da1fs_1 {
    padding: 80px 1rem 0 1rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
}
@media (max-width: 480px) {
  ._assetsPage_da1fs_1 {
    padding: 80px 0.5rem 0 0.5rem;
  }
}

._pageHeader_da1fs_21 {
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  ._pageHeader_da1fs_21 {
    margin-bottom: 1.5rem;
    flex-shrink: 0;
  }
}

._headerContent_da1fs_31 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 768px) {
  ._headerContent_da1fs_31 {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }
}

._titleWithTrigger_da1fs_45 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._pageTitle_da1fs_51 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
@media (max-width: 768px) {
  ._pageTitle_da1fs_51 {
    font-size: 1.75rem;
  }
}
@media (max-width: 480px) {
  ._pageTitle_da1fs_51 {
    font-size: 1.5rem;
  }
}

._pageSubtitle_da1fs_69 {
  font-size: 1rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 480px) {
  ._pageSubtitle_da1fs_69 {
    font-size: 0.875rem;
  }
}

._headerActions_da1fs_81 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._headerActions_da1fs_81 {
    justify-content: space-between;
    width: 100%;
  }
}
@media (max-width: 480px) {
  ._headerActions_da1fs_81 {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
}

._viewControls_da1fs_101 {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 480px) {
  ._viewControls_da1fs_101 {
    order: 2;
  }
}

._viewButton_da1fs_113 {
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._viewButton_da1fs_113:not(:last-child) {
  border-right: 1px solid var(--border);
}
._viewButton_da1fs_113._active_da1fs_123 {
  background: var(--primary);
  color: var(--primary-foreground);
}
._viewButton_da1fs_113._active_da1fs_123:hover {
  background: var(--primary);
}

._selectionControls_da1fs_131 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
}
@media (max-width: 480px) {
  ._selectionControls_da1fs_131 {
    order: 1;
  }
}

._selectionCount_da1fs_147 {
  font-weight: 600;
  color: var(--foreground);
}

._uploadButton_da1fs_152 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
@media (max-width: 480px) {
  ._uploadButton_da1fs_152 {
    order: 3;
    justify-content: center;
  }
}

._errorState_da1fs_165 {
  margin: 2rem 0;
}
@media (max-width: 768px) {
  ._errorState_da1fs_165 {
    margin: 1.5rem 0;
  }
}

._errorContent_da1fs_174 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (max-width: 480px) {
  ._errorContent_da1fs_174 {
    padding: 2rem 1rem;
  }
}
._errorContent_da1fs_174 h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--destructive);
}
._errorContent_da1fs_174 p {
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  max-width: 400px;
}

._contentArea_da1fs_203 {
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  ._contentArea_da1fs_203 {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
}
@media (max-width: 480px) {
  ._contentArea_da1fs_203 {
    padding-bottom: 0.5rem;
  }
}

._pagination_da1fs_222 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
  ._pagination_da1fs_222 {
    position: sticky;
    bottom: 0;
    background: var(--background);
    border-top: 1px solid var(--border);
    padding: 1rem;
    margin-top: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    text-align: center;
  }
}

._paginationInfo_da1fs_248 {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
@media (max-width: 768px) {
  ._paginationInfo_da1fs_248 {
    order: 2;
  }
}
._paginationInfo_da1fs_248 span {
  font-weight: 500;
}

._paginationControls_da1fs_261 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  ._paginationControls_da1fs_261 {
    order: 1;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  ._paginationControls_da1fs_261 {
    gap: 0.5rem;
  }
  ._paginationControls_da1fs_261 button {
    flex: 1;
    min-width: 80px;
  }
}

._pageIndicator_da1fs_282 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  padding: 0 0.5rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  ._pageIndicator_da1fs_282 {
    font-size: 0.8125rem;
  }
}

._loadingIcon_da1fs_295 {
  animation: _spin_da1fs_1 1s linear infinite;
}

@keyframes _spin_da1fs_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 1200px) {
  ._assetsPage_da1fs_1 {
    padding: 1.5rem;
  }
}
@media (max-width: 320px) {
  ._assetsPage_da1fs_1 {
    padding: 80px 0.25rem 0 0.25rem;
  }
  ._pageTitle_da1fs_51 {
    font-size: 1.375rem;
  }
  ._headerActions_da1fs_81 {
    gap: 0.5rem;
  }
  ._uploadButton_da1fs_152 {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}._pagination_1gkne_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem var(--spacing-lg);
  border-top: 1px solid var(--border, var(--neutral-300));
}
@media (max-width: 768px) {
  ._pagination_1gkne_1 {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    align-items: stretch;
    text-align: center;
  }
}

._paginationInfo_1gkne_19 {
  font-size: 0.875rem;
  color: var(--muted-foreground, var(--neutral-600));
}
@media (max-width: 768px) {
  ._paginationInfo_1gkne_19 {
    order: 2;
  }
}
._paginationInfo_1gkne_19 span {
  font-weight: 500;
}

._paginationControls_1gkne_32 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  ._paginationControls_1gkne_32 {
    order: 1;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  ._paginationControls_1gkne_32 {
    gap: 0.5rem;
  }
  ._paginationControls_1gkne_32 button {
    flex: 1;
    min-width: 80px;
  }
}

._pageIndicator_1gkne_53 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground, var(--neutral-900));
  padding: 0 0.5rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  ._pageIndicator_1gkne_53 {
    font-size: 0.8125rem;
  }
}

._loadingIcon_1gkne_66 {
  animation: _spin_1gkne_1 1s linear infinite;
}

@keyframes _spin_1gkne_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._mockDataWrapper_1gkne_78 {
  position: relative;
}

._mockDataBanner_1gkne_82 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--warning-100, #fef3cd);
  color: var(--warning-800, #856404);
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 8px 8px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  border: 2px dashed var(--warning-300, #ffc107);
  border-bottom: none;
}
@media (max-width: 768px) {
  ._mockDataBanner_1gkne_82 {
    font-size: 0.8125rem;
    padding: 0.625rem 0.75rem;
    flex-direction: column;
    gap: 0.25rem;
  }
}

._mockDataIcon_1gkne_106 {
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  ._mockDataIcon_1gkne_106 {
    font-size: 1rem;
  }
}

._mockDataTable_1gkne_115 {
  opacity: 0.6;
  border: 2px dashed var(--warning-300, #ffc107);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  pointer-events: none;
}
._mockDataTable_1gkne_115 button,
._mockDataTable_1gkne_115 a,
._mockDataTable_1gkne_115 input,
._mockDataTable_1gkne_115 select {
  pointer-events: none;
  cursor: default;
}/**
 * Chart Container Styles
 *
 * Base styling for all chart components
 * Imports chart CSS variables from charts.scss
 */
/**
 * Analytics Charts Global Styles
 *
 * Chart-specific CSS variables and global chart styling
 * Imported by chart components - NOT added to main.css
 */
/* ============================================================
 * CHART COLOR VARIABLES
 * ============================================================
 * Using existing design system colors
 */
:root {
  /* Primary chart colors - aligned with existing design system */
  --chart-1: var(--primary-500, #0900ff);
  --chart-2: var(--positive-500, #10b981);
  --chart-3: var(--warning-500, #f59e0b);
  --chart-4: var(--secondary-500, #8b5cf6);
  --chart-5: var(--negative-500, #ef4444);
  /* Engagement level colors */
  --chart-engagement-high: var(--positive-500, #10b981);
  --chart-engagement-medium: var(--warning-500, #f59e0b);
  --chart-engagement-low: var(--negative-500, #ef4444);
  /* Device type colors */
  --chart-device-desktop: var(--primary-500, #0900ff);
  --chart-device-mobile: var(--positive-500, #10b981);
  --chart-device-tablet: var(--warning-500, #f59e0b);
  /* Section attention colors */
  --chart-section-high: var(--positive-500, #10b981);
  --chart-section-medium: var(--warning-400, #fbbf24);
  --chart-section-low: var(--neutral-400, #9ca3af);
  /* Chart backgrounds & borders */
  --chart-background: var(--pure-white, #ffffff);
  --chart-grid: var(--neutral-200, #e5e7eb);
  --chart-axis: var(--neutral-600, #4b5563);
  --chart-tooltip-bg: var(--neutral-900, #111827);
  --chart-tooltip-text: var(--pure-white, #ffffff);
}

/* Dark theme chart colors */
[data-theme=dark] {
  --chart-background: var(--neutral-800, #1f2937);
  --chart-grid: var(--neutral-700, #374151);
  --chart-axis: var(--neutral-400, #9ca3af);
  --chart-tooltip-bg: var(--neutral-100, #f3f4f6);
  --chart-tooltip-text: var(--neutral-900, #111827);
}

._chartContainer_1sqld_54 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
}
@media (min-width: 768px) {
  ._chartContainer_1sqld_54 {
    font-size: 14px;
  }
}
._chartContainer_1sqld_54._loading_1sqld_70, ._chartContainer_1sqld_54._error_1sqld_70, ._chartContainer_1sqld_54._empty_1sqld_70 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

._chartWrapper_1sqld_77 {
  width: 100%;
  flex: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
}
._chartWrapper_1sqld_77 > div {
  width: 100%;
  flex: 1;
}

._loading_1sqld_70 {
  background: var(--color-background-subtle, #f9fafb);
}

._skeleton_1sqld_93 {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--neutral-200, #e5e7eb) 25%, var(--neutral-100, #f3f4f6) 50%, var(--neutral-200, #e5e7eb) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1sqld_1 1.5s infinite;
  border-radius: 4px;
}

@keyframes _shimmer_1sqld_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
._error_1sqld_70 {
  background: var(--negative-50, #fef2f2);
  border: 1px solid var(--negative-200, #fecaca);
}

._errorContent_1sqld_115 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}

._errorIcon_1sqld_124 {
  font-size: 32px;
}

._errorMessage_1sqld_128 {
  color: var(--negative-700, #b91c1c);
  font-size: 14px;
  margin: 0;
}

._empty_1sqld_70 {
  background: var(--neutral-50, #f9fafb);
}

._emptyContent_1sqld_138 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._chartEmptyState_1sqld_146 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 32px 16px;
}

._emptyIcon_1sqld_155 {
  font-size: 48px;
  opacity: 0.5;
}

._emptyTitle_1sqld_160 {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
}

._emptyDescription_1sqld_167 {
  font-size: 14px;
  color: var(--neutral-600, #4b5563);
  margin: 0;
  max-width: 300px;
}

._emptyAction_1sqld_174 {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--primary-500, #4f46e5);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
._emptyAction_1sqld_174:hover {
  background: var(--primary-600, #4338ca);
}
._emptyAction_1sqld_174:active {
  background: var(--primary-700, #3730a3);
}

._chartLegend_1sqld_193 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0;
  justify-content: center;
}
@media (min-width: 768px) {
  ._chartLegend_1sqld_193 {
    justify-content: flex-start;
  }
}

._legendItem_1sqld_206 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--neutral-700, #374151);
}

._legendColor_1sqld_214 {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

._legendIcon_1sqld_221 {
  display: flex;
  align-items: center;
  font-size: 14px;
}

._legendLabel_1sqld_227 {
  font-weight: 500;
}/**
 * Engagement Gauge Styles
 */
/**
 * Analytics Charts Global Styles
 *
 * Chart-specific CSS variables and global chart styling
 * Imported by chart components - NOT added to main.css
 */
/* ============================================================
 * CHART COLOR VARIABLES
 * ============================================================
 * Using existing design system colors
 */
:root {
  /* Primary chart colors - aligned with existing design system */
  --chart-1: var(--primary-500, #0900ff);
  --chart-2: var(--positive-500, #10b981);
  --chart-3: var(--warning-500, #f59e0b);
  --chart-4: var(--secondary-500, #8b5cf6);
  --chart-5: var(--negative-500, #ef4444);
  /* Engagement level colors */
  --chart-engagement-high: var(--positive-500, #10b981);
  --chart-engagement-medium: var(--warning-500, #f59e0b);
  --chart-engagement-low: var(--negative-500, #ef4444);
  /* Device type colors */
  --chart-device-desktop: var(--primary-500, #0900ff);
  --chart-device-mobile: var(--positive-500, #10b981);
  --chart-device-tablet: var(--warning-500, #f59e0b);
  /* Section attention colors */
  --chart-section-high: var(--positive-500, #10b981);
  --chart-section-medium: var(--warning-400, #fbbf24);
  --chart-section-low: var(--neutral-400, #9ca3af);
  /* Chart backgrounds & borders */
  --chart-background: var(--pure-white, #ffffff);
  --chart-grid: var(--neutral-200, #e5e7eb);
  --chart-axis: var(--neutral-600, #4b5563);
  --chart-tooltip-bg: var(--neutral-900, #111827);
  --chart-tooltip-text: var(--pure-white, #ffffff);
}

/* Dark theme chart colors */
[data-theme=dark] {
  --chart-background: var(--neutral-800, #1f2937);
  --chart-grid: var(--neutral-700, #374151);
  --chart-axis: var(--neutral-400, #9ca3af);
  --chart-tooltip-bg: var(--neutral-100, #f3f4f6);
  --chart-tooltip-text: var(--neutral-900, #111827);
}

._engagementGauge_59wep_51 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
}

._gaugeWrapper_59wep_60 {
  position: relative;
  width: 100%;
  height: 180px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

._gaugeCenter_59wep_71 {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  width: min(320px, 100%);
  padding: 0 12px;
}

._scoreValue_59wep_83 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.03em;
  color: var(--neutral-900, #1c1917);
}

._scoreLabel_59wep_92 {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-400, #a8a29e);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

._gaugeDetails_59wep_100 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  padding: 0 8px;
  margin: 0 auto;
  align-self: center;
}

._engagementLevel_59wep_110 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--neutral-50, #f9fafb);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
._engagementLevel_59wep_110._high_59wep_123 {
  background: var(--positive-50, #ecfdf5);
  color: var(--positive-700, #047857);
}
._engagementLevel_59wep_110._high_59wep_123 ._levelDot_59wep_127 {
  background: var(--chart-engagement-high);
}
._engagementLevel_59wep_110._medium_59wep_130 {
  background: var(--warning-50, #fffbeb);
  color: var(--warning-700, #b45309);
}
._engagementLevel_59wep_110._medium_59wep_130 ._levelDot_59wep_127 {
  background: var(--chart-engagement-medium);
}
._engagementLevel_59wep_110._low_59wep_137 {
  background: var(--negative-50, #fef2f2);
  color: var(--negative-700, #b91c1c);
}
._engagementLevel_59wep_110._low_59wep_137 ._levelDot_59wep_127 {
  background: var(--chart-engagement-low);
}

._engagementLevelHeader_59wep_145 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._levelDot_59wep_127 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._levelText_59wep_159 {
  font-size: 14px;
}

._levelDescription_59wep_163 {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600, #4b5563);
  max-width: 320px;
  line-height: 1.35;
}

._scaleReference_59wep_171 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}
@media (max-width: 480px) {
  ._scaleReference_59wep_171 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._scaleMarker_59wep_186 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-600, #4b5563);
}

._scaleDot_59wep_194 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._scaleText_59wep_201 {
  font-weight: 500;
}/**
 * Device Cards Styles
 */
/**
 * Analytics Charts Global Styles
 *
 * Chart-specific CSS variables and global chart styling
 * Imported by chart components - NOT added to main.css
 */
/* ============================================================
 * CHART COLOR VARIABLES
 * ============================================================
 * Using existing design system colors
 */
:root {
  /* Primary chart colors - aligned with existing design system */
  --chart-1: var(--primary-500, #0900ff);
  --chart-2: var(--positive-500, #10b981);
  --chart-3: var(--warning-500, #f59e0b);
  --chart-4: var(--secondary-500, #8b5cf6);
  --chart-5: var(--negative-500, #ef4444);
  /* Engagement level colors */
  --chart-engagement-high: var(--positive-500, #10b981);
  --chart-engagement-medium: var(--warning-500, #f59e0b);
  --chart-engagement-low: var(--negative-500, #ef4444);
  /* Device type colors */
  --chart-device-desktop: var(--primary-500, #0900ff);
  --chart-device-mobile: var(--positive-500, #10b981);
  --chart-device-tablet: var(--warning-500, #f59e0b);
  /* Section attention colors */
  --chart-section-high: var(--positive-500, #10b981);
  --chart-section-medium: var(--warning-400, #fbbf24);
  --chart-section-low: var(--neutral-400, #9ca3af);
  /* Chart backgrounds & borders */
  --chart-background: var(--pure-white, #ffffff);
  --chart-grid: var(--neutral-200, #e5e7eb);
  --chart-axis: var(--neutral-600, #4b5563);
  --chart-tooltip-bg: var(--neutral-900, #111827);
  --chart-tooltip-text: var(--pure-white, #ffffff);
}

/* Dark theme chart colors */
[data-theme=dark] {
  --chart-background: var(--neutral-800, #1f2937);
  --chart-grid: var(--neutral-700, #374151);
  --chart-axis: var(--neutral-400, #9ca3af);
  --chart-tooltip-bg: var(--neutral-100, #f3f4f6);
  --chart-tooltip-text: var(--neutral-900, #111827);
}

._deviceCards_a1tpk_51 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

._header_a1tpk_58 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

._title_a1tpk_66 {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
}

._totalCount_a1tpk_73 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600, #4b5563);
  padding: 4px 10px;
  background: var(--neutral-100, #f3f4f6);
  border-radius: 12px;
}

._cardsContainer_a1tpk_82 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
@media (max-width: 768px) {
  ._cardsContainer_a1tpk_82 {
    grid-template-columns: 1fr;
  }
}

._deviceCard_a1tpk_51 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid var(--neutral-200, #e5e7eb);
  background: var(--pure-white, #ffffff);
  transition: all 0.2s;
}
._deviceCard_a1tpk_51:hover {
  border-color: var(--neutral-300, #d1d5db);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
._deviceCard_a1tpk_51._high_a1tpk_107 {
  border-left: 4px solid var(--chart-engagement-high, #10b981);
}
._deviceCard_a1tpk_51._medium_a1tpk_110 {
  border-left: 4px solid var(--chart-engagement-medium, #f59e0b);
}
._deviceCard_a1tpk_51._low_a1tpk_113 {
  border-left: 4px solid var(--chart-engagement-low, #ef4444);
}

._deviceHeader_a1tpk_117 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._deviceIcon_a1tpk_123 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--neutral-100, #f3f4f6);
  border-radius: 8px;
  color: var(--neutral-700, #374151);
  flex-shrink: 0;
}

._deviceInfo_a1tpk_135 {
  flex: 1;
}

._deviceLabel_a1tpk_139 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin-bottom: 2px;
}

._deviceCount_a1tpk_146 {
  font-size: 13px;
  color: var(--neutral-600, #4b5563);
}

._deviceMetrics_a1tpk_151 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 0;
}
@media (max-width: 480px) {
  ._deviceMetrics_a1tpk_151 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

._metric_a1tpk_164 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._metricValue_a1tpk_170 {
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  line-height: 1;
}

._metricLabel_a1tpk_177 {
  font-size: 12px;
  color: var(--neutral-600, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._progressBar_a1tpk_184 {
  height: 6px;
  background: var(--neutral-100, #f3f4f6);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

._progressFill_a1tpk_192 {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500, #0900ff), var(--primary-400, #3a33ff));
  border-radius: 3px;
  transition: width 0.6s ease;
}

._summary_a1tpk_199 {
  padding: 12px;
  background: var(--neutral-50, #f9fafb);
  border-radius: 6px;
  text-align: center;
}
._summary_a1tpk_199 p {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-700, #374151);
}
._summary_a1tpk_199 p strong {
  color: var(--neutral-900, #111827);
  font-weight: 600;
}/**
 * F1: Viewer Identity & Data Quality - DataQualityBadge Styles
 */
._badge_l3dzs_4 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: help;
  transition: opacity 0.15s ease;
}
._badge_l3dzs_4:hover {
  opacity: 0.9;
}

._high_l3dzs_19 {
  background-color: rgba(34, 197, 94, 0.15);
  color: rgb(22, 163, 74);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

._medium_l3dzs_25 {
  background-color: rgba(245, 158, 11, 0.15);
  color: rgb(180, 83, 9);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

._limited_l3dzs_31 {
  background-color: rgba(107, 114, 128, 0.15);
  color: rgb(75, 85, 99);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

._tooltip_l3dzs_37 {
  max-width: 220px;
  font-size: 0.8125rem;
  line-height: 1.5;
}
._tooltip_l3dzs_37 p {
  margin: 0;
}._businessSummaryCard_1en43_1 {
  background: var(--pure-white);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--neutral-100);
  margin-bottom: 0;
}

._header_1en43_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
}
@media (max-width: 600px) {
  ._header_1en43_9 {
    flex-wrap: wrap;
  }
}

._clientBlock_1en43_24 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

._clientAvatar_1en43_32 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--neutral-100, #e8e7e6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-600, #57534e);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

._clientInfo_1en43_48 {
  min-width: 0;
  flex: 1;
}

._clientNameRow_1en43_53 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

._clientName_1en43_53 {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900, #31261a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

._clientCompany_1en43_71 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-400, #a8a29e);
  white-space: nowrap;
}

._documentTitle_1en43_78 {
  font-size: 13px;
  color: var(--neutral-400, #a8a29e);
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._headerRight_1en43_88 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._dataQualityBadge_1en43_95 {
  flex-shrink: 0;
}

._signalPill_1en43_99 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
._signalPill_1en43_99[data-signal=strong] {
  background: var(--positive-50, #f0fdf4);
  color: var(--positive-700, #15803d);
}
._signalPill_1en43_99[data-signal=strong] ._signalPillDot_1en43_113 {
  background: var(--positive-500, #22c55e);
}
._signalPill_1en43_99[data-signal=medium] {
  background: var(--warning-50, #fffbeb);
  color: var(--warning-700, #a16207);
}
._signalPill_1en43_99[data-signal=medium] ._signalPillDot_1en43_113 {
  background: var(--warning-400, #fbbf24);
}
._signalPill_1en43_99[data-signal=weak] {
  background: var(--negative-50, #fef2f2);
  color: var(--negative-700, #b91c1c);
}
._signalPill_1en43_99[data-signal=weak] ._signalPillDot_1en43_113 {
  background: var(--negative-400, #f87171);
}

._signalPillDot_1en43_113 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

._signalPillText_1en43_138 {
  line-height: 1;
}

._viewLink_1en43_142 {
  color: var(--primary-500, #3b82f6);
  text-decoration: none;
  font-weight: 600;
}
._viewLink_1en43_142:hover {
  text-decoration: underline;
}

._engagementOverview_1en43_151 {
  margin-bottom: 20px;
}

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

._engagementCard_1en43_161 {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  border: 1px solid var(--neutral-100, #e8e7e6);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  ._engagementCard_1en43_161 {
    grid-template-columns: 1fr;
  }
}

._engagementLeft_1en43_176 {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 1px solid var(--neutral-100, #e8e7e6);
}
@media (max-width: 800px) {
  ._engagementLeft_1en43_176 {
    border-right: none;
    border-bottom: 1px solid var(--neutral-100, #e8e7e6);
    padding: 20px;
  }
}

._engagementRight_1en43_191 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: var(--neutral-50, #f8f8f7);
}
@media (max-width: 800px) {
  ._engagementRight_1en43_191 {
    padding: 20px;
  }
}

._scoreEyebrow_1en43_204 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neutral-500, #766e66);
  margin-bottom: 8px;
}

._eyebrowDot_1en43_216 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
._eyebrowDot_1en43_216[data-signal=strong] {
  background: var(--positive-500, #22c55e);
}
._eyebrowDot_1en43_216[data-signal=medium] {
  background: var(--warning-400, #fbbf24);
}
._eyebrowDot_1en43_216[data-signal=weak] {
  background: var(--negative-400, #f87171);
}

._bigScoreRow_1en43_232 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  line-height: 1;
}

._bigScoreNumber_1en43_240 {
  font-size: clamp(64px, 10vw, 88px);
  font-weight: 800;
  color: var(--neutral-900, #31261a);
  letter-spacing: -0.03em;
  line-height: 1;
}

._bigScoreOf_1en43_248 {
  font-size: 20px;
  font-weight: 500;
  color: var(--neutral-400, #a8a29e);
  letter-spacing: 0;
}

._signalSummary_1en43_255 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}
._signalSummary_1en43_255[data-signal=strong] ._signalSummaryLabel_1en43_264 {
  color: var(--positive-600, #16a34a);
}
._signalSummary_1en43_255[data-signal=medium] ._signalSummaryLabel_1en43_264 {
  color: var(--warning-600, #d97706);
}
._signalSummary_1en43_255[data-signal=weak] ._signalSummaryLabel_1en43_264 {
  color: var(--negative-500, #ef4444);
}

._signalSummaryLabel_1en43_264 {
  font-weight: 700;
}

._signalSummarySep_1en43_278 {
  color: var(--neutral-300, #d4cfc9);
  margin: 0 2px;
}

._signalSummaryBehavior_1en43_283 {
  color: var(--neutral-500, #766e66);
}

._engagementDesc_1en43_287 {
  font-size: 13px;
  line-height: 1.6;
  color: var(--neutral-500, #766e66);
  margin: 0 0 20px 0;
}
._engagementDesc_1en43_287 strong {
  color: var(--neutral-700, #57534e);
  font-weight: 600;
}

._quickStats_1en43_298 {
  display: flex;
  gap: 24px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-100, #e8e7e6);
  flex-wrap: wrap;
}

._quickStat_1en43_298 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._quickStatLabel_1en43_313 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-400, #a8a29e);
}

._quickStatValue_1en43_321 {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-800, #292524);
}

._scaleLabels_1en43_327 {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

._scaleLabel_1en43_327 {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-400, #9ca3af);
}
._scaleLabel_1en43_327:nth-child(2), ._scaleLabel_1en43_327:nth-child(3) {
  position: relative;
}
._scaleLabel_1en43_327:nth-child(2)::before, ._scaleLabel_1en43_327:nth-child(3)::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--neutral-300, #d1d5db);
}

._calculationInfo_1en43_352 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}

._infoLabel_1en43_361 {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-400, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._infoText_1en43_369 {
  font-size: 11px;
  color: var(--neutral-500, #6b7280);
  line-height: 1.4;
}

._aiSection_1en43_375 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  text-align: center;
}

._analyzeButton_1en43_382 {
  background: var(--gradient-ai-mono-diagonal);
  color: var(--pure-white);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
._analyzeButton_1en43_382:hover:not(:disabled) {
  opacity: 0.9;
}
._analyzeButton_1en43_382:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._aiDescription_1en43_404 {
  margin-top: 8px;
  font-size: 13px;
  color: var(--neutral-500, #6b7280);
  font-style: italic;
}

._aiInsightsContainer_1en43_411 {
  margin-top: 24px;
  animation: _fadeIn_1en43_1 0.3s ease-in;
}

@keyframes _fadeIn_1en43_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  ._businessSummaryCard_1en43_1 {
    padding: 16px;
    margin-bottom: 16px;
  }
  ._clientName_1en43_53 {
    font-size: 20px;
  }
  ._overviewTitle_1en43_434 {
    font-size: 15px;
  }
  ._metricCard_1en43_437 {
    padding: 14px;
  }
  ._metricCard_1en43_437._compact_1en43_440 {
    padding: 10px;
  }
  ._metricValue_1en43_443 {
    font-size: 20px;
  }
  ._compact_1en43_440 ._metricValue_1en43_443 {
    font-size: 16px;
  }
  ._analyzeButton_1en43_382 {
    width: 100%;
    justify-content: center;
  }
}
/* ===== Reading Analysis - Full Width Panel ===== */
._readingAnalysisFullWidth_1en43_455 {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--neutral-100, #e8e7e6);
}

._analysisHeader_1en43_461 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

._analysisEyebrow_1en43_469 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neutral-600, #57534e);
  white-space: nowrap;
}

._analysisSubtitle_1en43_478 {
  font-size: 12px;
  color: var(--neutral-400, #a8a29e);
  font-weight: 400;
}

/* Large time comparison blocks */
._timeComparison_1en43_485 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 20px;
  background: var(--neutral-50, #f8f8f7);
  border: 1px solid var(--neutral-100, #e8e7e6);
  border-radius: 10px;
  overflow: hidden;
}

._timeBlock_1en43_497 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._timeLabel_1en43_504 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-400, #a8a29e);
  margin-bottom: 2px;
}

._timeValueLarge_1en43_513 {
  font-size: 32px;
  font-weight: 700;
  color: var(--neutral-900, #31261a);
  line-height: 1;
}
._timeValueLarge_1en43_513[data-level=low] {
  color: var(--warning-600, #d97706);
}
._timeValueLarge_1en43_513[data-level=medium] {
  color: var(--warning-500, #f59e0b);
}
._timeValueLarge_1en43_513[data-level=high] {
  color: var(--positive-600, #16a34a);
}
@media (max-width: 480px) {
  ._timeValueLarge_1en43_513 {
    font-size: 24px;
  }
}

._timeContext_1en43_534 {
  font-size: 12px;
  color: var(--neutral-400, #a8a29e);
  font-weight: 500;
}

._timeDivider_1en43_540 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  gap: 0;
}

._dividerLine_1en43_549 {
  width: 1px;
  flex: 1;
  background: var(--neutral-100, #e8e7e6);
}

._vsIndicator_1en43_555 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200, #d4cfc9);
  color: var(--neutral-500, #766e66);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  margin: 6px 0;
}

/* Reading depth slider bar */
._depthSection_1en43_573 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

._depthHeader_1en43_580 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._depthTitle_1en43_587 {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-500, #766e66);
}

._readingDepthBadge_1en43_593 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
._readingDepthBadge_1en43_593[data-level=high] {
  background: var(--positive-50, #f0fdf4);
  color: var(--positive-700, #15803d);
}
._readingDepthBadge_1en43_593[data-level=medium] {
  background: var(--warning-50, #fffbeb);
  color: var(--warning-700, #a16207);
}
._readingDepthBadge_1en43_593[data-level=low] {
  background: var(--negative-50, #fef2f2);
  color: var(--negative-700, #b91c1c);
}

._depthTrack_1en43_617 {
  position: relative;
  height: 6px;
  background: var(--neutral-100, #e8e7e6);
  border-radius: 4px;
  overflow: visible;
}

._depthFill_1en43_625 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.45s ease-out;
}
._depthFill_1en43_625::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  border: 2px solid var(--pure-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
._depthFill_1en43_625[data-level=high] {
  background: var(--positive-500, #22c55e);
}
._depthFill_1en43_625[data-level=medium] {
  background: var(--warning-400, #fbbf24);
}
._depthFill_1en43_625[data-level=low] {
  background: var(--warning-500, #f59e0b);
}

._depthLegend_1en43_656 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 10px;
  font-weight: 500;
  color: var(--neutral-400, #a8a29e);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._depthLegend_1en43_656 span:nth-child(2) {
  text-align: center;
}
._depthLegend_1en43_656 span:nth-child(3) {
  text-align: right;
}

/* Inline stats row */
._inlineStats_1en43_673 {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--neutral-50, #f8f8f7);
  border: 1px solid var(--neutral-100, #e8e7e6);
  border-radius: 8px;
}

._inlineStat_1en43_673 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._inlineStatIcon_1en43_692 {
  color: var(--neutral-400, #a8a29e);
  flex-shrink: 0;
}

._inlineStatValue_1en43_697 {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900, #31261a);
  line-height: 1.1;
}

._inlineStatLabel_1en43_704 {
  font-size: 11px;
  color: var(--neutral-400, #a8a29e);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._inlineStatDivider_1en43_713 {
  width: 1px;
  height: 32px;
  background: var(--neutral-100, #e8e7e6);
  margin: 0 16px;
  flex-shrink: 0;
}

/* Quick interpretation callout */
._quickInterpretation_1en43_722 {
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid;
}
._quickInterpretation_1en43_722[data-signal=strong] {
  background: var(--positive-50, #f0fdf4);
  border-color: var(--positive-100, #dcfce7);
}
._quickInterpretation_1en43_722[data-signal=strong] ._qiContent_1en43_731 strong {
  color: var(--positive-700, #15803d);
}
._quickInterpretation_1en43_722[data-signal=medium] {
  background: var(--warning-50, #fffbeb);
  border-color: var(--warning-100, #fef3c7);
}
._quickInterpretation_1en43_722[data-signal=medium] ._qiContent_1en43_731 strong {
  color: var(--warning-700, #a16207);
}
._quickInterpretation_1en43_722[data-signal=weak] {
  background: var(--negative-50, #fef2f2);
  border-color: var(--negative-100, #fee2e2);
}
._quickInterpretation_1en43_722[data-signal=weak] ._qiContent_1en43_731 strong {
  color: var(--negative-700, #b91c1c);
}

._qiEyebrow_1en43_749 {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-400, #a8a29e);
  margin-bottom: 6px;
}

._qiContent_1en43_731 {
  font-size: 13px;
  line-height: 1.55;
  color: var(--neutral-600, #57534e);
}
._qiContent_1en43_731 p {
  margin: 0 0 8px 0;
}
._qiContent_1en43_731 p:last-child {
  margin-bottom: 0;
}
._qiContent_1en43_731 strong {
  font-weight: 600;
}._recommendedActionsPanel_1w8d3_1 {
  background: var(--pure-white);
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid var(--neutral-100);
  margin-bottom: 0;
}

._header_1w8d3_9 {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
}

._title_1w8d3_15 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neutral-500, #766e66);
  margin: 0 0 4px 0;
}
._title_1w8d3_15 svg {
  color: var(--neutral-400, #a8a29e);
  flex-shrink: 0;
}

._subtitle_1w8d3_31 {
  font-size: 12px;
  color: var(--neutral-400, #a8a29e);
  margin: 0;
  line-height: 1.4;
}

._actionsList_1w8d3_38 {
  display: flex;
  flex-direction: column;
}

._action_1w8d3_38 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
  background: transparent;
}
._action_1w8d3_38:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
._action_1w8d3_38:first-child {
  padding-top: 0;
}

._actionUrgent_1w8d3_59,
._actionHigh_1w8d3_60,
._actionMedium_1w8d3_61,
._actionLow_1w8d3_62 {
  background: transparent;
  border: none;
}

._actionRank_1w8d3_67 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--neutral-100, #e8e7e6);
  color: var(--neutral-600, #57534e);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

._actionContent_1w8d3_83 {
  flex: 1;
  min-width: 0;
}

._actionHeader_1w8d3_88 {
  margin-bottom: 4px;
}

._actionTitle_1w8d3_92 {
  display: flex;
  align-items: center;
  gap: 7px;
}
._actionTitle_1w8d3_92 h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-800, #292524);
  margin: 0;
  line-height: 1.3;
}
._actionTitle_1w8d3_92 svg {
  color: var(--neutral-400, #a8a29e);
  flex-shrink: 0;
}

._actionDescription_1w8d3_109 {
  display: none;
}

._actionMeta_1w8d3_113 {
  display: none;
}

._timing_1w8d3_117 {
  display: none;
}

._talkingPoints_1w8d3_121 {
  display: none;
}

._talkingPointsTitle_1w8d3_125 {
  display: none;
}

._talkingPointsList_1w8d3_129 {
  display: none;
}

._reasoning_1w8d3_133 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--neutral-400, #a8a29e);
  margin-top: 2px;
}

._emptyState_1w8d3_140 {
  text-align: center;
  padding: 40px 24px;
  color: var(--neutral-500, #6b7280);
}

._emptyIcon_1w8d3_146 {
  color: var(--neutral-300, #d1d5db);
  margin-bottom: 16px;
}

._emptyState_1w8d3_140 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
  margin: 0 0 8px 0;
}

._emptyState_1w8d3_140 p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

._aiActionButton_1w8d3_164 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-top: 12px;
  background: var(--primary-500, #8b5cf6);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s;
}
._aiActionButton_1w8d3_164 svg {
  flex-shrink: 0;
}
._aiActionButton_1w8d3_164:hover:not(:disabled) {
  opacity: 0.9;
}
._aiActionButton_1w8d3_164:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modal_1w8d3_190 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

._modalOverlay_1w8d3_203 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

._modalContent_1w8d3_213 {
  position: relative;
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: _modalSlideIn_1w8d3_1 0.2s ease-out;
}
@keyframes _modalSlideIn_1w8d3_1 {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._modalHeader_1w8d3_236 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

._modalTitle_1w8d3_244 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._modalTitle_1w8d3_244 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
}
._modalTitle_1w8d3_244 svg {
  color: var(--primary-500, #8b5cf6);
}

._closeButton_1w8d3_259 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--neutral-500, #6b7280);
}

._modalBody_1w8d3_272 {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

._contextInfo_1w8d3_278 {
  font-size: 13px;
  color: var(--neutral-500, #6b7280);
  margin-bottom: 16px;
  padding: 12px;
  background: var(--neutral-50, #f9fafb);
  border-radius: 8px;
}
._contextInfo_1w8d3_278 strong {
  color: var(--neutral-600, #4b5563);
  font-weight: 600;
}

._loading_1w8d3_291 {
  text-align: center;
  padding: 60px 24px;
  color: var(--neutral-500, #6b7280);
}
._loading_1w8d3_291 p {
  margin: 16px 0 0 0;
  font-size: 14px;
}

._loadingIcon_1w8d3_301 {
  color: var(--primary-500, #8b5cf6);
  animation: _spin_1w8d3_1 2s linear infinite;
}
@keyframes _spin_1w8d3_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

._aiContentSection_1w8d3_314 {
  margin-top: 16px;
}

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

._label_1w8d3_325 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
}

._copyButton_1w8d3_332 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600, #4b5563);
  cursor: pointer;
}
._copyButton_1w8d3_332:disabled {
  background: var(--positive-500, #22c55e);
  border-color: var(--positive-500, #22c55e);
  color: white;
  cursor: default;
}

._aiContent_1w8d3_314 {
  font-size: 14px;
  color: var(--neutral-900, #111827);
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

._modalFooter_1w8d3_366 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}

._closeFooterButton_1w8d3_374 {
  padding: 12px 16px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500, #6b7280);
  cursor: pointer;
}

@media (max-width: 768px) {
  ._recommendedActionsPanel_1w8d3_1 {
    padding: 16px;
  }
}._aiActionsHistory_2duhg_1 {
  background: var(--pure-white);
  border-radius: 12px;
  border: 1px solid var(--neutral-100);
  overflow: hidden;
}

._headerRow_2duhg_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
  user-select: none;
}
._headerRow_2duhg_8:hover {
  background: var(--neutral-50);
}

._header_2duhg_8 {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._count_2duhg_33 {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  text-transform: none;
  letter-spacing: 0;
}

._emptyState_2duhg_41 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  gap: 8px;
}
._emptyState_2duhg_41 ._emptyIcon_2duhg_50 {
  color: var(--neutral-300);
}
._emptyState_2duhg_41 p {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  margin: 0;
}
._emptyState_2duhg_41 span {
  font-size: 12px;
  color: var(--neutral-500);
}

._actionsList_2duhg_64 {
  display: flex;
  flex-direction: column;
}

._actionItem_2duhg_69 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
  transition: background 150ms ease;
}
._actionItem_2duhg_69:last-child {
  border-bottom: none;
}
._actionItem_2duhg_69:hover {
  background: var(--neutral-50);
}

._actionIconWrap_2duhg_85 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--neutral-100);
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--neutral-600);
  margin-top: 1px;
}

._actionIcon_2duhg_85 {
  color: var(--neutral-600);
}

._actionBody_2duhg_102 {
  flex: 1;
  min-width: 0;
}

._actionHeader_2duhg_107 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

._actionTypeInfo_2duhg_115 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

._actionLabel_2duhg_122 {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._timestamp_2duhg_133 {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  flex-shrink: 0;
}

._actionMeta_2duhg_140 {
  margin-bottom: 2px;
}

._userName_2duhg_144 {
  font-size: 11px;
  color: var(--neutral-500);
}

._actionPreview_2duhg_149 {
  font-size: 12px;
  color: var(--neutral-700);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

._versionSelector_2duhg_160 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
._versionSelector_2duhg_160 label {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
}
._versionSelector_2duhg_160 select {
  padding: 3px 6px;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  font-size: 11px;
  color: var(--neutral-700);
  cursor: pointer;
}
._versionSelector_2duhg_160 select:focus {
  outline: none;
  border-color: var(--primary-500);
}

._expandButton_2duhg_185 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--neutral-100);
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: background 150ms ease;
}
._expandButton_2duhg_185:hover {
  background: var(--neutral-50);
  color: var(--neutral-800);
}
._expandButton_2duhg_185 svg {
  flex-shrink: 0;
}

[data-theme=dark] ._aiActionsHistory_2duhg_1 {
  background: var(--neutral-800);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._headerRow_2duhg_8 {
  border-bottom-color: var(--neutral-700);
}
[data-theme=dark] ._headerRow_2duhg_8:hover {
  background: var(--neutral-700);
}
[data-theme=dark] ._actionItem_2duhg_69 {
  border-bottom-color: var(--neutral-700);
}
[data-theme=dark] ._actionItem_2duhg_69:hover {
  background: var(--neutral-700);
}
[data-theme=dark] ._actionIconWrap_2duhg_85 {
  background: var(--neutral-700);
  color: var(--neutral-400);
}
[data-theme=dark] ._actionLabel_2duhg_122 {
  color: var(--neutral-100);
}
[data-theme=dark] ._actionPreview_2duhg_149 {
  color: var(--neutral-300);
}
[data-theme=dark] ._expandButton_2duhg_185 {
  border-top-color: var(--neutral-700);
}
[data-theme=dark] ._expandButton_2duhg_185:hover {
  background: var(--neutral-700);
}._overlay_12es5_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: _fadeIn_12es5_1 0.2s ease;
}

@keyframes _fadeIn_12es5_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._dialog_12es5_24 {
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: _slideUp_12es5_1 0.3s ease;
}

@keyframes _slideUp_12es5_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
._dialogHeader_12es5_46 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

._headerInfo_12es5_54 {
  flex: 1;
}

._title_12es5_58 {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

._versionBadge_12es5_68 {
  padding: 4px 10px;
  background: var(--primary-100, #dbeafe);
  border: 1px solid var(--primary-200, #bfdbfe);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-700, #1d4ed8);
}

._versionSwitcher_12es5_78 {
  padding: 6px 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--primary-300, #93c5fd);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-700, #1d4ed8);
  cursor: pointer;
  transition: all 0.2s ease;
}
._versionSwitcher_12es5_78:hover {
  border-color: var(--primary-400, #60a5fa);
  background: var(--primary-50, #eff6ff);
}
._versionSwitcher_12es5_78:focus {
  outline: none;
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._meta_12es5_99 {
  font-size: 14px;
  color: var(--neutral-600, #4b5563);
}

._closeButton_12es5_104 {
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--neutral-500, #6b7280);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._closeButton_12es5_104:hover {
  background: var(--neutral-100, #f3f4f6);
  color: var(--neutral-700, #374151);
}

._dialogBody_12es5_119 {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

._loadingState_12es5_125 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
._loadingState_12es5_125 ._spinner_12es5_133 {
  animation: _spin_12es5_133 1s linear infinite;
  color: var(--primary-500, #3b82f6);
  margin-bottom: 16px;
}
._loadingState_12es5_125 p {
  font-size: 14px;
  color: var(--neutral-600, #4b5563);
  margin: 0;
}

@keyframes _spin_12es5_133 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._errorState_12es5_152 {
  text-align: center;
  padding: 48px 24px;
}
._errorState_12es5_152 p {
  font-size: 16px;
  font-weight: 600;
  color: var(--negative-700, #b91c1c);
  margin: 0 0 8px 0;
}
._errorState_12es5_152 span {
  font-size: 14px;
  color: var(--neutral-600, #4b5563);
}

._customInstructions_12es5_167 {
  padding: 16px;
  background: var(--neutral-50, #f9fafb);
  border-left: 3px solid var(--primary-500, #3b82f6);
  border-radius: 6px;
  font-size: 14px;
  color: var(--neutral-700, #374151);
  margin-bottom: 24px;
}
._customInstructions_12es5_167 strong {
  color: var(--neutral-900, #111827);
}

._markdownContent_12es5_180 {
  font-size: 15px;
  line-height: 1.7;
  color: var(--neutral-800, #1f2937);
}
._markdownContent_12es5_180 ._mdH1_12es5_185 {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--neutral-200, #e5e7eb);
}
._markdownContent_12es5_180 ._mdH2_12es5_193 {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 24px 0 12px 0;
}
._markdownContent_12es5_180 ._mdH3_12es5_199 {
  font-size: 17px;
  font-weight: 600;
  color: var(--neutral-800, #1f2937);
  margin: 20px 0 10px 0;
}
._markdownContent_12es5_180 ._mdParagraph_12es5_205 {
  margin: 0 0 16px 0;
  color: var(--neutral-700, #374151);
}
._markdownContent_12es5_180 ._mdUl_12es5_209,
._markdownContent_12es5_180 ._mdOl_12es5_210 {
  margin: 0 0 16px 0;
  padding-left: 24px;
}
._markdownContent_12es5_180 ._mdLi_12es5_214 {
  margin-bottom: 8px;
  color: var(--neutral-700, #374151);
}
._markdownContent_12es5_180 ._mdStrong_12es5_218 {
  font-weight: 600;
  color: var(--neutral-900, #111827);
}
._markdownContent_12es5_180 ._mdEm_12es5_222 {
  font-style: italic;
  color: var(--neutral-700, #374151);
}
._markdownContent_12es5_180 ._mdCode_12es5_226 {
  padding: 2px 6px;
  background: var(--neutral-100, #f3f4f6);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 4px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 13px;
  color: var(--negative-700, #b91c1c);
}
._markdownContent_12es5_180 ._mdBlockquote_12es5_235 {
  margin: 16px 0;
  padding: 12px 20px;
  background: var(--neutral-50, #f9fafb);
  border-left: 4px solid var(--primary-500, #3b82f6);
  border-radius: 4px;
  color: var(--neutral-700, #374151);
  font-style: italic;
}

._dialogFooter_12es5_245 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  background: var(--neutral-50, #f9fafb);
  border-radius: 0 0 12px 12px;
}

._footerInfo_12es5_255 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--neutral-600, #4b5563);
}

._tokensInfo_12es5_263,
._versionsInfo_12es5_264 {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

._actionButton_12es5_276 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-300, #d1d5db);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-700, #374151);
  cursor: pointer;
  transition: all 0.2s ease;
}
._actionButton_12es5_276:hover:not(:disabled) {
  background: var(--neutral-50, #f9fafb);
  border-color: var(--neutral-400, #9ca3af);
}
._actionButton_12es5_276:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._actionButton_12es5_276 svg {
  color: var(--neutral-500, #6b7280);
}

._deleteButton_12es5_302 {
  border-color: var(--negative-300, #fca5a5);
  color: var(--negative-700, #b91c1c);
}
._deleteButton_12es5_302:hover:not(:disabled) {
  background: var(--negative-50, #fef2f2);
  border-color: var(--negative-400, #f87171);
}
._deleteButton_12es5_302 svg {
  color: var(--negative-600, #dc2626);
}

._deleteConfirm_12es5_314 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--negative-50, #fef2f2);
  border: 1px solid var(--negative-300, #fca5a5);
  border-radius: 6px;
}
._deleteConfirm_12es5_314 span {
  font-size: 13px;
  font-weight: 500;
  color: var(--negative-700, #b91c1c);
}
._deleteConfirm_12es5_314 ._actionButton_12es5_276 {
  padding: 6px 12px;
  font-size: 13px;
}

._confirmDelete_12es5_333 {
  background: var(--negative-600, #dc2626);
  border-color: var(--negative-600, #dc2626);
  color: var(--pure-white, #ffffff);
}
._confirmDelete_12es5_333:hover:not(:disabled) {
  background: var(--negative-700, #b91c1c);
  border-color: var(--negative-700, #b91c1c);
}
._confirmDelete_12es5_333 svg {
  color: var(--pure-white, #ffffff);
}

@media (max-width: 640px) {
  ._dialog_12es5_24 {
    max-height: 95vh;
    margin: 10px;
  }
  ._dialogHeader_12es5_46 {
    padding: 16px;
  }
  ._title_12es5_58 {
    font-size: 18px;
  }
  ._dialogBody_12es5_119 {
    padding: 16px;
  }
  ._dialogFooter_12es5_245 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  ._actions_12es5_270 {
    width: 100%;
    justify-content: flex-end;
  }
}._aiActionsPanel_heijt_1 {
  background: var(--pure-white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--neutral-200);
  margin-bottom: 0;
}

._aiActionsRail_heijt_10 {
  background: var(--pure-white);
  border-radius: 12px;
  border: 1px solid var(--neutral-100);
  overflow: hidden;
}
._aiActionsRail_heijt_10 ._header_heijt_16 {
  padding: 16px 16px 0;
  margin-bottom: 8px;
}
._aiActionsRail_heijt_10 ._title_heijt_20 {
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
}
._aiActionsRail_heijt_10 ._title_heijt_20 svg {
  color: var(--neutral-700);
}
._aiActionsRail_heijt_10 ._subtitle_heijt_28 {
  font-size: 12px;
}
._aiActionsRail_heijt_10 ._disclaimer_heijt_31 {
  margin: 0 16px 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--neutral-100);
  padding: 8px 0 8px;
  font-size: 11px;
}
._aiActionsRail_heijt_10 ._lowDataWarning_heijt_39,
._aiActionsRail_heijt_10 ._lowConfidenceNotice_heijt_40 {
  margin: 0 16px 0;
  border-radius: 0;
}

._actionsList_heijt_45 {
  display: flex;
  flex-direction: column;
}

._actionRow_heijt_50 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 150ms ease, transform 150ms ease;
}
._actionRow_heijt_50:last-child {
  border-bottom: none;
}
._actionRow_heijt_50:hover:not(:disabled) {
  background: var(--neutral-50);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
._actionRow_heijt_50:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  ._actionRow_heijt_50 {
    transition: none;
  }
}

._actionRowIcon_heijt_81 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--neutral-100);
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--neutral-700);
}

._actionRowContent_heijt_93 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._actionRowLabel_heijt_101 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._actionRowDesc_heijt_110 {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._actionRowChevron_heijt_118 {
  flex-shrink: 0;
  color: var(--neutral-400);
}

._header_heijt_16 {
  margin-bottom: 16px;
}

._title_heijt_20 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0 0 8px 0;
}
._title_heijt_20 svg {
  color: var(--primary-500, #8b5cf6);
}

._subtitle_heijt_28 {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin: 0;
  line-height: 1.4;
}

/* F4: AI Disclaimer Notice */
._disclaimer_heijt_31 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--neutral-200, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--neutral-500, #64748b);
  line-height: 1.4;
}
._disclaimer_heijt_31 svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--neutral-400, #94a3b8);
}

/* F4: Low Data Warning */
._lowDataWarning_heijt_39 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--warning-50, #fffbeb);
  border: 1px solid var(--warning-200, #fde68a);
  border-radius: 8px;
  margin-bottom: 16px;
}
._lowDataWarning_heijt_39 svg {
  flex-shrink: 0;
  color: var(--warning-600, #d97706);
  margin-top: 2px;
}

._warningTitle_heijt_184 {
  font-size: 13px;
  font-weight: 600;
  color: var(--warning-800, #92400e);
  margin: 0 0 4px 0;
}

._warningMessage_heijt_191 {
  font-size: 12px;
  color: var(--warning-700, #a16207);
  margin: 0;
  line-height: 1.4;
}

/* F4: Low Confidence Notice */
._lowConfidenceNotice_heijt_40 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--primary-50, #eff6ff);
  border: 1px solid var(--primary-200, #bfdbfe);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--primary-800, #1e40af);
  line-height: 1.4;
}
._lowConfidenceNotice_heijt_40 svg {
  flex-shrink: 0;
  color: var(--primary-500, #3b82f6);
}

/* F4: Sanitization Notice */
._sanitizedNotice_heijt_218 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--positive-50, #f0fdf4);
  border: 1px solid var(--positive-200, #bbf7d0);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--positive-700, #15803d);
}
._sanitizedNotice_heijt_218 svg {
  flex-shrink: 0;
  color: var(--positive-500, #22c55e);
}

._actionsGrid_heijt_235 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  ._actionsGrid_heijt_235 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  ._actionsGrid_heijt_235 {
    grid-template-columns: 1fr;
  }
}

._actionButton_heijt_251 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
._actionButton_heijt_251:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._actionIcon_heijt_267 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--primary-500, #8b5cf6);
  border-radius: 8px;
  flex-shrink: 0;
}
._actionIcon_heijt_267 svg {
  color: white;
}

._actionContent_heijt_281 {
  flex: 1;
  min-width: 0;
}

._actionLabel_heijt_286 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

._actionDescription_heijt_294 {
  font-size: 12px;
  color: var(--neutral-500, #6b7280);
  margin: 0;
  line-height: 1.4;
}

/* Modal Styles */
._modal_heijt_302 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

._modalOverlay_heijt_315 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

._modalContent_heijt_325 {
  position: relative;
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: _modalSlideIn_heijt_1 0.2s ease-out;
}
@keyframes _modalSlideIn_heijt_1 {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._modalHeader_heijt_348 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

._modalTitle_heijt_356 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._modalTitle_heijt_356 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
}
._modalTitle_heijt_356 svg {
  color: var(--primary-500, #8b5cf6);
}

._closeButton_heijt_371 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--neutral-500, #6b7280);
}

._modalBody_heijt_384 {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

._modalDescription_heijt_390 {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

._instructionsSection_heijt_397 {
  margin-bottom: 16px;
}

._label_heijt_401 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
  margin-bottom: 8px;
}

._textarea_heijt_409 {
  width: 100%;
  padding: 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900, #111827);
  resize: vertical;
}
._textarea_heijt_409:focus {
  outline: none;
  border-color: var(--primary-500, #8b5cf6);
}
._textarea_heijt_409::placeholder {
  color: var(--neutral-400, #9ca3af);
}
._textarea_heijt_409:disabled {
  background: var(--neutral-50, #f9fafb);
  cursor: not-allowed;
}

._hint_heijt_432 {
  font-size: 12px;
  color: var(--neutral-400, #9ca3af);
  margin: 8px 0 0 0;
  line-height: 1.4;
}

._resultSection_heijt_439 {
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
}

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

._copyButton_heijt_453 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600, #4b5563);
  cursor: pointer;
}
._copyButton_heijt_453:disabled {
  background: var(--positive-500, #22c55e);
  border-color: var(--positive-500, #22c55e);
  color: white;
  cursor: default;
}

._markdownContent_heijt_473 {
  font-size: 14px;
  line-height: 1.7;
  color: var(--neutral-800, #1f2937);
}
._markdownContent_heijt_473 ._mdH1_heijt_478 {
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--neutral-200, #e5e7eb);
}
._markdownContent_heijt_473 ._mdH2_heijt_486 {
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 20px 0 10px 0;
}
._markdownContent_heijt_473 ._mdH3_heijt_492 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-800, #1f2937);
  margin: 16px 0 8px 0;
}
._markdownContent_heijt_473 ._mdParagraph_heijt_498 {
  margin: 0 0 14px 0;
  color: var(--neutral-700, #374151);
}
._markdownContent_heijt_473 ._mdUl_heijt_502,
._markdownContent_heijt_473 ._mdOl_heijt_503 {
  margin: 0 0 14px 0;
  padding-left: 24px;
}
._markdownContent_heijt_473 ._mdLi_heijt_507 {
  margin-bottom: 6px;
  color: var(--neutral-700, #374151);
}
._markdownContent_heijt_473 ._mdStrong_heijt_511 {
  font-weight: 600;
  color: var(--neutral-900, #111827);
}
._markdownContent_heijt_473 ._mdEm_heijt_515 {
  font-style: italic;
  color: var(--neutral-700, #374151);
}
._markdownContent_heijt_473 ._mdCode_heijt_519 {
  padding: 2px 6px;
  background: var(--neutral-100, #f3f4f6);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 4px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 12px;
  color: var(--negative-700, #b91c1c);
}
._markdownContent_heijt_473 ._mdBlockquote_heijt_528 {
  margin: 12px 0;
  padding: 10px 16px;
  background: var(--neutral-50, #f9fafb);
  border-left: 4px solid var(--primary-500, #8b5cf6);
  border-radius: 4px;
  color: var(--neutral-700, #374151);
  font-style: italic;
}
._markdownContent_heijt_473 hr {
  border: none;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  margin: 16px 0;
}

/* Refinement Section - Post-generation iteration UI */
._refinementSection_heijt_544 {
  margin-top: 16px;
}

._refinementDivider_heijt_548 {
  height: 1px;
  background: var(--neutral-200, #e5e7eb);
  margin-bottom: 16px;
}

._refinementInputRow_heijt_554 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

._refinementInput_heijt_554 {
  flex: 1;
  padding: 10px 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--neutral-900, #111827);
  resize: none;
}
._refinementInput_heijt_554:focus {
  outline: none;
  border-color: var(--primary-500, #8b5cf6);
}
._refinementInput_heijt_554::placeholder {
  color: var(--neutral-400, #9ca3af);
}
._refinementInput_heijt_554:disabled {
  background: var(--neutral-50, #f9fafb);
  cursor: not-allowed;
}

._generateVersionButton_heijt_583 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--primary-500, #8b5cf6);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
._generateVersionButton_heijt_583:hover:not(:disabled) {
  opacity: 0.9;
}
._generateVersionButton_heijt_583:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._startOverLink_heijt_607 {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--neutral-400, #9ca3af);
  cursor: pointer;
  text-decoration: underline;
}
._startOverLink_heijt_607:hover:not(:disabled) {
  color: var(--neutral-600, #4b5563);
}
._startOverLink_heijt_607:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._versionBadge_heijt_626 {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--primary-50, #f5f3ff);
  border: 1px solid var(--primary-200, #ddd6fe);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-600, #7c3aed);
}

._modalFooter_heijt_638 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}

._cancelButton_heijt_647 {
  padding: 12px 16px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500, #6b7280);
  cursor: pointer;
}
._cancelButton_heijt_647:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._generateButton_heijt_662 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--primary-500, #8b5cf6);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s;
}
._generateButton_heijt_662:hover:not(:disabled) {
  opacity: 0.9;
}
._generateButton_heijt_662:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  ._aiActionsPanel_heijt_1 {
    padding: 16px;
    margin-bottom: 16px;
  }
  ._modalContent_heijt_325 {
    max-width: 100%;
    max-height: 95vh;
  }
  ._modalHeader_heijt_348,
  ._modalBody_heijt_384,
  ._modalFooter_heijt_638 {
    padding: 16px;
  }
  ._modalTitle_heijt_356 h3 {
    font-size: 16px;
  }
  ._refinementInputRow_heijt_554 {
    flex-direction: column;
  }
  ._generateVersionButton_heijt_583 {
    width: 100%;
    justify-content: center;
  }
}
._sectionBusinessAnalysis_v32d8_2 {
  background: var(--pure-white);
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid var(--neutral-100);
}

/* ─── Card header ─────────────────────────────────────────── */
._cardHeader_v32d8_10 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

._eyebrow_v32d8_18 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--neutral-600, #57534e);
  white-space: nowrap;
}

._headerSubtitle_v32d8_27 {
  font-size: 12px;
  color: var(--neutral-400, #a8a29e);
  font-weight: 400;
  text-align: right;
}

/* ─── Summary chips ───────────────────────────────────────── */
._summaryRow_v32d8_35 {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

._summaryChip_v32d8_42 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--neutral-50, #f8f8f7);
  border: 1px solid var(--neutral-100, #e8e7e6);
  border-radius: 8px;
  min-width: 0;
}

._topChip_v32d8_53 {
  flex: 1;
  min-width: 80px;
}

._chipValue_v32d8_58 {
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900, #31261a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

._chipLabel_v32d8_68 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-400, #a8a29e);
  white-space: nowrap;
}

/* ─── Section rows ────────────────────────────────────────── */
._sectionsList_v32d8_78 {
  display: flex;
  flex-direction: column;
}

._sectionRow_v32d8_83 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
}
._sectionRow_v32d8_83:last-child {
  border-bottom: none;
}

._sectionName_v32d8_94 {
  width: 130px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700, #57534e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

._barTrack_v32d8_106 {
  flex: 1;
  height: 5px;
  background: var(--neutral-100, #e8e7e6);
  border-radius: 3px;
  overflow: hidden;
}

._barFill_v32d8_114 {
  height: 100%;
  background: var(--neutral-600, #766e66);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}

._sectionTime_v32d8_121 {
  min-width: 42px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-700, #57534e);
  white-space: nowrap;
}

._sectionTimeDash_v32d8_130 {
  color: var(--neutral-300, #d4cfc9);
}

/* ─── Empty state ─────────────────────────────────────────── */
._emptyState_v32d8_135 {
  text-align: center;
  padding: 32px 24px;
  color: var(--neutral-400, #a8a29e);
}
._emptyState_v32d8_135 p {
  font-size: 14px;
  margin: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  ._sectionBusinessAnalysis_v32d8_2 {
    padding: 16px;
  }
  ._sectionName_v32d8_94 {
    width: 100px;
  }
}._deviceBreakdown_141m4_1 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

._header_141m4_11 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--neutral-200);
}
._header_141m4_11 h3 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}
._header_141m4_11 ._total_141m4_27 {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
}

._sessionList_141m4_33 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
}
._sessionList_141m4_33::-webkit-scrollbar {
  width: 6px;
}
._sessionList_141m4_33::-webkit-scrollbar-track {
  background: var(--neutral-100);
  border-radius: 3px;
}
._sessionList_141m4_33::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 3px;
}

._sessionCard_141m4_52 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
}

._sessionHeader_141m4_62 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  ._sessionHeader_141m4_62 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

._deviceInfo_141m4_77 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._deviceInfo_141m4_77 ._deviceIcon_141m4_82 {
  color: var(--neutral-600);
  flex-shrink: 0;
}
._deviceInfo_141m4_77 ._deviceType_141m4_86 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
}

._systemInfo_141m4_92 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neutral-700);
}

._osInfo_141m4_100 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

._osIcon_141m4_107 {
  font-size: 14px;
  line-height: 1;
}

._separator_141m4_112 {
  color: var(--neutral-400);
  font-weight: 300;
}

._browserInfo_141m4_117 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

._browserIcon_141m4_124 {
  font-size: 14px;
  line-height: 1;
}

._timeGrid_141m4_129 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._timeRow_141m4_135 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._timeRow_141m4_135 ._timeLabel_141m4_140 {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._timeRow_141m4_135 ._timeValue_141m4_147 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
}

._durationSection_141m4_153 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--neutral-200);
}

._durationInfo_141m4_161 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._durationInfo_141m4_161 ._durationLabel_141m4_166 {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._durationInfo_141m4_161 ._durationValue_141m4_173 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-600);
}

._engagementBar_141m4_179 {
  width: 100%;
  height: 6px;
  background: var(--neutral-200);
  border-radius: 3px;
  overflow: hidden;
}

._engagementFill_141m4_187 {
  height: 100%;
  background: var(--primary-500);
  border-radius: 3px;
  transition: width 0.3s ease;
}

._engagementScore_141m4_194 {
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-600);
  text-align: right;
}

._emptyState_141m4_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-md);
  gap: var(--spacing-sm);
  text-align: center;
}
._emptyState_141m4_201 svg {
  color: var(--neutral-400);
}
._emptyState_141m4_201 p {
  font-size: 14px;
  color: var(--neutral-600);
  margin: 0;
}

._chartSection_141m4_219 {
  margin: 24px 0;
  padding: 16px;
  background: var(--neutral-50, #f9fafb);
  border-radius: 8px;
}

/* ===== Progressive Disclosure - Summary Section ===== */
._summary_141m4_227 {
  padding: 16px;
  background: var(--neutral-50, #f9fafb);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--neutral-200, #e5e7eb);
}

._summaryStats_141m4_235 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  ._summaryStats_141m4_235 {
    gap: 6px;
  }
}

._summaryText_141m4_247 {
  font-size: 14px;
  color: var(--neutral-700, #374151);
  font-weight: 500;
}

._expandButton_141m4_253 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700, #374151);
  cursor: pointer;
}
._expandButton_141m4_253 svg {
  transition: transform 0.2s;
}

._rotated_141m4_272 {
  transform: rotate(180deg);
}

/* ===== Session Definition Tooltip ===== */
._tooltipButton_141m4_277 {
  background: none;
  border: none;
  cursor: help;
  color: var(--neutral-400, #9ca3af);
  padding: 4px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}

._tooltip_141m4_277 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  padding: 12px;
  background: var(--neutral-900, #111827);
  color: white;
  border-radius: 8px;
  max-width: 300px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
}
._tooltip_141m4_277 strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
._tooltip_141m4_277 p {
  margin: 4px 0;
  line-height: 1.5;
}
._tooltip_141m4_277 p:last-child {
  margin-bottom: 0;
}._recordingsList_1ikui_1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sectionHeader_1ikui_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_1ikui_13 {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

._sectionCount_1ikui_21 {
  font-size: 12px;
  color: var(--neutral-500);
}

._sessions_1ikui_26 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  ._sessions_1ikui_26 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._sessionCard_1ikui_37 {
  display: block;
  padding: 0;
  background: none;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
._sessionCard_1ikui_37:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
._sessionCard_1ikui_37:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  ._sessionCard_1ikui_37 {
    transition: none;
  }
}

._videoThumbnail_1ikui_60 {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  border-radius: 12px;
  overflow: hidden;
}

._thumbnailTop_1ikui_72 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

._dateLabel_1ikui_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}

._engagementChip_1ikui_94 {
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}

._playCircle_1ikui_106 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: background 150ms ease, transform 150ms ease;
}
._sessionCard_1ikui_37:hover ._playCircle_1ikui_106 {
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  ._sessionCard_1ikui_37:hover ._playCircle_1ikui_106 {
    transform: translate(-50%, -50%);
  }
}

._thumbnailBottom_1ikui_133 {
  display: flex;
  justify-content: flex-start;
}

._durationLabel_1ikui_138 {
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

._loadingState_1ikui_149 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
}
._loadingState_1ikui_149 ._spinner_1ikui_157 {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--neutral-200);
  border-top-color: var(--neutral-500);
  border-radius: 50%;
  animation: _spin_1ikui_157 1s linear infinite;
}
._loadingState_1ikui_149 p {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
}

@keyframes _spin_1ikui_157 {
  to {
    transform: rotate(360deg);
  }
}
._errorState_1ikui_176 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  color: var(--neutral-500);
}
._errorState_1ikui_176 p {
  font-size: 14px;
  margin: 0;
}

._emptyState_1ikui_190 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
  color: var(--neutral-400);
}
._emptyState_1ikui_190 h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0;
}
._emptyState_1ikui_190 p {
  font-size: 13px;
  color: var(--neutral-500);
  margin: 0;
  max-width: 240px;
}/**
 * RRweb Player Custom Styles
 *
 * Overrides default rrweb-player styles to match system design
 */
._playerWrapper_efxuu_6 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

._replayerContainer_efxuu_18 {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #f8fafc;
}

.replayer-wrapper {
  background: #ffffff;
}
.replayer-mouse-tail {
  transform: translate(2px, 2px);
}._controls_yg9bg_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  border-radius: 14px;
  border: 1px solid var(--neutral-200, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  margin: 16px;
  margin-top: auto;
}

._leftControls_yg9bg_16 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._playButton_yg9bg_23 {
  min-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--primary-500, #0900ff) !important;
  color: white !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}
._playButton_yg9bg_23:hover {
  background: var(--primary-600, #0800dd) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(9, 0, 255, 0.35);
}
._playButton_yg9bg_23:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(9, 0, 255, 0.25);
}
._playButton_yg9bg_23 svg {
  flex-shrink: 0;
}

._timeDisplay_yg9bg_49 {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700, #374151);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

._progressContainer_yg9bg_57 {
  flex: 1;
  min-width: 120px;
  height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 4px;
}
._progressContainer_yg9bg_57:focus {
  outline: none;
}
._progressContainer_yg9bg_57:focus-visible ._progressTrack_yg9bg_69 {
  box-shadow: 0 0 0 3px rgba(9, 0, 255, 0.2);
}

._progressTrack_yg9bg_69 {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--neutral-200, #e5e7eb);
  border-radius: 4px;
  transition: height 0.15s ease;
}
._progressContainer_yg9bg_57:hover ._progressTrack_yg9bg_69 {
  height: 8px;
}

._progressFill_yg9bg_85 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500, #0900ff), var(--primary-400, #3a33ff));
  border-radius: 4px;
  transition: width 0.1s linear;
}

._progressThumb_yg9bg_95 {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--primary-500, #0900ff);
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  box-shadow: 0 2px 6px rgba(9, 0, 255, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  opacity: 1;
}
._progressContainer_yg9bg_57:hover ._progressThumb_yg9bg_95, ._progressContainer_yg9bg_57:focus-within ._progressThumb_yg9bg_95 {
  transform: translate(-50%, -50%) scale(1);
}
._progressThumb_yg9bg_95:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 10px rgba(9, 0, 255, 0.4);
}

._rightControls_yg9bg_116 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._controlDivider_yg9bg_123 {
  width: 1px;
  height: 24px;
  background: var(--neutral-200, #e5e7eb);
  margin: 0 4px;
}

._skipIdleToggle_yg9bg_130 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 10px;
  transition: all 0.2s ease;
}
._skipIdleToggle_yg9bg_130:hover {
  background: var(--neutral-100, #f3f4f6);
  border-color: var(--neutral-300, #d1d5db);
}

._skipIcon_yg9bg_145 {
  color: var(--neutral-500, #6b7280);
  flex-shrink: 0;
}

._fullscreenButton_yg9bg_150 {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--neutral-100, #f3f4f6) !important;
  color: var(--neutral-600, #4b5563) !important;
  border: 1px solid var(--neutral-200, #e5e7eb) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
._fullscreenButton_yg9bg_150:hover {
  background: var(--neutral-200, #e5e7eb) !important;
  color: var(--neutral-900, #111827) !important;
  transform: translateY(-1px);
}
._fullscreenButton_yg9bg_150:active {
  transform: scale(0.95);
}
._fullscreenButton_yg9bg_150 svg {
  flex-shrink: 0;
}

._speedControl_yg9bg_176 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--neutral-100, #f3f4f6);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  color: var(--neutral-700, #374151);
  transition: all 0.2s ease;
}
._speedControl_yg9bg_176:hover {
  background: var(--neutral-200, #e5e7eb);
  border-color: var(--neutral-300, #d1d5db);
}
._speedControl_yg9bg_176 svg {
  flex-shrink: 0;
}

._speedSelect_yg9bg_195 {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700, #374151);
  cursor: pointer;
  outline: none;
  padding: 2px 18px 2px 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
._speedSelect_yg9bg_195 option {
  background: white;
  color: var(--neutral-900, #111827);
  padding: 8px;
}

@media (max-width: 768px) {
  ._controls_yg9bg_1 {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
  }
  ._progressContainer_yg9bg_57 {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }
  ._timeDisplay_yg9bg_49 {
    font-size: 12px;
  }
  ._controlDivider_yg9bg_123 {
    height: 20px;
  }
  ._skipIdleToggle_yg9bg_130 {
    padding: 5px 10px;
  }
  ._skipIdleToggle_yg9bg_130 .label {
    display: none;
  }
  ._playButton_yg9bg_23 {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  ._fullscreenButton_yg9bg_150 {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
}
@media (max-width: 480px) {
  ._controls_yg9bg_1 {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 10px;
  }
  ._leftControls_yg9bg_16 {
    gap: 10px;
  }
  ._rightControls_yg9bg_116 {
    gap: 8px;
  }
  ._controlDivider_yg9bg_123 {
    display: none;
  }
  ._skipIdleToggle_yg9bg_130 {
    padding: 4px 8px;
    border-radius: 8px;
  }
  ._skipIcon_yg9bg_145 {
    display: none;
  }
  ._speedControl_yg9bg_176 {
    padding: 5px 8px;
    border-radius: 6px;
  }
  ._speedSelect_yg9bg_195 {
    font-size: 12px;
  }
  ._playButton_yg9bg_23 {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  ._playButton_yg9bg_23 svg {
    width: 20px;
    height: 20px;
  }
  ._fullscreenButton_yg9bg_150 {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  ._fullscreenButton_yg9bg_150 svg {
    width: 18px;
    height: 18px;
  }
}._dialogOverlay_1id0o_1 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: _fadeIn_1id0o_1 0.2s ease;
}

@keyframes _fadeIn_1id0o_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._dialogContent_1id0o_21 {
  background: var(--background-primary, var(--pure-white, #ffffff));
  border: 1px solid var(--border-primary, var(--neutral-200, #e5e7eb));
  border-radius: 12px;
  width: 100%;
  max-width: 95vw;
  height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: _slideUp_1id0o_1 0.3s ease;
  overflow: hidden;
}

@keyframes _slideUp_1id0o_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
._header_1id0o_45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--background-secondary, var(--neutral-50, #f9fafb));
  border-bottom: 1px solid var(--border-primary, var(--neutral-200, #e5e7eb));
}
._header_1id0o_45 h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, var(--neutral-900, #111827));
  margin: 0;
}

._closeButton_1id0o_60 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  color: var(--neutral-700, #374151);
  cursor: pointer;
  transition: all 0.2s ease;
}
._closeButton_1id0o_60 svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}
._closeButton_1id0o_60:hover {
  color: var(--negative-600, #dc2626);
  transform: scale(1.05);
}
._closeButton_1id0o_60:active {
  transform: scale(0.95);
  box-shadow: none;
}

._body_1id0o_85 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
  background: var(--background-primary, var(--pure-white, #ffffff));
}
@media (min-width: 821px) {
  ._body_1id0o_85 {
    grid-template-columns: 1fr 240px;
  }
}
@media (min-width: 1024px) {
  ._body_1id0o_85 {
    grid-template-columns: 1fr 280px;
  }
}

._playerContainer_1id0o_104 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--background-primary, var(--pure-white, #ffffff));
  min-width: 0;
}

._sidebar_1id0o_112 {
  border-left: 1px solid var(--border-primary, var(--neutral-200, #e5e7eb));
  background: var(--background-secondary, var(--neutral-50, #f9fafb));
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  padding: 16px;
}
@media (max-width: 820px) {
  ._sidebar_1id0o_112 {
    border-left: none;
    border-top: 1px solid var(--border-primary, var(--neutral-200, #e5e7eb));
    max-height: 200px;
  }
}

._emptyPlayer_1id0o_128,
._loadingPlayer_1id0o_129,
._errorPlayer_1id0o_130 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  text-align: center;
  padding: 48px;
}

._emptyPlayer_1id0o_128 ._emptyIcon_1id0o_141 {
  font-size: 64px;
  opacity: 0.5;
}
._emptyPlayer_1id0o_128 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0;
}
._emptyPlayer_1id0o_128 p {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
}

._loadingPlayer_1id0o_129 ._spinner_1id0o_157 {
  animation: _spin_1id0o_157 1s linear infinite;
  color: var(--primary-500);
}
._loadingPlayer_1id0o_129 p {
  font-size: 14px;
  color: var(--neutral-600);
  margin: 0;
}

@keyframes _spin_1id0o_157 {
  to {
    transform: rotate(360deg);
  }
}
._errorPlayer_1id0o_130 ._errorIcon_1id0o_172 {
  font-size: 64px;
}
._errorPlayer_1id0o_130 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0;
}
._errorPlayer_1id0o_130 p {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
}

._unavailablePlayer_1id0o_187 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  text-align: center;
  padding: 48px;
  background: var(--neutral-50, #f9fafb);
}
._unavailablePlayer_1id0o_187 ._unavailableIcon_1id0o_198 {
  color: var(--neutral-400);
}
._unavailablePlayer_1id0o_187 h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0;
}
._unavailablePlayer_1id0o_187 p {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
  max-width: 400px;
}

._privacyNotice_1id0o_214 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--blue-50, #eff6ff);
  border-bottom: 1px solid var(--blue-100, #dbeafe);
  font-size: 12px;
  color: var(--blue-700, #1d4ed8);
}
._privacyNotice_1id0o_214 svg {
  flex-shrink: 0;
  color: var(--blue-500, #3b82f6);
}

._partialWarning_1id0o_229 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--yellow-50, #fefce8);
  border-bottom: 1px solid var(--yellow-200, #fef08a);
  font-size: 12px;
  color: var(--yellow-800, #854d0e);
}
._partialWarning_1id0o_229 svg {
  flex-shrink: 0;
  color: var(--yellow-600, #ca8a04);
}
._partialWarning_1id0o_229 ._percentCaptured_1id0o_243 {
  color: var(--yellow-600, #ca8a04);
}

._player_1id0o_104 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  background: var(--background-primary, var(--pure-white, #ffffff));
}
._player_1id0o_104:fullscreen {
  background: var(--neutral-900, #111827);
}
._player_1id0o_104:fullscreen ._playerInfo_1id0o_258 {
  display: none;
}
._player_1id0o_104:fullscreen ._playerWrapper_1id0o_261 {
  background: var(--neutral-900, #111827);
  padding: 24px;
  padding-bottom: 0;
}
._player_1id0o_104:fullscreen ._playerWrapper_1id0o_261 .rr-player__frame {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

._playerInfo_1id0o_258 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 20px;
  background: var(--background-secondary, var(--neutral-50, #f9fafb));
  border-bottom: 1px solid var(--border-primary, var(--neutral-200, #e5e7eb));
  flex-shrink: 0;
}

._infoRow_1id0o_280 {
  display: flex;
  gap: 6px;
  font-size: 13px;
  align-items: baseline;
  white-space: nowrap;
}
._infoRow_1id0o_280 ._label_1id0o_287 {
  font-weight: 500;
  color: var(--text-secondary, var(--neutral-600, #6b7280));
}
._infoRow_1id0o_280 ._value_1id0o_291 {
  font-weight: 600;
  color: var(--text-primary, var(--neutral-900, #111827));
}
._infoRow_1id0o_280 ._separator_1id0o_295 {
  margin: 0 4px;
  color: var(--neutral-400, #9ca3af);
  font-weight: 400;
}

._playerWrapper_1id0o_261 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--background-primary, var(--neutral-50, #f9fafb));
  overflow: hidden;
  min-height: 0;
  position: relative;
  padding: 20px;
  padding-bottom: 0;
}
._playerWrapper_1id0o_261 .replayer-wrapper {
  background: var(--pure-white, #ffffff) !important;
}
._playerWrapper_1id0o_261 .replayer-mouse-tail {
  transform: translate(2px, 2px);
}

@media (max-width: 640px) {
  ._dialogOverlay_1id0o_1 {
    padding: 0;
  }
  ._dialogContent_1id0o_21 {
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  ._header_1id0o_45 {
    padding: 16px;
  }
  ._header_1id0o_45 h2 {
    font-size: 16px;
  }
  ._playerInfo_1id0o_258 {
    padding: 8px 12px;
    gap: 12px;
  }
  ._infoRow_1id0o_280 {
    font-size: 12px;
  }
  ._playerWrapper_1id0o_261 {
    padding: 12px;
    padding-bottom: 0;
  }
}
@media (max-width: 820px) {
  ._header_1id0o_45 {
    padding: 16px 20px;
  }
  ._playerWrapper_1id0o_261 {
    padding: 16px;
    padding-bottom: 0;
  }
}/**
 * F6: CollapsibleSection Styles
 *
 * Card-based collapsible section with smooth animations.
 * Follows existing report component styling patterns.
 */
._collapsibleSection_um6kr_7 {
  background: var(--pure-white, #fcfafa);
  border: 1px solid var(--neutral-100, #e8e7e6);
  border-radius: 12px;
  overflow: hidden;
}
._collapsibleSection_um6kr_7._closed_um6kr_13 ._header_um6kr_13 {
  border-bottom: none;
}

._header_um6kr_13 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}
._header_um6kr_13:hover {
  background-color: var(--neutral-50, #f8f8f7);
}
._header_um6kr_13:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary-500, #0900ff);
}
._header_um6kr_13:focus:not(:focus-visible) {
  box-shadow: none;
}
._header_um6kr_13:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary-500, #0900ff);
}

._headerContent_um6kr_44 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._icon_um6kr_50 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-600, #766e66);
}

._titleGroup_um6kr_57 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._title_um6kr_57 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900, #31261a);
  line-height: 1.4;
}

._subtitle_um6kr_71 {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-600, #766e66);
  line-height: 1.4;
}

._toggleButton_um6kr_78 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border-radius: 8px;
  color: var(--neutral-500, #766e66);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}
._header_um6kr_13:hover ._toggleButton_um6kr_78 {
  background: var(--neutral-100, #e8e7e6);
  color: var(--neutral-700, #31261a);
}

@media (max-width: 480px) {
  ._toggleText_um6kr_96 {
    display: none;
  }
}

._chevron_um6kr_101 {
  transition: transform 0.2s ease;
}

._content_um6kr_105 {
  padding: 20px;
  animation: _slideDown_um6kr_1 0.2s ease-out;
}
._content_um6kr_105 > * + * {
  margin-top: 16px;
}

@keyframes _slideDown_um6kr_1 {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}._fab_19wj0_1 {
  position: fixed;
  right: var(--spacing-md);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--spacing-md));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 9999px;
  background: var(--neutral-900);
  color: var(--pure-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-weight: 600;
  font-size: 14px;
  z-index: 50;
  border: none;
  cursor: pointer;
  transition: transform 150ms ease;
}
._fab_19wj0_1:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  ._fab_19wj0_1 {
    transition: none;
  }
}

._badge_19wj0_29 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  border-radius: 9999px;
  background: var(--positive-500);
  color: var(--pure-white);
  font-size: 11px;
  font-weight: 700;
}

._overlay_19wj0_43 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

._sheet_19wj0_53 {
  background: var(--pure-white);
  border-radius: 16px 16px 0 0;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-height: 80vh;
  overflow-y: auto;
}

._handle_19wj0_64 {
  width: 32px;
  height: 4px;
  background: var(--neutral-200);
  border-radius: 2px;
  align-self: center;
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

[data-theme=dark] ._fab_19wj0_1 {
  background: var(--neutral-100);
  color: var(--neutral-900);
}
[data-theme=dark] ._sheet_19wj0_53 {
  background: var(--neutral-800);
}
[data-theme=dark] ._handle_19wj0_64 {
  background: var(--neutral-600);
}._shell_339hr_1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto auto;
  grid-template-areas: "content rail" "footer footer";
  gap: var(--spacing-md) 24px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-md);
}

._content_339hr_13 {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
}

._rail_339hr_21 {
  grid-area: rail;
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 80px - var(--spacing-md));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-200) transparent;
}
._rail_339hr_21::-webkit-scrollbar {
  width: 4px;
}
._rail_339hr_21::-webkit-scrollbar-track {
  background: transparent;
}
._rail_339hr_21::-webkit-scrollbar-thumb {
  background: var(--neutral-200);
  border-radius: 2px;
}

._footer_339hr_45 {
  grid-area: footer;
  text-align: left;
  color: var(--neutral-400);
  font-size: 12px;
  line-height: 1.5;
  padding-block: var(--spacing-md);
  padding-inline: 2px;
}

@media (max-width: 1199px) {
  ._shell_339hr_1 {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
@media (max-width: 899px) {
  ._shell_339hr_1 {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "footer";
  }
  ._rail_339hr_21 {
    display: none;
  }
}
[data-theme=dark] ._rail_339hr_21 {
  scrollbar-color: var(--neutral-700) transparent;
}
[data-theme=dark] ._rail_339hr_21::-webkit-scrollbar-thumb {
  background: var(--neutral-700);
}/**
 * F6: Analytics Layout Styles
 *
 * Shared styles for Proposal, Quote, and Invoice layouts.
 */
._analyticsLayout_1bxdr_6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 0;
}

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

._invoiceSummary_1bxdr_19 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: var(--spacing-md);
}

._invoiceHeader_1bxdr_26 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
._invoiceHeader_1bxdr_26 h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
}
._invoiceHeader_1bxdr_26 svg {
  color: var(--neutral-500);
}

._statsGrid_1bxdr_42 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}
@media (min-width: 768px) {
  ._statsGrid_1bxdr_42 {
    grid-template-columns: repeat(4, 1fr);
  }
}

._statItem_1bxdr_53 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--neutral-50);
  border-radius: 8px;
}

._statIcon_1bxdr_62 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--pure-white);
  border-radius: 8px;
  color: var(--neutral-500);
  flex-shrink: 0;
}

._statContent_1bxdr_74 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._statValue_1bxdr_81 {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._statLabel_1bxdr_90 {
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
}

._followUpTiming_1bxdr_96 {
  padding: var(--spacing-md);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
._followUpTiming_1bxdr_96._recent_1bxdr_102 {
  background: var(--positive-50);
  color: var(--positive-700);
  border: 1px solid var(--positive-200);
}
._followUpTiming_1bxdr_96._moderate_1bxdr_107 {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-200);
}
._followUpTiming_1bxdr_96._overdue_1bxdr_112 {
  background: var(--info-50);
  color: var(--info-700);
  border: 1px solid var(--info-200);
}

._followUpMessage_1bxdr_118 {
  display: block;
}

/* Theme-aware styling using [data-theme] instead of prefers-color-scheme */
[data-theme=dark] ._invoiceSummary_1bxdr_19 {
  background: var(--neutral-800);
  border-color: var(--neutral-700);
}
[data-theme=dark] ._invoiceHeader_1bxdr_26 h2 {
  color: var(--neutral-50);
}
[data-theme=dark] ._statItem_1bxdr_53 {
  background: var(--neutral-700);
}
[data-theme=dark] ._statIcon_1bxdr_62 {
  background: var(--neutral-800);
  color: var(--neutral-400);
}
[data-theme=dark] ._statValue_1bxdr_81 {
  color: var(--neutral-50);
}
[data-theme=dark] ._statLabel_1bxdr_90 {
  color: var(--neutral-400);
}._businessAnalyticsPage_1kmh6_1 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 120px);
}
@media (max-width: 768px) {
  ._businessAnalyticsPage_1kmh6_1 {
    padding: 16px;
  }
}

._viewToggle_1kmh6_13 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--neutral-100, #f3f4f6);
  border-radius: 8px;
  border: 1px solid var(--neutral-200, #e5e7eb);
  width: fit-content;
}
@media (max-width: 768px) {
  ._viewToggle_1kmh6_13 {
    width: 100%;
    justify-content: center;
  }
}

._toggleButton_1kmh6_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500, #6b7280);
  cursor: pointer;
}
@media (max-width: 768px) {
  ._toggleButton_1kmh6_31 {
    flex: 1;
    justify-content: center;
    padding: 12px;
    font-size: 13px;
  }
}

._toggleActive_1kmh6_53 {
  background: var(--pure-white, #ffffff);
  color: var(--neutral-900, #111827);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

._businessView_1kmh6_60 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._insightsRow_1kmh6_66 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 1024px) {
  ._insightsRow_1kmh6_66 {
    grid-template-columns: 1fr;
  }
}

._insightsColumn_1kmh6_77 {
  min-width: 0;
}

._engagementColumn_1kmh6_81 {
  min-width: 0;
}

._engagementCard_1kmh6_85 {
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--neutral-200, #e5e7eb);
  height: fit-content;
}
@media (max-width: 1024px) {
  ._engagementCard_1kmh6_85 {
    padding: 16px;
  }
}
@media (max-width: 768px) {
  ._engagementCard_1kmh6_85 {
    padding: 16px;
  }
}

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

._condensedSummary_1kmh6_110 {
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--neutral-200, #e5e7eb);
}
@media (max-width: 768px) {
  ._condensedSummary_1kmh6_110 {
    padding: 16px;
  }
}

._summaryHeader_1kmh6_123 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
._summaryHeader_1kmh6_123 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 0;
  flex: 1;
}
@media (max-width: 768px) {
  ._summaryHeader_1kmh6_123 h2 {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  ._summaryHeader_1kmh6_123 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
}

._timelineSection_1kmh6_150 {
  background: var(--pure-white, #ffffff);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--neutral-200, #e5e7eb);
}
@media (max-width: 768px) {
  ._timelineSection_1kmh6_150 {
    padding: 16px;
  }
}

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

._advancedSection_1kmh6_169 {
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  ._advancedSection_1kmh6_169 {
    padding: 0 0 16px 0;
    margin-bottom: 24px;
  }
}

._sessionDetailsSection_1kmh6_181 {
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  ._sessionDetailsSection_1kmh6_181 {
    margin-bottom: 16px;
  }
}

._sectionTitle_1kmh6_192 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0 0 16px 0;
}
@media (max-width: 768px) {
  ._sectionTitle_1kmh6_192 {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

._sectionDescription_1kmh6_208 {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._footer_1kmh6_215 {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}

._footerContent_1kmh6_221 {
  text-align: center;
}

._footerText_1kmh6_225 {
  font-size: 13px;
  color: var(--neutral-500, #6b7280);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  ._footerText_1kmh6_225 {
    font-size: 12px;
  }
}

._loadingState_1kmh6_237 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--neutral-500, #6b7280);
}

._loadingSpinner_1kmh6_247 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-200, #e5e7eb);
  border-top: 3px solid var(--primary-500, #3b82f6);
  border-radius: 50%;
  animation: _spin_1kmh6_1 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes _spin_1kmh6_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._loadingState_1kmh6_237 h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
  margin: 0 0 8px 0;
}

._loadingState_1kmh6_237 p {
  font-size: 14px;
  margin: 0;
  max-width: 400px;
}

._errorState_1kmh6_278 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--neutral-500, #6b7280);
}

._errorIcon_1kmh6_288 {
  color: var(--negative-500, #ef4444);
  margin-bottom: 24px;
}

._errorState_1kmh6_278 h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
  margin: 0 0 8px 0;
}

._errorState_1kmh6_278 p {
  font-size: 14px;
  margin: 0 0 16px 0;
  max-width: 400px;
}

._errorDetails_1kmh6_306 {
  background: var(--negative-50, #fef2f2);
  border: 1px solid var(--negative-200, #fecaca);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
  max-width: 500px;
  width: 100%;
}
._errorDetails_1kmh6_306 summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--negative-600, #dc2626);
  font-size: 13px;
}
._errorDetails_1kmh6_306 code {
  display: block;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--negative-200, #fecaca);
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--negative-800, #991b1b);
  word-break: break-all;
}

._emptyState_1kmh6_333 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--neutral-500, #6b7280);
}

._emptyIcon_1kmh6_343 {
  color: var(--neutral-300, #d1d5db);
  margin-bottom: 24px;
}

._emptyState_1kmh6_333 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--neutral-600, #4b5563);
  margin: 0 0 12px 0;
}

._emptyState_1kmh6_333 p {
  font-size: 16px;
  margin: 0 0 24px 0;
  max-width: 500px;
  line-height: 1.6;
}

._emptyStateActions_1kmh6_362 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

._shareButton_1kmh6_369 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary-500, #3b82f6);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
._shareButton_1kmh6_369:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  ._insightsRow_1kmh6_66 {
    gap: 16px;
  }
  ._businessView_1kmh6_60,
  ._detailedView_1kmh6_104,
  ._advancedView_1kmh6_163 {
    gap: 16px;
  }
}
._sessionPlayerSection_1kmh6_397 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 24px;
  margin-top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
._sessionPlayerSection_1kmh6_397 ._header_1kmh6_405 {
  margin-bottom: 16px;
}
._sessionPlayerSection_1kmh6_397 ._header_1kmh6_405 ._title_1kmh6_408 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 8px 0;
}
._sessionPlayerSection_1kmh6_397 ._header_1kmh6_405 ._subtitle_1kmh6_417 {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
}
._sessionPlayerSection_1kmh6_397 ._placeholder_1kmh6_422 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
  color: var(--neutral-500);
}
._sessionPlayerSection_1kmh6_397 ._placeholder_1kmh6_422 ._placeholderIcon_1kmh6_432 {
  color: var(--neutral-300);
}
._sessionPlayerSection_1kmh6_397 ._placeholder_1kmh6_422 p {
  margin: 0;
  font-size: 14px;
  max-width: 400px;
}

._viewRecordingsButton_1kmh6_441 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary-500);
  color: var(--pure-white);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
._viewRecordingsButton_1kmh6_441:hover {
  opacity: 0.9;
}/**
 * Quote Analytics Styles
 *
 * WHY: Matches BusinessAnalyticsPage structure but optimized for quotes.
 *      Uses consistent panels, spacing, and layout.
 *
 * DESIGN SYSTEM:
 *   - Matches proposal analytics styling
 *   - Clean panel-based layout
 *   - Proper spacing and hierarchy
 */
._quoteAnalytics_1m4dc_12 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 120px);
}
@media (max-width: 768px) {
  ._quoteAnalytics_1m4dc_12 {
    padding: 16px;
  }
}

._analyticsContent_1m4dc_24 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._pageHeader_1m4dc_30 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
@media (max-width: 768px) {
  ._pageHeader_1m4dc_30 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._headerContent_1m4dc_44 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
._headerContent_1m4dc_44 svg {
  color: var(--text-secondary);
}
._headerContent_1m4dc_44 h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

._emptyState_1m4dc_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: #64748b;
}

._emptyIcon_1m4dc_69 {
  color: #cbd5e1;
  margin-bottom: 20px;
}

._emptyState_1m4dc_59 h3 {
  font-size: 24px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 12px 0;
}

._emptyState_1m4dc_59 p {
  font-size: 16px;
  margin: 0 0 24px 0;
  max-width: 500px;
  line-height: 1.6;
}

._emptyStateActions_1m4dc_88 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
._emptyStateActions_1m4dc_88 p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

._sessionPlayerSection_1m4dc_100 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 20px;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  ._sessionPlayerSection_1m4dc_100 {
    padding: 16px;
  }
}
._sessionPlayerSection_1m4dc_100 ._header_1m4dc_44 {
  margin-bottom: 16px;
}
._sessionPlayerSection_1m4dc_100 ._header_1m4dc_44 ._title_1m4dc_116 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 8px 0;
}
._sessionPlayerSection_1m4dc_100 ._header_1m4dc_44 ._subtitle_1m4dc_125 {
  font-size: 14px;
  color: var(--neutral-600);
  margin: 0;
}
._sessionPlayerSection_1m4dc_100 ._placeholder_1m4dc_130 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
  color: var(--neutral-500);
}
._sessionPlayerSection_1m4dc_100 ._placeholder_1m4dc_130 ._placeholderIcon_1m4dc_140 {
  color: var(--neutral-300);
}
._sessionPlayerSection_1m4dc_100 ._placeholder_1m4dc_130 p {
  margin: 0;
  font-size: 14px;
  max-width: 400px;
}

@media (max-width: 768px) {
  ._analyticsContent_1m4dc_24 {
    gap: 16px;
  }
}/**
 * Invoice Analytics Styles - Factual Data View
 *
 * WHY: Clean, minimal design focused on factual data presentation
 *      Professional, no predictions, just the facts
 *
 * DESIGN SYSTEM:
 *   - Uses CSS variables from main design system
 *   - Clean panel-based layout
 *   - Consistent typography and spacing
 */
._invoiceAnalytics_1csdd_12 {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  min-height: calc(100vh - 120px);
}
@media (max-width: 768px) {
  ._invoiceAnalytics_1csdd_12 {
    padding: var(--spacing-md);
  }
}

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

._pageHeader_1csdd_30 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
@media (max-width: 768px) {
  ._pageHeader_1csdd_30 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._headerContent_1csdd_44 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
._headerContent_1csdd_44 svg {
  color: var(--text-secondary);
}
._headerContent_1csdd_44 h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

._emptyState_1csdd_59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-secondary);
}

._emptyIcon_1csdd_69 {
  color: var(--neutral-300);
  margin-bottom: var(--spacing-lg);
}

._emptyState_1csdd_59 h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

._emptyState_1csdd_59 p {
  font-size: var(--font-size-md);
  margin: 0 0 var(--spacing-lg) 0;
  max-width: 500px;
  line-height: 1.6;
  color: var(--text-secondary);
}

._emptyStateActions_1csdd_89 {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

._metricsGrid_1csdd_96 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: 0;
}

._metricCard_1csdd_103 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  ._metricCard_1csdd_103 {
    padding: var(--spacing-md);
  }
}

._metricIcon_1csdd_119 {
  color: var(--text-secondary);
  flex-shrink: 0;
}

._metricContent_1csdd_124 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

._metricValue_1csdd_131 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._metricLabel_1csdd_141 {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.2;
}

._viewHistory_1csdd_147 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: var(--spacing-lg);
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  ._viewHistory_1csdd_147 {
    padding: var(--spacing-md);
  }
}
._viewHistory_1csdd_147 h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

._historyItem_1csdd_167 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}
._historyItem_1csdd_167:last-child {
  border-bottom: none;
}
@media (max-width: 600px) {
  ._historyItem_1csdd_167 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
}

._historyLabel_1csdd_185 {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

._historyValue_1csdd_191 {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

@media (max-width: 768px) {
  ._analyticsContent_1csdd_24 {
    gap: var(--spacing-md);
  }
  ._metricsGrid_1csdd_96 {
    grid-template-columns: 1fr;
  }
}._reportsPage_bfkt7_1 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  margin: 0;
  min-height: 100%;
}
@media (max-width: 768px) {
  ._reportsPage_bfkt7_1 {
    padding-top: 80px;
  }
}

._reportsHeader_bfkt7_15 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
}
@media (max-width: 768px) {
  ._reportsHeader_bfkt7_15 {
    padding-top: 0;
  }
}
._reportsHeader_bfkt7_15 h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
}

._reportsSubtitle_bfkt7_34 {
  font-size: 1rem;
  color: var(--neutral-600);
  margin: 0;
}

._titleWithTrigger_bfkt7_40 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._reportsContent_bfkt7_46 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._reportsTable_bfkt7_52 {
  flex: 1;
}

/* Unread indicator styling - subtle left border for rows with new analytics activity */
/* Uses box-shadow instead of ::before to avoid breaking table layout */
._reportsContent_bfkt7_46 .reports-table-row--unread {
  /* Very subtle background - barely visible, doesn't distract from content */
  background-color: rgba(254, 243, 224, 0.15);
  /* Left border indicator using inset box-shadow - doesn't affect table cell layout */
  box-shadow: inset 4px 0 0 0 var(--primary-500, #d08c24);
}

/* Mobile responsive */
@media (max-width: 768px) {
  ._reportsPage_bfkt7_1 {
    gap: 1.5rem;
  }
  ._reportsHeader_bfkt7_15 h1 {
    font-size: 1.5rem;
  }
  ._reportsSubtitle_bfkt7_34 {
    font-size: 0.9rem;
  }
}
/**
 * ReportPageHeader Styles
 *
 * Single row layout: [← Back] [Title] [Badges]
 * Client info below as secondary line.
 * Stacks on mobile.
 */
._reportPageHeader_1dh96_9 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px;
  background: rgba(252, 250, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
  position: sticky;
  top: 0;
  z-index: 20;
}
@media (max-width: 768px) {
  ._reportPageHeader_1dh96_9 {
    padding: 10px 16px;
    gap: 8px;
  }
}

._headerRow_1dh96_29 {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 768px) {
  ._headerRow_1dh96_29 {
    flex-wrap: wrap;
    gap: 10px;
  }
}

._backButton_1dh96_41 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 6px;
  background: transparent;
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 6px;
  color: var(--neutral-600, #4b5563);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
._backButton_1dh96_41:hover {
  background: var(--neutral-50, #f9fafb);
  border-color: var(--neutral-300, #d1d5db);
  color: var(--neutral-800, #1f2937);
}
._backButton_1dh96_41:active {
  transform: scale(0.98);
}
._backButton_1dh96_41 svg {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  ._backText_1dh96_69 {
    display: none;
  }
}

._titleSection_1dh96_74 {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  ._titleSection_1dh96_74 {
    order: 3;
    flex-basis: 100%;
  }
}

._documentTitle_1dh96_85 {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  ._documentTitle_1dh96_85 {
    font-size: 17px;
    white-space: normal;
  }
}
@media (max-width: 480px) {
  ._documentTitle_1dh96_85 {
    font-size: 16px;
  }
}

._clientInfo_1dh96_107 {
  font-size: 13px;
  color: var(--neutral-500, #6b7280);
  margin: 0;
  padding-left: 50px;
}
@media (max-width: 768px) {
  ._clientInfo_1dh96_107 {
    padding-left: 0;
    font-size: 13px;
  }
}

._headerMeta_1dh96_120 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._headerMeta_1dh96_120 {
    order: 2;
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  ._headerMeta_1dh96_120 {
    gap: 6px;
  }
}

._metaBadge_1dh96_138 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--neutral-50, #f8f8f7);
  border: 1px solid var(--neutral-100);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  white-space: nowrap;
}
._metaBadge_1dh96_138 svg {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  ._metaBadge_1dh96_138 {
    padding: 3px 8px;
  }
}

@media (max-width: 640px) {
  ._badgeText_1dh96_161 {
    display: none;
  }
}

._documentTypeBadge_1dh96_166 {
  text-transform: capitalize;
  background: var(--primary-50, #eff6ff);
  color: var(--primary-700, #1d4ed8);
}
._documentTypeBadge_1dh96_166 svg {
  color: var(--primary-500, #3b82f6);
}

._engagementBadge_1dh96_175[data-score=high] {
  background: var(--positive-50, #f0fdf4);
  color: var(--positive-700, #15803d);
}
._engagementBadge_1dh96_175[data-score=high] svg {
  color: var(--positive-500, #22c55e);
}
._engagementBadge_1dh96_175[data-score=medium] {
  background: var(--warning-50, #fffbeb);
  color: var(--warning-700, #a16207);
}
._engagementBadge_1dh96_175[data-score=medium] svg {
  color: var(--warning-500, #eab308);
}
._engagementBadge_1dh96_175[data-score=low] {
  background: var(--negative-50, #fef2f2);
  color: var(--negative-700, #b91c1c);
}
._engagementBadge_1dh96_175[data-score=low] svg {
  color: var(--negative-500, #ef4444);
}._analyticsPage_x0h5l_1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  min-height: 100%;
}

._analyticsNavigation_x0h5l_10 {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  margin-bottom: 0.5rem;
  background: var(--pure-white, #fcfafa);
  border-bottom: 1px solid var(--neutral-100, #e8e7e6);
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -16px;
}
._analyticsNavigation_x0h5l_10 button {
  display: inline-flex;
  align-items: center;
  color: var(--neutral-700, #534a40);
  font-weight: 500;
  font-size: 14px;
  gap: 4px;
  height: 32px;
}
._analyticsNavigation_x0h5l_10 button:hover {
  color: var(--neutral-900, #31261a);
  background: var(--neutral-50, #f8f8f7);
}
._analyticsNavigation_x0h5l_10 button svg {
  width: 18px;
  height: 18px;
}

._analyticsError_x0h5l_40 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  text-align: center;
  min-height: 200px;
}
._analyticsError_x0h5l_40 h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}
._analyticsError_x0h5l_40 p {
  color: var(--neutral-600);
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  ._analyticsPage_x0h5l_1 {
    gap: 1rem;
  }
}._templateCard_2sjlb_1 {
  border: 2px solid var(--neutral-200);
  border-radius: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--pure-white);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  min-width: 250px;
  max-width: 380px;
  position: relative;
}
._templateCard_2sjlb_1:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--neutral-300);
}
._templateCard_2sjlb_1._invoice_2sjlb_19 {
  border-left: 4px solid var(--primary-500);
  background: linear-gradient(to right, rgba(58, 51, 255, 0.02), var(--pure-white));
}
._templateCard_2sjlb_1._quote_2sjlb_23 {
  border-left: 4px solid var(--positive-500);
  background: linear-gradient(to right, rgba(34, 197, 94, 0.02), var(--pure-white));
}
._templateCard_2sjlb_1._proposal_2sjlb_27 {
  border-left: 4px solid var(--accent-500);
  background: linear-gradient(to right, rgba(168, 85, 247, 0.02), var(--pure-white));
}

._deleteButton_2sjlb_32 {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  padding: var(--spacing-xs);
  background-color: transparent;
  color: var(--neutral-400);
  border: none;
  border-radius: var(--spacing-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
._deleteButton_2sjlb_32:hover {
  background-color: var(--negative-50);
  color: var(--negative-600);
}
._deleteButton_2sjlb_32:active {
  background-color: var(--negative-100);
}
._deleteButton_2sjlb_32:focus-visible {
  outline: 2px solid var(--negative-400);
  outline-offset: 2px;
}
._deleteButton_2sjlb_32 svg {
  width: 16px;
  height: 16px;
}

._templateHeader_2sjlb_65 {
  flex: 1;
  margin-bottom: var(--spacing-sm);
  padding-right: var(--spacing-lg);
}

._templateBadge_2sjlb_71 {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--spacing-sm);
  border-radius: var(--spacing-xs);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}
._templateBadge_2sjlb_71._invoice_2sjlb_19 {
  background-color: rgba(58, 51, 255, 0.1);
  color: var(--primary-700);
}
._templateBadge_2sjlb_71._quote_2sjlb_23 {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--positive-700);
}
._templateBadge_2sjlb_71._proposal_2sjlb_27 {
  background-color: rgba(168, 85, 247, 0.1);
  color: var(--accent-700);
}

._templateName_2sjlb_95 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 6px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

._documentName_2sjlb_108 {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

._templateMeta_2sjlb_120 {
  position: absolute;
  bottom: var(--spacing-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--neutral-400);
}

._metaIcon_2sjlb_131 {
  width: 12px;
  height: 12px;
  color: var(--neutral-400);
}

._templateActions_2sjlb_137 {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: auto;
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  justify-content: center;
}

._primaryAction_2sjlb_146 {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--primary-600);
  color: var(--pure-white);
  border: none;
  border-radius: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family-primary);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
._primaryAction_2sjlb_146:hover {
  background-color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(58, 51, 255, 0.2);
}
._primaryAction_2sjlb_146:active {
  transform: translateY(0);
}
._primaryAction_2sjlb_146:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
}

._secondaryAction_2sjlb_177 {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--pure-white);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
  border-radius: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family-primary);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
._secondaryAction_2sjlb_177:hover {
  background-color: var(--neutral-50);
  border-color: var(--neutral-400);
}
._secondaryAction_2sjlb_177:active {
  background-color: var(--neutral-100);
}
._secondaryAction_2sjlb_177:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
}

._actionIcon_2sjlb_207 {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  ._templateCard_2sjlb_1 {
    padding: var(--spacing-md);
    min-height: 220px;
  }
  ._templateName_2sjlb_95 {
    font-size: var(--font-size-lg);
  }
  ._templateActions_2sjlb_137 {
    flex-direction: column;
    align-items: stretch;
  }
}/**
 * Template Filters Styles
 *
 * Clean, readable filter interface using semantic design system colors
 */
._filtersContainer_19lj8_6 {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 200px));
  gap: var(--spacing-sm);
  align-items: center;
  width: 100%;
}
@media (max-width: 1100px) {
  ._filtersContainer_19lj8_6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  ._filtersContainer_19lj8_6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xs);
  }
}
@media (max-width: 600px) {
  ._filtersContainer_19lj8_6 {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}

._searchWrapper_19lj8_31 {
  flex: 1;
  min-width: 0;
}
@media (max-width: 900px) {
  ._searchWrapper_19lj8_31 {
    grid-column: 1/-1;
  }
}

._searchInput_19lj8_41 {
  width: 100%;
  height: 40px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background-color: var(--pure-white);
  color: var(--neutral-900);
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  transition: all 0.2s ease;
}
._searchInput_19lj8_41::placeholder {
  color: var(--neutral-500);
}
._searchInput_19lj8_41:hover:not(:disabled) {
  border-color: var(--neutral-400);
}
._searchInput_19lj8_41:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
[data-theme=dark] ._searchInput_19lj8_41 {
  background-color: var(--neutral-800);
  color: var(--neutral-100);
  border-color: var(--neutral-600);
}
[data-theme=dark] ._searchInput_19lj8_41::placeholder {
  color: var(--neutral-500);
}
[data-theme=dark] ._searchInput_19lj8_41:hover:not(:disabled) {
  border-color: var(--neutral-500);
}
[data-theme=dark] ._searchInput_19lj8_41:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(9, 0, 255, 0.2);
}

._selectWrapper_19lj8_81 {
  min-width: 0;
}
@media (max-width: 600px) {
  ._selectWrapper_19lj8_81 {
    width: 100%;
  }
}

._select_19lj8_81 {
  width: 100%;
  height: 40px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background-color: var(--pure-white);
  color: var(--neutral-900);
  border: 1px solid var(--neutral-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._select_19lj8_81:hover:not(:disabled) {
  border-color: var(--neutral-400);
}
._select_19lj8_81:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
[data-theme=dark] ._select_19lj8_81 {
  background-color: var(--neutral-800);
  color: var(--neutral-100);
  border-color: var(--neutral-600);
}
[data-theme=dark] ._select_19lj8_81:hover:not(:disabled) {
  border-color: var(--neutral-500);
}
[data-theme=dark] ._select_19lj8_81:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(9, 0, 255, 0.2);
}
[data-theme=dark] ._select_19lj8_81 option {
  background-color: var(--neutral-800);
  color: var(--neutral-100);
}/**
 * Templates Page Styles
 *
 * Styles for the templates library page layout and components
 */
._templatesPage_elih4_6 {
  padding: var(--spacing-lg);
  max-width: 100%;
  min-height: 100vh;
  /* Background inherits from root */
  font-family: var(--font-family-primary);
}
@media (max-width: 768px) {
  ._templatesPage_elih4_6 {
    padding-top: 80px;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
  }
}
@media (max-width: 900px) {
  ._templatesPage_elih4_6 {
    padding: var(--spacing-md);
  }
}
@media (max-width: 600px) {
  ._templatesPage_elih4_6 {
    padding: var(--spacing-md) var(--spacing-sm);
  }
}

._headerRow_elih4_32 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}
@media (max-width: 768px) {
  ._headerRow_elih4_32 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: nowrap;
  }
}
@media (max-width: 900px) {
  ._headerRow_elih4_32 {
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
}

._templatesHeader_elih4_57 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0;
}
@media (max-width: 768px) {
  ._templatesHeader_elih4_57 {
    margin-bottom: var(--spacing-xs);
  }
}
._templatesHeader_elih4_57 h1 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 var(--spacing-xs) 0;
  font-family: var(--font-family-primary);
}
@media (max-width: 768px) {
  ._templatesHeader_elih4_57 h1 {
    font-size: var(--font-size-2xl);
  }
}
._templatesHeader_elih4_57 p {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0;
  font-family: var(--font-family-primary);
  line-height: 1.45;
}
@media (max-width: 900px) {
  ._templatesHeader_elih4_57 h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: 4px;
  }
}

._titleWithTrigger_elih4_94 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._filtersWrapper_elih4_100 {
  flex: 1;
  min-width: 360px;
}
@media (max-width: 768px) {
  ._filtersWrapper_elih4_100 {
    width: 100%;
    min-width: 0;
    flex: none;
  }
}
@media (max-width: 1024px) {
  ._filtersWrapper_elih4_100 {
    min-width: 320px;
  }
}
@media (max-width: 900px) {
  ._filtersWrapper_elih4_100 {
    width: 100%;
  }
}
@media (max-width: 600px) {
  ._filtersWrapper_elih4_100 {
    min-width: 0;
  }
}

._templatesGrid_elih4_127 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-bottom: var(--spacing-2xl);
  justify-content: start;
}
@media (min-width: 1400px) {
  ._templatesGrid_elih4_127 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (max-width: 1100px) {
  ._templatesGrid_elih4_127 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
@media (max-width: 900px) {
  ._templatesGrid_elih4_127 {
    gap: var(--spacing-sm);
  }
}
@media (max-width: 786px) {
  ._templatesGrid_elih4_127 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  ._templatesGrid_elih4_127 {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
}

._loadingState_elih4_162 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
}
._loadingState_elih4_162 ._loadingContent_elih4_168 {
  text-align: center;
}
._loadingState_elih4_162 ._loadingContent_elih4_168 ._spinner_elih4_171 {
  width: 48px;
  height: 48px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--primary-600);
  border-radius: 50%;
  animation: _spin_elih4_171 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}
._loadingState_elih4_162 ._loadingContent_elih4_168 p {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0;
}

._emptyState_elih4_186 {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-lg);
}
._emptyState_elih4_186 svg {
  width: 64px;
  height: 64px;
  color: var(--neutral-300);
  margin: 0 auto var(--spacing-lg);
}
._emptyState_elih4_186 h3 {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--neutral-900);
  margin: 0 0 var(--spacing-sm) 0;
}
._emptyState_elih4_186 p {
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

@keyframes _spin_elih4_171 {
  to {
    transform: rotate(360deg);
  }
}
._mockDataWrapper_elih4_215 {
  position: relative;
}

._mockDataBanner_elih4_219 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--warning-100, #fef3cd);
  color: var(--warning-800, #856404);
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
  border: 2px dashed var(--warning-300, #ffc107);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

._mockDataIcon_elih4_235 {
  font-size: 1.25rem;
}

._mockDataGrid_elih4_239 {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}._appLayout_1ubd0_1 {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--primary-50);
}
@media (max-width: 768px) {
  ._appLayout_1ubd0_1 {
    flex-direction: column;
  }
}

._navigation_1ubd0_14 {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._navigation_1ubd0_14 {
    order: 1;
  }
}

._content_1ubd0_23 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 768px) {
  ._content_1ubd0_23 {
    order: 2;
  }
}

._topBar_1ubd0_35 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--pure-white);
  border-bottom: 1px solid var(--neutral-200);
  flex-shrink: 0;
  gap: 1rem;
  z-index: 10;
}

._mainContent_1ubd0_47 {
  flex: 1;
  overflow: auto;
  min-width: 0;
  width: 100%;
}
._mainContent_1ubd0_47::-webkit-scrollbar {
  width: 6px;
}
._mainContent_1ubd0_47::-webkit-scrollbar-track {
  background: transparent;
}
._mainContent_1ubd0_47::-webkit-scrollbar-thumb {
  background: var(--neutral-300, #d1d5db);
  border-radius: 3px;
}
._mainContent_1ubd0_47::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400, #9ca3af);
}

._contentWrapper_1ubd0_67 {
  flex: 1;
  display: flex;
  overflow: hidden;
}

._sidePanelSectionsSettings_1ubd0_73 {
  width: 0;
  overflow: hidden;
  background-color: var(--primary-50);
  border-left: 1px solid var(--neutral-200, #e5e7eb);
  transition: width 0.3s ease-in-out;
  flex-shrink: 0;
}
._sidePanelSectionsSettings_1ubd0_73._expanded_1ubd0_81 {
  width: 320px;
}
._sidePanelSectionsSettings_1ubd0_73::-webkit-scrollbar {
  width: 6px;
}
._sidePanelSectionsSettings_1ubd0_73::-webkit-scrollbar-track {
  background: transparent;
}
._sidePanelSectionsSettings_1ubd0_73::-webkit-scrollbar-thumb {
  background: var(--neutral-300, #d1d5db);
  border-radius: 3px;
}
._sidePanelSectionsSettings_1ubd0_73::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400, #9ca3af);
}/**
 * Product Tour Button Styles
 *
 * Floating help button positioned at bottom-right.
 * Expands on hover to show label text.
 */
._tourButton_rg0uc_7 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  border: none;
  background: var(--primary-500);
  color: var(--pure-white);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 44px;
}
._tourButton_rg0uc_7:hover {
  background: var(--primary-600);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}
._tourButton_rg0uc_7:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
._tourButton_rg0uc_7:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}
._tourButton_rg0uc_7._expanded_rg0uc_40 {
  width: auto;
  padding-right: 16px;
}
._tourButton_rg0uc_7._expanded_rg0uc_40 ._label_rg0uc_44 {
  opacity: 1;
  max-width: 150px;
}
@media (max-width: 768px) {
  ._tourButton_rg0uc_7 {
    right: 16px;
    bottom: 16px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
}
@media (max-width: 480px) {
  ._tourButton_rg0uc_7 {
    display: none;
  }
}

._iconWrapper_rg0uc_63 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._iconWrapper_rg0uc_63 {
    width: 40px;
    height: 40px;
  }
}

._icon_rg0uc_63 {
  flex-shrink: 0;
}

._label_rg0uc_44 {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  ._tourButton_rg0uc_7 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  ._tourButton_rg0uc_7:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}._container_1a754_1 {
  position: relative;
}

._trigger_1a754_5 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: var(--neutral-900);
  font-family: var(--font-primary);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
}
._trigger_1a754_5:hover {
  background-color: var(--primary-100);
  color: var(--primary-700);
}
._trigger_1a754_5._active_1a754_25 {
  background-color: var(--primary-200);
  color: var(--primary-900);
}
._trigger_1a754_5:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
._trigger_1a754_5._collapsed_1a754_33 {
  justify-content: center;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-xs);
  min-height: 52px;
}
._trigger_1a754_5._collapsed_1a754_33 ._iconWrapper_1a754_39 {
  margin-right: 0;
  margin-bottom: 2px;
}
._trigger_1a754_5._collapsed_1a754_33 ._label_1a754_43 {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
}

._iconWrapper_1a754_39 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-sm);
  color: currentColor;
  flex-shrink: 0;
}

._label_1a754_43 {
  font-size: var(--font-size-sm);
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-weight: 400;
}

._popover_1a754_71 {
  position: fixed;
  min-width: 240px;
  background: var(--pure-white, #ffffff);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
}

._popoverHidden_1a754_82 {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

._popoverHeader_1a754_88 {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--neutral-100);
}

._popoverTitle_1a754_93 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--neutral-700);
  font-family: var(--font-primary);
}

._optionsList_1a754_100 {
  padding: var(--spacing-xs) 0;
}

._optionItem_1a754_104 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--neutral-800);
  text-align: left;
  transition: background-color 0.15s ease;
}
._optionItem_1a754_104:hover {
  background-color: var(--primary-50, #f0f0ff);
  color: var(--primary-700);
}
._optionItem_1a754_104:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

._optionIcon_1a754_128 {
  flex-shrink: 0;
  color: currentColor;
}

._optionLabel_1a754_133 {
  flex: 1;
}._errorPage_1d8kv_1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.012) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.012) 0%, transparent 50%), #FFFFFF;
}
._errorPage_1d8kv_1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.008) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(168, 85, 247, 0.008) 0%, transparent 40%);
  animation: _slowFloat_1d8kv_1 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

._contentContainer_1d8kv_24 {
  position: relative;
  z-index: 1;
  max-width: 650px;
  width: 100%;
  padding: var(--spacing-xl, 48px) var(--spacing-lg, 24px);
  text-align: center;
  animation: _fadeInUp_1d8kv_1 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._contentContainer_1d8kv_24 {
    padding: var(--spacing-lg, 24px) var(--spacing-md, 16px);
  }
}

._illustrationContainer_1d8kv_39 {
  margin-bottom: var(--spacing-xl, 48px);
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  ._illustrationContainer_1d8kv_39 {
    height: 150px;
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._searchAnimation_1d8kv_54 {
  position: relative;
  width: 180px;
  height: 180px;
}
@media (max-width: 768px) {
  ._searchAnimation_1d8kv_54 {
    width: 140px;
    height: 140px;
  }
}

._magnifyingGlass_1d8kv_66 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  animation: _searchSway_1d8kv_1 3s ease-in-out infinite;
}
@media (max-width: 768px) {
  ._magnifyingGlass_1d8kv_66 {
    width: 60px;
    height: 60px;
  }
}
._magnifyingGlass_1d8kv_66::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border: 4px solid var(--primary-500, #3b82f6);
  border-radius: 50%;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  ._magnifyingGlass_1d8kv_66::before {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }
}
._magnifyingGlass_1d8kv_66::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 35px;
  background: var(--primary-500, #3b82f6);
  bottom: 0;
  right: 0;
  transform: rotate(45deg);
  transform-origin: top center;
  border-radius: 2px;
}
@media (max-width: 768px) {
  ._magnifyingGlass_1d8kv_66::after {
    width: 3px;
    height: 28px;
  }
}

._lostDocument_1d8kv_117 {
  position: absolute;
  width: 45px;
  height: 60px;
  background: linear-gradient(135deg, var(--neutral-50, #f9fafb) 0%, var(--neutral-100, #f3f4f6) 100%);
  border: 2px solid var(--neutral-200, #e5e7eb);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0.7;
}
._lostDocument_1d8kv_117::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--neutral-300, #d1d5db) transparent transparent;
}
._lostDocument_1d8kv_117::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 8px;
  right: 8px;
  height: 30px;
  background: repeating-linear-gradient(transparent, transparent 6px, var(--neutral-300, #d1d5db) 6px, var(--neutral-300, #d1d5db) 7px);
  opacity: 0.5;
}

._doc1_1d8kv_149 {
  top: 20%;
  left: 10%;
  transform: rotate(-20deg);
  animation: _floatDoc1_1d8kv_1 4s ease-in-out infinite;
}

._doc2_1d8kv_156 {
  top: 60%;
  right: 15%;
  transform: rotate(15deg);
  animation: _floatDoc2_1d8kv_1 4.5s ease-in-out infinite;
}

._doc3_1d8kv_163 {
  bottom: 15%;
  left: 15%;
  transform: rotate(-10deg);
  animation: _floatDoc3_1d8kv_1 5s ease-in-out infinite;
}

._questionMark_1d8kv_170 {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-400, #60a5fa);
  animation: _pulse_1d8kv_1 2s ease-in-out infinite;
}
@media (max-width: 768px) {
  ._questionMark_1d8kv_170 {
    font-size: 22px;
    top: 10px;
    left: 10px;
  }
}

._errorCode_1d8kv_187 {
  font-size: clamp(96px, 15vw, 140px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--spacing-md, 16px);
  background: linear-gradient(135deg, var(--primary-500, #3b82f6) 0%, var(--primary-700, #1d4ed8) 50%, var(--neutral-700, #374151) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.15));
  animation: _pulse_1d8kv_1 4s ease-in-out infinite;
}

._headline_1d8kv_200 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin-bottom: var(--spacing-sm, 8px);
  line-height: 1.3;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
}

._subtext_1d8kv_209 {
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--neutral-600, #4b5563);
  margin-bottom: var(--spacing-xl, 48px);
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  ._subtext_1d8kv_209 {
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._buttonGroup_1d8kv_224 {
  display: flex;
  gap: var(--spacing-md, 16px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl, 48px);
}
@media (max-width: 768px) {
  ._buttonGroup_1d8kv_224 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._btnPrimary_1d8kv_240,
._btnSecondary_1d8kv_241 {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}
._btnPrimary_1d8kv_240::before,
._btnSecondary_1d8kv_241::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
._btnPrimary_1d8kv_240:active::before,
._btnSecondary_1d8kv_241:active::before {
  width: 300px;
  height: 300px;
}
@media (max-width: 768px) {
  ._btnPrimary_1d8kv_240,
  ._btnSecondary_1d8kv_241 {
    width: 100%;
    padding: 16px 24px;
  }
}

._btnPrimary_1d8kv_240 {
  background: linear-gradient(135deg, var(--primary-500, #3b82f6) 0%, var(--primary-600, #2563eb) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
._btnPrimary_1d8kv_240:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
._btnPrimary_1d8kv_240:active {
  transform: translateY(0);
}

._btnSecondary_1d8kv_241 {
  background: var(--neutral-100, #f3f4f6);
  color: var(--neutral-900, #111827);
  border: 1px solid var(--neutral-200, #e5e7eb);
}
._btnSecondary_1d8kv_241:hover {
  background: var(--neutral-200, #e5e7eb);
  border-color: var(--neutral-300, #d1d5db);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
._btnSecondary_1d8kv_241:active {
  transform: translateY(0);
}

._supportSection_1d8kv_308 {
  padding-top: var(--spacing-lg, 24px);
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  margin: 0 auto;
  max-width: 500px;
}
@media (max-width: 768px) {
  ._supportSection_1d8kv_308 {
    padding-top: var(--spacing-md, 16px);
  }
}

._supportText_1d8kv_320 {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin-bottom: var(--spacing-md, 16px);
  font-weight: 500;
}

._supportLink_1d8kv_327 {
  font-size: 14px;
  color: var(--primary-600, #2563eb);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
._supportLink_1d8kv_327:hover {
  color: var(--primary-700, #1d4ed8);
  text-decoration: underline;
}

._signOutButton_1d8kv_339 {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--neutral-300, #d1d5db);
  background: var(--neutral-50, #f9fafb);
  color: var(--neutral-700, #374151);
  margin-bottom: var(--spacing-sm, 8px);
}
._signOutButton_1d8kv_339:hover {
  background: var(--neutral-100, #f3f4f6);
  border-color: var(--neutral-400, #9ca3af);
}

._signOutHint_1d8kv_357 {
  font-size: 13px;
  color: var(--neutral-400, #9ca3af);
  font-style: italic;
}

@keyframes _fadeInUp_1d8kv_1 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _slowFloat_1d8kv_1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(2deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(-2deg);
  }
}
@keyframes _searchSway_1d8kv_1 {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(10deg);
  }
}
@keyframes _floatDoc1_1d8kv_1 {
  0%, 100% {
    transform: rotate(-20deg) translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: rotate(-20deg) translateY(-12px);
    opacity: 0.9;
  }
}
@keyframes _floatDoc2_1d8kv_1 {
  0%, 100% {
    transform: rotate(15deg) translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: rotate(15deg) translateY(-15px);
    opacity: 0.9;
  }
}
@keyframes _floatDoc3_1d8kv_1 {
  0%, 100% {
    transform: rotate(-10deg) translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: rotate(-10deg) translateY(-10px);
    opacity: 0.9;
  }
}
@keyframes _pulse_1d8kv_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._errorPage_1d8kv_1::before,
  ._searchAnimation_1d8kv_54,
  ._magnifyingGlass_1d8kv_66,
  ._lostDocument_1d8kv_117,
  ._questionMark_1d8kv_170,
  ._errorCode_1d8kv_187,
  ._btnPrimary_1d8kv_240,
  ._btnSecondary_1d8kv_241 {
    animation: none;
  }
  ._btnPrimary_1d8kv_240:hover,
  ._btnSecondary_1d8kv_241:hover {
    transform: none;
  }
}
._btnPrimary_1d8kv_240:focus-visible,
._supportLink_1d8kv_327:focus-visible,
._signOutButton_1d8kv_339:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 2px;
}._errorPage_1i76y_1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  background: radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.012) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.012) 0%, transparent 50%), #FFFFFF;
}
._errorPage_1i76y_1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, rgba(239, 68, 68, 0.008) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(59, 130, 246, 0.008) 0%, transparent 40%);
  animation: _slowFloat_1i76y_1 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

._contentContainer_1i76y_24 {
  position: relative;
  z-index: 1;
  max-width: 650px;
  width: 100%;
  padding: var(--spacing-xl, 48px) var(--spacing-lg, 24px);
  text-align: center;
  animation: _fadeInUp_1i76y_1 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._contentContainer_1i76y_24 {
    padding: var(--spacing-lg, 24px) var(--spacing-md, 16px);
  }
}

._illustrationContainer_1i76y_39 {
  margin-bottom: var(--spacing-xl, 48px);
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  ._illustrationContainer_1i76y_39 {
    height: 150px;
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._animatedDocs_1i76y_54 {
  position: relative;
  width: 180px;
  height: 180px;
}
@media (max-width: 768px) {
  ._animatedDocs_1i76y_54 {
    width: 140px;
    height: 140px;
  }
}

._documentPaper_1i76y_66 {
  position: absolute;
  width: 60px;
  height: 80px;
  background: linear-gradient(135deg, var(--neutral-50, #f9fafb) 0%, var(--neutral-100, #f3f4f6) 100%);
  border: 2px solid var(--neutral-200, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
._documentPaper_1i76y_66::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent var(--neutral-300, #d1d5db) transparent transparent;
}
._documentPaper_1i76y_66::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 10px;
  right: 10px;
  height: 40px;
  background: repeating-linear-gradient(transparent, transparent 8px, var(--neutral-300, #d1d5db) 8px, var(--neutral-300, #d1d5db) 9px);
  opacity: 0.5;
}

._paper1_1i76y_97 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  animation: _floatPaper1_1i76y_1 3s ease-in-out infinite;
  z-index: 3;
}

._paper2_1i76y_105 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(5deg);
  animation: _floatPaper2_1i76y_1 3.5s ease-in-out infinite;
  z-index: 2;
  opacity: 0.9;
}

._paper3_1i76y_114 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  animation: _floatPaper3_1i76y_1 4s ease-in-out infinite;
  z-index: 1;
  opacity: 0.8;
}

._errorCode_1i76y_123 {
  font-size: clamp(96px, 15vw, 140px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--spacing-md, 16px);
  background: linear-gradient(135deg, var(--neutral-700, #374151) 0%, var(--neutral-900, #111827) 50%, var(--primary-600, #2563eb) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
  animation: _pulse_1i76y_1 4s ease-in-out infinite;
}

._headline_1i76y_136 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  color: var(--neutral-900, #111827);
  margin-bottom: var(--spacing-sm, 8px);
  line-height: 1.3;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
}

._subtext_1i76y_145 {
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--neutral-600, #4b5563);
  margin-bottom: var(--spacing-xl, 48px);
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  ._subtext_1i76y_145 {
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._buttonGroup_1i76y_160 {
  display: flex;
  gap: var(--spacing-md, 16px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl, 48px);
}
@media (max-width: 768px) {
  ._buttonGroup_1i76y_160 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-lg, 24px);
  }
}

._btnPrimary_1i76y_176,
._btnSecondary_1i76y_177 {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}
._btnPrimary_1i76y_176::before,
._btnSecondary_1i76y_177::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
._btnPrimary_1i76y_176:active::before,
._btnSecondary_1i76y_177:active::before {
  width: 300px;
  height: 300px;
}
@media (max-width: 768px) {
  ._btnPrimary_1i76y_176,
  ._btnSecondary_1i76y_177 {
    width: 100%;
    padding: 16px 24px;
  }
}

._btnPrimary_1i76y_176 {
  background: linear-gradient(135deg, var(--primary-500, #3b82f6) 0%, var(--primary-600, #2563eb) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
._btnPrimary_1i76y_176:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
._btnPrimary_1i76y_176:active {
  transform: translateY(0);
}

._btnSecondary_1i76y_177 {
  background: var(--neutral-100, #f3f4f6);
  color: var(--neutral-900, #111827);
  border: 1px solid var(--neutral-200, #e5e7eb);
}
._btnSecondary_1i76y_177:hover {
  background: var(--neutral-200, #e5e7eb);
  border-color: var(--neutral-300, #d1d5db);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
._btnSecondary_1i76y_177:active {
  transform: translateY(0);
}

._supportSection_1i76y_244 {
  padding-top: var(--spacing-lg, 24px);
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  margin: 0 auto;
  max-width: 500px;
}
@media (max-width: 768px) {
  ._supportSection_1i76y_244 {
    padding-top: var(--spacing-md, 16px);
  }
}

._supportText_1i76y_256 {
  font-size: 14px;
  color: var(--neutral-500, #6b7280);
  margin-bottom: var(--spacing-md, 16px);
  font-weight: 500;
}

._supportLink_1i76y_263 {
  font-size: 14px;
  color: var(--primary-600, #2563eb);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
._supportLink_1i76y_263:hover {
  color: var(--primary-700, #1d4ed8);
  text-decoration: underline;
}

._signOutButton_1i76y_275 {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--neutral-300, #d1d5db);
  background: var(--neutral-50, #f9fafb);
  color: var(--neutral-700, #374151);
  margin-bottom: var(--spacing-sm, 8px);
}
._signOutButton_1i76y_275:hover {
  background: var(--neutral-100, #f3f4f6);
  border-color: var(--neutral-400, #9ca3af);
}

._signOutHint_1i76y_293 {
  font-size: 13px;
  color: var(--neutral-400, #9ca3af);
  font-style: italic;
}

._devDetails_1i76y_299 {
  margin-top: var(--spacing-xl, 48px);
  text-align: left;
}
._devDetails_1i76y_299 summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-700, #374151);
  padding: var(--spacing-sm, 8px);
  border-radius: 6px;
  transition: background 0.2s ease;
}
._devDetails_1i76y_299 summary:hover {
  background: var(--neutral-100, #f3f4f6);
}

._errorDetailsBox_1i76y_316 {
  margin-top: var(--spacing-md, 16px);
  padding: var(--spacing-md, 16px);
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

._errorMessage_1i76y_326 {
  font-size: 13px;
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  color: var(--negative-600, #dc2626);
  margin-bottom: var(--spacing-sm, 8px);
  word-break: break-word;
}

._errorStack_1i76y_334 {
  font-size: 12px;
  font-family: "Monaco", "Menlo", "Courier New", monospace;
  color: var(--neutral-600, #4b5563);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

@keyframes _fadeInUp_1i76y_1 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _slowFloat_1i76y_1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(2deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(-2deg);
  }
}
@keyframes _floatPaper1_1i76y_1 {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-15deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-15deg) translateY(-10px);
  }
}
@keyframes _floatPaper2_1i76y_1 {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(5deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(5deg) translateY(-15px);
  }
}
@keyframes _floatPaper3_1i76y_1 {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(12deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(12deg) translateY(-8px);
  }
}
@keyframes _pulse_1i76y_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._errorPage_1i76y_1::before,
  ._animatedDocs_1i76y_54,
  ._documentPaper_1i76y_66,
  ._errorCode_1i76y_123,
  ._btnPrimary_1i76y_176,
  ._btnSecondary_1i76y_177 {
    animation: none;
  }
  ._btnPrimary_1i76y_176:hover,
  ._btnSecondary_1i76y_177:hover {
    transform: none;
  }
}
._btnPrimary_1i76y_176:focus-visible,
._supportLink_1i76y_263:focus-visible,
._signOutButton_1i76y_275:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 2px;
}._splashPage_t1vvl_1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.012) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.012) 0%, transparent 50%), #FFFFFF;
}
._splashPage_t1vvl_1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.008) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(168, 85, 247, 0.008) 0%, transparent 40%);
  animation: _slowFloat_t1vvl_1 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

._contentContainer_t1vvl_24 {
  position: relative;
  z-index: 1;
  max-width: 500px;
  width: 100%;
  padding: var(--spacing-xl, 48px) var(--spacing-lg, 24px);
  text-align: center;
  animation: _fadeInUp_t1vvl_1 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._contentContainer_t1vvl_24 {
    padding: var(--spacing-lg, 24px) var(--spacing-md, 16px);
  }
}

._logoContainer_t1vvl_39 {
  margin-bottom: var(--spacing-xl, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  ._logoContainer_t1vvl_39 {
    margin-bottom: var(--spacing-lg, 28px);
  }
}

._logo_t1vvl_39 {
  height: 48px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  animation: _logoFadeIn_t1vvl_1 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._logo_t1vvl_39 {
    height: 40px;
    max-width: 240px;
  }
}

._tagline_t1vvl_65 {
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--neutral-600, #4b5563);
  margin-bottom: var(--spacing-xl, 48px);
  line-height: 1.6;
  font-weight: 500;
  animation: _fadeIn_t1vvl_1 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._tagline_t1vvl_65 {
    margin-bottom: var(--spacing-lg, 32px);
  }
}

._loadingSection_t1vvl_79 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg, 24px);
}

._spinnerContainer_t1vvl_86 {
  position: relative;
  width: 56px;
  height: 56px;
}
@media (max-width: 768px) {
  ._spinnerContainer_t1vvl_86 {
    width: 48px;
    height: 48px;
  }
}

._spinner_t1vvl_86 {
  width: 100%;
  height: 100%;
  border: 4px solid var(--neutral-200, #e5e7eb);
  border-top-color: var(--primary-500, #3b82f6);
  border-radius: 50%;
  animation: _spin_t1vvl_86 1s linear infinite;
}
@media (max-width: 768px) {
  ._spinner_t1vvl_86 {
    border-width: 3px;
  }
}

._spinnerDot_t1vvl_112 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--primary-500, #3b82f6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: _pulse_t1vvl_1 2s ease-in-out infinite;
}
@media (max-width: 768px) {
  ._spinnerDot_t1vvl_112 {
    width: 6px;
    height: 6px;
  }
}

._loadingText_t1vvl_130 {
  font-size: 15px;
  color: var(--neutral-500, #6b7280);
  font-weight: 500;
  animation: _pulse_t1vvl_1 2s ease-in-out infinite;
}
@media (max-width: 768px) {
  ._loadingText_t1vvl_130 {
    font-size: 14px;
  }
}

._progressDots_t1vvl_142 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-md, 16px);
}

._dot_t1vvl_150 {
  width: 8px;
  height: 8px;
  background: var(--primary-500, #3b82f6);
  border-radius: 50%;
  animation: _bounce_t1vvl_1 1.4s ease-in-out infinite;
}
._dot_t1vvl_150:nth-child(2) {
  animation-delay: 0.2s;
}
._dot_t1vvl_150:nth-child(3) {
  animation-delay: 0.4s;
}
@media (max-width: 768px) {
  ._dot_t1vvl_150 {
    width: 6px;
    height: 6px;
  }
}

@keyframes _fadeInUp_t1vvl_1 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_t1vvl_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _logoFadeIn_t1vvl_1 {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _slowFloat_t1vvl_1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(2deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(-2deg);
  }
}
@keyframes _spin_t1vvl_86 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes _pulse_t1vvl_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes _bounce_t1vvl_1 {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._splashPage_t1vvl_1::before,
  ._logo_t1vvl_39,
  ._spinner_t1vvl_86,
  ._spinnerDot_t1vvl_112,
  ._loadingText_t1vvl_130,
  ._dot_t1vvl_150,
  ._contentContainer_t1vvl_24 {
    animation: none;
  }
}/**
 * RouteTransitionLoader Styles
 * Minimal, non-intrusive loading indicator for route transitions
 *
 * Design: Transparent overlay that shows current page underneath with
 * a subtle loading indicator on top - not a full screen replacement
 */
._routeTransitionLoader_y2p5u_8 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  /* Very transparent overlay - user can see current page underneath */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1px);
  animation: _fadeIn_y2p5u_1 0.2s ease-in;
}

/* Top progress bar */
._progressBar_y2p5u_22 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

._progressBarFill_y2p5u_32 {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
  background-size: 200% 100%;
  animation: _progressSlide_y2p5u_1 1.5s ease-in-out infinite;
  width: 40%;
  transform: translateX(-100%);
  animation: _progressMove_y2p5u_1 1.2s ease-in-out infinite;
}

@keyframes _progressMove_y2p5u_1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
@keyframes _progressSlide_y2p5u_1 {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
/* Centered content */
._centerContent_y2p5u_59 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

._spinnerContainer_y2p5u_66 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  /* Semi-transparent background with subtle blur - not a solid square */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  /* Subtle shadow for depth, not heavy */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  animation: _slideUp_y2p5u_1 0.3s ease-out;
}

._spinner_y2p5u_66 {
  color: #3b82f6;
  animation: _spin_y2p5u_66 1s linear infinite;
}

@keyframes _spin_y2p5u_66 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._loadingText_y2p5u_94 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.025em;
}

@keyframes _fadeIn_y2p5u_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_y2p5u_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
  ._routeTransitionLoader_y2p5u_8 {
    /* Very transparent dark overlay - user can see current page underneath */
    background: rgba(0, 0, 0, 0.2);
  }
  ._progressBar_y2p5u_22 {
    background: rgba(255, 255, 255, 0.1);
  }
  ._spinnerContainer_y2p5u_66 {
    /* Semi-transparent dark background with blur */
    background: rgba(31, 41, 55, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  ._loadingText_y2p5u_94 {
    color: #9ca3af;
  }
}._pdfViewer_1dcgm_1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}

._pdfContent_1dcgm_9 {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  position: relative;
  background: transparent;
}

._documentContainer_1dcgm_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  position: relative;
  width: 100%;
}

._allPages_1dcgm_29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

._pageWrapper_1dcgm_37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}
._pageWrapper_1dcgm_37 ._react-pdf__Page_1dcgm_44 {
  position: relative;
  margin-bottom: 0;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
._pageWrapper_1dcgm_37 ._react-pdf__Page__canvas_1dcgm_50 {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

._pageSeparator_1dcgm_58 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 40px 0;
  gap: 16px;
}

._separatorLine_1dcgm_68 {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #cbd5e1, transparent);
}

._separatorText_1dcgm_74 {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 0 8px;
}

._interactiveSeparator_1dcgm_84 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 700px;
  margin: 32px 0;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}
._interactiveSeparator_1dcgm_84:hover {
  background: rgba(59, 130, 246, 0.05);
}
._interactiveSeparator_1dcgm_84._expanded_1dcgm_99 {
  background: rgba(59, 130, 246, 0.08);
  padding: 12px 16px;
  margin: 24px 0;
}
._interactiveSeparator_1dcgm_84._dragging_1dcgm_104 {
  cursor: ns-resize;
  background: rgba(59, 130, 246, 0.12);
}

._separatorContent_1dcgm_109 {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

._sectionBadge_1dcgm_116 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
._sectionBadge_1dcgm_116 ._breakIcon_1dcgm_129 {
  color: #3b82f6;
}
._sectionBadge_1dcgm_116 ._sectionName_1dcgm_132 {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
._sectionBadge_1dcgm_116 ._spacingBadge_1dcgm_138 {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
._sectionBadge_1dcgm_116 ._spacingBadge_1dcgm_138._positive_1dcgm_144 {
  background: #dcfce7;
  color: #166534;
}
._sectionBadge_1dcgm_116 ._spacingBadge_1dcgm_138._negative_1dcgm_148 {
  background: #fee2e2;
  color: #991b1b;
}

._expandedControls_1dcgm_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  width: 100%;
}

._breakToggle_1dcgm_164 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
._breakToggle_1dcgm_164:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
._breakToggle_1dcgm_164._active_1dcgm_182 {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}
._breakToggle_1dcgm_164._active_1dcgm_182:hover {
  background: #dbeafe;
}
._breakToggle_1dcgm_164 svg {
  flex-shrink: 0;
}

._spacingControl_1dcgm_194 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._spacingControl_1dcgm_194 ._spacingLabel_1dcgm_199 {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}
._spacingControl_1dcgm_194 ._dragHandle_1dcgm_204 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: ns-resize;
  user-select: none;
  transition: all 0.15s ease;
}
._spacingControl_1dcgm_194 ._dragHandle_1dcgm_204:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
}
._spacingControl_1dcgm_194 ._dragHandle_1dcgm_204:active {
  background: #eff6ff;
  border-color: #3b82f6;
}
._spacingControl_1dcgm_194 ._dragHandle_1dcgm_204 svg {
  color: #94a3b8;
}
._spacingControl_1dcgm_194 ._dragHandle_1dcgm_204 ._spacingValue_1dcgm_227 {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  min-width: 50px;
  text-align: center;
}
._spacingControl_1dcgm_194 ._resetButton_1dcgm_234 {
  padding: 4px 8px;
  background: transparent;
  border: none;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease;
}
._spacingControl_1dcgm_194 ._resetButton_1dcgm_234:hover {
  color: #ef4444;
}

._loadingState_1dcgm_247,
._pageLoading_1dcgm_248 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #64748b;
}

._loadingState_1dcgm_247 {
  height: 200px;
}

._pageLoading_1dcgm_248 {
  height: 600px;
  width: 500px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

._errorState_1dcgm_269,
._pageError_1dcgm_270 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #ef4444;
  text-align: center;
}

._errorState_1dcgm_269 {
  height: 200px;
}

._pageError_1dcgm_270 {
  height: 600px;
  width: 500px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

._errorMessage_1dcgm_292 {
  margin-bottom: 16px;
  font-weight: 500;
}

._emptyState_1dcgm_297 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #64748b;
  font-size: 16px;
}

._spinner_1dcgm_306 {
  width: 24px;
  height: 24px;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: _spin_1dcgm_306 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes _spin_1dcgm_306 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  ._toolbar_1dcgm_325 {
    padding: 6px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  ._toolbarLeft_1dcgm_330,
  ._toolbarRight_1dcgm_331 {
    flex: 1;
    min-width: 0;
  }
  ._documentInfo_1dcgm_335 {
    font-size: 12px;
  }
  ._pdfContent_1dcgm_9 {
    padding: 16px;
  }
  ._documentHeader_1dcgm_341 {
    padding: 12px;
    margin-bottom: 16px;
  }
  ._documentTitle_1dcgm_345 {
    font-size: 13px;
  }
  ._pageIndicator_1dcgm_348 {
    font-size: 10px;
    padding: 3px 8px;
  }
  ._pageSeparator_1dcgm_58 {
    margin: 24px 0;
  }
  ._separatorText_1dcgm_74 {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  ._toolbar_1dcgm_325 {
    padding: 6px 8px;
  }
  ._zoomControls_1dcgm_363 {
    gap: 2px;
  }
  ._zoomLevel_1dcgm_366 {
    min-width: 50px;
    font-size: 12px;
  }
  ._pdfContent_1dcgm_9 {
    padding: 12px;
  }
  ._documentHeader_1dcgm_341 {
    padding: 8px;
    margin-bottom: 12px;
  }
  ._pageSeparator_1dcgm_58 {
    margin: 16px 0;
    gap: 12px;
  }
  ._pageIndicator_1dcgm_348 {
    left: 8px;
    font-size: 9px;
    padding: 2px 6px;
  }
}._panel_1hiiy_1 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: none;
  max-height: 100%;
}
._panel_1hiiy_1._regenerating_1hiiy_9 {
  opacity: 0.7;
  pointer-events: none;
}

._sectionList_1hiiy_14 {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

._sectionItem_1hiiy_20 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem 0.5rem;
  margin-bottom: 0.375rem;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
._sectionItem_1hiiy_20:last-child {
  margin-bottom: 0;
}
._sectionItem_1hiiy_20:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
._sectionItem_1hiiy_20._highlighted_1hiiy_39 {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
._sectionItem_1hiiy_20._hasBreak_1hiiy_44 {
  border-left: 3px solid #3b82f6;
  padding-left: calc(0.625rem - 2px);
}

._sectionInfo_1hiiy_49 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._sectionName_1hiiy_55 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

._sectionIndex_1hiiy_63 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  flex-shrink: 0;
}

._name_1hiiy_70 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._controls_1hiiy_79 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
}

._controlGroup_1hiiy_88 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

._controlLabel_1hiiy_94 {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

._breakToggle_1hiiy_100 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
._breakToggle_1hiiy_100:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
._breakToggle_1hiiy_100._active_1hiiy_118 {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}
._breakToggle_1hiiy_100._active_1hiiy_118 svg {
  color: #2563eb;
}
._breakToggle_1hiiy_100 svg {
  color: #94a3b8;
}

._checkmark_1hiiy_130 {
  color: #22c55e;
  font-weight: 600;
  margin-left: 0.25rem;
}

._spacingStepper_1hiiy_136 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 0.25rem;
}

._stepperBtn_1hiiy_145 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  color: #334155;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
._stepperBtn_1hiiy_145 svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
._stepperBtn_1hiiy_145:hover {
  background: #e2e8f0;
  color: #1e293b;
}

._spacingValue_1hiiy_170 {
  min-width: 48px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  padding: 0 0.25rem;
}
._spacingValue_1hiiy_170._positive_1hiiy_178 {
  color: #059669;
}
._spacingValue_1hiiy_170._negative_1hiiy_181 {
  color: #dc2626;
}

._emptyState_1hiiy_185 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #94a3b8;
  font-size: 0.875rem;
}
._emptyState_1hiiy_185 p {
  margin: 0;
}

@media (max-width: 768px) {
  ._panel_1hiiy_1 {
    min-width: 100%;
    max-width: 100%;
    max-height: 300px;
  }
}/* =============================================================================
   PDF EXPORT PAGE STYLES - PHASE 3 MVP
   ============================================================================= */
/* Container and Layout */
._container_1s5nt_5 {
  background: #f8fafc;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 768px) {
  ._container_1s5nt_5 {
    background: white;
  }
}

/* Main Content Layout */
._content_1s5nt_21 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); /* Increased panel width */
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

/* Layout Editor */
._layoutEditor_1s5nt_35 {
  background: white;
  padding: 1.25rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

._editorContainer_1s5nt_47 {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* Configuration Panel */
._configPanel_1s5nt_55 {
  background: white;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  max-height: none;
  overflow: auto;
}

._configPanelDesktop_1s5nt_69 {
  display: block;
}

._panelContent_1s5nt_73 {
  flex: 1;
  overflow-y: auto;
  padding-right: 1rem; /* Increased padding for gutter */
  min-height: 0;
  scrollbar-gutter: stable both-edges;
}

._panelHeader_1s5nt_81 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

._headerActions_1s5nt_89 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._mobileCloseButton_1s5nt_95 {
  display: none;
}

/* Temporary Settings Notice */
._tempNotice_1s5nt_100 {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #fef3c7;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
._tempNotice_1s5nt_100 svg {
  color: #d97706;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
._tempNotice_1s5nt_100 span {
  font-size: 0.8125rem;
  color: #92400e;
  line-height: 1.4;
}

@media (max-width: 768px) {
  ._mobileCloseButton_1s5nt_95 {
    display: flex;
  }
}
@media (max-width: 1024px) {
  ._configPanelDesktop_1s5nt_69 {
    display: none;
  }
  ._mobileConfigToggle_1s5nt_129 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
}
._sectionTitle_1s5nt_135 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

._saveStatus_1s5nt_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  min-width: fit-content;
}

._saving_1s5nt_153 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #3b82f6;
  font-weight: 500;
}

._saveIcon_1s5nt_161 {
  animation: _spin_1s5nt_452 1s linear infinite;
}

@keyframes _spin_1s5nt_452 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._saved_1s5nt_173 {
  color: #059669;
  font-weight: 500;
}

._sectionIcon_1s5nt_178 {
  color: #2563eb;
}

._configGroup_1s5nt_182 {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #f1f5f9;
}
._configGroup_1s5nt_182:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* Section Headers */
._sectionHeader_1s5nt_193 {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Reduced gap */
  margin-bottom: 0.5rem;
}

._sectionHeaderIcon_1s5nt_200 {
  color: #3b82f6;
  width: 20px;
  height: 20px;
}

._sectionDesc_1s5nt_206 {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 1.25rem 0; /* Reduced margin */
  line-height: 1.5;
}

._label_1s5nt_213 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* Options Grid */
._optionsGrid_1s5nt_221 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

._optionCard_1s5nt_227 {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.875rem 1rem; /* Adjusted padding */
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.875rem; /* Adjusted gap */
  position: relative;
}
._optionCard_1s5nt_227:hover {
  border-color: #94a3b8;
}
._optionCard_1s5nt_227._selected_1s5nt_242 {
  border-color: #2563eb;
  background: #eff6ff;
}
._optionCard_1s5nt_227._selected_1s5nt_242 ._optionTitle_1s5nt_246 {
  color: #1e40af;
}
._optionCard_1s5nt_227._selected_1s5nt_242 ._optionIcon_1s5nt_249 {
  color: #2563eb;
  background: #dbeafe;
}

._hiddenCheckbox_1s5nt_254 {
  display: none;
}

._optionIcon_1s5nt_249 {
  font-size: 1.25rem; /* Adjusted size */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

._optionTitle_1s5nt_246 {
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.125rem;
  font-size: 0.9rem;
}

._optionDesc_1s5nt_279 {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.3;
}

/* Typography Scaling */
._scaleGroup_1s5nt_286 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._scaleControl_1s5nt_292 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
}

._scaleLabel_1s5nt_299 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

._stepper_1s5nt_308 {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.25rem;
}

._stepperButton_1s5nt_316 {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
._stepperButton_1s5nt_316:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
._stepperButton_1s5nt_316:active {
  background: #e2e8f0;
}

._stepperValue_1s5nt_336 {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.85rem;
  padding: 0 0.75rem; /* Use padding instead of min-width */
  text-align: center;
}

._stepperValueContainer_1s5nt_344 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.75rem;
}

._scaleDescription_1s5nt_351 {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 400;
  margin-top: 0.125rem;
  text-align: center;
  line-height: 1.2;
}

/* Scale Controls - Horizontal layout for +/- buttons */
._scaleControls_1s5nt_361 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--neutral-100, #f1f5f9);
  border-radius: 8px;
  padding: 0.25rem;
}

._scaleValue_1s5nt_370 {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--neutral-900, #1e293b);
}

/* Select Input - Design system styling */
._selectInput_1s5nt_382 {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--neutral-300, #e2e8f0);
  border-radius: 8px;
  background: white;
  color: var(--neutral-900, #1e293b);
  font-size: 0.875rem;
  min-width: 150px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
._selectInput_1s5nt_382:hover {
  border-color: var(--neutral-400, #94a3b8);
}
._selectInput_1s5nt_382:focus {
  outline: none;
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
._selectInput_1s5nt_382 option {
  color: var(--neutral-900, #1e293b);
  background: white;
}

/* Segmented Control - For binary choices like color mode */
._segmentedControl_1s5nt_407 {
  display: flex;
  background: var(--neutral-100, #f1f5f9);
  border-radius: 8px;
  padding: 0.25rem;
  gap: 0.25rem;
}

._segment_1s5nt_407 {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-600, #475569);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
._segment_1s5nt_407:hover:not(._segmentActive_1s5nt_428) {
  background: var(--neutral-200, #e2e8f0);
}

._segmentActive_1s5nt_428 {
  background: white;
  color: var(--neutral-900, #1e293b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Loading and Error States */
._loading_1s5nt_439 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
}
._loading_1s5nt_439 h2 {
  color: #64748b;
  font-weight: 500;
}

._spinner_1s5nt_452 {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: _spin_1s5nt_452 1s linear infinite;
}

@keyframes _spin_1s5nt_452 {
  to {
    transform: rotate(360deg);
  }
}
._error_1s5nt_466 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1.5rem;
  text-align: center;
}
._error_1s5nt_466 h2 {
  color: #ef4444;
  margin: 0;
}

/* Page Break Controls */
._breakControls_1s5nt_481 {
  /* max-height and overflow removed to prevent nested scrolling */
}

._sectionBreaks_1s5nt_485 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._sectionBreakItem_1s5nt_491 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s;
}
._sectionBreakItem_1s5nt_491:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

._sectionHeader_1s5nt_193 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._sectionName_1s5nt_512 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

._sectionIndex_1s5nt_518 {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  align-self: flex-start;
}

/* Page Break Toggles */
._pageBreakToggles_1s5nt_526 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._pageBreakOption_1s5nt_532 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s;
}
._pageBreakOption_1s5nt_532:hover {
  background: rgba(59, 130, 246, 0.05);
}
._pageBreakOption_1s5nt_532 input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3b82f6;
}
._pageBreakOption_1s5nt_532 span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
}

/* Page Break Cards */
._pageBreakCards_1s5nt_557 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

._pageBreakCard_1s5nt_557 {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._cardHeader_1s5nt_572 {
  margin-bottom: 0.75rem;
}

._cardTitle_1s5nt_576 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
}

._marginControls_1s5nt_582 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._marginLabel_1s5nt_588 {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

._marginButtons_1s5nt_594 {
  display: flex;
  gap: 0.25rem;
}

._marginBtn_1s5nt_599 {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
._marginBtn_1s5nt_599:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
._marginBtn_1s5nt_599:active {
  background: #f3f4f6;
  transform: translateY(1px);
}

._customMargin_1s5nt_619 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

._marginSliderContainer_1s5nt_626 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

._sliderLabel_1s5nt_633 {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
}

._marginSlider_1s5nt_626 {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #f87171 0%, #fbbf24 50%, #34d399 100%);
  outline: none;
  cursor: pointer;
}
._marginSlider_1s5nt_626::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease;
}
._marginSlider_1s5nt_626::-webkit-slider-thumb:hover {
  background: #2563eb;
  transform: scale(1.1);
}
._marginSlider_1s5nt_626::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
._marginSlider_1s5nt_626::-moz-range-thumb:hover {
  background: #2563eb;
}
._marginSlider_1s5nt_626._negative_1s5nt_674::-webkit-slider-thumb {
  background: #ef4444;
}
._marginSlider_1s5nt_626._negative_1s5nt_674::-webkit-slider-thumb:hover {
  background: #dc2626;
}
._marginSlider_1s5nt_626._negative_1s5nt_674::-moz-range-thumb {
  background: #ef4444;
}
._marginSlider_1s5nt_626._negative_1s5nt_674::-moz-range-thumb:hover {
  background: #dc2626;
}

._sliderIndicators_1s5nt_687 {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

._negativeZone_1s5nt_695 {
  color: #f87171;
}

._zeroPoint_1s5nt_699 {
  color: #fbbf24;
  font-weight: 500;
}

._positiveZone_1s5nt_704 {
  color: #34d399;
}

._marginInput_1s5nt_708 {
  width: 80px;
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  background: white;
  text-align: center;
}
._marginInput_1s5nt_708:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._breakOptions_1s5nt_723 {
  display: flex;
  flex-direction: column; /* Stack before/after controls */
  gap: 0.75rem;
  width: 100%;
}

._breakControlGroup_1s5nt_730 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Push margin input to the right */
  width: 100%;
}

._marginInput_1s5nt_708 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
._marginInput_1s5nt_708 input {
  width: 60px; /* Wider input */
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: white;
  text-align: right;
}
._marginInput_1s5nt_708 input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
._marginInput_1s5nt_708 span {
  font-size: 0.75rem;
  color: #94a3b8;
}

._miniCheckbox_1s5nt_761 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: #475569;
}
._miniCheckbox_1s5nt_761 input[type=checkbox] {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: #2563eb;
  cursor: pointer;
}
._miniCheckbox_1s5nt_761 span {
  white-space: nowrap;
}

/* New Spacing Controls */
._spacingControls_1s5nt_780 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._spacingRow_1s5nt_786 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._spacingLabel_1s5nt_792 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 110px;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
._spacingLabel_1s5nt_792 svg {
  color: #94a3b8;
}

._spacingInputGroup_1s5nt_805 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._presetButtons_1s5nt_812 {
  display: flex;
  gap: 0.25rem;
}

._presetBtn_1s5nt_817 {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
._presetBtn_1s5nt_817:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
._presetBtn_1s5nt_817:active {
  transform: translateY(0);
}

._customInput_1s5nt_837 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
._customInput_1s5nt_837 input {
  width: 70px;
  padding: 0.375rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background: white;
  transition: border-color 0.15s;
}
._customInput_1s5nt_837 input:focus {
  outline: none;
  border-color: var(--wz-color-primary);
  box-shadow: 0 0 0 3px var(--wz-color-primary-10);
}
._customInput_1s5nt_837 span {
  font-size: 0.75rem;
  color: #94a3b8;
}

._pageBreakToggle_1s5nt_526 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}
._pageBreakToggle_1s5nt_526:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
._pageBreakToggle_1s5nt_526 input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
._pageBreakToggle_1s5nt_526 span {
  font-size: 0.8rem;
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
}

._spacingIndicator_1s5nt_888 {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(90deg, #f0f9ff 0%, #f8fafc 100%);
  border-radius: 0.375rem;
  margin-top: 0.5rem;
}

._spacingValue_1s5nt_897 {
  font-size: 0.75rem;
  color: #0284c7;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsive Design */
/* Tablet Layout (768px - 1100px): Full-width canvas + collapsible overlay */
@media (max-width: 1100px) {
  ._content_1s5nt_21 {
    grid-template-columns: 1fr; /* Full-width canvas */
    gap: 0;
    padding: 1rem;
  }
  ._layoutEditor_1s5nt_35 {
    min-height: 70vh;
    padding: 1rem;
  }
  /* Hide desktop config panel on tablet - use overlay instead */
  ._configPanelDesktop_1s5nt_69 {
    display: none !important;
  }
}
/* Legacy styles for 1200px (keeping for gradual transition, can be removed) */
@media (max-width: 1200px) and (min-width: 1101px) {
  ._content_1s5nt_21 {
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  ._content_1s5nt_21 {
    padding: 1rem;
    grid-template-rows: auto 1fr;
  }
  ._layoutEditor_1s5nt_35 {
    padding: 0.75rem;
    min-height: 40vh;
  }
  ._configPanel_1s5nt_55 {
    max-height: none; /* Remove max-height for mobile */
  }
  ._optionsGrid_1s5nt_221 {
    grid-template-columns: 1fr;
  }
}
/* Mobile Configurator Toggle */
._mobileConfigToggle_1s5nt_129 {
  display: none;
  position: fixed;
  top: 4.25rem;
  right: 1rem;
  z-index: 1001;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
  ._content_1s5nt_21 {
    padding: 0.75rem;
  }
  ._optionCard_1s5nt_227 {
    padding: 0.75rem;
  }
  ._sectionHeader_1s5nt_193 {
    gap: 0.5rem;
  }
  ._sectionHeaderIcon_1s5nt_200 {
    font-size: 1rem;
    width: 18px;
    height: 18px;
  }
}
/* Bottom Sheet styles */
._configSheet_1s5nt_976 {
  border-radius: 18px 18px 0 0;
  padding: 1rem;
  max-height: 80vh;
  overflow: hidden;
}

._sheetBody_1s5nt_983 {
  overflow-y: auto;
  max-height: calc(80vh - 140px);
  padding-bottom: 1rem;
}

._sheetTitle_1s5nt_989 {
  margin: 0;
}

._sheetDescription_1s5nt_993 {
  margin: 0.25rem 0 0;
  color: #475569;
}

/* =============================================================================
   PDF PREVIEW SECTION STYLES
   ============================================================================= */
/* Preview Header */
._previewHeader_1s5nt_1002 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
._previewHeader_1s5nt_1002 h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
}

._previewControls_1s5nt_1018 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

._zoomLevel_1s5nt_1024 {
  min-width: 60px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Preview Container */
._previewContainer_1s5nt_1031 {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: #f1f5f9;
  min-height: 0;
  max-height: 80vh;
  min-height: 75vh;
  position: relative; /* For regenerating overlay positioning */
}

._previewLoading_1s5nt_1045,
._previewError_1s5nt_1046,
._previewEmpty_1s5nt_1047 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: #64748b;
  min-height: 300px;
}
._previewLoading_1s5nt_1045 p,
._previewError_1s5nt_1046 p,
._previewEmpty_1s5nt_1047 p {
  margin: 0;
  font-size: 0.95rem;
}

._previewError_1s5nt_1046 {
  color: #ef4444;
}
._previewError_1s5nt_1046 p {
  color: #ef4444;
}

._spinning_1s5nt_1072 {
  animation: _spin_1s5nt_452 1s linear infinite;
}

/* Regenerating Overlay - Shows immediately when config changes */
._regeneratingOverlay_1s5nt_1077 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}

._regeneratingContent_1s5nt_1091 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #3b82f6;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Hero Image Settings - Preset Controls */
._settingRow_1s5nt_1105 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}
._settingRow_1s5nt_1105:last-child {
  border-bottom: none;
}

._settingLabel_1s5nt_1116 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
}

._presetButtons_1s5nt_812 {
  display: flex;
  gap: 0.25rem;
}

._presetBtn_1s5nt_817 {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
._presetBtn_1s5nt_817:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
._presetBtn_1s5nt_817._selected_1s5nt_242 {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

/* Font Settings */
._fontSettings_1s5nt_1149 {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

._fontSettingsLabel_1s5nt_1155 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 0.75rem 0;
}

._fontSelectRow_1s5nt_1165 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f1f5f9;
}
._fontSelectRow_1s5nt_1165:last-child {
  border-bottom: none;
}

._fontSelect_1s5nt_1165 {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #334155;
  cursor: pointer;
  min-width: 180px;
  transition: all 0.15s;
}
._fontSelect_1s5nt_1165:hover {
  border-color: #cbd5e1;
}
._fontSelect_1s5nt_1165:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Toggle Switch */
._toggle_1s5nt_1198 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._toggle_1s5nt_1198 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._toggle_1s5nt_1198 input:checked + ._toggleSlider_1s5nt_1210 {
  background-color: #2563eb;
}
._toggle_1s5nt_1198 input:checked + ._toggleSlider_1s5nt_1210::before {
  transform: translateX(20px);
}
._toggle_1s5nt_1198 input:focus + ._toggleSlider_1s5nt_1210 {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._toggleSlider_1s5nt_1210 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  border-radius: 24px;
  transition: 0.2s;
}
._toggleSlider_1s5nt_1210::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Color Picker Settings */
._colorRow_1s5nt_1245 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f1f5f9;
}
._colorRow_1s5nt_1245:last-child {
  border-bottom: none;
}

._colorInputWrapper_1s5nt_1256 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._colorInput_1s5nt_1256 {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
}
._colorInput_1s5nt_1256::-webkit-color-swatch-wrapper {
  padding: 0;
}
._colorInput_1s5nt_1256::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
._colorInput_1s5nt_1256::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}
._colorInput_1s5nt_1256:hover {
  border-color: #94a3b8;
  transform: scale(1.05);
}
._colorInput_1s5nt_1256:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

._colorValue_1s5nt_1293 {
  font-size: 0.8rem;
  font-family: "SF Mono", "Fira Code", monospace;
  color: #64748b;
  text-transform: uppercase;
  min-width: 70px;
}

._resetColorsBtn_1s5nt_1301 {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
._resetColorsBtn_1s5nt_1301:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* =============================================================================
   MOBILE-SPECIFIC STYLES (< 768px)
   ============================================================================= */
/* Mobile Header - Compact header with back, download, and settings */
._mobileHeader_1s5nt_1326 {
  display: none;
}
@media (max-width: 768px) {
  ._mobileHeader_1s5nt_1326 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    gap: 0.5rem;
    background: white;
  }
  ._mobileHeader_1s5nt_1326 button:first-child {
    margin-right: auto;
    margin-left: 20vw;
  }
}

/* Mobile Preview Area - Takes 75-80% of screen (MOBILE ONLY) */
._previewArea_1s5nt_1347 {
  display: none; /* Hidden on desktop */
}
@media (max-width: 768px) {
  ._previewArea_1s5nt_1347 {
    display: flex; /* Show on mobile */
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
}

/* Zoom Controls - MOBILE ONLY */
._zoomControls_1s5nt_1361 {
  display: none; /* Hidden on desktop */
}
@media (max-width: 768px) {
  ._zoomControls_1s5nt_1361 {
    display: flex; /* Show on mobile */
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
}

/* PDF Container - MOBILE ONLY */
._pdfContainer_1s5nt_1378 {
  display: none; /* Hidden on desktop */
}
@media (max-width: 768px) {
  ._pdfContainer_1s5nt_1378 {
    display: block; /* Show on mobile */
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #f8fafc;
    width: 100%;
    height: 100%;
    position: relative;
  }
  ._pdfContainer_1s5nt_1378 > div {
    min-width: min-content;
    width: fit-content;
  }
}

/* Configuration Sheet */
._configSheet_1s5nt_976 {
  max-height: 85vh;
  overflow-y: auto;
}
@media (max-width: 768px) {
  ._configSheet_1s5nt_976 {
    border-radius: 16px 16px 0 0;
  }
}

._sheetTitle_1s5nt_989 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

._sheetDescription_1s5nt_993 {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

._sheetBody_1s5nt_983 {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Hide desktop elements on mobile */
@media (max-width: 768px) {
  ._configPanel_1s5nt_55,
  ._configPanelDesktop_1s5nt_69 {
    display: none !important;
  }
  ._content_1s5nt_21 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  ._layoutEditor_1s5nt_35 {
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  ._previewHeader_1s5nt_1002 {
    display: none;
  }
  ._previewContainer_1s5nt_1031 {
    height: 100%;
    width: 100%;
    overflow: visible;
    padding: 0;
    align-items: flex-start;
  }
}
/* Simple Header - Compact title with download button */
._simpleHeader_1s5nt_1457 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: white;
}
@media (max-width: 768px) {
  ._simpleHeader_1s5nt_1457 {
    display: none;
  }
}

._pageTitle_1s5nt_1471 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

/* Header buttons container */
._headerButtons_1s5nt_1479 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Config toggle in header - only visible on tablet */
._headerConfigToggle_1s5nt_1486 {
  display: none; /* Hidden by default (desktop) */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Only show on tablet (768px - 1100px) */
}
@media (min-width: 769px) and (max-width: 1100px) {
  ._headerConfigToggle_1s5nt_1486 {
    display: flex;
  }
}
._headerConfigToggle_1s5nt_1486:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
._headerConfigToggle_1s5nt_1486:active {
  background: #f1f5f9;
}
._headerConfigToggle_1s5nt_1486 svg {
  color: #3b82f6;
  flex-shrink: 0;
}
._headerConfigToggle_1s5nt_1486 span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  line-height: 1;
}

._mobileTitle_1s5nt_1523 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
}

/* =============================================================================
   TABLET CONFIG TOGGLE - Collapsible Tab (768px - 1100px)
   ============================================================================= */
._tabletConfigToggle_1s5nt_1534 {
  display: none; /* Hidden by default (desktop) */
  position: fixed;
  right: 1rem;
  top: 0.5rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Only show on tablet (768px - 1100px) */
}
@media (min-width: 769px) and (max-width: 1100px) {
  ._tabletConfigToggle_1s5nt_1534 {
    display: flex;
  }
}
._tabletConfigToggle_1s5nt_1534 {
  /* Ensure hidden on mobile - mobile uses the gear in header */
}
@media (max-width: 768px) {
  ._tabletConfigToggle_1s5nt_1534 {
    display: none !important;
  }
}
._tabletConfigToggle_1s5nt_1534:hover {
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
._tabletConfigToggle_1s5nt_1534:active {
  background: #f1f5f9;
  transform: translateY(0);
}
._tabletConfigToggle_1s5nt_1534 svg {
  color: #3b82f6;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
._tabletConfigToggle_1s5nt_1534 span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  line-height: 1;
}

/* Tablet Config Sheet - Right side overlay */
._tabletConfigSheet_1s5nt_1589 {
  width: 420px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 16px 0 0 16px !important;
}._container_1q6y7_1 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  overflow: hidden;
}

._header_1q6y7_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background-color: white;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  min-height: 64px;
}

._headerLeft_1q6y7_20 {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

._zoomGroup_1q6y7_32 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  margin-right: 8px;
}

._zoomLevel_1q6y7_41 {
  min-width: 60px;
  font-weight: 500;
  color: #475569;
  font-size: 13px;
}

._titleGroup_1q6y7_48 {
  display: flex;
  flex-direction: column;
}

._title_1q6y7_48 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}

._subtitle_1q6y7_61 {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  margin-top: 2px;
}

._viewerContainer_1q6y7_68 {
  flex: 1;
  display: flex;
  padding: 24px;
  overflow: hidden;
}

._pdfViewer_1q6y7_75 {
  width: 100%;
  height: 100%;
}

._loading_1q6y7_80,
._generating_1q6y7_81 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #64748b;
}
._loading_1q6y7_80 h2,
._generating_1q6y7_81 h2 {
  margin: 0;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
}
._loading_1q6y7_80 p,
._generating_1q6y7_81 p {
  margin: 0;
  margin-top: 16px;
  font-size: 16px;
}

._generatingDetails_1q6y7_103 {
  margin-top: 8px;
}
._generatingDetails_1q6y7_103 small {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.3;
}

._error_1q6y7_112 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #ef4444;
}
._error_1q6y7_112 h2 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}
._error_1q6y7_112 p {
  margin: 0;
  margin-bottom: 24px;
  color: #64748b;
}

._errorText_1q6y7_133 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

._emptyState_1q6y7_139 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #64748b;
}
._emptyState_1q6y7_139 p {
  margin: 0;
  margin-bottom: 16px;
  font-size: 16px;
}

._spinner_1q6y7_153 {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: _spin_1q6y7_153 1s linear infinite;
}

._spinning_1q6y7_162 {
  animation: _spin_1q6y7_153 1s linear infinite;
}

@keyframes _spin_1q6y7_153 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 1024px) {
  ._header_1q6y7_9 {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 12px;
    min-height: auto;
  }
  ._headerLeft_1q6y7_20 {
    flex: 1;
    min-width: 0;
  }
  ._headerRight_1q6y7_26 {
    flex-wrap: wrap;
    gap: 8px;
  }
  ._zoomGroup_1q6y7_32 {
    margin-right: 4px;
    gap: 2px;
  }
  ._zoomLevel_1q6y7_41 {
    min-width: 55px;
    font-size: 12px;
  }
  ._viewerContainer_1q6y7_68 {
    padding: 20px;
  }
}
@media (max-width: 768px) {
  ._header_1q6y7_9 {
    padding: 8px 16px;
    gap: 12px;
  }
  ._headerLeft_1q6y7_20 {
    justify-content: flex-start;
    gap: 12px;
  }
  ._headerRight_1q6y7_26 {
    justify-content: flex-end;
    gap: 6px;
  }
  ._zoomGroup_1q6y7_32 {
    margin-right: 4px;
    gap: 2px;
    padding: 3px;
  }
  ._zoomLevel_1q6y7_41 {
    min-width: 50px;
    font-size: 11px;
  }
  ._title_1q6y7_48 {
    font-size: 18px;
  }
  ._subtitle_1q6y7_61 {
    font-size: 13px;
  }
  ._viewerContainer_1q6y7_68 {
    padding: 16px;
  }
}
@media (max-width: 640px) {
  ._header_1q6y7_9 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 12px;
  }
  ._headerLeft_1q6y7_20 {
    justify-content: flex-start;
    order: 1;
  }
  ._headerRight_1q6y7_26 {
    justify-content: center;
    order: 2;
    gap: 8px;
  }
  ._viewerContainer_1q6y7_68 {
    padding: 12px;
  }
}
@media (max-width: 480px) {
  ._header_1q6y7_9 {
    padding: 8px;
  }
  ._titleGroup_1q6y7_48 {
    margin-left: 8px;
  }
  ._title_1q6y7_48 {
    font-size: 16px;
  }
  ._subtitle_1q6y7_61 {
    font-size: 12px;
  }
  ._headerRight_1q6y7_26 {
    gap: 6px;
  }
  ._headerRight_1q6y7_26 button {
    font-size: 14px;
    padding: 8px 12px;
  }
  ._headerRight_1q6y7_26 button svg {
    width: 16px;
    height: 16px;
  }
  ._zoomGroup_1q6y7_32 {
    margin-right: 0;
    gap: 1px;
    padding: 2px;
  }
  ._zoomGroup_1q6y7_32 button {
    padding: 6px 8px;
  }
  ._zoomLevel_1q6y7_41 {
    min-width: 45px;
    font-size: 11px;
  }
  ._viewerContainer_1q6y7_68 {
    padding: 8px;
  }
}
@media (max-width: 360px) {
  ._header_1q6y7_9 {
    padding: 6px;
  }
  ._headerRight_1q6y7_26 {
    flex-direction: column;
    width: 100%;
    gap: 4px;
  }
  ._headerRight_1q6y7_26 button {
    width: 100%;
    justify-content: center;
  }
  ._viewerContainer_1q6y7_68 {
    padding: 6px;
  }
  ._title_1q6y7_48 {
    font-size: 15px;
  }
  ._subtitle_1q6y7_61 {
    font-size: 11px;
  }
}/**
 * Subscription Required Page - SCSS Module
 * Professional pricing page using design system variables
 */
._pageContainer_x6zu5_5 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(215, 100%, 96%) 0%, hsl(0, 0%, 100%) 50%, hsl(270, 100%, 97%) 100%);
  padding: 3rem 1rem;
}
@media (max-width: 768px) {
  ._pageContainer_x6zu5_5 {
    padding: 2rem 1rem;
  }
}

._contentWrapper_x6zu5_19 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

._userInfoSection_x6zu5_26 {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  ._userInfoSection_x6zu5_26 {
    justify-content: center;
    margin-bottom: 1rem;
  }
}

._userInfoContent_x6zu5_38 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

._userIcon_x6zu5_45 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: hsl(217, 91%, 95%);
  flex-shrink: 0;
}
._userIcon_x6zu5_45 svg {
  width: 20px;
  height: 20px;
  color: hsl(217, 91%, 60%);
}

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

._userDetails_x6zu5_68 {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  text-align: center;
}

._userName_x6zu5_76 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._userEmail_x6zu5_85 {
  font-size: 0.75rem;
  color: var(--neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._header_x6zu5_93 {
  text-align: center;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
  ._header_x6zu5_93 {
    margin-bottom: 2rem;
  }
}

._headerIcon_x6zu5_103 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: hsl(217, 91%, 95%);
  margin-bottom: 0rem;
}
._headerIcon_x6zu5_103 svg {
  width: 32px;
  height: 32px;
  color: hsl(217, 91%, 60%);
}

._headerTitle_x6zu5_119 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 0.75rem;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 768px) {
  ._headerTitle_x6zu5_119 {
    font-size: 1.875rem;
  }
}

._headerSubtitle_x6zu5_133 {
  font-size: 1.125rem;
  color: var(--neutral-600);
  max-width: 48rem;
  margin: 0 auto 1.25rem;
  text-align: center;
}
@media (max-width: 768px) {
  ._headerSubtitle_x6zu5_133 {
    font-size: 1rem;
  }
}

._limitedOffer_x6zu5_146 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, hsl(45, 100%, 95%) 0%, hsl(35, 100%, 92%) 100%);
  border: 1px solid hsl(45, 80%, 70%);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(35, 80%, 30%);
}

._limitedOfferIcon_x6zu5_159 {
  width: 16px;
  height: 16px;
  color: hsl(45, 100%, 45%);
}

._pricingGrid_x6zu5_165 {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
._pricingGrid_x6zu5_165._withTrial_x6zu5_170 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  ._pricingGrid_x6zu5_165._withTrial_x6zu5_170 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  ._pricingGrid_x6zu5_165._withTrial_x6zu5_170 {
    grid-template-columns: repeat(3, 1fr);
  }
}
._pricingGrid_x6zu5_165._withoutTrial_x6zu5_183 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  ._pricingGrid_x6zu5_165._withoutTrial_x6zu5_183 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}
._pricingGrid_x6zu5_165._twoCards_x6zu5_194 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  ._pricingGrid_x6zu5_165._twoCards_x6zu5_194 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

._pricingCard_x6zu5_206 {
  background: var(--pure-white);
  border-radius: 16px;
  padding: 2rem;
  border: 2px solid var(--neutral-300);
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
._pricingCard_x6zu5_206:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
._pricingCard_x6zu5_206._featured_x6zu5_220 {
  border-color: hsl(217, 91%, 60%);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.1);
}
@media (max-width: 768px) {
  ._pricingCard_x6zu5_206 {
    padding: 1.5rem;
  }
}

._badge_x6zu5_230 {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
._badge_x6zu5_230 svg {
  width: 12px;
  height: 12px;
}
._badge_x6zu5_230._badgePopular_x6zu5_248 {
  background-color: hsl(217, 91%, 60%);
  color: white;
}
._badge_x6zu5_230._badgeRecommended_x6zu5_252 {
  background-color: hsl(217, 91%, 60%);
  color: white;
}
._badge_x6zu5_230._badgeBestValue_x6zu5_256 {
  background-color: hsl(142, 76%, 36%);
  color: white;
}

._cardHeader_x6zu5_261 {
  text-align: center;
  margin-bottom: 1.5rem;
}
._cardHeader_x6zu5_261._withBadge_x6zu5_265 {
  margin-top: 0.5rem;
}

._cardIcon_x6zu5_269 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: hsl(217, 91%, 95%);
  margin-bottom: 0.75rem;
}
._cardIcon_x6zu5_269 svg {
  width: 24px;
  height: 24px;
  color: hsl(217, 91%, 60%);
}

._cardTitle_x6zu5_285 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 0.5rem;
}

._cardPrice_x6zu5_292 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 0.5rem;
}

._priceAmount_x6zu5_299 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--neutral-900);
  line-height: 1;
}

._pricePeriod_x6zu5_306 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin-left: 0.5rem;
}

._savingsBadge_x6zu5_312 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: hsl(142, 76%, 90%);
  color: hsl(142, 76%, 25%);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

._trialBadge_x6zu5_325 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: hsl(217, 91%, 95%);
  color: hsl(217, 91%, 40%);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

._buttonSpinner_x6zu5_338 {
  width: 16px;
  height: 16px;
  animation: _spin_x6zu5_1 1s linear infinite;
  margin-right: 0.5rem;
}

._cardDescription_x6zu5_345 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  line-height: 1.5;
}

._featuresList_x6zu5_351 {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

._featureItem_x6zu5_358 {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
._featureItem_x6zu5_358:last-child {
  margin-bottom: 0;
}

._featureIcon_x6zu5_368 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.125rem;
}
._featureIcon_x6zu5_368._iconBlue_x6zu5_374 {
  color: hsl(217, 91%, 60%);
}
._featureIcon_x6zu5_368._iconGreen_x6zu5_377 {
  color: hsl(142, 76%, 36%);
}

._featureText_x6zu5_381 {
  font-size: 0.875rem;
  color: var(--neutral-900);
  line-height: 1.5;
}

._footer_x6zu5_387 {
  text-align: center;
  margin-top: 2rem;
}

._footerContent_x6zu5_392 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin-bottom: 0.5rem;
}
._footerContent_x6zu5_392 svg {
  width: 16px;
  height: 16px;
}

._footerNote_x6zu5_406 {
  font-size: 0.875rem;
  color: var(--neutral-400);
  margin: 0;
  margin-bottom: 1.5rem;
}

._signOutSection_x6zu5_413 {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--neutral-300);
}

._signOutButton_x6zu5_421 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neutral-600);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
._signOutButton_x6zu5_421:hover:not(:disabled) {
  color: var(--neutral-900);
  background-color: var(--primary-50);
}
._signOutButton_x6zu5_421:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._signOutIcon_x6zu5_439 {
  width: 16px;
  height: 16px;
}
._signOutIcon_x6zu5_439.lucide-loader-2 {
  animation: _spin_x6zu5_1 1s linear infinite;
}

._loadingContainer_x6zu5_447 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-50);
}

._loadingContent_x6zu5_455 {
  text-align: center;
}

._loadingSpinner_x6zu5_459 {
  width: 48px;
  height: 48px;
  color: hsl(217, 91%, 60%);
  margin: 0 auto 1rem;
  animation: _spin_x6zu5_1 1s linear infinite;
}

@keyframes _spin_x6zu5_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._loadingText_x6zu5_475 {
  font-size: 1rem;
  color: var(--neutral-600);
  margin: 0;
}

._pricingCard_x6zu5_206:focus-within {
  outline: 2px solid var(--primary-500);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  button {
    min-height: 44px;
    font-size: 1rem;
  }
}/**
 * Payment Processing Page Styles
 * Clean, minimal design matching the subscription page aesthetic
 */
._pageContainer_fffi9_5 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(215, 100%, 97%) 0%, hsl(0, 0%, 100%) 50%, hsl(270, 100%, 98%) 100%);
  padding: 2rem;
}

._contentWrapper_fffi9_14 {
  background: var(--pure-white, #ffffff);
  border-radius: 16px;
  padding: 3rem 2rem;
  max-width: 480px;
  width: 100%;
  border: 1px solid var(--neutral-200, #e5e7eb);
  text-align: center;
  animation: _fadeIn_fffi9_1 0.3s ease-out;
}

@keyframes _fadeIn_fffi9_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._statusIcon_fffi9_35 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--neutral-100, #f3f4f6);
}
._statusIcon_fffi9_35 svg {
  width: 36px;
  height: 36px;
  color: var(--neutral-500, #6b7280);
}
._statusIcon_fffi9_35[data-status=processing] {
  background: hsl(217, 91%, 95%);
}
._statusIcon_fffi9_35[data-status=processing] svg {
  color: hsl(217, 91%, 55%);
}
._statusIcon_fffi9_35[data-status=success] {
  background: hsl(142, 76%, 92%);
}
._statusIcon_fffi9_35[data-status=success] svg {
  color: hsl(142, 76%, 36%);
}
._statusIcon_fffi9_35[data-status=canceled], ._statusIcon_fffi9_35[data-status=error] {
  background: hsl(0, 84%, 95%);
}
._statusIcon_fffi9_35[data-status=canceled] svg, ._statusIcon_fffi9_35[data-status=error] svg {
  color: hsl(0, 84%, 50%);
}
._statusIcon_fffi9_35[data-status=timeout] {
  background: hsl(217, 91%, 95%);
}
._statusIcon_fffi9_35[data-status=timeout] svg {
  color: hsl(217, 91%, 55%);
}

._spinner_fffi9_75 {
  animation: _spin_fffi9_75 1s linear infinite;
}

@keyframes _spin_fffi9_75 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._title_fffi9_87 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

._description_fffi9_95 {
  font-size: 1rem;
  color: var(--neutral-600, #6b7280);
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

._progressInfo_fffi9_102 {
  margin: 1.5rem 0;
}

._countdownBox_fffi9_106 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: hsl(217, 91%, 95%);
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}
._countdownBox_fffi9_106 svg {
  width: 18px;
  height: 18px;
  color: hsl(217, 91%, 55%);
}

._countdownText_fffi9_122 {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(217, 91%, 45%);
}

._progressText_fffi9_128 {
  font-size: 0.875rem;
  color: var(--neutral-500, #6b7280);
  margin: 0;
}

._infoBox_fffi9_134 {
  background: var(--neutral-50, #f9fafb);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  text-align: left;
}
._infoBox_fffi9_134[data-variant=warning] {
  background: hsl(217, 91%, 97%);
}

._infoText_fffi9_145 {
  font-size: 0.8125rem;
  color: var(--neutral-600, #4b5563);
  margin: 0;
  line-height: 1.6;
}
._infoText_fffi9_145 strong {
  color: var(--neutral-800, #1f2937);
  font-weight: 600;
}

._sessionInfo_fffi9_156 {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--neutral-200, #e5e7eb);
}

._sessionId_fffi9_162 {
  font-size: 0.6875rem;
  color: var(--neutral-400, #9ca3af);
  margin: 0 0 0.25rem 0;
  font-family: "SF Mono", "Monaco", "Courier New", monospace;
}

._supportText_fffi9_169 {
  font-size: 0.6875rem;
  color: var(--neutral-500, #6b7280);
  margin: 0;
}

._actions_fffi9_175 {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  ._pageContainer_fffi9_5 {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 3rem;
  }
  ._contentWrapper_fffi9_14 {
    padding: 2rem 1.5rem;
  }
  ._title_fffi9_87 {
    font-size: 1.25rem;
  }
  ._description_fffi9_95 {
    font-size: 0.9375rem;
  }
  ._statusIcon_fffi9_35 {
    width: 64px;
    height: 64px;
  }
  ._statusIcon_fffi9_35 svg {
    width: 28px;
    height: 28px;
  }
}._onboardingPage_15qrs_1 {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-family-primary, "Inter", system-ui, sans-serif);
  background: #FFFFFF;
}
._onboardingPage_15qrs_1::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.015) 0%, transparent 40%), radial-gradient(circle at 60% 60%, rgba(168, 85, 247, 0.015) 0%, transparent 40%);
  animation: _slowFloat_15qrs_1 30s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

._progressIndicator_15qrs_24 {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  z-index: 10;
}
@media (max-width: 768px) {
  ._progressIndicator_15qrs_24 {
    top: 12px;
    right: 12px;
    font-size: 12px;
  }
}

._carouselContainer_15qrs_41 {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  overflow-y: auto;
}
@media (max-width: 768px) {
  ._carouselContainer_15qrs_41 {
    padding: 12px 16px;
  }
}

._swiper_15qrs_57 {
  width: 100%;
  height: 100%;
}

._slide_15qrs_62 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}
@media (max-width: 768px) {
  ._slide_15qrs_62 {
    padding: 8px 12px;
  }
}

._slideContent_15qrs_74 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 16px;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
._swiper-slide-active_15qrs_84 ._slideContent_15qrs_74 {
  animation: _slideEnter_15qrs_1 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  ._slideContent_15qrs_74 {
    padding: 12px;
  }
}

._logoContainer_15qrs_93 {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
._logoContainer_15qrs_93[data-animation=logo] {
  animation: _fadeInScale_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.1s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._logoContainer_15qrs_93 {
    margin-bottom: 8px;
  }
}

._logo_15qrs_93 {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
@media (max-width: 768px) {
  ._logo_15qrs_93 {
    height: 32px;
    max-width: 180px;
  }
}

._title_15qrs_124 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
._title_15qrs_124[data-animation=title] {
  animation: _fadeInUp_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.2s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._title_15qrs_124 {
    margin-bottom: 6px;
  }
}

._subtitle_15qrs_143 {
  font-size: clamp(15px, 2.2vw, 17px);
  color: #4b5563;
  line-height: 1.5;
  max-width: 90%;
  margin: 0 auto 16px;
}
._subtitle_15qrs_143[data-animation=subtitle] {
  animation: _fadeInUp_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.3s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._subtitle_15qrs_143 {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

._featuresContainer_15qrs_162 {
  width: 100%;
  margin: 16px auto;
  display: flex;
  justify-content: center;
}
._featuresContainer_15qrs_162[data-animation=features] {
  animation: _fadeInUp_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.4s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._featuresContainer_15qrs_162 {
    margin: 12px auto;
  }
}

._featuresPills_15qrs_179 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 90%;
}
@media (max-width: 768px) {
  ._featuresPills_15qrs_179 {
    gap: 8px;
    flex-direction: column;
    width: 100%;
  }
}

._featurePill_15qrs_195 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: _fadeInScale_15qrs_1 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}
._featurePill_15qrs_195:hover {
  background: #f9fafb;
}
@media (max-width: 768px) {
  ._featurePill_15qrs_195 {
    padding: 6px 10px;
    width: 100%;
    justify-content: center;
  }
}

._featureIcon_15qrs_218 {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._featureIcon_15qrs_218 {
    font-size: 22px;
  }
}

._featureText_15qrs_231 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

._featureTitle_15qrs_238 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
@media (max-width: 768px) {
  ._featureTitle_15qrs_238 {
    font-size: 14px;
  }
}

._featureDivider_15qrs_249 {
  color: #9ca3af;
  font-weight: 400;
}

._featureDescription_15qrs_254 {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
}
@media (max-width: 768px) {
  ._featureDescription_15qrs_254 {
    font-size: 13px;
  }
}

._bulletContainer_15qrs_265 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 16px auto;
}
._bulletContainer_15qrs_265[data-animation=bullets] {
  animation: _fadeInUp_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.4s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._bulletContainer_15qrs_265 {
    margin: 12px auto;
  }
}

._bulletList_15qrs_282 {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  ._bulletList_15qrs_282 {
    max-width: 100%;
  }
}

._bulletItem_15qrs_298 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
  text-align: center;
  width: 100%;
  max-width: 500px;
  animation: _fadeInUp_15qrs_1 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._bulletItem_15qrs_298 {
    font-size: 14px;
    gap: 8px;
    padding: 5px 0;
    max-width: 100%;
  }
}
._bulletItem_15qrs_298 span {
  flex: 1;
}

._bulletIcon_15qrs_324 {
  flex-shrink: 0;
  margin-top: 2px;
}

._highlightText_15qrs_329 {
  background: linear-gradient(135deg, #3b82f6 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
  padding: 0;
}
._highlightText_15qrs_329[data-animation=highlight] {
  animation: _fadeInScale_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.9s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._highlightText_15qrs_329 {
    font-size: 15px;
    margin-top: 10px;
  }
}

._paginationBullet_15qrs_352 {
  width: 10px;
  height: 10px;
  background: #d1d5db;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._paginationBullet_15qrs_352:hover {
  background: #9ca3af;
}

._paginationBulletActive_15qrs_363 {
  background: #3b82f6;
  width: 28px;
  border-radius: 5px;
}

._navigationControls_15qrs_369 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
}
._navigationControls_15qrs_369[data-animation=navigation] {
  animation: _fadeInUp_15qrs_1 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 1s;
  animation-fill-mode: both;
}
@media (max-width: 768px) {
  ._navigationControls_15qrs_369 {
    margin-top: 16px;
    gap: 8px;
    flex-wrap: wrap;
  }
}

._navButton_15qrs_390 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  outline: none;
}
@media (max-width: 768px) {
  ._navButton_15qrs_390 {
    padding: 8px 16px;
    font-size: 13px;
  }
}
._navButton_15qrs_390:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._navButton_15qrs_390:active:not(:disabled) {
  transform: scale(0.98);
}

._previousButton_15qrs_417 {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #374151;
}
._previousButton_15qrs_417:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

._nextButton_15qrs_427 {
  background: #3b82f6;
  color: white;
  border: 1px solid transparent;
}
._nextButton_15qrs_427:hover:not(:disabled) {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

._skipButton_15qrs_437 {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #4b5563;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
._skipButton_15qrs_437:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}
._skipButton_15qrs_437:active:not(:disabled) {
  transform: scale(0.98);
}
._skipButton_15qrs_437:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  ._skipButton_15qrs_437 {
    padding: 8px 16px;
    font-size: 13px;
  }
}

._getStartedButton_15qrs_467 {
  background: #2563eb;
  padding: 12px 28px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}
._getStartedButton_15qrs_467:hover:not(:disabled) {
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.45);
  transform: translateY(-2px);
}
._getStartedButton_15qrs_467:active:not(:disabled) {
  transform: translateY(0);
}
@media (max-width: 768px) {
  ._getStartedButton_15qrs_467 {
    padding: 10px 24px;
    font-size: 14px;
  }
}

@keyframes _fadeInUp_15qrs_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeInScale_15qrs_1 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _slideEnter_15qrs_1 {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slowFloat_15qrs_1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(2deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._onboardingPage_15qrs_1::before,
  ._slideContent_15qrs_74,
  ._logoContainer_15qrs_93,
  ._title_15qrs_124,
  ._subtitle_15qrs_143,
  ._featuresContainer_15qrs_162,
  ._featurePill_15qrs_195,
  ._bulletContainer_15qrs_265,
  ._bulletItem_15qrs_298,
  ._highlightText_15qrs_329,
  ._navigationControls_15qrs_369,
  ._navButton_15qrs_390 {
    animation: none !important;
  }
  ._navButton_15qrs_390:hover,
  ._getStartedButton_15qrs_467:hover,
  ._featurePill_15qrs_195:hover {
    transform: none;
  }
}
._skipButton_15qrs_437:focus-visible,
._navButton_15qrs_390:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}/**
 * Terms Acceptance Modal Styles
 */
._overlay_7zxkf_4 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
  animation: _overlayFadeIn_7zxkf_1 200ms ease-out;
}

@keyframes _overlayFadeIn_7zxkf_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._content_7zxkf_21 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--neutral-50);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(125, 0, 255, 0.5);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
  animation: _contentSlideIn_7zxkf_1 300ms ease-out;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--neutral-50), var(--neutral-50)), var(--gradient-ai-enhanced-diagonal);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
._content_7zxkf_21:focus {
  outline: none;
}

._confirmationContent_7zxkf_45 {
  max-width: 480px;
}

/* Subscription Info Box - shown in decline confirmation dialog */
._subscriptionInfoBox_7zxkf_50 {
  margin: 0 32px 16px;
  padding: 16px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
}

._subscriptionInfoRow_7zxkf_58 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
._subscriptionInfoRow_7zxkf_58:not(:last-child) {
  border-bottom: 1px solid var(--neutral-200);
}

._subscriptionInfoIcon_7zxkf_68 {
  width: 18px;
  height: 18px;
  color: var(--neutral-500);
  flex-shrink: 0;
}

._subscriptionInfoLabel_7zxkf_75 {
  font-size: 14px;
  color: var(--neutral-600);
  flex: 1;
}

._subscriptionInfoValue_7zxkf_81 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-800);
}
._subscriptionInfoValue_7zxkf_81._statusActive_7zxkf_86 {
  color: var(--positive-600);
}
._subscriptionInfoValue_7zxkf_81._statusCanceled_7zxkf_89 {
  color: var(--warning-600);
}

._manageSubscriptionButton_7zxkf_93 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--primary-500);
  color: var(--pure-white);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
._manageSubscriptionButton_7zxkf_93:hover:not(:disabled) {
  background: var(--primary-600);
}
._manageSubscriptionButton_7zxkf_93:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._manageSubscriptionIcon_7zxkf_118 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._signOffButton_7zxkf_124 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 14px 16px;
  background: var(--neutral-200);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
._signOffButton_7zxkf_124:hover:not(:disabled) {
  background: var(--neutral-300);
  color: var(--neutral-800);
}
._signOffButton_7zxkf_124:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._signOffIcon_7zxkf_149 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@keyframes _contentSlideIn_7zxkf_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
._header_7zxkf_165 {
  padding: 32px 32px 24px;
  text-align: center;
}

._logoWrapper_7zxkf_170 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

._logo_7zxkf_170 {
  width: 180px;
  height: auto;
}

._iconWrapper_7zxkf_182 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border-radius: 16px;
  margin-bottom: 20px;
}
._iconWrapper_7zxkf_182._warningIcon_7zxkf_192 {
  background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
}

._icon_7zxkf_182 {
  width: 32px;
  height: 32px;
  color: var(--pure-white);
}

._title_7zxkf_202 {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900, #171717);
  margin: 0 0 12px;
  line-height: 1.3;
}

._description_7zxkf_210 {
  font-size: 15px;
  color: var(--neutral-600, #525252);
  line-height: 1.6;
  margin: 0;
}

._body_7zxkf_217 {
  padding: 0 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Updated policies banner */
._updatedBanner_7zxkf_225 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 32px;
  background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%);
  border: 1px solid var(--warning-300);
  border-radius: 10px;
  color: var(--warning-800);
  font-size: 14px;
  font-weight: 500;
}

._bannerIcon_7zxkf_239 {
  width: 18px;
  height: 18px;
  color: var(--warning-600);
  flex-shrink: 0;
}

/* Acceptance section (Terms, Privacy, AI) */
._acceptanceSection_7zxkf_247 {
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 150ms ease;
}
._acceptanceSection_7zxkf_247:has(._checkbox_7zxkf_254:checked) {
  border-color: var(--primary-400);
  background: var(--primary-50);
}

._sectionHeader_7zxkf_259 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

._sectionIcon_7zxkf_266 {
  width: 20px;
  height: 20px;
  color: var(--primary-500);
  flex-shrink: 0;
}

._sectionTitle_7zxkf_273 {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-800);
}

._updatedBadge_7zxkf_279 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  background: var(--warning-100);
  color: var(--warning-700);
  border-radius: 6px;
  margin-left: auto;
}

._aiDescription_7zxkf_291 {
  font-size: 13px;
  color: var(--neutral-600);
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--neutral-100);
  border-radius: 8px;
  border-left: 3px solid var(--primary-400);
}

._inlineLink_7zxkf_302 {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 150ms ease;
}
._inlineLink_7zxkf_302:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

._inlineLinkIcon_7zxkf_316 {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

._linksSection_7zxkf_322 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

._documentLink_7zxkf_329 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--pure-white);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  color: var(--neutral-700, #404040);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 150ms ease;
}
._documentLink_7zxkf_329:hover {
  background: var(--neutral-100, #f5f5f5);
  border-color: var(--neutral-300, #d4d4d4);
  color: var(--neutral-900, #171717);
}

._linkIcon_7zxkf_349 {
  width: 20px;
  height: 20px;
  color: var(--primary-500, #3b82f6);
  flex-shrink: 0;
}

._externalIcon_7zxkf_356 {
  width: 16px;
  height: 16px;
  color: var(--neutral-400, #a3a3a3);
  margin-left: auto;
  flex-shrink: 0;
}

._checkboxLabel_7zxkf_364 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 0;
  transition: opacity 150ms ease;
}
._checkboxLabel_7zxkf_364:hover {
  opacity: 0.9;
}

._checkbox_7zxkf_254 {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--neutral-300);
  border-radius: 4px;
  background: var(--pure-white);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  flex-shrink: 0;
  transition: all 150ms ease;
}
._checkbox_7zxkf_254:checked {
  background: var(--primary-500);
  border-color: var(--primary-500);
}
._checkbox_7zxkf_254:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--pure-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
._checkbox_7zxkf_254:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}

._checkboxText_7zxkf_410 {
  font-size: 14px;
  color: var(--neutral-700, #404040);
  line-height: 1.5;
}

._footer_7zxkf_416 {
  display: flex;
  gap: 12px;
  padding: 24px 32px;
  background: var(--neutral-100, #f5f5f5);
  border-top: 1px solid var(--neutral-200, #e5e5e5);
  border-radius: 0 0 16px 16px;
}

._acceptButton_7zxkf_425,
._declineButton_7zxkf_426,
._dangerButton_7zxkf_427 {
  flex: 1;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
  border: none;
}
._acceptButton_7zxkf_425:disabled,
._declineButton_7zxkf_426:disabled,
._dangerButton_7zxkf_427:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._acceptButton_7zxkf_425 {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: var(--pure-white);
}
._acceptButton_7zxkf_425:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(9, 0, 255, 0.4);
}
._acceptButton_7zxkf_425:active:not(:disabled) {
  transform: translateY(0);
}

._declineButton_7zxkf_426 {
  background: var(--pure-white);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-300);
}
._declineButton_7zxkf_426:hover:not(:disabled) {
  background: var(--neutral-100);
  color: var(--neutral-700);
}

._skipButton_7zxkf_467 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pure-white);
  color: var(--primary-600);
  border: 1px solid var(--primary-300);
  flex: 1;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
._skipButton_7zxkf_467:hover:not(:disabled) {
  background: var(--primary-50);
  border-color: var(--primary-400);
  color: var(--primary-700);
}
._skipButton_7zxkf_467:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._skipIcon_7zxkf_493 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._warningButton_7zxkf_499 {
  background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
  color: var(--neutral-900);
}
._warningButton_7zxkf_499:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--warning-400) 0%, var(--warning-500) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 191, 15, 0.4);
}
._warningButton_7zxkf_499:active:not(:disabled) {
  transform: translateY(0);
}

._dangerButton_7zxkf_427 {
  background: linear-gradient(135deg, var(--negative-500) 0%, var(--negative-600) 100%);
  color: var(--pure-white);
}
._dangerButton_7zxkf_427:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--negative-600) 0%, var(--negative-700) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(242, 65, 90, 0.4);
}
._dangerButton_7zxkf_427:active:not(:disabled) {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
  ._content_7zxkf_21 {
    width: 95%;
    max-height: 95vh;
  }
  ._header_7zxkf_165 {
    padding: 24px 20px 20px;
  }
  ._body_7zxkf_217 {
    padding: 0 20px 20px;
    gap: 12px;
  }
  ._updatedBanner_7zxkf_225 {
    margin: 0 20px;
    font-size: 13px;
    padding: 10px 12px;
  }
  ._acceptanceSection_7zxkf_247 {
    padding: 12px;
  }
  ._sectionHeader_7zxkf_259 {
    margin-bottom: 10px;
  }
  ._sectionTitle_7zxkf_273 {
    font-size: 14px;
  }
  ._aiDescription_7zxkf_291 {
    font-size: 12px;
    padding: 8px 10px;
  }
  ._footer_7zxkf_416 {
    flex-direction: column;
    padding: 20px;
  }
  ._logoWrapper_7zxkf_170 {
    margin-bottom: 16px;
  }
  ._logo_7zxkf_170 {
    width: 40px;
  }
  ._iconWrapper_7zxkf_182 {
    width: 56px;
    height: 56px;
  }
  ._icon_7zxkf_182 {
    width: 28px;
    height: 28px;
  }
  ._title_7zxkf_202 {
    font-size: 20px;
  }
  ._description_7zxkf_210 {
    font-size: 14px;
  }
  ._checkboxText_7zxkf_410 {
    font-size: 13px;
  }
}/**
 * Account Locked Page - SCSS Module
 * Lockdown page for users who declined terms with active subscription
 */
._pageContainer_1rmcm_5 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(0, 100%, 97%) 0%, hsl(0, 0%, 100%) 50%, hsl(45, 100%, 97%) 100%);
  padding: 3rem 1rem;
}
@media (max-width: 768px) {
  ._pageContainer_1rmcm_5 {
    padding: 2rem 1rem;
  }
}

._contentWrapper_1rmcm_19 {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

._header_1rmcm_25 {
  text-align: center;
  margin-bottom: 2rem;
}

._headerIcon_1rmcm_30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: hsl(0, 70%, 95%);
  margin-bottom: 1rem;
}
._headerIcon_1rmcm_30 svg {
  width: 32px;
  height: 32px;
  color: hsl(0, 70%, 50%);
}

._headerTitle_1rmcm_46 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
@media (max-width: 768px) {
  ._headerTitle_1rmcm_46 {
    font-size: 1.5rem;
  }
}

._headerSubtitle_1rmcm_59 {
  font-size: 1rem;
  color: var(--neutral-600);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  ._headerSubtitle_1rmcm_59 {
    font-size: 0.875rem;
  }
}

._infoCard_1rmcm_72 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--pure-white);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid var(--neutral-200);
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

._infoCardIcon_1rmcm_84 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: hsl(215, 80%, 95%);
  flex-shrink: 0;
}
._infoCardIcon_1rmcm_84 svg {
  width: 20px;
  height: 20px;
  color: hsl(215, 80%, 50%);
}

._infoCardContent_1rmcm_100 {
  flex: 1;
}

._infoCardLabel_1rmcm_104 {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--neutral-500);
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._infoCardValue_1rmcm_113 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0;
}

._infoCardMeta_1rmcm_120 {
  font-size: 0.875rem;
  color: var(--neutral-500);
  margin: 0.25rem 0 0 0;
}

._stepsSection_1rmcm_126 {
  margin-bottom: 1.5rem;
}

._stepsTitle_1rmcm_130 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-700);
  margin-bottom: 1rem;
}

._stepCard_1rmcm_137 {
  display: flex;
  gap: 1rem;
  background: var(--pure-white);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid var(--neutral-200);
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease;
}
._stepCard_1rmcm_137:last-child {
  margin-bottom: 0;
}
._stepCard_1rmcm_137._stepCompleted_1rmcm_151 {
  border-color: hsl(142, 76%, 70%);
  background: hsl(142, 76%, 98%);
}
._stepCard_1rmcm_137._stepCompleted_1rmcm_151 ._stepNumber_1rmcm_155 {
  background-color: hsl(142, 76%, 36%);
  color: white;
}

._stepNumber_1rmcm_155 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}
._stepNumber_1rmcm_155 svg {
  width: 18px;
  height: 18px;
}

._stepContent_1rmcm_178 {
  flex: 1;
}

._stepTitle_1rmcm_182 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 0.75rem 0;
}

._stepCompleteText_1rmcm_189 {
  font-size: 0.875rem;
  color: hsl(142, 76%, 30%);
  font-weight: 500;
  margin: 0;
}

._subscriptionInfo_1rmcm_196 {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background-color: var(--neutral-50);
  border-radius: 8px;
}

._subscriptionPlan_1rmcm_203 {
  font-size: 0.875rem;
  color: var(--neutral-700);
  margin: 0 0 0.25rem 0;
}

._subscriptionBilling_1rmcm_209 {
  font-size: 0.875rem;
  color: var(--neutral-500);
  margin: 0;
}

._stepButton_1rmcm_215 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
._stepButton_1rmcm_215:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._buttonIcon_1rmcm_226 {
  width: 16px;
  height: 16px;
}

._externalIcon_1rmcm_231 {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

._buttonSpinner_1rmcm_237 {
  width: 16px;
  height: 16px;
  animation: _spin_1rmcm_1 1s linear infinite;
}

._comingSoonBadge_1rmcm_243 {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--neutral-200);
  color: var(--neutral-600);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
}

._warningBanner_1rmcm_257 {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: hsl(45, 100%, 95%);
  border: 1px solid hsl(45, 100%, 80%);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
._warningBanner_1rmcm_257 p {
  font-size: 0.875rem;
  color: hsl(35, 80%, 30%);
  margin: 0;
  line-height: 1.4;
}

._warningIcon_1rmcm_274 {
  width: 18px;
  height: 18px;
  color: hsl(45, 100%, 45%);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

._divider_1rmcm_282 {
  height: 1px;
  background-color: var(--neutral-200);
  margin: 2rem 0;
}

._dataExportSection_1rmcm_288 {
  background: var(--pure-white);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--neutral-200);
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
}

._sectionTitle_1rmcm_298 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 0.5rem 0;
}

._sectionDescription_1rmcm_305 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0 0 1rem 0;
}

._exportButton_1rmcm_311 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

._reactivateSection_1rmcm_317 {
  text-align: center;
}

._reactivateSectionTitle_1rmcm_321 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin: 0 0 0.5rem 0;
}

._reactivateText_1rmcm_328 {
  font-size: 0.875rem;
  color: var(--neutral-600);
  margin: 0 0 1rem 0;
}

._reactivateButton_1rmcm_334 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

._actionSection_1rmcm_340 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

._refreshButton_1rmcm_348 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--neutral-500);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
._refreshButton_1rmcm_348:hover:not(:disabled) {
  color: var(--neutral-700);
}

._refreshIcon_1rmcm_361 {
  width: 14px;
  height: 14px;
}

._signOutButton_1rmcm_366 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--neutral-500);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
._signOutButton_1rmcm_366:hover:not(:disabled) {
  color: var(--error-600);
}
._signOutButton_1rmcm_366:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._signOutIcon_1rmcm_383 {
  width: 14px;
  height: 14px;
}

._loadingContainer_1rmcm_388 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral-50);
}

._loadingContent_1rmcm_396 {
  text-align: center;
}

._loadingSpinner_1rmcm_400 {
  width: 48px;
  height: 48px;
  color: var(--neutral-400);
  margin: 0 auto 1rem;
  animation: _spin_1rmcm_1 1s linear infinite;
}

._loadingText_1rmcm_408 {
  font-size: 1rem;
  color: var(--neutral-600);
  margin: 0;
}

@keyframes _spin_1rmcm_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 480px) {
  ._stepCard_1rmcm_137 {
    flex-direction: column;
    gap: 0.75rem;
  }
  ._stepNumber_1rmcm_155 {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}/**
 * GlobalPdfNotification Styles
 * Fixed banner at top of screen for PDF generation status
 *
 * When visible, the component adds padding-top to document.body
 * to push content down (not overlay). See GlobalPdfNotification.tsx
 */
._notification_1pq6h_8 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  font-family: var(--font-family-primary);
  animation: _slideDown_1pq6h_1 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._notification_1pq6h_8._generating_1pq6h_22 {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-bottom: 2px solid var(--primary-400);
}
._notification_1pq6h_8._ready_1pq6h_26 {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-bottom: 2px solid var(--positive-500);
}
._notification_1pq6h_8._error_1pq6h_30 {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-bottom: 2px solid var(--negative-500);
}

._content_1pq6h_35 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

._iconWrapper_1pq6h_44 {
  flex-shrink: 0;
}

._icon_1pq6h_44 {
  width: 20px;
  height: 20px;
}
._generating_1pq6h_22 ._icon_1pq6h_44 {
  color: var(--primary-600);
}
._ready_1pq6h_26 ._icon_1pq6h_44 {
  color: var(--positive-600);
}
._error_1pq6h_30 ._icon_1pq6h_44 {
  color: var(--negative-600);
}

._spinning_1pq6h_62 {
  animation: _spin_1pq6h_62 1s linear infinite;
}

._message_1pq6h_66 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

._title_1pq6h_74 {
  font-weight: 600;
}
._generating_1pq6h_22 ._title_1pq6h_74 {
  color: var(--primary-900);
}
._ready_1pq6h_26 ._title_1pq6h_74 {
  color: var(--positive-800);
}
._error_1pq6h_30 ._title_1pq6h_74 {
  color: var(--negative-800);
}

._generating_1pq6h_22 ._detail_1pq6h_87 {
  color: var(--primary-700);
}
._ready_1pq6h_26 ._detail_1pq6h_87 {
  color: var(--positive-700);
}
._error_1pq6h_30 ._detail_1pq6h_87 {
  color: var(--negative-700);
}

._actions_1pq6h_97 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

._downloadButton_1pq6h_104 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--positive-600);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
._downloadButton_1pq6h_104:hover {
  background: var(--positive-700);
}
._downloadButton_1pq6h_104:active {
  background: var(--positive-800);
}

._dismissButton_1pq6h_125 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}
._ready_1pq6h_26 ._dismissButton_1pq6h_125 {
  color: var(--positive-700);
}
._ready_1pq6h_26 ._dismissButton_1pq6h_125:hover {
  background: rgba(0, 0, 0, 0.1);
}
._error_1pq6h_30 ._dismissButton_1pq6h_125 {
  color: var(--negative-700);
}
._error_1pq6h_30 ._dismissButton_1pq6h_125:hover {
  background: rgba(0, 0, 0, 0.1);
}

@keyframes _slideDown_1pq6h_1 {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _spin_1pq6h_62 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  ._notification_1pq6h_8 {
    height: auto;
    min-height: 48px;
    padding: var(--spacing-xs) var(--spacing-md);
  }
  ._content_1pq6h_35 {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  ._message_1pq6h_66 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  ._detail_1pq6h_87 {
    font-size: var(--font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

/* Layout styles */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout.dark {
  color: #f0f0f0;
  background-color: #1a1a1a;
}

.layout.dark body {
  background-color: #1a1a1a;
}

/* Header styles */
.header {
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.layout.dark .header {
  background: #2d2d2d;
  border-bottom-color: #404040;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
}

.nav-brand h1 {
  color: #2563eb;
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: #f3f4f6;
}

.layout.dark .theme-toggle:hover {
  background-color: #404040;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-links {
  display: flex;
  gap: 1rem;
}

.auth-links a {
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.auth-links a:hover {
  background-color: #f3f4f6;
}

/* Main content */
.main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
}

/* Home page styles */
.home-page {
  max-width: 800px;
  margin: 0 auto;
}

.home-page h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.layout.dark .home-page h1 {
  color: #f9fafb;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

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

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.layout.dark .stat-card {
  background: #2d2d2d;
}

.stat-card h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #2563eb;
}

.wizards-section {
  margin-top: 3rem;
}

.wizards-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.layout.dark .wizards-section h2 {
  color: #f9fafb;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.layout.dark .empty-state {
  background: #2d2d2d;
}

.wizards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.wizard-card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.wizard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.layout.dark .wizard-card {
  background: #2d2d2d;
}

.wizard-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.layout.dark .wizard-card h3 {
  color: #f9fafb;
}

.wizard-card p {
  color: #6b7280;
  margin-bottom: 1rem;
}

.wizard-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
  text-transform: capitalize;
}

.status.draft {
  background-color: #fef3c7;
  color: #92400e;
}

.status.published {
  background-color: #d1fae5;
  color: #065f46;
}

.status.archived {
  background-color: #fee2e2;
  color: #991b1b;
}

.sections-count {
  color: #6b7280;
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #2563eb;
  color: white;
}

.btn-primary:hover {
  background-color: #1d4ed8;
}

.btn-secondary {
  background-color: #6b7280;
  color: white;
}

.btn-secondary:hover {
  background-color: #4b5563;
}

.logout-btn {
  background: none;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.layout.dark .logout-btn {
  border-color: #4b5563;
  color: #d1d5db;
}

.layout.dark .logout-btn:hover {
  background-color: #374151;
  border-color: #6b7280;
}

.error {
  color: #dc2626;
  background-color: #fef2f2;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #fecaca;
}

.layout.dark .error {
  background-color: #451a1a;
  border-color: #7f1d1d;
}

/* Responsive design */
@media (max-width: 768px) {
  .main {
    padding: 1rem;
  }
  
  .nav {
    padding: 0 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .wizards-grid {
    grid-template-columns: 1fr;
  }
  
  .stats {
    grid-template-columns: 1fr;
  }
}