/* ==========================================================
   图片查询系统 · design tokens + 共用组件 (仿 iOS)
   register=product · design-language=apple · apple-mode=app
   ========================================================== */
:root{
  --bg:#F2F2F7; --bg-elev:#FFFFFF; --card:#FFFFFF;
  --label:#1C1C1E;
  --label-2:rgba(60,60,67,.62);
  --label-3:rgba(60,60,67,.36);
  --sep:rgba(60,60,67,.14);
  --fill:rgba(120,120,128,.12);
  --fill-2:rgba(120,120,128,.08);
  --blue:#007AFF; --blue-press:#0062CC; --blue-tint:rgba(0,122,255,.12);
  --green:#34C759; --red:#FF3B30; --orange:#FF9500;
  --radius-card:14px; --radius-ctrl:10px; --radius-sheet:20px;
  --shadow-card:0 0 0 .5px rgba(60,60,67,.10), 0 10px 28px -18px rgba(16,24,40,.28);
  --shadow-float:0 8px 40px -8px rgba(16,24,40,.28);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --bg-elev:#1C1C1E; --card:#1C1C1E;
    --label:#F2F2F7;
    --label-2:rgba(235,235,245,.62);
    --label-3:rgba(235,235,245,.32);
    --sep:rgba(84,84,88,.55);
    --fill:rgba(120,120,128,.24);
    --fill-2:rgba(120,120,128,.16);
    --blue-tint:rgba(10,132,255,.18);
    --shadow-card:0 0 0 .5px rgba(255,255,255,.10);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--safe-b) + 8px);
  min-height:100vh;
}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit}

/* ---------- 导航栏 ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  padding-top:var(--safe-t);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:8px;padding:0 16px;position:relative}
.nav-title{font-size:17px;font-weight:600;letter-spacing:-.2px}
.nav-back{font-size:17px;color:var(--blue);display:flex;align-items:center;gap:2px;background:none;border:0;padding:6px 2px;cursor:pointer}
.nav-right{margin-left:auto;font-size:17px;color:var(--blue);background:none;border:0;padding:6px 0;cursor:pointer}
.nav-right:disabled{color:var(--label-3);cursor:default}

/* ---------- 容器 ---------- */
.wrap{max-width:520px;margin:0 auto;padding:16px}
.wrap.wide{max-width:1080px}
.lg{font-size:34px;font-weight:700;letter-spacing:-.6px;margin:4px 0 4px}
.lg-sub{font-size:15px;color:var(--label-2);margin:0 0 20px}

/* ---------- 分组卡片 ---------- */
.group{margin-bottom:22px}
.group-h{font-size:13px;font-weight:500;color:var(--label-2);
  text-transform:none;letter-spacing:.01em;margin:0 0 7px 16px}
.card{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.card-pad{padding:18px}

/* ---------- 列表行 ---------- */
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:52px;position:relative}
.row + .row::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sep)}
.row:active{background:var(--fill-2)}
.row-l{flex:1;min-width:0}
.row-t{font-size:17px;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-s{font-size:13px;color:var(--label-2);margin-top:2px}
.row-v{color:var(--label-2);font-size:17px;display:flex;align-items:center;gap:6px}
.chev{width:8px;height:8px;border-right:1.8px solid var(--label-3);border-bottom:1.8px solid var(--label-3);
  transform:rotate(-45deg);flex:none}

/* ---------- 分段控件 ---------- */
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px}
.seg button{
  flex:1;border:0;background:transparent;border-radius:7px;padding:7px 6px;
  font-size:14px;font-weight:500;color:var(--label);cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.seg button[aria-pressed="true"]{
  background:var(--bg-elev); box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04);
  font-weight:600;
}

/* ---------- 表单 ---------- */
.field{padding:13px 16px;display:flex;align-items:center;gap:12px}
.field + .field{border-top:.5px solid var(--sep)}
.field label{font-size:17px;letter-spacing:-.2px;flex:none;min-width:64px}
.input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-size:17px;color:var(--label);padding:0;font-family:inherit;
}
.input::placeholder{color:var(--label-3)}
textarea.input{resize:none;min-height:44px;line-height:1.45}

/* ---------- 按钮 ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;border:0;border-radius:12px;padding:14px 18px;
  font-size:17px;font-weight:600;letter-spacing:-.2px;
  background:var(--blue);color:#fff;cursor:pointer;
  transition:background .15s ease, transform .06s ease, opacity .15s ease;
}
.btn:active{background:var(--blue-press);transform:scale(.985)}
.btn:disabled{opacity:.42;cursor:default;transform:none}
.btn.ghost{background:var(--fill);color:var(--blue)}
.btn.ghost:active{background:var(--fill-2)}
.btn.danger{background:var(--red)}
.btn.sm{padding:9px 14px;font-size:15px;width:auto;border-radius:9px}

/* ---------- 空态 / 提示 ---------- */
.empty{text-align:center;padding:52px 24px;color:var(--label-2)}
.empty svg{opacity:.2;margin-bottom:14px}
.empty h3{font-size:17px;font-weight:600;color:var(--label);margin:0 0 6px}
.empty p{font-size:14px;margin:0;line-height:1.5}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translate(-50%,16px);
  background:rgba(28,28,30,.92);color:#fff;font-size:14px;line-height:1.4;
  padding:11px 18px;border-radius:12px;max-width:82vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Sheet ---------- */
.sheet-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.sheet-mask.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--bg-elev);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  padding-bottom:calc(var(--safe-b) + 12px);
  transform:translateY(102%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  max-height:82vh;display:flex;flex-direction:column;
}
.sheet.on{transform:translateY(0)}
.sheet::before{content:"";display:block;width:36px;height:5px;border-radius:3px;
  background:var(--label-3);margin:8px auto 0;flex:none}
.sheet-h{padding:14px 20px 10px;display:flex;align-items:center;flex:none}
.sheet-h h3{font-size:17px;font-weight:600;margin:0;flex:1;text-align:center}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 8px}
.grid-n{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:6px 0 12px}
.grid-n button{
  aspect-ratio:1;border:0;border-radius:12px;background:var(--fill);
  font-size:17px;font-weight:500;cursor:pointer;color:var(--label);
  transition:background .15s ease,color .15s ease;
}
.grid-n button[aria-pressed="true"]{background:var(--blue);color:#fff;font-weight:600}

/* ---------- 结果列表 ---------- */
.fitem{display:flex;align-items:center;gap:14px;padding:12px 16px;position:relative;cursor:pointer}
.fitem + .fitem::before{content:"";position:absolute;left:74px;right:0;top:0;height:.5px;background:var(--sep)}
.fitem:active{background:var(--fill-2)}
.thumb{
  width:46px;height:46px;border-radius:9px;flex:none;overflow:hidden;
  background:var(--fill);display:grid;place-items:center;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ext{font-size:11px;font-weight:700;color:var(--label-2);letter-spacing:.02em}

/* ---------- 全屏预览 ---------- */
.viewer{
  position:fixed;inset:0;z-index:150;background:#000;
  display:none;align-items:center;justify-content:center;
}
.viewer.on{display:flex}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.viewer .vbar{
  position:absolute;top:0;left:0;right:0;padding:calc(var(--safe-t) + 10px) 16px 14px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
  color:#fff;font-size:15px;
}
.viewer .vbar .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer .vbar button{
  background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:9px;
  padding:8px 14px;font-size:14px;cursor:pointer;flex:none;
}

/* ---------- 上传进度 ---------- */
.upl{border-top:.5px solid var(--sep);padding:12px 16px}
.upl + .upl{padding-top:10px}
.upl-h{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:8px}
.upl-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-s{color:var(--label-2);font-size:12px;flex:none;font-variant-numeric:tabular-nums}
.bar{height:4px;border-radius:2px;background:var(--fill);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .2s ease}
.upl.done .bar i{background:var(--green)}
.upl.fail .bar i{background:var(--red)}

/* ---------- 徽标 ---------- */
.tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--fill);color:var(--label-2);flex:none}
.tag.ok{background:rgba(52,199,89,.16);color:#248A3D}
.tag.wait{background:rgba(255,149,0,.16);color:#B25000}
.tag.bad{background:rgba(255,59,48,.14);color:#C32016}
@media (prefers-color-scheme:dark){
  .tag.ok{color:#3DDC5E}.tag.wait{color:#FFB340}.tag.bad{color:#FF6B60}
}

/* ---------- 表格 (桌面后台) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  text-align:left;font-weight:500;color:var(--label-2);font-size:12px;
  padding:10px 12px;border-bottom:.5px solid var(--sep);white-space:nowrap;
}
.tbl td{padding:11px 12px;border-bottom:.5px solid var(--sep);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:active{background:var(--fill-2)}
.tbl .n{font-variant-numeric:tabular-nums;color:var(--label-2)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 管理员壳 (宽屏) ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:220px;flex:none;border-right:.5px solid var(--sep);
  background:var(--bg-elev);padding:calc(var(--safe-t) + 18px) 12px 18px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side h1{font-size:15px;font-weight:700;margin:0 12px 18px;letter-spacing:-.2px}
.side .it{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:15px;color:var(--label);cursor:pointer;margin-bottom:2px;border:0;background:none;
  width:100%;text-align:left;
}
.side .it.on{background:var(--blue-tint);color:var(--blue);font-weight:600}
.side .it:active{background:var(--fill-2)}
.side .foot{margin-top:18px;padding-top:14px;border-top:.5px solid var(--sep);font-size:12px;color:var(--label-3);padding-left:12px}
.main{flex:1;min-width:0;padding:calc(var(--safe-t) + 20px) 20px 40px}
.main h2{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:0 0 4px}
.main .sub{font-size:13px;color:var(--label-2);margin:0 0 20px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.sel{
  border:.5px solid var(--sep);background:var(--card);border-radius:9px;
  padding:8px 10px;font-size:14px;color:var(--label);font-family:inherit;outline:none;
}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;padding:6px 0}
.chk input{width:19px;height:19px;accent-color:var(--blue);flex:none}
.hint{font-size:12px;color:var(--label-2);line-height:1.5;margin:6px 0 0}
.warnbox{
  background:rgba(255,149,0,.12);border-radius:10px;padding:12px 14px;
  font-size:13px;line-height:1.5;color:var(--label);margin:10px 0;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}

/* ==========================================================
   finesse · register=product · design-language=apple · apple-mode=app
   A=neutral+blue · B=system-type · C=numberedsections · D=feedback · E=clean-surface
   上传页: 落区 / 检查卡 / 悬浮操作栏 / 常驻进度
   ========================================================== */

/* ---------- 编号分区标题 ---------- */
.sec-h{display:flex;align-items:baseline;gap:9px;margin:0 0 9px 2px;flex-wrap:wrap}
.sec-n{
  width:22px;height:22px;flex:none;border-radius:7px;background:var(--blue-tint);
  color:var(--blue);font-size:12.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;align-self:center;
}
.sec-t{font-size:15px;font-weight:600;letter-spacing:-.2px}
.sec-d{font-size:12.5px;color:var(--label-3);font-weight:400}
@media (max-width:560px){ .sec-d{display:none} }

/* ---------- 拖放落区 ---------- */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:132px;padding:22px 18px;cursor:pointer;text-align:center;
  border:1.5px dashed var(--sep);border-radius:var(--radius-card);
  background:var(--fill-2);color:var(--label-2);
  transition:border-color .18s ease,background .18s ease,transform .12s ease;
}
.drop:hover{border-color:var(--blue);opacity:.95}
@supports (color:color-mix(in srgb,red,blue)){
  .drop:hover{border-color:color-mix(in srgb,var(--blue) 42%,transparent);opacity:1;background:var(--blue-tint)}
}
.drop:active{transform:scale(.995)}
.drop.over{
  border-color:var(--blue);border-style:solid;background:var(--blue-tint);
  color:var(--blue);transform:scale(1.006);
  box-shadow:0 0 0 3px var(--blue-tint);
}
.drop:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.drop svg{opacity:.42;transition:opacity .18s ease,transform .18s ease}
.drop.over svg{opacity:.9;transform:translateY(-2px)}
.drop-t{font-size:15px;font-weight:600;color:var(--blue);letter-spacing:-.1px}
.drop-s{font-size:12.5px;color:var(--label-3)}

/* ---------- 待传列表表头 ---------- */
.pick-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;font-size:12.5px;color:var(--label-2);
  border-bottom:.5px solid var(--sep);
  font-variant-numeric:tabular-nums;
}
.pick-hd #pickCount{font-weight:600;color:var(--label)}

/* ---------- 移除按钮 ---------- */
.upl-x{
  border:0;background:none;color:var(--label-3);font-size:19px;line-height:1;
  cursor:pointer;padding:2px 4px;flex:none;border-radius:6px;
  transition:color .15s ease,background .15s ease;
}
.upl-x:hover{color:var(--red);background:rgba(255,59,48,.10)}
.upl-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue-tint)}

/* ---------- 上传前检查 ---------- */
.chk-head{
  margin-left:auto;font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px;
  font-variant-numeric:tabular-nums;
}
.chk-head.bad{background:rgba(255,149,0,.15);color:#B25000}
.chk-head.ok{background:rgba(52,199,89,.15);color:#248A3D}
@media (prefers-color-scheme:dark){
  .chk-head.bad{color:#FFB340}
  .chk-head.ok{color:#3DDC5E}
}
#chkList{display:flex;flex-direction:column}
.chk-row{
  display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;
  position:relative;min-height:38px;
}
.chk-row + .chk-row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--sep);
}
.chk-ic{
  width:19px;height:19px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.chk-row.ok .chk-ic{background:rgba(52,199,89,.16);color:#248A3D}
.chk-row.bad .chk-ic{background:rgba(255,149,0,.16);color:#B25000}
@media (prefers-color-scheme:dark){
  .chk-row.ok .chk-ic{color:#3DDC5E}
  .chk-row.bad .chk-ic{color:#FFB340}
}
.chk-lb{color:var(--label-2);flex:none;font-size:13.5px}
.chk-vl{
  margin-left:auto;font-size:13.5px;color:var(--label);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.chk-row.bad .chk-vl{color:var(--label-3)}
.chk-go{
  border:0;background:none;color:var(--blue);font-size:12.5px;font-weight:600;
  cursor:pointer;padding:4px 2px;flex:none;
}
.chk-go:hover{text-decoration:underline}

/* 跳转高亮: 让用户看到"去哪儿填" (内阴影+底色, 免得被 .card 的 overflow:hidden 裁掉) */
.flash{animation:flashRing 1.15s ease-out;border-radius:8px}
@keyframes flashRing{
  0%{box-shadow:inset 0 0 0 2px rgba(0,122,255,.55);background-color:rgba(0,122,255,.14)}
  55%{box-shadow:inset 0 0 0 2px rgba(0,122,255,.30);background-color:rgba(0,122,255,.06)}
  100%{box-shadow:inset 0 0 0 2px rgba(0,122,255,0);background-color:transparent}
}
@media (prefers-reduced-motion:reduce){
  .flash{animation:none;outline:2px solid var(--blue);outline-offset:-2px;background-color:rgba(0,122,255,.10)}
}

/* ---------- 悬浮操作栏 ---------- */
.actionbar{
  position:sticky;bottom:0;z-index:30;
  display:flex;gap:10px;align-items:center;
  margin:0 -4px;padding:14px 4px calc(14px + var(--safe-b));
  background:var(--bg);                                   /* 老浏览器兜底 */
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:blur(14px);
  border-top:.5px solid var(--sep);
}
.actionbar .btn{flex:none}
.actionbar .btn[style*="flex:1"]{flex:1}

/* ---------- 常驻总进度 ---------- */
.prog{
  position:sticky;bottom:calc(84px + var(--safe-b));z-index:31;margin:10px -4px 0;
  padding:12px 14px;
  background:var(--bg-elev);                              /* 老浏览器兜底 */
  background:color-mix(in srgb, var(--bg-elev) 94%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--radius-card);
  box-shadow:0 0 0 .5px var(--sep), var(--shadow-float);
}
.prog-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--label-2);margin-bottom:8px;
}
.prog-meta{display:flex;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums}
.prog-meta b{color:var(--label);font-weight:600;font-size:13px}
.prog .bar{height:5px;border-radius:3px}
.prog .bar i{transition:width .18s linear}

/* 移动端: 操作栏贴底不遮内容 */
@media (max-width:760px){
  .actionbar{padding-bottom:calc(14px + var(--safe-b) + 64px)}
  .prog{bottom:calc(146px + var(--safe-b))}
}

/* 窄屏: 侧栏转底部标签 */
@media (max-width:760px){
  .shell{display:block}
  .side{
    width:auto;height:auto;position:fixed;left:0;right:0;bottom:0;top:auto;
    border-right:0;border-top:.5px solid var(--sep);
    display:flex;gap:2px;padding:6px 8px calc(var(--safe-b) + 6px);
    z-index:60;overflow-x:auto;
  }
  .side h1,.side .foot{display:none}
  .side .it{flex-direction:column;gap:3px;font-size:10px;padding:6px 10px;text-align:center;white-space:nowrap}
  .side .it.on{background:transparent;color:var(--blue)}
  .main{padding:calc(var(--safe-t) + 14px) 14px calc(var(--safe-b) + 84px)}
}