* { box-sizing:border-box; }
:root { --red:#a90008; --gold:#efd38a; --ink:#3d1713; --cream:#fff9ed; }
html,body { margin:0; min-height:100%; background:#4d0004; color:var(--cream); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
body { overflow-x:hidden; }
button { border:0; cursor:pointer; font:inherit; }
button:disabled { cursor:wait; opacity:.62; }
button:focus-visible { outline:3px solid #ffe7a6; outline-offset:3px; }
.app-shell { width:100vw; max-width:540px; height:max(100vh, calc(100vw * 16 / 9)); margin:0 auto; position:relative; background:#a90008 url("./poster-bg.png") center top / 100% 100% no-repeat; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.poster-stage { position:absolute; left:0; top:33.15%; width:100%; height:32.7%; overflow:visible; background:rgba(105,0,6,.15); }
#cameraPreview,#recordingPreview { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#670007; }
#cameraPreview { transform:scaleX(-1); }
#recordingPreview { display:none; transform:none; background:#290306; }
.stage-placeholder { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(255,249,237,.95); text-align:center; text-shadow:0 1px 8px rgba(55,0,0,.6); }
.stage-placeholder strong { font-size:15px; font-weight:600; }.stage-placeholder small { font-size:11px; opacity:.8; }
.camera-icon { width:43px; height:31px; position:relative; margin-bottom:6px; border:1.5px solid rgba(255,249,237,.9); border-radius:7px; }.camera-icon:before { content:""; position:absolute; width:11px; height:7px; top:-6px; left:7px; border:1.5px solid rgba(255,249,237,.9); border-bottom:0; border-radius:4px 4px 0 0; }.camera-icon span { position:absolute; width:12px; height:12px; border:1.5px solid rgba(255,249,237,.9); border-radius:50%; left:14px; top:8px; }
.stage-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(45,0,3,.12),transparent 48%,rgba(45,0,3,.48)); }
.recording-badge { display:none; position:absolute; z-index:3; top:15px; left:16px; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; color:#fff9ed; background:rgba(47,0,4,.7); font-size:11px; }.recording-badge span { width:7px; height:7px; border-radius:50%; background:#ff8b6e; box-shadow:0 0 0 4px rgba(255,139,110,.18); animation:pulse 1.3s infinite; }
.timer { display:none; position:absolute; z-index:3; right:16px; top:16px; color:#fff9ed; font-size:12px; letter-spacing:.08em; font-variant-numeric:tabular-nums; text-shadow:0 1px 8px #4c0004; }
.flip-camera { position:absolute; z-index:4; right:15px; bottom:16px; width:35px; height:35px; color:#fff9ed; background:rgba(65,0,5,.62); border:1px solid rgba(255,234,181,.35); border-radius:50%; font-size:20px; line-height:1; }
.control-dock { position:fixed; z-index:9; left:50%; right:auto; bottom:max(12px, env(safe-area-inset-bottom)); width:min(calc(100vw - 28px), 512px); transform:translateX(-50%); padding:11px 12px 10px; border:1px solid rgba(255,233,180,.24); border-radius:14px; background:rgba(66,0,5,.82); backdrop-filter:blur(7px); }
.limit-copy { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:rgba(255,249,237,.8); font-size:10px; }.dot { width:6px; height:6px; border-radius:50%; background:#f0cf7c; box-shadow:0 0 8px rgba(240,207,124,.9); }.control-buttons { display:flex; gap:8px; }
.primary-action,.stop-action,.secondary-action,.submit-action { display:inline-flex; align-items:center; justify-content:center; min-height:40px; border-radius:999px; transition:transform .2s,background .2s,opacity .2s; }.primary-action:hover,.submit-action:hover,.secondary-action:hover,.stop-action:hover { transform:translateY(-1px); }.primary-action { flex:1; color:#5b0707; background:#f6d98d; box-shadow:0 5px 15px rgba(54,0,0,.25); font-weight:700; }.button-icon { margin-right:7px; font-size:10px; }.stop-action { display:none; flex:1; color:#fff9ed; background:#5c1515; border:1px solid rgba(255,227,161,.45); }.stop-square { width:10px; height:10px; margin-right:8px; border-radius:2px; background:#fff9ed; }
.submit-panel { display:none; position:fixed; z-index:10; left:50%; right:auto; bottom:max(12px, env(safe-area-inset-bottom)); width:min(calc(100vw - 28px), 512px); transform:translateX(-50%); padding:17px; color:var(--ink); border:1px solid rgba(255,225,161,.55); border-radius:16px; background:rgba(255,249,237,.97); box-shadow:0 12px 35px rgba(43,0,0,.35); }.panel-heading { display:flex; align-items:center; justify-content:space-between; font-size:16px; }.draft-label { padding:5px 9px; color:#8d281c; background:#f7dfcf; border-radius:999px; font-size:10px; }.submit-panel p { margin:9px 0 14px; color:#7b625a; font-size:11px; line-height:1.65; }.panel-actions { display:flex; gap:8px; }.secondary-action,.submit-action { flex:1; min-height:38px; font-size:12px; }.secondary-action { color:var(--ink); border:1px solid rgba(61,23,19,.2); background:transparent; }.submit-action { color:#fff9ed; background:var(--ink); }.submit-action span { margin-left:9px; font-size:17px; }.upload-progress { margin-top:13px; }.progress-meta { display:flex; justify-content:space-between; margin-bottom:7px; font-size:10px; color:#8d786f; }.progress-meta strong { color:var(--ink); }.progress-track { height:5px; overflow:hidden; border-radius:999px; background:#eaded2; }.progress-track div { width:0; height:100%; border-radius:inherit; background:#bb4f37; transition:width .2s; }
.success-panel { position:absolute; z-index:7; left:50%; top:50%; width:calc(100% - 50px); transform:translate(-50%,-50%); padding:29px 20px; color:var(--ink); text-align:center; border:1px solid rgba(255,225,161,.55); border-radius:16px; background:rgba(255,249,237,.97); box-shadow:0 12px 35px rgba(43,0,0,.35); }.success-icon { width:42px; height:42px; margin:0 auto 12px; display:grid; place-items:center; color:#fff9ed; border-radius:50%; background:#9a3a2f; font-size:21px; }.success-panel strong { font-size:19px; }.success-panel p { margin:8px 0 11px; color:#7b625a; font-size:12px; }.success-panel small { color:#9a8178; font-size:9px; letter-spacing:.03em; }
.privacy-note { position:absolute; z-index:5; top:66.25%; left:0; width:100%; margin:9px 0 0; color:rgba(255,244,210,.9); text-align:center; font-size:10px; text-shadow:0 1px 5px rgba(70,0,0,.9); }.privacy-note span { margin-right:5px; color:#f1ce79; font-size:13px; }.toast { position:fixed; z-index:10; left:50%; bottom:27px; padding:11px 16px; color:#fff9ed; background:rgba(54,0,4,.94); border:1px solid rgba(255,223,157,.35); border-radius:999px; font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:all .25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes pulse { 50%{opacity:.35} }
@media (min-width:541px) { body { padding:24px 0; }.app-shell { min-height:0; height:calc(100vh - 48px); max-height:960px; background-size:100% 100%; border-radius:4px; box-shadow:0 12px 60px rgba(0,0,0,.45); } }
@media (max-width:360px) { .control-dock { left:50%; right:auto; width:calc(100vw - 18px); bottom:9px; padding:9px; }.limit-copy { font-size:9px; }.primary-action,.stop-action { min-height:37px; } }