[hidden] { display: none !important; }
:root { --bg:#0f1115; --card:#1b1f27; --muted:#8b94a7; --pri:#0d6efd; --ok:#1faf5a; --warn:#caa12a; --err:#d2453f; --txt:#eef1f6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--txt); }
.bar { display:flex; align-items:center; padding:8px 12px 8px 16px; background:#11141a; position:sticky; top:0; z-index:10; }
.title { font-weight:600; }
.net { color:var(--ok); font-size:18px; margin-left:auto; }
.net.off { color:var(--err); }

.screen { display:none; padding:16px; }
.screen.active { display:block; }

.scanner { position:relative; width:100%; aspect-ratio:3/4; background:#000; border-radius:12px; overflow:hidden; }
#video { width:100%; height:100%; object-fit:cover; }
.reticle { position:absolute; inset:18% 12%; border:3px solid rgba(255,255,255,.85); border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.25); }
.hint { text-align:center; color:var(--muted); }

.manual { display:flex; gap:8px; margin-top:8px; }
.manual input { flex:1; padding:12px; border-radius:10px; border:1px solid #2a2f3a; background:#0c0e12; color:var(--txt); }

.card { background:var(--card); border-radius:12px; padding:16px; margin-bottom:14px; }
.card.warn { border:1px solid var(--warn); color:var(--warn); }
.big { font-size:20px; font-weight:700; margin-bottom:6px; }
.muted { color:var(--muted); font-size:14px; }

.btn { padding:14px 18px; border:none; border-radius:12px; background:var(--pri); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.btn:disabled { opacity:.5; }
.btn.ghost { background:#2a2f3a; }
.btn.danger { background:var(--err); }
.btn.block { display:block; width:100%; text-align:center; margin-bottom:12px; }
.row { display:flex; gap:10px; }
.row .btn { flex:1; }

.thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.thumbs .t { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#000; }
.thumbs img { width:100%; height:100%; object-fit:cover; }
.thumbs .x { position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:24px; height:24px; }

.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px 12px; }
.gallery-tile { position:relative; aspect-ratio:1; padding:0; overflow:hidden; border:2px solid transparent; border-radius:10px; background:#252b35; color:var(--muted); }
.gallery-tile.main { border-color:var(--pri); }
.gallery-tile img { width:100%; height:100%; object-fit:cover; }
.gallery-main { position:absolute; left:4px; bottom:4px; padding:2px 5px; border-radius:5px; background:var(--pri); color:#fff; font-size:11px; }
.gallery-sync { position:absolute; right:4px; bottom:4px; padding:2px 5px; border-radius:5px; font-size:10px; color:#fff; background:#77611a; }
.gallery-sync.failed { background:var(--err); }
.gallery-placeholder { display:flex; width:100%; height:100%; align-items:center; justify-content:center; padding:8px; text-align:center; font-size:12px; }
.gallery-placeholder.loading::before { content:'◌'; margin-right:4px; animation:spin 1s linear infinite; }
.gallery-placeholder.failed { color:#ffd2cf; background:#3c2425; }
.photo-view img { display:block; width:100%; max-height:66vh; object-fit:contain; background:#000; border-radius:8px; }
.photo-view .muted { margin-top:8px; overflow-wrap:anywhere; }
@keyframes spin { to { transform:rotate(360deg); } }

.status { padding:0 16px 32px; }
.status h3 { color:var(--muted); font-size:14px; font-weight:600; }
#status-list { list-style:none; padding:0; margin:0; }
#status-list li { background:var(--card); border-radius:10px; padding:10px 12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.tag { font-size:12px; padding:2px 8px; border-radius:20px; }
.tag.queued { background:#33405a; }
.tag.processing { background:#3a4a2a; color:#d6f5b0; }
.tag.done { background:var(--ok); }
.tag.error { background:var(--err); }
.icon-btn { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--txt); display:grid; place-items:center; font-size:26px; }
.icon-btn svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; }
.settings-head { display:flex; align-items:center; gap:6px; margin:-8px -8px 14px; }.settings-head h1 { font-size:20px; margin:0; }
.label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; margin:12px 0 7px; }.divider { border-top:1px solid #303744; margin:14px 0; }
.connection-lost { background:#332b16; border:1px solid #5a4a1e; color:#ffe9b0; }.connection-lost .muted { color:#ffe9b0; }.connection-title { font-weight:700; margin-bottom:5px; }.connection-title::before { content:'●'; margin-right:8px; color:var(--warn); }.connection-title.ok::before { color:var(--ok); }.connection-title.lost::before { color:#f0bd36; }
.support-links { display:flex; gap:8px; margin-top:12px; }.support-link { flex:1; text-decoration:none; padding:10px; text-align:center; }
.details summary { cursor:pointer; font-weight:700; }.key-values { margin:12px 0; }.key-values > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #303744; font-size:14px; }.key-values span { color:var(--muted); }.key-values strong { text-align:right; overflow-wrap:anywhere; }.text-danger { width:100%; border:0; background:none; color:#ff817b; padding:18px; font-size:16px; }
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.7); }.modal-card { max-width:440px; background:var(--card); border-radius:14px; padding:18px; }.modal-card .row { margin-top:16px; }.queue-warn { margin-top:14px; padding:10px; border-radius:8px; background:#332b16; color:#ffe9b0; }.error-note { margin-top:12px; color:#ffaba7; }
.install-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }.install-brand img { width:60px; height:60px; border-radius:14px; }.install-card li { margin:10px 0; }
.draft-input { display:block; width:100%; margin:12px 0; padding:12px; border:1px solid #2a2f3a; border-radius:10px; background:#0c0e12; color:var(--txt); font:inherit; }.draft-results { margin:12px 0; }.draft-result { display:block; width:100%; margin-bottom:8px; padding:12px; border:0; border-radius:10px; background:var(--card); color:var(--txt); text-align:left; font:inherit; }.draft-result .muted { display:block; margin-top:4px; }.draft-confirm-photo { display:block; width:120px; height:120px; margin:12px 0; border-radius:10px; object-fit:cover; background:#000; }