/* ============================================================
   LEZGO DESIGN SYSTEM — TOKENS + COMPONENTS
   Source: design-system-lezgo (Claude Design handoff, 2026-05)
   Adapted for Rails/Propshaft — primary orange aligned to #FF9900

   Usage principles (do NOT override these in page CSS):
   · Orange (#FF9900) is the ONLY action colour — CTAs, active
     tabs, focus rings, progress bars.
   · Surfaces are border-first: 1px hairline, not shadow.
   · Shadow only for overlays: menus, popovers, modals.
   · Buttons: flat, no shadow, 42px default height.
   · Statistics: solid ink, weight 800, tabular numerals.
   · Font: Open Sans 400/500/600/700/800.

   All DS classes are prefixed .ds- to avoid collisions with
   existing page CSS. Exception: :root tokens (globally additive).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (:root)
   ============================================================ */
:root {
  /* BRAND */
  --ds-brand-black: #111111;
  --ds-bar-red: #F01E1E;
  --ds-bar-amber: #F9A825;
  --ds-bar-blue: #1763C6;
  --ds-dot-green: #3DA53C;

  /* PRIMARY · Orange action (aligned to project's #FF9900) */
  --ds-primary-50:  #FFF6EC;
  --ds-primary-100: #FEE8CC;
  --ds-primary-200: #FBCF95;
  --ds-primary-300: #F8B05F;
  --ds-primary-400: #FFA833;
  --ds-primary-500: #FF9900;  /* CTA — project canonical orange */
  --ds-primary-600: #E08800;
  --ds-primary-700: #B86D00;
  --ds-primary-800: #8F5300;
  --ds-on-primary:  #FFFFFF;

  /* NEUTRALS · warm slate */
  --ds-ink-900: #11181F;   /* headings */
  --ds-ink-800: #1E293B;   /* body strong */
  --ds-ink-700: #334155;
  --ds-ink-600: #475569;   /* body */
  --ds-ink-500: #64748B;   /* muted */
  --ds-ink-400: #94A3B8;   /* placeholder/icon-muted */
  --ds-ink-300: #CBD5E1;   /* disabled text / control border */
  --ds-line-strong: #E2E6EC;
  --ds-line:        #E9ECF1;   /* default hairline */
  --ds-line-soft:   #F1F3F6;   /* internal separators */
  --ds-surface:        #FFFFFF;
  --ds-surface-muted:  #F7F8FA;
  --ds-surface-sunken: #F2F4F7;
  --ds-canvas:         #F5F6F8;  /* app background */

  /* SEMANTIC */
  --ds-success: #16A34A; --ds-success-700: #15803D; --ds-success-surf: #E9F8EE; --ds-success-line: #C2E9CF;
  --ds-warning: #D97706; --ds-warning-700: #B45309; --ds-warning-surf: #FEF3E2; --ds-warning-line: #F6DEB3;
  --ds-danger:  #DC2626; --ds-danger-700:  #B91C1C; --ds-danger-surf:  #FDECEC; --ds-danger-line:  #F4CECE;
  --ds-info:    #1763C6; --ds-info-700:    #134E9C; --ds-info-surf:    #E8F0FB; --ds-info-line:    #C6DBF6;
  --ds-ai:      #1763C6; --ds-ai-surf:     #E8F0FB; --ds-ai-line:      #C6DBF6;
  --ds-badge-count: #EF4444;

  /* ACHIEVEMENT (% of target) */
  --ds-ach-low:  #E0556F; --ds-ach-low-surf:  #FCE7EC;
  --ds-ach-mid:  #D97706; --ds-ach-mid-surf:  #FEF3E2;
  --ds-ach-high: #16A34A; --ds-ach-high-surf: #E9F8EE;

  /* DATA-VIZ */
  --ds-viz-1: #FF9900; --ds-viz-2: #1763C6; --ds-viz-3: #16A34A;
  --ds-viz-4: #F01E1E; --ds-viz-5: #9B7BB8;
  --ds-viz-target: #0EA5A0; --ds-viz-grid: #EEF1F4; --ds-viz-axis: #94A3B8;

  /* TYPOGRAPHY */
  --ds-font: 'Open Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-fs-display: 34px; --ds-fs-h1: 24px; --ds-fs-h2: 20px; --ds-fs-h3: 17px; --ds-fs-h4: 15px;
  --ds-fs-body: 14px; --ds-fs-sm: 13px; --ds-fs-xs: 12px; --ds-fs-over: 11px;
  --ds-lh-tight: 1.2; --ds-lh-snug: 1.35; --ds-lh-normal: 1.5;
  --ds-fw-reg: 400; --ds-fw-med: 500; --ds-fw-semi: 600; --ds-fw-bold: 700; --ds-fw-x: 800;
  --ds-track-over: .06em;

  /* SPACE · 4px base */
  --ds-s1: 4px; --ds-s2: 8px;  --ds-s3: 12px; --ds-s4: 16px;
  --ds-s5: 20px; --ds-s6: 24px; --ds-s7: 28px; --ds-s8: 32px;
  --ds-s10: 40px; --ds-s12: 48px; --ds-s16: 64px;

  /* RADIUS */
  --ds-r-xs: 6px; --ds-r-sm: 8px; --ds-r-md: 12px;
  --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-2xl: 24px; --ds-r-pill: 999px;

  /* ELEVATION · overlays only */
  --ds-sh-xs:    0 1px 2px rgba(17,24,31,.04);
  --ds-sh-pop:   0 6px 20px rgba(17,24,31,.10);
  --ds-sh-modal: 0 24px 60px rgba(17,24,31,.22);
  --ds-focus:        0 0 0 3px rgba(255,153,0,.30);
  --ds-focus-danger: 0 0 0 3px rgba(220,38,38,.25);

  /* WASH — only decorative fill */
  --ds-wash-peach:      linear-gradient(180deg, #FFF4EA 0%, rgba(255,244,234,0) 90%);
  --ds-wash-peach-soft: #FFF8F1;

  /* LAYOUT */
  --ds-sidebar: 248px; --ds-sidebar-collapsed: 74px;
  --ds-topbar: 64px; --ds-content-max: 1160px;
  --ds-dur-fast: .12s; --ds-dur: .18s;
  --ds-ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   2. SEMANTIC TYPE HELPERS  (prefixed .ds-)
   ============================================================ */
.ds-display { font: var(--ds-fw-x) var(--ds-fs-display)/var(--ds-lh-tight) var(--ds-font); color: var(--ds-ink-900); letter-spacing: -.02em; margin: 0; }
.ds-h1      { font: var(--ds-fw-bold) var(--ds-fs-h1)/var(--ds-lh-tight) var(--ds-font); color: var(--ds-ink-900); letter-spacing: -.01em; margin: 0; }
.ds-h2      { font: var(--ds-fw-bold) var(--ds-fs-h2)/var(--ds-lh-snug) var(--ds-font); color: var(--ds-ink-900); margin: 0; }
.ds-h3      { font: var(--ds-fw-semi) var(--ds-fs-h3)/var(--ds-lh-snug) var(--ds-font); color: var(--ds-ink-900); margin: 0; }
.ds-h4      { font: var(--ds-fw-semi) var(--ds-fs-h4)/var(--ds-lh-snug) var(--ds-font); color: var(--ds-ink-900); margin: 0; }
.ds-body    { font: var(--ds-fw-reg) var(--ds-fs-body)/var(--ds-lh-normal) var(--ds-font); color: var(--ds-ink-600); }
.ds-sm      { font: var(--ds-fw-reg) var(--ds-fs-sm)/var(--ds-lh-normal) var(--ds-font); color: var(--ds-ink-500); }
.ds-over    { font: var(--ds-fw-semi) var(--ds-fs-over)/1 var(--ds-font); letter-spacing: var(--ds-track-over); text-transform: uppercase; color: var(--ds-ink-400); }
/* Statistics — solid ink, tabular, no gradient */
.ds-figure  { font-family: var(--ds-font); font-weight: var(--ds-fw-x); line-height: 1; color: var(--ds-ink-900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ============================================================
   3. BUTTONS  (flat, no shadow)
   ============================================================ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-s2); height: 42px; padding: 0 var(--ds-s5);
  border-radius: var(--ds-r-pill); font-weight: var(--ds-fw-semi);
  font-size: var(--ds-fs-body); font-family: var(--ds-font);
  line-height: 1; white-space: nowrap; border: none; cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease),
              color var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease);
  text-decoration: none;
}
.ds-btn svg { flex: 0 0 auto; }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-btn-sm  { height: 34px; padding: 0 var(--ds-s4); font-size: var(--ds-fs-sm); }
.ds-btn-lg  { height: 48px; padding: 0 var(--ds-s6); font-size: var(--ds-fs-h4); }
.ds-btn-block { width: 100%; }

.ds-btn-primary   { background: var(--ds-primary-500); color: var(--ds-on-primary); }
.ds-btn-primary:hover   { background: var(--ds-primary-600); }
.ds-btn-primary:active  { background: var(--ds-primary-700); }
.ds-btn-primary:disabled { background: var(--ds-primary-200); color: #fff; cursor: not-allowed; }

.ds-btn-secondary { background: var(--ds-surface); color: var(--ds-ink-700); border: 1px solid var(--ds-line-strong); }
.ds-btn-secondary:hover  { background: var(--ds-surface-muted); border-color: var(--ds-ink-300); }
.ds-btn-secondary:active { background: var(--ds-surface-sunken); }

.ds-btn-ghost { color: var(--ds-ink-600); background: transparent; }
.ds-btn-ghost:hover { background: var(--ds-surface-muted); color: var(--ds-ink-800); }

.ds-btn-danger { background: var(--ds-danger); color: #fff; }
.ds-btn-danger:hover { background: var(--ds-danger-700); }
.ds-btn-danger:focus-visible { box-shadow: var(--ds-focus-danger); }

.ds-btn-danger-soft { background: var(--ds-danger-surf); color: var(--ds-danger); }
.ds-btn-danger-soft:hover { background: #FADADA; }

.ds-btn-link { color: var(--ds-primary-600); font-weight: var(--ds-fw-semi); padding: 0; height: auto; background: transparent; }
.ds-btn-link:hover { color: var(--ds-primary-700); text-decoration: underline; }

.ds-icon-btn {
  width: 40px; height: 40px; border-radius: var(--ds-r-pill);
  display: grid; place-items: center; color: var(--ds-ink-500);
  transition: background var(--ds-dur); background: transparent; border: none; cursor: pointer;
}
.ds-icon-btn:hover { background: var(--ds-surface-muted); color: var(--ds-ink-800); }
.ds-icon-btn.sm { width: 32px; height: 32px; }

/* ============================================================
   4. FORM CONTROLS
   ============================================================ */
.ds-field { margin-bottom: var(--ds-s4); }
.ds-label {
  display: block; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-med);
  color: var(--ds-ink-700); margin-bottom: 6px; font-family: var(--ds-font);
}
.ds-label .req { color: var(--ds-danger); }

.ds-input, .ds-select, .ds-textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border-radius: var(--ds-r-sm); background: var(--ds-surface);
  border: 1px solid var(--ds-line-strong); font-family: var(--ds-font);
  font-size: var(--ds-fs-body); color: var(--ds-ink-900);
  transition: border-color var(--ds-dur), box-shadow var(--ds-dur);
}
.ds-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--ds-lh-normal); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-ink-400); }
.ds-input:hover,  .ds-select:hover,  .ds-textarea:hover  { border-color: var(--ds-ink-300); }
.ds-input:focus,  .ds-select:focus,  .ds-textarea:focus  { outline: none; border-color: var(--ds-primary-500); box-shadow: var(--ds-focus); }
.ds-input:disabled, .ds-textarea:disabled { background: var(--ds-surface-sunken); color: var(--ds-ink-400); cursor: not-allowed; }
.ds-input.is-error, .ds-textarea.is-error, .ds-select.is-error { border-color: var(--ds-danger); }
.ds-input.is-error:focus { box-shadow: var(--ds-focus-danger); }

.ds-help { font-size: var(--ds-fs-xs); color: var(--ds-ink-500); margin-top: 6px; font-family: var(--ds-font); }
.ds-help.is-error { color: var(--ds-danger); }

/* Progress */
.ds-progress { height: 8px; border-radius: var(--ds-r-pill); background: var(--ds-line); overflow: hidden; }
.ds-progress-bar { height: 100%; border-radius: var(--ds-r-pill); background: var(--ds-primary-500); }
.ds-progress-bar.green { background: var(--ds-success); }

/* ============================================================
   4b. TOGGLE / CHECKBOX / RADIO
   ============================================================ */
.ds-toggle {
  display: inline-block;
  width: 42px; height: 24px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-ink-300);
  position: relative;
  transition: background var(--ds-dur);
  flex: 0 0 auto;
  cursor: pointer;
}
.ds-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left var(--ds-dur) var(--ds-ease);
}
.ds-toggle.on { background: var(--ds-primary-500); }
.ds-toggle.on::after { left: 21px; }

.ds-cb {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--ds-ink-300);
  background: var(--ds-surface);
  display: grid; place-items: center;
  flex: 0 0 auto; cursor: pointer;
  transition: .12s;
}
.ds-cb.on {
  background: var(--ds-primary-500);
  border-color: var(--ds-primary-500);
  color: #fff;
}

/* ============================================================
   5. BADGES · PILLS · CHIPS
   ============================================================ */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  white-space: nowrap; font-family: var(--ds-font);
}
.ds-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-pill-success { background: var(--ds-success-surf); color: var(--ds-success-700); }
.ds-pill-warning { background: var(--ds-warning-surf); color: var(--ds-warning-700); }
.ds-pill-danger  { background: var(--ds-danger-surf);  color: var(--ds-danger-700); }
.ds-pill-info    { background: var(--ds-info-surf);    color: var(--ds-info-700); }
.ds-pill-neutral { background: var(--ds-surface-sunken); color: var(--ds-ink-500); }
.ds-pill-primary { background: var(--ds-primary-50);  color: var(--ds-primary-700); }
.ds-pill-ai      { background: var(--ds-ai-surf);     color: var(--ds-ai); }

.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-med);
  color: var(--ds-ink-600); border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface); font-family: var(--ds-font);
}
.ds-chip.is-active { background: var(--ds-primary-50); color: var(--ds-primary-700); border-color: var(--ds-primary-200); }

.ds-count-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--ds-r-pill); background: var(--ds-badge-count); color: #fff;
  font-size: var(--ds-fs-over); font-weight: var(--ds-fw-bold);
  display: inline-grid; place-items: center; font-family: var(--ds-font);
}

/* ============================================================
   6. AVATARS
   ============================================================ */
.ds-av {
  border-radius: 50%; display: grid; place-items: center;
  font-weight: var(--ds-fw-bold); color: #fff;
  flex: 0 0 auto; overflow: hidden; font-family: var(--ds-font);
}
.ds-av-xs { width: 26px; height: 26px; font-size: 10px; }
.ds-av-sm { width: 32px; height: 32px; font-size: 12px; }
.ds-av-md { width: 40px; height: 40px; font-size: 14px; }
.ds-av-lg { width: 64px; height: 64px; font-size: 22px; }
.ds-av.a  { background: #E08A4F; } .ds-av.b { background: #9B7BB8; }
.ds-av.c  { background: #5B9BD5; } .ds-av.d { background: #5BA86A; }
.ds-av.e  { background: #D98AA0; }

/* ============================================================
   7. ICON TILES  (.ds-itile)
   ============================================================ */
.ds-itile { width: 40px; height: 40px; border-radius: var(--ds-r-md); display: grid; place-items: center; flex: 0 0 auto; }
.ds-itile.lg { width: 48px; height: 48px; }
.ds-itile-ok   { background: var(--ds-success-surf); color: var(--ds-success); }
.ds-itile-warn { background: var(--ds-warning-surf); color: var(--ds-warning); }
.ds-itile-info { background: var(--ds-info-surf);    color: var(--ds-info); }
.ds-itile-pri  { background: var(--ds-primary-50);   color: var(--ds-primary-600); }
.ds-itile-ai   { background: var(--ds-ai-surf);      color: var(--ds-ai); }
.ds-itile-muted{ background: var(--ds-surface-sunken); color: var(--ds-ink-500); }

/* ============================================================
   8. CARDS  (border-first: border defines the surface)
   ============================================================ */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); padding: var(--ds-s6);
}
.ds-card.sm     { padding: var(--ds-s4); }
.ds-card.peach  { background: var(--ds-wash-peach), var(--ds-surface); }
.ds-card.sunken { background: var(--ds-surface-muted); border-color: transparent; }

.ds-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ds-s4); margin-bottom: var(--ds-s5);
}
.ds-card-title { font-size: var(--ds-fs-h3); font-weight: var(--ds-fw-bold); color: var(--ds-ink-900); font-family: var(--ds-font); }
.ds-card-sub   { color: var(--ds-ink-500); font-size: var(--ds-fs-sm); margin-top: 3px; }

/* KPI stat card */
.ds-kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-s4); }
.ds-kpi .ds-figure { font-size: 32px; }
.ds-kpi .lbl { color: var(--ds-ink-500); font-weight: var(--ds-fw-med); font-size: var(--ds-fs-body); margin-top: 6px; }

/* ============================================================
   9. CALLOUTS
   ============================================================ */
.ds-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: var(--ds-s3); padding: var(--ds-s4);
  border-radius: var(--ds-r-md); font-family: var(--ds-font);
}
.ds-callout .ct   { font-weight: var(--ds-fw-bold); margin-bottom: 2px; font-size: var(--ds-fs-sm); }
.ds-callout .text { font-size: var(--ds-fs-sm); line-height: var(--ds-lh-snug); }
.ds-callout-neutral { background: var(--ds-surface-muted); color: var(--ds-ink-600); }
.ds-callout-neutral .ct { color: var(--ds-ink-800); }
.ds-callout-info    { background: var(--ds-info-surf);    color: var(--ds-info-700); }
.ds-callout-warning { background: var(--ds-warning-surf); color: var(--ds-warning-700); }
.ds-callout-danger  { background: var(--ds-danger-surf);  color: var(--ds-danger-700); }
.ds-callout-success { background: var(--ds-success-surf); color: var(--ds-success-700); }
.ds-callout-ai      { background: var(--ds-ai-surf);      color: var(--ds-ai); }

/* ============================================================
   10. TABS · STEPPERS
   ============================================================ */
.ds-tabs { display: flex; gap: var(--ds-s6); border-bottom: 1px solid var(--ds-line); }
.ds-tab  {
  padding: 0 0 13px; color: var(--ds-ink-500); font-weight: var(--ds-fw-med);
  font-size: var(--ds-fs-body); font-family: var(--ds-font);
  position: relative; display: flex; align-items: center; gap: 7px;
  cursor: pointer; margin-bottom: -1px; background: transparent; border: none;
  text-decoration: none;
}
.ds-tab:hover { color: var(--ds-ink-800); }
.ds-tab.active { color: var(--ds-ink-900); font-weight: var(--ds-fw-bold); }
.ds-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5px; border-radius: 2px; background: var(--ds-primary-500);
}

/* Segmented pill selector */
.ds-seg { display: inline-flex; background: var(--ds-surface-sunken); border-radius: var(--ds-r-pill); padding: 4px; gap: 2px; }
.ds-seg button {
  height: 34px; padding: 0 16px; border-radius: var(--ds-r-pill);
  font-weight: var(--ds-fw-semi); font-size: var(--ds-fs-sm);
  color: var(--ds-ink-500); background: transparent; border: none;
  font-family: var(--ds-font); cursor: pointer; transition: .12s;
}
.ds-seg button.active { background: var(--ds-primary-500); color: #fff; }

/* Steppers */
.ds-stepper { display: flex; align-items: center; }
.ds-step { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ds-step .num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm);
  background: var(--ds-surface); border: 1.5px solid var(--ds-line-strong); color: var(--ds-ink-400);
  font-family: var(--ds-font);
}
.ds-step.active .num { background: var(--ds-primary-500); color: #fff; border-color: var(--ds-primary-500); }
.ds-step.done   .num { background: var(--ds-success);     color: #fff; border-color: var(--ds-success); }
.ds-step .lbl { font-size: var(--ds-fs-xs); color: var(--ds-ink-500); font-weight: var(--ds-fw-semi); }
.ds-step.active .lbl { color: var(--ds-primary-600); }
.ds-step.done   .lbl { color: var(--ds-ink-700); }
.ds-step-line { flex: 1; height: 1.5px; background: var(--ds-line-strong); margin: 0 8px; margin-bottom: 24px; }
.ds-step-line.done { background: var(--ds-success); }

/* ============================================================
   11. EMPTY STATE
   ============================================================ */
.ds-empty { text-align: center; padding: var(--ds-s8) var(--ds-s6); font-family: var(--ds-font); }
.ds-empty-ic {
  width: 56px; height: 56px; border-radius: var(--ds-r-lg);
  background: var(--ds-surface-sunken); color: var(--ds-ink-400);
  display: grid; place-items: center; margin: 0 auto var(--ds-s4);
}
.ds-empty h4 { font-size: var(--ds-fs-h4); color: var(--ds-ink-900); margin: 0 0 4px; }
.ds-empty p  { font-size: var(--ds-fs-sm); color: var(--ds-ink-500); margin: 0 auto var(--ds-s5); max-width: 42ch; }

/* ============================================================
   12. SKELETON / SPINNER
   ============================================================ */
@keyframes ds-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-surface-sunken) 25%, #EDF0F4 37%, var(--ds-surface-sunken) 63%);
  background-size: 800px 100%; animation: ds-shimmer 1.4s infinite linear; border-radius: var(--ds-r-sm);
}
.ds-skeleton.line   { height: 12px; margin-bottom: 8px; }
.ds-skeleton.circle { border-radius: 50%; }

@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--ds-line-strong); border-top-color: var(--ds-primary-500);
  animation: ds-spin .7s linear infinite;
}
.ds-spinner.lg { width: 40px; height: 40px; border-width: 3.5px; }

/* ============================================================
   13. MENU · TOAST  (overlays)
   ============================================================ */
.ds-menu {
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-sh-pop);
  padding: 6px; min-width: 170px; font-family: var(--ds-font);
}
.ds-menu-item {
  display: flex; align-items: center; gap: var(--ds-s3);
  padding: 9px 10px; border-radius: var(--ds-r-sm);
  font-size: var(--ds-fs-sm); color: var(--ds-ink-700);
  font-weight: var(--ds-fw-med); cursor: pointer;
}
.ds-menu-item:hover  { background: var(--ds-surface-muted); }
.ds-menu-item svg    { color: var(--ds-ink-400); }
.ds-menu-item.danger { color: var(--ds-danger); }
.ds-menu-item.danger svg { color: var(--ds-danger); }
.ds-menu-sep { height: 1px; background: var(--ds-line-soft); margin: 5px 0; }

.ds-toast {
  display: flex; align-items: center; gap: var(--ds-s3);
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-sh-pop);
  padding: 13px 15px; min-width: 300px; font-family: var(--ds-font);
}

/* ============================================================
   14. LAYOUT UTILITIES  (ds- prefixed)
   ============================================================ */
.ds-row  { display: flex; }
.ds-col  { display: flex; flex-direction: column; }
.ds-ac   { align-items: center; }
.ds-jb   { justify-content: space-between; }
.ds-jc   { justify-content: center; }
.ds-flex1{ flex: 1; min-width: 0; }
.ds-wrap { flex-wrap: wrap; }
.ds-g2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-s5); }
.ds-g3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-s5); }
.ds-g4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-s5); }
.ds-gap2 { gap: var(--ds-s2); } .ds-gap3 { gap: var(--ds-s3); }
.ds-gap4 { gap: var(--ds-s4); } .ds-gap5 { gap: var(--ds-s5); }
.ds-divider { height: 1px; background: var(--ds-line); margin: var(--ds-s5) 0; }
.ds-muted   { color: var(--ds-ink-500); }
.ds-strong  { color: var(--ds-ink-900); font-weight: var(--ds-fw-semi); }
.ds-spark   { color: var(--ds-ai); } /* sparkle = AI marker */

@media (max-width: 980px) {
  .ds-g2, .ds-g3, .ds-g4 { grid-template-columns: 1fr; }
}