@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================
   GenOS Design System — Component Library
   ============================================ */

:root {
  /* Primary (Indigo) */
  --primary: #4318D1;
  --primary-light: #6B4DE6;
  --primary-dark: #3210A3;
  --primary-bg: #F4F1FE;
  --primary-bg-subtle: #F9F8FF;
  --indigo-10: #EEEAFD;

  /* Secondary (Teal) */
  --secondary: #0EA5A0;
  --secondary-light: #2DD4BF;
  --secondary-dark: #0B8A84;
  --secondary-bg: #F0FDFA;
  --teal-20: #99F0E4;
  --teal-90: #065550;

  /* Semantic */
  --success: #10B981;
  --error: #E74C3C;
  --warning: #F97316;
  --info: #3B82F6;

  /* Neutrals (Gray) */
  --gray-0: #F8FAFC;
  --gray-10: #F1F5F9;
  --gray-20: #E2E8F0;
  --gray-30: #CBD5E1;
  --gray-40: #94A3B8;
  --gray-50: #64748B;
  --gray-60: #475569;
  --gray-70: #334155;
  --gray-80: #1E293B;
  --gray-90: #2C3E50;
  --gray-100: #0F172A;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition: all 0.2s ease;
}

/* ============================================
   TEXT INPUT — Primary
   ============================================
   Sizes:  .input-sm | (default medium) | .input-lg
   States: :hover | :focus | :disabled | .input-error
   Labels: .input-label-top | .input-label-left | .input-label-nested-left | .input-label-nested-right
   ============================================ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.input-group.input-layout-left {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* Label */
.input-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.input-sm .input-label,
.input-group.input-sm > .input-label {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.11px;
}

/* Input container */
.input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: text;
}

.input-wrapper input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
}

.input-wrapper input::placeholder {
  color: var(--gray-40);
  opacity: 1;
}

/* Hover */
.input-wrapper:hover {
  border-color: var(--secondary);
}

/* Focus / Selected */
.input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.input-wrapper:focus-within input::selection {
  background: var(--indigo-10);
}

/* Disabled */
.input-group.input-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.input-group.input-disabled .input-wrapper {
  cursor: not-allowed;
}

/* Error */
.input-group.input-error .input-wrapper {
  border-color: var(--error);
  box-shadow: none;
}

.input-group.input-error .input-wrapper:hover {
  border-color: var(--error);
}

.input-group.input-error .input-wrapper:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.input-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* ---- Size: Small ---- */
.input-sm .input-wrapper,
.input-group.input-sm .input-wrapper {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
}

.input-sm .input-wrapper input,
.input-group.input-sm .input-wrapper input {
  font-size: 12px;
  line-height: 16px;
}

/* ---- Size: Large ---- */
.input-lg .input-wrapper,
.input-group.input-lg .input-wrapper {
  height: 48px;
  padding: 0 16px;
}

.input-lg .input-wrapper input,
.input-group.input-lg .input-wrapper input {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* Icons */
.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gray-40);
  transition: var(--transition);
}

.input-wrapper:hover .input-icon {
  color: var(--secondary);
}

.input-wrapper:focus-within .input-icon {
  color: var(--primary);
}

.input-icon-left {
  width: 16px;
  height: 16px;
}

.input-icon-right {
  width: 12px;
  height: 12px;
}

.input-icon svg {
  width: 100%;
  height: 100%;
}

/* Nested labels */
.input-nested-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gray-40);
  letter-spacing: 0.12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}

.input-wrapper:focus-within .input-nested-label {
  color: var(--gray-60);
}

.input-lg .input-nested-label {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ============================================
   TEXT INPUT — Secondary (compact, no label)
   ============================================ */

.input-secondary .input-wrapper {
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  border-color: var(--gray-20);
  background: transparent;
}

.input-secondary .input-wrapper input {
  font-size: 12px;
}

.input-secondary .input-wrapper:hover {
  border-color: var(--secondary);
}

.input-secondary .input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
  background: white;
}

.input-secondary.input-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ============================================
   BUTTONS
   ============================================
   Types:  .btn-primary | .btn-secondary | .btn-tertiary | .btn-text | .btn-inverted | .btn-ghost | .btn-error
   Sizes:  .btn-sm | (default medium) | .btn-lg
   States: :hover | :active | :disabled | .btn-loading
   Icon:   .btn-icon (square, icon-only)
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  position: relative;
}

/* ---- Sizes ---- */

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 0.12px;
  border-radius: var(--radius-xs);
}

.btn-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 14px;
}

/* ---- Primary ---- */

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

.btn-primary:hover {
  background: #3712B5;
}

.btn-primary:active {
  background: #2C0E96;
}

/* ---- Secondary (outlined) ---- */

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-secondary:hover {
  background: var(--primary-bg);
}

.btn-secondary:active {
  background: var(--indigo-10);
}

/* ---- Tertiary ---- */

.btn-tertiary {
  background: white;
  color: var(--gray-80);
  border: 1px solid var(--gray-20);
}

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

.btn-tertiary:active {
  border-color: var(--secondary);
  background: var(--teal-20);
}

.btn-tertiary.btn-bg-none {
  background: transparent;
}

.btn-tertiary.btn-bg-none:hover {
  background: var(--secondary-bg);
}

.btn-tertiary.btn-bg-none:active {
  background: var(--teal-20);
}

/* ---- Text Button ---- */

.btn-text {
  background: transparent;
  color: var(--primary);
  padding: 0 8px;
}

.btn-text:hover {
  background: var(--primary-bg);
}

.btn-text:active {
  background: var(--indigo-10);
}

/* ---- Inverted (for dark backgrounds) ---- */

.btn-inverted {
  background: white;
  color: var(--primary);
  border: none;
}

.btn-inverted:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-inverted:active {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(0);
}

/* ---- Ghost/Outline (for dark backgrounds) ---- */

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-ghost:active {
  background: rgba(255, 255, 255, 0.25);
}

/* ---- Error ---- */

.btn-error {
  background: var(--error);
  color: white;
}

.btn-error:hover {
  background: #CF4436;
}

.btn-error:active {
  background: #B83C30;
}

/* ---- Icon-only ---- */

.btn-icon {
  width: 40px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 32px;
}

.btn-icon.btn-lg {
  width: 48px;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Disabled (all variants) ---- */

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Loading ---- */

.btn-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-error.btn-loading::after {
  border-color: white;
  border-right-color: transparent;
}

.btn-secondary.btn-loading::after,
.btn-text.btn-loading::after {
  border-color: var(--primary);
  border-right-color: transparent;
}

.btn-tertiary.btn-loading::after {
  border-color: var(--gray-80);
  border-right-color: transparent;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   CHECKBOX
   ============================================
   Sizes:  .checkbox-sm (16px) | (default 20px)
   States: :hover | :checked | :disabled
   ============================================ */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', -apple-system, sans-serif;
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.checkbox input[type="checkbox"]:hover {
  border-color: #086F6A;
}

.checkbox input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.checkbox input[type="checkbox"]:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.checkbox input[type="checkbox"]:disabled + span {
  opacity: 0.45;
}

/* Small checkbox */

.checkbox-sm input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.checkbox-sm input[type="checkbox"]:checked::after {
  top: 2px;
  left: 6px;
  width: 3px;
  height: 7px;
}

.checkbox span {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-80);
  line-height: 1;
  letter-spacing: 0.13px;
  user-select: none;
}

/* ============================================
   RADIO BUTTON
   ============================================
   Sizes:  (default 16px) | .radio-lg (20px)
   States: :hover | :checked | :disabled
   ============================================ */

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', -apple-system, sans-serif;
  cursor: pointer;
}

.radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.radio input[type="radio"]:hover {
  border-color: var(--secondary);
}

.radio input[type="radio"]:checked {
  border: 2px solid var(--primary);
}

.radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radio input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.radio input[type="radio"]:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.radio input[type="radio"]:disabled + span {
  opacity: 0.45;
}

/* Large radio */

.radio-lg input[type="radio"] {
  width: 22px;
  height: 22px;
}

.radio-lg input[type="radio"]:checked::after {
  width: 10px;
  height: 10px;
}

.radio span {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-80);
  line-height: 1;
  letter-spacing: 0.13px;
  user-select: none;
}

/* ============================================
   TOGGLE SWITCH
   ============================================
   Sizes:  .toggle-xs (28×14) | (default 40×20)
   States: :hover | :checked (on) | :disabled
   ============================================ */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', -apple-system, sans-serif;
  cursor: pointer;
}

.toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: var(--gray-20);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.toggle input[type="checkbox"]:hover {
  background: var(--secondary);
}

.toggle input[type="checkbox"]:checked {
  background: var(--primary);
}

.toggle input[type="checkbox"]:checked::after {
  left: 22px;
}

.toggle input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.toggle input[type="checkbox"]:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.toggle input[type="checkbox"]:disabled + span {
  opacity: 0.45;
}

/* Extra-small toggle */

.toggle-xs input[type="checkbox"] {
  width: 34px;
  height: 18px;
}

.toggle-xs input[type="checkbox"]::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.toggle-xs input[type="checkbox"]:checked::after {
  left: 18px;
}

.toggle span {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-80);
  line-height: 1;
  letter-spacing: 0.13px;
  user-select: none;
}

/* ============================================
   TABS
   ============================================
   Styles: Text Tabs (.tabs) | Pill Tabs (.tabs-pill / .btn-tertiary)
   States: .tab hover | .tab.active
   ============================================ */

.tabs {
  display: flex;
  gap: 24px;
  padding: 0 12px;
  border-bottom: 1px solid var(--gray-20);
  font-family: 'Poppins', -apple-system, sans-serif;
}

.tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-50);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Poppins', -apple-system, sans-serif;
}

.tab:hover {
  color: var(--gray-80);
}

.tab.active {
  color: var(--gray-80);
  border-bottom-color: var(--primary);
}

/* ============================================
   CHIPS
   ============================================
   Types:  Removable (.chip) | Selectable (.chip-select)
   Sizes:  .chip-md (24px) | .chip-lg (30px)
   States: :hover | .chip-select.active
   ============================================ */

/* ---- Removable Chip ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--gray-10);
  color: var(--gray-80);
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-xs);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 500;
  line-height: 1;
  cursor: default;
  transition: var(--transition);
}

.chip-md {
  height: 24px;
  font-size: 12px;
}

.chip-lg {
  height: 30px;
  font-size: 13px;
}

.chip:hover {
  background: var(--secondary-light);
}

.chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--gray-80);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.chip-close:hover {
  color: var(--error);
}

/* ---- Selectable Chip ---- */

.chip-select {
  display: inline-flex;
  align-items: center;
  padding: 12px;
  background: transparent;
  color: var(--secondary);
  border: 1px solid var(--gray-20);
  border-radius: 12px;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.chip-select:hover {
  border-color: var(--secondary);
}

.chip-select.active {
  border-color: var(--primary);
  color: var(--gray-80);
}

/* ============================================
   TOASTS
   ============================================
   Types:  .toast-general | .toast-info | .toast-alert | .toast-error
   ============================================ */

.toast {
  position: relative;
  width: 312px;
  padding: 16px 38px;
  border-radius: var(--radius-md);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 1px rgba(23, 25, 28, 0.13), 0 7px 10px rgba(23, 25, 28, 0.11);
  animation: toast-in 0.3s ease forwards;
}

.toast-general {
  background: white;
  border: 1px solid var(--gray-20);
  color: var(--gray-80);
}

.toast-info {
  background: var(--primary);
  color: white;
}

.toast-alert {
  background: #FFD34D;
  color: rgba(0, 0, 0, 0.7);
}

.toast-error {
  background: var(--error);
  color: white;
}

.toast-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   ALERTS
   ============================================
   Inline, persistent notification cards.
   Variants: .alert-info | .alert-success | .alert-warning | .alert-error
   Sizes:    default | .alert-compact
   ============================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  transition: var(--transition);
}

.alert-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.alert-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 4px;
}

.alert-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

.alert-info {
  background: #EFF6FF;
  color: var(--gray-70);
}

.alert-info .alert-icon { color: var(--info); }
.alert-info .alert-title { color: var(--info); }

.alert-success {
  background: #ECFDF5;
  color: var(--gray-70);
}

.alert-success .alert-icon { color: var(--success); }
.alert-success .alert-title { color: var(--success); }

.alert-warning {
  background: #FFFBEB;
  color: var(--gray-70);
}

.alert-warning .alert-icon { color: var(--warning); }
.alert-warning .alert-title { color: #B45309; }

.alert-error {
  background: #FEF2F2;
  color: var(--gray-70);
}

.alert-error .alert-icon { color: var(--error); }
.alert-error .alert-title { color: var(--error); }

.alert-compact {
  padding: 10px 14px;
  font-size: 12px;
}

.alert-compact .alert-icon {
  width: 16px;
  height: 16px;
}

.alert-compact .alert-title {
  font-size: 12px;
}

/* ============================================
   TOOLTIPS
   ============================================
   Variants: .tooltip-dark (default) | .tooltip-light
   Arrow:    .tooltip-arrow-down
   ============================================ */

.tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 7px 10px rgba(23, 25, 28, 0.11);
  position: relative;
}

.tooltip-dark {
  background: var(--gray-90);
  color: white;
}

.tooltip-light {
  background: white;
  border: 1px solid var(--gray-20);
  color: var(--gray-80);
}

.tooltip-arrow-down::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.tooltip-dark.tooltip-arrow-down::after {
  border-top: 6px solid var(--gray-90);
}

.tooltip-light.tooltip-arrow-down::after {
  border-top: 6px solid var(--gray-20);
}

/* ============================================
   SELECT INPUT
   ============================================
   Sizes:  .select-sm | (default medium) | .select-lg
   States: :hover | .open | :disabled | .select-error
   ============================================ */

.select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.select-group .select-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}

.select-value {
  flex: 1;
  min-width: 0;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-value.placeholder {
  color: var(--gray-40);
  font-weight: 400;
}

.select-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-40);
  transition: var(--transition);
}

.select-chevron svg {
  width: 100%;
  height: 100%;
}

/* Hover */
.select-trigger:hover {
  border-color: var(--secondary);
}

.select-trigger:hover .select-chevron {
  color: var(--secondary);
}

/* Open / Selected */
.select-trigger.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.select-trigger.open .select-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

/* Disabled */
.select-group.select-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.select-group.select-disabled .select-trigger {
  cursor: not-allowed;
}

/* Error */
.select-group.select-error .select-trigger {
  border-color: var(--error);
  box-shadow: none;
}

.select-group.select-error .select-trigger:hover {
  border-color: var(--error);
}

.select-group.select-error .select-trigger.open {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.select-group .select-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* ---- Size: Small ---- */
.select-group.select-sm .select-trigger {
  height: 32px;
  border-radius: var(--radius-xs);
}

.select-group.select-sm .select-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.11px;
}

/* ---- Size: Large ---- */
.select-group.select-lg .select-trigger {
  height: 48px;
}

.select-group.select-lg .select-value {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ============================================
   COMBOBOX
   ============================================
   Sizes:  .combobox-sm | (default medium) | .combobox-lg
   States: :hover | .open | :disabled | .combobox-error
   ============================================ */

.combobox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.combobox-group .combobox-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-80);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.combobox-group .select-trigger {
  border-color: var(--gray-20);
}

.combobox-group .select-trigger input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
}

.combobox-group .select-trigger input::placeholder {
  color: var(--gray-40);
  opacity: 1;
}

/* Hover */
.combobox-group .select-trigger:hover {
  border-color: var(--secondary);
}

.combobox-group .select-trigger:hover .select-chevron {
  color: var(--secondary);
}

/* Open / Focus */
.combobox-group .select-trigger.open,
.combobox-group .select-trigger:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.combobox-group .select-trigger.open .select-chevron,
.combobox-group .select-trigger:focus-within .select-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

/* Disabled */
.combobox-group.combobox-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.combobox-group.combobox-disabled .select-trigger {
  cursor: not-allowed;
}

/* Error */
.combobox-group.combobox-error .select-trigger {
  border-color: var(--error);
  box-shadow: none;
}

.combobox-group.combobox-error .select-trigger:hover {
  border-color: var(--error);
}

.combobox-group.combobox-error .select-trigger.open,
.combobox-group.combobox-error .select-trigger:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.combobox-group .combobox-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* ---- Size: Small ---- */
.combobox-group.combobox-sm .select-trigger {
  height: 32px;
  border-radius: var(--radius-xs);
}

.combobox-group.combobox-sm .combobox-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.11px;
}

/* ---- Size: Large ---- */
.combobox-group.combobox-lg .select-trigger {
  height: 48px;
}

.combobox-group.combobox-lg .select-trigger input {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ============================================
   MULTI SELECT
   ============================================
   Sizes:  .multiselect-sm | (default medium) | .multiselect-lg
   States: :hover | .open | :disabled | .multiselect-error
   ============================================ */

.multiselect-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.multiselect-group .multiselect-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.multiselect-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}

.multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.multiselect-input {
  flex: 1;
  min-width: 60px;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
}

.multiselect-input::placeholder {
  color: var(--gray-40);
  opacity: 1;
}

.multiselect-trigger .select-chevron {
  margin-left: auto;
  flex-shrink: 0;
}

/* Hover */
.multiselect-trigger:hover {
  border-color: var(--secondary);
}

.multiselect-trigger:hover .select-chevron {
  color: var(--secondary);
}

/* Open / Focus */
.multiselect-trigger.open,
.multiselect-trigger:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.multiselect-trigger.open .select-chevron,
.multiselect-trigger:focus-within .select-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

/* Disabled */
.multiselect-group.multiselect-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.multiselect-group.multiselect-disabled .multiselect-trigger {
  cursor: not-allowed;
}

/* Error */
.multiselect-group.multiselect-error .multiselect-trigger {
  border-color: var(--error);
  box-shadow: none;
}

.multiselect-group.multiselect-error .multiselect-trigger:hover {
  border-color: var(--error);
}

.multiselect-group.multiselect-error .multiselect-trigger.open,
.multiselect-group.multiselect-error .multiselect-trigger:focus-within {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.multiselect-group .multiselect-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* ---- Size: Small ---- */
.multiselect-group.multiselect-sm .multiselect-trigger {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

.multiselect-group.multiselect-sm .multiselect-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.11px;
}

/* ---- Size: Large ---- */
.multiselect-group.multiselect-lg .multiselect-trigger {
  min-height: 48px;
  padding: 8px 14px;
}

.multiselect-group.multiselect-lg .multiselect-input {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ============================================
   SEARCH
   ============================================
   States: :hover | :focus-within | :disabled
   ============================================ */

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  font-family: 'Poppins', -apple-system, sans-serif;
  transition: var(--transition);
  cursor: text;
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-40);
  transition: var(--transition);
}

.search-icon svg {
  width: 100%;
  height: 100%;
}

.search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
}

.search input::placeholder {
  color: var(--gray-40);
  opacity: 1;
}

/* Hover */
.search:hover {
  border-color: var(--secondary);
}

.search:hover .search-icon {
  color: var(--secondary);
}

/* Focus */
.search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.search:focus-within .search-icon {
  color: var(--primary);
}

/* Disabled */
.search.search-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================================
   TEXTAREA
   ============================================
   Sizes:  (default medium) | .textarea-lg
   States: :hover | :focus-within | .textarea-disabled | .textarea-error | .textarea-readonly
   ============================================ */

.textarea-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.textarea-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.textarea-field {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
  resize: vertical;
  transition: var(--transition);
  outline: none;
}

.textarea-field::placeholder {
  color: var(--gray-40);
  opacity: 1;
}

/* Hover */
.textarea-field:hover {
  border-color: var(--secondary);
}

/* Focus */
.textarea-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.textarea-field:focus::selection {
  background: var(--indigo-10);
}

/* Helper text */
.textarea-helper {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  color: var(--gray-40);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* Error message */
.textarea-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* Disabled */
.textarea-group.textarea-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.textarea-group.textarea-disabled .textarea-field {
  cursor: not-allowed;
}

/* Error */
.textarea-group.textarea-error .textarea-field {
  border-color: var(--error);
  box-shadow: none;
}

.textarea-group.textarea-error .textarea-field:hover {
  border-color: var(--error);
}

.textarea-group.textarea-error .textarea-field:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Read-only */
.textarea-group.textarea-readonly .textarea-field {
  background: var(--gray-0);
  border-color: var(--gray-20);
  cursor: default;
}

.textarea-group.textarea-readonly .textarea-field:hover {
  border-color: var(--gray-20);
}

.textarea-group.textarea-readonly .textarea-field:focus {
  border-color: var(--gray-20);
  box-shadow: none;
}

/* ---- Size: Large ---- */
.textarea-group.textarea-lg .textarea-label {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

.textarea-group.textarea-lg .textarea-field {
  min-height: 100px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ============================================
   SLIDER
   ============================================
   Custom range input with optional label and min/max values.
   States: :hover | :focus | :disabled
   ============================================ */

.slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.slider-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
}

.slider-track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-value {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-50);
  letter-spacing: 0.12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: var(--gray-20);
  border-radius: 30px;
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

/* Track — WebKit */
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 30px;
}

/* Track — Firefox */
.slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--gray-20);
  border-radius: 30px;
  border: none;
}

/* Fill — Firefox */
.slider input[type="range"]::-moz-range-progress {
  height: 4px;
  background: var(--primary-light);
  border-radius: 30px;
}

/* Thumb — WebKit */
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  margin-top: -2px;
  transition: var(--transition);
}

/* Thumb — Firefox */
.slider input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  transition: var(--transition);
}

/* Hover */
.slider input[type="range"]:hover::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.slider input[type="range"]:hover::-moz-range-thumb {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.slider input[type="range"]:hover::-moz-range-progress {
  background: var(--primary);
}

/* Focus */
.slider input[type="range"]:focus::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.slider input[type="range"]:focus::-moz-range-thumb {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

/* Disabled */
.slider input[type="range"]:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ============================================
   DATE PICKER
   ============================================
   A) Date input trigger (.date-input-group)
      Sizes:  .date-input-sm | (default medium) | .date-input-lg
      States: :hover | .open | :disabled | .date-input-error
   B) Calendar panel (.datepicker-panel)
      Day states: .today | .selected | .range-middle | .range-start | .range-end | .holiday | .empty
   ============================================ */

/* ---- A) Date Input Trigger ---- */

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.date-input-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-70);
  letter-spacing: 0.12px;
  white-space: nowrap;
}

.date-input-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}

.date-input-value {
  flex: 1;
  min-width: 0;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  color: var(--gray-80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-input-value.placeholder {
  color: var(--gray-40);
  font-weight: 400;
}

.date-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-40);
  transition: var(--transition);
}

.date-input-icon svg {
  width: 100%;
  height: 100%;
}

/* Hover */
.date-input-trigger:hover {
  border-color: var(--secondary);
}

.date-input-trigger:hover .date-input-icon {
  color: var(--secondary);
}

/* Open / Focus */
.date-input-trigger.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 24, 209, 0.1);
}

.date-input-trigger.open .date-input-icon {
  color: var(--primary);
}

/* Disabled */
.date-input-group.date-input-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.date-input-group.date-input-disabled .date-input-trigger {
  cursor: not-allowed;
}

/* Error */
.date-input-group.date-input-error .date-input-trigger {
  border-color: var(--error);
  box-shadow: none;
}

.date-input-group.date-input-error .date-input-trigger:hover {
  border-color: var(--error);
}

.date-input-group.date-input-error .date-input-trigger.open {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.date-input-group .date-input-error-message {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--error);
  letter-spacing: 0.11px;
  padding: 0 8px;
}

/* ---- Size: Small ---- */
.date-input-group.date-input-sm .date-input-trigger {
  height: 32px;
  border-radius: var(--radius-xs);
}

.date-input-group.date-input-sm .date-input-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.11px;
}

/* ---- Size: Large ---- */
.date-input-group.date-input-lg .date-input-trigger {
  height: 48px;
}

.date-input-group.date-input-lg .date-input-value {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.14px;
}

/* ---- B) Calendar Panel ---- */

.datepicker-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 264px;
  padding: 24px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  font-family: 'Poppins', -apple-system, sans-serif;
}

/* Header: month/year + nav arrows */
.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.datepicker-header span {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--gray-80);
}

.datepicker-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  color: var(--gray-50);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: var(--transition);
}

.datepicker-nav-btn:hover {
  color: var(--secondary);
}

.datepicker-nav-btn svg {
  width: 100%;
  height: 100%;
}

/* Weekday row */
.datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.datepicker-weekday {
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
  color: var(--gray-80);
  letter-spacing: 0.12px;
}

.datepicker-weekday.weekend {
  color: var(--error);
}

/* Date grid */
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray-50);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Poppins', -apple-system, sans-serif;
}

.datepicker-day:hover {
  background: var(--gray-10);
}

/* Today */
.datepicker-day.today {
  font-weight: 600;
  color: var(--primary);
}

/* Selected */
.datepicker-day.selected {
  background: var(--primary);
  color: white;
  font-weight: 500;
}

.datepicker-day.selected:hover {
  background: var(--primary);
}

/* Range middle */
.datepicker-day.range-middle {
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 0;
}

/* Range start */
.datepicker-day.range-start {
  background: var(--primary);
  color: white;
  font-weight: 500;
  border-radius: 50% 0 0 50%;
}

/* Range end */
.datepicker-day.range-end {
  background: var(--primary);
  color: white;
  font-weight: 500;
  border-radius: 0 50% 50% 0;
}

/* Holiday */
.datepicker-day.holiday {
  color: var(--error);
}

/* Empty */
.datepicker-day.empty {
  pointer-events: none;
  cursor: default;
}

/* Event dot */
.datepicker-day .event-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  background: var(--secondary);
  border-radius: 50%;
}

/* Footer */
.datepicker-footer {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

/* ============================================
   DROPDOWN MENU
   ============================================
   Structure: .menu > .menu-header | .menu-item | .menu-divider
   States:    .menu-item:hover | .menu-item.selected | .menu-item.disabled
   ============================================ */

.menu {
  display: flex;
  flex-direction: column;
  min-width: 208px;
  padding: 10px 0;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  box-shadow: 0 7px 10px rgba(44, 62, 80, 0.08);
  font-family: 'Poppins', -apple-system, sans-serif;
}

.menu-header {
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-80);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px;
  padding: 12px 10px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray-80);
  background: white;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Poppins', -apple-system, sans-serif;
  text-decoration: none;
}

.menu-item:hover {
  background: var(--gray-10);
}

.menu-item.selected,
.menu-item.active {
  background: var(--primary-bg);
}

.menu-item.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-50);
  transition: var(--transition);
}

.menu-item.selected .menu-item-icon,
.menu-item.active .menu-item-icon {
  color: var(--primary);
}

.menu-item-icon svg {
  width: 100%;
  height: 100%;
}

.menu-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item-trailing {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-40);
}

.menu-item-trailing svg {
  width: 16px;
  height: 16px;
}

.menu-divider {
  height: 1px;
  background: var(--gray-20);
  margin: 4px 8px;
  border: none;
}

/* ============================================
   MODAL
   ============================================
   Structure: .modal-overlay > .modal > .modal-header + .modal-body + .modal-footer
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-lg);
  box-shadow: 0 7px 10px rgba(23, 25, 28, 0.11);
  font-family: 'Poppins', -apple-system, sans-serif;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--gray-50);
}

.modal-header-icon svg {
  width: 100%;
  height: 100%;
}

.modal-header-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-100);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-40);
  cursor: pointer;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-10);
  color: var(--secondary);
}

.modal-close svg {
  width: 16px;
  height: 16px;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
}

/* ============================================
   DIALOG
   ============================================
   Structure: .modal-overlay > .dialog > .dialog-illustration + .dialog-headline + .dialog-body + .dialog-actions
   ============================================ */

.dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 300px;
  padding: 44px;
  background: white;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-md);
  box-shadow: 0 7px 10px rgba(23, 25, 28, 0.11);
  font-family: 'Poppins', -apple-system, sans-serif;
  text-align: center;
}

.dialog-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 102px;
}

.dialog-illustration img,
.dialog-illustration svg {
  max-height: 100%;
}

.dialog-headline {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gray-100);
}

.dialog-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gray-80);
  max-width: 223px;
}

.dialog-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dialog-actions .btn {
  width: 220px;
}

/* ============================================
   NAVIGATION — SIDEBAR
   ============================================
   Structure: .sidebar > .sidebar-logo + .sidebar-nav > .nav-section > .nav-item + .sidebar-footer
   States:    .nav-item.active | :hover
   Collapsed: .sidebar.sidebar-collapsed (56px icon-only)
   ============================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 100%;
  background: white;
  border-right: 1px solid var(--gray-20);
  font-family: 'Poppins', -apple-system, sans-serif;
  transition: width 0.2s ease;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  flex-shrink: 0;
}

.sidebar-logo img {
  height: 22px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  flex: 1;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-40);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  border-left: none;
}

.nav-item:hover {
  background: var(--gray-10);
}

.nav-item:hover .nav-item-label {
  color: var(--gray-70);
}

.nav-item:hover .nav-item-icon svg {
  color: var(--gray-60);
}

.nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: var(--transition);
}

.nav-item-icon svg {
  width: 18px;
  height: 18px;
  color: var(--gray-40);
  transition: var(--transition);
}

.nav-item-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-50);
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active nav item */
.nav-item.active {
  background: var(--primary-bg);
}

.nav-item.active .nav-item-icon svg {
  color: var(--primary);
}

.nav-item.active .nav-item-label {
  color: var(--gray-80);
  font-weight: 600;
}

/* Sidebar divider */
.sidebar-divider {
  height: 1px;
  background: var(--gray-20);
  margin: 8px 12px;
}

/* Sidebar footer */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-top: 1px solid var(--gray-20);
  flex-shrink: 0;
}

/* ---- Collapsed sidebar ---- */
.sidebar.sidebar-collapsed {
  width: 56px;
}

.sidebar.sidebar-collapsed .sidebar-logo img {
  height: 18px;
}

.sidebar.sidebar-collapsed .sidebar-nav {
  padding: 8px 6px;
}

.sidebar.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  height: 40px;
  border-left-width: 0;
  border-radius: var(--radius-sm);
}

.sidebar.sidebar-collapsed .nav-item-label,
.sidebar.sidebar-collapsed .nav-section-label {
  display: none;
}

.sidebar.sidebar-collapsed .sidebar-footer {
  padding: 8px 6px;
}

/* ============================================
   NAVIGATION — TOPBAR
   ============================================
   Structure: .topbar > .topbar-item
   States:    .topbar-item:hover | .topbar-item.active
   ============================================ */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 70px;
  padding: 0 24px;
  background: white;
  border-bottom: 1px solid var(--gray-20);
  font-family: 'Poppins', -apple-system, sans-serif;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-50);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Poppins', -apple-system, sans-serif;
  text-decoration: none;
}

.topbar-item:hover {
  color: var(--secondary);
  background: var(--gray-10);
}

.topbar-item.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* ============================================
   GLASS CARDS
   ============================================
   Frosted glass effect cards for premium moments.
   Use sparingly over tinted backgrounds or images.
   
   Variants: .card-glass (light) | .card-glass-dark
   ============================================ */

.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 28px;
  transition: var(--transition);
}

.card-glass:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-lg);
}

.card-glass-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  color: white;
  transition: var(--transition);
}

.card-glass-dark:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}

.card-glass-dark h1,
.card-glass-dark h2,
.card-glass-dark h3,
.card-glass-dark h4,
.card-glass-dark h5,
.card-glass-dark h6 {
  color: white;
}

.card-glass-dark p {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   SECTIONS & LAYOUT
   ============================================
   Page section containers with background treatments
   and vertical rhythm utilities.
   
   Backgrounds: .section-white | .section-primary | .section-secondary | 
                .section-gray | .section-dark
   Padding:     .section-sm (40px) | .section-md (64px, default) | 
                .section-lg (96px)
   Container:   .section-container (max-width content wrapper)
   ============================================ */

.section {
  width: 100%;
  padding: 64px 40px;
  position: relative;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Padding sizes */
.section-sm {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section-md {
  padding-top: 64px;
  padding-bottom: 64px;
}

.section-lg {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Background treatments */
.section-white {
  background: white;
  color: var(--gray-80);
}

.section-primary {
  background: #EEEAFD;
  color: var(--gray-90);
}

.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4,
.section-primary h5,
.section-primary h6 {
  color: var(--gray-100);
}

.section-primary p {
  color: var(--gray-80);
}

.section-secondary {
  background: #D5F5F2;
  color: var(--gray-90);
}

.section-secondary h1,
.section-secondary h2,
.section-secondary h3,
.section-secondary h4,
.section-secondary h5,
.section-secondary h6 {
  color: var(--gray-100);
}

.section-secondary p {
  color: var(--gray-80);
}

.section-gray {
  background: var(--gray-10);
  color: var(--gray-80);
}

.section-dark {
  background: var(--gray-100);
  color: white;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: white;
}

.section-dark p {
  color: var(--gray-20);
}

/* ============================================
   CURSORS (Application)
   ============================================
   Utility classes for custom cursor states
   used in canvas/editor contexts.
   ============================================ */

.cursor-pointer-app {
  cursor: default;
}

.cursor-duplicate {
  cursor: copy;
}

.cursor-draw {
  cursor: crosshair;
}

.cursor-rotate {
  cursor: grab;
}

.cursor-resize-h {
  cursor: ew-resize;
}

.cursor-resize-v {
  cursor: ns-resize;
}

.cursor-resize-ne-sw {
  cursor: nesw-resize;
}

.cursor-resize-nw-se {
  cursor: nwse-resize;
}

/* Cursor preview tiles */
.cursor-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--gray-10);
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.cursor-tile:hover {
  background: var(--gray-0);
  border-color: var(--secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cursor-tile svg {
  width: 24px;
  height: 24px;
  color: var(--gray-60);
}

/* ============================================
   LOGOS
   ============================================
   Brand logo display with three color variants.
   ============================================ */

.logo {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.5px;
  line-height: 1;
  user-select: none;
}

.logo-default {
  color: var(--gray-60);
}

.logo-default .logo-accent {
  color: #F5A623;
}

.logo-white {
  color: white;
}

.logo-dark {
  color: var(--gray-100);
}

.logo-sm {
  font-size: 20px;
}

.logo-md {
  font-size: 28px;
}

.logo-lg {
  font-size: 40px;
}

.logo-xl {
  font-size: 56px;
}