/* ========================================================================== 
     Reset & Variables — global reset, tokens, and reusable motion/layer values 
     ========================================================================== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #0f0f0f; --surface: #1a1a1a; --surface2: #222222;
    --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14);
    --text: #f0f0f0; --muted: #aaaaaa; --accent: #FFC000; --accent2: #00A388; --req-id: #88a7b7;
    --font: 'DM Sans', sans-serif; --serif: 'DM Serif Display', serif; --accent-error: #e24b4a;
    --panel-bg: var(--surface); --control-bg: var(--surface2); --overlay-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--surface);
    --panel-subtle: rgba(255,255,255,0.025); --panel-subtle-strong: rgba(255,255,255,0.035); --panel-hover-soft: rgba(255,255,255,0.04);
    --selected-bg: rgba(255,192,0,0.08); --selected-bg-strong: rgba(255,192,0,0.12); --positive-bg: rgba(0,163,136,0.05); --positive-border: rgba(0,163,136,0.35);
    --danger-bg: rgba(226,75,74,0.07); --anim-fast: 0.15s; --anim-medium: 0.3s; --anim-panel: 0.35s; --anim-fade: 0.22s;
    --z-inline-action: 1; --z-test-panel: 500;

    --fs-xxs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-body-sm: 13px; --fs-sm: 14px; --fs-body-md: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px;
    --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-4-5: 20px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
    --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-2sm: 14px; --radius-xl: 16px; --radius-pill: 999px;
    --text-subtle: #8f9ba2; --text-faint: #909090; --text-supporting: #666666;

    --btn-l-font: var(--fs-sm); --btn-l-pad-y: var(--space-3); --btn-l-pad-x: var(--space-5);
    --btn-m-font: var(--fs-sm); --btn-m-pad-y: 10px; --btn-m-pad-x: 18px;
    --btn-s-font: var(--fs-xs); --btn-s-pad-y: 6px; --btn-s-pad-x: var(--space-3);
  }
  /* ========================================================================== 
     Typography — base text styling and global body defaults 
     ========================================================================== */

  body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-sm); line-height: 1.6; min-height: 100vh; }
  body.modal-open { overflow: hidden; }

  /* ========================================================================== 
     Design-system utilities — shared state, text, and compact layout primitives 
     ========================================================================== */
  .u-hidden, .is-hidden { display: none !important; }
  .is-disabled-soft { opacity: 1; pointer-events: none; }
  .u-mt-0-5 { margin-top: var(--space-0-5) !important; }
  .u-mt-1 { margin-top: var(--space-1) !important; }
  .u-mt-1-5 { margin-top: var(--space-1-5) !important; }
  .u-mt-2 { margin-top: var(--space-2) !important; }
  .u-mt-2-5 { margin-top: var(--space-2-5) !important; }
  .u-mb-1-5 { margin-bottom: var(--space-1-5) !important; }
  .u-mb-2 { margin-bottom: var(--space-2) !important; }
  .u-mb-2-5 { margin-bottom: var(--space-2-5) !important; }
  .u-mb-4-5 { margin-bottom: var(--space-4-5) !important; }
  .ds-meta-text, .ds-helper-text, .ds-empty-state { color: var(--muted); line-height: 1.6; }
  .ds-meta-text { font-size: var(--fs-xs); }
  .ds-helper-text, .ds-empty-state { font-size: var(--fs-body-sm); }
  .ds-supporting-label { display: block; margin-bottom: var(--space-1-5); }
  .ds-micro-label { font-size: var(--fs-xxs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
  .ds-inline-row, .ds-inline-row-compact, .ds-split-row { display: flex; align-items: center; }
  .ds-inline-row { gap: var(--space-2); }
  .ds-inline-row-compact { gap: var(--space-1-5); }
  .ds-split-row { justify-content: space-between; gap: var(--space-3); }
  .ds-card-strip { background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-2sm); overflow: hidden; }
  .ds-card-strip--3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
  .ds-total-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); background: var(--surface2); border-radius: var(--radius-sm); }
  .ds-pill-link, .ds-status-badge, .ds-note-badge { display: inline-flex; align-items: center; border-radius: var(--radius-pill); }
  .ds-pill-link { font-size: var(--fs-2xs); color: var(--muted); text-decoration: none; border: 1px solid var(--border2); padding: var(--space-0-5) var(--space-2); transition: color var(--anim-fast), border-color var(--anim-fast), background var(--anim-fast); }
  .ds-pill-link:hover, .ds-pill-link:focus-visible { color: var(--text); border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.04); outline: none; }
  .ds-status-badge, .ds-note-badge { padding: var(--space-1) var(--space-2); font-size: var(--fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; }
  .ds-status-badge { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #c9d2d7; }
  .ds-note-badge { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: var(--text-subtle); }

  .ds-icon-button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:none; border-radius:999px; background:transparent; color:var(--text-faint); cursor:pointer; transition:color var(--anim-fast), background var(--anim-fast), border-color var(--anim-fast), opacity var(--anim-fast); }
  .ds-icon-button:hover, .ds-icon-button:focus-visible { color:var(--text); background:rgba(255,255,255,0.06); outline:none; }
  .ds-icon-button svg { display:block; flex-shrink:0; }
  .ds-icon-button.ds-icon-button--secondary { width:40px; height:40px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:var(--text); }
  .ds-icon-button.ds-icon-button--secondary:hover,
  .ds-icon-button.ds-icon-button--secondary:focus-visible { border-color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.08); color:var(--text); }
  .ds-icon-button.ds-icon-button--secondary:disabled { opacity:0.4; cursor:not-allowed; }
  .ds-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
  .ds-scrollbar::-webkit-scrollbar-track { background: transparent; }
  .ds-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
  .ds-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
  .ds-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
  .ds-chip-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:9px 14px; border-radius:var(--radius-pill); background:var(--control-bg); border:1.5px solid var(--border2); font-size:var(--fs-xs); color:var(--muted); cursor:pointer; transition:all var(--anim-fast); }
  .ds-chip-toggle:hover, .ds-chip-toggle:focus-visible { color:var(--text); border-color:rgba(255,255,255,0.28); outline:none; }
  .ds-chip-toggle.active { color:var(--text); border-color:rgba(216,178,74,0.30); background:rgba(216,178,74,0.10); box-shadow:none; }
  .ds-choice-chip { display:inline-flex; align-items:center; background:var(--control-bg); border:1.5px solid var(--border2); border-radius:var(--radius-pill); padding:7px 16px; cursor:pointer; font-size:var(--fs-sm); color:var(--muted); transition:border-color var(--anim-fast), background var(--anim-fast), color var(--anim-fast); user-select:none; font-family:var(--font); }
  .ds-choice-chip:hover, .ds-choice-chip:focus-visible { border-color:rgba(255,255,255,0.35); color:var(--text); outline:none; }
  .ds-choice-chip.selected { border-color:rgba(216,178,74,0.30); background:rgba(216,178,74,0.10); color:var(--text); font-weight:500; }
  .ds-status-pill { display:inline-flex; align-items:center; gap:var(--space-1-5); padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#cfd6da; font-size:var(--fs-xxs); line-height:1.2; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
  .ds-status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:#777; flex-shrink:0; }
  .ds-status-pill.is-boundary { border-color:rgba(255,192,0,0.26); background:rgba(255,192,0,0.08); color:#ead7a1; }
  .ds-status-pill.is-boundary::before { background:var(--accent); }
  .ds-status-pill.is-positive { border-color:rgba(0,163,136,0.28); background:rgba(0,163,136,0.1); color:#9ad1c4; }
  .ds-status-pill.is-positive::before { background:var(--accent2); }
  .ds-status-pill.is-muted::before { background:#6d757b; }
  .ds-swatch-button { width:100%; aspect-ratio:1 / 1; min-height:24px; max-height:28px; border-radius:var(--space-1-5); border:1.5px solid rgba(255,255,255,0.1); cursor:pointer; position:relative; transition:transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast); }
  .ds-swatch-button:hover, .ds-swatch-button:focus-visible { transform:translateY(-1px); border-color:rgba(255,255,255,0.32); outline:none; }
  .ds-swatch-button.selected { border-color:rgba(255,255,255,0.9); box-shadow:0 0 0 2px rgba(255,255,255,0.08), 0 0 0 4px rgba(255,192,0,0.15); }
  .ds-swatch-button::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18); }
  .ds-swatch-button.selected::before { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.95); font-size:var(--fs-2xs); font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.35); z-index:1; }