:root { --ink:#f4f4f2; --muted:#858585; --line:rgba(255,255,255,.13); --soft-line:rgba(255,255,255,.08); --black:#030303; --panel:#0a0a0a; --lime:#d9ff5a; --alert:#ff5b55; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-width:320px; min-height:100%; background:var(--black); }
body { margin:0; color:var(--ink); font-family:var(--sans); }
button,input { font:inherit; }
button { cursor:pointer; }

.minimal-app { min-height:100dvh; padding:14px; display:grid; grid-template-rows:39px minmax(0,1fr); gap:10px; }
.app-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 7px; }
.brand { color:#e9e9e7; text-decoration:none; font-size:11px; letter-spacing:.13em; font-weight:800; }
.brand span { color:#777; margin-left:3px; }
.privacy-pill { display:flex; align-items:center; gap:6px; color:#707070; font-size:9px; font-weight:700; letter-spacing:.13em; }
.privacy-pill span,.status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; background:#5c5c5c; }
.privacy-pill span { background:var(--lime); box-shadow:0 0 10px rgba(217,255,90,.65); }
.icon-button { justify-self:end; width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:#ddd; background:transparent; transition:.2s ease; }
.icon-button:hover,.icon-button[aria-expanded="true"] { border-color:#737373; background:#141414; }
.icon-button svg { width:15px; fill:currentColor; }

.camera-panel { min-height:0; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#080808; }
.camera-stage { position:absolute; inset:0; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 45%,#151515,#070707 65%); }
.camera-stage::after { content:""; pointer-events:none; position:absolute; z-index:4; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 18%,transparent 75%,rgba(0,0,0,.55)); }
.camera-stage.is-alert { box-shadow:inset 0 0 0 2px var(--alert); }
.camera-stage.is-alert::before { content:""; z-index:5; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 0 47%,rgba(255,91,85,.12) 50%,transparent 53%); animation:scan 1.9s linear infinite; }
@keyframes scan { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.camera-stage > video,.camera-stage > canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.camera-stage > canvas { z-index:3; pointer-events:none; }
.camera-toolbar { position:absolute; z-index:8; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; pointer-events:none; }
.live-label { display:flex; gap:8px; align-items:center; color:#b5b5b3; font-size:9px; letter-spacing:.14em; font-weight:800; }
.fps-readout { color:#777; font-size:9px; font-weight:700; letter-spacing:.13em; }
.empty-state { position:absolute; z-index:2; inset:0; display:grid; place-content:center; justify-items:center; gap:9px; color:#d7d7d4; text-align:center; font-size:13px; }
.empty-state span { color:#747474; font-size:11px; }
.camera-icon { width:38px; height:27px; position:relative; border:1.5px solid #6f6f6f; border-radius:5px; }
.camera-icon::before { content:""; position:absolute; top:7px; left:13px; width:10px; height:10px; border:1.5px solid #777; border-radius:50%; }
.camera-icon::after { content:""; position:absolute; top:7px; left:-8px; border-width:6px 8px 6px 0; border-style:solid; border-color:transparent #6f6f6f transparent transparent; }
.phone-card { position:absolute; z-index:5; border:1.5px solid var(--alert); background:rgba(255,91,85,.08); box-shadow:0 0 24px rgba(255,91,85,.24); pointer-events:none; }
.phone-card > span:not(#phone-score) { width:9px; height:9px; position:absolute; }
.target-corner.tl { top:-3px; left:-3px; border-top:2px solid var(--lime); border-left:2px solid var(--lime); }.target-corner.tr { top:-3px; right:-3px; border-top:2px solid var(--lime); border-right:2px solid var(--lime); }.target-corner.bl { bottom:-3px; left:-3px; border-bottom:2px solid var(--lime); border-left:2px solid var(--lime); }.target-corner.br { bottom:-3px; right:-3px; border-bottom:2px solid var(--lime); border-right:2px solid var(--lime); }
#phone-score { position:absolute; top:-22px; left:-2px; padding:3px 5px; color:#fff; background:var(--alert); font-size:8px; font-weight:800; letter-spacing:.11em; white-space:nowrap; }
.detected-banner { position:absolute; z-index:7; left:18px; bottom:80px; display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid rgba(255,255,255,.18); background:rgba(16,5,5,.84); color:#f6f6f4; font-size:9px; letter-spacing:.14em; }
.detected-banner span { width:6px; height:6px; border-radius:50%; background:var(--alert); box-shadow:0 0 9px var(--alert); }
.interruption-player { position:absolute; z-index:10; top:58px; right:18px; width:min(330px,31vw); overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:9px; background:#050505; box-shadow:0 16px 42px rgba(0,0,0,.6); }.interruption-player.is-portrait { width:min(182px,20vw); }.interruption-player__bar { display:flex; align-items:center; gap:7px; height:28px; padding:0 9px; background:rgba(12,12,12,.96); color:#d9d9d6; font-size:8px; letter-spacing:.12em; }.interruption-player__bar > span { width:5px; height:5px; border-radius:50%; background:var(--alert); box-shadow:0 0 8px var(--alert); }.interruption-player__bar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.interruption-player__bar small { margin-left:auto; color:#898989; font-size:7px; font-weight:700; }.interruption-player video { display:block; width:100%; aspect-ratio:4 / 3; max-height:45vh; background:#000; object-fit:cover; }.interruption-player.is-portrait video { aspect-ratio:9 / 16; }
.camera-footer { position:absolute; z-index:9; inset:auto 0 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:14px; padding:17px 20px; }
.session-copy { min-width:0; display:grid; gap:4px; }.footer-label { color:#707070; font-size:8px; letter-spacing:.14em; font-weight:800; }.session-copy strong { overflow:hidden; color:#ddd; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; }.message { align-self:center; max-width:290px; color:#888; text-align:center; font-size:10px; line-height:1.35; }.message.error { color:#ff9c96; }.message.success { color:var(--lime); }
.button { border:1px solid transparent; border-radius:7px; padding:10px 12px; font-size:10px; font-weight:800; letter-spacing:.04em; transition:transform .18s,background .18s,border-color .18s,opacity .18s; }.button:hover:not(:disabled) { transform:translateY(-1px); }.button:disabled { cursor:not-allowed; opacity:.45; }.button span { margin-left:5px; }.primary { justify-self:end; min-width:89px; color:#171710; background:var(--lime); }.primary:hover:not(:disabled) { background:#e6ff91; }.secondary { width:100%; color:#ddd; background:#161616; border-color:#333; }.secondary:hover:not(:disabled) { background:#222; border-color:#555; }

.settings-drawer { position:fixed; z-index:20; left:50%; bottom:14px; width:min(440px,calc(100% - 28px)); padding:14px 17px 17px; border:1px solid #303030; border-radius:14px; background:rgba(13,13,13,.98); box-shadow:0 24px 70px rgba(0,0,0,.7); transform:translate(-50%,calc(100% + 28px)); opacity:0; pointer-events:none; transition:transform .28s ease,opacity .2s; }.settings-drawer.is-open { transform:translate(-50%,0); opacity:1; pointer-events:auto; }.drawer-handle { width:33px; height:3px; margin:0 auto 14px; border-radius:99px; background:#393939; }.drawer-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:16px; }.drawer-kicker { color:#777; font-size:8px; font-weight:800; letter-spacing:.15em; }.drawer-header h1 { margin:4px 0 0; font-size:17px; letter-spacing:-.04em; }.close-button { width:25px; height:25px; border:0; color:#a5a5a5; background:transparent; font-size:18px; line-height:1; }.close-button:hover { color:#fff; }
.upload-card { min-height:65px; display:flex; align-items:center; gap:11px; padding:10px; border:1px solid #333; border-radius:8px; background:#101010; cursor:pointer; transition:border-color .2s; }.upload-card:hover { border-color:#777; }.upload-card input { position:absolute; width:1px; height:1px; opacity:0; }.upload-icon { width:33px; height:33px; display:grid; place-items:center; border-radius:5px; background:#202020; color:var(--lime); font-size:11px; font-weight:800; }.upload-copy { min-width:0; display:grid; gap:3px; }.upload-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e1e1df; font-size:11px; }.upload-copy small { color:#777; font-size:9px; }.upload-arrow { margin-left:auto; color:#aaa; font-size:17px; }
.video-note { display:grid; gap:4px; }.video-note span { color:#777; font-size:8px; font-weight:800; letter-spacing:.13em; }.video-note strong { color:#cfcfcb; font-size:10px; font-weight:600; }
.setting { padding:16px 0; border-bottom:1px solid var(--soft-line); }.setting-top,.inline-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; }.setting label { color:#c6c6c3; font-size:11px; font-weight:600; }.setting output { color:var(--lime); font-size:9px; font-weight:700; }input[type="range"] { appearance:none; width:100%; height:3px; margin-top:14px; border:0; border-radius:99px; outline:0; background:linear-gradient(to right,var(--lime) 0 43%,#363636 43%); }input[type="range"]::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border:2px solid #111; border-radius:50%; background:var(--lime); }input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:2px solid #111; border-radius:50%; background:var(--lime); }.switch input { position:absolute; opacity:0; }.switch span { display:block; position:relative; width:35px; height:19px; border-radius:99px; background:#343434; }.switch span::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#e7e7e5; transition:transform .18s; }.switch input:checked + span { background:#718923; }.switch input:checked + span::after { transform:translateX(16px); }.settings-drawer .secondary { margin-top:16px; }

@media (max-width:600px) { .minimal-app { padding:9px; gap:7px; }.app-header { padding:0 4px; }.camera-panel { border-radius:10px; }.camera-toolbar { padding:14px; }.camera-footer { grid-template-columns:1fr auto; padding:14px; }.message { display:none; }.detected-banner { bottom:67px; left:14px; }.interruption-player { top:48px; right:12px; width:min(250px,62vw); }.interruption-player.is-portrait { width:min(152px,43vw); }.privacy-pill { font-size:8px; }.settings-drawer { bottom:9px; width:calc(100% - 18px); } }