:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --line: #d7dbe2;
  --text: #1e2430;
  --muted: #647084;
  --accent: #284b8f;
  --accent-soft: #eaf0ff;
  --good: #218739;
  --warn: #b7791f;
  --bad: #c53030;
  --shadow: 0 10px 30px rgba(26, 34, 56, 0.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
}
button, input, select, textarea {
  font: inherit;
}
button {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: 0.2s ease;
}
button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
button.secondary { background: #fafbfc; }
button.danger { background: #fff5f5; border-color: #f3b1b1; color: #a82626; }
button.small { padding: 6px 10px; }
select, textarea, input[type="range"] {
  width: 100%;
}
select, textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
textarea { resize: vertical; }

.app-shell {
  max-width: 1584px;
  margin: 0 auto;
  padding: 24px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.topbar h1 {
  margin: 0;
  font-size: 2rem;
}
.version-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  vertical-align: middle;
}
.top-actions { display: flex; gap: 10px; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.hero-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  border-radius: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.emoji { font-size: 1.6rem; }
.hero-card small { color: var(--muted); line-height: 1.4; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 18px;
}
.tall-card { min-height: 460px; }
.control-strip {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.2fr;
  gap: 18px;
  margin-bottom: 20px;
}
.song-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.song-meta label, .stepper-group label, .slider-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.value-pill {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}
.transport, .adjustments, .inline-actions, .transport-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.adjustments {
  justify-content: space-between;
}
.stepper-group, .slider-group, .toggle-group {
  flex: 1;
  min-width: 140px;
}
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grid.two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}
.view { display: none; }
.active-view { display: block; }
.card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.card-head h2, .tips-box h3 { margin: 0; }
.tag {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
}
.line-info { color: var(--muted); margin-bottom: 12px; }
.lyrics-box, .integrated-lines {
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: #fcfdff;
  padding: 16px;
  min-height: 240px;
}
.lyric-line, .integrated-line {
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  line-height: 1.6;
}
.lyric-line.active, .integrated-line.active {
  background: var(--accent-soft);
  border: 1px solid #cbd8ff;
  font-weight: 700;
}
.lyric-line .sub, .integrated-line .sub {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}
.feedback-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.feedback-item, .score-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fbfcfd;
}
.feedback-item span, .score-card small {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}
.feedback-item strong, .score-card strong {
  font-size: 1.05rem;
}
.score-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.score-cards.three { grid-template-columns: repeat(3, 1fr); }
.meter-wrap { margin-top: 10px; }
.meter-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 6px;
}
.meter-bar {
  position: relative;
  height: 20px;
  background: linear-gradient(90deg, #ffe4e6 0%, #eff6ff 50%, #ffe4e6 100%);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pitch-needle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 100%;
  background: var(--accent);
  transform: translateX(-50%);
  border-radius: 999px;
}
.chord-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.chord-chip {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcff;
  padding: 16px 12px;
  text-align: center;
  font-weight: 700;
}
.chord-chip.active {
  background: var(--accent-soft);
  border-color: #c1d1ff;
}
.accomp-explain, .tips-box {
  color: var(--muted);
  line-height: 1.7;
}
.library-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.library-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #fbfcfd;
}
.log-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.log-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fbfcfd;
}
.log-item h4 {
  margin: 0 0 8px;
}
.log-item p { margin: 4px 0; color: var(--muted); }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .control-strip, .grid.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .app-shell { padding: 14px; }
  .hero-grid { grid-template-columns: 1fr; }
  .song-meta { grid-template-columns: repeat(2, 1fr); }
  .feedback-list, .score-cards, .score-cards.three { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}


.upload-row{display:flex;align-items:center;gap:12px;margin:8px 0 16px}
.upload-label{display:inline-flex;align-items:center;justify-content:center;min-width:150px;cursor:pointer}
.upload-status{color:#51607a;font-size:14px}
.small-note{font-size:13px;color:#667085}

.player-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
.progress-wrap, .volume-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fbfcff;
}
.player-headline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.status-pill {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #c8d6ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
}
.status-pill.warn { background: #fff8e8; color: #8a5a00; border-color: #f2d6a2; }
.status-pill.bad { background: #fff1f1; color: #a82626; border-color: #f1b5b5; }
.time-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 8px;
}
.volume-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.slider-group.compact label { margin-bottom: 8px; }
.upload-row { flex-wrap: wrap; }
#progressSlider { width: 100%; }
@media (max-width: 1100px) {
  .player-strip, .volume-panel { grid-template-columns: 1fr; }
}


.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.library-toolbar input {
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.tag.neutral {
  background: #eef2f8;
  color: var(--muted);
}
.library-card .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.library-card .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.library-card .meta-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fafbfc;
}
.library-card .meta-chip small {
  display: block;
  color: var(--muted);
  margin-bottom: 6px;
}
.library-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: #fafbfc;
}
@media (max-width: 980px) {
  .library-card .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.card-subpanel{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fcfdff;}
.synth-row{display:grid;grid-template-columns:1.2fr 0.8fr 1fr;gap:12px;align-items:end;margin-bottom:10px;}
.synth-row.compact-row{display:flex;gap:16px;align-items:center;margin-bottom:0;flex-wrap:wrap;}
.synth-block label{display:block;margin-bottom:6px;color:var(--muted);font-size:0.9rem;}
.segmented{display:flex;gap:8px;flex-wrap:wrap;}
.mode-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700;}
.synth-status-cards{margin-top:14px;}
@media (max-width: 1100px){.synth-row{grid-template-columns:1fr;}}


/* ===== Compact layout overrides ===== */
body { font-size: 14px; }

.app-shell {
  max-width: 1720px;
  padding: 14px 18px;
}

.topbar {
  margin-bottom: 10px;
  gap: 10px;
  align-items: center;
}
.topbar h1 {
  font-size: 1.15rem;
}
.version-pill {
  padding: 2px 8px;
  font-size: 0.8rem;
  margin-left: 6px;
}
.top-actions { gap: 8px; }

button {
  padding: 7px 10px;
  border-radius: 12px;
}
button.small { padding: 5px 8px; }

.hero-grid {
  gap: 10px;
  margin-bottom: 10px;
}
.hero-card {
  padding: 10px 12px;
  border-radius: 18px;
  gap: 4px;
}
.hero-card h3,
.hero-card h4,
.hero-card strong {
  margin: 0;
  line-height: 1.2;
}
.hero-card small {
  line-height: 1.25;
  font-size: 0.84rem;
}
.emoji { font-size: 1.2rem; }

.card {
  border-radius: 18px;
  padding: 12px;
}
.tall-card { min-height: 0; }

.control-strip {
  gap: 10px;
  margin-bottom: 12px;
}
.song-meta {
  gap: 8px;
}
.song-meta label,
.stepper-group label,
.slider-group label,
.toggle-group label,
.synth-block label {
  margin-bottom: 4px;
  font-size: 0.82rem;
}
.value-pill,
select,
textarea {
  padding: 8px 10px;
  border-radius: 10px;
}

.transport, .adjustments, .inline-actions, .transport-mini {
  gap: 8px;
}
.stepper-group, .slider-group, .toggle-group {
  min-width: 110px;
}

.player-strip {
  gap: 10px;
}
.progress-wrap, .volume-panel, .card-subpanel {
  padding: 10px 12px;
  border-radius: 16px;
}
.player-headline {
  margin-bottom: 6px;
}
.status-pill {
  padding: 4px 8px;
  font-size: 0.76rem;
}
.time-row {
  margin-top: 4px;
  font-size: 0.82rem;
}
.volume-panel {
  gap: 10px;
}
.slider-group.compact label {
  margin-bottom: 4px;
}

.card-head {
  margin-bottom: 10px;
}
.card-head h2, .tips-box h3 {
  font-size: 1rem;
}
.tag {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.lyrics-box, .integrated-lines {
  padding: 10px 12px;
  min-height: 160px;
  border-radius: 14px;
}
.lyric-line, .integrated-line {
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 10px;
  line-height: 1.35;
}
.lyric-line .sub, .integrated-line .sub {
  font-size: 0.82rem;
}

.feedback-list {
  gap: 8px;
  margin: 10px 0;
}
.feedback-item, .score-card {
  padding: 8px 10px;
  border-radius: 12px;
}
.feedback-item span, .score-card small {
  margin-bottom: 4px;
}
.feedback-item strong, .score-card strong {
  font-size: 0.95rem;
}
.score-cards {
  gap: 8px;
  margin-top: 8px;
}

.meter-wrap { margin-top: 6px; }
.meter-labels {
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.meter-bar {
  height: 14px;
}

.chord-flow {
  gap: 8px;
  margin-bottom: 10px;
}
.chord-chip {
  padding: 10px 8px;
  border-radius: 12px;
}
.accomp-explain, .tips-box {
  line-height: 1.45;
  font-size: 0.9rem;
}

.library-toolbar {
  gap: 8px;
  margin-bottom: 10px;
}
.library-toolbar input {
  padding: 8px 10px;
}
.library-content {
  gap: 10px;
}
.library-card {
  padding: 12px;
  border-radius: 14px;
}
.library-card .meta-grid {
  gap: 8px;
  margin-top: 8px;
}
.library-card .meta-chip {
  padding: 8px 10px;
}
.library-card .meta-chip small {
  margin-bottom: 4px;
}
.library-card .actions {
  gap: 6px;
  margin-top: 8px;
}
.library-empty {
  padding: 12px;
}

.log-list {
  gap: 8px;
  margin-top: 10px;
}
.log-item {
  padding: 10px 12px;
  border-radius: 14px;
}
.log-item h4 {
  margin-bottom: 4px;
}
.log-item p {
  margin: 2px 0;
}

.upload-row {
  gap: 8px;
  margin: 4px 0 10px;
}
.upload-label {
  min-width: 120px;
}
.upload-status, .small-note {
  font-size: 0.82rem;
}

.synth-row {
  gap: 10px;
  margin-bottom: 8px;
}
.synth-row.compact-row {
  gap: 10px;
}
.segmented {
  gap: 6px;
}


/* ===== Layout 20:20:60 / 60:20:20 patch ===== */
.top-layout-206060{
  display:grid;
  grid-template-columns:20% 20% 60%;
  gap:10px;
  align-items:stretch;
}
.search-panel,
.info-panel,
.control-panel-wide{
  min-width:0;
  border:1px solid var(--line);
  background:#fcfdff;
  border-radius:16px;
  padding:10px 12px;
}
.panel-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.compact-field{margin-bottom:8px;}
.compact-field:last-child{margin-bottom:0;}
.info-stack{display:flex;flex-direction:column;gap:8px;}
.info-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.info-item label,.compact-field label{
  display:block;
  margin-bottom:4px;
  font-size:.82rem;
  color:var(--muted);
}
.info-item.wide .value-pill{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.control-panel-wide .control-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.control-panel-wide .control-row:last-child{margin-bottom:0;}
.control-panel-wide .first button{flex:0 0 auto;}
.compact-inline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:auto;
  flex:0 0 auto;
}
.control-bpm{
  flex:1 1 220px;
  min-width:180px;
}
.toggle-inline{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.progress-line{
  gap:12px;
  align-items:center;
}
.progress-line input[type="range"]{
  flex:1 1 auto;
}
.time-inline{
  white-space:nowrap;
  font-size:.84rem;
  color:var(--muted);
}
.volume-inline-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px !important;
}
.compact-inline-grow{
  min-width:0;
}
.bottom-layout-602020{
  display:grid;
  grid-template-columns:60% 20% 20%;
  gap:10px;
}
.lyrics-main-card .integrated-lines{
  min-height:420px;
}
.integrated-side-card{
  min-height:420px;
}
.integrated-score-cards{
  grid-template-columns:1fr;
  margin-bottom:14px;
}
.integrated-mini-tips ol{
  margin:0;
  padding-left:18px;
  line-height:1.6;
}
@media (max-width: 1180px){
  .top-layout-206060{
    grid-template-columns:1fr;
  }
  .bottom-layout-602020{
    grid-template-columns:1fr;
  }
  .integrated-side-card{
    min-height:auto;
  }
  .volume-inline-row{
    grid-template-columns:1fr;
  }
}


/* ===== Patch: numeric progress + integrated song info + lyrics left ===== */
.info-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.numeric-progress-wrap{
  width:50%;
  min-width:320px;
}
.numeric-progress-wrap label{
  display:block;
  margin-bottom:4px;
  font-size:.82rem;
  color:var(--muted);
}
.numeric-progress-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.numeric-progress-inline input[type="number"]{
  width:90px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.library-lyrics-layout{
  display:grid;
  grid-template-columns:60% 20% 20%;
  gap:10px;
  margin-top:10px;
}
.lyrics-info-box,
.lyrics-empty-box{
  min-height:420px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fcfdff;
  padding:12px;
}
.lyrics-empty-box{
  background:transparent;
  border-style:dashed;
}
.lyrics-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.lyrics-info-content{
  min-height:320px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px;
  font-size:1rem;
  line-height:1.65;
  white-space:pre-wrap;
}
.lyrics-info-line{
  padding:5px 0;
  border-bottom:1px solid #eef2f7;
}
.lyrics-info-line:last-child{
  border-bottom:none;
}
@media (max-width:1180px){
  .numeric-progress-wrap{
    width:100%;
    min-width:0;
  }
  .library-lyrics-layout,
  .info-grid-3{
    grid-template-columns:1fr;
  }
  .lyrics-empty-box{
    display:none;
  }
}


/* ===== Fix patch: clearer BPM area + reliable compact control ===== */
.control-panel-wide .second{
  align-items:flex-end;
}
.control-bpm{
  flex:0 0 220px !important;
  min-width:220px !important;
  max-width:220px !important;
}
.control-bpm input[type="range"]{
  width:100%;
}
.numeric-progress-wrap{
  width:50%;
  min-width:340px;
  max-width:420px;
}
.numeric-progress-inline{
  justify-content:flex-start;
}
.control-panel-wide .second .toggle-inline{
  margin-left:auto;
}
.volume-inline-row{
  margin-top:2px;
}
.time-inline{
  font-weight:600;
}
@media (max-width:1180px){
  .control-bpm{
    min-width:180px !important;
    max-width:none !important;
    flex:1 1 180px !important;
  }
  .numeric-progress-wrap{
    width:100%;
    min-width:0;
    max-width:none;
  }
}


/* ===== Spinner input patch ===== */
.spinner-input{
  width:72px;
  min-width:72px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-weight:600;
}
.control-bpm{
  flex:0 0 auto !important;
  min-width:auto !important;
  max-width:none !important;
}
.control-bpm .spinner-input{
  width:82px;
}
.volume-inline-row{
  display:flex !important;
  gap:18px !important;
  align-items:flex-end;
}
.volume-inline-row .slider-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.volume-inline-row .slider-group label{
  margin:0;
  min-width:34px;
}
.numeric-progress-inline .spinner-input{
  width:84px;
}
@media (max-width:1180px){
  .volume-inline-row{
    flex-wrap:wrap;
  }
}


/* ===== 30:30:40 layout patch ===== */
.top-layout-206060{
  grid-template-columns: 30% 30% 40% !important;
}
.search-panel .upload-row.compact-top-upload{
  margin: 8px 0 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.search-panel .upload-label{
  min-width:auto;
}
.search-panel .upload-status{
  font-size:.82rem;
  line-height:1.35;
  color:var(--muted);
  word-break:break-all;
}
#seekBtn{ display:none !important; }

/* ===== v3 control flow refinement ===== */
.main-transport-row{
  justify-content:flex-start;
}
.record-row{
  justify-content:flex-start;
  padding-left: 2px;
}
.record-row #recordBtn{
  min-width: 132px;
}
.options-row{
  align-items:flex-end;
}
.progress-volume-row{
  display:grid !important;
  grid-template-columns:minmax(170px, 1fr) repeat(3, max-content);
  align-items:end;
  column-gap:12px !important;
  row-gap:10px !important;
}
.inline-progress-wrap{
  width:auto;
  min-width:170px;
  max-width:none;
}
.inline-progress-wrap label{
  white-space:nowrap;
}
.inline-progress-wrap .numeric-progress-inline{
  gap:8px;
}
.inline-progress-wrap .spinner-input{
  width:72px;
}
.progress-volume-row .slider-group{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:auto;
}
.progress-volume-row .slider-group label{
  margin:0;
  white-space:nowrap;
  min-width:auto;
  font-size:.95rem;
}
.progress-volume-row .compact-inline-grow .spinner-input{
  width:66px;
}
@media (max-width: 1180px){
  .progress-volume-row{
    grid-template-columns:1fr 1fr;
    column-gap:12px !important;
    row-gap:12px !important;
  }
  .inline-progress-wrap{
    grid-column:1 / -1;
    min-width:0;
  }
}


/* ===== v5 recording refinement ===== */
.record-row{
  gap:10px;
  align-items:center;
}
#recordListenBtn{
  min-width:124px;
}
#recordListenBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.status-pill.subtle{
  background:#f5f7fb;
  color:var(--muted);
  border-color:var(--line);
}
.status-pill.recording{
  background:#fff1f1;
  color:#b42318;
  border-color:#f3c0c0;
}
.status-pill.saved{
  background:#eefaf1;
  color:#1e7a44;
  border-color:#c4e8d0;
}
.status-pill.ready{
  background:#eef3ff;
  color:var(--accent);
  border-color:#c8d6ff;
}
.record-preview{
  width:100%;
  margin-top:6px;
}
@media (max-width:1180px){
  .record-row{
    flex-wrap:wrap;
  }
  .record-preview{
    order:10;
  }
}


#duetPlayBtn:disabled { opacity: 0.55; }
.record-row button { white-space: nowrap; }