body.studio { overflow-y: auto; height: auto; min-height: 100dvh; }

/* In-App-Login-Overlay */
.login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1rem;
  background: var(--bg);
}
.login[hidden] { display: none; }
.login__box {
  width: min(360px, 92vw); display: grid; gap: 0.8rem;
  background: var(--bg-elev); border: 1px solid #ffffff14; border-radius: var(--radius);
  padding: 1.6rem; text-align: center; box-shadow: 0 24px 60px #00000066;
}
.login__icon { font-size: 2.4rem; }
.login__h { margin: 0; font-size: 1.2rem; }
.login__box input { font: inherit; text-align: center; padding: 0.6rem 0.7rem; }
.login__err { margin: 0; min-height: 1.2em; color: var(--danger); font-size: 0.85rem; }
.studio__main { max-width: 820px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }

.autosave { color: var(--text-dim); font-size: 0.8rem; }

.banner {
  max-width: 820px; margin: 0.6rem auto 0; padding: 0.7rem 1rem;
  background: #6c8cff22; border: 1px solid #6c8cff44; border-radius: 10px; color: #cdd6ff;
}

.card {
  background: var(--bg-elev); border: 1px solid #ffffff10; border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.card__h { margin: 0 0 0.8rem; font-size: 1.05rem; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.3rem; margin-bottom: 0.7rem; }
.field > span { font-size: 0.85rem; color: var(--text-dim); }
.field--inline { display: inline-grid; margin: 0; }
.field--inline input { width: 8rem; }
input[type="text"], input[type="number"], textarea {
  font: inherit; background: #00000033; color: var(--text);
  border: 1px solid #ffffff1a; border-radius: 8px; padding: 0.5rem 0.6rem;
}
textarea { width: 100%; resize: vertical; line-height: 1.5; }
code { background: #00000040; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.9em; }
.muted { color: var(--text-dim); font-size: 0.9rem; }
.row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.5rem 0; }

/* Vorschau-Chips */
.preview { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.preview .pword { display: inline-flex; gap: 1px; padding: 0.1rem 0.1rem; }
.preview .psyl { background: #ffffff12; padding: 0.1rem 0.35rem; border-radius: 5px; font-size: 0.85rem; }

/* Recorder */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0; margin: 0.6rem 0; color: var(--text-dim); font-size: 0.85rem; }
kbd { background: #00000055; border: 1px solid #ffffff22; border-bottom-width: 2px; border-radius: 5px; padding: 0.05rem 0.4rem; font-family: inherit; font-size: 0.85em; }
.rec-time { font-variant-numeric: tabular-nums; color: var(--text); }
.rec-track { flex: 1; min-width: 120px; height: 6px; background: #ffffff14; border-radius: 3px; overflow: hidden; }
#rec-track-fill { height: 100%; width: 0%; background: var(--accent); }

.rec-view { display: flex; flex-wrap: wrap; gap: 0.5rem 0.2rem; line-height: 2.2; }
.rec-view .rline { width: 100%; display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; }
.rec-view .rword { display: inline-flex; }
.rec-view .rsyl {
  position: relative; padding: 0.1rem 0.3rem; border-radius: 5px;
  background: #ffffff10; color: var(--text-dim);
  background-image: linear-gradient(90deg, var(--fill-color) 0 calc(var(--p,0)*100%), transparent calc(var(--p,0)*100%));
  background-clip: padding-box;
}
.rec-view .rsyl.stamped { color: var(--text); }
.rec-view .rsyl.cursor { outline: 2px solid var(--accent); color: #fff; }

.rec-countdown { position: fixed; inset: 0; display: grid; place-items: center; font-size: 22vw; font-weight: 800; color: var(--fill-color); background: #0e0e14cc; z-index: 50; }

.touch { display: none; gap: 0.6rem; margin-top: 0.6rem; }
@media (hover: none) and (pointer: coarse) { .touch { display: flex; } }

/* Editor */
.editor { display: grid; gap: 0.3rem; }
.ed-line { border: 1px solid #ffffff10; border-radius: 8px; padding: 0.4rem 0.5rem; }
.ed-line__head { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.3rem; }
.ed-syls { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ed-syl { display: inline-grid; gap: 2px; padding: 0.3rem; border-radius: 6px; background: #00000033; cursor: pointer; text-align: center; }
.ed-syl.sel { outline: 2px solid var(--accent); }
.ed-syl__t { font-size: 0.9rem; }
.ed-syl__n { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ed-syl.bad { background: #ff6b6b33; }
.btn--mini { padding: 0.2rem 0.5rem; font-size: 0.8rem; }

.snippet { margin-top: 0.6rem; }
.snippet summary { cursor: pointer; color: var(--text-dim); }
.snippet textarea { margin-top: 0.4rem; font-family: ui-monospace, monospace; font-size: 0.8rem; }
.checklist { margin-top: 0.8rem; padding: 0.8rem; background: #00000026; border-radius: 10px; font-size: 0.9rem; }
.checklist ol { margin: 0.4rem 0; padding-left: 1.2rem; }
.checklist .cmd { display: block; margin-top: 0.5rem; padding: 0.4rem 0.6rem; }
.ok { color: var(--ok); } .bad-text { color: var(--danger); }

/* Vorschau (nutzt die vom Player gerenderten .line/.unit-Klassen, hier gescoped) */
#preview-seek { flex: 1; accent-color: var(--accent); height: 24px; min-width: 120px; }
.preview-lyrics {
  margin-top: 0.6rem; max-height: 46vh; overflow-y: auto; position: relative;
  text-align: center; line-height: 1.5;
  font-size: clamp(1.3rem, 4.5vw, 2.2rem);
  border: 1px solid #ffffff10; border-radius: 10px; padding: 1.2rem 0.8rem;
}
.preview-lyrics.muted { font-size: 0.9rem; }
.preview-lyrics .line { margin: 0.3em 0; color: var(--text-dim); opacity: 0.5; transition: opacity 0.18s linear, color 0.18s linear; }
.preview-lyrics .line.is-past { opacity: 0.4; }
.preview-lyrics .line.is-active { opacity: 1; color: var(--active-color); }
.preview-lyrics .word { display: inline-block; margin-right: 0.3em; }
.preview-lyrics .unit { position: relative; display: inline-block; white-space: pre; }
.preview-lyrics .unit__base { color: inherit; }
.preview-lyrics .unit__fill {
  position: absolute; inset: 0; color: var(--fill-color);
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
  -webkit-clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
  will-change: clip-path; pointer-events: none;
}

/* Veröffentlichte Lieder */
.pub-h { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.published { display: grid; gap: 0.4rem; }
.pub-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #00000026; border-radius: 8px; }
.pub-row__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }