/**
 * QubitDecoded — Design system (Phase 1)
 * Primitives: --qd-*
 * Homepage legacy aliases: --p, --c1, --w, … (keep until pages migrate)
 */

/* ─── Typography scale (rem, base = 16px in UA; homepage uses html 17px) ─── */
:root {
  --qd-font-size-base: 17px;
  --qd-font-size-xs: 0.75rem;
  --qd-font-size-sm: 0.875rem;
  --qd-font-size-md: 1rem;
  --qd-font-size-lg: 1.125rem;
  --qd-font-size-xl: 1.25rem;
  --qd-font-size-2xl: 1.5rem;
  --qd-line-height-tight: 1.25;
  --qd-line-height-body: 1.72;
  --qd-font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --qd-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --qd-font-serif: "IBM Plex Serif", Georgia, serif;
}

/* ─── Spacing (8px grid; extras for fine UI) ─── */
:root {
  --qd-space-0: 0;
  --qd-space-1: 4px;
  --qd-space-2: 8px;
  --qd-space-3: 12px;
  --qd-space-4: 16px;
  --qd-space-5: 20px;
  --qd-space-6: 24px;
  --qd-space-8: 32px;
  --qd-space-10: 40px;
  --qd-space-12: 48px;
  --qd-space-16: 64px;
}

/* ─── Radius ─── */
:root {
  --qd-radius-xs: 2px;
  --qd-radius-sm: 6px;
  --qd-radius-md: 10px;
  --qd-radius-lg: 14px;
  --qd-radius-xl: 20px;
  --qd-radius-full: 9999px;
}

/* ─── Color primitives + semantic roles (dark default) ─── */
:root {
  --qd-color-bg-base: #06080f;
  --qd-color-bg-surface-1: #0c1018;
  --qd-color-bg-surface-2: #111827;
  --qd-color-bg-surface-3: #0f1623;
  --qd-color-glass: rgba(6, 8, 15, 0.86);

  --qd-color-text-primary: #e8edf5;
  --qd-color-text-secondary: #8b96a8;
  --qd-color-text-tertiary: #4b5a6e;

  --qd-color-accent-success: #10b981;
  --qd-color-accent-success-strong: #059669;
  --qd-color-accent-success-muted: rgba(16, 185, 129, 0.09);
  --qd-color-accent-success-border: rgba(16, 185, 129, 0.28);

  --qd-color-accent-cyan: #00d4c8;
  --qd-color-accent-cyan-strong: #00a89e;
  --qd-color-accent-cyan-muted: rgba(0, 212, 200, 0.08);
  --qd-color-accent-cyan-border: rgba(0, 212, 200, 0.22);

  --qd-color-accent-blue: #3b82f6;
  --qd-color-accent-violet: #a78bfa;
  --qd-color-accent-amber: #f59e0b;
  --qd-color-accent-rose: #f43f5e;

  --qd-color-border-subtle: rgba(255, 255, 255, 0.055);
  --qd-color-border-default: rgba(255, 255, 255, 0.11);

  --qd-shadow-elevated: 0 8px 60px rgba(0, 0, 0, 0.7);
  --qd-shadow-glow-success: 0 0 50px rgba(16, 185, 129, 0.32);
  --qd-shadow-control: 0 4px 20px rgba(0, 0, 0, 0.22);
  --qd-shadow-control-hover: 0 8px 28px rgba(0, 0, 0, 0.3);
  --qd-shadow-accent-blue-soft: 0 0 12px rgba(59, 130, 246, 0.25);
  --qd-shadow-accent-success-soft: 0 0 12px rgba(16, 185, 129, 0.25);

  --qd-color-on-accent-dark: #06080f;
  --qd-color-on-accent-light: #ffffff;

  --qd-layout-nav-height: 64px;
  --qd-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --qd-color-bg-base: #f4f6f9;
  --qd-color-bg-surface-1: #ffffff;
  --qd-color-bg-surface-2: #ecf0f6;
  --qd-color-bg-surface-3: #f9fafc;
  --qd-color-glass: rgba(244, 246, 249, 0.92);

  --qd-color-text-primary: #0c1117;
  --qd-color-text-secondary: #4a5568;
  --qd-color-text-tertiary: #94a3b8;

  --qd-color-accent-success: #059669;
  --qd-color-accent-success-strong: #047857;
  --qd-color-accent-success-muted: rgba(5, 150, 105, 0.08);
  --qd-color-accent-success-border: rgba(5, 150, 105, 0.24);

  --qd-color-accent-cyan: #008f88;
  --qd-color-accent-cyan-strong: #007a74;
  --qd-color-accent-cyan-muted: rgba(0, 143, 136, 0.07);
  --qd-color-accent-cyan-border: rgba(0, 143, 136, 0.22);

  --qd-color-accent-blue: #2563eb;
  --qd-color-accent-violet: #7c3aed;
  --qd-color-accent-amber: #d97706;

  --qd-color-accent-rose: #e11d48;

  --qd-color-border-subtle: rgba(0, 0, 0, 0.08);
  --qd-color-border-default: rgba(0, 0, 0, 0.14);

  --qd-shadow-elevated: 0 2px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --qd-shadow-control: 0 1px 6px rgba(0, 0, 0, 0.1);
  --qd-shadow-control-hover: 0 4px 16px rgba(0, 0, 0, 0.14);
  --qd-shadow-glow-success: 0 0 28px rgba(5, 150, 105, 0.22);
  --qd-shadow-accent-success-soft: 0 0 12px rgba(5, 150, 105, 0.18);
  --qd-shadow-accent-blue-soft: 0 0 12px rgba(37, 99, 235, 0.16);

  --qd-color-on-accent-dark: #ffffff;
  --qd-color-on-accent-light: #ffffff;
}

/* Light theme is disabled globally: hide all theme toggles. */
#themeToggle,
#theme-toggle,
.theme-toggle,
.ld-tbtn {
  display: none !important;
}

/* Brand: QD mark from img/qd-mark.svg (favicon + nav) */
.ld-logo {
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--qd-color-text-primary) 0 56%,
    var(--qd-color-accent-cyan) 56% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.ld-logo-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0;
  background: linear-gradient(145deg, #0b1020, #132647 55%, #0f3a62) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 200, 0.16), 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}

.ld-logo-box .qd-mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.nav-logo-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0;
  background: linear-gradient(145deg, #0b1020, #132647 55%, #0f3a62) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 200, 0.12), 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.nav-logo-icon .qd-mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.footer-logo-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #0b1020, #132647 55%, #0f3a62) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 200, 0.1);
}

.footer-logo-icon .qd-mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.logo-box,
.fl-sq {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #0b1020, #132647 55%, #0f3a62) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 200, 0.12);
}

.logo-box {
  width: 32px !important;
  height: 32px !important;
}

.fl-sq {
  width: 32px !important;
  height: 32px !important;
}

.logo-box .qd-mark,
.fl-sq .qd-mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.ld-footer-logo span {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--qd-color-text-primary) 0 56%,
    var(--qd-color-accent-cyan) 56% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
}

.ld-footer-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #22d3ee !important;
  background: linear-gradient(145deg, #0b1020, #132647 55%, #0f3a62) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.18);
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
}

/* ─── Homepage (index.html) legacy token aliases — do not remove until migrated ─── */
:root {
  --p: var(--qd-color-bg-base);
  --c1: var(--qd-color-bg-surface-1);
  --c2: var(--qd-color-bg-surface-2);
  --c3: var(--qd-color-bg-surface-3);
  --gl: var(--qd-color-glass);
  --w: var(--qd-color-text-primary);
  --ws: var(--qd-color-text-secondary);
  --wt: var(--qd-color-text-tertiary);
  --g: var(--qd-color-accent-success);
  --g2: var(--qd-color-accent-success-strong);
  --gfg: var(--qd-color-accent-success-muted);
  --gbd: var(--qd-color-accent-success-border);
  --cy: var(--qd-color-accent-cyan);
  --cy2: var(--qd-color-accent-cyan-strong);
  --cyfg: var(--qd-color-accent-cyan-muted);
  --cybd: var(--qd-color-accent-cyan-border);
  --bl: var(--qd-color-accent-blue);
  --vi: var(--qd-color-accent-violet);
  --am: var(--qd-color-accent-amber);
  --ro: var(--qd-color-accent-rose);
  --ln: var(--qd-color-border-subtle);
  --ln2: var(--qd-color-border-default);
  --sh: var(--qd-shadow-elevated);
  --gw: var(--qd-shadow-glow-success);
  --nh: var(--qd-layout-nav-height);
  --e: var(--qd-motion-easing-standard);
}

/* ─── Track hub / lesson shell (shared Track 1 & 2; accents t1 green + t2 blue) ─── */
:root {
  --qd-track-bg0: #06080f;
  --qd-track-bg1: #0c1018;
  --qd-track-bg2: #111827;
  --qd-track-bgc: #0f1623;
  --qd-track-bgch: #141d2e;
  --qd-track-bgg: rgba(15, 22, 35, 0.88);
  --qd-track-tp: #e8edf5;
  --qd-track-ts: #8b96a8;
  --qd-track-tt: #4a5568;
  --qd-track-body: #c5cdd9;
  --qd-track-cy: #00d4c8;
  --qd-track-cyd: #00a89e;
  --qd-track-cybg: rgba(0, 212, 200, 0.07);
  --qd-track-cybd: rgba(0, 212, 200, 0.2);
  --qd-track-bl: #3b82f6;
  --qd-track-vi: #8b5cf6;
  --qd-track-am: #f59e0b;
  --qd-track-ro: #f43f5e;
  --qd-track-em: #10b981;
  --qd-track-t1: #10b981;
  --qd-track-t1d: #059669;
  --qd-track-t1b: rgba(16, 185, 129, 0.08);
  --qd-track-t1bd: rgba(16, 185, 129, 0.22);
  --qd-track-t2: #3b82f6;
  --qd-track-t2d: #2563eb;
  --qd-track-t2b: rgba(59, 130, 246, 0.08);
  --qd-track-t2bd: rgba(59, 130, 246, 0.22);
  --qd-track-br: rgba(255, 255, 255, 0.06);
  --qd-track-brs: rgba(255, 255, 255, 0.11);
  --qd-track-sh1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --qd-track-sh2: 0 4px 20px rgba(0, 0, 0, 0.5);
  --qd-track-sh3: 0 8px 40px rgba(0, 0, 0, 0.6);
  --qd-track-nh: 64px;
  --qd-track-r1: 8px;
  --qd-track-r2: 12px;
  --qd-track-r3: 20px;
  --qd-track-tr: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --qd-track-max: 1200px;
}

[data-theme="light"] {
  --qd-track-bg0: #f0f4fa;
  --qd-track-bg1: #e8eef8;
  --qd-track-bg2: #dde6f4;
  --qd-track-bgc: #ffffff;
  --qd-track-bgch: #f8faff;
  --qd-track-bgg: rgba(255, 255, 255, 0.92);
  --qd-track-tp: #0d1117;
  --qd-track-ts: #4a5568;
  --qd-track-tt: #94a3b8;
  --qd-track-body: #2d3748;
  --qd-track-cy: #008f88;
  --qd-track-cyd: #007a74;
  --qd-track-cybg: rgba(0, 143, 136, 0.06);
  --qd-track-cybd: rgba(0, 143, 136, 0.2);
  --qd-track-bl: #2563eb;
  --qd-track-vi: #7c3aed;
  --qd-track-am: #d97706;
  --qd-track-ro: #e11d48;
  --qd-track-em: #059669;
  --qd-track-t1: #059669;
  --qd-track-t1d: #047857;
  --qd-track-t1b: rgba(5, 150, 105, 0.07);
  --qd-track-t1bd: rgba(5, 150, 105, 0.22);
  --qd-track-t2: #2563eb;
  --qd-track-t2d: #1d4ed8;
  --qd-track-t2b: rgba(37, 99, 235, 0.07);
  --qd-track-t2bd: rgba(37, 99, 235, 0.22);
  --qd-track-br: rgba(0, 0, 0, 0.07);
  --qd-track-brs: rgba(0, 0, 0, 0.12);
  --qd-track-sh1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --qd-track-sh2: 0 4px 20px rgba(0, 0, 0, 0.1);
  --qd-track-sh3: 0 8px 40px rgba(0, 0, 0, 0.14);
}

/* ─── Semantic component tokens (Phase 1 only: definition, no usage migration) ─── */
:root {
  /* Layout */
  --qd-layout-container-max: 1200px;
  --qd-layout-content-max: 1020px;
  --qd-layout-prose-max: 68ch;
  --qd-layout-nav-height: 64px;
  --qd-layout-sidebar-width: 280px;
  --qd-layout-gutter: var(--qd-space-4);

  /* Button */
  --qd-button-height-md: 48px;
  --qd-button-padding-y: var(--qd-space-3);
  --qd-button-padding-x: calc(var(--qd-space-8) - var(--qd-space-1));
  --qd-button-radius: var(--qd-radius-lg);
  --qd-button-font-size: var(--qd-font-size-md);
  --qd-button-font-weight: 700;
  --qd-button-bg-primary: var(--qd-color-accent-success);
  --qd-button-bg-primary-hover: var(--qd-color-accent-success-strong);
  --qd-button-fg-primary: var(--qd-color-on-accent-dark);
  --qd-button-bg-secondary: transparent;
  --qd-button-fg-secondary: var(--qd-color-text-primary);
  --qd-button-border-secondary: var(--qd-color-border-default);
  --qd-button-shadow: var(--qd-shadow-control);
  --qd-button-shadow-hover: var(--qd-shadow-control-hover);
  --qd-button-opacity-disabled: 0.55;

  /* Card */
  --qd-card-bg: var(--qd-color-bg-surface-1);
  --qd-card-bg-hover: var(--qd-color-bg-surface-3);
  --qd-card-border: var(--qd-color-border-subtle);
  --qd-card-border-strong: var(--qd-color-border-default);
  --qd-card-radius: var(--qd-radius-lg);
  --qd-card-padding: 0;
  --qd-card-padding-comfy: var(--qd-space-6);
  --qd-card-shadow: var(--qd-shadow-elevated);

  /* Input */
  --qd-input-bg: var(--qd-color-bg-surface-2);
  --qd-input-fg: var(--qd-color-text-primary);
  --qd-input-placeholder: var(--qd-color-text-tertiary);
  --qd-input-border: var(--qd-color-border-default);
  --qd-input-border-focus: var(--qd-color-accent-cyan-border);
  --qd-input-radius: var(--qd-radius-md);
  --qd-input-height-md: 44px;
  --qd-input-padding-x: var(--qd-space-4);

  /* Modal */
  --qd-modal-bg: var(--qd-color-bg-surface-1);
  --qd-modal-overlay: rgba(6, 8, 15, 0.7);
  --qd-modal-border: var(--qd-color-border-default);
  --qd-modal-radius: var(--qd-radius-xl);
  --qd-modal-shadow: var(--qd-shadow-elevated);
  --qd-modal-max-width: 720px;

  /* Navbar */
  --qd-navbar-bg: var(--qd-color-glass);
  --qd-navbar-border: var(--qd-color-border-subtle);
  --qd-navbar-height: var(--qd-layout-nav-height);
  --qd-navbar-blur: 10px;

  /* Sidebar */
  --qd-sidebar-bg: var(--qd-color-bg-surface-1);
  --qd-sidebar-border: var(--qd-color-border-subtle);
  --qd-sidebar-width: var(--qd-layout-sidebar-width);
  --qd-sidebar-item-radius: var(--qd-radius-md);
  --qd-sidebar-item-gap: var(--qd-space-2);

  /* Progress */
  --qd-progress-track-bg: var(--qd-color-bg-surface-2);
  --qd-progress-fill-bg: var(--qd-color-accent-cyan);
  --qd-progress-height-sm: 8px;
  --qd-progress-height-md: 12px;
  --qd-progress-radius: var(--qd-radius-full);

  /* Badge */
  --qd-badge-bg-success: var(--qd-color-accent-success-muted);
  --qd-badge-border-success: var(--qd-color-accent-success-border);
  --qd-badge-fg-success: var(--qd-color-accent-success);
  --qd-badge-bg-info: var(--qd-color-accent-cyan-muted);
  --qd-badge-border-info: var(--qd-color-accent-cyan-border);
  --qd-badge-fg-info: var(--qd-color-accent-cyan);
  --qd-badge-radius: var(--qd-radius-full);
  --qd-badge-padding-y: var(--qd-space-1);
  --qd-badge-padding-x: var(--qd-space-3);
  --qd-badge-font-size: var(--qd-font-size-xs);
}

[data-theme="light"] {
  --qd-modal-overlay: rgba(12, 17, 23, 0.34);
}

/* ─── Optional layout hook (Phase 2+); safe no-op until markup uses .qd-container ─── */
.qd-container {
  width: 100%;
  max-width: min(
    var(--content-max, var(--max, var(--qd-layout-content-max, var(--qd-track-max, var(--qd-layout-container-max))))),
    100%
  );
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--qd-layout-gutter);
  padding-right: var(--qd-layout-gutter);
  box-sizing: border-box;
}

.qd-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--qd-navbar-height);
  background: var(--qd-navbar-bg);
  border-bottom: 1px solid var(--qd-navbar-border);
  backdrop-filter: blur(var(--qd-navbar-blur));
}

/* ─── Primitive components (Phase 3 seed; opt-in classes) ─── */
.qd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: var(--qd-space-2);
  min-height: var(--qd-button-height-md);
  padding: var(--qd-button-padding-y) var(--qd-button-padding-x);
  font-family: var(--qd-font-sans);
  font-weight: var(--qd-button-font-weight);
  font-size: var(--qd-button-font-size);
  line-height: var(--qd-line-height-tight);
  border-radius: var(--qd-button-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--qd-motion-easing-standard), color 0.2s var(--qd-motion-easing-standard),
    border-color 0.2s var(--qd-motion-easing-standard), opacity 0.2s var(--qd-motion-easing-standard);
}
.qd-btn:disabled {
  opacity: var(--qd-button-opacity-disabled);
  cursor: not-allowed;
}
.qd-btn--primary {
  background: var(--qd-button-bg-primary);
  color: var(--qd-button-fg-primary);
}
.qd-btn--primary:hover:not(:disabled) {
  background: var(--qd-button-bg-primary-hover);
}
.qd-btn--ghost {
  background: var(--qd-button-bg-secondary);
  color: var(--qd-button-fg-secondary);
  border-color: var(--qd-button-border-secondary);
}
.qd-btn--ghost:hover:not(:disabled) {
  border-color: var(--qd-color-accent-success-border);
  color: var(--qd-color-accent-success);
}
.qd-btn:focus-visible {
  outline: 2px solid var(--qd-input-border-focus);
  outline-offset: 2px;
}
.qd-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.qd-card {
  min-width: 0;
  max-width: 100%;
  border-radius: var(--qd-card-radius);
  border: 1px solid var(--qd-card-border);
  background: var(--qd-card-bg);
  padding: var(--qd-card-padding);
  box-shadow: var(--qd-card-shadow);
}

.qd-input {
  width: 100%;
  min-height: var(--qd-input-height-md);
  padding: 0 var(--qd-input-padding-x);
  border-radius: var(--qd-input-radius);
  border: 1px solid var(--qd-input-border);
  background: var(--qd-input-bg);
  color: var(--qd-input-fg);
  font-family: var(--qd-font-sans);
  font-size: var(--qd-font-size-md);
  line-height: var(--qd-line-height-tight);
  box-sizing: border-box;
}
.qd-input::placeholder {
  color: var(--qd-input-placeholder);
}
.qd-input:focus-visible {
  outline: 2px solid var(--qd-input-border-focus);
  outline-offset: 1px;
}
.qd-input:disabled {
  opacity: var(--qd-button-opacity-disabled);
  cursor: not-allowed;
}

.qd-modal {
  width: min(100% - calc(var(--qd-layout-gutter) * 2), var(--qd-modal-max-width));
  max-height: min(90vh, 920px);
  margin: 0 auto;
  border-radius: var(--qd-modal-radius);
  border: 1px solid var(--qd-modal-border);
  background: var(--qd-modal-bg);
  box-shadow: var(--qd-modal-shadow);
  overflow: auto;
}
.qd-modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--qd-layout-gutter);
  background: var(--qd-modal-overlay);
  z-index: 200;
}

.qd-sidebar {
  width: min(100%, var(--qd-sidebar-width));
  background: var(--qd-sidebar-bg);
  border-right: 1px solid var(--qd-sidebar-border);
}
.qd-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--qd-sidebar-item-gap);
  padding: var(--qd-space-3) var(--qd-space-4);
  border-radius: var(--qd-sidebar-item-radius);
  color: var(--qd-color-text-primary);
  text-decoration: none;
}
.qd-sidebar-item:hover {
  background: var(--qd-color-bg-surface-2);
}

.qd-progress {
  width: 100%;
  height: var(--qd-progress-height-md);
  border-radius: var(--qd-progress-radius);
  background: var(--qd-progress-track-bg);
  overflow: hidden;
}
.qd-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--qd-progress-fill-bg);
  transition: width 0.25s var(--qd-motion-easing-standard);
}

.qd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qd-space-1);
  padding: var(--qd-badge-padding-y) var(--qd-badge-padding-x);
  border-radius: var(--qd-badge-radius);
  border: 1px solid transparent;
  font-family: var(--qd-font-mono);
  font-size: var(--qd-badge-font-size);
  line-height: var(--qd-line-height-tight);
  white-space: nowrap;
}
.qd-badge--success {
  background: var(--qd-badge-bg-success);
  border-color: var(--qd-badge-border-success);
  color: var(--qd-badge-fg-success);
}
.qd-badge--info {
  background: var(--qd-badge-bg-info);
  border-color: var(--qd-badge-border-info);
  color: var(--qd-badge-fg-info);
}