:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111f;
  color: #f4f8ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -20%, #173a63 0, transparent 34rem),
    radial-gradient(circle at 100% 20%, #2b164d 0, transparent 31rem),
    #07111f;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin: 0.35rem 0 1.25rem;
}

.eyebrow {
  margin: 0 0 0.3rem;
  color: #83b8ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

h1 { margin: 0; font-size: clamp(1.35rem, 5vw, 2.15rem); letter-spacing: -0.04em; }
.header-note { margin: 0; color: #adc0d8; font-size: 0.88rem; text-align: right; }

.setup-panel, .audio-panel {
  border: 1px solid #29435f;
  border-radius: 1rem;
  background: rgb(8 23 40 / 88%);
  box-shadow: 0 1.2rem 4rem rgb(0 0 0 / 18%);
}

.setup-panel { padding: 1rem; }
.url-fields { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
label { display: grid; gap: 0.4rem; }
.field-label { display: flex; align-items: center; gap: 0.45rem; color: #dceaff; font-size: 0.9rem; font-weight: 700; }

input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #46617f;
  border-radius: 0.65rem;
  outline: none;
  background: #091828;
  color: #fff;
  font-size: 1rem;
}
input::placeholder { color: #8194aa; }
input:focus { border-color: #83b8ff; box-shadow: 0 0 0 3px rgb(131 184 255 / 22%); }

.setup-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.9rem; }
button { border: 0; border-radius: 0.6rem; min-height: 2.65rem; padding: 0.55rem 0.8rem; cursor: pointer; font-weight: 700; }
button:focus-visible, a:focus-visible { outline: 3px solid #f4c36b; outline-offset: 3px; }
.primary-button { background: #69a9ff; color: #07111f; }
.primary-button:active { background: #9ac9ff; }
.sync-button { background: #f4c36b; color: #251400; }
.sync-button:active { background: #ffe0a3; }
.sync-button:disabled, .text-button:disabled { cursor: not-allowed; opacity: 0.45; }
.text-button { background: transparent; color: #c8dcf5; }
.text-button:active { background: #17304c; }
.help, .audio-note { margin: 0.75rem 0 0; color: #a8b8ca; font-size: 0.78rem; line-height: 1.55; }
.message { min-height: 1.2rem; margin: 0.55rem 0 0; color: #ffd18d; font-size: 0.85rem; }

.viewer-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1rem; }
.player-card { overflow: hidden; border: 1px solid #2b4663; border-radius: 0.9rem; background: #040b13; }
.player-header { display: flex; align-items: center; justify-content: space-between; min-height: 2.9rem; padding: 0.65rem 0.85rem; font-weight: 800; }
.main-card .player-header { background: linear-gradient(90deg, #092b4e, #081d33); }
.mirror-card .player-header { background: linear-gradient(90deg, #311457, #19102a); }
.player-header > div { display: flex; align-items: center; gap: 0.45rem; }
.signal { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; box-shadow: 0 0 0.7rem currentColor; }
.signal.main { color: #4cb1ff; background: currentColor; }
.signal.mirror { color: #cf79ff; background: currentColor; }
.youtube-link { color: #d6e8ff; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.youtube-link:hover { text-decoration: underline; }

.player-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, #172d43, #040b13 70%);
}
.player-frame p { margin: 0; padding: 1rem; color: #a7b8cc; text-align: center; font-size: 0.9rem; }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; padding: 0.65rem; background: #081625; }
.individual-button { min-height: 2.4rem; padding: 0.45rem; border: 1px solid #385774; border-radius: 0.5rem; background: #10283f; color: #dcecff; font-size: 0.78rem; }
.individual-button.play { border-color: #5b9be0; background: #194a7d; color: #fff; }
.individual-button:disabled { cursor: not-allowed; opacity: 0.45; }

.audio-panel { margin-top: 1rem; padding: 0.9rem; }
.audio-panel > p:first-child { margin: 0 0 0.6rem; font-size: 0.88rem; font-weight: 800; }
.audio-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.audio-button { background: #10253d; color: #c9ddf3; border: 1px solid #34526f; }
.audio-button.active { border-color: #77b5ff; background: #194a7d; color: #fff; }

@media (min-width: 680px) {
  .app-shell { padding: 2rem 1.5rem 3rem; }
  .url-fields { grid-template-columns: 1fr 1fr; }
  .viewer-grid { grid-template-columns: 1fr 1fr; }
  .audio-actions { display: flex; flex-wrap: wrap; }
  .player-controls { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 430px) {
  .app-header { align-items: start; flex-direction: column; }
  .header-note { text-align: left; }
}