:root { --bg:#121216; --card:#1c1c23; --line:#2b2b35; --fg:#f1f1f4; --muted:#9a9aa8; --acc:#ff5c8a; --acc2:#c93f6a; --ok:#4cd68a; --err:#ff6b6b; --warn:#ffb84c; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display:none !important; }
header { display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 12px) 18px 8px; }
.brand { font-weight:800; font-size:20px; letter-spacing:.2px; }
.brand span { color:var(--acc); }
.pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.pill.on { color:var(--ok); border-color:var(--ok); } .pill.off { color:var(--warn); border-color:var(--warn); }
main { padding:0 14px calc(env(safe-area-inset-bottom) + 90px); max-width:720px; margin:0 auto; }
.screen { display:none; } .screen.on { display:block; }
h2 { font-size:18px; margin:14px 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
h3 { font-size:15px; margin:0 0 6px; color:var(--fg); }
.step { display:inline-flex; width:24px; height:24px; border-radius:50%; background:var(--acc); color:#fff; font-size:13px; align-items:center; justify-content:center; }
p.hint { color:var(--muted); font-size:14px; margin:4px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; }
.card.notice { border-color:var(--acc2); }
.card.login { margin-top:12vh; }
.card > h2 { margin-top:0; }
button, .btn { appearance:none; border:0; border-radius:12px; padding:14px 16px; font-size:16px; font-weight:600; width:100%; cursor:pointer; color:var(--fg); background:var(--line); margin-top:8px; }
.btn-acc { background:var(--acc); color:#fff; } .btn-acc:disabled { opacity:.4; cursor:default; }
.btn-ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
.btn-danger { background:transparent; color:var(--err); border:1px solid var(--line); }
button.small { padding:9px 12px; font-size:14px; }
button.icon { width:52px; flex:0 0 52px; font-size:20px; padding:0; }
.row { display:flex; gap:8px; align-items:center; } .row > * { flex:1; }
.row.tools { margin-top:8px; } .row.tools .status { flex:2; text-align:right; }
label { display:block; font-size:14px; color:var(--muted); margin:10px 0 4px; }
input, select { width:100%; padding:12px; border-radius:12px; background:var(--bg); color:var(--fg); border:1px solid var(--line); font-size:16px; margin-top:4px; }
select.chip { width:auto; flex:0 0 auto; padding:5px 26px 5px 10px; font-size:13px; font-weight:600; color:var(--acc); border-color:var(--acc2); border-radius:999px; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:10px; }
.grid.two { grid-template-columns:repeat(2, 1fr); }
.grid img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; background:#000; display:block; }
.grid.two img { animation:fade .4s ease; }
@keyframes fade { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.tile { position:relative; border-radius:10px; overflow:hidden; border:2px solid transparent; }
.tile.sel { border-color:var(--acc); }
.tile .tick { position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.55); color:transparent; font-style:normal; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.tile.sel .tick { background:var(--acc); color:#fff; }
.tile .del { position:absolute; left:6px; top:6px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.tile .num { position:absolute; left:6px; bottom:6px; font-size:12px; font-weight:700; background:rgba(0,0,0,.55); color:#fff; padding:2px 7px; border-radius:999px; }
.preview { width:100%; max-height:46vh; object-fit:contain; border-radius:12px; background:#000; display:block; }
.strip { display:flex; gap:6px; overflow-x:auto; padding:6px 0; min-height:10px; }
.strip img { width:56px; height:74px; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.bar { height:8px; background:var(--line); border-radius:8px; overflow:hidden; margin:12px 0 6px; }
.bar i { display:block; height:100%; width:0; background:var(--acc); transition:width .4s; }
.status { font-size:14px; color:var(--muted); min-height:1.2em; }
.status.err { color:var(--err); } .status.ok { color:var(--ok); }
.kv { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.kv span { color:var(--muted); }
nav { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--card); border-top:1px solid var(--line); padding:4px 6px calc(env(safe-area-inset-bottom) + 4px); z-index:5; }
nav button { background:transparent; color:var(--muted); font-size:20px; padding:6px 2px; border-radius:10px; margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
nav button span { font-size:11px; font-weight:600; }
nav button.on { color:var(--fg); background:var(--bg); }
.hist { padding:12px 0; border-bottom:1px solid var(--line); }
.hist .top { display:flex; gap:10px; align-items:center; }
.hist .top img { width:56px; height:74px; object-fit:cover; border-radius:8px; background:#000; }
.hist .top .meta { flex:1; font-size:14px; color:var(--muted); }
.hist .top .meta b { color:var(--fg); display:block; }
.hist .top button { width:auto; flex:0 0 auto; padding:8px 12px; margin:0; font-size:14px; }
.hist .thumbs { display:flex; gap:4px; overflow-x:auto; margin-top:8px; }
.hist .thumbs img { width:84px; height:112px; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.hist .err { color:var(--err); font-size:13px; }

/* camera overlay */
#cam { position:fixed; inset:0; background:#000; z-index:20; display:flex; flex-direction:column; }
#cam-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#cam-video.mirror { transform:scaleX(-1); }
.cam-top { position:relative; display:flex; align-items:center; gap:8px; padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; background:linear-gradient(rgba(0,0,0,.6), transparent); }
.cam-top button { width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:18px; padding:0; margin:0; }
#cam-guide { flex:1; text-align:center; font-size:14px; font-weight:600; color:#fff; text-shadow:0 1px 3px #000; }
#cam-shots { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 110px); padding:0 12px; }
#cam-shots img { border:2px solid #fff; }
.cam-bottom { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:16px 28px calc(env(safe-area-inset-bottom) + 20px); background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.cam-bottom button { width:auto; margin:0; }
#cam-gal { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:22px; padding:0; }
#cam-shutter { width:76px; height:76px; border-radius:50%; background:#fff; border:5px solid rgba(255,255,255,.35); background-clip:content-box; padding:0; }
#cam-shutter:active { transform:scale(.92); }
#cam-done { background:var(--acc); color:#fff; padding:12px 18px; border-radius:999px; font-size:15px; min-width:52px; }
#cam-done:disabled { opacity:.35; }
#cam-nolive { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:24px; gap:8px; }
#cam-nolive p { color:var(--muted); text-align:center; }

/* lightbox */
#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:30; display:flex; flex-direction:column; }
#lb-img { flex:1; min-height:0; width:100%; object-fit:contain; }
.lb-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; color:var(--muted); font-size:14px; }
.lb-bar button { width:52px; margin:0; background:transparent; font-size:28px; padding:4px; }
.lb-actions { display:flex; gap:8px; padding:0 14px calc(env(safe-area-inset-bottom) + 14px); }
.lb-actions button { margin:0; }
#toast { position:fixed; top:calc(env(safe-area-inset-top) + 12px); left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 14px; border-radius:10px; font-size:14px; z-index:40; max-width:90vw; text-align:center; }