:root{
  --paper: oklch(97.6% 0.005 80);
  --paper-2: oklch(99.2% 0.003 80);
  --ink: oklch(26% 0.008 80);
  --ink-2: oklch(45% 0.008 80);
  --muted: oklch(62% 0.008 80);
  --line: oklch(88% 0.006 80);
  --accent: oklch(48% 0.075 158);
  --danger: oklch(52% 0.15 25);
  --r: 10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper: oklch(21% 0.006 80);
    --paper-2: oklch(25% 0.006 80);
    --ink: oklch(94% 0.005 80);
    --ink-2: oklch(78% 0.006 80);
    --muted: oklch(62% 0.008 80);
    --line: oklch(34% 0.006 80);
    --accent: oklch(72% 0.085 158);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
main{
  max-width:520px;
  margin:0 auto;
  padding:44px 24px 40px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header{margin-bottom:36px}
h1{
  font-family:Georgia,"Songti SC","STSong",serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:.04em;
  margin:0 0 10px;
}
.sub{margin:0;color:var(--muted);font-size:14px;line-height:1.7}

.view{display:flex;flex-direction:column;gap:12px}
.hidden{display:none !important}

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  padding:15px 20px;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .15s, border-color .15s, opacity .15s;
  min-height:52px;
}
.btn:active{background:var(--paper-2)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:active{opacity:.85}
.btn:disabled{opacity:.35;cursor:default}

.label{margin:0;color:var(--muted);font-size:13px;letter-spacing:.06em}
.hint{margin:0;color:var(--muted);font-size:14px}
.hint.bad{color:var(--danger)}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:44px;
  letter-spacing:.18em;
  font-weight:500;
  padding:18px 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
  user-select:all;
}

.input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px;
  letter-spacing:.16em;
  text-align:center;
  text-transform:uppercase;
  padding:16px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper-2);
  color:var(--ink);
  min-height:56px;
}
.input:focus{outline:none;border-color:var(--ink-2)}

.state{
  margin:0 0 6px;
  font-size:14px;
  color:var(--muted);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.state.ok{color:var(--accent)}
.state.bad{color:var(--danger)}

/* 拖拽只在有鼠标的桌面出现 —— 手机上它点不动，是废元素 */
.drop{display:none}
@media (hover:hover) and (pointer:fine){
  .drop{display:block;border:1px dashed var(--line);border-radius:var(--r);padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
  .drop.on{border-color:var(--accent);color:var(--accent)}
}

.list{margin-top:8px}
.item{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.item .name{display:block;margin-bottom:6px;word-break:break-all}
.item .meta{color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;gap:12px}
.item .meta .pct{font-variant-numeric:tabular-nums}
.item.done .meta{color:var(--accent)}
.item.err .meta{color:var(--danger)}
.bar{height:2px;background:var(--line);margin-top:8px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.item.done .bar>i{width:100%}
.item .save{
  margin-top:10px;background:none;border:none;color:var(--accent);
  font:inherit;font-size:13.5px;padding:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}

/* 收到的照片：缩略图 + 一个大到不用找的复制按钮 */
.item img.thumb{
  display:block;width:100%;max-height:200px;object-fit:contain;
  margin:4px 0;border-radius:6px;background:var(--paper-2);
}
.copy{
  display:block;width:100%;margin-top:10px;min-height:60px;
  border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:var(--paper);
  font:inherit;font-size:16.5px;cursor:pointer;
}
.copy:disabled{opacity:.7}
.copy.ok{background:transparent;color:var(--accent)}
.copy-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}

footer{
  margin-top:auto;padding-top:40px;
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
}
#btn-install{width:100%;margin-bottom:6px}
.link{
  background:none;border:none;padding:0;font:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
#v-diag{margin-top:16px}
pre{
  font-family:ui-monospace,Consolas,monospace;
  font-size:11.5px;
  line-height:1.75;
  color:var(--ink-2);
  white-space:pre-wrap;
  word-break:break-all;
  margin:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r);
}