:root {
  color-scheme: light;
  --md-background: #f3eee6;
  --md-surface: rgba(248, 245, 240, 0.92);
  --md-surface-strong: rgba(255, 255, 255, 0.96);
  --md-outline: rgba(102, 112, 124, 0.18);
  --md-outline-strong: rgba(102, 112, 124, 0.28);
  --md-text: #171a1f;
  --md-muted: #66707c;
  --md-primary: #d96a1d;
  --md-primary-strong: #b95612;
  --md-secondary: #466a8e;
  --md-success: #1f8a5b;
  --md-error: #c64b4b;
  --md-shadow: 0 18px 44px rgba(23, 26, 31, 0.08);
  --md-shadow-strong: 0 24px 64px rgba(23, 26, 31, 0.12);
  --md-font-ui: "Manrope", sans-serif;
  --md-font-mono: "IBM Plex Mono", monospace;
}

html.dark {
  color-scheme: dark;
  --md-background: #0f1217;
  --md-surface: rgba(20, 24, 31, 0.94);
  --md-surface-strong: rgba(26, 31, 39, 0.98);
  --md-outline: rgba(255, 255, 255, 0.08);
  --md-outline-strong: rgba(255, 255, 255, 0.16);
  --md-text: #eef2f7;
  --md-muted: #b2bcc8;
  --md-primary: #ffb067;
  --md-primary-strong: #e38b36;
  --md-secondary: #9ec0e6;
  --md-success: #42c488;
  --md-error: #f08888;
  --md-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  --md-shadow-strong: 0 26px 70px rgba(0, 0, 0, 0.34);
}

html,
body {
  min-height: 100%;
}

body.md-app-body {
  margin: 0;
  font-family: var(--md-font-ui);
  line-height: 1.5;
  color: var(--md-text);
  background:
    radial-gradient(circle at top left, rgba(217, 106, 29, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 18%),
    var(--md-background);
  overflow-x: hidden;
}

/* ─── Header ──────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--md-outline);
  background: rgba(243, 238, 230, 0.88);
  backdrop-filter: blur(18px);
}

html.dark .site-header {
  background: rgba(15, 18, 23, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 176, 103, 0.06);
}

/* ─── Search in nav ───────────────────────────────────────── */

.nav-search {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-search__input {
  width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--md-surface-strong);
  color: var(--md-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  outline: none;
  opacity: 0;
  transition: width 280ms ease, padding 280ms ease, opacity 280ms ease, border-color 280ms ease;
}

.nav-search.is-open .nav-search__input {
  width: 220px;
  padding: 0.6rem 1rem;
  border-color: var(--md-outline);
  opacity: 1;
}

.nav-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--md-outline);
  border-radius: 9999px;
  background: var(--md-surface-strong);
  color: var(--md-text);
  padding: 0.65rem;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.nav-search__btn:hover {
  transform: translateY(-1px);
  border-color: rgba(217, 106, 29, 0.28);
}

.nav-search__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--md-outline);
  border-radius: 1.2rem;
  background: var(--md-surface-strong);
  box-shadow: var(--md-shadow-strong);
  z-index: 50;
  padding: 0.5rem;
  display: none;
}

.nav-search__results.is-visible {
  display: block;
}

.nav-search__results a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.8rem;
  color: var(--md-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.nav-search__results a:hover {
  background: rgba(217, 106, 29, 0.08);
}

.nav-search__results a .search-arrow {
  color: var(--md-primary);
  font-size: 0.75rem;
  margin-left: auto;
}

/* ─── Language switcher ───────────────────────────────────── */

.lang-switcher {
  position: relative;
}

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 160px;
  border: 1px solid var(--md-outline);
  border-radius: 1.2rem;
  background: var(--md-surface-strong);
  box-shadow: var(--md-shadow-strong);
  z-index: 50;
  padding: 0.4rem;
  display: none;
}

.lang-switcher__dropdown.is-visible {
  display: block;
}

.lang-switcher__dropdown a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 0.75rem;
  color: var(--md-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.lang-switcher__dropdown a:hover {
  background: rgba(217, 106, 29, 0.08);
}

/* ─── Typography ──────────────────────────────────────────── */

.command-surface h1,
.surface-panel h1,
.surface-panel h2,
.faq-item summary {
  text-wrap: balance;
}

/* ─── Reveal animations ──────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 460ms ease,
    transform 460ms ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal][data-reveal-delay="2"] { transition-delay: 130ms; }
.js [data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }
.js [data-reveal][data-reveal-delay="4"] { transition-delay: 230ms; }
.js [data-reveal][data-reveal-delay="5"] { transition-delay: 280ms; }
.js [data-reveal][data-reveal-delay="6"] { transition-delay: 330ms; }

/* ─── Surface panels ─────────────────────────────────────── */

.surface-panel {
  position: relative;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  box-shadow: var(--md-shadow);
}

.command-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(217, 106, 29, 0.08), transparent 38%);
  border-radius: inherit;
}

html.dark .command-surface::before {
  background: linear-gradient(135deg, rgba(255, 176, 103, 0.06), transparent 38%);
}

.command-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 16px 38px rgba(23, 26, 31, 0.08);
}

html.dark .command-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 40px rgba(0, 0, 0, 0.22);
}

/* ─── Monospace elements ──────────────────────────────────── */

.eyebrow,
.route-chip,
.trust-pill,
.selector-field__label,
.status-chip,
.status-pill,
.status-state__meta,
.pair-rail-chip__arrow {
  font-family: var(--md-font-mono);
}

/* ─── Eyebrow badge ──────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  background: rgba(217, 106, 29, 0.12);
  color: var(--md-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ─── Route & Trust pills ─────────────────────────────────── */

.route-chip,
.trust-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--md-outline);
  border-radius: 9999px;
  background: var(--md-surface-strong);
  color: var(--md-text);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.6rem 0.85rem;
  text-transform: uppercase;
}

/* ─── Nav chips ──────────────────────────────────────────── */

.nav-chip,
.theme-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--md-outline);
  border-radius: 9999px;
  background: var(--md-surface-strong);
  color: var(--md-text);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.nav-chip:hover,
.theme-toggle:hover,
.menu-toggle:hover,
.pair-rail-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(217, 106, 29, 0.28);
}

/* ─── Material button ─────────────────────────────────────── */

.material-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-strong));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  padding: 1rem 1.35rem;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(217, 106, 29, 0.26);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  cursor: pointer;
}

.material-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(217, 106, 29, 0.3);
}

.material-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

html.dark .material-button {
  box-shadow:
    0 16px 34px rgba(217, 106, 29, 0.16),
    0 0 24px rgba(255, 176, 103, 0.08);
}

html.dark .material-button:hover {
  box-shadow:
    0 20px 40px rgba(217, 106, 29, 0.22),
    0 0 32px rgba(255, 176, 103, 0.12);
}

html.dark .material-button:disabled {
  box-shadow: none;
}

/* ─── Ripple effect on buttons ────────────────────────────── */

.material-button .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple-expand 500ms ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ─── Button loading state ────────────────────────────────── */

.material-button.is-loading {
  pointer-events: none;
  opacity: 0.82;
}

.material-button.is-loading .btn-label {
  opacity: 0;
}

.material-button .btn-spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.material-button.is-loading .btn-spinner {
  display: block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Floating label ──────────────────────────────────────── */

.floating-label {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--md-primary);
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html.dark .floating-label {
  background: rgba(20, 24, 31, 0.94);
}

/* ─── Selector field ──────────────────────────────────────── */

.selector-field {
  display: grid;
  gap: 0.75rem;
}

.selector-field__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-muted);
}

.material-select {
  width: 100%;
  appearance: none;
  border: 1px solid var(--md-outline);
  border-radius: 1.4rem;
  background: var(--md-surface-strong);
  color: var(--md-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 1rem 3.25rem 1rem 1.1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--md-primary) 50%),
    linear-gradient(135deg, var(--md-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% - 0.16rem),
    calc(100% - 0.92rem) calc(50% - 0.16rem);
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-repeat: no-repeat;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.material-select:focus-visible,
.nav-chip:focus-visible,
.theme-toggle:focus-visible,
.menu-toggle:focus-visible,
.material-button:focus-visible,
.pair-rail-chip:focus-visible,
.faq-item summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(217, 106, 29, 0.16);
}

.material-select:focus-visible {
  border-color: rgba(217, 106, 29, 0.42);
}

.material-select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

/* ─── File dropzone (P0 #2) ──────────────────────────────── */

.file-dropzone {
  position: relative;
  border: 2px dashed var(--md-outline-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.18));
  transition:
    border-color 280ms ease,
    transform 280ms ease,
    background-color 280ms ease,
    box-shadow 280ms ease;
  cursor: pointer;
}

html.dark .file-dropzone {
  background: linear-gradient(180deg, rgba(30, 36, 45, 0.72), rgba(17, 22, 30, 0.38));
  border-color: rgba(255, 255, 255, 0.12);
}

.file-dropzone:hover,
.file-dropzone.has-file {
  border-color: rgba(217, 106, 29, 0.55);
  box-shadow: 0 0 0 4px rgba(217, 106, 29, 0.08);
}

.file-dropzone.is-dragover {
  border-color: var(--md-primary);
  box-shadow:
    0 0 0 4px rgba(217, 106, 29, 0.12),
    inset 0 0 40px rgba(217, 106, 29, 0.04);
  transform: scale(1.01);
  animation: dropzone-pulse 1s ease-in-out infinite;
}

@keyframes dropzone-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 106, 29, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(217, 106, 29, 0.08), 0 0 24px rgba(217, 106, 29, 0.06); }
}

/* Dropzone upload icon overlay */
.dropzone-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
  color: var(--md-muted);
  transition: color 280ms ease, transform 280ms ease;
}

.dropzone-icon svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.5;
  transition: opacity 280ms ease, transform 280ms ease;
}

.file-dropzone.is-dragover .dropzone-icon svg {
  opacity: 1;
  transform: translateY(-4px);
  color: var(--md-primary);
}

.file-dropzone.is-dragover .dropzone-icon {
  color: var(--md-primary);
}

/* File chip (selected file display) */
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--md-outline);
  border-radius: 9999px;
  background: var(--md-surface-strong);
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  transition: border-color 180ms ease, transform 180ms ease;
}

.file-chip.has-file {
  border-color: rgba(217, 106, 29, 0.3);
}

.file-chip__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--md-text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip__size {
  font-family: var(--md-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-muted);
  letter-spacing: 0.06em;
}

.file-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  background: rgba(198, 75, 75, 0.1);
  color: var(--md-error);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.file-chip__clear:hover {
  background: rgba(198, 75, 75, 0.2);
  transform: scale(1.1);
}

/* Shake animation for validation errors */
.file-dropzone.is-shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
}

/* ─── Status system (P0 #1: Progress bar) ─────────────────── */

.status-chip,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0.6rem 0.85rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-chip,
.status-pill,
.status-state {
  transition: border-color 280ms ease, background-color 280ms ease, color 280ms ease;
}

/* Status stepper */
.status-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0;
}

.status-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  position: relative;
}

.status-stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--md-outline);
  background: var(--md-surface-strong);
  color: var(--md-muted);
  font-size: 0.85rem;
  transition: border-color 280ms ease, background-color 280ms ease, color 280ms ease, box-shadow 280ms ease;
  z-index: 1;
}

.status-stepper__label {
  font-family: var(--md-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-muted);
  transition: color 280ms ease;
}

.status-stepper__step + .status-stepper__step::before {
  content: "";
  position: absolute;
  top: 1.125rem;
  right: calc(50% + 1.125rem);
  left: calc(-50% + 1.125rem);
  height: 2px;
  background: var(--md-outline);
  transition: background-color 280ms ease;
  z-index: 0;
}

.status-stepper__step.is-active .status-stepper__icon {
  border-color: var(--md-primary);
  background: rgba(217, 106, 29, 0.12);
  color: var(--md-primary);
  box-shadow: 0 0 0 4px rgba(217, 106, 29, 0.08);
}

.status-stepper__step.is-active .status-stepper__label {
  color: var(--md-primary);
}

.status-stepper__step.is-done .status-stepper__icon {
  border-color: var(--md-success);
  background: rgba(31, 138, 91, 0.12);
  color: var(--md-success);
}

.status-stepper__step.is-done .status-stepper__label {
  color: var(--md-success);
}

.status-stepper__step.is-done + .status-stepper__step::before,
.status-stepper__step.is-active + .status-stepper__step::before {
  background: var(--md-success);
}

.status-stepper__step.is-failed .status-stepper__icon {
  border-color: var(--md-error);
  background: rgba(198, 75, 75, 0.12);
  color: var(--md-error);
}

.status-stepper__step.is-failed .status-stepper__label {
  color: var(--md-error);
}

/* Progress bar */
.status-progress {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--md-outline);
  overflow: hidden;
  margin: 0.5rem 0;
}

.status-progress__bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--md-primary), var(--md-primary-strong));
  transition: width 500ms ease;
}

.status-progress__bar.is-indeterminate {
  width: 40% !important;
  animation: indeterminate-slide 1.4s ease-in-out infinite;
}

@keyframes indeterminate-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Checkmark animation for success */
.status-checkmark {
  display: none;
  width: 2rem;
  height: 2rem;
}

.status-checkmark.is-visible {
  display: inline-block;
}

.status-checkmark svg {
  width: 100%;
  height: 100%;
}

.checkmark-path {
  stroke: var(--md-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark-draw 500ms ease 200ms forwards;
}

@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

/* Status state colors */
.status-chip[data-status-state="pending"],
.status-pill[data-status-state="pending"],
.status-state[data-status-state="pending"] {
  border-color: rgba(70, 106, 142, 0.16);
  background: rgba(70, 106, 142, 0.1);
  color: var(--md-secondary);
}

.status-chip[data-status-state="processing"],
.status-pill[data-status-state="processing"],
.status-state[data-status-state="processing"] {
  border-color: rgba(217, 106, 29, 0.2);
  background: rgba(217, 106, 29, 0.1);
  color: var(--md-primary);
}

.status-pill[data-status-state="processing"] {
  animation: status-pulse 1.8s ease-in-out infinite;
}

.status-chip[data-status-state="success"],
.status-pill[data-status-state="success"],
.status-state[data-status-state="success"] {
  border-color: rgba(31, 138, 91, 0.18);
  background: rgba(31, 138, 91, 0.12);
  color: var(--md-success);
}

.status-chip[data-status-state="failed"],
.status-pill[data-status-state="failed"],
.status-state[data-status-state="failed"] {
  border-color: rgba(198, 75, 75, 0.18);
  background: rgba(198, 75, 75, 0.1);
  color: var(--md-error);
}

.status-pill[data-status-state="idle"],
.status-state[data-status-state="idle"] {
  border-color: var(--md-outline);
  background: var(--md-surface-strong);
  color: var(--md-muted);
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 106, 29, 0); }
  50% { box-shadow: 0 0 0 8px rgba(217, 106, 29, 0.08); }
}

.status-shell {
  align-self: stretch;
}

.status-shell .material-button {
  align-self: stretch;
}

.status-state {
  display: grid;
  gap: 0.75rem;
  min-height: 12rem;
  border: 1px solid var(--md-outline);
  border-radius: 1.8rem;
  padding: 1.15rem;
  background: var(--md-surface-strong);
}

.status-state__label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--md-text);
}

.status-state__detail {
  color: var(--md-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.status-state__meta {
  color: var(--md-muted);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-state__error {
  min-height: 1.35rem;
  font-size: 0.9rem;
}

/* ─── Pair rail chips ─────────────────────────────────────── */

.pair-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--md-outline);
  border-radius: 9999px;
  background: var(--md-surface-strong);
  color: var(--md-text);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.95rem 1.15rem;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.pair-rail-chip__arrow {
  color: var(--md-primary);
  font-size: 0.9rem;
}

/* ─── Feature pills ──────────────────────────────────────── */

.feature-pill {
  list-style: none;
  border: 1px solid var(--md-outline);
  border-radius: 1.5rem;
  background: var(--md-surface-strong);
  padding: 1rem 1.1rem;
}

/* ─── Ad slot ─────────────────────────────────────────────── */

.ad-slot {
  border: 1px dashed rgba(70, 106, 142, 0.24);
  border-radius: 1.75rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(217, 106, 29, 0.08));
  padding: 1.5rem;
}

html.dark .ad-slot {
  background: linear-gradient(135deg, rgba(20, 24, 31, 0.94), rgba(70, 106, 142, 0.12));
}

/* ─── Hero format icons (P2 #5) ──────────────────────────── */

.hero-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hero-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--md-outline);
  border-radius: 0.75rem;
  background: var(--md-surface-strong);
  font-family: var(--md-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--md-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 300ms ease, border-color 300ms ease, color 300ms ease;
}

.hero-format-icon:nth-child(even) {
  animation: format-float 3s ease-in-out infinite;
}

.hero-format-icon:nth-child(odd) {
  animation: format-float 3s ease-in-out 0.5s infinite;
}

@keyframes format-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.hero-format-icon:hover {
  border-color: var(--md-primary);
  color: var(--md-primary);
  transform: translateY(-2px) scale(1.08);
}

/* Category icons */
.category-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
}

.category-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.category-icon__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(217, 106, 29, 0.1);
  color: var(--md-primary);
  transition: transform 200ms ease, background-color 200ms ease;
}

.category-icon__circle svg {
  width: 1.4rem;
  height: 1.4rem;
}

.category-icon:hover .category-icon__circle {
  transform: scale(1.1);
  background: rgba(217, 106, 29, 0.18);
}

.category-icon__label {
  font-family: var(--md-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-muted);
}

/* ─── FAQ (P3 #7: Smooth animations) ─────────────────────── */

.faq-item {
  transition: border-color 280ms ease, background-color 280ms ease;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--md-primary);
  font-family: var(--md-font-mono);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 280ms ease;
}

.faq-item[open] {
  border-color: rgba(217, 106, 29, 0.3);
}

.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

/* Smooth expand via grid trick */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.faq-item[open] .faq-item__body {
  grid-template-rows: 1fr;
}

.faq-item__body > div {
  overflow: hidden;
}

/* ─── Toast notifications (P1 #3) ─────────────────────────── */

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-radius: 1rem;
  background: var(--md-surface-strong);
  border: 1px solid var(--md-outline);
  box-shadow: var(--md-shadow-strong);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-text);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  animation: toast-in 300ms ease forwards;
}

.toast.is-leaving {
  animation: toast-out 250ms ease forwards;
}

.toast--error {
  border-color: rgba(198, 75, 75, 0.28);
  background: rgba(198, 75, 75, 0.08);
  color: var(--md-error);
}

.toast--success {
  border-color: rgba(31, 138, 91, 0.28);
  background: rgba(31, 138, 91, 0.08);
  color: var(--md-success);
}

.toast__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

@keyframes toast-in {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* ─── Sticky mobile action bar (P1 #4) ───────────────────── */

.mobile-fab {
  display: none;
}

/* ─── Horizontal scroll for chips (P1 #4) ─────────────────── */

.pair-rail-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ─── Mobile responsive ──────────────────────────────────── */

@media (max-width: 640px) {
  body.md-app-body {
    background:
      radial-gradient(circle at top center, rgba(217, 106, 29, 0.08), transparent 20%),
      var(--md-background);
  }

  .command-surface,
  .surface-panel,
  .ad-slot {
    border-radius: 1.5rem;
  }

  .status-state {
    min-height: 0;
  }

  /* P1 #4: Horizontal scroll instead of stacking */
  .pair-rail-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    scrollbar-width: none;
  }

  .pair-rail-scroll::-webkit-scrollbar {
    display: none;
  }

  .pair-rail-scroll .pair-rail-chip {
    flex-shrink: 0;
    width: auto;
    scroll-snap-align: start;
  }

  /* P1 #4: Compact trust pills in 2-col grid */
  .trust-pills-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem !important;
  }

  .trust-pills-row .trust-pill {
    width: 100%;
    justify-content: center;
    font-size: 0.68rem;
    padding: 0.5rem 0.6rem;
  }

  /* P1 #4: Sticky mobile action bar */
  .mobile-fab {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--md-surface-strong);
    border-top: 1px solid var(--md-outline);
    box-shadow: 0 -8px 24px rgba(23, 26, 31, 0.1);
    z-index: 45;
    backdrop-filter: blur(12px);
  }

  html.dark .mobile-fab {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  }

  .mobile-fab .material-button {
    width: 100%;
    justify-content: center;
  }

  /* Extra bottom padding so content isn't hidden behind fab */
  .has-mobile-fab main {
    padding-bottom: 5rem;
  }

  /* Toast on mobile */
  .toast-container {
    bottom: 5rem;
    right: 0.75rem;
    left: 0.75rem;
  }

  .toast {
    width: 100%;
  }

  /* Category icons compact on mobile */
  .category-icons {
    gap: 0.65rem;
  }

  .category-icon__circle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hero-formats {
    gap: 0.35rem;
  }

  .hero-format-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.5rem;
  }

  /* Mobile menu popular pairs */
  .mobile-menu-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--md-outline);
    margin-top: 0.75rem;
  }

  .mobile-menu-popular a {
    font-size: 0.78rem;
    padding: 0.55rem 0.85rem;
  }
}

/* ─── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}