/* Shared MIB app surface: quiet, functional and consistent across embedded tools. */
:root {
  --mib-app-bg: #0b1012;
  --mib-app-panel: #151c1f;
  --mib-app-panel-2: #1a2327;
  --mib-app-line: #344249;
  --mib-app-text: #edf2f3;
  --mib-app-muted: #9eabb0;
  --mib-app-gold: #d8ad55;
  --mib-app-cyan: #42b9cf;
  --mib-app-green: #4bb48a;
}

html,
body {
  background: var(--mib-app-bg) !important;
  color-scheme: dark;
  max-width: 100%;
  overflow-x: clip !important;
}

body.is-embedded {
  width: 100%;
  min-width: 0;
}

body.is-embedded {
  color: var(--mib-app-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  overflow-x: hidden;
}

body.is-embedded .font-orbitron,
body.is-embedded [class*="bg-clip-text"] {
  background: none !important;
  color: var(--mib-app-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

body.is-embedded [class*="bg-gradient"] {
  background-image: none !important;
}

body.is-embedded [class*="shadow-"] {
  box-shadow: none !important;
}

body.is-embedded main {
  background: var(--mib-app-bg) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body.is-embedded main > div,
body.is-embedded #song-editor-bar,
body.is-embedded .at-output-panel,
body.is-embedded #fretboard-canvas {
  border-radius: 7px !important;
  border-color: var(--mib-app-line) !important;
}

body.is-embedded button,
body.is-embedded select,
body.is-embedded input {
  border-radius: 5px !important;
}

/* Audio-to-tab: give each work surface one clear visual role. */
body.is-embedded .at-control-row,
body.is-embedded #song-editor-bar {
  background: var(--mib-app-panel) !important;
  border-color: var(--mib-app-line) !important;
}

body.is-embedded .at-control-row button,
body.is-embedded .at-action-strip button,
body.is-embedded #song-editor-bar button {
  min-height: 38px;
  border: 1px solid var(--mib-app-line) !important;
  background: var(--mib-app-panel-2) !important;
  color: var(--mib-app-text) !important;
  box-shadow: none !important;
}

body.is-embedded .at-control-row button:hover,
body.is-embedded .at-action-strip button:hover,
body.is-embedded #song-editor-bar button:hover {
  border-color: #687980 !important;
  background: #223036 !important;
}

body.is-embedded #mode-auto,
body.is-embedded #btn-inst-guitar,
body.is-embedded #btn-print-sheet {
  background: #30291b !important;
  border-color: var(--mib-app-gold) !important;
  color: #f0c96e !important;
}

body.is-embedded #btn-song-record {
  background: #2a1c20 !important;
  border-color: #88464f !important;
  color: #e9a4aa !important;
}

body.is-embedded #btn-song-play {
  background: #183129 !important;
  border-color: #3d8e71 !important;
  color: #8ed3b4 !important;
}

body.is-embedded #btn-toggle-mic {
  min-height: 42px;
  border: 1px solid #4fc2d6 !important;
  background: var(--mib-app-cyan) !important;
  color: #071014 !important;
  box-shadow: none !important;
}

body.is-embedded #btn-toggle-mic[aria-pressed="true"] {
  background: #a94a53 !important;
  border-color: #d2747c !important;
  color: #fff !important;
}

body.is-embedded #mib-consent-accept-all {
  background: var(--mib-app-gold) !important;
  border: 1px solid #efc873 !important;
  color: #101416 !important;
  box-shadow: none !important;
}

body.is-embedded #mib-consent-essential {
  background: #1a2327 !important;
  border: 1px solid #4a5a61 !important;
  color: var(--mib-app-text) !important;
  box-shadow: none !important;
}

body.is-embedded #song-title-input,
body.is-embedded #song-author-input,
body.is-embedded #song-bpm-input,
body.is-embedded #song-meter-select,
body.is-embedded .at-mobile-selectors select,
body.is-embedded .at-output-switch select {
  background: #182226 !important;
  border-color: var(--mib-app-line) !important;
  color: var(--mib-app-text) !important;
  box-shadow: none !important;
}

body.is-embedded #sheet-svg,
body.is-embedded #tab-output,
body.is-embedded #fretboard-canvas {
  background: #111719 !important;
  border-color: var(--mib-app-line) !important;
  box-shadow: none !important;
}

body.is-embedded #tab-output {
  color: #73cdb0 !important;
}

body.is-embedded .at-output-panel h3 {
  letter-spacing: 0 !important;
}

body.is-embedded #fretboard-canvas {
  background-image: none !important;
  border-width: 1px !important;
}

/* The Mensur tool keeps its wide tables inside their own swipe areas. */
body.is-embedded main,
body.is-embedded main > div {
  box-sizing: border-box !important;
  width: 100% !important;
}

body.is-embedded main > div {
  min-width: 0 !important;
}

body.is-embedded main .overflow-x-auto {
  max-width: 100% !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* The standalone metronome shares the same compact MIB app surface. */
html.dark body {
  background: var(--mib-app-bg) !important;
  color: var(--mib-app-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  max-width: 100vw;
  overflow-x: clip !important;
}

html.dark body .font-orbitron,
html.dark body .font-cinzel {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

html.dark body > header {
  background: #0e1518 !important;
  border-color: var(--mib-app-line) !important;
}

html.dark body > header > div {
  flex-wrap: wrap;
  min-width: 0;
}

html.dark body > header > div > div:first-child,
html.dark body > header > div > div:first-child > a {
  min-width: 0;
}

html.dark body > header > div > div:first-child > a > div:first-child {
  background: #17252a !important;
  border: 1px solid #496169;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--mib-app-cyan) !important;
}

html.dark body > header a[href*="paypal"] {
  display: none !important;
}

html.dark body #metro-screen {
  box-sizing: border-box;
  max-width: 896px;
  min-width: 0;
  overflow-x: clip;
  width: 100%;
}

html.dark body #metro-screen > div.bg-gradient-to-b {
  background: var(--mib-app-panel) !important;
  border: 1px solid var(--mib-app-line) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  min-width: 0;
}

html.dark body #metro-screen .bg-neutral-950,
html.dark body #metro-screen [class*="bg-neutral-900"] {
  background: var(--mib-app-panel-2) !important;
  border-color: var(--mib-app-line) !important;
  box-shadow: none !important;
}

html.dark body #metro-screen [class*="bg-gradient"] {
  background-image: none !important;
}

html.dark body #metro-screen .blur-3xl,
html.dark body #metro-screen .blur-2xl {
  display: none !important;
}

html.dark body #metro-bpm-val {
  color: var(--mib-app-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

html.dark body #metro-screen button,
html.dark body #metro-screen select,
html.dark body #metro-screen input:not([type="range"]),
html.dark body > header a {
  border-radius: 5px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

html.dark body #metro-screen button:not(#metro-toggle-btn) {
  background-color: var(--mib-app-panel-2) !important;
  border: 1px solid var(--mib-app-line) !important;
  color: var(--mib-app-text) !important;
}

html.dark body #metro-screen #metro-toggle-btn {
  background: var(--mib-app-gold) !important;
  border: 1px solid #efc873 !important;
  color: #101416 !important;
  font-size: 16px !important;
  min-height: 54px;
  text-transform: none !important;
}

html.dark body #metro-screen #metro-slider,
html.dark body #metro-screen input[type="checkbox"] {
  accent-color: var(--mib-app-cyan) !important;
}

#mib-consent-accept-all {
  background: var(--mib-app-gold) !important;
  border: 1px solid #efc873 !important;
  color: #101416 !important;
  box-shadow: none !important;
}

#mib-consent-essential {
  background: #1a2327 !important;
  border: 1px solid #4a5a61 !important;
  color: var(--mib-app-text) !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  html.dark body > header {
    padding: 8px 10px !important;
  }

  html.dark body > header > div {
    gap: 7px !important;
  }

  html.dark body > header > div > div:first-child {
    flex: 1 1 190px;
  }

  html.dark body > header > div > div:last-child {
    flex: 0 0 auto;
    gap: 5px !important;
  }

  html.dark body > header > div > div:last-child a[download] {
    min-height: 36px;
    padding: 0 9px !important;
  }

  html.dark body > header > div > div:last-child a[href="/apps/"] {
    padding: 8px !important;
  }

  html.dark body #metro-screen {
    padding: 10px 8px 78px !important;
  }

  html.dark body #metro-screen > div.bg-gradient-to-b {
    padding: 14px !important;
  }

  html.dark body #metro-bpm-val {
    font-size: 60px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 720px) {
  body.is-embedded main {
    padding: 8px 7px 16px !important;
    gap: 8px !important;
  }

  body.is-embedded .at-control-row,
  body.is-embedded #song-editor-bar {
    padding: 10px !important;
  }

  body.is-embedded .at-action-strip button,
  body.is-embedded #song-editor-bar button {
    min-height: 38px;
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  body.is-embedded #btn-toggle-mic {
    min-height: 42px;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-embedded *,
  body.is-embedded *::before,
  body.is-embedded *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* v20260923-03: standalone apps use the same restrained controls as Musikzentrale. */
body.is-embedded header { display: none !important; }
body.is-embedded main { padding-top: 8px !important; }
body.is-embedded button,
body.is-embedded select,
body.is-embedded input,
body.is-embedded textarea { box-shadow: none !important; letter-spacing: 0 !important; }
body.is-embedded .tab-mode-btn,
body.is-embedded .at-mobile-selectors button,
body.is-embedded .at-mobile-selectors select { min-height: 40px; }
@media (max-width: 620px) {
  body.is-embedded main { padding: 6px 7px 12px !important; }
  body.is-embedded .at-control-row,
  body.is-embedded #song-editor-bar { gap: 6px !important; }
  body.is-embedded .at-control-row button,
  body.is-embedded #song-editor-bar button { min-height: 36px; padding-inline: 8px !important; font-size: 11px !important; }
}