/* ================================
   CSS Variables - Design System
   Synchronized with design-tokens.ts
   ================================ */

:root {
  /* Primary Colors (most frequent hardcoded values) */
  --color-primary-main: #1976d2;     /* MUI default primary */
  --color-primary-light: #42a5f5;
  --color-primary-dark: #1565c0;     /* Primary hover state */
  --color-primary-blue: #2196f3;     /* Light blue variant */
  
  /* Surface Colors (background/card colors) */
  --color-surface-white: #ffffff;
  --color-surface-light: #fafafa;
  --color-surface-gray: #f8fafc;
  --color-surface-card: #f5f5f5;
  --color-surface-border: #e0e0e0;
  
  /* Warm Healthcare Theme */
  --color-warm-beige: #CEC5B4;       /* PublicFormFill beige */
  --color-warm-cream: #fffef7;
  --color-warm-sand: #f4e9d9;
  --color-warm-taupe: #d3c7b8;
  
  /* Text Colors */
  --color-text-primary: #212121;     /* Dark text */
  --color-text-secondary: #616161;   /* Text gray */
  --color-text-disabled: #9e9e9e;
  
  /* Neutral Grays */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  
  /* Semantic Colors */
  --color-success: #4caf50;
  --color-warning: #ff9800;          /* Pain level orange */
  --color-error: #f44336;            /* Pain level red */
  --color-info: #2196f3;
  
  /* Pain Assessment Colors */
  --color-pain-mild: #FFC107;        /* Yellow */
  --color-pain-moderate: #FF9800;    /* Orange */
  --color-pain-severe: #F44336;      /* Red */
  
  /* Button Colors */
  --color-button-primary: #8e8e8e;
  --color-button-hover: #6e6e6e;
  --color-button-active: #5e5e5e;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-secondary: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: -0.011em;
  --tracking-wide: 0.025em;
  
  /* Spacing System */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px - replaces padding: '16px' */
  --space-5: 1.25rem;   /* 20px - replaces margin-bottom: '20px' */
  --space-6: 1.5rem;    /* 24px - replaces px: 3 (MUI × 2) */
  --space-8: 2rem;      /* 32px - replaces py: 2 (MUI × 2) */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* Layout Specific */
  --drawer-width: 280px; /* replaces drawerWidth = 280 */
  
  /* Border Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-full: 9999px;
  
  /* Shadow System (replaces hardcoded box-shadow values) */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* Replaces: '0 2px 4px rgba(0,0,0,0.1)' */
  --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  /* Replaces: '0 1px 3px rgba(0,0,0,0.12)' */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Replaces: '0px 3px 6px rgba(0,0,0,0.16)' */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-index layers */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}
/* ================================
   CSS Reset - Modern Normalize
   ================================ */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Form Reset */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

button:disabled,
[type='button']:disabled,
[type='reset']:disabled,
[type='submit']:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Remove inner border and padding in Firefox */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Restore focus styles unset by previous rule */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/* Remove default fieldset styles */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Remove default quotes */
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ================================
   Typography - Inter Font Setup
   ================================ */

/* Inter Font Import - loaded via link tag in public/index.html */

/* Base Typography */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  margin: 0;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

/* Body Text */
p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-relaxed);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Small Text */
small {
  font-size: var(--text-sm);
}

/* Strong Text */
strong, b {
  font-weight: var(--font-semibold);
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  background: var(--color-gray-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-gray-100);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* Lists */
ul, ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
}

/* Text Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
/* Ensure MUI and Tailwind play nice */
.MuiPaper-root {
  /* Preserve MUI paper styling */
}

.sv-container {
  /* Preserve SurveyJS container styling */
}

/* Scoped Tailwind usage */
.tw-layout {
  /* Use this class to enable Tailwind in specific areas */
}

/* Prevent Tailwind from affecting SurveyJS components */
.sv-root-modern *,
.sv-root-default-v2 *,
.sv-root-default * {
  /* Ensure SurveyJS styles take precedence */
  all: revert-layer;
}

/* Prevent Tailwind from affecting MUI dialogs and modals */
.MuiDialog-root *,
.MuiModal-root *,
.MuiPopover-root * {
  /* Ensure MUI styles take precedence in overlays */
  all: revert-layer;
}
/* ============================================================================
   Toolbox Theme - Targeted SurveyJS Creator Toolbox Styling

   IMPORTANT: This file ONLY targets the toolbox panel to avoid the issues
   documented in docs/form-builder-theming-attempt.md
   ============================================================================ */

/* Design tokens for toolbox - scoped to avoid conflicts */
:root {
  /* Colors - Warm, earthy palette */
  --claude-bg: #f9f8f6;
  --claude-surface: #ffffff;
  --claude-surface-secondary: #f5f4f2;
  --claude-border: #e8e5e0;
  --claude-border-focus: #d4a574;

  /* Text hierarchy */
  --claude-text-primary: #3d3929;
  --claude-text-secondary: #706f6a;
  --claude-text-muted: #9c9a95;
  --claude-text-placeholder: #b8b6b0;

  /* Accent - Terracotta/Caramel */
  --claude-accent: #d4a574;
  --claude-accent-soft: #f7f0e8;
  --claude-accent-hover: #c4956a;

  /* Typography */
  --claude-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --claude-radius-sm: 6px;
  --claude-radius-md: 10px;
  --claude-radius-lg: 12px;
}

/* Toolbox Container */
.svc-toolbox {
  background: #f9f8f6 !important;
  background: var(--claude-bg, #f9f8f6) !important;
  border-right: 1px solid #e8e5e0 !important;
  border-right: 1px solid var(--claude-border, #e8e5e0) !important;
  padding: 16px 12px !important;
}

/* Category Headers - Uppercase, muted */
.svc-toolbox__category-header,
.svc-toolbox__category .svc-toolbox__category-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-family: var(--claude-font-sans, 'Inter', -apple-system, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #9c9a95 !important;
  color: var(--claude-text-muted, #9c9a95) !important;
  padding: 16px 8px 8px 8px !important;
  margin: 0 !important;
}

/* Category separator line */
.svc-toolbox__category {
  border-bottom: 1px solid #e8e5e0;
  border-bottom: 1px solid var(--claude-border, #e8e5e0);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.svc-toolbox__category:last-child {
  border-bottom: none;
}

/* Toolbox Items - Better spacing */
.svc-toolbox__item {
  padding: 10px 8px !important;
  margin: 4px 0 !important;
  border-radius: 10px !important;
  border-radius: var(--claude-radius-md, 10px) !important;
  transition: background-color 0.15s ease !important;
}

.svc-toolbox__item:hover {
  background-color: #f5f4f2 !important;
  background-color: var(--claude-surface-secondary, #f5f4f2) !important;
}

/* Toolbox Item Text */
.svc-toolbox__item-title,
.svc-toolbox__tool .svc-toolbox__item-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-family: var(--claude-font-sans, 'Inter', -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #3d3929 !important;
  color: var(--claude-text-primary, #3d3929) !important;
  margin-left: 12px !important;
}

/* Icon Container - Rounded background */
.svc-toolbox__item-icon,
.svc-toolbox__tool-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background-color: #f5f4f2 !important;
  background-color: var(--claude-surface-secondary, #f5f4f2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}

/* Icon SVG styling */
.svc-toolbox__item-icon svg,
.svc-toolbox__tool-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: #706f6a !important;
  fill: var(--claude-text-secondary, #706f6a) !important;
}

/* Hover state for icon */
.svc-toolbox__item:hover .svc-toolbox__item-icon,
.svc-toolbox__item:hover .svc-toolbox__tool-icon {
  background-color: #f7f0e8 !important;
  background-color: var(--claude-accent-soft, #f7f0e8) !important;
}

.svc-toolbox__item:hover .svc-toolbox__item-icon svg,
.svc-toolbox__item:hover .svc-toolbox__tool-icon svg {
  fill: #d4a574 !important;
  fill: var(--claude-accent, #d4a574) !important;
}

/* Search Box */
.svc-toolbox__search-container {
  margin-bottom: 16px !important;
}

.svc-toolbox__search-container input,
.svc-toolbox .sv-list__input {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-family: var(--claude-font-sans, 'Inter', -apple-system, sans-serif) !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  background-color: var(--claude-surface, #ffffff) !important;
  border: 1px solid #e8e5e0 !important;
  border: 1px solid var(--claude-border, #e8e5e0) !important;
  border-radius: 10px !important;
  border-radius: var(--claude-radius-md, 10px) !important;
  padding: 10px 12px 10px 36px !important;
  color: #3d3929 !important;
  color: var(--claude-text-primary, #3d3929) !important;
}

.svc-toolbox__search-container input::placeholder,
.svc-toolbox .sv-list__input::placeholder {
  color: #b8b6b0 !important;
  color: var(--claude-text-placeholder, #b8b6b0) !important;
}

.svc-toolbox__search-container input:focus,
.svc-toolbox .sv-list__input:focus {
  outline: none !important;
  border-color: #d4a574 !important;
  border-color: var(--claude-accent, #d4a574) !important;
  box-shadow: 0 0 0 3px #f7f0e8 !important;
  box-shadow: 0 0 0 3px var(--claude-accent-soft, #f7f0e8) !important;
}

/* Collapse/Expand chevron */
.svc-toolbox__category-header .sv-svg-icon,
.svc-toolbox__category-header svg {
  width: 16px !important;
  height: 16px !important;
  fill: #9c9a95 !important;
  fill: var(--claude-text-muted, #9c9a95) !important;
  transition: transform 0.2s ease !important;
}

/* Scrollbar styling for toolbox */
.svc-toolbox::-webkit-scrollbar {
  width: 6px;
}

.svc-toolbox::-webkit-scrollbar-track {
  background: transparent;
}

.svc-toolbox::-webkit-scrollbar-thumb {
  background-color: #e8e5e0;
  background-color: var(--claude-border, #e8e5e0);
  border-radius: 3px;
}

.svc-toolbox::-webkit-scrollbar-thumb:hover {
  background-color: #9c9a95;
  background-color: var(--claude-text-muted, #9c9a95);
}

/* Drag hint at bottom */
.svc-toolbox__category:last-child::after {
  content: none;
}

/* ================================
   Main CSS Entry Point - CLEAN SLATE
   Design system foundation with minimal imports
   ================================ */

/* Import design system foundation */

/* Separate CSS files for different contexts */
/* These will be imported conditionally by components */
/* @import './form-builder-styles.css'; */ /* For form builder only */
/* @import './form-viewer-styles.css'; */  /* For form viewer only */

/* Basic utility classes only */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Loading spinner - minimal */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Compatibility layer for Tailwind integration */

/* Form Builder Specific Styles */
.svc-creator {
  height: 100vh;
}

/* Toolbox Theme - Targeted styling for left panel */
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.tw-absolute {
    position: absolute
}
.tw-relative {
    position: relative
}
.tw-inset-0 {
    inset: 0
}
.tw-mx-auto {
    margin-left: auto;
    margin-right: auto
}
.tw-mb-2 {
    margin-bottom: 0.5rem
}
.tw-mb-4 {
    margin-bottom: 1rem
}
.tw-mb-5 {
    margin-bottom: 1.25rem
}
.tw-mb-6 {
    margin-bottom: 1.5rem
}
.tw-mb-8 {
    margin-bottom: 2rem
}
.tw-mt-2 {
    margin-top: 0.5rem
}
.tw-mt-3 {
    margin-top: 0.75rem
}
.tw-mt-6 {
    margin-top: 1.5rem
}
.tw-block {
    display: block
}
.tw-flex {
    display: flex
}
.tw-inline-flex {
    display: inline-flex
}
.tw-h-2 {
    height: 0.5rem
}
.tw-h-20 {
    height: 5rem
}
.tw-h-5 {
    height: 1.25rem
}
.tw-h-full {
    height: 100%
}
.tw-h-screen {
    height: 100vh
}
.tw-min-h-screen {
    min-height: 100vh
}
.tw-w-20 {
    width: 5rem
}
.tw-w-5 {
    width: 1.25rem
}
.tw-w-full {
    width: 100%
}
.tw-flex-1 {
    flex: 1 1
}
.tw-flex-shrink-0 {
    flex-shrink: 0
}
.tw-cursor-not-allowed {
    cursor: not-allowed
}
.tw-cursor-pointer {
    cursor: pointer
}
.tw-appearance-none {
    -webkit-appearance: none;
            appearance: none
}
.tw-flex-col {
    flex-direction: column
}
.tw-items-center {
    align-items: center
}
.tw-justify-center {
    justify-content: center
}
.tw-justify-between {
    justify-content: space-between
}
.tw-gap-3 {
    gap: 0.75rem
}
.tw-gap-4 {
    gap: 1rem
}
.tw-overflow-hidden {
    overflow: hidden
}
.tw-rounded {
    border-radius: 0.25rem
}
.tw-rounded-full {
    border-radius: 9999px
}
.tw-rounded-lg {
    border-radius: 0.75rem
}
.tw-border {
    border-width: 1px
}
.tw-border-2 {
    border-width: 2px
}
.tw-border-b {
    border-bottom-width: 1px
}
.tw-border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / 1);
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
}
.tw-border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / 1);
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
}
.tw-border-transparent {
    border-color: transparent
}
.tw-bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / 1);
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.tw-bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / 1);
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
}
.tw-bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / 1);
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}
.tw-bg-primary-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(140 64 35 / 1);
    background-color: rgb(140 64 35 / var(--tw-bg-opacity, 1))
}
.tw-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / 1);
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.tw-bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}
.tw-from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.tw-from-gray-50 {
    --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.tw-from-pink-500 {
    --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.tw-from-purple-500 {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.tw-to-blue-800 {
    --tw-gradient-to: #1e40af var(--tw-gradient-to-position)
}
.tw-to-gray-100 {
    --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position)
}
.tw-to-indigo-600 {
    --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position)
}
.tw-to-red-500 {
    --tw-gradient-to: #ef4444 var(--tw-gradient-to-position)
}
.tw-p-0 {
    padding: 0
}
.tw-p-3 {
    padding: 0.75rem
}
.tw-p-4 {
    padding: 1rem
}
.tw-p-6 {
    padding: 1.5rem
}
.tw-p-8 {
    padding: 2rem
}
.tw-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.tw-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.tw-py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
.tw-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.tw-pt-4 {
    padding-top: 1rem
}
.tw-text-center {
    text-align: center
}
.tw-text-3xl {
    font-size: 1.875rem
}
.tw-text-4xl {
    font-size: 2.25rem
}
.tw-text-base {
    font-size: 1rem
}
.tw-text-sm {
    font-size: 0.875rem
}
.tw-text-xs {
    font-size: 0.75rem
}
.tw-font-bold {
    font-weight: 700
}
.tw-font-medium {
    font-weight: 500
}
.tw-font-semibold {
    font-weight: 600
}
.tw-uppercase {
    text-transform: uppercase
}
.tw-tracking-wide {
    letter-spacing: 0.025em
}
.tw-text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / 1);
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}
.tw-text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / 1);
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}
.tw-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / 1);
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}
.tw-text-primary-700 {
    --tw-text-opacity: 1;
    color: rgb(140 64 35 / 1);
    color: rgb(140 64 35 / var(--tw-text-opacity, 1))
}
.tw-text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / 1);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.tw-shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.tw-shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.tw-outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.tw-ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.tw-ring-inset {
    --tw-ring-inset: inset
}
.tw-ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1))
}
.tw-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.tw-duration-300 {
    transition-duration: 300ms
}
.\[redacted\:data-uri\] {
    redacted: data-uri
}

/* Custom utility classes that don't conflict */

.hover\:tw--translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:tw-transform:hover {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:tw-border-primary-500:hover {
    --tw-border-opacity: 1;
    border-color: rgb(196 90 50 / 1);
    border-color: rgb(196 90 50 / var(--tw-border-opacity, 1))
}

.hover\:tw-border-primary-700:hover {
    --tw-border-opacity: 1;
    border-color: rgb(140 64 35 / 1);
    border-color: rgb(140 64 35 / var(--tw-border-opacity, 1))
}

.hover\:tw-bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / 1);
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.hover\:tw-bg-primary-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(112 51 28 / 1);
    background-color: rgb(112 51 28 / var(--tw-bg-opacity, 1))
}

.hover\:tw-shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.focus\:tw-border-primary-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(196 90 50 / 1);
    border-color: rgb(196 90 50 / var(--tw-border-opacity, 1))
}

.focus\:tw-outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:tw-ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:tw-ring-primary-200:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 208 192 / var(--tw-ring-opacity, 1))
}

.focus\:tw-ring-primary-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(196 90 50 / var(--tw-ring-opacity, 1))
}

.focus\:tw-ring-offset-2:focus {
    --tw-ring-offset-width: 2px
}

.disabled\:tw-cursor-not-allowed:disabled {
    cursor: not-allowed
}

.disabled\:tw-bg-gray-400:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / 1);
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1))
}

.disabled\:tw-text-white:disabled {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / 1);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.disabled\:tw-opacity-50:disabled {
    opacity: 0.5
}

/*# sourceMappingURL=main.677cb4de.css.map*/