* { box-sizing: border-box; }
:root {
  --bg: #fef3c7;
  --bg2: #fde68a;
  --ink: #2a1a07;
  --accent: #ef4444;
  --accent-strong: #b91c1c;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --soft: #ffffff;
  --soft-2: #fffbeb;
  --line: #d6d3d1;
}
html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  color: var(--ink);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
body { display: flex; flex-direction: column; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 0.5rem) 1rem 0.5rem;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar-left { display:flex; gap:.6rem; align-items:center; }
#studio-name { font-weight: 700; font-size: 1.2rem; }
.pill {
  background: var(--primary);
  color: white;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}

.layout {
  flex: 1;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  /* iPad landscape: zwei Spalten. Portrait: gestapelt. */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
}
@media (max-width: 900px), (orientation: portrait) {
  .layout { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
}

.preview, .prompter {
  background: var(--soft);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.preview-frame {
  flex: 1;
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  min-height: 0;
}
.preview-frame iframe { width:100%; height:100%; border:0; display:block; }
.preview-actions { padding-top: .8rem; display:flex; gap:.5rem; }

.hint {
  background: var(--soft-2);
  border-left: 4px solid var(--primary);
  padding: .8rem 1rem;
  border-radius: 8px;
  font-size: .95rem;
  margin-bottom: 1rem;
}

.mic-area { text-align:center; margin-bottom:1rem; }
.mic {
  width: 100%;
  min-height: 120px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem;
  box-shadow: 0 8px 0 #7f1d1d, 0 12px 24px rgba(239,68,68,.4);
  transition: transform .08s, box-shadow .08s;
  cursor: pointer;
}
.mic:active { transform: translateY(4px); box-shadow: 0 4px 0 #7f1d1d, 0 6px 12px rgba(239,68,68,.4); }
.mic.recording { animation: pulse 1.2s ease-in-out infinite; }
.mic-icon { font-size: 2.5rem; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.mic-status { margin-top:.4rem; font-size:.9rem; min-height:1.2em; opacity:.8; }

.prompt-area textarea {
  width:100%;
  font: inherit;
  padding: .8rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  resize: vertical;
  min-height: 4em;
}
.prompt-area textarea:focus { outline: none; border-color: var(--primary); }

.quick-row { display:flex; flex-wrap:wrap; gap:.4rem; margin: .5rem 0; }
.quick {
  flex: 1 1 auto;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--soft-2);
  color: var(--ink);
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  padding: 0 .8rem;
}
.quick:active { background: #fde68a; }

.primary {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: white;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .5rem;
  box-shadow: 0 6px 0 #1e3a8a;
}
.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 #1e3a8a; }
.primary[disabled] { opacity:.5; cursor:not-allowed; }

.big {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: #16a34a;
  color: white;
  font: inherit;
  font-weight: 700;
  padding: 0 1.2rem;
  cursor: pointer;
}
.ghost {
  min-height: 40px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 10px;
  padding: 0 .8rem;
  font: inherit;
  cursor: pointer;
}

.history {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}
.history li {
  padding: .4rem 0;
  border-bottom: 1px dashed var(--line);
  color: #555;
}
.history li:last-child { border-bottom: 0; }

dialog {
  border: 0;
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 90vw;
  width: 32rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
dialog::backdrop { background: rgba(0,0,0,.4); }
.snapshot-list { list-style:none; padding:0; margin:0; max-height: 50vh; overflow:auto; }
.snapshot-list li {
  display:flex; justify-content:space-between; align-items:center;
  padding: .6rem .4rem;
  border-bottom: 1px solid var(--line);
}

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
}
.overlay.show { display: flex; }
.overlay-inner {
  background: white;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  text-align: center;
  font-weight: 600;
}
.spinner {
  width: 48px; height: 48px;
  border: 5px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }