/* src/styles.scss */
:root {
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-gray-50: #fafafa;
  --color-gray-100: #f4f4f5;
  --color-gray-200: #e4e4e7;
  --color-gray-300: #d4d4d8;
  --color-gray-400: #a1a1aa;
  --color-gray-500: #71717a;
  --color-gray-600: #52525b;
  --color-gray-700: #3f3f46;
  --color-gray-800: #27272a;
  --color-gray-900: #18181b;
  --color-gray-950: #09090b;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-100: #ede9fe;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-mono:
    "SF Mono",
    Monaco,
    "Cascadia Code",
    "Roboto Mono",
    Consolas,
    "Courier New",
    monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  --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;
  --z-notification: 1080;
  --z-top: 9999;
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --easing-linear: linear;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: all var(--duration-normal) var(--easing-default);
  --transition-fast: all var(--duration-fast) var(--easing-default);
  --transition-colors:
    color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-badge: 6px;
  --header-height: 64px;
  --table-cell-padding: 12px 16px;
  --input-height: 40px;
  --input-padding-y: 10px;
  --input-padding-x: 12px;
  --backdrop-overlay: rgba(0, 0, 0, 0.5);
  --table-header-bg: var(--muted);
}
:root,
.light {
  --background: var(--color-gray-50);
  --foreground: var(--color-gray-950);
  --card: #ffffff;
  --card-foreground: var(--color-gray-950);
  --primary: var(--color-indigo-600);
  --primary-foreground: #ffffff;
  --muted: var(--color-gray-100);
  --muted-foreground: var(--color-gray-600);
  --accent: var(--color-gray-100);
  --accent-foreground: var(--color-gray-950);
  --border: var(--color-gray-200);
  --input-border: var(--color-gray-300);
  --destructive: var(--color-red-600);
  --destructive-foreground: #ffffff;
  --destructive-bg: var(--color-red-50);
  --success: var(--color-green-700);
  --success-foreground: #ffffff;
  --success-bg: var(--color-green-50);
  --warning: var(--color-amber-600);
  --warning-foreground: var(--color-gray-950);
  --warning-bg: var(--color-amber-50);
  --info: var(--color-blue-600);
  --info-foreground: #ffffff;
  --info-bg: var(--color-blue-50);
  --critical: var(--color-violet-600);
  --critical-bg: var(--color-violet-100);
  --primary-accent: var(--color-indigo-600);
  --primary-accent-hover: var(--color-indigo-700);
  --input-bg: #ffffff;
  --focus-ring: 0 0 0 3px var(--color-indigo-100);
  --switch-checked-bg: var(--color-green-500);
  --switch-background: var(--color-gray-300);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --text-page-title: var(--text-3xl);
  --text-page-subtitle: var(--text-sm);
  --text-section-title: var(--text-lg);
  --text-section: var(--text-base);
  --text-body: var(--text-sm);
  --text-meta: var(--text-xs);
  --spacing-page-sm: var(--spacing-4);
  --spacing-page-md: var(--spacing-6);
  --spacing-page-lg: var(--spacing-8);
  --spacing-card: var(--spacing-6);
  --spacing-card-inner: var(--spacing-6);
  --spacing-section: var(--spacing-6);
  --spacing-section-block: var(--spacing-10);
  --spacing-row: var(--spacing-4);
  --spacing-title-description: var(--spacing-2);
  --spacing-description-card: var(--spacing-4);
}
.dark {
  --background: var(--color-gray-950);
  --foreground: var(--color-gray-50);
  --card: var(--color-gray-900);
  --card-foreground: var(--color-gray-50);
  --primary: var(--color-indigo-500);
  --primary-foreground: #ffffff;
  --muted: var(--color-gray-800);
  --muted-foreground: var(--color-gray-300);
  --accent: var(--color-gray-800);
  --accent-foreground: var(--color-gray-50);
  --border: var(--color-gray-800);
  --input-border: var(--color-gray-700);
  --destructive: var(--color-red-500);
  --destructive-foreground: #ffffff;
  --destructive-bg: rgba(239, 68, 68, 0.1);
  --success: var(--color-green-500);
  --success-foreground: var(--color-gray-950);
  --success-bg: rgba(34, 197, 94, 0.1);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-gray-950);
  --warning-bg: rgba(245, 158, 11, 0.1);
  --info: var(--color-blue-500);
  --info-foreground: #ffffff;
  --info-bg: rgba(59, 130, 246, 0.1);
  --critical: var(--color-violet-500);
  --critical-bg: rgba(139, 92, 246, 0.15);
  --primary-accent: var(--color-indigo-500);
  --primary-accent-hover: var(--color-indigo-400);
  --input-bg: var(--color-gray-800);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.3);
  --switch-checked-bg: var(--color-green-500);
  --switch-background: var(--color-gray-600);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --text-page-title: var(--text-3xl);
  --text-page-subtitle: var(--text-sm);
  --text-section-title: var(--text-lg);
  --text-section: var(--text-base);
  --text-body: var(--text-sm);
  --text-meta: var(--text-xs);
  --spacing-page-sm: var(--spacing-4);
  --spacing-page-md: var(--spacing-6);
  --spacing-page-lg: var(--spacing-8);
  --spacing-card: var(--spacing-6);
  --spacing-card-inner: var(--spacing-6);
  --spacing-section: var(--spacing-6);
  --spacing-section-block: var(--spacing-10);
  --spacing-row: var(--spacing-4);
  --spacing-title-description: var(--spacing-2);
  --spacing-description-card: var(--spacing-4);
}
.neutral {
  --background: #1a1a1d;
  --foreground: var(--color-gray-50);
  --card: #222226;
  --card-foreground: var(--color-gray-50);
  --primary: var(--color-indigo-400);
  --primary-foreground: var(--color-gray-950);
  --muted: #2d2d30;
  --muted-foreground: var(--color-gray-300);
  --accent: #2d2d30;
  --accent-foreground: var(--color-gray-50);
  --border: #2d2d30;
  --input-border: #404044;
  --destructive: var(--color-red-500);
  --destructive-foreground: #ffffff;
  --destructive-bg: rgba(239, 68, 68, 0.1);
  --success: var(--color-green-400);
  --success-foreground: var(--color-gray-950);
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: var(--color-amber-400);
  --warning-foreground: var(--color-gray-950);
  --warning-bg: rgba(251, 191, 36, 0.1);
  --info: var(--color-blue-400);
  --info-foreground: var(--color-gray-950);
  --info-bg: rgba(96, 165, 250, 0.1);
  --critical: var(--color-violet-500);
  --critical-bg: rgba(139, 92, 246, 0.15);
  --primary-accent: var(--color-indigo-400);
  --primary-accent-hover: var(--color-indigo-300);
  --input-bg: #2d2d30;
  --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.3);
  --switch-checked-bg: var(--color-green-500);
  --switch-background: var(--color-gray-600);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --text-page-title: var(--text-3xl);
  --text-page-subtitle: var(--text-sm);
  --text-section-title: var(--text-lg);
  --text-section: var(--text-base);
  --text-body: var(--text-sm);
  --text-meta: var(--text-xs);
  --spacing-page-sm: var(--spacing-4);
  --spacing-page-md: var(--spacing-6);
  --spacing-page-lg: var(--spacing-8);
  --spacing-card: var(--spacing-6);
  --spacing-card-inner: var(--spacing-6);
  --spacing-section: var(--spacing-6);
  --spacing-section-block: var(--spacing-10);
  --spacing-row: var(--spacing-4);
  --spacing-title-description: var(--spacing-2);
  --spacing-description-card: var(--spacing-4);
}
.settings-section {
  margin-bottom: var(--spacing-section-block, 40px);
}
.settings-section:last-child {
  margin-bottom: 0;
}
.settings-section__title {
  font-size: var(--text-section-title, 18px);
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  line-height: 1.3;
}
.settings-section__description {
  font-size: var(--text-body, 14px);
  color: var(--muted-foreground);
  margin: var(--spacing-title-description, 8px) 0 0;
  line-height: 1.45;
}
.settings-section__card {
  margin-top: 0;
  padding: var(--spacing-card-inner, 24px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.settings-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-row, 16px);
  flex-wrap: wrap;
  padding-bottom: var(--spacing-row, 16px);
  margin-bottom: var(--spacing-row, 16px);
  border-bottom: 1px solid var(--border);
}
.settings-card__header-title {
  font-size: var(--text-section-title, 18px);
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
}
.settings-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-row, 16px);
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.settings-row:not(:last-child) {
  margin-bottom: var(--spacing-row, 16px);
}
.settings-row__label {
  flex: 1 1 200px;
  min-width: 0;
}
.settings-row__title {
  font-weight: 600;
  font-size: var(--text-body, 14px);
  color: var(--foreground);
  display: block;
  margin: 0 0 2px;
}
.settings-row__description {
  font-size: var(--text-meta, 12px);
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.4;
}
.settings-row__control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.settings-row__control--align-top {
  align-items: flex-start;
}
.settings-row--stacked .settings-row__control {
  flex: 1 1 100%;
  width: 100%;
}
.settings-card__subsection {
  font-size: var(--text-body, 14px);
  font-weight: 600;
  color: var(--muted-foreground);
  margin: var(--spacing-row, 16px) 0 8px;
}
.settings-card__subsection:first-of-type {
  margin-top: 8px;
}
.settings-card__status {
  margin-top: var(--spacing-row, 16px);
  font-size: var(--text-meta, 12px);
  color: var(--muted-foreground);
}
.settings-card__status--success {
  color: var(--success);
}
.settings-card__status--error {
  color: var(--destructive);
}
.settings-card__footer {
  margin-top: var(--spacing-row, 16px);
  padding-top: var(--spacing-row, 16px);
  border-top: 1px solid var(--border);
}
.settings-row__lock {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .settings-row__control {
    width: 100%;
    justify-content: space-between;
  }
}
:root {
  --bg-color: var(--background);
  --text-color: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --border-color: var(--border);
  --hover-bg: var(--accent);
  --bg-muted: var(--muted);
  --sidebar-bg: var(--card);
  --sidebar-color: var(--card-foreground);
  --sidebar-border: var(--border);
  --sidebar-hover: var(--accent);
  --sidebar-active: var(--accent);
  --header-bg: var(--card);
}
* {
  box-sizing: border-box;
}
app-root {
  display: block;
  min-height: 100vh;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
}
p {
  margin: 0;
}
.scroll-area {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, var(--color-gray-400)) var(--scrollbar-track, var(--muted));
}
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
  background: var(--scrollbar-track, var(--muted));
  border-radius: 10px;
  margin: 2px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, var(--color-gray-400));
  border-radius: 10px;
  border: 2px solid var(--scrollbar-track, var(--muted));
  min-height: 40px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--color-gray-500));
}
.scroll-area::-webkit-scrollbar-corner {
  background: var(--scrollbar-track, var(--muted));
  border-radius: 0 0 10px 0;
}
button {
  font-family: inherit;
}
code {
  font-family:
    "Courier New",
    Courier,
    monospace;
}
.card {
  background: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card--table {
  padding: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-colors);
}
.button:focus-visible {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}
.button:hover:not(:disabled) {
  background: var(--hover-bg);
}
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.button--primary {
  background: var(--primary-accent);
  color: var(--primary-foreground);
  border-color: var(--primary-accent);
}
.button--primary:hover:not(:disabled) {
  background: var(--primary-accent-hover);
  border-color: var(--primary-accent-hover);
}
.button--default {
  background: var(--card);
  color: var(--foreground);
}
.button--text {
  background: transparent;
  border: none;
  padding: var(--spacing-1) var(--spacing-2);
}
.button--text:hover:not(:disabled) {
  background: var(--hover-bg);
}
.button--danger {
  color: var(--destructive);
  border-color: var(--destructive);
}
.button--danger:hover:not(:disabled) {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.button--small {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-meta);
}
.input {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  background: var(--input-bg);
  font-size: var(--text-body);
  color: var(--foreground);
  transition: var(--transition-colors);
}
.input:focus {
  outline: none;
  border-color: var(--primary-accent);
  box-shadow: var(--focus-ring);
}
.input::placeholder {
  color: var(--muted-foreground);
}
select.input {
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  cursor: pointer;
  appearance: auto;
  color: var(--foreground);
}
textarea.input {
  resize: vertical;
  min-height: 80px;
}
.badge {
  display: inline-block;
  padding: var(--spacing-1) 10px;
  border-radius: var(--radius-badge);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}
.badge--success {
  background-color: var(--success-bg);
  color: var(--success);
}
.badge--warning {
  background-color: var(--warning-bg);
  color: var(--warning);
}
.badge--default {
  background: var(--bg-muted);
  color: var(--text-secondary);
}
.badge--danger {
  background-color: var(--destructive-bg);
  color: var(--destructive);
}
.badge--critical {
  background-color: var(--critical-bg);
  color: var(--critical);
}
.badge--info {
  background-color: var(--info-bg);
  color: var(--info);
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch input:checked + .switch__slider {
  background-color: var(--switch-checked-bg);
}
.switch input:checked + .switch__slider::before {
  transform: translateX(22px);
}
.switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch-background);
  transition: var(--transition-default);
  border-radius: 22px;
}
.switch__slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: var(--transition-default);
  border-radius: 50%;
}
.m-0 {
  margin: var(--spacing-0);
}
.mt-0 {
  margin-top: var(--spacing-0);
}
.mr-0 {
  margin-right: var(--spacing-0);
}
.mb-0 {
  margin-bottom: var(--spacing-0);
}
.ml-0 {
  margin-left: var(--spacing-0);
}
.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}
.my-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}
.p-0 {
  padding: var(--spacing-0);
}
.pt-0 {
  padding-top: var(--spacing-0);
}
.pr-0 {
  padding-right: var(--spacing-0);
}
.pb-0 {
  padding-bottom: var(--spacing-0);
}
.pl-0 {
  padding-left: var(--spacing-0);
}
.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}
.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}
.gap-0 {
  gap: var(--spacing-0);
}
.m-1 {
  margin: var(--spacing-1);
}
.mt-1 {
  margin-top: var(--spacing-1);
}
.mr-1 {
  margin-right: var(--spacing-1);
}
.mb-1 {
  margin-bottom: var(--spacing-1);
}
.ml-1 {
  margin-left: var(--spacing-1);
}
.mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}
.my-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
.p-1 {
  padding: var(--spacing-1);
}
.pt-1 {
  padding-top: var(--spacing-1);
}
.pr-1 {
  padding-right: var(--spacing-1);
}
.pb-1 {
  padding-bottom: var(--spacing-1);
}
.pl-1 {
  padding-left: var(--spacing-1);
}
.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}
.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
.gap-1 {
  gap: var(--spacing-1);
}
.m-2 {
  margin: var(--spacing-2);
}
.mt-2 {
  margin-top: var(--spacing-2);
}
.mr-2 {
  margin-right: var(--spacing-2);
}
.mb-2 {
  margin-bottom: var(--spacing-2);
}
.ml-2 {
  margin-left: var(--spacing-2);
}
.mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}
.my-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.p-2 {
  padding: var(--spacing-2);
}
.pt-2 {
  padding-top: var(--spacing-2);
}
.pr-2 {
  padding-right: var(--spacing-2);
}
.pb-2 {
  padding-bottom: var(--spacing-2);
}
.pl-2 {
  padding-left: var(--spacing-2);
}
.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.gap-2 {
  gap: var(--spacing-2);
}
.m-3 {
  margin: var(--spacing-3);
}
.mt-3 {
  margin-top: var(--spacing-3);
}
.mr-3 {
  margin-right: var(--spacing-3);
}
.mb-3 {
  margin-bottom: var(--spacing-3);
}
.ml-3 {
  margin-left: var(--spacing-3);
}
.mx-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}
.my-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.p-3 {
  padding: var(--spacing-3);
}
.pt-3 {
  padding-top: var(--spacing-3);
}
.pr-3 {
  padding-right: var(--spacing-3);
}
.pb-3 {
  padding-bottom: var(--spacing-3);
}
.pl-3 {
  padding-left: var(--spacing-3);
}
.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
.gap-3 {
  gap: var(--spacing-3);
}
.m-4 {
  margin: var(--spacing-4);
}
.mt-4 {
  margin-top: var(--spacing-4);
}
.mr-4 {
  margin-right: var(--spacing-4);
}
.mb-4 {
  margin-bottom: var(--spacing-4);
}
.ml-4 {
  margin-left: var(--spacing-4);
}
.mx-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}
.my-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}
.p-4 {
  padding: var(--spacing-4);
}
.pt-4 {
  padding-top: var(--spacing-4);
}
.pr-4 {
  padding-right: var(--spacing-4);
}
.pb-4 {
  padding-bottom: var(--spacing-4);
}
.pl-4 {
  padding-left: var(--spacing-4);
}
.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}
.gap-4 {
  gap: var(--spacing-4);
}
.m-5 {
  margin: var(--spacing-5);
}
.mt-5 {
  margin-top: var(--spacing-5);
}
.mr-5 {
  margin-right: var(--spacing-5);
}
.mb-5 {
  margin-bottom: var(--spacing-5);
}
.ml-5 {
  margin-left: var(--spacing-5);
}
.mx-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}
.my-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}
.p-5 {
  padding: var(--spacing-5);
}
.pt-5 {
  padding-top: var(--spacing-5);
}
.pr-5 {
  padding-right: var(--spacing-5);
}
.pb-5 {
  padding-bottom: var(--spacing-5);
}
.pl-5 {
  padding-left: var(--spacing-5);
}
.px-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}
.py-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}
.gap-5 {
  gap: var(--spacing-5);
}
.m-6 {
  margin: var(--spacing-6);
}
.mt-6 {
  margin-top: var(--spacing-6);
}
.mr-6 {
  margin-right: var(--spacing-6);
}
.mb-6 {
  margin-bottom: var(--spacing-6);
}
.ml-6 {
  margin-left: var(--spacing-6);
}
.mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}
.my-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
.p-6 {
  padding: var(--spacing-6);
}
.pt-6 {
  padding-top: var(--spacing-6);
}
.pr-6 {
  padding-right: var(--spacing-6);
}
.pb-6 {
  padding-bottom: var(--spacing-6);
}
.pl-6 {
  padding-left: var(--spacing-6);
}
.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
.py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}
.gap-6 {
  gap: var(--spacing-6);
}
.m-7 {
  margin: var(--spacing-7);
}
.mt-7 {
  margin-top: var(--spacing-7);
}
.mr-7 {
  margin-right: var(--spacing-7);
}
.mb-7 {
  margin-bottom: var(--spacing-7);
}
.ml-7 {
  margin-left: var(--spacing-7);
}
.mx-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}
.my-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}
.p-7 {
  padding: var(--spacing-7);
}
.pt-7 {
  padding-top: var(--spacing-7);
}
.pr-7 {
  padding-right: var(--spacing-7);
}
.pb-7 {
  padding-bottom: var(--spacing-7);
}
.pl-7 {
  padding-left: var(--spacing-7);
}
.px-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}
.py-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}
.gap-7 {
  gap: var(--spacing-7);
}
.m-8 {
  margin: var(--spacing-8);
}
.mt-8 {
  margin-top: var(--spacing-8);
}
.mr-8 {
  margin-right: var(--spacing-8);
}
.mb-8 {
  margin-bottom: var(--spacing-8);
}
.ml-8 {
  margin-left: var(--spacing-8);
}
.mx-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}
.my-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}
.p-8 {
  padding: var(--spacing-8);
}
.pt-8 {
  padding-top: var(--spacing-8);
}
.pr-8 {
  padding-right: var(--spacing-8);
}
.pb-8 {
  padding-bottom: var(--spacing-8);
}
.pl-8 {
  padding-left: var(--spacing-8);
}
.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}
.py-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}
.gap-8 {
  gap: var(--spacing-8);
}
.m-9 {
  margin: var(--spacing-9);
}
.mt-9 {
  margin-top: var(--spacing-9);
}
.mr-9 {
  margin-right: var(--spacing-9);
}
.mb-9 {
  margin-bottom: var(--spacing-9);
}
.ml-9 {
  margin-left: var(--spacing-9);
}
.mx-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}
.my-9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}
.p-9 {
  padding: var(--spacing-9);
}
.pt-9 {
  padding-top: var(--spacing-9);
}
.pr-9 {
  padding-right: var(--spacing-9);
}
.pb-9 {
  padding-bottom: var(--spacing-9);
}
.pl-9 {
  padding-left: var(--spacing-9);
}
.px-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}
.py-9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}
.gap-9 {
  gap: var(--spacing-9);
}
.m-10 {
  margin: var(--spacing-10);
}
.mt-10 {
  margin-top: var(--spacing-10);
}
.mr-10 {
  margin-right: var(--spacing-10);
}
.mb-10 {
  margin-bottom: var(--spacing-10);
}
.ml-10 {
  margin-left: var(--spacing-10);
}
.mx-10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}
.my-10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}
.p-10 {
  padding: var(--spacing-10);
}
.pt-10 {
  padding-top: var(--spacing-10);
}
.pr-10 {
  padding-right: var(--spacing-10);
}
.pb-10 {
  padding-bottom: var(--spacing-10);
}
.pl-10 {
  padding-left: var(--spacing-10);
}
.px-10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}
.py-10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}
.gap-10 {
  gap: var(--spacing-10);
}
.m-11 {
  margin: var(--spacing-11);
}
.mt-11 {
  margin-top: var(--spacing-11);
}
.mr-11 {
  margin-right: var(--spacing-11);
}
.mb-11 {
  margin-bottom: var(--spacing-11);
}
.ml-11 {
  margin-left: var(--spacing-11);
}
.mx-11 {
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-11);
}
.my-11 {
  margin-top: var(--spacing-11);
  margin-bottom: var(--spacing-11);
}
.p-11 {
  padding: var(--spacing-11);
}
.pt-11 {
  padding-top: var(--spacing-11);
}
.pr-11 {
  padding-right: var(--spacing-11);
}
.pb-11 {
  padding-bottom: var(--spacing-11);
}
.pl-11 {
  padding-left: var(--spacing-11);
}
.px-11 {
  padding-left: var(--spacing-11);
  padding-right: var(--spacing-11);
}
.py-11 {
  padding-top: var(--spacing-11);
  padding-bottom: var(--spacing-11);
}
.gap-11 {
  gap: var(--spacing-11);
}
.m-12 {
  margin: var(--spacing-12);
}
.mt-12 {
  margin-top: var(--spacing-12);
}
.mr-12 {
  margin-right: var(--spacing-12);
}
.mb-12 {
  margin-bottom: var(--spacing-12);
}
.ml-12 {
  margin-left: var(--spacing-12);
}
.mx-12 {
  margin-left: var(--spacing-12);
  margin-right: var(--spacing-12);
}
.my-12 {
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}
.p-12 {
  padding: var(--spacing-12);
}
.pt-12 {
  padding-top: var(--spacing-12);
}
.pr-12 {
  padding-right: var(--spacing-12);
}
.pb-12 {
  padding-bottom: var(--spacing-12);
}
.pl-12 {
  padding-left: var(--spacing-12);
}
.px-12 {
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
}
.py-12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}
.gap-12 {
  gap: var(--spacing-12);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */