/* ALB-5077 开锁小窗的排版。手机优先,桌面浏览器里也看得到。颜色跟着 Telegram 主题变量走,拿不到就用一套稳的默认。 */
:root{
  --bg: var(--tg-theme-bg-color, #0f1115);
  --fg: var(--tg-theme-text-color, #f2f3f5);
  --muted: var(--tg-theme-hint-color, #8b93a1);
  --accent: var(--tg-theme-button-color, #3b82f6);
  --accent-fg: var(--tg-theme-button-text-color, #fff);
  --card: var(--tg-theme-secondary-bg-color, #1a1d23);
  --bad: #e5484d;
  --ok: #30a46c;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
#app{width:100%;max-width:360px;text-align:center}
header .lock{font-size:40px}
h1{font-size:22px;margin:.4em 0 .2em}
h2{font-size:18px;margin:.2em 0}
.muted{color:var(--muted);font-size:14px}
section{margin-top:28px}
button{font:inherit;cursor:pointer;border:0;border-radius:12px}
.primary{background:var(--accent);color:var(--accent-fg)}
.big{width:100%;padding:15px;font-size:17px;font-weight:600}
.link{background:none;color:var(--accent);margin-top:14px;padding:8px}
.ok,.bad{font-size:44px;width:72px;height:72px;line-height:72px;border-radius:50%;margin:0 auto 10px}
.ok{background:var(--ok);color:#fff}
.bad{background:var(--bad);color:#fff}
.note{background:var(--card);border-radius:12px;padding:12px 14px;margin:14px 0 0;font-size:14px;text-align:left}
a.big{display:block;text-decoration:none;border-radius:12px;box-sizing:border-box}
.busy{opacity:.6;pointer-events:none}

/* ── 上传证件(up.js)── 内容比一屏长,别再上下居中(居中会把顶上切掉、滑不上去) */
body.up{align-items:flex-start;height:auto;min-height:100%;padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
body.up header .lock{font-size:30px;line-height:1.2}
body.up.up-form header .lock{display:none}
body.up h1{margin:.2em 0 .1em}
body.up section{margin-top:18px}
.btn{display:block;text-align:center;border-radius:12px;cursor:pointer;-webkit-user-select:none;user-select:none}
.ghost{background:var(--card);color:var(--fg)}
#up-pick .btn + input + .btn{margin-top:12px}
#up-pick .muted{margin-top:14px}
.warn{background:rgba(245,166,35,.14);color:#f5a623;border-radius:12px;padding:10px 12px;font-size:14px;text-align:left;white-space:pre-line}
.banner{background:#f5c518;color:#1a1400;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;text-align:left;margin:0 0 14px}
.thumb{display:block;max-width:100%;max-height:200px;margin:0 auto 18px;border-radius:12px;object-fit:contain}
.photo{display:block;width:100%;max-height:110px;object-fit:contain;border-radius:12px;background:var(--card);margin-bottom:16px;cursor:zoom-in}
.photo.big{max-height:none;cursor:zoom-out}
.spinner{width:34px;height:34px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--card);border-top-color:var(--accent);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 读图进度条:先快后慢走到九成,读完换页(不报秒数,他 11-02 13:00) */
.bar{height:6px;max-width:260px;margin:0 auto 12px;border-radius:3px;background:var(--card);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;animation:barfill 12s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes barfill{to{width:92%}}
.field{text-align:left;margin:0 0 12px}
.field label,.field .label{display:block;font-size:14px;color:var(--muted);margin-bottom:4px}
.field input{width:100%;font:inherit;font-size:20px;padding:12px 14px;border-radius:12px;border:2px solid transparent;
  background:var(--card);color:var(--fg);-webkit-appearance:none;appearance:none;min-height:50px;text-align:left}
.field input::-webkit-date-and-time-value{text-align:left}
#up-number{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:22px;letter-spacing:.08em}
#up-irn{width:72px;text-align:center}
.field input.check{border-color:#f5a623}
.field input:focus{outline:none;border-color:var(--accent)}
.crop{display:block;width:auto;max-width:100%;max-height:48px;border-radius:8px;background:#fff;margin-bottom:6px}
.tag{font-size:13px;margin:4px 0 0}
.tag.good{color:var(--ok)}
.tag.check{color:#f5a623}
.err{color:var(--bad);font-size:14px;margin:6px 0 0}
.err.center{text-align:center}
.field .warn{margin:8px 0 0}
#up-country-row{display:flex;align-items:baseline;gap:10px}
#up-country-row .label{margin:0}
.ro{font-size:17px;font-weight:600}
#up-save{margin-top:4px}
#up-retake{margin-top:6px}
#up-save:disabled{opacity:.6}
#done .muted{margin-top:4px}
#close-btn{margin-top:22px}
.banner.pulse{animation:pulse .5s ease 2}
@keyframes pulse{50%{transform:scale(1.03)}}
.choice{background:rgba(245,166,35,.14);border:2px solid #f5a623;border-radius:14px;padding:14px;margin:4px 0 6px;text-align:left}
.choice p{margin:0 0 12px;font-size:16px;font-weight:600}
.choice .ghost{margin-top:10px}

/* ── 开锁 / 设置那两屏(body.box):跟上传那条消息同一种绿键,图标放进一个圆里,字大一号、粗一点(他 11-02 15:13「正规一点，看上去高级一点」)── */
body.box header .lock{width:76px;height:76px;line-height:76px;margin:0 auto 14px;border-radius:50%;font-size:36px;
  background:linear-gradient(145deg,rgba(48,164,108,.22),rgba(48,164,108,.08));box-shadow:0 0 0 1px rgba(48,164,108,.35) inset}
body.box{height:auto;min-height:100%;box-sizing:border-box}   /* 小窗不撑满后矮屏也滑得到顶(整包审 I2):不撑满时别再定死整屏高 */
body.box h1{font-size:26px;font-weight:700;letter-spacing:.02em;margin:0 0 6px}
body.box #subtitle{font-size:17px;line-height:1.45;color:var(--fg);font-weight:500;margin:0 auto;max-width:300px}
body.box section{margin-top:30px}
body.box .primary{background:var(--ok);color:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(48,164,108,.28)}
body.box .big{padding:17px;font-size:18px;font-weight:700}
body.box #go-note{margin-top:12px}
body.box #done .ok{width:88px;height:88px;line-height:88px;font-size:48px;margin-bottom:14px;animation:pop .35s ease-out}
body.box #done-msg{font-size:24px;font-weight:700;margin:0}
body.box #done-sub{font-size:15px}
body.box #close-btn{margin-top:26px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}