/*
  Styles for the Music-T web studio's single page (templates/studio.html,
  served at GET /studio). Loaded once from base.html; class names below
  are referenced directly by static/js/app.js (e.g. .is-active/.is-hidden
  toggles used to switch between the upload/loading/result views and to
  show/hide the Stage Review preview panel).

  Rough section map, in file order:
    - :root custom properties (color tokens) + a *{box-sizing} reset.
    - .score-portal / .view(.is-active) -- the three top-level view
      sections (#uploadView / #loadingView / #resultView) and the
      show/hide mechanism app.js's showView() drives.
    - Upload form: .portal-console, .portal-copy, .portal-grid,
      .lyric-capsule / .xml-portal (upload dropzones), .language-select,
      .mode-actions (Stage Review / Full Mix buttons), .status.
    - Decision modal: .decision-modal / .decision-card (professional
      evaluation yes/no prompt).
    - Loading view: .scanner, .scan-staff/.scan-line (animated scan
      effect), .progress-console/.progress-head/.progress-track/
      .progress-fill/.progress-steps (the progress bar + step markers).
    - Stage Review preview: .stage-preview, .stage-tabs, .stage-grid,
      .stage-score (embeds the vendored OpenSheetMusicDisplay renderer),
      .stage-actions (Next Step / Restart Step buttons).
    - Result view: .result-stage/.result-grid/.result-card, .audio-panel
      (playback + waveform), .mix-offset-panel (vocal-timing re-mix
      slider), .score-pills/.score-sheet/.osmd-score (sheet music panel),
      .result-stage-review (where the Stage Review preview panel gets
      re-parented once a job completes -- see moveStagePreviewToLoading/
      renderResultStageReview in app.js), .evaluation-band/.metrics/
      .evaluation-copy (professional evaluation report).
    - Responsive breakpoints (@media max-width: 980px/580px) interleaved
      after the sections they adjust, plus a @media (prefers-reduced-motion)
      block disabling animations.

  NOTE on structure: partway through the file, a second block marked
  "/* v10 aesthetic refinement */" redefines the :root color custom
  properties (a darker palette) and re-declares many of the same selectors
  already styled above (body, .score-portal, .portal-top, etc.), plus its
  own responsive breakpoints near the end of the file. Because CSS cascades
  per declared property rather than replacing whole rules, this acts as an
  unconditional visual "patch" layered over the earlier declarations
  (later same-specificity rules win) rather than a `prefers-color-scheme`
  toggle -- both sections are always active, not alternative themes chosen
  at runtime. This explains why several selectors and CSS variables appear
  twice in this file. Flagged for awareness, not consolidated
  (documentation pass, 2026-07-20).
*/
:root {
  --ink: #05070a;
  --muted: #6c7480;
  --line: rgba(5, 7, 10, 0.12);
  --glass: rgba(255, 255, 255, 0.78);
  --white: #ffffff;
  --cyan: #00b9ea;
  --lime: #b8ff2c;
  --shadow: 0 32px 110px rgba(5, 7, 10, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(5, 7, 10, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(5, 7, 10, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(0, 185, 234, 0.18), transparent 34%),
    linear-gradient(180deg, #fbfcfd, #f2f5f8);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.score-portal {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 56px);
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.portal-top,
.portal-console,
.result-stage,
.scanner {
  max-width: 1180px;
  margin-inline: auto;
}

.portal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.wordmark {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 950;
  letter-spacing: 0;
}

.wordmark span,
.signal,
.result-top span,
.decision-card span,
.eval-title span {
  color: var(--cyan);
}

.signal {
  padding: 8px 10px;
  border: 1px solid rgba(0, 185, 234, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-console,
.result-card,
.evaluation-band,
.decision-card,
.scanner {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.portal-console {
  position: relative;
  padding: clamp(22px, 4vw, 44px);
  overflow: hidden;
}

.portal-console::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(0, 185, 234, 0.16);
  border-radius: 8px;
  pointer-events: none;
}

.portal-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(250px, 0.45fr);
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}

h1,
h2,
p {
  margin-top: 0;
}

.portal-copy h1 {
  margin-bottom: 0;
  max-width: 780px;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: 0;
}

.portal-copy p,
.decision-card p,
.scanner p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.portal-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(330px, 0.58fr);
  gap: 16px;
}

.portal-grid-mp3 {
  grid-template-columns: 1fr;
}

.lyric-capsule,
.xml-portal {
  display: grid;
  gap: 12px;
}

.lyric-capsule > span,
.xml-portal > span,
.card-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

textarea {
  width: 100%;
  min-height: 420px;
  padding: 22px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  outline: none;
  resize: vertical;
  background: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.9;
}

textarea:focus,
.xml-portal:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 5px rgba(0, 185, 234, 0.10);
}

.xml-portal {
  position: relative;
  min-height: 420px;
  align-content: center;
  justify-items: center;
  padding: 28px;
  border: 1px solid rgba(0, 185, 234, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 185, 234, 0.10), rgba(184, 255, 44, 0.08)),
    rgba(255, 255, 255, 0.70);
  overflow: hidden;
}

.mp3-portal {
  min-height: 440px;
}

.xml-portal input {
  display: none;
}

.xml-portal strong {
  z-index: 1;
  max-width: 260px;
  text-align: center;
  font-size: 30px;
  line-height: 1.05;
}

.xml-portal small {
  z-index: 1;
  color: var(--muted);
}

.portal-ring {
  position: absolute;
  inset: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 185, 234, 0.22);
  border-radius: 50%;
}

.portal-ring i {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(5, 7, 10, 0.09);
  border-radius: 50%;
}

.portal-ring i:nth-child(2) { inset: 48px; border-color: rgba(0, 185, 234, 0.20); }
.portal-ring i:nth-child(3) { inset: 76px; border-color: rgba(184, 255, 44, 0.24); }
.portal-ring i:nth-child(4) { inset: 104px; background: rgba(255, 255, 255, 0.56); }

.primary,
.ghost {
  min-height: 50px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 950;
}

.primary {
  border: 0;
  background: var(--ink);
  color: white;
}

.ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.mode-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.language-select {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.language-select span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.language-select select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(218, 242, 250, 0.16);
  border-radius: 8px;
  color: #f6fbff;
  background: rgba(255, 255, 255, 0.07);
  font-size: 15px;
  font-weight: 900;
}

.language-select select:focus {
  outline: 2px solid rgba(34, 216, 255, 0.38);
  outline-offset: 2px;
}

.portal-submit {
  width: 100%;
}

.status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.decision-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 7, 10, 0.34);
  backdrop-filter: blur(20px);
}

.decision-modal.is-hidden,
.evaluation-band.is-hidden {
  display: none;
}

.decision-card {
  width: min(540px, 100%);
  padding: 32px;
}

.decision-card h2 {
  margin: 12px 0;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 0.98;
}

.decision-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 24px;
}

.loading-stage {
  min-height: calc(100vh - 112px);
}

.scanner {
  display: grid;
  place-items: center;
  gap: 18px;
  margin-top: 12vh;
  padding: clamp(34px, 6vw, 70px);
  text-align: center;
}

.scanner h2 {
  margin-bottom: 0;
  font-size: clamp(42px, 6vw, 74px);
  line-height: 0.94;
}

.scan-staff {
  position: relative;
  width: min(540px, 100%);
  height: 86px;
}

.scan-staff i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(5, 7, 10, 0.24);
}

.scan-staff i:nth-child(1) { top: 10px; }
.scan-staff i:nth-child(2) { top: 28px; }
.scan-staff i:nth-child(3) { top: 46px; }
.scan-staff i:nth-child(4) { top: 64px; }
.scan-staff i:nth-child(5) { top: 82px; }

.scan-line {
  width: min(540px, 100%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--lime), transparent);
  animation: scanMove 1.25s infinite ease-in-out;
}

.stage-preview {
  display: grid;
  gap: 14px;
  width: min(1040px, 100%);
  margin-top: 8px;
  padding: 16px;
  border: 1px solid rgba(218, 242, 250, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}

.stage-preview.is-hidden {
  display: none;
}

.stage-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stage-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.stage-preview-head strong {
  color: #f6fbff;
  font-size: 14px;
}

.stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(218, 242, 250, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.stage-tabs button.is-active {
  border-color: rgba(34, 216, 255, 0.34);
  color: #f6fbff;
  background: rgba(34, 216, 255, 0.10);
}

.stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 12px;
}

.stage-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(218, 242, 250, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.stage-grid pre {
  min-height: 260px;
  max-height: 430px;
  overflow: auto;
  color: #eef8ff;
  background: rgba(0, 0, 0, 0.20);
  font-size: 15px;
  line-height: 1.6;
}

.stage-grid pre.is-hidden {
  display: none;
}

.stage-grid audio {
  width: 100%;
  margin-top: 10px;
}

.stage-grid audio.is-hidden,
.stage-score.is-hidden {
  display: none;
}

.stage-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.stage-restart.is-hidden,
.stage-next.is-hidden {
  display: none;
}

.stage-restart,
.stage-next {
  min-width: 180px;
}

.stage-score {
  min-height: 320px;
  max-height: 520px;
  overflow: auto;
  border: 1px solid rgba(218, 242, 250, 0.10);
  border-radius: 8px;
  background: #ffffff;
}

.stage-score .score-render-status {
  min-height: 320px;
}

@keyframes scanMove {
  0% { transform: translateX(-18%); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: translateX(18%); opacity: 0.2; }
}

.result-stage {
  max-width: 1220px;
  margin-inline: auto;
}

.result-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.result-top span,
.decision-card span,
.eval-title span {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.result-top h1 {
  margin: 8px 0 0;
  font-size: clamp(48px, 7vw, 94px);
  line-height: 0.9;
  letter-spacing: 0;
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: 16px;
}

.result-card,
.evaluation-band {
  padding: 18px;
}

pre {
  min-height: 220px;
  margin: 12px 0 0;
  padding: 24px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.70);
  white-space: pre-wrap;
  font: 760 25px/1.75 "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.audio-panel {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(0, 185, 234, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 185, 234, 0.12), rgba(184, 255, 44, 0.08) 48%, rgba(255, 255, 255, 0.80)),
    rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.audio-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audio-panel strong {
  position: relative;
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.audio-panel strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(0, 185, 234, 0.10);
  vertical-align: 1px;
}

.audio-panel.is-ready strong::before {
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(184, 255, 44, 0.14);
}

.audio-waveform {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(5, 7, 10, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
}

.audio-waveform i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), rgba(5, 7, 10, 0.90));
  opacity: 0.72;
}

.audio-waveform i:nth-child(2),
.audio-waveform i:nth-child(7) {
  height: 24px;
}

.audio-waveform i:nth-child(3),
.audio-waveform i:nth-child(5) {
  height: 34px;
}

.audio-waveform i:nth-child(4),
.audio-waveform i:nth-child(8) {
  height: 18px;
}

.audio-panel audio {
  width: 100%;
  height: 42px;
  color-scheme: light;
  border-radius: 8px;
}

.mix-offset-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.mix-offset-panel.is-hidden {
  display: none;
}

.mix-offset-head,
.mix-offset-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mix-offset-head span,
.mix-offset-scale span,
.mix-offset-panel small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mix-offset-head strong {
  font-size: 13px;
  font-weight: 950;
}

.mix-offset-panel input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}

.remix-button {
  justify-self: start;
  min-width: 120px;
}

.score-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.score-pills span,
.score-pills b {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.score-sheet {
  position: relative;
  max-width: 100%;
  min-height: 500px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden auto;
}

.score-render-status {
  display: grid;
  min-height: 500px;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.score-render-status.is-hidden {
  display: none;
}

.osmd-score {
  width: 100%;
  min-width: 0;
  padding: clamp(8px, 1.8vw, 18px);
}

.osmd-score svg {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
}

.evaluation-band {
  margin-top: 16px;
}

.result-stage-review {
  margin-top: 18px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(218, 242, 250, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.result-stage-review.is-hidden {
  display: none;
}

.result-stage-review .stage-preview {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.eval-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eval-title strong {
  color: var(--cyan);
  font-size: 22px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.metrics div,
.evaluation-copy article {
  padding: 14px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

meter {
  width: 100%;
  height: 8px;
}

meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.10);
}

meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
}

.evaluation-copy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.evaluation-copy strong {
  display: block;
  margin-bottom: 8px;
}

.evaluation-copy p,
.evaluation-copy li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.evaluation-copy ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .portal-copy,
  .portal-grid,
  .result-grid,
  .stage-grid,
  .metrics,
  .evaluation-copy {
    grid-template-columns: 1fr;
  }

  .xml-portal,
  textarea,
  pre,
  .score-sheet {
    min-height: 320px;
  }

  pre {
    min-height: 0;
  }
}

@media (max-width: 580px) {
  .score-portal {
    padding: 18px;
  }

  .portal-top,
  .result-top,
  .decision-actions {
    display: grid;
  }

  .portal-copy h1,
  .result-top h1 {
    font-size: 44px;
  }

  .portal-console,
  .decision-card,
  .scanner {
    padding: 22px;
  }

  .audio-head {
    display: grid;
  }

  .audio-panel strong {
    text-align: left;
  }
}

/* v10 aesthetic refinement */
:root {
  --ink: #f7fafc;
  --paper-ink: #071016;
  --muted: #94a2ad;
  --line: rgba(226, 241, 247, 0.14);
  --glass: rgba(12, 19, 24, 0.76);
  --white: #ffffff;
  --cyan: #22d8ff;
  --lime: #baff29;
  --dark: #04070a;
  --panel: rgba(10, 16, 21, 0.84);
  --panel-strong: rgba(15, 24, 31, 0.94);
  --shadow: 0 34px 120px rgba(0, 0, 0, 0.42);
}

body {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(34, 216, 255, 0.10), transparent 34%),
    linear-gradient(180deg, #05090d 0%, #091016 42%, #030507 100%);
  background-size: 54px 54px, 54px 54px, auto, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34, 216, 255, 0.08), transparent 24%, transparent 76%, rgba(186, 255, 41, 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%, rgba(0, 0, 0, 0.18));
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.score-portal {
  position: relative;
  isolation: isolate;
}

.portal-top,
.portal-console,
.result-stage,
.scanner {
  max-width: 1240px;
}

.portal-top {
  margin-bottom: clamp(18px, 3vw, 34px);
}

.wordmark {
  color: #f9fcff;
  text-shadow: 0 0 32px rgba(34, 216, 255, 0.18);
}

.wordmark span,
.result-top span,
.decision-card span,
.eval-title span {
  color: var(--cyan);
}

.portal-console,
.result-card,
.evaluation-band,
.decision-card,
.scanner {
  border: 1px solid rgba(218, 242, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.portal-console {
  padding: clamp(24px, 4.5vw, 54px);
}

.portal-console::before {
  inset: 16px;
  border-color: rgba(34, 216, 255, 0.18);
  opacity: 0.82;
}

.portal-copy {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.38fr);
  margin-bottom: clamp(20px, 3vw, 34px);
}

.portal-copy h1,
.result-top h1,
.scanner h2,
.decision-card h2 {
  color: #fbfdff;
  font-weight: 950;
}

.portal-copy h1 {
  max-width: 860px;
  font-size: clamp(54px, 8vw, 118px);
}

.portal-copy p,
.decision-card p,
.scanner p,
.status {
  color: var(--muted);
}

.portal-grid {
  grid-template-columns: minmax(420px, 1fr) minmax(340px, 0.52fr);
  gap: 18px;
}

.portal-grid-mp3 {
  grid-template-columns: minmax(0, 1fr);
}

.lyric-capsule > span,
.xml-portal > span,
.card-label,
.audio-panel span,
.score-pills span,
.score-pills b {
  letter-spacing: 0.12em;
}

textarea {
  min-height: 440px;
  border-color: rgba(218, 242, 250, 0.12);
  color: #edf6fa;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(3, 8, 12, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

textarea::selection,
pre::selection {
  background: rgba(34, 216, 255, 0.28);
}

textarea:focus,
.xml-portal:focus-within {
  border-color: rgba(34, 216, 255, 0.68);
  box-shadow: 0 0 0 5px rgba(34, 216, 255, 0.10), 0 22px 60px rgba(0, 0, 0, 0.22);
}

.xml-portal {
  min-height: 440px;
  border-color: rgba(34, 216, 255, 0.34);
  color: #f7fbff;
  background:
    linear-gradient(145deg, rgba(34, 216, 255, 0.16), rgba(186, 255, 41, 0.08) 46%, rgba(255, 255, 255, 0.045)),
    rgba(6, 13, 18, 0.76);
}

.xml-portal strong {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0;
}

.xml-portal small {
  color: var(--muted);
}

.portal-ring {
  width: 280px;
  height: 280px;
  border-color: rgba(34, 216, 255, 0.28);
}

.portal-ring i {
  border-color: rgba(232, 249, 255, 0.10);
}

.portal-ring i:nth-child(4) {
  background: rgba(255, 255, 255, 0.055);
}

.primary,
.ghost {
  min-height: 54px;
  border-radius: 8px;
  letter-spacing: 0;
}

.primary {
  color: #031017;
  background:
    linear-gradient(90deg, var(--cyan), #e4fbff 52%, var(--lime));
  box-shadow: 0 18px 54px rgba(34, 216, 255, 0.18);
}

.ghost {
  border-color: rgba(218, 242, 250, 0.16);
  color: #f5fbff;
  background: rgba(255, 255, 255, 0.055);
}

.primary:hover,
.ghost:hover,
.xml-portal:hover {
  transform: translateY(-1px);
}

.primary,
.ghost,
.xml-portal {
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.decision-modal {
  background: rgba(0, 0, 0, 0.58);
}

.decision-card {
  background:
    linear-gradient(180deg, rgba(34, 216, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(8, 15, 20, 0.96);
}

.loading-stage {
  min-height: calc(100vh - 112px);
}

.scanner {
  margin-top: 10vh;
  min-height: min(660px, calc(100vh - 180px));
}

.scan-staff i {
  background: rgba(242, 250, 255, 0.34);
}

.scan-line {
  box-shadow: 0 0 34px rgba(34, 216, 255, 0.36);
}

.progress-console {
  display: grid;
  gap: 12px;
  width: min(620px, 100%);
  margin-top: 6px;
  padding: 16px;
  border: 1px solid rgba(218, 242, 250, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(34, 216, 255, 0.12), rgba(186, 255, 41, 0.05)),
    rgba(4, 10, 14, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #eaf8ff;
}

.progress-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.progress-head strong {
  color: var(--lime);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(186, 255, 41, 0.20);
}

.progress-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(218, 242, 250, 0.10);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.06);
  background-size: 24px 100%, auto;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--cyan), #e4fbff 52%, var(--lime));
  box-shadow: 0 0 28px rgba(34, 216, 255, 0.34);
  transition: width 260ms ease;
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  animation: progressGlint 1.2s infinite ease-in-out;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.progress-steps span {
  position: relative;
  display: grid;
  min-height: 32px;
  place-items: center;
  border: 1px solid rgba(218, 242, 250, 0.10);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-steps span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: rgba(148, 162, 173, 0.54);
}

.progress-steps span.is-active,
.progress-steps span.is-complete {
  border-color: rgba(34, 216, 255, 0.26);
  color: #f6fbff;
  background: rgba(34, 216, 255, 0.08);
}

.progress-steps span.is-active::before {
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(34, 216, 255, 0.12);
}

.progress-steps span.is-complete::before {
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(186, 255, 41, 0.10);
}

@keyframes progressGlint {
  0% { transform: translateX(-100%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.result-stage {
  max-width: 1280px;
}

.result-top {
  margin-bottom: 20px;
}

.result-grid {
  grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
  gap: 18px;
}

.result-card,
.evaluation-band {
  padding: clamp(16px, 2vw, 22px);
}

.text-card {
  display: grid;
  align-content: start;
}

pre {
  min-height: 210px;
  max-height: 380px;
  overflow: auto;
  border-color: rgba(218, 242, 250, 0.12);
  color: #f6fbff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(2, 7, 11, 0.60);
  font: 760 clamp(20px, 2.2vw, 28px)/1.62 "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.audio-panel {
  margin-top: 14px;
  border-color: rgba(34, 216, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(34, 216, 255, 0.13), rgba(186, 255, 41, 0.08) 48%, rgba(255, 255, 255, 0.045)),
    rgba(4, 10, 14, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.audio-panel strong {
  color: #eaf8ff;
}

.audio-waveform {
  border-color: rgba(218, 242, 250, 0.10);
  background: rgba(255, 255, 255, 0.055);
}

.audio-waveform i {
  background: linear-gradient(180deg, var(--cyan), rgba(255, 255, 255, 0.42));
}

.audio-panel audio {
  filter: invert(1) hue-rotate(165deg) saturate(1.4);
}

.score-card {
  min-width: 0;
}

.score-pills {
  margin: 12px 0 14px;
}

.score-pills span,
.score-pills b {
  border-color: rgba(218, 242, 250, 0.14);
  color: #dcedf4;
  background: rgba(255, 255, 255, 0.06);
}

.score-sheet {
  min-height: 680px;
  border-color: rgba(218, 242, 250, 0.16);
  background:
    linear-gradient(180deg, #ffffff, #f8fbfc);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.score-render-status {
  min-height: 680px;
  color: #5e6c75;
}

.osmd-score {
  padding: clamp(10px, 1.6vw, 20px);
  background: #ffffff;
}

.evaluation-band {
  background:
    linear-gradient(180deg, rgba(34, 216, 255, 0.10), rgba(255, 255, 255, 0.025)),
    var(--panel);
}

.metrics div,
.evaluation-copy article {
  border-color: rgba(218, 242, 250, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.evaluation-copy p,
.evaluation-copy li {
  color: var(--muted);
}

@media (max-width: 1080px) {
  .portal-copy,
  .portal-grid,
  .result-grid,
  .stage-grid,
  .metrics,
  .evaluation-copy {
    grid-template-columns: 1fr;
  }

  textarea,
  .xml-portal {
    min-height: 320px;
  }

  .score-sheet,
  .score-render-status {
    min-height: 560px;
  }

  pre {
    max-height: none;
  }
}

@media (max-width: 580px) {
  .score-portal {
    padding: 16px;
  }

  .portal-copy h1,
  .result-top h1 {
    font-size: 42px;
  }

  .portal-console,
  .decision-card,
  .scanner,
  .result-card,
  .evaluation-band {
    padding: 18px;
  }

  .score-sheet,
  .score-render-status {
    min-height: 420px;
  }

  .mode-actions {
    grid-template-columns: 1fr;
  }

  .stage-preview-head {
    align-items: start;
    flex-direction: column;
  }

  pre {
    min-height: 160px;
    font-size: 20px;
  }

  .progress-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .progress-head {
    align-items: start;
  }
}

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

* {
  letter-spacing: 0;
}

.signal,
.lyric-capsule > span,
.xml-portal > span,
.card-label,
.result-top span,
.decision-card span,
.eval-title span,
.audio-panel span,
.score-render-status,
.score-pills span,
.score-pills b {
  letter-spacing: 0;
}

.admin-console {
  --admin-ink: #05070a;
  --admin-muted: #65717c;
  --admin-line: rgba(5, 7, 10, 0.12);
  --admin-panel: rgba(255, 255, 255, 0.84);
  --admin-cyan: #00b9ea;
  --admin-lime: #b8ff2c;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  color: var(--admin-ink);
  background:
    linear-gradient(90deg, rgba(5, 7, 10, 0.065) 1px, transparent 1px),
    linear-gradient(180deg, rgba(5, 7, 10, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 72% 0%, rgba(0, 185, 234, 0.18), transparent 34%),
    linear-gradient(180deg, #fbfcfd, #eef3f7);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.admin-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 26px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  background: #05070a;
  backdrop-filter: blur(22px);
}

.admin-brand {
  color: #ffffff;
  text-decoration: none;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 0;
}

.admin-rail nav {
  display: grid;
  gap: 8px;
}

.admin-rail nav a {
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-rail nav a:hover,
.admin-rail nav a.is-active {
  border-color: rgba(0, 185, 234, 0.28);
  color: #ffffff;
  background: rgba(0, 185, 234, 0.08);
}

.rail-status {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.rail-status span,
.admin-kicker,
.admin-health span,
.admin-kpis span,
.admin-panel-title span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.rail-status strong {
  display: block;
  margin-top: 6px;
  color: var(--admin-lime);
}

.admin-workspace {
  min-width: 0;
  padding: clamp(18px, 3vw, 42px);
}

.admin-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.admin-header h1 {
  margin: 4px 0 0;
  color: var(--admin-ink);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: 0;
}

.admin-health {
  min-width: 150px;
  padding: 16px;
  border: 1px solid rgba(0, 185, 234, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  text-align: right;
}

.admin-health strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.admin-kpis article,
.admin-panel {
  border: 1px solid rgba(5, 7, 10, 0.12);
  border-radius: 8px;
  background: var(--admin-panel);
  box-shadow: 0 24px 80px rgba(5, 7, 10, 0.10);
  backdrop-filter: blur(22px);
}

.admin-kpis article {
  min-height: 138px;
  padding: 18px;
}

.admin-kpis strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 0.92;
}

.admin-kpis small {
  display: block;
  margin-top: 12px;
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.55fr);
  gap: 12px;
  margin-bottom: 12px;
}

.admin-layout-bottom {
  grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 0.8fr) minmax(280px, 0.8fr);
}

.admin-panel {
  min-width: 0;
  padding: 18px;
  overflow: hidden;
}

.admin-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-panel-title strong {
  font-size: 15px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(5, 7, 10, 0.08);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.system-list,
.release-list,
.department-list,
.audit-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.system-list div,
.release-list div,
.department-list div,
.audit-list div {
  padding: 12px;
  border: 1px solid rgba(5, 7, 10, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.system-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.system-list dt,
.system-list dd {
  margin: 0;
}

.system-list dt,
.release-list span,
.department-list span,
.audit-list span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-list dd,
.release-list strong,
.department-list strong,
.audit-list strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 950;
}

.release-list p,
.department-list small,
.audit-list small,
.admin-empty {
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.45;
}

.department-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-paths {
  display: grid;
  gap: 10px;
}

.admin-paths .admin-panel-title {
  margin-bottom: 4px;
}

.admin-paths code {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(5, 7, 10, 0.10);
  border-radius: 8px;
  color: rgba(5, 7, 10, 0.72);
  background: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .admin-console {
    grid-template-columns: 1fr;
  }

  .admin-rail {
    position: relative;
    height: auto;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(5, 7, 10, 0.12);
  }

  .admin-rail nav {
    grid-auto-flow: column;
    overflow-x: auto;
  }

  .rail-status {
    margin-top: 0;
    margin-left: auto;
  }

  .admin-header,
  .admin-layout,
  .admin-layout-bottom {
    grid-template-columns: 1fr;
  }

  .admin-header {
    display: grid;
    align-items: stretch;
  }

  .admin-health {
    text-align: left;
  }

  .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-rail {
    display: grid;
  }

  .rail-status {
    margin-left: 0;
  }

  .admin-kpis,
  .department-list {
    grid-template-columns: 1fr;
  }
}