/* ============================================================================
   DU/ART — AI LAB · COMPONENTS
   Every reusable UI primitive, token-driven. Import order:
     tokens.css → base.css → components.css
   Class prefix: `du-`  (namespaced so it can drop into any app).
   ============================================================================ */

/* =========================================================================
   BUTTON — .du-btn  [+ --primary --ghost --subtle --danger --sm --block --icon]
   Primary = solid orange · Ghost = hairline · Subtle = text-only.
   ========================================================================= */
.du-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-ls);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.du-btn:disabled, .du-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.du-btn--primary { background: var(--bg-accent); color: var(--text-on-accent); border-color: var(--bg-accent); }
.du-btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.du-btn--primary:active { transform: translateY(0); background: var(--bg-accent-dim); border-color: var(--bg-accent-dim); }

.du-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-subtle); }
.du-btn--ghost:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }

.du-btn--subtle { background: transparent; color: var(--text-secondary); padding-inline: var(--space-2); }
.du-btn--subtle:hover:not(:disabled) { color: var(--text-primary); }

.du-btn--danger { background: transparent; color: var(--danger); border-color: rgba(229,83,61,0.4); }
.du-btn--danger:hover:not(:disabled) { background: var(--danger); color: var(--c-charcoal-900); border-color: var(--danger); }

.du-btn--sm { padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm); font-size: var(--fs-2xs); }
.du-btn--block { display: flex; width: 100%; }
.du-btn--icon { padding: var(--btn-pad-y-sm); aspect-ratio: 1; }

/* Press feedback on tap/click — a subtle push on every variant (matters most on
   mobile, where there is no hover to lean on). Higher specificity than the
   variant :active rules, so it applies across all of them. */
.du-btn:not(:disabled):active { transform: scale(0.97); }

/* Touch devices: don't let the desktop hover-lift stick after a tap. */
@media (hover: none) {
  .du-btn--primary:hover:not(:disabled) { transform: none; box-shadow: none; }
  .du-btn--ghost:hover:not(:disabled)   { border-color: var(--border-subtle); color: var(--text-primary); }
  .du-btn--subtle:hover:not(:disabled)  { color: var(--text-secondary); }
  .du-btn--danger:hover:not(:disabled)  { background: transparent; color: var(--danger); border-color: rgba(229,83,61,0.4); }
}

/* =========================================================================
   FIELD (form layout) — label + control + hint/error
   ========================================================================= */
.du-field { display: flex; flex-direction: column; margin-bottom: var(--space-7); }
.du-field:last-child { margin-bottom: 0; }
.du-field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  font-family: var(--label-font);
  font-size: var(--label-size);
  color: var(--label-color);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.du-field__label .req { color: var(--c-accent); }
.du-field__hint,
.du-field__counter { font-size: var(--fs-3xs); letter-spacing: var(--ls-label); color: var(--text-tertiary); }
.du-field__error {
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--danger); display: none;
}
.du-field.is-error .du-field__error { display: inline-block; }

/* Row of fields */
.du-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 640px) { .du-field-row { grid-template-columns: 1fr; } }

/* =========================================================================
   INPUT / TEXTAREA / SELECT
   Default = underline-only (brand). `.du-input--boxed` = bordered well.
   ========================================================================= */
.du-input, .du-textarea, .du-select {
  width: 100%;
  padding: var(--field-pad-y) var(--field-pad-x);   /* the lifted --field-bg makes the field a box → it needs to breathe */
  background: var(--field-bg);
  border: 0;
  border-bottom: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  color: var(--field-text);
  font-family: var(--field-font);
  font-size: var(--field-size);
  outline: 0;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.du-input::placeholder, .du-textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
.du-input:hover, .du-textarea:hover, .du-select:hover,
.du-input:focus, .du-textarea:focus, .du-select:focus { border-bottom-color: var(--field-border-focus); }
.du-input:focus-visible, .du-textarea:focus-visible, .du-select:focus-visible { box-shadow: none; border-bottom-color: var(--c-accent); }
.du-field.is-error .du-input,
.du-field.is-error .du-textarea,
.du-field.is-error .du-select { border-bottom-color: var(--danger); }
.du-input:disabled, .du-textarea:disabled, .du-select:disabled { opacity: 0.5; cursor: not-allowed; }

.du-textarea { resize: vertical; min-height: 120px; line-height: var(--lh-body); }

/* Boxed variant — for dense forms / editors (padding now comes from the base) */
.du-input--boxed, .du-textarea--boxed, .du-select--boxed {
  background: var(--field-bg-boxed);
  border: 1px solid var(--field-border);
}
.du-input--boxed:hover, .du-input--boxed:focus,
.du-textarea--boxed:hover, .du-textarea--boxed:focus,
.du-select--boxed:hover, .du-select--boxed:focus { border-color: var(--c-accent); }

/* Select chevron — inset by the field padding, like everything else inside the box */
.du-select-wrap { position: relative; }
.du-select-wrap::after {
  content: ""; position: absolute; right: var(--field-pad-x); top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.du-select { padding-right: calc(var(--field-pad-x) + var(--space-5)); }   /* room for the chevron */

/* Password input — control + reveal toggle */
.du-password { position: relative; }
.du-password .du-input { padding-right: var(--space-9); }
.du-password__toggle {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  padding: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--dur-base) var(--ease-out);
}
.du-password__toggle:hover { color: var(--c-accent); }

/* =========================================================================
   CHECKBOX / RADIO — custom, in an optional bordered card
   ========================================================================= */
.du-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.du-check__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.du-check__box {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px;
  border: 1px solid var(--border-subtle); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.du-check--radio .du-check__box { border-radius: var(--radius-full); }
.du-check__input:checked + .du-check__box { background: var(--c-accent); border-color: var(--c-accent); }
.du-check__input:checked + .du-check__box::after {
  content: "✓"; color: var(--c-charcoal-900); font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
}
.du-check--radio .du-check__input:checked + .du-check__box::after { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--c-charcoal-900); }
.du-check__input:focus-visible + .du-check__box { box-shadow: var(--focus-ring); }
.du-check__text { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-secondary); }
.du-check__text strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
/* Carded consent variant */
.du-check--card { padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); background: var(--bg-inset); }
.du-check--card.is-error { border-color: var(--danger); }

/* =========================================================================
   CARD — .du-card  [+ --paper --pad-lg --interactive]
   Dark editorial panel. Interactive cards lift on hover (polaroid DNA).
   ========================================================================= */
.du-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-none);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.du-card--pad-lg { padding: var(--space-9); }
.du-card--paper {
  background: var(--bg-paper); color: var(--text-on-paper);
  border-color: var(--border-paper);
}
.du-card--interactive { cursor: pointer; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.du-card--interactive:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--shadow-glow-soft);
}
.du-card__title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-display); color: var(--text-primary); }
.du-card__meta { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); }
.du-card__body { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* -- TOOL CARD — an entry point to a lab module -------------------------- */
.du-tool-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  padding: var(--space-6);
  min-height: 180px;
  cursor: pointer; text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.du-tool-card::before {
  /* accent index rail */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c-accent); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out);
}
.du-tool-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--shadow-glow-soft); }
.du-tool-card:hover::before { transform: scaleY(1); }
.du-tool-card__index { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); color: var(--c-accent); }
.du-tool-card__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); }
.du-tool-card__title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-display); color: var(--text-primary); }
.du-tool-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-body); }
.du-tool-card__arrow { margin-top: auto; align-self: flex-start; color: var(--text-tertiary); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.du-tool-card:hover .du-tool-card__arrow { color: var(--c-accent); transform: translateX(4px); }
/* state badge pinned to the card corner */
.du-tool-card__badge { position: absolute; top: var(--space-6); right: var(--space-6); }
/* --soon: a planned / in-progress module that is not yet clickable */
.du-tool-card--soon { cursor: default; }
.du-tool-card--soon:hover { transform: none; border-color: var(--border-hairline); box-shadow: none; }
.du-tool-card--soon:hover::before { transform: scaleY(0); }
.du-tool-card--soon .du-tool-card__title,
.du-tool-card--soon .du-tool-card__icon { opacity: 0.82; }

/* -- PROJECT CARD — a saved project / output ---------------------------- */
.du-project-card {
  display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.du-project-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--shadow-glow-soft); }
.du-project-card__thumb {
  aspect-ratio: 16 / 10; background: var(--bg-surface-2); overflow: hidden; position: relative;
}
.du-project-card__thumb img { width: 100%; height: 100%; object-fit: cover; filter: contrast(0.97) saturate(0.9); }
.du-project-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.du-project-card__title { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-display); color: var(--text-primary); }
.du-project-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); }

/* =========================================================================
   BADGE — .du-badge  [+ --accent --success --warning --danger --info --solid]
   ========================================================================= */
.du-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  white-space: nowrap;
}
.du-badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.du-badge--accent  { color: var(--c-accent);  border-color: rgba(255,90,47,0.35); }
.du-badge--success { color: var(--success); border-color: rgba(95,191,122,0.35); }
.du-badge--warning { color: var(--warning); border-color: rgba(224,163,58,0.35); }
.du-badge--danger  { color: var(--danger);  border-color: rgba(229,83,61,0.35); }
.du-badge--info    { color: var(--info);    border-color: rgba(110,163,199,0.35); }
.du-badge--solid   { background: var(--c-accent); color: var(--c-charcoal-900); border-color: var(--c-accent); }

/* =========================================================================
   ALERT — .du-alert  [+ --success --warning --danger --info]
   ========================================================================= */
.du-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-left-width: 2px;
  background: var(--bg-inset);
  color: var(--text-secondary);
  font-size: var(--fs-sm); line-height: var(--lh-body);
}
.du-alert__icon { flex-shrink: 0; color: var(--text-secondary); margin-top: 1px; }
.du-alert__title { color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: 2px; }
.du-alert--success { border-left-color: var(--success); background: var(--success-bg); }
.du-alert--success .du-alert__icon { color: var(--success); }
.du-alert--warning { border-left-color: var(--warning); background: var(--warning-bg); }
.du-alert--warning .du-alert__icon { color: var(--warning); }
.du-alert--danger  { border-left-color: var(--danger); background: var(--danger-bg); }
.du-alert--danger .du-alert__icon { color: var(--danger); }
.du-alert--info    { border-left-color: var(--info); background: var(--info-bg); }
.du-alert--info .du-alert__icon { color: var(--info); }

/* =========================================================================
   EMPTY STATE — .du-empty
   ========================================================================= */
.du-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4);
  padding: var(--space-13) var(--space-6);
  border: 1px dashed var(--border-subtle);
  color: var(--text-secondary);
}
.du-empty__icon { color: var(--text-tertiary); }
.du-empty__title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-display); color: var(--text-primary); }
.du-empty__text { max-width: 42ch; color: var(--text-secondary); font-size: var(--fs-sm); }
.du-empty__hand { font-family: var(--font-hand); font-size: 28px; color: var(--text-tertiary); }

/* =========================================================================
   MODAL — .du-modal (backdrop) > .du-modal__panel
   ========================================================================= */
.du-modal {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  display: grid; place-items: center; padding: var(--space-6);
  background: rgba(6,5,4,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.du-modal.is-open { opacity: 1; visibility: visible; }
.du-modal__panel {
  position: relative; z-index: var(--z-modal);
  width: min(560px, 100%);
  max-height: min(86vh, 720px); overflow: auto;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  padding: var(--space-9);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}
.du-modal.is-open .du-modal__panel { transform: none; }
.du-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.du-modal__title { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--ls-display); }
.du-modal__close { color: var(--text-secondary); padding: var(--space-2); line-height: 1; transition: color var(--dur-base) var(--ease-out); }
.du-modal__close:hover { color: var(--c-accent); }
.du-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-8); }

/* =========================================================================
   HEADER / TOP BAR — .du-topbar (app) and .du-nav (marketing)
   ========================================================================= */
.du-topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  height: var(--topbar-height);
  padding-inline: var(--space-6);
  background: linear-gradient(180deg, rgba(14,13,12,0.85), rgba(14,13,12,0.5));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.du-logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.05em; color: var(--text-primary); }
.du-logo .slash { color: var(--c-accent); margin-inline: 2px; font-weight: var(--fw-regular); }
.du-topbar__meta { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); }
.du-live-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--success); box-shadow: 0 0 10px var(--success); }
.du-logo { white-space: nowrap; }
/* iPhone: keep the topbar to logo + status + sign-out; drop the long username */
@media (max-width: 520px) { .du-topbar__user { display: none; } }

.du-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--layout-gutter); background: linear-gradient(180deg, rgba(14,13,12,0.85), rgba(14,13,12,0.4)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.du-nav__list { display: flex; align-items: center; gap: var(--space-9); list-style: none; margin: 0; padding: 0; }
.du-nav__link { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); color: var(--text-secondary); border-bottom: 1px solid transparent; padding-bottom: 4px; transition: color var(--dur-base) var(--ease-out); }
.du-nav__link:hover { color: var(--text-primary); }
.du-nav__link.is-active { color: var(--text-primary); border-bottom-color: var(--c-accent); }
.du-nav__link .num { font-family: var(--font-mono); font-size: var(--fs-4xs); color: var(--c-accent); }

/* =========================================================================
   SIDEBAR — .du-sidebar (dashboard shell)
   ========================================================================= */
.du-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.du-sidebar__group { font-family: var(--font-mono); font-size: var(--fs-4xs); letter-spacing: var(--ls-label-x); text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-4) var(--space-3) var(--space-2); }
.du-sidebar__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); color: var(--text-secondary); font-size: var(--fs-sm); border-left: 2px solid transparent; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.du-sidebar__link:hover { color: var(--text-primary); background: var(--bg-hover); }
.du-sidebar__link.is-active { color: var(--text-primary); border-left-color: var(--c-accent); background: var(--bg-hover); }

/* =========================================================================
   PAGE WRAPPER / SHELL / SECTION HEADER
   ========================================================================= */
.du-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.du-shell__main { flex: 1; min-width: 0; }
.du-page { padding: var(--space-9) var(--space-11); max-width: var(--layout-app-max); margin-inline: auto; }
@media (max-width: 900px) { .du-page { padding: var(--space-7) var(--layout-gutter-sm); } .du-sidebar { display: none; } }

.du-page-head { margin-bottom: var(--space-9); }
.du-page-head__title { font-family: var(--font-display); font-size: var(--fs-h1); letter-spacing: var(--ls-display); margin-top: var(--space-2); }
.du-page-head__actions { display: flex; gap: var(--space-3); }

/* =========================================================================
   LOGIN CARD — private area entry. Paper "polaroid" on the dark room.
   ========================================================================= */
.du-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.du-login__card {
  width: min(420px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  padding: var(--space-9);
}
.du-login__brand { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.05em; }
.du-login__brand .slash { color: var(--c-accent); }
.du-login__title { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--ls-display); margin: var(--space-4) 0 var(--space-2); }
.du-login__lede { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-8); }
.du-login__foot { margin-top: var(--space-7); font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); text-align: center; }

/* =========================================================================
   FOOTER — .du-footer
   ========================================================================= */
.du-footer { border-top: 1px solid var(--border-subtle); padding: var(--space-9) 0; color: var(--text-tertiary); }
.du-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; }
.du-footer a { color: var(--text-secondary); transition: color var(--dur-base) var(--ease-out); }
.du-footer a:hover { color: var(--c-accent); }

/* =========================================================================
   CODE / JSON EDITOR SURFACE — .du-editor (for the JSON/visual editors)
   ========================================================================= */
.du-editor {
  background: var(--c-charcoal-900); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7;
  color: var(--text-primary); padding: var(--space-5); overflow: auto;
  tab-size: 2;
}
.du-editor__toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-bottom: 0; background: var(--bg-surface); font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); }
.du-editor .tok-key { color: var(--c-accent); }
.du-editor .tok-str { color: var(--success); }
.du-editor .tok-num { color: var(--info); }
.du-editor .tok-punc { color: var(--text-tertiary); }

/* =========================================================================
   TABS — .du-tabs
   ========================================================================= */
.du-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.du-tab { padding: var(--space-3) 0; font-size: var(--fs-sm); color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-base) var(--ease-out); }
.du-tab:hover { color: var(--text-primary); }
.du-tab.is-active { color: var(--text-primary); border-bottom-color: var(--c-accent); }

/* =========================================================================
   SPINNER / LOADING
   ========================================================================= */
.du-spinner { width: 20px; height: 20px; border: 2px solid var(--border-subtle); border-top-color: var(--c-accent); border-radius: var(--radius-full); animation: du-spin 700ms linear infinite; }
@keyframes du-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .du-spinner { animation-duration: 1400ms; } }