:root { color-scheme: dark; --ink:#f5f7fb; --muted:#9baabd; --panel:#0d1a2a; --line:#24364a; --blue:#42a5ff; --coral:#ff5d5d; --green:#6ce5b1; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% -10%,#153354 0,transparent 38%),#07111f; color:var(--ink); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; }
.app-shell { width:min(100%,760px); margin:auto; padding:0 20px 40px; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:12px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:900; letter-spacing:.12em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--ink); border-radius:8px; color:var(--coral); font-size:12px; }
.format-pill,.success-chip { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; white-space:nowrap; }
.intro { padding:48px 0 30px; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:650px; margin:0; font-size:clamp(42px,10vw,74px); line-height:.98; letter-spacing:-.055em; }
h1 em { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.intro>p:last-child { max-width:570px; margin:22px 0 0; color:var(--muted); }
.studio,.result { background:linear-gradient(145deg,rgba(255,255,255,.035),transparent),var(--panel); border:1px solid var(--line); border-radius:24px; padding:16px; box-shadow:0 28px 80px rgba(0,0,0,.25); }
.viewport { position:relative; overflow:hidden; min-height:320px; max-height:70vh; aspect-ratio:9/16; margin:auto; border-radius:16px; background:#03070d; }
#cameraSource { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#previewCanvas { display:none; width:100%; height:100%; object-fit:contain; background:#000; }
.viewport.active #previewCanvas { display:block; }
.empty-state { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; padding:28px; color:var(--muted); }
.empty-state strong { color:var(--ink); margin:20px 0 4px; }
.empty-state small { max-width:280px; }
.lens-icon { width:72px; height:58px; display:grid; place-items:center; border:2px solid #42566e; border-radius:16px; }
.lens-icon span { width:28px; height:28px; border:7px solid var(--blue); border-radius:50%; }
.recording-badge { position:absolute; top:14px; left:14px; padding:7px 10px; border-radius:999px; background:rgba(5,8,12,.76); font-size:12px; font-weight:800; letter-spacing:.05em; }
.recording-badge i { display:inline-block; width:8px; height:8px; margin-right:5px; background:var(--coral); border-radius:50%; animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.countdown-warning { position:absolute; left:50%; bottom:14px; translate:-50% 0; width:max-content; padding:8px 12px; background:#d89318; color:#111; border-radius:9px; font-size:13px; font-weight:800; }
.status { min-height:48px; display:flex; align-items:center; padding:10px 3px 0; color:var(--muted); font-size:14px; }
.status.error { color:#ff9292; }
.controls { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.button { min-height:48px; border:1px solid var(--line); border-radius:12px; background:#142438; color:var(--ink); font-weight:750; cursor:pointer; transition:.18s ease; }
.button:hover:not(:disabled) { translate:0 -1px; border-color:#59718c; }
.button:disabled { opacity:.38; cursor:not-allowed; }
.button.primary { background:var(--blue); border-color:var(--blue); color:#06111e; }
.button.accent { background:var(--green); border-color:var(--green); color:#071b14; }
.button.record { border-color:#8f4148; }
.button.danger { background:#411d25; border-color:#76313b; }
.button.subtle { background:transparent; }
.wide { grid-column:1/-1; }
.result { margin-top:22px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 2px 16px; }
h2 { margin:0; font-size:28px; letter-spacing:-.03em; }
.success-chip { color:var(--green); border-color:#275b49; }
#recordedVideo { display:block; width:100%; max-height:68vh; background:#000; border-radius:16px; }
.metadata { display:grid; grid-template-columns:repeat(3,1fr); margin:16px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.metadata div { padding:12px; border-right:1px solid var(--line); min-width:0; }
.metadata div:last-child { border:0; }
dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
dd { overflow:hidden; margin:3px 0 0; text-overflow:ellipsis; font-size:13px; font-weight:700; }
.result-controls { grid-template-columns:repeat(3,1fr); }
.upload-box { margin-top:14px; padding:14px; background:#091421; border-radius:12px; }
.upload-box>div { display:flex; justify-content:space-between; margin-bottom:8px; font-size:13px; }
progress { width:100%; height:8px; accent-color:var(--green); }
footer { padding:28px 8px 0; color:#708198; text-align:center; font-size:12px; }
footer span { color:var(--green); font-weight:800; }
@media (min-width:620px) { .studio { padding:22px; } .viewport { min-height:420px; } .controls { grid-template-columns:repeat(4,1fr); } .wide { grid-column:auto; } .result-controls { grid-template-columns:repeat(3,1fr); } }
@media (max-width:440px) { .app-shell { padding-inline:12px; } .topbar { min-height:62px; } .format-pill { max-width:52%; overflow:hidden; text-overflow:ellipsis; } .intro { padding-top:36px; } .studio,.result { border-radius:18px; padding:10px; } .metadata { grid-template-columns:1fr; } .metadata div { border-right:0; border-bottom:1px solid var(--line); } .result-controls { grid-template-columns:1fr; } }