:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  background: #09090b;
  color: #fafafa;
  --accent: #ff5a36;
  --panel: #161619;
  --muted: #a1a1aa;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #09090b; }

body {
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

button, textarea, select { font: inherit; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.screen[hidden] { display: none !important; }

.editor-screen, .review-screen, .error-screen {
  min-height: 100dvh;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: calc(var(--safe-top) + 28px) 20px calc(var(--safe-bottom) + 28px);
}

.editor-screen {
  background:
    radial-gradient(circle at 105% 0%, rgba(255, 90, 54, .24), transparent 36%),
    radial-gradient(circle at -10% 50%, rgba(255, 90, 54, .08), transparent 32%),
    #09090b;
}

.eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.hero h1 { margin: 12px 0 14px; font-size: clamp(42px, 13vw, 72px); line-height: .98; letter-spacing: -.055em; }
.hero h1 span { color: #a1a1aa; }
.hero p { margin: 0 0 26px; max-width: 32em; color: #b8b8c0; line-height: 1.65; }

.editor-card { padding: 16px; border: 1px solid #2a2a2f; border-radius: 24px; background: rgba(22, 22, 25, .92); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.field-label { display: flex; justify-content: space-between; margin: 0 2px 10px; font-size: 14px; font-weight: 700; }
.character-count { color: var(--muted); font-weight: 500; }
#script-input { width: 100%; min-height: 31dvh; max-height: 46dvh; resize: vertical; border: 0; border-radius: 16px; padding: 16px; color: #fafafa; background: #0d0d0f; font-size: 18px; line-height: 1.7; outline: none; }
#script-input:focus { box-shadow: 0 0 0 2px var(--accent); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.settings-grid label > span { display: block; margin: 0 0 7px 2px; color: var(--muted); font-size: 12px; }
.settings-grid select { width: 100%; min-height: 44px; border: 1px solid #323238; border-radius: 12px; padding: 0 10px; color: #fafafa; background: #202024; }

.privacy-note { margin: 18px 0 12px; color: #888891; text-align: center; font-size: 12px; }
.privacy-note span { color: #54d38a; }
.primary-button { width: 100%; min-height: 58px; border: 0; border-radius: 18px; padding: 0 22px; color: white; background: var(--accent); font-weight: 800; font-size: 17px; box-shadow: 0 12px 32px rgba(255,90,54,.22); }
.primary-button:active { transform: scale(.985); }
.primary-button span { float: right; }
.tip, .save-help { color: #71717a; font-size: 12px; line-height: 1.6; text-align: center; }

.studio-screen { position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: #000; }
.camera-frame { position: absolute; z-index: 1; top: 50%; left: 50%; overflow: hidden; pointer-events: none; background: #050505; transform: translate(-50%, -50%); }
.camera-preview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; object-fit: cover; transform: scaleX(-1); background: #050505; }
.camera-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.56), transparent 23%, transparent 68%, rgba(0,0,0,.72)); }
.framing-guide { position: absolute; z-index: 2; top: 50%; left: 50%; pointer-events: none; border: 1px solid rgba(255,255,255,.42); border-radius: 18px; transform: translate(-50%, -50%); box-shadow: 0 0 0 999px rgba(0,0,0,.08); }
.studio-screen[data-orientation="portrait"] .camera-frame,
.studio-screen[data-orientation="portrait"] .framing-guide { width: min(calc(100vw - 28px), calc(56.25dvh - 16px)); aspect-ratio: 9 / 16; }
.studio-screen[data-orientation="landscape"] .camera-frame,
.studio-screen[data-orientation="landscape"] .framing-guide { width: min(calc(100vw - 28px), calc(177.78dvh - 50px)); aspect-ratio: 16 / 9; }
.studio-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: calc(var(--safe-top) + 5px) 14px 10px; }
.glass-button { justify-self: start; min-height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 0 16px; color: white; background: rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.recording-time { display: flex; align-items: center; gap: 7px; min-width: 72px; font-variant-numeric: tabular-nums; font-weight: 750; }
.recording-time span { width: 8px; height: 8px; border-radius: 50%; background: #73737d; }
.recording-time.is-live span { background: #ff3b30; box-shadow: 0 0 0 5px rgba(255,59,48,.15); }
.camera-status { justify-self: end; max-width: 100px; color: rgba(255,255,255,.7); font-size: 11px; text-align: right; }

.prompter-shell { position: absolute; z-index: 3; top: calc(var(--safe-top) + 76px); left: 14px; right: 14px; height: min(44dvh, 390px); overflow: hidden; border-radius: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px); transition: background .2s; }
.prompter-shell[data-opacity="light"] { background: rgba(0,0,0,.38); }
.prompter-shell[data-opacity="deep"] { background: rgba(0,0,0,.82); }
.prompter-viewport { height: 100%; overflow: hidden; mask-image: linear-gradient(transparent, black 14%, black 86%, transparent); }
.prompter-content { min-height: 100%; padding: 17dvh 20px 32dvh; white-space: pre-wrap; color: #fff; font-size: 29px; font-weight: 740; line-height: 1.55; letter-spacing: .01em; text-align: center; text-shadow: 0 2px 8px #000; }
.prompter-shell[data-font-size="small"] .prompter-content { font-size: 23px; }
.prompter-shell[data-font-size="large"] .prompter-content { font-size: 36px; }
.eye-line { position: absolute; z-index: 2; top: 50%; left: 5px; width: 7px; height: 34px; border-radius: 99px; background: var(--accent); transform: translateY(-50%); box-shadow: 0 0 18px rgba(255,90,54,.7); }

.manual-scroll-controls { position: absolute; z-index: 5; top: 55%; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.manual-scroll-button { display: grid; place-items: center; gap: 1px; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; padding: 2px; color: white; background: rgba(12,12,14,.6); box-shadow: 0 5px 20px rgba(0,0,0,.32); pointer-events: auto; touch-action: none; backdrop-filter: blur(10px); }
.manual-scroll-button span { height: 26px; font-size: 25px; line-height: 25px; }
.manual-scroll-button small { color: rgba(255,255,255,.78); font-size: 9px; line-height: 10px; }
.manual-scroll-button:active { background: rgba(255,90,54,.82); transform: scale(.94); }
.manual-scroll-button:disabled { opacity: .32; }

.roll-button {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 132px);
  min-width: 132px;
  min-height: 76px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 99px;
  padding: 0 28px;
  color: white;
  background: rgba(255,90,54,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 6px rgba(255,90,54,.14);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .12em;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.roll-button[data-active="true"] { background: #ff3b30; transform: translateX(-50%) scale(.94); }
.roll-button:disabled { opacity: .28; box-shadow: none; }

.countdown { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; color: white; background: rgba(0,0,0,.36); font-size: min(38vw, 180px); font-weight: 900; text-shadow: 0 10px 30px #000; }
.toast { position: absolute; z-index: 12; left: 50%; bottom: calc(var(--safe-bottom) + 126px); max-width: calc(100% - 40px); transform: translateX(-50%); border-radius: 99px; padding: 10px 16px; color: white; background: rgba(0,0,0,.78); font-size: 13px; white-space: nowrap; }

.studio-controls { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; justify-items: center; gap: 8px; min-height: 122px; padding: 12px 18px var(--safe-bottom); }
.control-button { display: grid; place-items: center; gap: 5px; min-width: 74px; border: 0; color: white; background: transparent; }
.control-button > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(20,20,22,.72); font-size: 21px; backdrop-filter: blur(10px); }
.control-button small { color: rgba(255,255,255,.78); font-size: 11px; }
.control-button:disabled { opacity: .35; }
.record-button { display: grid; place-items: center; width: 78px; height: 78px; border: 4px solid white; border-radius: 50%; padding: 5px; background: transparent; }
.record-button span { width: 100%; height: 100%; border-radius: 50%; background: #ff3b30; }
.record-button:disabled { opacity: .38; }
.stop-button { grid-column: 1 / -1; width: min(88%, 360px); min-height: 54px; border: 0; border-radius: 99px; color: white; background: #ff3b30; font-weight: 800; }
.studio-controls.is-recording { grid-template-columns: 1fr 1fr; }
.studio-controls.is-recording .record-button { display: none; }

.review-screen { display: flex; flex-direction: column; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 35%, #28282e, #09090b 58%); }
.review-screen h2, .error-screen h2 { margin: 8px 0 0; font-size: clamp(32px, 10vw, 52px); letter-spacing: -.04em; }
.review-video { width: 100%; max-height: 58dvh; border-radius: 22px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secondary-actions button, .text-button { min-height: 50px; border: 1px solid #34343a; border-radius: 15px; color: white; background: #19191d; }

.error-screen { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.error-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; color: white; background: var(--accent); font-size: 36px; font-weight: 900; }
.error-screen p { color: var(--muted); line-height: 1.7; }
.error-screen .text-button { margin-top: 10px; background: transparent; }

@media (orientation: landscape) {
  .prompter-shell { top: calc(var(--safe-top) + 62px); left: max(88px, env(safe-area-inset-left)); right: max(88px, env(safe-area-inset-right)); height: min(48dvh, 250px); }
  .prompter-content { padding-top: 17dvh; padding-bottom: 28dvh; }
  .studio-controls { left: auto; width: 116px; top: 50%; bottom: auto; right: max(10px, env(safe-area-inset-right)); display: flex; flex-direction: column; min-height: 0; padding: 0; transform: translateY(-42%); }
  .studio-controls.is-recording { width: 130px; }
  .manual-scroll-controls { top: 60%; right: max(150px, calc(env(safe-area-inset-right) + 140px)); }
  .roll-button { bottom: var(--safe-bottom); left: 50%; }
  .stop-button { width: 120px; padding: 0 14px; }
  .review-screen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); align-content: center; }
  .review-screen header, .review-screen .primary-button, .review-screen .secondary-actions, .review-screen .save-help { grid-column: 2; }
  .review-video { grid-column: 1; grid-row: 1 / span 5; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 30px); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}