/*
 * StudyPlan Design System v2.1
 * Inspirado em Apple HIG (iOS 18)
 *
 * ARCHITECTURE:
 *   1. Tokens (--ds-*)
 *   2. Dark Mode
 *   3. Reset
 *   4. Typography
 *   5. Layout
 *   6. Card & List
 *   7. Buttons
 *   8. Inputs & Toggle
 *   9. Badge / Chip
 *  10. Overlay / Sheet / Confirm
 *  11. Tab Bar (floating pill)
 *  12. Progress
 *  13. Toast
 *  14. Skeleton
 *  15. Stat Card
 *  16. Color Dot
 *  17. Empty State
 *  18. Avatar
 *  19. Utilities
 *  20. Animations
 *  21. Icons & Icon Animations
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* --- Font stacks --- */
  --ds-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --ds-font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  /* --- Type scale (iOS HIG) --- */
  --ds-text-2xs: 10px;
  --ds-text-xs: 11px;
  --ds-text-sm: 13px;
  --ds-text-base: 16px;
  --ds-text-lg: 17px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 22px;
  --ds-text-3xl: 28px;
  --ds-text-4xl: 34px;

  /* --- Weights --- */
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* --- Line-height & tracking --- */
  --ds-leading-tight: 1.2;
  --ds-leading-normal: 1.4;
  --ds-leading-relaxed: 1.6;
  --ds-tracking-tight: -0.5px;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.5px;

  /* --- Surfaces (light) --- */
  --ds-bg-primary: #f2f2f7;
  --ds-bg-card: #ffffff;
  --ds-bg-secondary: #e5e5ea;
  --ds-bg-tertiary: #d1d1d6;
  --ds-bg-grouped: #f2f2f7;

  /* --- Fills (translucent) --- */
  --ds-fill-primary: rgba(120, 120, 128, 0.20);
  --ds-fill-secondary: rgba(120, 120, 128, 0.16);
  --ds-fill-tertiary: rgba(120, 120, 128, 0.12);
  --ds-fill-quaternary: rgba(120, 120, 128, 0.08);

  /* --- Text (light) --- */
  --ds-text-primary: #1c1c1e;
  --ds-text-secondary: #8e8e93;
  --ds-text-tertiary: #aeaeb2;
  --ds-text-quaternary: #c7c7cc;
  --ds-text-inverse: #ffffff;

  /* --- Separators --- */
  --ds-separator: rgba(60, 60, 67, 0.12);
  --ds-separator-opaque: #c6c6c8;

  /* --- System palette (iOS) --- */
  --ds-blue: #007aff;
  --ds-green: #34c759;
  --ds-orange: #ff9500;
  --ds-red: #ff3b30;
  --ds-purple: #af52de;
  --ds-pink: #ff2d55;
  --ds-cyan: #5ac8fa;
  --ds-yellow: #ffcc00;
  --ds-teal: #30b0c7;
  --ds-indigo: #5856d6;
  --ds-mint: #00c7be;
  --ds-brown: #a2845e;

  /* --- Semantic aliases --- */
  --ds-accent: var(--ds-blue);
  --ds-accent-bg: rgba(0, 122, 255, 0.12);
  --ds-success: var(--ds-green);
  --ds-danger: var(--ds-red);
  --ds-warning: var(--ds-orange);

  /* --- Spacing (4px grid, 14 steps) --- */
  --ds-space-0: 0;
  --ds-space-px: 1px;
  --ds-space-0_5: 2px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* --- Radius --- */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-xl: 26px;
  --ds-radius-full: 9999px;

  /* --- Shadows (light) --- */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ds-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
  --ds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --ds-shadow-float: 0 2px 16px rgba(0, 0, 0, 0.12);

  /* --- Motion --- */
  --ds-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ds-duration-fast: 0.15s;
  --ds-duration-normal: 0.35s; /* Slightly slower for better spring visibility */
  --ds-duration-slow: 0.5s;

  /* --- Z layers --- */
  --ds-z-base: 0;
  --ds-z-dropdown: 100;
  --ds-z-sticky: 200;
  --ds-z-overlay: 300;
  --ds-z-modal: 500;
  --ds-z-toast: 600;

  /* --- Safe areas --- */
  --ds-safe-top: env(safe-area-inset-top, 0px);
  --ds-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Layout --- */
  --ds-max-width: 430px;
  --ds-page-padding: var(--ds-space-5);

  /* --- Glass --- */
  --ds-glass-light: rgba(255, 255, 255, 0.85);
  --ds-glass-dark: rgba(28, 28, 30, 0.85);
  --ds-glass-blur: blur(20px);
}


/* ============================================================
   2. DARK MODE (single source — CSS custom prop override)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg-primary: #0a0a0c;
    --ds-bg-card: #1c1c1e;
    --ds-bg-secondary: #2c2c2e;
    --ds-bg-tertiary: #3a3a3c;
    --ds-bg-grouped: #0a0a0c;
    --ds-fill-primary: rgba(120, 120, 128, 0.36);
    --ds-fill-secondary: rgba(120, 120, 128, 0.32);
    --ds-fill-tertiary: rgba(120, 120, 128, 0.24);
    --ds-fill-quaternary: rgba(120, 120, 128, 0.18);
    --ds-text-primary: #f5f5f7;
    --ds-text-secondary: #8e8e93;
    --ds-text-tertiary: #636366;
    --ds-text-quaternary: #48484a;
    --ds-separator: rgba(84, 84, 88, 0.36);
    --ds-separator-opaque: #38383a;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ds-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    --ds-shadow-float: 0 2px 16px rgba(0, 0, 0, 0.4);
    --ds-glass-light: var(--ds-glass-dark);
  }
}

[data-theme="dark"] {
  --ds-bg-primary: #0a0a0c;
  --ds-bg-card: #1c1c1e;
  --ds-bg-secondary: #2c2c2e;
  --ds-bg-tertiary: #3a3a3c;
  --ds-bg-grouped: #0a0a0c;
  --ds-fill-primary: rgba(120, 120, 128, 0.36);
  --ds-fill-secondary: rgba(120, 120, 128, 0.32);
  --ds-fill-tertiary: rgba(120, 120, 128, 0.24);
  --ds-fill-quaternary: rgba(120, 120, 128, 0.18);
  --ds-text-primary: #f5f5f7;
  --ds-text-secondary: #8e8e93;
  --ds-text-tertiary: #636366;
  --ds-text-quaternary: #48484a;
  --ds-separator: rgba(84, 84, 88, 0.36);
  --ds-separator-opaque: #38383a;
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
  --ds-shadow-float: 0 2px 16px rgba(0, 0, 0, 0.4);
  --ds-glass-light: var(--ds-glass-dark);
}


/* ============================================================
   3. RESET
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: var(--ds-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 0; height: 0; }


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

.ds-title-large {
  font-size: var(--ds-text-4xl);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-tight);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text-primary);
}

.ds-title {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text-primary);
}

.ds-headline {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-primary);
}

.ds-body {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-primary);
}

.ds-callout {
  font-size: var(--ds-text-base);
  color: var(--ds-text-secondary);
}

.ds-subheadline {
  font-size: 15px;
  color: var(--ds-text-secondary);
}

.ds-footnote {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
}

.ds-caption {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
}

.ds-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
}


/* ============================================================
   5. LAYOUT
   ============================================================ */

.ds-page {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 0 var(--ds-page-padding);
}

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

.ds-divider {
  height: 0.5px;
  background: var(--ds-separator);
}


/* ============================================================
   6. CARD & LIST
   ============================================================ */

.ds-card {
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
}

.ds-card-grouped {
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.ds-list {
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.ds-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-3) var(--ds-space-4);
  min-height: 44px;
  font-size: var(--ds-text-base);
  color: var(--ds-text-primary);
}

.ds-list-item + .ds-list-item {
  border-top: 0.5px solid var(--ds-separator);
}

.ds-list-item-label { flex: 1; }
.ds-list-item-value { color: var(--ds-text-secondary); }


/* ============================================================
   7. BUTTONS
   ============================================================ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.15s ease,
              box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.ds-btn:active {
  transform: scale3d(0.95, 0.95, 1);
  opacity: 0.85;
  transition: transform 0.08s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.08s ease;
}

.ds-btn-filled {
  background: var(--ds-accent);
  color: var(--ds-text-inverse);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.ds-btn-filled:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.ds-btn-tinted {
  background: var(--ds-accent-bg);
  color: var(--ds-accent);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
}
.ds-btn-tinted:active {
  background: color-mix(in srgb, var(--ds-accent-bg) 80%, var(--ds-accent) 20%);
}

.ds-btn-plain {
  background: none;
  color: var(--ds-accent);
  padding: var(--ds-space-2);
}

.ds-btn-danger {
  background: none;
  color: var(--ds-danger);
  padding: var(--ds-space-3) var(--ds-space-5);
}

.ds-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent);
  color: var(--ds-text-inverse);
}

.ds-btn-icon-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent);
  color: var(--ds-text-inverse);
}

.ds-btn-icon-ghost {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-text-secondary);
}
.ds-btn-icon-ghost:hover { background: var(--ds-fill-quaternary); }

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


/* ============================================================
   8. INPUTS & TOGGLE
   ============================================================ */

.ds-input {
  width: 100%;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: none;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-card);
  font-size: var(--ds-text-base);
  font-family: var(--ds-font);
  color: var(--ds-text-primary);
  outline: none;
  transition: box-shadow var(--ds-duration-fast);
}
.ds-input:focus { box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25); }
.ds-input::placeholder { color: var(--ds-text-quaternary); }

.ds-select {
  appearance: none;
  border: none;
  background: var(--ds-fill-quaternary);
  padding: 6px 28px 6px 12px;
  border-radius: var(--ds-radius-sm);
  font-size: 14px;
  font-weight: var(--ds-weight-semibold);
  font-family: var(--ds-font);
  color: var(--ds-accent);
  cursor: pointer;
  outline: none;
  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='%23007aff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  transition: background-color var(--ds-duration-fast);
  min-height: 34px;
}
.ds-select:focus {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
.ds-select:active {
  background-color: var(--ds-fill-tertiary);
}

/* Time input (standalone, outside time-capsule) */
.ds-input[type="time"],
.ds-input[type="date"] {
  appearance: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-weight-semibold);
  text-align: center;
  letter-spacing: 0.5px;
}
.ds-input[type="time"]::-webkit-calendar-picker-indicator,
.ds-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  filter: var(--ds-icon-filter, none);
}

/* iOS Toggle Switch */
.ds-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.ds-toggle input { display: none; }
.ds-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--ds-fill-primary);
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  transition: background var(--ds-duration-normal);
}
.ds-toggle-track::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--ds-duration-normal) var(--ds-ease-spring);
  box-shadow: var(--ds-shadow-sm);
}
.ds-toggle input:checked + .ds-toggle-track { background: var(--ds-success); }
.ds-toggle input:checked + .ds-toggle-track::after { transform: translateX(20px); }


/* ============================================================
   9. BADGE / CHIP
   ============================================================ */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px 8px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  background: var(--ds-accent-bg);
  color: var(--ds-accent);
}

.ds-badge-success { background: rgba(52, 199, 89, 0.12); color: var(--ds-success); }
.ds-badge-danger  { background: rgba(255, 59, 48, 0.12); color: var(--ds-danger); }
.ds-badge-warning { background: rgba(255, 149, 0, 0.12); color: var(--ds-warning); }

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  background: var(--ds-fill-tertiary);
  color: var(--ds-text-primary);
  border: none;
  cursor: pointer;
  transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}
.ds-chip.active { background: var(--ds-accent); color: var(--ds-text-inverse); }
.ds-chip:active { transform: scale3d(0.94, 0.94, 1); transition: transform 0.08s cubic-bezier(0.32, 0.72, 0, 1); }


/* ============================================================
   10. OVERLAY / SHEET / CONFIRM
   ============================================================ */

.ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--ds-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ds-fadeIn var(--ds-duration-fast) var(--ds-ease-default);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

.ds-overlay--center { align-items: center; }

.ds-sheet {
  background: var(--ds-bg-grouped);
  width: 100%;
  max-width: 600px;
  border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: height;
  /* height is controlled by JS via DS.sheet */
}

.ds-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 0.5px solid var(--ds-separator);
  flex-shrink: 0;
}

.ds-sheet-body {
  padding: var(--ds-space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  touch-action: pan-y;
  /* Scroll fade hint at bottom */
  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
}

.ds-sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill-tertiary);
  margin: 0 auto;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}

.ds-sheet-handle:active { cursor: grabbing; }

.ds-sheet-handle-area {
  padding: var(--ds-space-3) 0 var(--ds-space-1);
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Confirm dialog (centered) */
.ds-confirm {
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
  max-width: 300px;
  width: calc(100% - 48px);
  overflow: hidden;
  animation: ds-scaleIn 0.2s var(--ds-ease-spring);
}

.ds-confirm-body {
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  text-align: center;
}

.ds-confirm-title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  margin-bottom: var(--ds-space-1);
}

.ds-confirm-message {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  line-height: var(--ds-leading-normal);
}

.ds-confirm-actions {
  display: flex;
  border-top: 0.5px solid var(--ds-separator);
}

.ds-confirm-btn {
  flex: 1;
  padding: var(--ds-space-3);
  border: none;
  background: none;
  font-size: var(--ds-text-base);
  font-family: var(--ds-font);
  cursor: pointer;
}

.ds-confirm-btn + .ds-confirm-btn {
  border-left: 0.5px solid var(--ds-separator);
}

.ds-confirm-btn--cancel { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); }
.ds-confirm-btn--danger { color: var(--ds-danger); }
.ds-confirm-btn--primary { color: var(--ds-accent); font-weight: var(--ds-weight-bold); }


/* ============================================================
   11. TAB BAR (floating pill)
   ============================================================ */

.ds-tabbar {
  position: fixed;
  bottom: var(--ds-space-2);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 500px;
  display: flex;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-2) var(--ds-space-1) calc(var(--ds-space-2) + var(--ds-safe-bottom));
  z-index: var(--ds-z-sticky);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  background: var(--ds-glass-light);
  box-shadow: var(--ds-shadow-float);
}

.ds-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ds-space-1);
  border: none;
  background: none;
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-2xs);
  font-family: var(--ds-font);
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.ds-tab.active { color: var(--ds-accent); }
.ds-tab svg {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-tab.active svg {
  transform: scale(1.1);
}


/* ============================================================
   12. PROGRESS
   ============================================================ */

.ds-progress {
  width: 100%;
  height: 6px;
  background: var(--ds-fill-tertiary);
  border-radius: var(--ds-radius-full);
  overflow: hidden;
}

.ds-progress-fill {
  height: 100%;
  background: var(--ds-accent);
  border-radius: var(--ds-radius-full);
  transition: width var(--ds-duration-slow) var(--ds-ease-spring);
}

.ds-progress--sm { height: 4px; }
.ds-progress--lg { height: 8px; }


/* ============================================================
   13. TOAST
   ============================================================ */

.ds-toast-container {
  position: fixed;
  top: calc(var(--ds-safe-top) + var(--ds-space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ds-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 400px;
}

.ds-toast {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-lg);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  pointer-events: auto;
  animation: ds-slideDown var(--ds-duration-normal) var(--ds-ease-spring);
}

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

.ds-toast-icon { flex-shrink: 0; width: 20px; height: 20px; }
.ds-toast-text { flex: 1; }

.ds-toast-exit {
  animation: ds-fadeOut var(--ds-duration-fast) var(--ds-ease-default) forwards;
}


/* ============================================================
   14. SKELETON
   ============================================================ */

.ds-skeleton {
  background: var(--ds-fill-tertiary);
  border-radius: var(--ds-radius-sm);
  animation: ds-pulse 1.5s var(--ds-ease-default) infinite;
}

.ds-skeleton-text {
  height: 14px;
  border-radius: var(--ds-radius-xs);
  margin-bottom: var(--ds-space-2);
}
.ds-skeleton-text:last-child { width: 60%; }

.ds-skeleton-circle {
  border-radius: var(--ds-radius-full);
}

.ds-skeleton-card {
  height: 80px;
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-2);
}


/* ============================================================
   15. STAT CARD
   ============================================================ */

.ds-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: center;
}

.ds-stat-value {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text-primary);
  line-height: 1;
}

.ds-stat-label {
  font-size: var(--ds-text-2xs);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  margin-top: var(--ds-space-1);
}

.ds-stat-row {
  display: flex;
  background: var(--ds-bg-card);
  border-radius: var(--ds-radius-md);
}
.ds-stat-row > .ds-stat { flex: 1; }
.ds-stat-row > .ds-stat + .ds-stat {
  border-left: 0.5px solid var(--ds-separator);
}


/* ============================================================
   16. COLOR DOT
   ============================================================ */

.ds-dot    { width: 12px; height: 12px; border-radius: var(--ds-radius-full); flex-shrink: 0; }
.ds-dot-sm { width: 8px;  height: 8px;  border-radius: var(--ds-radius-full); }
.ds-dot-lg { width: 16px; height: 16px; border-radius: var(--ds-radius-full); }


/* ============================================================
   17. EMPTY STATE
   ============================================================ */

.ds-empty {
  text-align: center;
  padding: var(--ds-space-16) var(--ds-space-5);
}

.ds-empty-icon {
  color: var(--ds-text-tertiary);
  margin-bottom: var(--ds-space-4);
}

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

.ds-empty-text {
  font-size: 14px;
  color: var(--ds-text-secondary);
}


/* ============================================================
   18. AVATAR
   ============================================================ */

.ds-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-inverse);
  overflow: hidden;
  flex-shrink: 0;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar-sm { width: 28px; height: 28px; font-size: var(--ds-text-xs); }
.ds-avatar-lg { width: 56px; height: 56px; font-size: var(--ds-text-xl); }


/* ============================================================
   19. UTILITIES
   ============================================================ */

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

/* Spacing */
.ds-p-3  { padding: var(--ds-space-3); }
.ds-p-4  { padding: var(--ds-space-4); }
.ds-p-5  { padding: var(--ds-space-5); }
.ds-px-4 { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
.ds-px-5 { padding-left: var(--ds-space-5); padding-right: var(--ds-space-5); }
.ds-py-3 { padding-top: var(--ds-space-3); padding-bottom: var(--ds-space-3); }
.ds-mb-1 { margin-bottom: var(--ds-space-1); }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-4 { margin-top: var(--ds-space-4); }

/* Text */
.ds-text-center  { text-align: center; }
.ds-text-accent  { color: var(--ds-accent); }
.ds-text-muted   { color: var(--ds-text-secondary); }
.ds-text-danger  { color: var(--ds-danger); }
.ds-text-success { color: var(--ds-success); }
.ds-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Borders */
.ds-border-b     { border-bottom: 0.5px solid var(--ds-separator); }
.ds-rounded-md   { border-radius: var(--ds-radius-md); }
.ds-rounded-full { border-radius: var(--ds-radius-full); }

/* Visibility */
.ds-hidden  { display: none !important; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ============================================================
   20. ANIMATIONS
   ============================================================ */

@keyframes ds-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ds-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes ds-slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes ds-slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ds-scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ds-animate-fade  { animation: ds-fadeIn var(--ds-duration-fast) var(--ds-ease-default); }
.ds-animate-slide { animation: ds-slideUp var(--ds-duration-normal) var(--ds-ease-spring); }
.ds-animate-scale { animation: ds-scaleIn var(--ds-duration-normal) var(--ds-ease-spring); }
.ds-animate-pulse { animation: ds-pulse 2s var(--ds-ease-default) infinite; }


/* ============================================================
   21. ICONS & ICON ANIMATIONS
   ============================================================

   Usage:
   ------
   All icons use inline SVG with class="ds-icon" as base.
   Size variants: ds-icon--sm (16), ds-icon--md (22, default), ds-icon--lg (28)

   Animated icons use a modifier class on the <svg> element.
   Animation only plays when a parent has .active or .ds-icon-animate.

   Available animations:
     .ds-icon--spin      — continuous rotation (clocks, loaders)
     .ds-icon--spin-slow — slow rotation (settings gear)
     .ds-icon--rock      — tilt back and forth (books, notifications)
     .ds-icon--bounce    — scale bounce on enter (checkmarks, success)
     .ds-icon--shake     — horizontal shake (errors, alerts)

   Composable ray/pulse for children:
     .ds-icon-ray        — on child elements; pulses opacity in sequence
     .ds-icon-ray[data-delay="1..8"] — stagger delay (0.15s increments)

   Example:
     <svg class="ds-icon ds-icon--spin">
       <circle cx="12" cy="12" r="10"/>
       <line x1="12" y1="12" x2="12" y2="7"/>
     </svg>

     <svg class="ds-icon ds-icon--spin-slow">
       <circle cx="12" cy="12" r="3"/>
       <line class="ds-icon-ray" data-delay="1" .../>
       <line class="ds-icon-ray" data-delay="2" .../>
     </svg>
   ============================================================ */

/* --- Base icon --- */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px; height: 22px;
  vertical-align: middle;
}

/* Size variants */
.ds-icon--sm  { width: 16px; height: 16px; }
.ds-icon--md  { width: 22px; height: 22px; }
.ds-icon--lg  { width: 28px; height: 28px; }
.ds-icon--xl  { width: 36px; height: 36px; }

/* Color variants */
.ds-icon--accent  { color: var(--ds-accent); }
.ds-icon--muted   { color: var(--ds-text-tertiary); }
.ds-icon--danger  { color: var(--ds-danger); }
.ds-icon--success { color: var(--ds-success); }

/* --- Animation: Spin (continuous) --- */
@keyframes ds-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.active .ds-icon--spin,
.ds-icon-animate .ds-icon--spin {
  animation: ds-icon-spin 2s linear infinite;
}

/* --- Animation: Spin Slow (gears, settings) --- */
.active .ds-icon--spin-slow,
.ds-icon-animate .ds-icon--spin-slow {
  animation: ds-icon-spin 4s linear infinite;
}

/* --- Animation: Rock (tilt, books) --- */
@keyframes ds-icon-rock {
  0%   { transform: skewY(0deg); }
  100% { transform: skewY(-8deg); }
}
.active .ds-icon--rock,
.ds-icon-animate .ds-icon--rock {
  animation: ds-icon-rock 1.2s ease-in-out infinite alternate;
  transform-origin: left center;
}

/* --- Animation: Bounce (success, checkmarks) --- */
@keyframes ds-icon-bounce {
  0%   { transform: scale(0.7); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.active .ds-icon--bounce,
.ds-icon-animate .ds-icon--bounce {
  animation: ds-icon-bounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Animation: Shake (errors, alerts) --- */
@keyframes ds-icon-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.active .ds-icon--shake,
.ds-icon-animate .ds-icon--shake {
  animation: ds-icon-shake 0.4s ease-in-out;
}

/* --- Animation: Wobble (notifications, bells) --- */
@keyframes ds-icon-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(12deg); }
  50%      { transform: rotate(-10deg); }
  75%      { transform: rotate(6deg); }
}
.active .ds-icon--wobble,
.ds-icon-animate .ds-icon--wobble {
  animation: ds-icon-wobble 0.6s ease-in-out;
  transform-origin: top center;
}

/* --- Ray pulse (child elements, staggered) --- */
@keyframes ds-icon-ray-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.active .ds-icon-ray,
.ds-icon-animate .ds-icon-ray {
  stroke-dasharray: 2 1;
  animation: ds-icon-ray-pulse 1.2s ease-in-out infinite;
}
.ds-icon-ray[data-delay="1"] { animation-delay: 0s; }
.ds-icon-ray[data-delay="2"] { animation-delay: 0.15s; }
.ds-icon-ray[data-delay="3"] { animation-delay: 0.3s; }
.ds-icon-ray[data-delay="4"] { animation-delay: 0.45s; }
.ds-icon-ray[data-delay="5"] { animation-delay: 0.6s; }
.ds-icon-ray[data-delay="6"] { animation-delay: 0.75s; }
.ds-icon-ray[data-delay="7"] { animation-delay: 0.9s; }
.ds-icon-ray[data-delay="8"] { animation-delay: 1.05s; }

/* --- GPU acceleration for all animated icons --- */
.ds-icon--spin,
.ds-icon--spin-slow,
.ds-icon--rock,
.ds-icon--bounce,
.ds-icon--shake,
.ds-icon--wobble {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================
   22. TYPE BADGES & BLOCK ICONS
   ============================================================

   Usage:
   ------
   Type badges display a small icon inside a tinted circle to
   identify block/task types (study, training, routine).

   Classes:
     .ds-type-badge          — base: 36px circle, centered flex
     .ds-type-badge--sm      — 28px variant
     .ds-type-badge--lg      — 44px variant

   The badge color is set via --block-color or --ds-accent.
   Use .ds-icon-animate on the badge or parent to trigger
   the icon animation inside.

   SVG icons inside use standard .ds-icon + animation classes.

   Example:
     <div class="ds-type-badge ds-icon-animate">
       <svg class="ds-icon ds-icon--sm ds-icon--rock" viewBox="0 0 24 24">
         ...book paths...
       </svg>
     </div>
   ============================================================ */

.ds-type-badge {
  width: 36px; height: 36px;
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, var(--block-color, var(--ds-accent)) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-type-badge--sm { width: 28px; height: 28px; }
.ds-type-badge--lg { width: 44px; height: 44px; }
.ds-type-badge .ds-icon { width: 18px; height: 18px; }
.ds-type-badge--sm .ds-icon { width: 14px; height: 14px; }
.ds-type-badge--lg .ds-icon { width: 22px; height: 22px; }