/* Bravery AI — Design System CSS */
/* Extracted from app/Views/layouts/app.php */

/* App-only root font-size scaling — public/landing pages unaffected */
html:has(body.app-viewport) { font-size: 15px; }
@media (min-width: 1536px) { html:has(body.app-viewport) { font-size: 14px; } }
@media (max-width: 768px)  { html:has(body.app-viewport) { font-size: 16px; } }

[x-cloak] { display: none !important; }
/* App shell: min-height fills viewport, body can grow beyond for native scroll */
.app-viewport { min-height: 100vh; min-height: 100dvh; }
/* === Beyond UI Design Tokens (CSS Custom Properties) === */
:root {
  /* Typography */
  --txt-primary: #0D0D0D;
  --txt-secondary: #6B6A63;
  --txt-tertiary: #9C9A90;
  --txt-disabled: #D4D3CE;
  --txt-quaternary: #FFFFFF;
  /* Background */
  --bg-0: #FFFFFF;
  --bg-0-hover: #F5F5F4;
  --bg-50: #F5F5F4;
  --bg-50-hover: #E8E8E6;
  --bg-100: #E8E8E6;
  --bg-100-hover: #DDDCD7;
  --bg-200: #F5F5F4;
  --bg-disabled: #E8E8E6;
  --bg-primary-500: #6B6A63;
  --bg-primary-500-hover: #4A4945;
  --bg-primary-500-a10: rgba(107, 106, 99, 0.1);
  --bg-primary-500-a10-hover: rgba(107, 106, 99, 0.15);
  --bg-success-500: #6B6A63;
  --bg-success-500-hover: #4A4945;
  --bg-success-500-a10: rgba(107, 106, 99, 0.1);
  --bg-success-500-a10-hover: rgba(107, 106, 99, 0.15);
  --bg-error-500: #6B6A63;
  --bg-error-500-hover: #4A4945;
  --bg-error-500-a10: rgba(107, 106, 99, 0.1);
  --bg-error-500-a10-hover: rgba(107, 106, 99, 0.15);
  /* Border */
  --bdr-100: rgba(0,0,0,0.07);
  --bdr-100-hover: rgba(0,0,0,0.12);
  --bdr-200: rgba(0,0,0,0.12);
  --bdr-200-hover: rgba(0,0,0,0.18);
  --bdr-300: rgba(0,0,0,0.18);
  --bdr-300-hover: rgba(0,0,0,0.25);
  --bdr-400: rgba(0,0,0,0.18);
  --bdr-400-hover: rgba(0,0,0,0.25);
  --bdr-800: #0D0D0D;
  --bdr-800-hover: #0D0D0D;
  --bdr-900: #0D0D0D;
  --bdr-disabled: #D4D3CE;
  --bdr-primary-500: #6B6A63;
  --bdr-primary-500-hover: #4A4945;
  --bdr-success-500: #6B6A63;
  --bdr-success-500-hover: #4A4945;
  --bdr-error-500: #6B6A63;
  --bdr-error-500-hover: #4A4945;
  /* Foreground */
  --fg-900: #0D0D0D;
  --fg-800: #33332E;
  --fg-800-hover: #0D0D0D;
  --fg-700: #6B6A63;
  --fg-700-hover: #33332E;
  --fg-600: #6B6A63;
  --fg-600-hover: #33332E;
  --fg-500: #9C9A90;
  --fg-500-hover: #6B6A63;
  --fg-400: #9C9A90;
  --fg-400-hover: #6B6A63;
  --fg-300: #D4D3CE;
  --fg-300-hover: #9C9A90;
  /* Icon */
  --icon-0: #FFFFFF;
  --icon-50: #FFFFFF;
  --icon-100: #F5F5F4;
  --icon-200: #E8E7E2;
  --icon-300: #D4D3CE;
  --icon-400: #9C9A90;
  --icon-500: #6B6A63;
  --icon-600: #6B6A63;
  --icon-700: #33332E;
  --icon-800: #0D0D0D;
  --icon-900: #0D0D0D;
}
html.dark {
  /* Typography */
  --txt-primary: #E8E6DC;
  --txt-secondary: #9C9A90;
  --txt-tertiary: #6B6A63;
  --txt-disabled: #2A2A27;
  --txt-quaternary: #161615;
  /* Background */
  --bg-0: #161615;
  --bg-0-hover: #1E1E1C;
  --bg-50: #1E1E1C;
  --bg-50-hover: #2A2A27;
  --bg-100: #2A2A27;
  --bg-100-hover: #353531;
  --bg-200: #1E1E1C;
  --bg-disabled: #1E1E1C;
  --bg-primary-500: #6B6A63;
  --bg-primary-500-hover: #4A4945;
  --bg-primary-500-a10: rgba(107, 106, 99, 0.1);
  --bg-primary-500-a10-hover: rgba(107, 106, 99, 0.15);
  --bg-success-500: #6B6A63;
  --bg-success-500-hover: #4A4945;
  --bg-success-500-a10: rgba(107, 106, 99, 0.1);
  --bg-success-500-a10-hover: rgba(107, 106, 99, 0.15);
  --bg-error-500: #6B6A63;
  --bg-error-500-hover: #4A4945;
  --bg-error-500-a10: rgba(107, 106, 99, 0.1);
  --bg-error-500-a10-hover: rgba(107, 106, 99, 0.15);
  /* Border */
  --bdr-100: rgba(255,255,255,0.07);
  --bdr-100-hover: rgba(255,255,255,0.12);
  --bdr-200: rgba(255,255,255,0.12);
  --bdr-200-hover: rgba(255,255,255,0.18);
  --bdr-300: rgba(255,255,255,0.12);
  --bdr-300-hover: rgba(255,255,255,0.18);
  --bdr-400: rgba(255,255,255,0.18);
  --bdr-400-hover: rgba(255,255,255,0.25);
  --bdr-800: #E8E6DC;
  --bdr-800-hover: #E8E6DC;
  --bdr-900: #2A2A27;
  --bdr-disabled: #2A2A27;
  --bdr-primary-500: #6B6A63;
  --bdr-primary-500-hover: #4A4945;
  --bdr-success-500: #6B6A63;
  --bdr-success-500-hover: #4A4945;
  --bdr-error-500: #6B6A63;
  --bdr-error-500-hover: #4A4945;
  /* Foreground */
  --fg-900: #E8E6DC;
  --fg-800: #9C9A90;
  --fg-800-hover: #E8E6DC;
  --fg-700: #9C9A90;
  --fg-700-hover: #E8E6DC;
  --fg-600: #9C9A90;
  --fg-600-hover: #E8E6DC;
  --fg-500: #6B6A63;
  --fg-500-hover: #9C9A90;
  --fg-400: #6B6A63;
  --fg-400-hover: #9C9A90;
  --fg-300: #2A2A27;
  --fg-300-hover: #6B6A63;
  /* Icon */
  --icon-0: #161615;
  --icon-50: #1E1E1C;
  --icon-100: #2A2A27;
  --icon-200: #353531;
  --icon-300: #6B6A63;
  --icon-400: #9C9A90;
  --icon-500: #9C9A90;
  --icon-600: #E8E6DC;
  --icon-700: #E8E6DC;
  --icon-800: #E8E6DC;
  --icon-900: #E8E6DC;
}
/* === Accent Color System === */
/* Default: Gray */
:root, html[data-accent="gray"] {
  --accent: #6B6A63;
  --accent-hover: #33332E;
  --accent-light: rgba(107, 106, 99, 0.1);
  --accent-light-hover: rgba(107, 106, 99, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(107, 106, 99, 0.24);
}
html.dark[data-accent="gray"] {
  --accent: #9C9A90;
  --accent-hover: #E8E6DC;
  --accent-light: rgba(156, 154, 144, 0.1);
  --accent-light-hover: rgba(156, 154, 144, 0.15);
  --accent-text: #161615;
  --accent-ring: rgba(156, 154, 144, 0.24);
}
/* Blue */
html[data-accent="blue"] {
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-light: rgba(37, 99, 235, 0.1);
  --accent-light-hover: rgba(37, 99, 235, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(37, 99, 235, 0.24);
}
html.dark[data-accent="blue"] {
  --accent: #3B82F6;
  --accent-hover: #60A5FA;
  --accent-light: rgba(59, 130, 246, 0.1);
  --accent-light-hover: rgba(59, 130, 246, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(59, 130, 246, 0.24);
}
/* Cyan */
html[data-accent="cyan"] {
  --accent: #0891B2;
  --accent-hover: #0E7490;
  --accent-light: rgba(8, 145, 178, 0.1);
  --accent-light-hover: rgba(8, 145, 178, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(8, 145, 178, 0.24);
}
html.dark[data-accent="cyan"] {
  --accent: #22D3EE;
  --accent-hover: #67E8F9;
  --accent-light: rgba(34, 211, 238, 0.1);
  --accent-light-hover: rgba(34, 211, 238, 0.15);
  --accent-text: #161615;
  --accent-ring: rgba(34, 211, 238, 0.24);
}
/* Green */
html[data-accent="green"] {
  --accent: #059669;
  --accent-hover: #047857;
  --accent-light: rgba(5, 150, 105, 0.1);
  --accent-light-hover: rgba(5, 150, 105, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(5, 150, 105, 0.24);
}
html.dark[data-accent="green"] {
  --accent: #10B981;
  --accent-hover: #34D399;
  --accent-light: rgba(16, 185, 129, 0.1);
  --accent-light-hover: rgba(16, 185, 129, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(16, 185, 129, 0.24);
}
/* Purple */
html[data-accent="purple"] {
  --accent: #7C3AED;
  --accent-hover: #6D28D9;
  --accent-light: rgba(124, 58, 237, 0.1);
  --accent-light-hover: rgba(124, 58, 237, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(124, 58, 237, 0.24);
}
html.dark[data-accent="purple"] {
  --accent: #8B5CF6;
  --accent-hover: #A78BFA;
  --accent-light: rgba(139, 92, 246, 0.1);
  --accent-light-hover: rgba(139, 92, 246, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(139, 92, 246, 0.24);
}
/* Amber */
html[data-accent="amber"] {
  --accent: #D97706;
  --accent-hover: #B45309;
  --accent-light: rgba(217, 119, 6, 0.1);
  --accent-light-hover: rgba(217, 119, 6, 0.15);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(217, 119, 6, 0.24);
}
html.dark[data-accent="amber"] {
  --accent: #F59E0B;
  --accent-hover: #FBBF24;
  --accent-light: rgba(245, 158, 11, 0.1);
  --accent-light-hover: rgba(245, 158, 11, 0.15);
  --accent-text: #161615;
  --accent-ring: rgba(245, 158, 11, 0.24);
}

/* === Font Preference System === */
html[data-font="inter"], :root { --font-app: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }
html[data-font="plus-jakarta"] { --font-app: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
html[data-font="dm-sans"] { --font-app: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
html[data-font="nunito"] { --font-app: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif; }

body { font-family: var(--font-app); }

/* === Accent Utility Classes === */
.accent-bg { background-color: var(--accent); color: var(--accent-text); }
.accent-bg:hover { background-color: var(--accent-hover); }
.accent-text { color: var(--accent); }
.accent-text:hover { color: var(--accent-hover); }
.accent-border { border-color: var(--accent); }
.accent-bg-light { background-color: var(--accent-light); }
.accent-bg-light:hover { background-color: var(--accent-light-hover); }
.accent-ring:focus, .accent-ring:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.accent-focus:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.accent-link { color: var(--accent); }
.accent-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Critical dark mode colors applied before Tailwind loads — prevents white flash */
html.dark { background-color: var(--bg-0); color: var(--txt-primary); }
html.dark body { background-color: var(--bg-0); color: var(--txt-primary); font-family: var(--font-app); }
/* Block transitions on initial paint so theme swap is instant */
html.no-transition, html.no-transition *, html.no-transition *::before, html.no-transition *::after {
  transition: none !important;
}

/* ============================================
   Beyond UI Button System
   ============================================ */

/* --- Button Base --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 150ms ease-in-out;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: 1px solid transparent;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --- Button Sizes --- */
.btn-xs  { font-size: 0.75rem; line-height: 1rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem; gap: 0.25rem; }
.btn-sm  { font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem 1rem; border-radius: 0.5rem; gap: 0.375rem; }
.btn-md  { font-size: 0.875rem; line-height: 1.25rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; gap: 0.5rem; }
.btn-lg  { font-size: 1rem; line-height: 1.5rem; padding: 0.75rem 1.5rem; border-radius: 0.625rem; gap: 0.5rem; }
.btn-xl  { font-size: 1rem; line-height: 1.5rem; padding: 0.875rem 1.75rem; border-radius: 0.625rem; gap: 0.625rem; }
.btn-2xl { font-size: 1.125rem; line-height: 1.75rem; padding: 1rem 2rem; border-radius: 0.75rem; gap: 0.75rem; }

/* --- Button Icon Only Sizes --- */
.btn-icon-xs  { padding: 0.375rem; width: 1.75rem; height: 1.75rem; }
.btn-icon-sm  { padding: 0.5rem; width: 2rem; height: 2rem; }
.btn-icon-md  { padding: 0.625rem; width: 2.5rem; height: 2.5rem; }
.btn-icon-lg  { padding: 0.75rem; width: 3rem; height: 3rem; }
.btn-icon-xl  { padding: 0.875rem; width: 3.5rem; height: 3.5rem; }
.btn-icon-2xl { padding: 1rem; width: 4rem; height: 4rem; }

/* --- Solid Variants --- */
.btn-gray    { background-color: rgb(99, 112, 131); color: white; }
.btn-gray:hover { background-color: rgb(74, 85, 104); }
.btn-gray:active { background-color: rgb(54, 65, 82); }

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

.btn-error   { background-color: rgb(239, 68, 68); color: white; }
.btn-error:hover { background-color: rgb(220, 38, 38); }
.btn-error:active { background-color: rgb(185, 28, 28); }

.btn-success { background-color: rgb(34, 197, 94); color: white; }
.btn-success:hover { background-color: rgb(22, 163, 74); }
.btn-success:active { background-color: rgb(21, 128, 61); }

.btn-warning { background-color: rgb(251, 146, 60); color: white; }
.btn-warning:hover { background-color: rgb(249, 115, 22); }
.btn-warning:active { background-color: rgb(234, 88, 12); }

.btn-info    { background-color: rgb(59, 130, 246); color: white; }
.btn-info:hover { background-color: rgb(37, 99, 235); }
.btn-info:active { background-color: rgb(29, 78, 216); }

.btn-orange  { background-color: rgb(251, 146, 60); color: white; }
.btn-orange:hover { background-color: rgb(249, 115, 22); }
.btn-orange:active { background-color: rgb(234, 88, 12); }

.btn-purple  { background-color: rgb(168, 85, 247); color: white; }
.btn-purple:hover { background-color: rgb(147, 51, 234); }
.btn-purple:active { background-color: rgb(126, 34, 206); }

/* --- Outline Variants --- */
.btn-outline-gray    { background-color: transparent; color: rgb(99, 112, 131); border-color: rgb(209, 213, 219); }
.btn-outline-gray:hover { background-color: rgb(249, 250, 251); border-color: rgb(99, 112, 131); }

.btn-outline-primary { background-color: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); color: var(--accent-text); }

.btn-outline-error   { background-color: transparent; color: rgb(239, 68, 68); border-color: rgb(239, 68, 68); }
.btn-outline-error:hover { background-color: rgb(239, 68, 68); color: white; }

.btn-outline-success { background-color: transparent; color: rgb(34, 197, 94); border-color: rgb(34, 197, 94); }
.btn-outline-success:hover { background-color: rgb(34, 197, 94); color: white; }

.btn-outline-warning { background-color: transparent; color: rgb(251, 146, 60); border-color: rgb(251, 146, 60); }
.btn-outline-warning:hover { background-color: rgb(251, 146, 60); color: white; }

.btn-outline-info    { background-color: transparent; color: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }
.btn-outline-info:hover { background-color: rgb(59, 130, 246); color: white; }

.btn-outline-orange  { background-color: transparent; color: rgb(251, 146, 60); border-color: rgb(251, 146, 60); }
.btn-outline-orange:hover { background-color: rgb(251, 146, 60); color: white; }

.btn-outline-purple  { background-color: transparent; color: rgb(168, 85, 247); border-color: rgb(168, 85, 247); }
.btn-outline-purple:hover { background-color: rgb(168, 85, 247); color: white; }

/* --- Ghost Variants --- */
.btn-ghost-gray    { background-color: transparent; color: rgb(99, 112, 131); border-color: transparent; }
.btn-ghost-gray:hover { background-color: rgb(243, 244, 246); }

.btn-ghost-primary { background-color: transparent; color: var(--accent); border-color: transparent; }
.btn-ghost-primary:hover { background-color: var(--accent-light); }

.btn-ghost-error   { background-color: transparent; color: rgb(239, 68, 68); border-color: transparent; }
.btn-ghost-error:hover { background-color: rgba(239, 68, 68, 0.1); }

.btn-ghost-success { background-color: transparent; color: rgb(34, 197, 94); border-color: transparent; }
.btn-ghost-success:hover { background-color: rgba(34, 197, 94, 0.1); }

.btn-ghost-warning { background-color: transparent; color: rgb(251, 146, 60); border-color: transparent; }
.btn-ghost-warning:hover { background-color: rgba(251, 146, 60, 0.1); }

.btn-ghost-info    { background-color: transparent; color: rgb(59, 130, 246); border-color: transparent; }
.btn-ghost-info:hover { background-color: rgba(59, 130, 246, 0.1); }

.btn-ghost-orange  { background-color: transparent; color: rgb(251, 146, 60); border-color: transparent; }
.btn-ghost-orange:hover { background-color: rgba(251, 146, 60, 0.1); }

.btn-ghost-purple  { background-color: transparent; color: rgb(168, 85, 247); border-color: transparent; }
.btn-ghost-purple:hover { background-color: rgba(168, 85, 247, 0.1); }

/* --- Soft Variants --- */
.btn-soft-gray    { background-color: rgb(243, 244, 246); color: rgb(55, 65, 81); border-color: transparent; }
.btn-soft-gray:hover { background-color: rgb(229, 231, 235); }

.btn-soft-primary { background-color: var(--accent-light); color: var(--accent); border-color: transparent; }
.btn-soft-primary:hover { background-color: var(--accent-light-hover); }

.btn-soft-error   { background-color: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); border-color: transparent; }
.btn-soft-error:hover { background-color: rgba(239, 68, 68, 0.15); }

.btn-soft-success { background-color: rgba(34, 197, 94, 0.1); color: rgb(34, 197, 94); border-color: transparent; }
.btn-soft-success:hover { background-color: rgba(34, 197, 94, 0.15); }

.btn-soft-warning { background-color: rgba(251, 146, 60, 0.1); color: rgb(251, 146, 60); border-color: transparent; }
.btn-soft-warning:hover { background-color: rgba(251, 146, 60, 0.15); }

.btn-soft-info    { background-color: rgba(59, 130, 246, 0.1); color: rgb(59, 130, 246); border-color: transparent; }
.btn-soft-info:hover { background-color: rgba(59, 130, 246, 0.15); }

.btn-soft-orange  { background-color: rgba(251, 146, 60, 0.1); color: rgb(251, 146, 60); border-color: transparent; }
.btn-soft-orange:hover { background-color: rgba(251, 146, 60, 0.15); }

.btn-soft-purple  { background-color: rgba(168, 85, 247, 0.1); color: rgb(168, 85, 247); border-color: transparent; }
.btn-soft-purple:hover { background-color: rgba(168, 85, 247, 0.15); }

/* ============================================
   Beyond UI Social Media Buttons
   ============================================ */

/* --- Social Button Base --- */
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: all 150ms ease-in-out;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.btn-social:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-social:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); }

/* --- Social Size Variants --- */
.btn-social-sm { font-size: 0.75rem; line-height: 1rem; padding: 0.5rem 1rem; gap: 0.375rem; }
.btn-social-md { font-size: 0.875rem; line-height: 1.25rem; padding: 0.625rem 1.25rem; gap: 0.5rem; }
.btn-social-lg { font-size: 1rem; line-height: 1.5rem; padding: 0.75rem 1.5rem; gap: 0.625rem; }

/* --- Social Icon Only --- */
.btn-social-icon    { width: 2.5rem; height: 2.5rem; padding: 0; gap: 0; }
.btn-social-icon-sm { width: 2rem; height: 2rem; padding: 0; gap: 0; }
.btn-social-icon-lg { width: 3rem; height: 3rem; padding: 0; gap: 0; }

/* --- Apple --- */
.btn-social-apple         { background-color: #000000; color: #FFFFFF; border-color: #000000; }
.btn-social-apple:hover   { background-color: #1a1a1a; }
.btn-social-apple:active  { background-color: #2d2d2d; }

.btn-social-apple-outline       { background-color: transparent; color: #000000; border-color: #000000; }
.btn-social-apple-outline:hover { background-color: rgba(0, 0, 0, 0.05); }

.btn-social-apple-ghost       { background-color: transparent; color: #000000; border-color: transparent; }
.btn-social-apple-ghost:hover { background-color: rgba(0, 0, 0, 0.05); }

/* --- Google --- */
.btn-social-google         { background-color: #FFFFFF; color: #0D0D0D; border-color: rgba(0,0,0,0.12); }
.btn-social-google:hover   { background-color: #F5F5F4; border-color: rgba(0,0,0,0.18); }
.btn-social-google:active  { background-color: #E8E7E2; }

.btn-social-google-outline       { background-color: transparent; color: #1F1F1F; border-color: #747775; }
.btn-social-google-outline:hover { background-color: rgba(66, 133, 244, 0.04); }

.btn-social-google-ghost       { background-color: transparent; color: #1F1F1F; border-color: transparent; }
.btn-social-google-ghost:hover { background-color: rgba(0, 0, 0, 0.04); }

/* --- Microsoft --- */
.btn-social-microsoft         { background-color: #FFFFFF; color: #5E5E5E; border-color: #8C8C8C; }
.btn-social-microsoft:hover   { background-color: #f3f2f1; }
.btn-social-microsoft:active  { background-color: #edebe9; }

.btn-social-microsoft-outline       { background-color: transparent; color: #5E5E5E; border-color: #8C8C8C; }
.btn-social-microsoft-outline:hover { background-color: rgba(0, 0, 0, 0.04); }

.btn-social-microsoft-ghost       { background-color: transparent; color: #5E5E5E; border-color: transparent; }
.btn-social-microsoft-ghost:hover { background-color: rgba(0, 0, 0, 0.04); }

/* --- Facebook --- */
.btn-social-facebook         { background-color: #0866FF; color: #FFFFFF; border-color: #0866FF; }
.btn-social-facebook:hover   { background-color: #0757e6; }
.btn-social-facebook:active  { background-color: #0652d9; }

.btn-social-facebook-outline       { background-color: transparent; color: #0866FF; border-color: #0866FF; }
.btn-social-facebook-outline:hover { background-color: rgba(8, 102, 255, 0.04); }

.btn-social-facebook-ghost       { background-color: transparent; color: #0866FF; border-color: transparent; }
.btn-social-facebook-ghost:hover { background-color: rgba(8, 102, 255, 0.04); }

/* --- X (Twitter) --- */
.btn-social-x         { background-color: #000000; color: #FFFFFF; border-color: #000000; }
.btn-social-x:hover   { background-color: #1a1a1a; }
.btn-social-x:active  { background-color: #2d2d2d; }

.btn-social-x-outline       { background-color: transparent; color: #000000; border-color: #000000; }
.btn-social-x-outline:hover { background-color: rgba(0, 0, 0, 0.04); }

.btn-social-x-ghost       { background-color: transparent; color: #000000; border-color: transparent; }
.btn-social-x-ghost:hover { background-color: rgba(0, 0, 0, 0.04); }

/* --- Dribbble --- */
.btn-social-dribbble         { background-color: #EA4C89; color: #FFFFFF; border-color: #EA4C89; }
.btn-social-dribbble:hover   { background-color: #e7397c; }
.btn-social-dribbble:active  { background-color: #d92d70; }

.btn-social-dribbble-outline       { background-color: transparent; color: #EA4C89; border-color: #EA4C89; }
.btn-social-dribbble-outline:hover { background-color: rgba(234, 76, 137, 0.04); }

.btn-social-dribbble-ghost       { background-color: transparent; color: #EA4C89; border-color: transparent; }
.btn-social-dribbble-ghost:hover { background-color: rgba(234, 76, 137, 0.04); }

/* --- Figma --- */
.btn-social-figma         { background-color: #000000; color: #FFFFFF; border-color: #000000; }
.btn-social-figma:hover   { background-color: #1a1a1a; }
.btn-social-figma:active  { background-color: #2d2d2d; }

.btn-social-figma-outline       { background-color: transparent; color: #000000; border-color: #000000; }
.btn-social-figma-outline:hover { background-color: rgba(0, 0, 0, 0.04); }

.btn-social-figma-ghost       { background-color: transparent; color: #000000; border-color: transparent; }
.btn-social-figma-ghost:hover { background-color: rgba(0, 0, 0, 0.04); }

/* ============================================
   Beyond UI App Store Badges
   ============================================ */

/* --- Badge Base --- */
.badge-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  border-radius: 0.375rem;
  transition: all 150ms ease-in-out;
  cursor: pointer;
  user-select: none;
  outline: none;
  overflow: hidden;
}
.badge-app:hover { transform: scale(1.02); }
.badge-app:active { transform: scale(0.98); }
.badge-app:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.3); outline-offset: 2px; }

/* --- App Store Badge Sizes --- */
.badge-app-sm { height: 32px; min-width: 100px; }
.badge-app-md { height: 40px; min-width: 120px; }
.badge-app-lg { height: 48px; min-width: 140px; }
.badge-app-xl { height: 56px; min-width: 160px; }

/* --- Google Play --- */
.badge-google-play         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-google-play-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Apple App Store --- */
.badge-app-store         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-app-store-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Samsung Galaxy Store --- */
.badge-galaxy-store         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-galaxy-store-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Huawei AppGallery --- */
.badge-app-gallery         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-app-gallery-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Huawei ONE Store --- */
.badge-one-store         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-one-store-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Microsoft Store --- */
.badge-microsoft-store         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-microsoft-store-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- Amazon Appstore --- */
.badge-amazon-appstore         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-amazon-appstore-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- F-Droid --- */
.badge-fdroid         { background-color: #000000; color: #FFFFFF; border: none; }
.badge-fdroid-outline { background-color: transparent; color: #000000; border: 1px solid #000000; }

/* --- App Store Badge Containers --- */
.badge-app-container          { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.badge-app-container-center   { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; }
.badge-app-container-vertical { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }

/* ============================================
   Beyond UI Button Groups
   ============================================ */

/* --- Horizontal Button Group (attached) --- */
.btn-group {
  display: inline-flex;
  flex-direction: row;
  gap: 0;
}
.btn-group > * { margin-left: -1px; }
.btn-group > *:first-child { margin-left: 0; }
.btn-group > *:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > *:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > *:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > *:hover { z-index: 1; }
.btn-group > *:focus { z-index: 2; }

/* --- Vertical Button Group --- */
.btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
}
.btn-group-vertical > * { margin-top: -1px; }
.btn-group-vertical > *:first-child { margin-top: 0; }
.btn-group-vertical > *:first-child:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.btn-group-vertical > *:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.btn-group-vertical > *:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group-vertical > *:hover { z-index: 1; }
.btn-group-vertical > *:focus { z-index: 2; }

/* --- Button Group with Gap (separated) --- */
.btn-group-gap    { display: inline-flex; flex-direction: row; gap: 0.5rem; }
.btn-group-gap > * { margin-left: 0; }
.btn-group-gap-sm { display: inline-flex; flex-direction: row; gap: 0.25rem; }
.btn-group-gap-md { display: inline-flex; flex-direction: row; gap: 0.5rem; }
.btn-group-gap-lg { display: inline-flex; flex-direction: row; gap: 0.75rem; }

/* --- Button Toolbar --- */
.btn-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --- Segmented Control --- */
.btn-segmented {
  display: inline-flex;
  flex-direction: row;
  gap: 0;
  padding: 0.25rem;
  background-color: rgb(243, 244, 246);
  border-radius: 0.5rem;
}
.btn-segmented > * { margin: 0; background-color: transparent; border: none; }
.btn-segmented > *:hover { background-color: rgb(229, 231, 235); }
.btn-segmented > .active,
.btn-segmented > [aria-selected="true"] {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

/* --- Split Button --- */
.btn-split { display: inline-flex; flex-direction: row; gap: 0; }
.btn-split > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.btn-split > button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.625rem; padding-right: 0.625rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }

/* --- Button Group Sizes --- */
.btn-group-sm > * { font-size: 0.75rem; line-height: 1rem; padding: 0.375rem 0.75rem; }
.btn-group-md > * { font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem 1rem; }
.btn-group-lg > * { font-size: 1rem; line-height: 1.5rem; padding: 0.625rem 1.25rem; }

/* --- Icon Button Groups --- */
.btn-group-icons { display: inline-flex; flex-direction: row; gap: 0; }
.btn-group-icons > * { width: 2.5rem; height: 2.5rem; padding: 0; margin-left: -1px; }
.btn-group-icons > *:first-child { margin-left: 0; }
.btn-group-icons > *:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group-icons > *:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group-icons > *:not(:first-child):not(:last-child) { border-radius: 0; }

/* --- Dropdown Button Group --- */
.btn-group-dropdown { display: inline-flex; position: relative; }
.btn-group-dropdown > button { margin-left: -1px; }
.btn-group-dropdown > button:first-child { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group-dropdown > button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 2.5rem; }

/* --- Responsive Button Group --- */
.btn-group-responsive { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) {
  .btn-group-responsive { flex-direction: row; gap: 0; }
  .btn-group-responsive > * { margin-left: -1px; }
  .btn-group-responsive > *:first-child { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .btn-group-responsive > *:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .btn-group-responsive > *:not(:first-child):not(:last-child) { border-radius: 0; }
}

/* ============================================
   Beyond UI Input Fields
   ============================================ */

/* --- Input Base --- */
.input {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: rgb(17, 24, 39);
  background-color: white;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  transition: all 150ms ease-in-out;
  outline: none;
}
.input::placeholder { color: rgb(156, 163, 175); }
.input:hover { border-color: rgb(156, 163, 175); }
.input:focus { border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.input:disabled { background-color: rgb(249, 250, 251); color: rgb(156, 163, 175); cursor: not-allowed; opacity: 0.6; }

/* --- Input Sizes --- */
.input-sm { font-size: 0.75rem; line-height: 1rem; padding: 0.5rem 0.75rem; }
.input-md { font-size: 0.875rem; line-height: 1.25rem; padding: 0.625rem 0.875rem; }
.input-lg { font-size: 1rem; line-height: 1.5rem; padding: 0.75rem 1rem; }
.input-xl { font-size: 1rem; line-height: 1.5rem; padding: 0.875rem 1.125rem; }

/* --- Input States --- */
.input-error { border-color: rgb(239, 68, 68); }
.input-error:hover { border-color: rgb(220, 38, 38); }
.input-error:focus { border-color: rgb(239, 68, 68); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }

.input-success { border-color: rgb(34, 197, 94); }
.input-success:hover { border-color: rgb(22, 163, 74); }
.input-success:focus { border-color: rgb(34, 197, 94); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); }

.input-warning { border-color: rgb(251, 146, 60); }
.input-warning:hover { border-color: rgb(249, 115, 22); }
.input-warning:focus { border-color: rgb(251, 146, 60); box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1); }

/* --- Input Group (prefix/suffix) --- */
.input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.input-group > .input { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-prefix {
  display: flex; align-items: center; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; font-weight: 400; line-height: 1.25rem;
  color: rgb(107, 114, 128); text-align: center; white-space: nowrap;
  background-color: rgb(249, 250, 251);
  border: 1px solid rgb(209, 213, 219); border-right: none;
  border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
}
.input-suffix {
  display: flex; align-items: center; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; font-weight: 400; line-height: 1.25rem;
  color: rgb(107, 114, 128); text-align: center; white-space: nowrap;
  background-color: rgb(249, 250, 251);
  border: 1px solid rgb(209, 213, 219); border-left: none;
  border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
}

/* --- Input Icon --- */
.input-icon-wrapper { position: relative; }
.input-icon-wrapper > .input { padding-left: 2.5rem; }
.input-icon-left {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; pointer-events: none; color: rgb(156, 163, 175);
}
.input-icon-right {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: rgb(156, 163, 175);
}
.input-with-icon-left  { padding-left: 2.5rem; }
.input-with-icon-right { padding-right: 2.5rem; }

/* --- Textarea --- */
.textarea {
  display: block; width: 100%;
  font-size: 0.875rem; line-height: 1.5rem; font-weight: 400;
  color: rgb(17, 24, 39); background-color: white;
  border: 1px solid rgb(209, 213, 219); border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  transition: all 150ms ease-in-out; outline: none;
  resize: vertical; min-height: 80px;
}
.textarea::placeholder { color: rgb(156, 163, 175); }
.textarea:hover { border-color: rgb(156, 163, 175); }
.textarea:focus { border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.textarea:disabled { background-color: rgb(249, 250, 251); color: rgb(156, 163, 175); cursor: not-allowed; opacity: 0.6; }
.textarea-sm { min-height: 60px; font-size: 0.75rem; padding: 0.5rem 0.75rem; }
.textarea-md { min-height: 80px; font-size: 0.875rem; padding: 0.625rem 0.875rem; }
.textarea-lg { min-height: 120px; font-size: 1rem; padding: 0.75rem 1rem; }

/* --- Search Input --- */
.input-search { padding-left: 2.5rem; background-color: rgb(249, 250, 251); }
.input-search:focus { background-color: white; }

/* --- Label --- */
.input-label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: rgb(55, 65, 81); margin-bottom: 0.375rem; }
.input-label-required::after { content: " *"; color: rgb(239, 68, 68); margin-left: 0.25rem; }

/* --- Helper / Error / Success Text --- */
.input-helper       { display: block; font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); margin-top: 0.375rem; }
.input-error-text   { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: rgb(239, 68, 68); margin-top: 0.375rem; }
.input-success-text { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: rgb(34, 197, 94); margin-top: 0.375rem; }

/* --- Character Counter --- */
.input-counter       { display: flex; justify-content: flex-end; font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); margin-top: 0.375rem; }
.input-counter-error { color: rgb(239, 68, 68); }

/* --- Input Wrapper --- */
.input-wrapper    { margin-bottom: 1rem; }
.input-wrapper-sm { margin-bottom: 0.75rem; }
.input-wrapper-lg { margin-bottom: 1.25rem; }

/* ============================================
   Beyond UI Dropdown Menu
   ============================================ */

/* --- Dropdown Wrapper --- */
.dropdown { position: relative; display: inline-block; }

/* --- Dropdown Trigger --- */
.dropdown-trigger {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  color: rgb(55, 65, 81); background-color: white;
  border: 1px solid rgb(209, 213, 219); border-radius: 0.5rem;
  cursor: pointer; transition: all 150ms ease-in-out; outline: none;
}
.dropdown-trigger:hover { border-color: rgb(156, 163, 175); background-color: rgb(249, 250, 251); }
.dropdown-trigger:focus { border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.dropdown-trigger[aria-expanded="true"] { border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.dropdown-trigger-sm { padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem; }
.dropdown-trigger-lg { padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; }
html.dark .dropdown-trigger { background-color: #1E1E1C; color: #E8E6DC; border-color: rgba(255,255,255,0.12); }
html.dark .dropdown-trigger:hover { background-color: #2A2A27; border-color: rgba(255,255,255,0.18); }
html.dark .dropdown-trigger:focus { border-color: #6B6A63; box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.2); }
html.dark .dropdown-trigger[aria-expanded="true"] { border-color: #6B6A63; box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.2); }

/* --- Dropdown Menu Container --- */
.dropdown-menu {
  position: absolute; min-width: 12rem; max-height: 20rem; overflow-y: auto;
  background-color: white; border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0.5rem; z-index: 50; display: none;
}
html.dark .dropdown-menu {
  background-color: #1E1E1C; border-color: rgba(255,255,255,0.12);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}
.dropdown-menu.active, .dropdown-menu[data-state="open"] { display: block; }
.dropdown-menu-sm { min-width: 10rem; font-size: 0.75rem; }
.dropdown-menu-md { min-width: 12rem; font-size: 0.875rem; }
.dropdown-menu-lg { min-width: 14rem; font-size: 1rem; }
.dropdown-menu-xl { min-width: 16rem; }

/* --- Dropdown Positioning --- */
.dropdown-menu-down  { top: calc(100% + 0.5rem); left: 0; }
.dropdown-menu-up    { bottom: calc(100% + 0.5rem); left: 0; }
.dropdown-menu-right { top: 0; left: calc(100% + 0.5rem); }
.dropdown-menu-left  { top: 0; right: calc(100% + 0.5rem); }

/* --- Dropdown Item --- */
.dropdown-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  color: rgb(55, 65, 81); background-color: transparent; border: none;
  border-radius: 0.375rem; cursor: pointer; transition: all 100ms ease-in-out; text-align: left;
}
.dropdown-item:hover { background-color: rgb(243, 244, 246); }
.dropdown-item:active { background-color: rgb(229, 231, 235); }
.dropdown-item:focus { outline: none; background-color: rgb(243, 244, 246); }
.dropdown-item.active, .dropdown-item[aria-selected="true"] { background-color: rgb(243, 244, 246); }
.dropdown-item:disabled, .dropdown-item[aria-disabled="true"] { color: rgb(156, 163, 175); cursor: not-allowed; }
.dropdown-item:disabled:hover, .dropdown-item[aria-disabled="true"]:hover { background-color: transparent; }
html.dark .dropdown-item { color: #E8E6DC; }
html.dark .dropdown-item:hover { background-color: #2A2A27; }
html.dark .dropdown-item:active { background-color: #353531; }
html.dark .dropdown-item:focus { background-color: #2A2A27; }
html.dark .dropdown-item.active, html.dark .dropdown-item[aria-selected="true"] { background-color: #2A2A27; }
html.dark .dropdown-item:disabled, html.dark .dropdown-item[aria-disabled="true"] { color: #6B6A63; }

/* --- Dropdown Item Destructive --- */
.dropdown-item-destructive { color: rgb(239, 68, 68); }
.dropdown-item-destructive:hover { background-color: rgb(254, 242, 242); }

/* --- Dropdown Heading --- */
.dropdown-heading {
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600;
  line-height: 1rem; color: rgb(107, 114, 128);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* --- Dropdown Divider --- */
.dropdown-divider { height: 1px; margin: 0.5rem 0; background-color: rgb(229, 231, 235); }

/* --- Dropdown Item Icon --- */
.dropdown-item-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: rgb(107, 114, 128); }
.dropdown-item-icon-start { margin-right: -0.25rem; }
.dropdown-item-icon-end   { margin-left: auto; }

/* --- Dropdown Shortcut --- */
.dropdown-shortcut { margin-left: auto; font-size: 0.75rem; line-height: 1rem; color: rgb(156, 163, 175); font-family: ui-monospace, monospace; }

/* --- Dropdown Checkbox Item --- */
.dropdown-checkbox-item { position: relative; padding-left: 2rem; }
.dropdown-checkbox-item::before {
  content: ""; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; border: 1px solid rgb(209, 213, 219);
  border-radius: 0.25rem; background-color: white;
}
.dropdown-checkbox-item[aria-checked="true"]::after {
  content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 0.5rem; height: 0.5rem; background-color: rgb(99, 112, 131); border-radius: 0.125rem;
}

/* --- Dropdown Radio Item --- */
.dropdown-radio-item { position: relative; padding-left: 2rem; }
.dropdown-radio-item::before {
  content: ""; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; border: 1px solid rgb(209, 213, 219);
  border-radius: 50%; background-color: white;
}
.dropdown-radio-item[aria-checked="true"]::after {
  content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 0.5rem; height: 0.5rem; background-color: rgb(99, 112, 131); border-radius: 50%;
}

/* --- Nested Dropdown (Submenu) --- */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { position: absolute; top: 0; left: 100%; margin-left: 0.5rem; }
.dropdown-submenu-indicator { margin-left: auto; width: 1rem; height: 1rem; color: rgb(156, 163, 175); }

/* --- Dropdown Item with Description --- */
.dropdown-item-with-description { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.625rem 0.75rem; }
.dropdown-item-title { font-size: 0.875rem; font-weight: 500; color: rgb(17, 24, 39); }
.dropdown-item-description { font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); }

/* ============================================
   Beyond UI Checkbox
   ============================================ */

/* --- Checkbox Base --- */
.checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  background-color: white;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  flex-shrink: 0;
  position: relative;
}
.checkbox:hover { border-color: rgb(156, 163, 175); }
.checkbox:focus { outline: none; border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.checkbox:checked {
  background-color: rgb(99, 112, 131); border-color: rgb(99, 112, 131);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
}
.checkbox:indeterminate {
  background-color: rgb(99, 112, 131); border-color: rgb(99, 112, 131);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
}
.checkbox:disabled { background-color: rgb(243, 244, 246); border-color: rgb(229, 231, 235); cursor: not-allowed; opacity: 0.6; }
.checkbox:disabled:hover { border-color: rgb(229, 231, 235); }

/* --- Checkbox Sizes --- */
.checkbox-sm { width: 1rem; height: 1rem; }
.checkbox-md { width: 1.25rem; height: 1.25rem; }
.checkbox-lg { width: 1.5rem; height: 1.5rem; }

/* --- Checkbox Color Variants --- */
.checkbox-primary:checked, .checkbox-primary:indeterminate { background-color: var(--accent); border-color: var(--accent); }
.checkbox-primary:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.checkbox-error { border-color: rgb(239, 68, 68); }
.checkbox-error:checked, .checkbox-error:indeterminate { background-color: rgb(239, 68, 68); border-color: rgb(239, 68, 68); }
.checkbox-error:hover { border-color: rgb(220, 38, 38); }
.checkbox-error:focus { border-color: rgb(239, 68, 68); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }

.checkbox-success:checked, .checkbox-success:indeterminate { background-color: rgb(34, 197, 94); border-color: rgb(34, 197, 94); }
.checkbox-success:focus { border-color: rgb(34, 197, 94); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); }

.checkbox-warning:checked, .checkbox-warning:indeterminate { background-color: rgb(251, 146, 60); border-color: rgb(251, 146, 60); }
.checkbox-warning:focus { border-color: rgb(251, 146, 60); box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1); }

.checkbox-info:checked, .checkbox-info:indeterminate { background-color: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }
.checkbox-info:focus { border-color: rgb(59, 130, 246); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* --- Checkbox Wrapper & Content --- */
.checkbox-wrapper { display: flex; align-items: flex-start; gap: 0.75rem; }
.checkbox-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

/* --- Checkbox Label --- */
.checkbox-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: rgb(55, 65, 81); cursor: pointer; user-select: none; }

/* --- Checkbox Helper Text --- */
.checkbox-helper     { font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); }
.checkbox-error-text { font-size: 0.75rem; line-height: 1rem; color: rgb(239, 68, 68); }

/* --- Checkbox Group --- */
.checkbox-group            { display: flex; flex-direction: column; gap: 0.75rem; }
.checkbox-group-horizontal { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }

/* --- Checkbox Tree --- */
.checkbox-tree          { display: flex; flex-direction: column; gap: 0.5rem; }
.checkbox-tree-item     { display: flex; flex-direction: column; gap: 0.5rem; }
.checkbox-tree-children { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.5rem; }
.checkbox-tree-parent   { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-tree-expand   { width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgb(107, 114, 128); transition: transform 150ms ease-in-out; }
.checkbox-tree-expand.expanded { transform: rotate(90deg); }

/* --- Checkbox Card --- */
.checkbox-card {
  position: relative; display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  cursor: pointer; transition: all 150ms ease-in-out;
}
.checkbox-card:hover { border-color: rgb(209, 213, 219); background-color: rgb(249, 250, 251); }
.checkbox-card:has(input:checked) { border-color: rgb(99, 112, 131); background-color: rgba(107, 106, 99, 0.05); }
.checkbox-card:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.checkbox-card:has(input:disabled):hover { border-color: rgb(229, 231, 235); background-color: transparent; }

/* =============================================
   RADIO BUTTONS
   ============================================= */

/* --- Radio Base --- */
.radio {
  appearance: none; width: 1.25rem; height: 1.25rem;
  border: 1px solid rgb(209, 213, 219); border-radius: 50%;
  background-color: white; cursor: pointer;
  transition: all 150ms ease-in-out; flex-shrink: 0; position: relative;
}
.radio:hover { border-color: rgb(156, 163, 175); }
.radio:focus { outline: none; border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.radio:checked { background-color: white; border-color: rgb(99, 112, 131); border-width: 6px; }
.radio:disabled { background-color: rgb(243, 244, 246); border-color: rgb(229, 231, 235); cursor: not-allowed; opacity: 0.6; }
.radio:disabled:hover { border-color: rgb(229, 231, 235); }

/* --- Radio Sizes --- */
.radio-sm { width: 1rem; height: 1rem; }
.radio-sm:checked { border-width: 5px; }
.radio-md { width: 1.25rem; height: 1.25rem; }
.radio-md:checked { border-width: 6px; }
.radio-lg { width: 1.5rem; height: 1.5rem; }
.radio-lg:checked { border-width: 7px; }

/* --- Radio Color Variants --- */
.radio-primary:checked { border-color: var(--accent); }
.radio-primary:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.radio-error { border-color: rgb(239, 68, 68); }
.radio-error:checked { border-color: rgb(239, 68, 68); }
.radio-error:hover { border-color: rgb(220, 38, 38); }
.radio-error:focus { border-color: rgb(239, 68, 68); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }

.radio-success:checked { border-color: rgb(34, 197, 94); }
.radio-success:focus { border-color: rgb(34, 197, 94); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); }

.radio-warning:checked { border-color: rgb(251, 146, 60); }
.radio-warning:focus { border-color: rgb(251, 146, 60); box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1); }

.radio-info:checked { border-color: rgb(59, 130, 246); }
.radio-info:focus { border-color: rgb(59, 130, 246); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* --- Radio Wrapper & Content --- */
.radio-wrapper { display: flex; align-items: flex-start; gap: 0.75rem; }
.radio-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

/* --- Radio Label --- */
.radio-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: rgb(55, 65, 81); cursor: pointer; user-select: none; }

/* --- Radio Helper Text --- */
.radio-helper     { font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); }
.radio-error-text { font-size: 0.75rem; line-height: 1rem; color: rgb(239, 68, 68); }

/* --- Radio Group --- */
.radio-group            { display: flex; flex-direction: column; gap: 0.75rem; }
.radio-group-horizontal { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }

/* --- Radio Card --- */
.radio-card {
  position: relative; display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  cursor: pointer; transition: all 150ms ease-in-out;
}
.radio-card:hover { border-color: rgb(209, 213, 219); background-color: rgb(249, 250, 251); }
.radio-card:has(input:checked) { border-color: rgb(99, 112, 131); background-color: rgba(107, 106, 99, 0.05); }
.radio-card:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.radio-card:has(input:disabled):hover { border-color: rgb(229, 231, 235); background-color: transparent; }

/* --- Radio Button (Segmented Control) --- */
.radio-btn-group {
  display: inline-flex; padding: 0.25rem;
  background-color: rgb(243, 244, 246); border-radius: 0.5rem; gap: 0.25rem;
}
.radio-btn { position: relative; }
.radio-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-btn label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  color: rgb(107, 114, 128); background-color: transparent;
  border-radius: 0.375rem; cursor: pointer;
  transition: all 150ms ease-in-out; user-select: none;
}
.radio-btn label:hover { color: rgb(55, 65, 81); }
.radio-btn input[type="radio"]:checked + label {
  background-color: white; color: rgb(17, 24, 39);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.radio-btn input[type="radio"]:disabled + label { opacity: 0.5; cursor: not-allowed; }

/* --- Toggle Base --- */
.toggle {
  appearance: none; position: relative;
  width: 2.75rem; height: 1.5rem;
  background-color: rgb(209, 213, 219); border-radius: 9999px;
  cursor: pointer; flex-shrink: 0;
  transition: background-color 200ms ease-in-out;
}
.toggle::after {
  content: ""; position: absolute;
  top: 0.125rem; left: 0.125rem;
  width: 1.25rem; height: 1.25rem;
  background-color: white; border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transition: transform 200ms ease-in-out;
}
.toggle:hover { background-color: rgb(156, 163, 175); }
.toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }
.toggle:checked { background-color: rgb(99, 112, 131); }
.toggle:checked::after { transform: translateX(1.25rem); }
.toggle:checked:hover { background-color: rgb(75, 85, 99); }
.toggle:disabled { background-color: rgb(243, 244, 246); cursor: not-allowed; opacity: 0.6; }
.toggle:disabled:hover { background-color: rgb(243, 244, 246); }
.toggle:disabled:checked { background-color: rgb(229, 231, 235); }
.toggle:disabled:checked:hover { background-color: rgb(229, 231, 235); }

/* --- Toggle Sizes --- */
.toggle-sm { width: 2rem; height: 1.125rem; }
.toggle-sm::after { width: 0.875rem; height: 0.875rem; }
.toggle-sm:checked::after { transform: translateX(0.875rem); }
.toggle-md { width: 2.75rem; height: 1.5rem; }
.toggle-md::after { width: 1.25rem; height: 1.25rem; }
.toggle-md:checked::after { transform: translateX(1.25rem); }
.toggle-lg { width: 3.5rem; height: 2rem; }
.toggle-lg::after { width: 1.75rem; height: 1.75rem; }
.toggle-lg:checked::after { transform: translateX(1.5rem); }

/* --- Toggle Color Variants --- */
.toggle-primary:checked { background-color: var(--accent); }
.toggle-primary:checked:hover { background-color: var(--accent-hover); }
.toggle-primary:focus { box-shadow: 0 0 0 3px var(--accent-ring); }
.toggle-success:checked { background-color: rgb(34, 197, 94); }
.toggle-success:checked:hover { background-color: rgb(22, 163, 74); }
.toggle-success:focus { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); }
.toggle-error:checked { background-color: rgb(239, 68, 68); }
.toggle-error:checked:hover { background-color: rgb(220, 38, 38); }
.toggle-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.toggle-warning:checked { background-color: rgb(251, 146, 60); }
.toggle-warning:checked:hover { background-color: rgb(249, 115, 22); }
.toggle-warning:focus { box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1); }
.toggle-info:checked { background-color: rgb(59, 130, 246); }
.toggle-info:checked:hover { background-color: rgb(37, 99, 235); }
.toggle-info:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* --- Toggle Wrapper & Content --- */
.toggle-wrapper { display: flex; align-items: flex-start; gap: 0.75rem; }
.toggle-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

/* --- Toggle Label --- */
.toggle-label { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: rgb(55, 65, 81); cursor: pointer; user-select: none; }

/* --- Toggle Helper Text --- */
.toggle-helper { font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); }

/* --- Toggle With Icons --- */
.toggle-with-icons { position: relative; }
.toggle-with-icons::before {
  content: ""; position: absolute; top: 50%; left: 0.375rem;
  transform: translateY(-50%); width: 0.75rem; height: 0.75rem;
  opacity: 0.5; transition: opacity 200ms ease-in-out;
}
.toggle-with-icons:checked::before { left: auto; right: 0.375rem; opacity: 1; }

/* --- Toggle Card --- */
.toggle-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  transition: all 150ms ease-in-out;
}
.toggle-card:hover { border-color: rgb(209, 213, 219); background-color: rgb(249, 250, 251); }
.toggle-card:has(input:checked) { border-color: rgb(99, 112, 131); background-color: rgba(107, 106, 99, 0.05); }

/* --- Selectable Card Base --- */
.selectable-card {
  position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 1rem;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  cursor: pointer; transition: all 150ms ease-in-out; background-color: white;
}
.selectable-card:hover { border-color: rgb(209, 213, 219); background-color: rgb(249, 250, 251); }
.selectable-card:has(input:checked) { border-color: rgb(99, 112, 131); background-color: rgba(107, 106, 99, 0.05); }
.selectable-card:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.selectable-card:has(input:disabled):hover { border-color: rgb(229, 231, 235); background-color: white; }

/* --- Selectable Card Variants --- */
.selectable-card-bordered { border: 2px solid rgb(229, 231, 235); }
.selectable-card-bordered:has(input:checked) { border-color: rgb(99, 112, 131); border-width: 2px; }
.selectable-card-filled:has(input:checked) { background-color: rgb(99, 112, 131); color: white; }
.selectable-card-filled:has(input:checked) .card-title,
.selectable-card-filled:has(input:checked) .card-description { color: white; }
.selectable-card-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.selectable-card-shadow:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.selectable-card-shadow:has(input:checked) { box-shadow: 0 10px 15px -3px rgb(99 112 131 / 0.2); }

/* --- Card Content Elements --- */
.card-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: rgb(107, 114, 128); }
.card-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.card-title { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: rgb(17, 24, 39); }
.card-description { font-size: 0.75rem; line-height: 1rem; color: rgb(107, 114, 128); }
.card-badge {
  display: inline-flex; align-items: center; padding: 0.25rem 0.5rem;
  font-size: 0.75rem; font-weight: 500; border-radius: 9999px;
  background-color: rgb(243, 244, 246); color: rgb(55, 65, 81);
}
.card-price { font-size: 1.125rem; font-weight: 700; color: rgb(17, 24, 39); }

/* --- Card Input Positioning --- */
.card-input-top-right input[type="checkbox"],
.card-input-top-right input[type="radio"] { position: absolute; top: 1rem; right: 1rem; }
.card-input-left input[type="checkbox"],
.card-input-left input[type="radio"] { order: -1; }
.card-input-right { justify-content: space-between; }
.card-input-right input[type="checkbox"],
.card-input-right input[type="radio"] { margin-left: auto; }

/* --- Selectable Card Sizes --- */
.selectable-card-sm { padding: 0.75rem; gap: 0.75rem; }
.selectable-card-md { padding: 1rem; gap: 1rem; }
.selectable-card-lg { padding: 1.25rem; gap: 1.25rem; }

/* --- Selectable Card Color Variants --- */
.selectable-card-primary:has(input:checked) { border-color: var(--accent); background-color: var(--accent-light); }
.selectable-card-success:has(input:checked) { border-color: rgb(34, 197, 94); background-color: rgba(34, 197, 94, 0.05); }
.selectable-card-error:has(input:checked) { border-color: rgb(239, 68, 68); background-color: rgba(239, 68, 68, 0.05); }
.selectable-card-warning:has(input:checked) { border-color: rgb(251, 146, 60); background-color: rgba(251, 146, 60, 0.05); }

/* --- Card Grid --- */
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.card-grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.card-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.card-grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========================================== */
/* --- Accordion Container --- */
/* ========================================== */
.accordion { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.accordion-flush { display: flex; flex-direction: column; gap: 0; width: 100%; }
.accordion-flush .accordion-item { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; }
.accordion-flush .accordion-item:first-child { border-top: 1px solid rgb(229, 231, 235); }

/* --- Accordion Item --- */
.accordion-item {
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  background-color: white; overflow: hidden;
}
.accordion-item-bordered { border: 2px solid rgb(229, 231, 235); }
.accordion-item-bordered[data-state="open"] { border-color: rgb(99, 112, 131); }

/* --- Accordion Trigger --- */
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  color: rgb(17, 24, 39); background-color: transparent;
  border: none; cursor: pointer;
  transition: all 150ms ease-in-out;
  text-align: left; gap: 0.75rem;
}
.accordion-trigger:hover { background-color: rgb(249, 250, 251); }
.accordion-trigger:focus { outline: none; background-color: rgb(243, 244, 246); }
.accordion-trigger:disabled { cursor: not-allowed; opacity: 0.6; }
.accordion-trigger:disabled:hover { background-color: transparent; }

/* --- Accordion Trigger Parts --- */
.accordion-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: rgb(107, 114, 128); }
.accordion-title { flex: 1; font-size: 0.875rem; font-weight: 500; color: rgb(17, 24, 39); }
.accordion-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500;
  border-radius: 9999px; background-color: rgb(254, 243, 199); color: rgb(161, 98, 7);
}
.accordion-chevron {
  width: 1.25rem; height: 1.25rem; flex-shrink: 0;
  color: rgb(107, 114, 128); transition: transform 200ms ease-in-out;
}
[data-state="open"] > .accordion-trigger .accordion-chevron,
[data-state="open"] > .accordion-chevron { transform: rotate(180deg); }

/* --- Accordion Content --- */
.accordion-content {
  overflow: hidden; font-size: 0.875rem; line-height: 1.5rem;
  color: rgb(55, 65, 81); transition: all 200ms ease-in-out;
}
.accordion-content[data-state="closed"] { display: none; }
.accordion-content[data-state="open"] { display: block; }
.accordion-content-inner { padding: 0 1rem 1rem 1rem; }

/* --- Accordion Sizes --- */
.accordion-sm .accordion-trigger { padding: 0.75rem; font-size: 0.8125rem; }
.accordion-sm .accordion-content-inner { padding: 0 0.75rem 0.75rem 0.75rem; font-size: 0.8125rem; }
.accordion-md .accordion-trigger { padding: 1rem; font-size: 0.875rem; }
.accordion-md .accordion-content-inner { padding: 0 1rem 1rem 1rem; font-size: 0.875rem; }
.accordion-lg .accordion-trigger { padding: 1.25rem; font-size: 1rem; }
.accordion-lg .accordion-content-inner { padding: 0 1.25rem 1.25rem 1.25rem; font-size: 0.9375rem; }

/* --- Accordion Variants --- */
.accordion-filled .accordion-item { background-color: rgb(249, 250, 251); }
.accordion-filled .accordion-item[data-state="open"] { background-color: white; }
.accordion-shadow .accordion-item { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.accordion-shadow .accordion-item[data-state="open"] { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.accordion-separated { gap: 1rem; }

/* ========================================== */
/* --- Chips (Tags/Badges) Base --- */
/* ========================================== */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500;
  line-height: 1.25rem; border-radius: 9999px;
  border: 1px solid transparent; background-color: rgb(243, 244, 246);
  color: rgb(55, 65, 81); transition: all 150ms ease-in-out;
  white-space: nowrap; cursor: default; user-select: none;
}

/* --- Chip Sizes --- */
.chip-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem; gap: 0.25rem; }
.chip-md { padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; gap: 0.375rem; }
.chip-lg { padding: 0.5rem 1rem; font-size: 0.9375rem; line-height: 1.375rem; gap: 0.5rem; }

/* --- Chip Colors (Filled) --- */
.chip-base { background-color: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.chip-primary { background-color: rgb(99, 112, 131); color: white; }
.chip-success { background-color: rgb(34, 197, 94); color: white; }
.chip-error { background-color: rgb(239, 68, 68); color: white; }
.chip-warning { background-color: rgb(251, 146, 60); color: white; }
.chip-info { background-color: rgb(59, 130, 246); color: white; }

/* --- Chip Colors (Outlined) --- */
.chip-outlined { background-color: transparent; border-color: rgb(209, 213, 219); color: rgb(55, 65, 81); }
.chip-outlined.chip-primary { border-color: rgb(99, 112, 131); color: rgb(99, 112, 131); background-color: transparent; }
.chip-outlined.chip-success { border-color: rgb(34, 197, 94); color: rgb(22, 163, 74); background-color: transparent; }
.chip-outlined.chip-error { border-color: rgb(239, 68, 68); color: rgb(220, 38, 38); background-color: transparent; }
.chip-outlined.chip-warning { border-color: rgb(251, 146, 60); color: rgb(249, 115, 22); background-color: transparent; }
.chip-outlined.chip-info { border-color: rgb(59, 130, 246); color: rgb(37, 99, 235); background-color: transparent; }

/* --- Chip Colors (Light/Soft) --- */
.chip-light { background-color: rgb(249, 250, 251); color: rgb(55, 65, 81); }
.chip-light.chip-primary { background-color: rgba(107, 106, 99, 0.1); color: rgb(55, 65, 81); }
.chip-light.chip-success { background-color: rgba(34, 197, 94, 0.1); color: rgb(22, 163, 74); }
.chip-light.chip-error { background-color: rgba(239, 68, 68, 0.1); color: rgb(220, 38, 38); }
.chip-light.chip-warning { background-color: rgba(251, 146, 60, 0.1); color: rgb(249, 115, 22); }
.chip-light.chip-info { background-color: rgba(59, 130, 246, 0.1); color: rgb(37, 99, 235); }

/* --- Clickable/Selectable Chips --- */
.chip-clickable { cursor: pointer; }
.chip-clickable:hover { opacity: 0.8; transform: translateY(-1px); }
.chip-clickable:active { transform: translateY(0); }
.chip-selectable { cursor: pointer; }
.chip-selectable:hover { opacity: 0.8; }
.chip-selectable[data-selected="true"] { border-width: 2px; font-weight: 600; }

/* --- Chip Parts --- */
.chip-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.chip-avatar { width: 1.25rem; height: 1.25rem; border-radius: 9999px; flex-shrink: 0; }
.chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: 0.25rem; margin-right: -0.25rem;
  border-radius: 9999px; cursor: pointer; transition: all 150ms ease-in-out;
  flex-shrink: 0;
}
.chip-remove:hover { background-color: rgba(0, 0, 0, 0.1); }
.chip-remove svg { width: 0.75rem; height: 0.75rem; }

/* --- Chip Group --- */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chip-group-sm { gap: 0.375rem; }
.chip-group-lg { gap: 0.75rem; }

/* ========================================== */
/* --- Badge (Status/Notification) Base --- */
/* ========================================== */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600;
  line-height: 1rem; border-radius: 9999px;
  white-space: nowrap; user-select: none;
}

/* --- Badge Sizes --- */
.badge-sm { padding: 0.0625rem 0.375rem; font-size: 0.6875rem; line-height: 0.875rem; }
.badge-md { padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; }
.badge-lg { padding: 0.1875rem 0.625rem; font-size: 0.8125rem; line-height: 1.125rem; }

/* --- Badge Colors (Filled) --- */
.badge-base { background-color: rgb(55, 65, 81); color: white; }
.badge-primary { background-color: rgb(99, 112, 131); color: white; }
.badge-success { background-color: rgb(34, 197, 94); color: white; }
.badge-error { background-color: rgb(239, 68, 68); color: white; }
.badge-warning { background-color: rgb(251, 146, 60); color: white; }
.badge-info { background-color: rgb(59, 130, 246); color: white; }

/* --- Badge Colors (Light/Soft) --- */
.badge-light { background-color: rgb(243, 244, 246); color: rgb(55, 65, 81); }
.badge-light.badge-primary { background-color: rgba(107, 106, 99, 0.1); color: rgb(55, 65, 81); }
.badge-light.badge-success { background-color: rgba(34, 197, 94, 0.1); color: rgb(22, 163, 74); }
.badge-light.badge-error { background-color: rgba(239, 68, 68, 0.1); color: rgb(220, 38, 38); }
.badge-light.badge-warning { background-color: rgba(251, 146, 60, 0.1); color: rgb(249, 115, 22); }
.badge-light.badge-info { background-color: rgba(59, 130, 246, 0.1); color: rgb(37, 99, 235); }

/* --- Badge Colors (Outlined) --- */
.badge-outlined { background-color: transparent; border: 1px solid; }
.badge-outlined.badge-base { border-color: rgb(55, 65, 81); color: rgb(55, 65, 81); }
.badge-outlined.badge-primary { border-color: rgb(99, 112, 131); color: rgb(99, 112, 131); }
.badge-outlined.badge-success { border-color: rgb(34, 197, 94); color: rgb(22, 163, 74); }
.badge-outlined.badge-error { border-color: rgb(239, 68, 68); color: rgb(220, 38, 38); }
.badge-outlined.badge-warning { border-color: rgb(251, 146, 60); color: rgb(249, 115, 22); }
.badge-outlined.badge-info { border-color: rgb(59, 130, 246); color: rgb(37, 99, 235); }

/* --- Dot Badge (Indicator) --- */
.badge-dot { width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 9999px; display: inline-block; }
.badge-dot-sm { width: 0.375rem; height: 0.375rem; }
.badge-dot-md { width: 0.5rem; height: 0.5rem; }
.badge-dot-lg { width: 0.625rem; height: 0.625rem; }

/* --- Number Badge (Notification Count) --- */
.badge-number { min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; }
.badge-number-sm { min-width: 1rem; height: 1rem; padding: 0 0.1875rem; font-size: 0.625rem; line-height: 1rem; }
.badge-number-lg { min-width: 1.5rem; height: 1.5rem; padding: 0 0.3125rem; font-size: 0.75rem; line-height: 1.5rem; }

/* --- Badge Positioning --- */
.badge-container { position: relative; display: inline-block; }
.badge-positioned { position: absolute; }
.badge-top-right { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
.badge-top-left { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); }
.badge-bottom-right { position: absolute; bottom: 0; right: 0; transform: translate(50%, 50%); }
.badge-bottom-left { position: absolute; bottom: 0; left: 0; transform: translate(-50%, 50%); }

/* --- Badge With Icon --- */
.badge-with-icon { display: inline-flex; align-items: center; gap: 0.25rem; }
.badge-with-icon svg { width: 0.75rem; height: 0.75rem; }

/* ========================================== */
/* --- Alert Base --- */
/* ========================================== */
.alert {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.875rem; line-height: 1.5rem;
}

/* --- Alert Types (Light Background) --- */
.alert-info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); color: rgb(30, 64, 175); }
.alert-info .alert-icon { color: rgb(59, 130, 246); }
.alert-success { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); color: rgb(22, 101, 52); }
.alert-success .alert-icon { color: rgb(34, 197, 94); }
.alert-warning { background-color: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.2); color: rgb(154, 52, 18); }
.alert-warning .alert-icon { color: rgb(251, 146, 60); }
.alert-error { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: rgb(153, 27, 27); }
.alert-error .alert-icon { color: rgb(239, 68, 68); }

/* --- Alert Filled Variants --- */
.alert-filled { color: white; }
.alert-filled.alert-info { background-color: rgb(59, 130, 246); border-color: rgb(59, 130, 246); }
.alert-filled.alert-info .alert-icon { color: white; }
.alert-filled.alert-success { background-color: rgb(34, 197, 94); border-color: rgb(34, 197, 94); }
.alert-filled.alert-success .alert-icon { color: white; }
.alert-filled.alert-warning { background-color: rgb(251, 146, 60); border-color: rgb(251, 146, 60); }
.alert-filled.alert-warning .alert-icon { color: white; }
.alert-filled.alert-error { background-color: rgb(239, 68, 68); border-color: rgb(239, 68, 68); }
.alert-filled.alert-error .alert-icon { color: white; }

/* --- Alert Outlined Variants --- */
.alert-outlined { background-color: transparent; }
.alert-outlined.alert-info { border-color: rgb(59, 130, 246); color: rgb(30, 64, 175); }
.alert-outlined.alert-info .alert-icon { color: rgb(59, 130, 246); }
.alert-outlined.alert-success { border-color: rgb(34, 197, 94); color: rgb(22, 101, 52); }
.alert-outlined.alert-success .alert-icon { color: rgb(34, 197, 94); }
.alert-outlined.alert-warning { border-color: rgb(251, 146, 60); color: rgb(154, 52, 18); }
.alert-outlined.alert-warning .alert-icon { color: rgb(251, 146, 60); }
.alert-outlined.alert-error { border-color: rgb(239, 68, 68); color: rgb(153, 27, 27); }
.alert-outlined.alert-error .alert-icon { color: rgb(239, 68, 68); }

/* --- Alert Parts --- */
.alert-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }
.alert-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.alert-title { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
.alert-description { font-size: 0.875rem; line-height: 1.5rem; }
.alert-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.alert-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; margin-left: auto; flex-shrink: 0;
  cursor: pointer; border-radius: 0.25rem; transition: all 150ms ease-in-out;
}
.alert-close:hover { background-color: rgba(0, 0, 0, 0.1); }
.alert-close svg { width: 1rem; height: 1rem; }

/* --- Alert Action Buttons --- */
.alert-btn {
  display: inline-flex; align-items: center;
  padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500;
  border-radius: 0.375rem; border: 1px solid; cursor: pointer;
  transition: all 150ms ease-in-out; text-decoration: none;
}
.alert-btn:hover { opacity: 0.8; }
.alert-btn-primary { background-color: currentColor; border-color: currentColor; color: white; }
.alert-btn-secondary { background-color: transparent; border-color: currentColor; color: currentColor; }
.alert-link {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; font-weight: 500;
  color: currentColor; text-decoration: underline; cursor: pointer;
}
.alert-link:hover { opacity: 0.8; }

/* --- Alert Sizes --- */
.alert-sm { padding: 0.75rem; gap: 0.5rem; font-size: 0.8125rem; }
.alert-sm .alert-icon { width: 1rem; height: 1rem; }
.alert-md { padding: 1rem; gap: 0.75rem; font-size: 0.875rem; }
.alert-md .alert-icon { width: 1.25rem; height: 1.25rem; }
.alert-lg { padding: 1.25rem; gap: 1rem; font-size: 0.9375rem; }
.alert-lg .alert-icon { width: 1.5rem; height: 1.5rem; }

/* ========================================== */
/* --- Status Indicator Base --- */
/* ========================================== */
.status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }

/* --- Status Icon --- */
.status-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.status-icon-sm { width: 0.875rem; height: 0.875rem; }
.status-icon-md { width: 1rem; height: 1rem; }
.status-icon-lg { width: 1.25rem; height: 1.25rem; }

/* --- Status Dot --- */
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.status-dot-sm { width: 0.375rem; height: 0.375rem; }
.status-dot-md { width: 0.5rem; height: 0.5rem; }
.status-dot-lg { width: 0.625rem; height: 0.625rem; }

/* --- Status Types (Colors) --- */
.status-success { color: rgb(22, 163, 74); }
.status-success .status-icon { color: rgb(34, 197, 94); }
.status-success .status-dot { background-color: rgb(34, 197, 94); }

.status-error { color: rgb(220, 38, 38); }
.status-error .status-icon { color: rgb(239, 68, 68); }
.status-error .status-dot { background-color: rgb(239, 68, 68); }

.status-warning { color: rgb(249, 115, 22); }
.status-warning .status-icon { color: rgb(251, 146, 60); }
.status-warning .status-dot { background-color: rgb(251, 146, 60); }

.status-info { color: rgb(37, 99, 235); }
.status-info .status-icon { color: rgb(59, 130, 246); }
.status-info .status-dot { background-color: rgb(59, 130, 246); }

.status-undefined { color: rgb(124, 58, 237); }
.status-undefined .status-icon { color: rgb(139, 92, 246); }
.status-undefined .status-dot { background-color: rgb(139, 92, 246); }

.status-help { color: rgb(75, 85, 99); }
.status-help .status-icon { color: rgb(107, 114, 128); }
.status-help .status-dot { background-color: rgb(107, 114, 128); }

/* --- Status Badge (Filled) --- */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.125rem;
}
.status-badge.status-success { background-color: rgb(34, 197, 94); color: white; }
.status-badge.status-success .status-icon { color: white; }
.status-badge.status-error { background-color: rgb(239, 68, 68); color: white; }
.status-badge.status-error .status-icon { color: white; }
.status-badge.status-warning { background-color: rgb(251, 146, 60); color: white; }
.status-badge.status-warning .status-icon { color: white; }
.status-badge.status-info { background-color: rgb(59, 130, 246); color: white; }
.status-badge.status-info .status-icon { color: white; }
.status-badge.status-undefined { background-color: rgb(139, 92, 246); color: white; }
.status-badge.status-undefined .status-icon { color: white; }
.status-badge.status-help { background-color: rgb(107, 114, 128); color: white; }
.status-badge.status-help .status-icon { color: white; }

/* --- Status Badge (Outlined) --- */
.status-badge-outlined { background-color: transparent; border: 1px solid; }
.status-badge-outlined.status-success { border-color: rgb(34, 197, 94); color: rgb(22, 163, 74); }
.status-badge-outlined.status-success .status-icon { color: rgb(34, 197, 94); }
.status-badge-outlined.status-error { border-color: rgb(239, 68, 68); color: rgb(220, 38, 38); }
.status-badge-outlined.status-error .status-icon { color: rgb(239, 68, 68); }
.status-badge-outlined.status-warning { border-color: rgb(251, 146, 60); color: rgb(249, 115, 22); }
.status-badge-outlined.status-warning .status-icon { color: rgb(251, 146, 60); }
.status-badge-outlined.status-info { border-color: rgb(59, 130, 246); color: rgb(37, 99, 235); }
.status-badge-outlined.status-info .status-icon { color: rgb(59, 130, 246); }
.status-badge-outlined.status-undefined { border-color: rgb(139, 92, 246); color: rgb(124, 58, 237); }
.status-badge-outlined.status-undefined .status-icon { color: rgb(139, 92, 246); }
.status-badge-outlined.status-help { border-color: rgb(107, 114, 128); color: rgb(75, 85, 99); }
.status-badge-outlined.status-help .status-icon { color: rgb(107, 114, 128); }

/* --- Status Badge (Light/Soft) --- */
.status-badge-light { background-color: transparent; }
.status-badge-light.status-success { background-color: rgba(34, 197, 94, 0.1); color: rgb(22, 163, 74); }
.status-badge-light.status-success .status-icon { color: rgb(34, 197, 94); }
.status-badge-light.status-error { background-color: rgba(239, 68, 68, 0.1); color: rgb(220, 38, 38); }
.status-badge-light.status-error .status-icon { color: rgb(239, 68, 68); }
.status-badge-light.status-warning { background-color: rgba(251, 146, 60, 0.1); color: rgb(249, 115, 22); }
.status-badge-light.status-warning .status-icon { color: rgb(251, 146, 60); }
.status-badge-light.status-info { background-color: rgba(59, 130, 246, 0.1); color: rgb(37, 99, 235); }
.status-badge-light.status-info .status-icon { color: rgb(59, 130, 246); }
.status-badge-light.status-undefined { background-color: rgba(139, 92, 246, 0.1); color: rgb(124, 58, 237); }
.status-badge-light.status-undefined .status-icon { color: rgb(139, 92, 246); }
.status-badge-light.status-help { background-color: rgba(107, 114, 128, 0.1); color: rgb(75, 85, 99); }
.status-badge-light.status-help .status-icon { color: rgb(107, 114, 128); }

/* ========================================== */
/* --- Stepper Container --- */
/* ========================================== */
.stepper { display: flex; width: 100%; }
.stepper-horizontal { flex-direction: row; align-items: flex-start; }
.stepper-vertical { flex-direction: column; align-items: flex-start; }

/* --- Step Item --- */
.step { position: relative; display: flex; flex: 1; }

/* Horizontal step layout */
.stepper-horizontal .step { flex-direction: column; align-items: center; text-align: center; }
.stepper-horizontal .step:not(:last-child)::after {
  content: ""; position: absolute; top: 1.25rem;
  left: calc(50% + 1.5rem); right: calc(-50% + 1.5rem);
  height: 2px; background-color: rgb(229, 231, 235);
}
.stepper-horizontal .step.step-completed:not(:last-child)::after { background-color: rgb(59, 130, 246); }

/* Vertical step layout */
.stepper-vertical .step { flex-direction: row; align-items: flex-start; gap: 1rem; width: 100%; }
.stepper-vertical .step:not(:last-child)::after {
  content: ""; position: absolute; top: 3rem; left: 1.25rem; bottom: -1rem;
  width: 2px; background-color: rgb(229, 231, 235);
}
.stepper-vertical .step.step-completed:not(:last-child)::after { background-color: rgb(59, 130, 246); }

/* --- Step Indicator (Circle/Number) --- */
.step-indicator {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 2px solid rgb(209, 213, 219); background-color: white;
  font-size: 0.875rem; font-weight: 600; color: rgb(107, 114, 128);
  flex-shrink: 0; transition: all 200ms ease-in-out;
}
.step-completed .step-indicator { background-color: rgb(59, 130, 246); border-color: rgb(59, 130, 246); color: white; }
.step-active .step-indicator { border-color: rgb(59, 130, 246); border-width: 3px; color: rgb(59, 130, 246); }
.step-upcoming .step-indicator { background-color: white; border-color: rgb(209, 213, 219); color: rgb(156, 163, 175); }

/* --- Step Content --- */
.step-content { display: flex; flex-direction: column; gap: 0.25rem; }
.stepper-horizontal .step-content { margin-top: 0.75rem; align-items: center; }
.stepper-vertical .step-content { flex: 1; padding-bottom: 1.5rem; }
.step-title { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: rgb(17, 24, 39); }
.step-description { font-size: 0.8125rem; line-height: 1.125rem; color: rgb(107, 114, 128); }
.step-completed .step-title { color: rgb(59, 130, 246); }
.step-active .step-title { color: rgb(17, 24, 39); }
.step-active .step-description { color: rgb(55, 65, 81); }
.step-upcoming .step-title { color: rgb(156, 163, 175); }
.step-upcoming .step-description { color: rgb(209, 213, 219); }

/* --- Step Icon (Check Mark) --- */
.step-icon { width: 1rem; height: 1rem; }

/* --- Clickable Step --- */
.step-clickable { cursor: pointer; }
.step-clickable:hover .step-indicator { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
.step-clickable:hover .step-title { color: rgb(59, 130, 246); }
.step-clickable.step-upcoming { cursor: not-allowed; }
.step-clickable.step-upcoming:hover .step-indicator { transform: none; box-shadow: none; }
.step-clickable.step-upcoming:hover .step-title { color: rgb(156, 163, 175); }

/* --- Stepper Sizes --- */
.stepper-sm .step-indicator { width: 2rem; height: 2rem; font-size: 0.75rem; }
.stepper-sm .step-title { font-size: 0.8125rem; }
.stepper-sm .step-description { font-size: 0.75rem; }
.stepper-md .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.stepper-md .step-title { font-size: 0.875rem; }
.stepper-md .step-description { font-size: 0.8125rem; }
.stepper-lg .step-indicator { width: 3rem; height: 3rem; font-size: 1rem; }
.stepper-lg .step-title { font-size: 1rem; }
.stepper-lg .step-description { font-size: 0.875rem; }

/* Adjust connector line position for sizes */
.stepper-sm.stepper-horizontal .step:not(:last-child)::after { top: 1rem; }
.stepper-lg.stepper-horizontal .step:not(:last-child)::after { top: 1.5rem; }
.stepper-sm.stepper-vertical .step:not(:last-child)::after { top: 2.5rem; left: 1rem; }
.stepper-lg.stepper-vertical .step:not(:last-child)::after { top: 3.5rem; left: 1.5rem; }

/* ============================================ */
/* PAGINATION                                   */
/* ============================================ */

/* --- Pagination Container --- */
.pagination {
  display: flex; align-items: center; gap: 0.5rem;
  list-style: none; padding: 0; margin: 0;
}
.pagination-centered { justify-content: center; }
.pagination-left { justify-content: flex-start; }
.pagination-right { justify-content: flex-end; }
.pagination-between { justify-content: space-between; }

/* --- Pagination Item (Page Number) --- */
.pagination-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0.5rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  color: rgb(55, 65, 81); background-color: white;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.375rem;
  cursor: pointer; transition: all 150ms ease-in-out;
  text-decoration: none; user-select: none;
}
.pagination-item:hover { background-color: rgb(249, 250, 251); border-color: rgb(209, 213, 219); }
.pagination-item:focus { outline: none; box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }

/* --- Pagination Active State --- */
.pagination-item-active {
  background-color: rgb(59, 130, 246); border-color: rgb(59, 130, 246); color: white;
}
.pagination-item-active:hover { background-color: rgb(37, 99, 235); border-color: rgb(37, 99, 235); color: white; }

/* --- Pagination Disabled State --- */
.pagination-item-disabled {
  background-color: rgb(249, 250, 251); border-color: rgb(229, 231, 235);
  color: rgb(209, 213, 219); cursor: not-allowed;
}
.pagination-item-disabled:hover { background-color: rgb(249, 250, 251); border-color: rgb(229, 231, 235); color: rgb(209, 213, 219); }

/* --- Pagination Prev/Next Buttons --- */
.pagination-prev, .pagination-next {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  color: rgb(55, 65, 81); background-color: white;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.375rem;
  cursor: pointer; transition: all 150ms ease-in-out;
}
.pagination-prev:hover:not(:disabled), .pagination-next:hover:not(:disabled) {
  background-color: rgb(249, 250, 251); border-color: rgb(209, 213, 219);
}
.pagination-prev:disabled, .pagination-next:disabled {
  background-color: rgb(249, 250, 251); border-color: rgb(229, 231, 235);
  color: rgb(209, 213, 219); cursor: not-allowed;
}

/* --- Pagination Ellipsis --- */
.pagination-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0.5rem;
  font-size: 0.875rem; color: rgb(107, 114, 128); user-select: none;
}

/* --- Pagination Info (Page X of Y) --- */
.pagination-info {
  display: inline-flex; align-items: center;
  padding: 0.5rem 0.75rem; font-size: 0.875rem;
  font-weight: 500; color: rgb(55, 65, 81);
}

/* --- Pagination Sizes --- */
.pagination-sm { gap: 0.375rem; }
.pagination-sm .pagination-item,
.pagination-sm .pagination-prev,
.pagination-sm .pagination-next { min-width: 2rem; height: 2rem; padding: 0.375rem; font-size: 0.8125rem; }
.pagination-sm .pagination-ellipsis { min-width: 2rem; height: 2rem; font-size: 0.8125rem; }
.pagination-sm .pagination-info { font-size: 0.8125rem; }

.pagination-md { gap: 0.5rem; }
.pagination-md .pagination-item,
.pagination-md .pagination-prev,
.pagination-md .pagination-next { min-width: 2.5rem; height: 2.5rem; padding: 0.5rem; font-size: 0.875rem; }
.pagination-md .pagination-ellipsis { min-width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.pagination-md .pagination-info { font-size: 0.875rem; }

.pagination-lg { gap: 0.625rem; }
.pagination-lg .pagination-item,
.pagination-lg .pagination-prev,
.pagination-lg .pagination-next { min-width: 3rem; height: 3rem; padding: 0.625rem; font-size: 0.9375rem; }
.pagination-lg .pagination-ellipsis { min-width: 3rem; height: 3rem; font-size: 0.9375rem; }
.pagination-lg .pagination-info { font-size: 0.9375rem; }

/* --- Pagination Variants --- */
/* Rounded (circular buttons) */
.pagination-rounded .pagination-item,
.pagination-rounded .pagination-prev,
.pagination-rounded .pagination-next { border-radius: 9999px; }

/* Simple (no borders) */
.pagination-simple .pagination-item,
.pagination-simple .pagination-prev,
.pagination-simple .pagination-next { border: none; background-color: transparent; }
.pagination-simple .pagination-item:hover,
.pagination-simple .pagination-prev:hover:not(:disabled),
.pagination-simple .pagination-next:hover:not(:disabled) { background-color: rgb(243, 244, 246); }
.pagination-simple .pagination-item-active { background-color: rgb(59, 130, 246); color: white; }
.pagination-simple .pagination-item-active:hover { background-color: rgb(37, 99, 235); }

/* ============================================ */
/* PROGRESS BAR                                 */
/* ============================================ */

/* --- Progress Bar Container (Track) --- */
.progress-bar {
  position: relative; width: 100%; height: 0.5rem;
  background-color: rgb(229, 231, 235); border-radius: 9999px; overflow: hidden;
}

/* --- Progress Fill (Bar) --- */
.progress-fill {
  height: 100%; background-color: rgb(59, 130, 246);
  border-radius: 9999px; transition: width 300ms ease-in-out;
}

/* --- Progress Colors --- */
.progress-primary .progress-fill { background-color: rgb(99, 112, 131); }
.progress-success .progress-fill { background-color: rgb(34, 197, 94); }
.progress-error .progress-fill { background-color: rgb(239, 68, 68); }
.progress-warning .progress-fill { background-color: rgb(251, 146, 60); }
.progress-info .progress-fill { background-color: rgb(59, 130, 246); }

/* --- Progress Sizes --- */
.progress-sm { height: 0.375rem; }
.progress-md { height: 0.5rem; }
.progress-lg { height: 0.75rem; }
.progress-xl { height: 1rem; }

/* --- Progress Wrapper (with Label) --- */
.progress-wrapper { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.progress-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; font-weight: 500; }
.progress-label { color: rgb(55, 65, 81); }
.progress-percentage { color: rgb(107, 114, 128); font-size: 0.875rem; }
.progress-info-text { font-size: 0.8125rem; color: rgb(107, 114, 128); }

/* --- Indeterminate Progress (Animated) --- */
.progress-indeterminate .progress-fill {
  width: 40%; animation: progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(250%); }
  100% { transform: translateX(-100%); }
}

/* --- Striped Progress --- */
.progress-striped .progress-fill {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.progress-striped-animated .progress-fill {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

/* --- Circular Progress --- */
.progress-circular { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-circular-svg { transform: rotate(-90deg); }
.progress-circular-background { fill: none; stroke: rgb(229, 231, 235); }
.progress-circular-fill { fill: none; stroke: rgb(59, 130, 246); stroke-linecap: round; transition: stroke-dashoffset 300ms ease-in-out; }
.progress-circular-text { position: absolute; font-size: 0.875rem; font-weight: 600; color: rgb(55, 65, 81); }

/* ============================================ */
/* FILE UPLOADER                                */
/* ============================================ */

/* --- Drop Zone --- */
.uploader-zone {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2rem;
  border: 2px dashed rgb(209, 213, 219); border-radius: 0.5rem;
  background-color: rgb(249, 250, 251); cursor: pointer;
  transition: all 200ms ease-in-out;
}
.uploader-zone:hover { border-color: rgb(99, 112, 131); background-color: rgb(243, 244, 246); }
.uploader-zone.dragover, .uploader-zone-active { border-color: rgb(59, 130, 246); background-color: rgba(59, 130, 246, 0.05); }
.uploader-zone-error { border-color: rgb(239, 68, 68); background-color: rgba(239, 68, 68, 0.05); }

/* --- Uploader Content --- */
.uploader-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; color: rgb(107, 114, 128); }
.uploader-text { font-size: 0.875rem; font-weight: 500; color: rgb(55, 65, 81); margin-bottom: 0.25rem; text-align: center; }
.uploader-hint { font-size: 0.8125rem; color: rgb(107, 114, 128); text-align: center; }
.uploader-browse-btn { color: rgb(59, 130, 246); font-weight: 500; cursor: pointer; text-decoration: underline; }
.uploader-browse-btn:hover { color: rgb(37, 99, 235); }

/* --- Hidden File Input --- */
.uploader-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- File List --- */
.uploader-files { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.uploader-file-item {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem; background-color: white;
}
.uploader-file-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.375rem;
  background-color: rgb(243, 244, 246); color: rgb(107, 114, 128);
}
.uploader-file-info { flex: 1; min-width: 0; }
.uploader-file-name {
  font-size: 0.875rem; font-weight: 500; color: rgb(17, 24, 39);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uploader-file-size { font-size: 0.8125rem; color: rgb(107, 114, 128); }
.uploader-file-remove {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0; color: rgb(107, 114, 128);
  cursor: pointer; border-radius: 0.25rem; transition: all 150ms ease-in-out;
}
.uploader-file-remove:hover { background-color: rgb(243, 244, 246); color: rgb(239, 68, 68); }

/* --- File Preview (Images) --- */
.uploader-preview { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.375rem; object-fit: cover; }
.uploader-preview-lg { width: 4rem; height: 4rem; }

/* --- Upload Progress States --- */
.uploader-uploading .uploader-file-item { background-color: rgba(59, 130, 246, 0.05); }
.uploader-success .uploader-file-item { background-color: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.2); }
.uploader-success .uploader-file-icon { background-color: rgba(34, 197, 94, 0.1); color: rgb(34, 197, 94); }
.uploader-error .uploader-file-item { background-color: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.2); }
.uploader-error .uploader-file-icon { background-color: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); }

/* --- Uploader Sizes --- */
.uploader-sm { padding: 1.5rem; }
.uploader-sm .uploader-icon { width: 2rem; height: 2rem; }
.uploader-sm .uploader-text { font-size: 0.8125rem; }
.uploader-sm .uploader-hint { font-size: 0.75rem; }
.uploader-md { padding: 2rem; }
.uploader-md .uploader-icon { width: 3rem; height: 3rem; }
.uploader-lg { padding: 3rem; }
.uploader-lg .uploader-icon { width: 4rem; height: 4rem; }
.uploader-lg .uploader-text { font-size: 1rem; }

/* --- Uploader Variants --- */
.uploader-compact { flex-direction: row; gap: 1rem; padding: 1rem; text-align: left; }
.uploader-compact .uploader-icon { margin-bottom: 0; }
.uploader-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border: 1px solid rgb(209, 213, 219); border-radius: 0.375rem;
  background-color: white; font-size: 0.875rem; font-weight: 500; color: rgb(55, 65, 81);
  cursor: pointer; transition: all 150ms ease-in-out;
}
.uploader-button:hover { background-color: rgb(249, 250, 251); border-color: rgb(99, 112, 131); }

/* ============================================ */
/* TABS                                         */
/* ============================================ */

/* --- Tabs Container --- */
.tabs { display: flex; width: 100%; }
.tabs-horizontal { flex-direction: row; border-bottom: 1px solid rgb(229, 231, 235); }
.tabs-vertical { display: flex; gap: 1.5rem; }
.tabs-vertical .tabs-list { flex-direction: column; width: 12rem; border-right: 1px solid rgb(229, 231, 235); padding-right: 1rem; }
.tabs-vertical .tab { justify-content: flex-start; border-bottom: none; border-right: 2px solid transparent; }
.tabs-vertical .tab.tab-active { border-bottom-color: transparent; border-right-color: rgb(59, 130, 246); }
.tabs-vertical .tab-panels { flex: 1; }

/* --- Tabs List --- */
.tabs-list { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.tabs-horizontal .tabs-list { flex-direction: row; }

/* --- Tab Item --- */
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem;
  color: rgb(107, 114, 128); background-color: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: all 150ms ease-in-out; white-space: nowrap; text-decoration: none;
}
.tab:hover { color: rgb(55, 65, 81); background-color: rgb(249, 250, 251); }
.tab:focus { outline: none; }
.tab-active { color: rgb(59, 130, 246); border-bottom-color: rgb(59, 130, 246); }
.tab-active:hover { color: rgb(59, 130, 246); }
.tab-disabled { color: rgb(209, 213, 219); cursor: not-allowed; }
.tab-disabled:hover { color: rgb(209, 213, 219); background-color: transparent; }

/* --- Tab Variants --- */
/* Underline (default) */
.tabs-underline .tab { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-underline .tab.tab-active { border-bottom-color: rgb(59, 130, 246); }

/* Boxed */
.tabs-boxed .tabs-list { gap: 0.25rem; padding: 0.25rem; background-color: rgb(243, 244, 246); border-radius: 0.5rem; }
.tabs-boxed .tab { border-radius: 0.375rem; border: none; }
.tabs-boxed .tab.tab-active { background-color: white; color: rgb(55, 65, 81); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); border-bottom: none; }
.tabs-boxed .tab:hover { background-color: rgb(229, 231, 235); }

/* Pills */
.tabs-pills .tabs-list { gap: 0.5rem; }
.tabs-pills .tab { border-radius: 9999px; border: none; }
.tabs-pills .tab.tab-active { background-color: rgb(59, 130, 246); color: white; border-bottom: none; }
.tabs-pills .tab:hover { background-color: rgb(243, 244, 246); }
.tabs-pills .tab.tab-active:hover { background-color: rgb(37, 99, 235); }

/* Bordered */
.tabs-bordered .tabs-list { gap: 0; }
.tabs-bordered .tab { border: 1px solid rgb(229, 231, 235); border-bottom: none; border-radius: 0; margin-left: -1px; }
.tabs-bordered .tab:first-child { border-top-left-radius: 0.375rem; margin-left: 0; }
.tabs-bordered .tab:last-child { border-top-right-radius: 0.375rem; }
.tabs-bordered .tab.tab-active { background-color: white; border-bottom-color: white; z-index: 1; }

/* Full width */
.tabs-fullwidth .tabs-list { width: 100%; }
.tabs-fullwidth .tab { flex: 1; justify-content: center; }

/* --- Tab Sizes --- */
.tabs-sm .tab { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.tabs-md .tab { padding: 0.75rem 1rem; font-size: 0.875rem; }
.tabs-lg .tab { padding: 1rem 1.25rem; font-size: 0.9375rem; }

/* --- Tab Parts --- */
.tab-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
  font-size: 0.6875rem; font-weight: 600; border-radius: 9999px;
  background-color: rgb(243, 244, 246); color: rgb(107, 114, 128);
}
.tab-active .tab-badge { background-color: rgba(59, 130, 246, 0.1); color: rgb(59, 130, 246); }

/* --- Tab Panel --- */
.tab-panel { padding: 1.5rem 0; }
.tab-panel[hidden] { display: none; }
.tab-panel-padded { padding: 1.5rem; }

/* ============================================ */
/* RICH TEXT EDITOR                              */
/* ============================================ */

/* --- Editor Container --- */
.editor {
  display: flex; flex-direction: column; width: 100%;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  background-color: white; overflow: hidden;
}
.editor-focused { border-color: rgb(99, 112, 131); box-shadow: 0 0 0 3px rgba(107, 106, 99, 0.1); }

/* --- Editor Toolbar --- */
.editor-toolbar {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem;
  border-bottom: 1px solid rgb(229, 231, 235); background-color: rgb(249, 250, 251); flex-wrap: wrap;
}
.editor-toolbar-group {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0 0.5rem; border-right: 1px solid rgb(229, 231, 235);
}
.editor-toolbar-group:last-child { border-right: none; }
.editor-toolbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0.375rem; font-size: 0.875rem;
  color: rgb(55, 65, 81); background-color: transparent; border: none;
  border-radius: 0.25rem; cursor: pointer; transition: all 150ms ease-in-out;
}
.editor-toolbar-btn:hover { background-color: rgb(229, 231, 235); }
.editor-toolbar-btn:active, .editor-toolbar-btn.is-active { background-color: rgb(99, 112, 131); color: white; }
.editor-toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.editor-toolbar-separator { width: 1px; height: 1.5rem; background-color: rgb(229, 231, 235); margin: 0 0.25rem; }

/* --- Floating/Bubble Toolbar --- */
.editor-floating-toolbar {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem;
  background-color: rgb(17, 24, 39); border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  position: absolute; z-index: 50;
}
.editor-floating-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0.375rem; font-size: 0.875rem;
  color: white; background-color: transparent; border: none;
  border-radius: 0.25rem; cursor: pointer; transition: all 150ms ease-in-out;
}
.editor-floating-btn:hover { background-color: rgb(55, 65, 81); }
.editor-floating-btn.is-active { background-color: rgb(59, 130, 246); }

/* --- Editor Content Area --- */
.editor-content {
  padding: 1.5rem; min-height: 20rem; max-height: 40rem; overflow-y: auto;
  font-size: 1rem; line-height: 1.75rem; color: rgb(17, 24, 39);
}
.editor-content:focus { outline: none; }
.editor-content[contenteditable="true"] { cursor: text; }
.editor-content-compact { padding: 1rem; min-height: 10rem; }

/* --- Editor Content Elements --- */
.editor-content h1 { font-size: 2.25rem; font-weight: 700; line-height: 2.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.editor-content h1:first-child { margin-top: 0; }
.editor-content h2 { font-size: 1.875rem; font-weight: 700; line-height: 2.25rem; margin-top: 1.75rem; margin-bottom: 0.875rem; }
.editor-content h3 { font-size: 1.5rem; font-weight: 600; line-height: 2rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.editor-content h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; margin-top: 1.25rem; margin-bottom: 0.625rem; }
.editor-content p { margin-bottom: 1rem; }
.editor-content p:last-child { margin-bottom: 0; }
.editor-content strong { font-weight: 700; }
.editor-content em { font-style: italic; }
.editor-content u { text-decoration: underline; }
.editor-content s, .editor-content del { text-decoration: line-through; }
.editor-content a { color: rgb(59, 130, 246); text-decoration: underline; }
.editor-content a:hover { color: rgb(37, 99, 235); }
.editor-content ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; }
.editor-content ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1rem; }
.editor-content li { margin-bottom: 0.5rem; }
.editor-content ul[data-type="taskList"] { list-style-type: none; margin-left: 0; }
.editor-content ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.5rem; }
.editor-content ul[data-type="taskList"] input[type="checkbox"] { margin-top: 0.375rem; }
.editor-content blockquote {
  border-left: 4px solid rgb(229, 231, 235); padding-left: 1rem;
  margin-left: 0; margin-bottom: 1rem; font-style: italic; color: rgb(107, 114, 128);
}
.editor-content code {
  padding: 0.125rem 0.375rem; font-size: 0.875em;
  background-color: rgb(243, 244, 246); border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
}
.editor-content pre {
  padding: 1rem; margin-bottom: 1rem; background-color: rgb(17, 24, 39);
  color: rgb(243, 244, 246); border-radius: 0.5rem; overflow: auto;
  font-family: ui-monospace, monospace; font-size: 0.875rem; line-height: 1.5rem;
}
.editor-content pre code { padding: 0; background-color: transparent; color: inherit; }
.editor-content hr { margin: 2rem 0; border: none; border-top: 2px solid rgb(229, 231, 235); }
.editor-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; border: 1px solid rgb(229, 231, 235); }
.editor-content th { padding: 0.75rem; text-align: left; font-weight: 600; background-color: rgb(249, 250, 251); border-bottom: 2px solid rgb(229, 231, 235); }
.editor-content td { padding: 0.75rem; border-bottom: 1px solid rgb(229, 231, 235); }
.editor-content tr:last-child td { border-bottom: none; }
.editor-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin-bottom: 1rem; }

/* --- Editor Placeholder --- */
.editor-content[data-placeholder]:empty::before {
  content: attr(data-placeholder); color: rgb(156, 163, 175);
  pointer-events: none; position: absolute;
}

/* --- Slash Commands Menu --- */
.editor-slash-menu {
  position: absolute; z-index: 40; width: 20rem; max-height: 20rem;
  overflow-y: auto; padding: 0.5rem; background-color: white;
  border: 1px solid rgb(229, 231, 235); border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.editor-slash-group { margin-bottom: 0.5rem; }
.editor-slash-group:last-child { margin-bottom: 0; }
.editor-slash-group-title {
  padding: 0.5rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
  color: rgb(107, 114, 128); text-transform: uppercase; letter-spacing: 0.05em;
}
.editor-slash-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  cursor: pointer; transition: all 150ms ease-in-out;
}
.editor-slash-item:hover, .editor-slash-item.is-selected { background-color: rgb(243, 244, 246); }
.editor-slash-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.375rem;
  background-color: rgb(249, 250, 251); color: rgb(107, 114, 128);
}
.editor-slash-text { flex: 1; }
.editor-slash-title { font-size: 0.875rem; font-weight: 500; color: rgb(17, 24, 39); }
.editor-slash-description { font-size: 0.8125rem; color: rgb(107, 114, 128); }
.editor-slash-shortcut { font-size: 0.75rem; color: rgb(156, 163, 175); font-family: monospace; }

/* --- Editor Footer --- */
.editor-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; border-top: 1px solid rgb(229, 231, 235);
  background-color: rgb(249, 250, 251); font-size: 0.8125rem; color: rgb(107, 114, 128);
}

/* ============================================ */
/* SLIDER / RANGE                                */
/* ============================================ */

/* --- Slider Container --- */
.slider { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 0; user-select: none; touch-action: none; }
.slider-vertical { flex-direction: column; width: auto; height: 16rem; padding: 0 1rem; }

/* --- Slider Track --- */
.slider-track { position: relative; width: 100%; height: 0.375rem; background-color: rgb(229, 231, 235); border-radius: 9999px; cursor: pointer; }
.slider-vertical .slider-track { width: 0.375rem; height: 100%; }

/* --- Slider Range (filled) --- */
.slider-range { position: absolute; height: 100%; background-color: rgb(99, 112, 131); border-radius: 9999px; pointer-events: none; }
.slider-vertical .slider-range { width: 100%; height: auto; }

/* --- Slider Thumb --- */
.slider-thumb {
  position: absolute; top: 50%; width: 1.25rem; height: 1.25rem;
  background-color: white; border: 2px solid rgb(99, 112, 131); border-radius: 9999px;
  transform: translate(-50%, -50%); cursor: grab;
  transition: all 150ms ease-in-out; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
.slider-thumb:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.slider-thumb:active, .slider-thumb.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 4px rgba(107, 106, 99, 0.1); }
.slider-thumb:focus { outline: none; box-shadow: 0 0 0 4px rgba(107, 106, 99, 0.2); }
.slider-vertical .slider-thumb { top: auto; left: 50%; transform: translate(-50%, 50%); }
.slider-vertical .slider-thumb:hover { transform: translate(-50%, 50%) scale(1.1); }
.slider-vertical .slider-thumb:active, .slider-vertical .slider-thumb.dragging { transform: translate(-50%, 50%) scale(1.15); }

/* --- Slider Colors --- */
.slider-primary .slider-range { background-color: rgb(99, 112, 131); }
.slider-primary .slider-thumb { border-color: rgb(99, 112, 131); }
.slider-primary .slider-thumb:active, .slider-primary .slider-thumb.dragging { box-shadow: 0 0 0 4px rgba(107, 106, 99, 0.1); }

.slider-info .slider-range { background-color: rgb(59, 130, 246); }
.slider-info .slider-thumb { border-color: rgb(59, 130, 246); }
.slider-info .slider-thumb:active, .slider-info .slider-thumb.dragging { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }

.slider-success .slider-range { background-color: rgb(34, 197, 94); }
.slider-success .slider-thumb { border-color: rgb(34, 197, 94); }
.slider-success .slider-thumb:active, .slider-success .slider-thumb.dragging { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); }

.slider-warning .slider-range { background-color: rgb(251, 146, 60); }
.slider-warning .slider-thumb { border-color: rgb(251, 146, 60); }
.slider-warning .slider-thumb:active, .slider-warning .slider-thumb.dragging { box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.1); }

.slider-error .slider-range { background-color: rgb(239, 68, 68); }
.slider-error .slider-thumb { border-color: rgb(239, 68, 68); }
.slider-error .slider-thumb:active, .slider-error .slider-thumb.dragging { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }

/* --- Slider Disabled --- */
.slider-disabled { opacity: 0.5; cursor: not-allowed; }
.slider-disabled .slider-track { cursor: not-allowed; }
.slider-disabled .slider-thumb { cursor: not-allowed; }
.slider-disabled .slider-thumb:hover { transform: translate(-50%, -50%); }

/* --- Slider Labels --- */
.slider-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.8125rem; color: rgb(107, 114, 128); }
.slider-vertical .slider-labels { flex-direction: column-reverse; margin-top: 0; margin-left: 0.5rem; height: 100%; }

/* --- Slider Value Display --- */
.slider-value { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: rgb(55, 65, 81); }
.slider-value-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500;
  color: white; background-color: rgb(17, 24, 39); border-radius: 0.25rem;
  white-space: nowrap; pointer-events: none;
}
.slider-value-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: rgb(17, 24, 39);
}

/* --- Slider Ticks/Marks --- */
.slider-ticks { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.slider-tick { position: absolute; width: 2px; height: 0.5rem; background-color: rgb(209, 213, 219); transform: translateX(-50%); top: 100%; margin-top: 0.25rem; }
.slider-tick-label { position: absolute; transform: translateX(-50%); top: calc(100% + 0.75rem); font-size: 0.75rem; color: rgb(107, 114, 128); }

/* --- Slider Sizes --- */
.slider-sm .slider-track { height: 0.25rem; }
.slider-sm .slider-thumb { width: 1rem; height: 1rem; }
.slider-md .slider-track { height: 0.375rem; }
.slider-md .slider-thumb { width: 1.25rem; height: 1.25rem; }
.slider-lg .slider-track { height: 0.5rem; }
.slider-lg .slider-thumb { width: 1.5rem; height: 1.5rem; }

/* ============================================ */
/* TOOLTIP                                       */
/* ============================================ */

/* --- Tooltip Base --- */
.tooltip {
  position: absolute; z-index: 50; max-width: 20rem;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem;
  color: white; background-color: rgb(17, 24, 39); border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  pointer-events: none; opacity: 0; transform: scale(0.95);
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.tooltip.show { opacity: 1; transform: scale(1); }
.tooltip-arrow { position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.tooltip-wrapper { position: relative; display: inline-block; }

/* --- Tooltip Positions --- */
.tooltip-top { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.95); margin-bottom: 0.5rem; }
.tooltip-top.show { transform: translateX(-50%) translateY(-8px) scale(1); }
.tooltip-top .tooltip-arrow { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: rgb(17, 24, 39); }

.tooltip-bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px) scale(0.95); margin-top: 0.5rem; }
.tooltip-bottom.show { transform: translateX(-50%) translateY(8px) scale(1); }
.tooltip-bottom .tooltip-arrow { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: rgb(17, 24, 39); }

.tooltip-left { right: 100%; top: 50%; transform: translateY(-50%) translateX(-8px) scale(0.95); margin-right: 0.5rem; }
.tooltip-left.show { transform: translateY(-50%) translateX(-8px) scale(1); }
.tooltip-left .tooltip-arrow { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: rgb(17, 24, 39); }

.tooltip-right { left: 100%; top: 50%; transform: translateY(-50%) translateX(8px) scale(0.95); margin-left: 0.5rem; }
.tooltip-right.show { transform: translateY(-50%) translateX(8px) scale(1); }
.tooltip-right .tooltip-arrow { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: rgb(17, 24, 39); }

.tooltip-top-left { bottom: 100%; left: 0; transform: translateY(-8px) scale(0.95); margin-bottom: 0.5rem; }
.tooltip-top-left.show { transform: translateY(-8px) scale(1); }
.tooltip-top-left .tooltip-arrow { top: 100%; left: 1rem; border-top-color: rgb(17, 24, 39); }

.tooltip-top-right { bottom: 100%; right: 0; transform: translateY(-8px) scale(0.95); margin-bottom: 0.5rem; }
.tooltip-top-right.show { transform: translateY(-8px) scale(1); }
.tooltip-top-right .tooltip-arrow { top: 100%; right: 1rem; border-top-color: rgb(17, 24, 39); }

.tooltip-bottom-left { top: 100%; left: 0; transform: translateY(8px) scale(0.95); margin-top: 0.5rem; }
.tooltip-bottom-left.show { transform: translateY(8px) scale(1); }
.tooltip-bottom-left .tooltip-arrow { bottom: 100%; left: 1rem; border-bottom-color: rgb(17, 24, 39); }

.tooltip-bottom-right { top: 100%; right: 0; transform: translateY(8px) scale(0.95); margin-top: 0.5rem; }
.tooltip-bottom-right.show { transform: translateY(8px) scale(1); }
.tooltip-bottom-right .tooltip-arrow { bottom: 100%; right: 1rem; border-bottom-color: rgb(17, 24, 39); }

/* --- Tooltip Themes --- */
.tooltip-light { background-color: white; color: rgb(17, 24, 39); border: 1px solid rgb(229, 231, 235); }
.tooltip-light.tooltip-top .tooltip-arrow { border-top-color: white; }
.tooltip-light.tooltip-bottom .tooltip-arrow { border-bottom-color: white; }
.tooltip-light.tooltip-left .tooltip-arrow { border-left-color: white; }
.tooltip-light.tooltip-right .tooltip-arrow { border-right-color: white; }
.tooltip-light.tooltip-top-left .tooltip-arrow { border-top-color: white; }
.tooltip-light.tooltip-top-right .tooltip-arrow { border-top-color: white; }
.tooltip-light.tooltip-bottom-left .tooltip-arrow { border-bottom-color: white; }
.tooltip-light.tooltip-bottom-right .tooltip-arrow { border-bottom-color: white; }

/* --- Tooltip Sizes --- */
.tooltip-sm { padding: 0.375rem 0.5rem; font-size: 0.8125rem; max-width: 12rem; }
.tooltip-md { padding: 0.5rem 0.75rem; font-size: 0.875rem; max-width: 20rem; }
.tooltip-lg { padding: 0.75rem 1rem; font-size: 0.9375rem; max-width: 28rem; }

/* --- Tooltip Content (complex) --- */
.tooltip-content { display: flex; flex-direction: column; gap: 0.5rem; }
.tooltip-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.25rem; }
.tooltip-text { font-size: 0.875rem; line-height: 1.5rem; }
.tooltip-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.tooltip-btn {
  padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500;
  border-radius: 0.25rem; cursor: pointer; transition: all 150ms ease-in-out; border: none;
}
.tooltip-btn:hover { opacity: 0.9; }
.tooltip-btn-primary { background-color: var(--accent); color: var(--accent-text); }
.tooltip-btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: white; }

/* ============================================ */
/* FORM HELPERS                                  */
/* ============================================ */

/* --- Form Label --- */
.form-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: rgb(55, 65, 81); }
.form-label-text { font-size: 0.875rem; font-weight: 500; color: rgb(55, 65, 81); }
.form-label-required { color: rgb(239, 68, 68); margin-left: 0.125rem; }
.form-label-optional { font-size: 0.8125rem; font-weight: 400; color: rgb(107, 114, 128); margin-left: 0.25rem; }
.form-label-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; color: rgb(107, 114, 128); cursor: help;
}
.form-label-info:hover { color: rgb(55, 65, 81); }
.form-label-error { color: rgb(220, 38, 38); }
.form-label-disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Helper Text --- */
.helper-text { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; color: rgb(107, 114, 128); }
.helper-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.helper-text-default { color: rgb(107, 114, 128); }
.helper-text-error { color: rgb(239, 68, 68); }
.helper-text-error .helper-icon { color: rgb(239, 68, 68); }
.helper-text-warning { color: rgb(251, 146, 60); }
.helper-text-warning .helper-icon { color: rgb(251, 146, 60); }
.helper-text-success { color: rgb(34, 197, 94); }
.helper-text-success .helper-icon { color: rgb(34, 197, 94); }
.helper-text-info { color: rgb(59, 130, 246); }
.helper-text-info .helper-icon { color: rgb(59, 130, 246); }
.helper-text-disabled { opacity: 0.5; }

/* --- Password Strength Indicator --- */
.password-strength { margin-top: 0.75rem; }
.password-strength-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: rgb(55, 65, 81); }
.password-strength-bars { display: flex; gap: 0.375rem; margin-bottom: 0.5rem; }
.password-strength-bar { flex: 1; height: 0.25rem; background-color: rgb(229, 231, 235); border-radius: 9999px; transition: background-color 200ms ease-in-out; }
.password-strength-text { font-size: 0.8125rem; font-weight: 500; }

.password-strength-none .password-strength-bar { background-color: rgb(229, 231, 235); }
.password-strength-weak .password-strength-bar:nth-child(1) { background-color: rgb(239, 68, 68); }
.password-strength-weak .password-strength-text { color: rgb(239, 68, 68); }
.password-strength-fair .password-strength-bar:nth-child(1),
.password-strength-fair .password-strength-bar:nth-child(2) { background-color: rgb(251, 146, 60); }
.password-strength-fair .password-strength-text { color: rgb(251, 146, 60); }
.password-strength-good .password-strength-bar:nth-child(1),
.password-strength-good .password-strength-bar:nth-child(2),
.password-strength-good .password-strength-bar:nth-child(3) { background-color: rgb(132, 204, 22); }
.password-strength-good .password-strength-text { color: rgb(132, 204, 22); }
.password-strength-strong .password-strength-bar { background-color: rgb(34, 197, 94); }
.password-strength-strong .password-strength-text { color: rgb(34, 197, 94); }

/* --- Password Requirements Checklist --- */
.password-requirements { margin-top: 0.75rem; }
.password-requirements-title { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: rgb(55, 65, 81); }
.password-requirements-list { display: flex; flex-direction: column; gap: 0.375rem; }
.password-requirement { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgb(107, 114, 128); transition: color 150ms ease-in-out; }
.password-requirement-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.password-requirement-met { color: rgb(34, 197, 94); }
.password-requirement-met .password-requirement-icon { color: rgb(34, 197, 94); }
.password-requirement-unmet { color: rgb(107, 114, 128); }
.password-requirement-unmet .password-requirement-icon { color: rgb(156, 163, 175); }

/* --- Form Group --- */
.form-group { margin-bottom: 1.5rem; }
.form-group-inline { display: flex; align-items: center; gap: 1rem; }
.form-group-inline .form-label { margin-bottom: 0; min-width: 8rem; }

/* --- Sidebar Icon Hover Animation --- */
.sidebar-nav-item .sidebar-icon {
  transition: transform 0.2s ease;
}
.sidebar-nav-item:hover .sidebar-icon {
  transform: scale(1.06);
}
.sidebar-nav-item:active .sidebar-icon {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* Chat user-message bubble — guaranteed background + border-radius
   regardless of Tailwind CDN class generation timing. */
.user-bubble {
  background-color: var(--bg-100);
  border-radius: 1rem;
  border-bottom-right-radius: 0.375rem;
  padding: 0.875rem 1.25rem;
  max-width: 85%;
}
@media (max-width: 767px) {
  .user-bubble {
    max-width: 95%;
  }
}
.dark .user-bubble {
  background-color: #1E1E1C;
}

/* Auth pages — black submit button */
.btn-auth{width:100%;height:48px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:background-color .2s,color .2s;background-color:#0D0D0D;color:#FFFFFF}
.btn-auth:hover{background-color:#2A2A27}
.dark .btn-auth{background-color:#ECECEC;color:#0D0D0D}
.dark .btn-auth:hover{background-color:#D4D4D0}

/* ── Loading Skeleton ── */
@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{position:relative;overflow:hidden;background:var(--bg-50, #F5F5F4);border-radius:8px}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}
.dark .skeleton{background:var(--bg-100, #2A2A27)}
.dark .skeleton::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);background-size:200% 100%}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-text:last-child{width:60%}
.skeleton-title{height:22px;width:40%;margin-bottom:12px}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}
.skeleton-card{height:160px;border-radius:12px}
.skeleton-btn{height:40px;width:120px;border-radius:8px}
.skeleton-img{height:200px;border-radius:12px}