/* 对外口令站。手机端优先——流量基本都来自百家号、贴吧的内置浏览器。
   配色沿用后台 app.css 的品牌色，保持一套视觉。 */
:root{
  --brand:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8;
  --brand-50:#EFF6FF; --brand-100:#DBEAFE;
  --ok-50:#F0FDF4; --ok-600:#16A34A;
  --warn-50:#FFFBEB;
  --bad:#EF4444; --bad-50:#FEF2F2; --bad-600:#DC2626;
  --ink:#0F172A; --ink2:#3E4C63; --ink3:#64748B; --ink4:#94A3B8;
  --line:#E5E9F0; --line2:#EEF1F6;
  --page:#F4F6FA; --card:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--page);color:var(--ink);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:flex-start;justify-content:center;padding:0 20px;
}
.hidden{display:none !important}
.wrap{width:100%;max-width:420px;padding-top:56px;padding-bottom:40px}

/* 首页品牌区 */
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
.logo{width:56px;height:56px;border-radius:16px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.brand h1{font-size:19px;font-weight:700;letter-spacing:-.01em}
.brand .sub{font-size:13px;color:var(--ink4);margin-top:5px}

/* 单输入框：不做分格——分格粘贴会只填第一格，且把长度锁死。
   靠居中 + 大字号 + 等宽 + 拉开字间距做出口令框的样子。 */
.codein{
  width:100%;height:54px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  text-align:center;font-size:22px;font-weight:650;color:var(--ink);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  letter-spacing:.3em;text-indent:.3em;margin-bottom:14px;
  transition:border-color .15s,background .15s;
}
.codein::placeholder{font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink4);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
.codein:focus{outline:none;border-color:var(--brand);background:var(--brand-50)}
.codein.bad{border-color:var(--bad);background:var(--bad-50);color:var(--bad-600)}

.btn{
  display:block;width:100%;padding:13px;border-radius:12px;background:var(--brand);color:#fff;
  border:0;font-size:15.5px;font-weight:650;cursor:pointer;text-align:center;
  text-decoration:none;transition:background .15s;font-family:inherit;
}
.btn:hover{background:var(--brand-600)}
.btn:disabled{background:var(--brand-100);color:var(--brand-700);cursor:default}
.btn.ghost{background:var(--line2);color:var(--ink2)}
.btn.ghost:hover{background:var(--line)}

.tip{font-size:12.5px;color:var(--ink4);text-align:center;margin-top:16px;line-height:1.7}
.err{
  display:none;background:var(--bad-50);border:1px solid #fecaca;color:var(--bad-600);
  border-radius:10px;padding:10px 13px;font-size:13.5px;text-align:center;margin-bottom:14px;
}
.err.show{display:block}

/* 结果卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
  box-shadow:0 2px 10px rgba(15,23,42,.05)}
.rtitle{font-size:17px;font-weight:650;line-height:1.5;letter-spacing:-.01em}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 16px}
.tag{font-size:11.5px;padding:3px 10px;border-radius:999px;background:var(--line2);
  color:var(--ink3);font-weight:600}
.tag.g{background:var(--ok-50);color:var(--ok-600)}
.tag.b{background:var(--brand-50);color:var(--brand-700)}
.note{font-size:13.5px;color:var(--ink3);line-height:1.75;margin-bottom:16px}

/* 地址块：整块可点即复制，不做只有小按钮能点的样式 */
.addr{
  background:var(--line2);border:1px solid transparent;border-radius:10px;padding:12px 13px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;color:var(--brand-700);
  word-break:break-all;line-height:1.6;margin-bottom:10px;cursor:pointer;transition:.15s;
}
.addr:hover{background:var(--brand-50);border-color:var(--brand-100)}
.pwdrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pwdrow .lb{font-size:13px;color:var(--ink3)}
.pwdrow .vv{font-family:ui-monospace,Menlo,monospace;font-size:17px;font-weight:700;
  letter-spacing:.12em;color:var(--ink)}
.pwdrow .cpx{margin-left:auto;font-size:12px;background:var(--brand-50);color:var(--brand-700);
  border:0;border-radius:7px;padding:6px 13px;font-weight:600;cursor:pointer;font-family:inherit}
.pwdrow .cpx:hover{background:var(--brand-100)}
.pwdrow .cpx.done{background:var(--ok-600);color:#fff}

/* toast：项目硬规矩，不许用 alert */
.toast{
  position:fixed;left:50%;bottom:38px;transform:translateX(-50%);background:#111827;color:#fff;
  padding:11px 20px;border-radius:999px;font-size:13.5px;display:none;z-index:99;
  max-width:84vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.22);
  word-break:break-all;
}
.toast.show{display:block}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}