:root { --ground:#08142D; --raised:#162647; --control:#22355C; --ink:#fff; --muted:#B8C5DE; --line:#7D8DB3; --cyan:#00C6FF; --error:#FF9CC8; --good:#11D6A3;
  --brand:linear-gradient(95deg,#00C6FF,#3B82F6,#A78BFA,#EC4899,#FF8A3D); }
@media (prefers-color-scheme: light) { :root { --ground:#F8FBFF; --raised:#fff; --control:#E8EEF8; --ink:#0B1731; --muted:#5A6980; --line:#7C8AA6; --cyan:#0B63D6; --error:#B4185F; --good:#0A8F6C; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100dvh; background:var(--ground); color:var(--ink); font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
main { max-width:720px; margin:0 auto; padding:max(20px,env(safe-area-inset-top)) 16px 16px; display:flex; flex-direction:column; gap:14px; }
h1 { margin:0; font-size:28px; font-weight:800; line-height:1.15; }
h2 { margin:10px 0 0; font-size:15px; color:var(--muted); font-weight:700; }
p { margin:0; }
.name { font-weight:800; font-size:20px; background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content; }
.muted { color:var(--muted); font-size:15px; }
.bad { color:var(--error); font-weight:600; }
.good { color:var(--good); font-weight:600; }
button,.pick { font:inherit; color:var(--ink); background:var(--control); border:0; border-radius:12px; min-height:48px; padding:10px 16px; font-weight:600; cursor:pointer; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
button.primary,.pick { background:var(--brand); color:#08142D; font-weight:800; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,.pick:focus-within { outline:3px solid var(--cyan); outline-offset:2px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > .grow { flex:1 1 200px; min-width:0; }
.card { background:var(--raised); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:10px; }
form { display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:15px; color:var(--muted); font-weight:600; }
input,select { font:inherit; color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:10px; min-height:48px; padding:8px 12px; width:100%; }
input[type=checkbox] { width:28px; height:28px; min-height:0; flex:none; padding:0; margin:0; accent-color:var(--cyan); }
label.item { flex-direction:row; font-size:16px; color:var(--ink); font-weight:500; }
input[type=file] { position:absolute; width:1px; height:1px; opacity:0; min-height:0; padding:0; }
nav { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--raised); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:4px; justify-content:center; }
nav[hidden] { display:none; }
nav button { flex:1; max-width:140px; background:transparent; font-size:14px; padding:8px 2px; }
nav button[aria-current=page] { background:var(--cyan); color:#08142D; font-weight:800; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.tile { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--raised); padding:0; min-height:0; width:100%; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.tile .mark { position:absolute; left:6px; right:6px; bottom:6px; padding:2px 6px; border-radius:8px; background:rgba(8,20,45,.88); color:#fff; font-size:12px; font-weight:700; text-align:center; }
.item { display:flex; align-items:center; gap:12px; background:var(--raised); border-radius:12px; padding:10px 14px; min-height:52px; }
.item .words { flex:1; min-width:0; overflow-wrap:anywhere; }
.item small { display:block; color:var(--muted); font-size:14px; }
.bar { height:8px; border-radius:4px; background:var(--control); overflow:hidden; }
.bar div { height:100%; background:var(--brand); }
.code { letter-spacing:.2em; font-size:22px; font-weight:800; text-transform:uppercase; }
#toast { position:fixed; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; background:var(--brand); color:#08142D; padding:12px 16px; border-radius:14px; font-weight:800; text-align:center; }
#toast[hidden] { display:none; }
[hidden] { display:none !important; }