* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b0b0d;
  color: #f2f2f2;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- setup ---------- */

#setup {
  max-width: 34rem;
  margin: 8vh auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 .5rem; }

label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: #aab; }

input, select, textarea {
  font: inherit;
  font-size: 1rem;
  color: #f2f2f2;
  background: #17171b;
  border: 1px solid #33333a;
  border-radius: .5rem;
  padding: .6rem .7rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #5b7cff; border-color: transparent; }

.meter { height: .4rem; background: #17171b; border-radius: 1rem; overflow: hidden; margin-top: -.5rem; }
#level { height: 100%; width: 0; background: #3fbf6f; transition: width 60ms linear; }

button {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #3b5bff;
  border: 0;
  border-radius: .5rem;
  padding: .75rem 1rem;
  cursor: pointer;
}
button:hover { background: #4d6bff; }

#error { color: #ff7a7a; min-height: 1.2em; margin: 0; }

/* ---------- subtitle screen ---------- */

#screen { display: none; }
body.running #setup { display: none; }
body.running #screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 3vh 4vw;
  gap: 3vh;
  cursor: none;
}
body.running.controls #screen { cursor: default; }

.block { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.label {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: max(16px, 2.2vh);
  font-weight: 600;
  color: #8f93a3;
  letter-spacing: .02em;
  margin-bottom: 1vh;
}
.label svg { height: 1em; border-radius: 2px; }

.viewport { flex: 1; overflow: hidden; position: relative; }
.lines {
  position: absolute;
  inset: 0;
  font-weight: 500;
  line-height: var(--lh);
}
.lines.glide { transition: transform 260ms ease-out; }
.line { white-space: nowrap; height: var(--lh); }

#block-de .label { color: #a39a86; }

/* Live English (key E): small, grey, one line. */
#english {
  display: none;
  font-size: max(14px, 2vh);
  color: #6f7280;
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  text-align: left;
}
#english span { direction: ltr; unicode-bidi: embed; }
#english .live { color: #9a9daa; }
body.show-english #english { display: block; }

#controls {
  position: fixed;
  right: 2vw;
  top: 2vh;
  display: flex;
  gap: .5rem;
  opacity: 0;
  transition: opacity 200ms;
}
body.controls #controls { opacity: 1; }
#controls button { background: #26262c; font-size: .9rem; padding: .5rem .8rem; }
#controls button:hover { background: #33333b; }

#status {
  position: fixed;
  right: 1.2vw;
  bottom: 1.2vh;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
}
#status.ok { background: #2f9e5c; opacity: .5; }
#status.warn { background: #e0a030; }