/* ui.css —— 全站通用「模态三件套」样式（toast / confirm / prompt）
 *
 * 【它解决什么】index.html 与 admin.html 各内联过一份**逐字节相同**的 .mo-* 样式块
 *   （index.html:471-485 / admin.html:376-390）。改一处漏一处，两站弹窗就会长得不一样。
 *   2026-10-16 抽到本文件，用户端 / 管理端 / 代理端共用。
 *
 * 【配套】js/ui.js 产出 .mo-mask / .mo-card / .mo-btns / .mo-btn(.mo-ok/.mo-cancel)
 *   / .mo-toast(.ok/.err)。class 名与本文件必须**逐字一致**。
 *
 * ⛔ 本文件必须在 css/tokens.css 之后加载（这里用到 --bg1/--bd/--ink/--grad 等令牌）。
 * ⛔ 两页的 <style> 里**不得**再出现 .mo-* 定义 —— 否则又变成两份。
 * ⛔ 迁移时**保持取值逐字不变**（含其中历史遗留的 rgba/#fff），先求行为等价；
 *   把硬编码色换成 token 属于「UI 美化」阶段的事，别在这里顺手改，否则视觉回归无法归因。
 */

.mo-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px;animation:moFade .2s ease}
.mo-card{background:var(--bg1);border:1px solid var(--bd);border-radius:16px;padding:24px;max-width:400px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:moPop .2s ease}
.mo-card h3{margin:0 0 8px;font-size:17px;color:var(--ink)}
.mo-card p{margin:0 0 16px;font-size:14px;color:var(--ink2);line-height:1.6;white-space:pre-wrap}
.mo-card input{width:100%;background:rgba(148,163,184,.07);border:1px solid var(--bd);border-radius:10px;padding:11px 14px;color:var(--ink);font-size:14px;margin-bottom:16px}
.mo-btns{display:flex;gap:10px;justify-content:flex-end}
.mo-btn{padding:9px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none}
.mo-ok{background:var(--grad);color:var(--on-accent)}
.mo-cancel{background:rgba(148,163,184,.12);color:var(--ink2)}
/* toast 的无障碍容器（role="status" aria-live="polite"，由 ui.js 在首次 toast 时创建）。
   本身不占位：.mo-toast 是 position:fixed，按视口定位，与父容器无关。
   ⛔ 不要给它加 position/尺寸以外的样式，否则会遮住页头按钮（它的子孙都是 fixed，但
     容器若撑出高度仍会覆盖正上方内容）。 */
.mo-toast-live{position:fixed;top:0;left:0;width:0;height:0;overflow:visible}
.mo-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--bg1);border:1px solid var(--bd);border-radius:12px;padding:12px 24px;font-size:14px;color:var(--ink);z-index:99999;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:moSlide .3s ease;max-width:90vw;text-align:center}
.mo-toast.ok{border-color:var(--green)}
.mo-toast.err{border-color:var(--rose)}
@keyframes moFade{from{opacity:0}to{opacity:1}}
@keyframes moPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes moSlide{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* 移动端：模态框内输入 ≥16px，防 iOS 聚焦自动放大。
   原本埋在 admin.html 的 @media(max-width:768px) 里（只对后台生效），
   抽出来两站共用 —— 用户端同样跑在 iOS 上，漏了会有一模一样的放大问题。 */
@media (max-width:768px){
  .mo-card input{font-size:16px}
  .mo-card{padding:20px 18px}
  .mo-btns button{flex:1;padding:12px 18px}
}