/* ============================================================
   SS Ladies Hostel — Design System Enhancement Layer
   Version : 2.0.0
   Updated : 2026-07-12
   Purpose : Dark/light theming, glassmorphism, premium UI
             components. Loaded ALONGSIDE the existing style.css.
   ============================================================ */

/* ——————————————————————————————————————————————————————————————
   §1  FONT IMPORT
   —————————————————————————————————————————————————————————————— */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ——————————————————————————————————————————————————————————————
   §2  DESIGN TOKENS — LIGHT MODE (default)
   —————————————————————————————————————————————————————————————— */
:root {
  /* ── Typography ─────────────────────────────────────────── */
  --font-primary        : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono           : 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --fs-xs               : 0.6875rem;   /* 11px */
  --fs-sm               : 0.8125rem;   /* 13px */
  --fs-base             : 0.9375rem;   /* 15px */
  --fs-md               : 1.0625rem;   /* 17px */
  --fs-lg               : 1.25rem;     /* 20px */
  --fs-xl               : 1.5rem;      /* 24px */
  --fs-2xl              : 2rem;        /* 32px */
  --fs-3xl              : 2.5rem;      /* 40px */

  --fw-light            : 300;
  --fw-regular          : 400;
  --fw-medium           : 500;
  --fw-semibold         : 600;
  --fw-bold             : 700;
  --fw-extrabold        : 800;

  --lh-tight            : 1.2;
  --lh-normal           : 1.5;
  --lh-relaxed          : 1.75;

  --ls-tight            : -0.02em;
  --ls-normal           : 0;
  --ls-wide             : 0.04em;
  --ls-wider            : 0.08em;

  /* ── Colour Palette — Light ─────────────────────────────── */
  --color-bg-primary    : #f5f6fa;
  --color-bg-secondary  : #ffffff;
  --color-bg-tertiary   : #eef0f6;
  --color-bg-elevated   : #ffffff;

  --color-surface       : #ffffff;
  --color-surface-hover : #f0f2f8;
  --color-surface-active: #e8ebf2;

  --color-text-primary  : #1a1d2e;
  --color-text-secondary: #5a5f7a;
  --color-text-tertiary : #8e92a8;
  --color-text-inverse  : #ffffff;
  --color-text-on-accent: #ffffff;

  --color-border        : #dfe2ec;
  --color-border-light  : #eef0f6;
  --color-border-focus  : #6366f1;

  /* ── Brand / Accent ─────────────────────────────────────── */
  --color-accent        : #6366f1;
  --color-accent-hover  : #4f46e5;
  --color-accent-light  : #e0e0ff;
  --color-accent-rgb    : 99, 102, 241;

  --color-secondary     : #ec4899;
  --color-secondary-rgb : 236, 72, 153;

  /* ── Semantic / Status ──────────────────────────────────── */
  --color-success       : #10b981;
  --color-success-bg    : #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-success-text  : #065f46;

  --color-warning       : #f59e0b;
  --color-warning-bg    : #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text  : #92400e;

  --color-error         : #ef4444;
  --color-error-bg      : #fef2f2;
  --color-error-border  : #fecaca;
  --color-error-text    : #991b1b;

  --color-info          : #3b82f6;
  --color-info-bg       : #eff6ff;
  --color-info-border   : #bfdbfe;
  --color-info-text     : #1e40af;

  /* ── Glass / Blur ───────────────────────────────────────── */
  --glass-bg            : rgba(255, 255, 255, 0.55);
  --glass-bg-strong     : rgba(255, 255, 255, 0.78);
  --glass-border        : rgba(255, 255, 255, 0.45);
  --glass-blur          : 16px;
  --glass-blur-strong   : 24px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs           : 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm           : 0 2px 6px rgba(0,0,0,.06);
  --shadow-md           : 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg           : 0 8px 24px rgba(0,0,0,.10);
  --shadow-xl           : 0 16px 48px rgba(0,0,0,.12);
  --shadow-glow         : 0 0 20px rgba(99,102,241,.25);
  --shadow-glow-accent  : 0 0 30px rgba(99,102,241,.35);
  --shadow-inner        : inset 0 2px 4px rgba(0,0,0,.06);

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-xs           : 4px;
  --radius-sm           : 6px;
  --radius-md           : 10px;
  --radius-lg           : 14px;
  --radius-xl           : 20px;
  --radius-2xl          : 28px;
  --radius-full         : 9999px;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1             : 0.25rem;
  --space-2             : 0.5rem;
  --space-3             : 0.75rem;
  --space-4             : 1rem;
  --space-5             : 1.25rem;
  --space-6             : 1.5rem;
  --space-8             : 2rem;
  --space-10            : 2.5rem;
  --space-12            : 3rem;
  --space-16            : 4rem;
  --space-20            : 5rem;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast     : 150ms cubic-bezier(.4,0,.2,1);
  --transition-base     : 250ms cubic-bezier(.4,0,.2,1);
  --transition-slow     : 400ms cubic-bezier(.4,0,.2,1);
  --transition-spring   : 500ms cubic-bezier(.34,1.56,.64,1);
  --transition-theme    : 600ms cubic-bezier(.4,0,.2,1);

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --z-base              : 1;
  --z-dropdown          : 100;
  --z-sticky            : 200;
  --z-drawer            : 300;
  --z-overlay           : 400;
  --z-modal             : 500;
  --z-fab               : 600;
  --z-toast             : 700;
  --z-tooltip           : 800;

  /* ── Layout ─────────────────────────────────────────────── */
  --drawer-width        : 280px;
  --header-height       : 64px;
  --bottom-sheet-radius : 20px;
  --container-max       : 1280px;
  --fab-size            : 56px;
  --fab-size-mini       : 40px;
}

/* ——————————————————————————————————————————————————————————————
   §3  DESIGN TOKENS — DARK MODE
   —————————————————————————————————————————————————————————————— */
[data-theme='dark'] {
  /* ── Colour Palette — Dark ──────────────────────────────── */
  --color-bg-primary    : #0f1117;
  --color-bg-secondary  : #171923;
  --color-bg-tertiary   : #1e2030;
  --color-bg-elevated   : #1e2030;

  --color-surface       : #1e2030;
  --color-surface-hover : #272a3d;
  --color-surface-active: #2f3348;

  --color-text-primary  : #e8eaf0;
  --color-text-secondary: #a0a4b8;
  --color-text-tertiary : #6c7090;
  --color-text-inverse  : #0f1117;
  --color-text-on-accent: #ffffff;

  --color-border        : #2a2d40;
  --color-border-light  : #22253a;
  --color-border-focus  : #818cf8;

  /* ── Brand / Accent (brighter for dark) ─────────────────── */
  --color-accent        : #818cf8;
  --color-accent-hover  : #6366f1;
  --color-accent-light  : rgba(129,140,248,.12);
  --color-accent-rgb    : 129, 140, 248;

  --color-secondary     : #f472b6;
  --color-secondary-rgb : 244, 114, 182;

  /* ── Semantic / Status — Dark ───────────────────────────── */
  --color-success       : #34d399;
  --color-success-bg    : rgba(16,185,129,.10);
  --color-success-border: rgba(16,185,129,.25);
  --color-success-text  : #6ee7b7;

  --color-warning       : #fbbf24;
  --color-warning-bg    : rgba(245,158,11,.10);
  --color-warning-border: rgba(245,158,11,.25);
  --color-warning-text  : #fde68a;

  --color-error         : #f87171;
  --color-error-bg      : rgba(239,68,68,.10);
  --color-error-border  : rgba(239,68,68,.25);
  --color-error-text    : #fca5a5;

  --color-info          : #60a5fa;
  --color-info-bg       : rgba(59,130,246,.10);
  --color-info-border   : rgba(59,130,246,.25);
  --color-info-text     : #93bbfd;

  /* ── Glass / Blur — Dark ────────────────────────────────── */
  --glass-bg            : rgba(17, 19, 30, 0.60);
  --glass-bg-strong     : rgba(17, 19, 30, 0.82);
  --glass-border        : rgba(255, 255, 255, 0.08);

  /* ── Shadows — Dark ─────────────────────────────────────── */
  --shadow-xs           : 0 1px 2px rgba(0,0,0,.20);
  --shadow-sm           : 0 2px 6px rgba(0,0,0,.28);
  --shadow-md           : 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg           : 0 8px 24px rgba(0,0,0,.40);
  --shadow-xl           : 0 16px 48px rgba(0,0,0,.50);
  --shadow-glow         : 0 0 20px rgba(129,140,248,.20);
  --shadow-glow-accent  : 0 0 30px rgba(129,140,248,.30);
  --shadow-inner        : inset 0 2px 4px rgba(0,0,0,.25);
}

/* ——————————————————————————————————————————————————————————————
   §4  THEME TRANSITION LAYER
   Smooth property transitions when toggling data-theme.
   —————————————————————————————————————————————————————————————— */
.ds-theme-transition,
.ds-theme-transition *,
.ds-theme-transition *::before,
.ds-theme-transition *::after {
  transition:
    background-color var(--transition-theme),
    border-color     var(--transition-theme),
    color            var(--transition-theme),
    box-shadow       var(--transition-theme),
    fill             var(--transition-theme),
    stroke           var(--transition-theme) !important;
}

/* ——————————————————————————————————————————————————————————————
   §5  PREMIUM TYPOGRAPHY
   —————————————————————————————————————————————————————————————— */
.ds-font {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ds-heading-3xl { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.ds-heading-2xl { font-size: var(--fs-2xl); font-weight: var(--fw-bold);      line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.ds-heading-xl  { font-size: var(--fs-xl);  font-weight: var(--fw-bold);      line-height: var(--lh-tight); }
.ds-heading-lg  { font-size: var(--fs-lg);  font-weight: var(--fw-semibold);  line-height: var(--lh-normal); }
.ds-heading-md  { font-size: var(--fs-md);  font-weight: var(--fw-semibold);  line-height: var(--lh-normal); }

.ds-body        { font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.ds-body-sm     { font-size: var(--fs-sm);   font-weight: var(--fw-regular); line-height: var(--lh-normal); }

.ds-label       { font-size: var(--fs-xs);  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.ds-mono        { font-family: var(--font-mono); font-size: var(--fs-sm); }

.ds-text-primary   { color: var(--color-text-primary); }
.ds-text-secondary { color: var(--color-text-secondary); }
.ds-text-tertiary  { color: var(--color-text-tertiary); }
.ds-text-accent    { color: var(--color-accent); }
.ds-text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ——————————————————————————————————————————————————————————————
   §6  GLASSMORPHISM UTILITIES
   —————————————————————————————————————————————————————————————— */
.ds-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

.ds-glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
          backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
}

.ds-glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ds-glass-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ——————————————————————————————————————————————————————————————
   §7  SURFACE / CARD SYSTEM
   —————————————————————————————————————————————————————————————— */
.ds-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ds-surface-elevated {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ds-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.ds-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-focus);
}

.ds-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

/* ——————————————————————————————————————————————————————————————
   §8  SKELETON LOADING ANIMATION
   —————————————————————————————————————————————————————————————— */
@keyframes ds-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-surface-hover) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 800px 100%;
  animation: ds-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.ds-skeleton * {
  visibility: hidden !important;
}

.ds-skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: var(--radius-xs);
}

.ds-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.ds-skeleton-card {
  height: 160px;
  border-radius: var(--radius-lg);
}

.ds-skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--radius-md);
}

/* ——————————————————————————————————————————————————————————————
   §9  DRAWER NAVIGATION (Fixed Left Sidebar)
   —————————————————————————————————————————————————————————————— */
.ds-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--drawer-width);
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--transition-slow), box-shadow var(--transition-base);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.ds-drawer-glass {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
          backdrop-filter: blur(var(--glass-blur-strong));
}

.ds-drawer.is-closed {
  transform: translateX(-100%);
  box-shadow: none;
}

.ds-drawer-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.ds-drawer-body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.ds-drawer-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.ds-drawer-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.ds-drawer-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.ds-drawer-link.is-active {
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.ds-drawer-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.ds-drawer-link .ds-drawer-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}

.ds-drawer-link.is-active .ds-drawer-icon {
  opacity: 1;
}

.ds-drawer-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-3) 0;
}

.ds-drawer-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

/* Content area shifts when drawer is open (desktop) */
.ds-main-with-drawer {
  margin-left: var(--drawer-width);
  transition: margin-left var(--transition-slow);
}

.ds-main-with-drawer.drawer-closed {
  margin-left: 0;
}

/* ── Responsive: collapse drawer on mobile ────────────────── */
@media (max-width: 767px) {
  .ds-drawer {
    transform: translateX(-100%);
    width: min(var(--drawer-width), 85vw);
  }

  .ds-drawer.is-open {
    transform: translateX(0);
  }

  .ds-main-with-drawer {
    margin-left: 0 !important;
  }
}

/* ——————————————————————————————————————————————————————————————
   §10  BOTTOM SHEET (Mobile)
   —————————————————————————————————————————————————————————————— */
.ds-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  max-height: 90dvh;
  background: var(--color-bg-secondary);
  border-top-left-radius: var(--bottom-sheet-radius);
  border-top-right-radius: var(--bottom-sheet-radius);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  z-index: var(--z-modal);
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ds-bottom-sheet.is-open {
  transform: translateY(0);
}

.ds-bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0 var(--space-2);
}

.ds-bottom-sheet-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.ds-bottom-sheet-header {
  padding: 0 var(--space-6) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ds-bottom-sheet-body {
  padding: 0 var(--space-6) var(--space-8);
}

[data-theme='dark'] .ds-bottom-sheet {
  box-shadow: 0 -4px 24px rgba(0,0,0,.40);
}

/* ——————————————————————————————————————————————————————————————
   §11  FLOATING ACTION BUTTON (FAB)
   —————————————————————————————————————————————————————————————— */
.ds-fab {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  z-index: var(--z-fab);
  transition: transform var(--transition-spring), box-shadow var(--transition-base), background var(--transition-fast);
  font-size: 1.5rem;
  line-height: 1;
}

.ds-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-xl), var(--shadow-glow-accent);
  background: var(--color-accent-hover);
}

.ds-fab:active {
  transform: scale(0.95);
}

.ds-fab-mini {
  width: var(--fab-size-mini);
  height: var(--fab-size-mini);
  font-size: 1.1rem;
}

.ds-fab-extended {
  width: auto;
  padding: 0 var(--space-6);
  gap: var(--space-2);
  border-radius: var(--radius-2xl);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

/* FAB speed dial sub-buttons */
.ds-fab-group {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-3);
  z-index: var(--z-fab);
}

.ds-fab-group .ds-fab-action {
  width: var(--fab-size-mini);
  height: var(--fab-size-mini);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0) translateY(10px);
  transition: all var(--transition-spring);
  pointer-events: none;
}

.ds-fab-group.is-open .ds-fab-action {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

.ds-fab-group.is-open .ds-fab-action:nth-child(2) { transition-delay: 50ms; }
.ds-fab-group.is-open .ds-fab-action:nth-child(3) { transition-delay: 100ms; }
.ds-fab-group.is-open .ds-fab-action:nth-child(4) { transition-delay: 150ms; }

/* Mobile adjustments */
@media (max-width: 599px) {
  .ds-fab {
    bottom: var(--space-6);
    right: var(--space-6);
  }
  .ds-fab-group {
    bottom: var(--space-6);
    right: var(--space-6);
  }
}

/* ——————————————————————————————————————————————————————————————
   §12  OVERLAY / MODAL BACKDROP
   —————————————————————————————————————————————————————————————— */
.ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.ds-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

[data-theme='dark'] .ds-overlay {
  background: rgba(0, 0, 0, 0.60);
}

/* ── Modal ────────────────────────────────────────────────── */
.ds-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  width: min(90vw, 560px);
  max-height: 85vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-slow), opacity var(--transition-base), visibility var(--transition-base);
}

.ds-modal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.ds-modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ds-modal-body {
  padding: var(--space-6);
}

.ds-modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ——————————————————————————————————————————————————————————————
   §13  MODERN FORM INPUTS
   —————————————————————————————————————————————————————————————— */
.ds-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    background   var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.ds-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--fw-regular);
}

.ds-input:hover {
  border-color: var(--color-text-tertiary);
}

.ds-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18),
              0 0 12px rgba(var(--color-accent-rgb), 0.10);
}

.ds-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

.ds-input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

.ds-input-success {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}

/* ── Textarea ─────────────────────────────────────────────── */
textarea.ds-input {
  min-height: 100px;
  resize: vertical;
  line-height: var(--lh-relaxed);
}

/* ── Select ───────────────────────────────────────────────── */
select.ds-input {
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c7090' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px;
}

/* ── Label ────────────────────────────────────────────────── */
.ds-form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* ── Helper Text ──────────────────────────────────────────── */
.ds-form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.ds-form-hint-error {
  color: var(--color-error);
}

/* ── Form Group ───────────────────────────────────────────── */
.ds-form-group {
  margin-bottom: var(--space-6);
}

/* ── Input with icon ──────────────────────────────────────── */
.ds-input-wrapper {
  position: relative;
}

.ds-input-wrapper .ds-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: color var(--transition-fast);
}

.ds-input-wrapper .ds-input {
  padding-left: calc(var(--space-4) + 18px + var(--space-3));
}

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

/* ── Toggle / Switch ──────────────────────────────────────── */
.ds-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.ds-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ds-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ds-toggle-track::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: white;
  top: 3px;
  left: 3px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-spring);
}

.ds-toggle input:checked + .ds-toggle-track {
  background: var(--color-accent);
}

.ds-toggle input:checked + .ds-toggle-track::after {
  transform: translateX(22px);
}

.ds-toggle input:focus-visible + .ds-toggle-track {
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

/* ——————————————————————————————————————————————————————————————
   §14  BUTTONS
   —————————————————————————————————————————————————————————————— */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ds-btn:active {
  transform: scale(0.97);
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Variants */
.ds-btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.ds-btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-glow);
}

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

.ds-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.ds-btn-ghost:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.ds-btn-danger {
  background: var(--color-error);
  color: white;
}
.ds-btn-danger:hover {
  box-shadow: 0 0 16px rgba(239,68,68,.30);
}

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

/* Sizes */
.ds-btn-xs  { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }
.ds-btn-sm  { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.ds-btn-lg  { padding: var(--space-4) var(--space-8); font-size: var(--fs-base); border-radius: var(--radius-lg); }
.ds-btn-xl  { padding: var(--space-5) var(--space-10); font-size: var(--fs-md); border-radius: var(--radius-lg); }

.ds-btn-block { width: 100%; }

.ds-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* ——————————————————————————————————————————————————————————————
   §15  STATUS PILLS / BADGES
   —————————————————————————————————————————————————————————————— */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: var(--ls-wide);
}

/* Dot indicator inside pill */
.ds-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ds-pill-no-dot::before {
  display: none;
}

/* ── Verified / Approved — Green ──────────────────────────── */
.ds-pill-verified,
.ds-pill-approved,
.ds-pill-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}
.ds-pill-verified::before,
.ds-pill-approved::before,
.ds-pill-success::before {
  background: var(--color-success);
}

/* ── Pending — Yellow ─────────────────────────────────────── */
.ds-pill-pending,
.ds-pill-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
}
.ds-pill-pending::before,
.ds-pill-warning::before {
  background: var(--color-warning);
}

/* ── Rejected — Red ───────────────────────────────────────── */
.ds-pill-rejected,
.ds-pill-error,
.ds-pill-danger {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}
.ds-pill-rejected::before,
.ds-pill-error::before,
.ds-pill-danger::before {
  background: var(--color-error);
}

/* ── Submitted — Blue ─────────────────────────────────────── */
.ds-pill-submitted,
.ds-pill-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
}
.ds-pill-submitted::before,
.ds-pill-info::before {
  background: var(--color-info);
}

/* ── Neutral ──────────────────────────────────────────────── */
.ds-pill-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.ds-pill-neutral::before {
  background: var(--color-text-tertiary);
}

/* ── Badge (numeric / count) ──────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: white;
}

.ds-badge-accent {
  background: var(--color-accent);
}

.ds-badge-outline {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ——————————————————————————————————————————————————————————————
   §16  STICKY HEADER WITH GLASS
   —————————————————————————————————————————————————————————————— */
.ds-sticky-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
          backdrop-filter: blur(var(--glass-blur-strong));
  border-bottom: 1px solid var(--glass-border);
  z-index: var(--z-sticky);
  transition: box-shadow var(--transition-base);
}

.ds-sticky-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* ——————————————————————————————————————————————————————————————
   §17  RESPONSIVE GRID UTILITIES
   —————————————————————————————————————————————————————————————— */
.ds-grid {
  display: grid;
  gap: var(--space-6);
}

.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ds-grid-gap-2  { gap: var(--space-2); }
.ds-grid-gap-3  { gap: var(--space-3); }
.ds-grid-gap-4  { gap: var(--space-4); }
.ds-grid-gap-6  { gap: var(--space-6); }
.ds-grid-gap-8  { gap: var(--space-8); }

/* ── Mini ( ≤ 320px ) ─────────────────────────────────────── */
@media (max-width: 320px) {
  .ds-grid-cols-2,
  .ds-grid-cols-3,
  .ds-grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ── Small ( ≤ 599px ) ────────────────────────────────────── */
@media (min-width: 321px) and (max-width: 599px) {
  .ds-grid-cols-3,
  .ds-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet ( 600px – 767px ) ─────────────────────────────── */
@media (min-width: 600px) and (max-width: 767px) {
  .ds-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet-landscape ( 768px – 1023px ) ──────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ds-grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Responsive overrides at breakpoints ──────────────────── */
@media (min-width: 600px) {
  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
  .ds-xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ds-xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Flex row utility ─────────────────────────────────────── */
.ds-flex        { display: flex; }
.ds-flex-col    { flex-direction: column; }
.ds-flex-wrap   { flex-wrap: wrap; }
.ds-flex-center { align-items: center; justify-content: center; }
.ds-flex-between{ align-items: center; justify-content: space-between; }
.ds-items-center{ align-items: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-gap-2       { gap: var(--space-2); }
.ds-gap-3       { gap: var(--space-3); }
.ds-gap-4       { gap: var(--space-4); }
.ds-gap-6       { gap: var(--space-6); }

/* ——————————————————————————————————————————————————————————————
   §18  ANIMATIONS — FADE-IN / SLIDE / SCALE
   —————————————————————————————————————————————————————————————— */
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes ds-fade-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ds-fade-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ds-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.ds-animate-fade-in       { animation: ds-fade-in       0.5s ease-out both; }
.ds-animate-fade-in-up    { animation: ds-fade-in-up    0.5s ease-out both; }
.ds-animate-fade-in-down  { animation: ds-fade-in-down  0.5s ease-out both; }
.ds-animate-fade-in-left  { animation: ds-fade-in-left  0.5s ease-out both; }
.ds-animate-fade-in-right { animation: ds-fade-in-right 0.5s ease-out both; }
.ds-animate-scale-in      { animation: ds-scale-in      0.4s ease-out both; }

/* Staggered delays for list items */
.ds-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ds-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.ds-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.ds-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.ds-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.ds-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.ds-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.ds-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.ds-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.ds-stagger > *:nth-child(10) { animation-delay: 450ms; }
.ds-stagger > *:nth-child(11) { animation-delay: 500ms; }
.ds-stagger > *:nth-child(12) { animation-delay: 550ms; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ——————————————————————————————————————————————————————————————
   §19  ANIMATED COUNTER SUPPORT
   —————————————————————————————————————————————————————————————— */
@property --ds-counter-value {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.ds-counter {
  counter-reset: none;
  transition: --ds-counter-value 1.2s ease-out;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: var(--fw-bold);
}

.ds-counter::after {
  content: counter(--ds-counter-value);
}

/* Fallback: JS sets textContent; this just styles the container */
.ds-counter-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: var(--fw-bold);
  display: inline-block;
  min-width: 2ch;
}

/* ── Pulse ring for live counters ─────────────────────────── */
@keyframes ds-pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.ds-counter-pulse {
  position: relative;
}

.ds-counter-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  animation: ds-pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
}

/* ——————————————————————————————————————————————————————————————
   §20  THEME TOGGLE SWITCH (Sun/Moon)
   —————————————————————————————————————————————————————————————— */
.ds-theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
  flex-shrink: 0;
}

[data-theme='dark'] .ds-theme-toggle {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.ds-theme-toggle::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: white;
  top: 3px;
  left: 3px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-spring);
}

[data-theme='dark'] .ds-theme-toggle::after {
  transform: translateX(24px);
}

/* ——————————————————————————————————————————————————————————————
   §21  TABLES (Enhancement)
   —————————————————————————————————————————————————————————————— */
.ds-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.ds-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.ds-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.ds-table tbody tr {
  transition: background var(--transition-fast);
}

.ds-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.ds-table tbody tr:last-child td {
  border-bottom: none;
}

/* ——————————————————————————————————————————————————————————————
   §22  AVATAR
   —————————————————————————————————————————————————————————————— */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-avatar-xs  { width: 24px; height: 24px; font-size: var(--fs-xs); }
.ds-avatar-sm  { width: 32px; height: 32px; font-size: var(--fs-xs); }
.ds-avatar-md  { width: 40px; height: 40px; font-size: var(--fs-sm); }
.ds-avatar-lg  { width: 56px; height: 56px; font-size: var(--fs-base); }
.ds-avatar-xl  { width: 72px; height: 72px; font-size: var(--fs-lg); }
.ds-avatar-2xl { width: 96px; height: 96px; font-size: var(--fs-xl); }

.ds-avatar-stack {
  display: flex;
}

.ds-avatar-stack .ds-avatar {
  border: 2px solid var(--color-bg-primary);
}

.ds-avatar-stack .ds-avatar + .ds-avatar {
  margin-left: -10px;
}

/* ——————————————————————————————————————————————————————————————
   §23  TOOLTIP
   —————————————————————————————————————————————————————————————— */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: white;
  background: var(--color-text-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ——————————————————————————————————————————————————————————————
   §24  TOAST / NOTIFICATION (positioned)
   —————————————————————————————————————————————————————————————— */
.ds-toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: min(400px, calc(100vw - var(--space-12)));
}

.ds-toast {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  pointer-events: all;
  animation: ds-fade-in-right 0.4s ease-out both;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}

.ds-toast-success { border-left: 3px solid var(--color-success); }
.ds-toast-error   { border-left: 3px solid var(--color-error); }
.ds-toast-warning { border-left: 3px solid var(--color-warning); }
.ds-toast-info    { border-left: 3px solid var(--color-info); }

/* ——————————————————————————————————————————————————————————————
   §25  PROGRESS BAR
   —————————————————————————————————————————————————————————————— */
.ds-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.ds-progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  transition: width 0.6s ease-out;
}

.ds-progress-indeterminate .ds-progress-bar {
  width: 30% !important;
  animation: ds-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes ds-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}

/* ——————————————————————————————————————————————————————————————
   §26  DIVIDER
   —————————————————————————————————————————————————————————————— */
.ds-divider {
  height: 1px;
  border: none;
  background: var(--color-border-light);
  margin: var(--space-6) 0;
}

.ds-divider-thick {
  height: 2px;
}

/* ——————————————————————————————————————————————————————————————
   §27  UTILITY SPACING / DISPLAY
   —————————————————————————————————————————————————————————————— */
.ds-p-0  { padding: 0; }
.ds-p-2  { padding: var(--space-2); }
.ds-p-3  { padding: var(--space-3); }
.ds-p-4  { padding: var(--space-4); }
.ds-p-6  { padding: var(--space-6); }
.ds-p-8  { padding: var(--space-8); }

.ds-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.ds-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.ds-py-2 { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.ds-py-4 { padding-top: var(--space-4);  padding-bottom: var(--space-4); }

.ds-m-0  { margin: 0; }
.ds-mt-2 { margin-top: var(--space-2); }
.ds-mt-4 { margin-top: var(--space-4); }
.ds-mt-6 { margin-top: var(--space-6); }
.ds-mb-2 { margin-bottom: var(--space-2); }
.ds-mb-4 { margin-bottom: var(--space-4); }
.ds-mb-6 { margin-bottom: var(--space-6); }

.ds-hidden       { display: none !important; }
.ds-block        { display: block; }
.ds-inline-block { display: inline-block; }
.ds-inline       { display: inline; }
.ds-relative     { position: relative; }
.ds-overflow-hidden { overflow: hidden; }
.ds-w-full       { width: 100%; }
.ds-h-full       { height: 100%; }
.ds-text-center  { text-align: center; }
.ds-text-right   { text-align: right; }

/* ── Show/hide at breakpoints ─────────────────────────────── */
@media (max-width: 599px) {
  .ds-hide-mobile { display: none !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .ds-hide-tablet { display: none !important; }
}
@media (min-width: 600px) {
  .ds-show-mobile-only { display: none !important; }
}
@media (min-width: 768px) {
  .ds-show-tablet-only { display: none !important; }
}

/* ——————————————————————————————————————————————————————————————
   §28  SCROLLBAR STYLING
   —————————————————————————————————————————————————————————————— */
.ds-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ds-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.ds-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.ds-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Firefox */
.ds-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ——————————————————————————————————————————————————————————————
   §29  EMPTY STATE
   —————————————————————————————————————————————————————————————— */
.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
  color: var(--color-text-tertiary);
}

.ds-empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.ds-empty-state-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.ds-empty-state-text {
  font-size: var(--fs-sm);
  max-width: 320px;
  line-height: var(--lh-relaxed);
}

/* ——————————————————————————————————————————————————————————————
   §30  CONTAINER
   —————————————————————————————————————————————————————————————— */
.ds-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (max-width: 599px) {
  .ds-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ——————————————————————————————————————————————————————————————
   §31  PRINT STYLES
   —————————————————————————————————————————————————————————————— */
@media print {
  .ds-drawer,
  .ds-fab,
  .ds-fab-group,
  .ds-overlay,
  .ds-bottom-sheet,
  .ds-toast-container,
  .ds-theme-toggle {
    display: none !important;
  }

  .ds-main-with-drawer {
    margin-left: 0 !important;
  }

  .ds-glass,
  .ds-glass-strong,
  .ds-glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: white !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END OF DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════ */