:root { color-scheme: dark; --ink:#f6f4ef; --muted:#989a9b; --panel:#17191a; --line:#2a2d2e; --accent:#e9503e; --prompt-font:32px; --prompt-line:1.65; --prompt-height:46%; --prompt-opacity:.72; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#0c0e0e; color:var(--ink); }
body { font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; overscroll-behavior:none; }
button,textarea,input { font:inherit; }
button { color:inherit; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.app-shell { min-height:100dvh; background:radial-gradient(circle at 50% -10%,#292d2c 0,#111313 36%,#0c0e0e 80%); }
.topbar { height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(12,14,14,.88); backdrop-filter:blur(16px); position:sticky; top:0; z-index:20; }
.brand { font-weight:800; letter-spacing:-.03em; font-size:20px; display:flex; align-items:center; gap:10px; }
.brand-dot { width:17px; height:17px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(233,80,62,.13); }
.status-pill { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; max-width:44vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-pill span { width:7px; height:7px; border-radius:50%; background:#56b987; flex:0 0 auto; }
.status-pill b { font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.status-pill.live { color:white; font-variant-numeric:tabular-nums; }
.status-pill.live span { background:var(--accent); animation:pulse 1s infinite; }
.top-button { justify-self:end; background:#202323; border:1px solid #343737; border-radius:10px; padding:9px 13px; cursor:pointer; font-size:13px; }
.workspace { max-width:1440px; margin:0 auto; padding:26px; display:grid; grid-template-columns:minmax(240px,310px) minmax(390px,1fr) minmax(230px,280px); gap:22px; align-items:start; }
.panel { background:rgba(23,25,26,.9); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.panel-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-heading small,.review-heading small { color:var(--accent); font-size:9px; letter-spacing:.18em; font-weight:800; }
.panel-heading h1,.panel-heading h2 { font-size:18px; margin:3px 0 0; letter-spacing:-.02em; }
.panel-heading>span,.script-panel>p { color:var(--muted); font-size:11px; }
.script-panel textarea { width:100%; min-height:460px; resize:vertical; border:0; outline:0; border-radius:12px; padding:17px; color:#e8e6e0; background:#0f1111; line-height:1.8; font-size:15px; box-shadow:inset 0 0 0 1px #272a2a; }
.script-panel textarea:focus { box-shadow:inset 0 0 0 1px #636866; }
.script-panel>p { margin:12px 2px 0; line-height:1.5; }
.camera-panel { min-width:0; }
.stage { position:relative; overflow:hidden; background:#050606; border:1px solid #303333; box-shadow:0 30px 80px rgba(0,0,0,.35); transition:aspect-ratio .25s ease,width .25s ease; margin-inline:auto; }
.stage.portrait { aspect-ratio:9/16; width:min(100%,470px); max-height:calc(100dvh - 210px); border-radius:26px; }
.stage.landscape { aspect-ratio:16/9; width:100%; margin-top:9vh; border-radius:20px; }
.stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage video.mirrored { transform:scaleX(-1); }
.camera-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:radial-gradient(circle,#202424 0,#0b0d0d 64%); }
.camera-empty h2 { margin:22px 0 7px; font-size:21px; }
.camera-empty p { color:var(--muted); font-size:13px; margin:0 0 24px; }
.lens { width:76px; height:76px; border:1px solid #454a49; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 0 9px rgba(255,255,255,.02); }
.lens span { width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#66898f,#1a2c33 35%,#071013 70%); border:3px solid #303737; }
.primary-button,.secondary-button,.record-button,.quick-actions button { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.primary-button { background:var(--ink); color:#111; padding:13px 20px; border-radius:11px; font-weight:800; font-size:13px; }
.prompt-window { position:absolute; left:0; right:0; top:13%; height:var(--prompt-height); overflow-y:hidden; scrollbar-width:none; background:linear-gradient(to bottom,rgba(5,6,6,0),rgba(5,6,6,var(--prompt-opacity)) 13%,rgba(5,6,6,var(--prompt-opacity)) 87%,rgba(5,6,6,0)); mask-image:linear-gradient(transparent,#000 13%,#000 87%,transparent); padding:0 8%; }
.prompt-copy { min-height:100%; padding-top:45%; padding-bottom:40vh; white-space:pre-wrap; font-size:var(--prompt-font); line-height:var(--prompt-line); text-align:center; font-weight:750; text-shadow:0 2px 12px #000; letter-spacing:.015em; }
.guide-line { position:absolute; left:8%; right:8%; top:calc(13% + var(--prompt-height)*.46); height:1px; background:rgba(233,80,62,.55); pointer-events:none; }
.countdown { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,.66); backdrop-filter:blur(7px); }
.countdown strong { font-size:clamp(90px,18vw,160px); line-height:1; font-weight:200; }
.countdown small { margin-top:16px; color:#ccc; letter-spacing:.14em; }
.record-badge { position:absolute; top:max(14px,env(safe-area-inset-top)); left:14px; z-index:3; background:rgba(8,9,9,.68); backdrop-filter:blur(8px); padding:8px 10px; border-radius:20px; display:flex; gap:7px; align-items:center; font-size:11px; font-variant-numeric:tabular-nums; }
.record-badge span { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite; }
.quick-actions { display:flex; justify-content:center; gap:7px; margin-top:12px; }
.quick-actions button { background:transparent; color:#a8aaa9; padding:7px 11px; border-radius:8px; font-size:11px; gap:6px; }
.quick-actions button span { font-size:16px; color:#d8d8d4; }
.quick-actions button.active { color:white; background:#1d2020; }
.transport { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:9px; margin-top:11px; }
.secondary-button { min-height:48px; border-radius:12px; background:#1b1e1e; border:1px solid #2e3231; color:#bbbdbb; font-size:12px; }
.record-button { min-height:52px; border-radius:13px; background:var(--ink); color:#131414; font-weight:800; gap:9px; }
.record-button span { width:13px; height:13px; border-radius:50%; background:var(--accent); }
.record-button.stop { background:var(--accent); color:white; }
.record-button.stop span { border-radius:2px; background:white; width:12px; height:12px; }
button:disabled { opacity:.38; cursor:not-allowed; }
.settings-heading button,.review-heading button,.script-heading button { display:none; border:0; background:transparent; color:#aaa; font-size:26px; cursor:pointer; }
.range-control { display:block; padding:14px 0; border-top:1px solid #272a2a; }
.range-control>span { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.range-control b,.setting-block>label { font-size:12px; font-weight:600; color:#c9cbc8; }
.range-control output { color:var(--muted); font-size:11px; }
.range-control input { width:100%; height:3px; accent-color:var(--accent); cursor:pointer; }
.setting-block { border-top:1px solid #272a2a; padding:16px 0 12px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; background:#0f1111; padding:4px; border-radius:10px; margin-top:11px; }
.segmented.three { grid-template-columns:repeat(3,1fr); }
.segmented button { background:transparent; border:0; padding:9px; border-radius:7px; font-size:12px; cursor:pointer; }
.segmented button.selected { background:#2a2d2d; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.setting-note { color:var(--muted); font-size:10px; line-height:1.5; margin:9px 2px 0; }
.zoom-label { display:flex; align-items:center; justify-content:space-between; }
.zoom-label b { font-size:12px; font-weight:600; color:#c9cbc8; }
.zoom-label output { color:var(--muted); font-size:11px; }
.zoom-range { width:100%; height:3px; margin-top:14px; accent-color:var(--accent); }
.landscape-only { display:none !important; }
.tip { margin-top:8px; padding:14px; border-radius:11px; background:#202322; border-left:2px solid var(--accent); }
.tip strong { font-size:11px; }
.tip p { color:var(--muted); font-size:11px; line-height:1.55; margin:6px 0 0; }
.review-modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.8); backdrop-filter:blur(13px); }
.review-card { width:min(720px,100%); max-height:92dvh; overflow:auto; background:#171919; border:1px solid #393c3b; padding:20px; border-radius:20px; box-shadow:0 30px 100px #000; }
.review-heading { display:flex; justify-content:space-between; align-items:center; }
.review-heading h2 { margin:3px 0 15px; font-size:20px; }
.review-heading button { display:block; }
.review-card video { width:100%; max-height:64dvh; background:#000; border-radius:12px; }
.review-card>p { color:var(--muted); font-size:11px; }
.review-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:14px; }
.backdrop { position:fixed; inset:0; z-index:29; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); }
@keyframes pulse { 50%{opacity:.3} }

@media (max-width:1050px) {
  .workspace { grid-template-columns:minmax(220px,280px) minmax(370px,1fr); }
  .settings-panel { position:fixed; right:0; top:0; bottom:0; z-index:40; width:min(350px,92vw); border-radius:20px 0 0 20px; transform:translateX(105%); transition:transform .25s; overflow-y:auto; box-shadow:-20px 0 70px #000; padding-top:max(20px,env(safe-area-inset-top)); }
  .settings-panel.open { transform:translateX(0); }
  .settings-heading button { display:block; }
}
@media (max-width:720px) {
  .topbar { height:58px; padding:0 14px; grid-template-columns:1fr auto; }
  .status-pill { position:fixed; top:66px; left:50%; transform:translateX(-50%); z-index:12; background:rgba(15,17,17,.82); padding:7px 11px; border-radius:20px; max-width:82vw; }
  .top-button { grid-column:2; }
  .workspace { display:flex; flex-direction:column; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); gap:14px; }
  .camera-panel { order:1; width:100%; }
  .script-panel { order:2; width:100%; }
  .stage.portrait { width:100%; max-height:none; border-radius:20px; }
  .stage.landscape { width:100%; margin-top:0; border-radius:16px; }
  .script-panel textarea { min-height:250px; }
  .transport { position:sticky; bottom:calc(6px + env(safe-area-inset-bottom)); z-index:10; padding:8px; background:rgba(12,14,14,.91); backdrop-filter:blur(12px); border:1px solid #282b2b; border-radius:16px; }
  .secondary-button { font-size:10px; min-height:46px; }
  .record-button { font-size:12px; }
  .prompt-copy { font-size:clamp(22px,var(--prompt-font),54px); }
}
@media (orientation:landscape) and (max-height:560px) {
  .topbar { display:none; }
  .workspace { padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left)); display:block; }
  .camera-panel { height:calc(100dvh - 12px); display:grid; grid-template-columns:minmax(0,1fr) 124px; grid-template-rows:1fr auto; gap:7px; }
  .stage,.stage.portrait,.stage.landscape { grid-row:1/3; width:auto; max-width:calc(100vw - 143px); height:calc(100dvh - 12px); max-height:none; margin:auto; border-radius:14px; aspect-ratio:16/9; }
  .quick-actions,.transport { display:flex; flex-direction:column; margin:0; position:static; padding:0; background:none; border:0; gap:6px; }
  .quick-actions { align-self:end; }
  .transport { align-self:start; }
  .quick-actions button,.secondary-button,.record-button { min-height:36px; width:100%; font-size:10px; padding:4px; }
  .landscape-only { display:inline-flex !important; }
  .script-panel { display:none; }
  .script-panel.open { display:block; position:fixed; z-index:40; inset:6px auto 6px max(6px,env(safe-area-inset-left)); width:min(430px,calc(100vw - 145px)); overflow:auto; border-radius:14px; }
  .script-panel.open textarea { min-height:calc(100dvh - 120px); resize:none; }
  .script-heading button { display:block; }
  .prompt-window { top:8%; height:72%; }
  .guide-line { top:41%; }
}