:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif; background:#05070a; color:#f5f7fa; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#05070a; }
body { min-height:100dvh; }
button,.button,input { font:inherit; }
button,.button { border:1px solid #3a4350; color:#f5f7fa; background:#141a22; border-radius:12px; padding:12px 16px; text-decoration:none; text-align:center; }
button:disabled { opacity:.45; }
button.primary,.button.primary { background:#f4f6f8; color:#05070a; border-color:#f4f6f8; font-weight:700; }
.topbar { position:fixed; z-index:20; top:0; left:0; right:0; height:calc(54px + env(safe-area-inset-top)); padding:calc(8px + env(safe-area-inset-top)) 14px 8px; display:flex; align-items:center; justify-content:space-between; background:rgba(5,7,10,.82); backdrop-filter:blur(16px); border-bottom:1px solid #232a33; }
.badge { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px; font-size:11px; background:#252c36; }
.icon-btn { width:38px; height:38px; padding:0; }
main { padding:calc(70px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); }
.view.hidden { display:none !important; }
.card { max-width:720px; margin:0 auto 14px; border:1px solid #252c36; background:#0e131a; border-radius:18px; padding:18px; }
.card.subtle { background:#0a0e13; }
h1 { margin:.1em 0 .5em; font-size:26px; }
p { color:#b7c0cb; line-height:1.45; }
label { display:grid; gap:7px; margin:16px 0; color:#cbd2da; }
input { width:100%; padding:13px 14px; border-radius:11px; border:1px solid #394351; background:#080b0f; color:#fff; }
.actions { display:grid; gap:10px; }
.error { color:#ff8b8b; }
pre { white-space:pre-wrap; word-break:break-word; font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; background:#070a0e; border:1px solid #232a33; border-radius:12px; padding:12px; max-height:45vh; overflow:auto; }
.progress { height:6px; overflow:hidden; border-radius:999px; background:#252c36; }
.progress.big { height:10px; margin:18px 0; }
.progress i { display:block; width:0%; height:100%; background:#f4f6f8; transition:width .2s linear; }
.capture-view { position:fixed; inset:0; z-index:30; background:#000; display:block; }
#cameraPreview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#guideCanvas { position:absolute; inset:0; width:100%; height:100%; }
.capture-hud { position:absolute; z-index:3; left:12px; right:12px; top:calc(12px + env(safe-area-inset-top)); padding:10px 12px; background:rgba(0,0,0,.58); border-radius:14px; backdrop-filter:blur(10px); }
.hud-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
#targetText { font-size:13px; margin-bottom:8px; }
.capture-controls { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:18px 14px calc(18px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 84px 1fr; align-items:center; gap:14px; background:linear-gradient(transparent,rgba(0,0,0,.8)); }
.shutter { width:78px; height:78px; border-radius:50%; border:5px solid white; background:rgba(255,255,255,.18); padding:0; justify-self:center; box-shadow:inset 0 0 0 4px #0006; }
.shutter:active { transform:scale(.94); }
@media (min-width:700px) { .actions { grid-template-columns:repeat(3,1fr); } }
code { font: .92em ui-monospace,SFMono-Regular,Menlo,monospace; color:#eef2f6; }
.hint { font-size:13px; color:#8f9aa7; }
.system-info { display:grid; gap:8px; margin:16px 0; }
.system-info div { display:flex; gap:14px; justify-content:space-between; border-bottom:1px solid #252c36; padding:8px 0; }
.system-info dt { color:#8f9aa7; }
.system-info dd { margin:0; text-align:right; }
input[type="file"] { padding:10px; }

.hidden { display:none !important; }
.update-notice { border-color:#806b2f; background:#211b0c; color:#ffe6a3; font-size:14px; line-height:1.4; }
#systemWorker { max-width:58%; overflow-wrap:anywhere; font-size:12px; }