/* ── Hero ─────────────────────────────────────────── */
.app-hero {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem 1.1rem;
}
.app-hero--peach {
  background: var(--c-peach-bg);
  border-bottom-color: var(--c-peach-border);
}
.app-hero__inner { margin: 0 auto; }
.app-hero__title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800;
  color: var(--c-peach-text); letter-spacing: -.02em;
  margin: 0 0 .5rem; line-height: 1.2;
}
.app-hero__desc {
  font-size: .9rem; color: var(--color-text-secondary);
  max-width: 660px; line-height: 1.6; margin: 0 0 .85rem;
}
.app-hero__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-chip {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem; font-size: .72rem; font-weight: 700;
  background: var(--color-surface); border: 1.5px solid var(--c-peach-border);
  border-radius: var(--radius-full); color: var(--c-peach-text); white-space: nowrap;
}

/* ── Tool shell ─────────────────────────────────────────── */
.tool-wrap {
  background: var(--color-surface);
  border: 1.5px solid var(--c-peach-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-10);
}

/* ── Tab bar ────────────────────────────────────────────── */
.tool-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--c-peach-border);
  background: var(--c-peach-bg);
}
.tool-tab {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.15s, border-color 0.15s;
}
.tool-tab.active {
  color: var(--c-peach-text);
  border-bottom-color: var(--c-peach-text);
}
.tool-tab:hover:not(.active) {
  color: var(--c-peach-text);
}

/* ── Two-column body ────────────────────────────────────── */
.calc-body {
  display: grid;
  grid-template-columns: 340px 1fr;
}
@media (max-width: 820px) {
  .calc-body { grid-template-columns: 1fr; }
}

/* ── Inputs pane ────────────────────────────────────────── */
.inputs-pane {
  border-right: 1.5px solid var(--color-border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
}
@media (max-width: 820px) {
  .inputs-pane { border-right: none; border-bottom: 1.5px solid var(--color-border); }
}

/* ── Output pane ────────────────────────────────────────── */
.output-pane {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--c-peach-bg);
}

/* ── Section headings ───────────────────────────────────── */
.section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-peach-text);
  margin: 0 0 var(--space-2);
}

/* ── Pill button group ──────────────────────────────────── */
.pill-group {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pill-btn {
  flex: 1;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  color: var(--color-text-secondary);
  transition: background var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}
.pill-btn:last-child { border-right: none; }
.pill-btn:hover:not(.active) {
  background: var(--c-peach-bg);
  color: var(--c-peach-text);
}
.pill-btn.active {
  background: var(--c-peach-text);
  color: #fff;
}

/* ── Band pickers ───────────────────────────────────────── */
.band-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.band-picker-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.band-picker-label span { color: var(--color-text-muted); font-weight: var(--weight-normal); }
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  position: relative;
  flex-shrink: 0;
}
.swatch:hover { transform: scale(1.2); z-index: 1; }
.swatch.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-peach-text);
  transform: scale(1.1);
  z-index: 1;
}
.swatch--white { border-color: rgba(0,0,0,0.3); }

/* ── Value input (reverse mode) ─────────────────────────── */
.value-input-row {
  display: flex;
  gap: var(--space-2);
}
.num-input, .select-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--duration-fast);
  box-sizing: border-box;
}
.num-input:focus, .select-input:focus {
  border-color: var(--c-peach-text);
  box-shadow: 0 0 0 3px rgba(144,48,24,0.10);
}
.unit-select {
  flex: 0 0 80px;
}

/* ── Resistor SVG wrap ──────────────────────────────────── */
.resistor-wrap {
  background: var(--color-surface);
  border: 2px solid var(--c-peach-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
#resistor-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* ── Band legend ────────────────────────────────────────── */
.band-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* ── Value display ──────────────────────────────────────── */
.value-display {
  text-align: center;
}
.value-main {
  font-size: 2.25rem;
  font-weight: var(--weight-bold);
  color: var(--c-peach-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.value-tol {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.value-range {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Stats chips ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.stat-chip {
  background: var(--color-surface);
  border: 1px solid var(--c-peach-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}
.stat-chip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.stat-chip-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── E-series badge ─────────────────────────────────────── */
.eseries-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--c-peach-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}
.eseries-label { color: var(--color-text-muted); }
.eseries-value { font-weight: var(--weight-bold); color: var(--c-peach-text); }
.eseries-diff  { color: var(--color-text-muted); }
.eseries-exact { color: #2d7a2d; font-weight: var(--weight-semibold); }

/* ── Add to BOM button ──────────────────────────────────── */
.btn-add-bom {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--c-peach-text);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  transition: opacity var(--duration-fast);
}
.btn-add-bom:hover { opacity: 0.82; }

/* ── Privacy note ───────────────────────────────────────── */
.privacy-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  justify-content: center;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── BOM section ────────────────────────────────────────── */
.bom-wrap {
  background: var(--color-surface);
  border: 1.5px solid var(--c-peach-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-10);
}
.bom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--c-peach-bg);
  border-bottom: 1px solid var(--c-peach-border);
}
.bom-title { font-weight: var(--weight-bold); color: var(--c-peach-text); font-size: var(--text-sm); }
.bom-empty {
  padding: var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.bom-table th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-peach-text);
  background: var(--c-peach-bg);
  border-bottom: 1px solid var(--c-peach-border);
  text-align: left;
}
.bom-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.bom-table tbody tr:last-child td { border-bottom: none; }
.bom-dots { display: flex; gap: 3px; align-items: center; }
.bom-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.btn-link {
  background: none; border: none; cursor: pointer;
  padding: 0; font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.btn-link:hover { color: var(--color-text-primary); }

/* ── Reference color table ──────────────────────────────── */
.ref-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}
.ref-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.ref-table th {
  background: var(--c-peach-bg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-peach-text);
  border-bottom: 1px solid var(--c-peach-border);
  text-align: left;
  white-space: nowrap;
}
.ref-table td {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.ref-table tr:last-child td { border-bottom: none; }
.color-swatch-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.color-swatch-cell .dot {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1.5px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.badge-mono {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: var(--text-xs);
  background: var(--c-peach-bg);
  color: var(--c-peach-text);
  border: 1px solid var(--c-peach-border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  white-space: nowrap;
}
.badge-muted {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── E-series multi comparison ──────────────────────────── */
.eseries-multi-wrap {
  background: var(--color-surface);
  border: 1px solid var(--c-peach-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.eseries-multi-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.eseries-multi-row:last-child { border-bottom: none; }
.eseries-series-label {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  width: 2.5rem;
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.eseries-series-val {
  font-weight: var(--weight-bold);
  color: var(--c-peach-text);
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.eseries-series-diff {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 4rem;
  text-align: right;
}
.eseries-series-diff.eseries-exact { color: #2d7a2d; font-weight: var(--weight-semibold); }
.eseries-series-diff.eseries-diff  { color: var(--color-text-muted); }

/* ── SMD panel ──────────────────────────────────────────── */
.smd-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
}
@media (max-width: 820px) {
  .smd-body { grid-template-columns: 1fr; }
}
.smd-input-wrap {
  border-right: 1.5px solid var(--color-border);
  padding: var(--space-6);
  background: var(--color-surface);
}
@media (max-width: 820px) {
  .smd-input-wrap { border-right: none; border-bottom: 1.5px solid var(--color-border); }
}
.smd-row { display: flex; gap: var(--space-2); }
.smd-text-input { flex: 1; font-size: var(--text-lg); letter-spacing: 0.1em; font-family: ui-monospace, monospace; }
.smd-result-wrap {
  padding: var(--space-6);
  background: var(--c-peach-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.smd-result-value {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--c-peach-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.smd-result-format {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.smd-result-error {
  font-size: var(--text-sm);
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #3d1a10;
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

.learn-more{max-width:820px;margin:1.25rem auto 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.1rem 1.5rem}
.learn-more-title{font-size:1.1rem;font-weight:800;color:var(--fl-text);margin:0 0 .75rem}
.learn-more h3{font-size:1rem;font-weight:800;color:var(--color-text-primary);margin:1.1rem 0 .5rem}
.learn-more p{font-size:.88rem;line-height:1.65;color:var(--color-text-secondary);margin:0 0 .75rem}
.learn-more a{color:var(--fl-text)}
.learn-more .faq-item{margin-bottom:.75rem}
.learn-more .faq-q{font-size:.88rem;font-weight:700;color:var(--color-text-primary);margin:0 0 .25rem}
.learn-more-meta{font-size:.72rem;color:var(--color-text-muted);margin-top:1rem}