/* ── Mode switcher (all pages) ───────────────────────────── */
.mode-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.mode-switcher label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.mode-switcher input[type=radio] { display: none; }
.mode-switcher input[type=radio]:checked + label {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.mode-divider { color: rgba(255,255,255,0.2); font-size: 0.75rem; }

/* ── Visibility helpers ──────────────────────────────────── */
body[data-mode="pizza"] .pizza-only { display: revert; }
body[data-mode="pizza"] .guitar-only { display: none; }
body[data-mode="guitar"] .pizza-only { display: none; }
body[data-mode="guitar"] .guitar-only { display: revert; }

/* ── Pizza mode layout overrides (all pages) ─────────────── */
body[data-mode="pizza"] {
  background-color: #fff8ee !important;
  background-image:
    repeating-linear-gradient(45deg,  rgba(220,38,38,0.05) 0, rgba(220,38,38,0.05) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, rgba(220,38,38,0.05) 0, rgba(220,38,38,0.05) 1px, transparent 0, transparent 50%) !important;
  background-size: 28px 28px !important;
}

body[data-mode="pizza"] header {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 45%, #ea580c 100%) !important;
}
body[data-mode="pizza"] header::before {
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 10px,
    transparent 10px, transparent 20px
  ) !important;
}
body[data-mode="pizza"] header h1 {
  background: linear-gradient(90deg, #fff 0%, #fbbf24 55%, #fde68a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body[data-mode="pizza"] header .tagline {
  color: rgba(255,255,255,0.85) !important;
}

/* Tool container on inner pages */
body[data-mode="pizza"] .tool-container {
  background: #fff8f0 !important;
  border: 1.5px solid rgba(220,38,38,0.2) !important;
}
body[data-mode="pizza"] .tool-container h1,
body[data-mode="pizza"] .tool-container h2 {
  color: #7f1d1d !important;
}
body[data-mode="pizza"] .tool-container > p {
  color: #78350f !important;
}

/* Forms / inputs */
body[data-mode="pizza"] .input-group label { color: #7f1d1d !important; }
body[data-mode="pizza"] .input-group input,
body[data-mode="pizza"] .input-group select {
  border-color: rgba(220,38,38,0.35) !important;
}
body[data-mode="pizza"] .input-group input:focus,
body[data-mode="pizza"] .input-group select:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.15) !important;
}

/* Buttons */
body[data-mode="pizza"] button[type=submit],
body[data-mode="pizza"] #runCalc,
body[data-mode="pizza"] #startBtn,
body[data-mode="pizza"] .btn-primary {
  background: #dc2626 !important;
}
body[data-mode="pizza"] button[type=submit]:hover,
body[data-mode="pizza"] #runCalc:hover,
body[data-mode="pizza"] #startBtn:hover,
body[data-mode="pizza"] .btn-primary:hover {
  background: #b91c1c !important;
}

/* Result box */
body[data-mode="pizza"] .result,
body[data-mode="pizza"] #result {
  background: #fff1e6 !important;
  border-left-color: #dc2626 !important;
}

/* Nav home link */
nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
}
nav a {
  color: #005fc4;
  text-decoration: none;
  opacity: 0.8;
}
nav a:hover { text-decoration: underline; opacity: 1; }
body[data-mode="pizza"] nav a { color: #b91c1c !important; }

/* Footer */
body[data-mode="pizza"] footer {
  border-color: #fbbf24 !important;
  color: #92400e !important;
  background: #fff8f0 !important;
}

/* Index-specific overrides (kept here for single source of truth) */
body[data-mode="pizza"] .section-label {
  color: #dc2626 !important;
  letter-spacing: 0.18em !important;
}
body[data-mode="pizza"] .tool-card {
  background: #fff8f0 !important;
  border: 1.5px solid rgba(220,38,38,0.2) !important;
}
body[data-mode="pizza"] .tool-card:hover {
  box-shadow: 0 8px 28px rgba(220,38,38,0.22) !important;
  transform: translateY(-3px) rotate(0.4deg) !important;
}
body[data-mode="pizza"] .tool-card.hero:hover { transform: translateY(-3px) rotate(0deg) !important; }
body[data-mode="pizza"] .tool-card h3    { color: #7f1d1d !important; }
body[data-mode="pizza"] .tool-card .desc { color: #78350f !important; }
body[data-mode="pizza"] .tool-preview    { background: linear-gradient(160deg, #1c0400 0%, #3b0d00 100%) !important; }
body[data-mode="pizza"] .exp-card {
  background: #fff8f0 !important;
  border: 1.5px solid rgba(220,38,38,0.15) !important;
}
body[data-mode="pizza"] .exp-card:hover {
  box-shadow: 0 4px 18px rgba(220,38,38,0.18) !important;
  transform: translateY(-2px) rotate(-0.3deg) !important;
}
body[data-mode="pizza"] .exp-card h4 { color: #b91c1c !important; }
body[data-mode="pizza"] .exp-card p  { color: #78350f !important; }
body[data-mode="pizza"] .badge-mic  { background: #fef2f2 !important; color: #dc2626 !important; }
body[data-mode="pizza"] .badge-calc { background: #fff7ed !important; color: #c2410c !important; }
body[data-mode="pizza"] .cat-audio   { background: #fef2f2 !important; color: #b91c1c !important; }
body[data-mode="pizza"] .cat-setup   { background: #fff7ed !important; color: #c2410c !important; }
body[data-mode="pizza"] .cat-theory  { background: #fefce8 !important; color: #92400e !important; }
body[data-mode="pizza"] .cat-luthier { background: #fffbeb !important; color: #854d0e !important; }