/* ============ 基础 ============ */
/* 安卓 WebView 点击高亮关闭(v1.2 用户裁定;规则入开发 skill 踩坑集 C-25):
   安卓对全部可点元素按系统默认糊半透明蓝块,与自绘形态冲突,必须显式置透明;按压反馈由 :active 承担 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,.chip,.mode-card,.seg-item,.thumb,.back,.fav,.acct{touch-action:manipulation}  /* 去双击缩放延迟 */
button:active,a:active{filter:brightness(.96)}                                      /* 统一按压反馈 */
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--on-surface);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
.hidden{display:none!important}
.view{display:none}
.view.on{display:block}

.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 16px}

/* ============ 顶栏(48px 定值) ============ */
.topbar{height:48px;display:flex;align-items:center;gap:10px}
.brand{font-size:var(--fs-title);font-weight:var(--fw-title)}
.genstate{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--on-surface-variant);margin-left:auto}
.dot{width:7px;height:7px;border-radius:50%;background:var(--outline);flex:0 0 auto}
.dot.ok{background:var(--success)}
.dot.run{background:var(--primary)}
.dot.queue{background:var(--warning)}
.dot.off{background:var(--error)}
.acct{font-size:var(--fs-cap);color:var(--on-surface-variant);padding-left:4px}

/* ============ 分段控件 seg ============ */
.seg{display:flex;background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);padding:3px;gap:3px;margin:6px 0 14px}
.seg-item{flex:1;height:34px;border:0;border-radius:9px;background:transparent;font-size:var(--fs-body);font-weight:700;color:var(--on-surface-variant)}
.seg-item.on{background:var(--on-surface);color:var(--surface)}

/* ============ 区块标题 ============ */
.blk-title{font-size:var(--fs-cap);font-weight:900;color:var(--on-surface-variant);letter-spacing:.03em;margin:16px 0 8px}
.blk-title:first-child{margin-top:0}

/* ============ 提示词输入区(新增件) ============ */
.prompt-box{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);padding:12px}
.prompt-box:focus-within{border-color:var(--primary)}
.prompt-box textarea{
  width:100%;min-height:96px;border:0;outline:0;resize:vertical;background:transparent;
  font-size:var(--fs-body);color:var(--on-surface);font-family:inherit;line-height:1.6;display:block;
}
.prompt-box textarea::placeholder{color:var(--on-surface-variant);opacity:.8}
.prompt-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.count{font-size:var(--fs-cap);color:var(--on-surface-variant);font-variant-numeric:tabular-nums}

/* ============ 按钮四档 ============ */
.btn{border-radius:var(--r-comp);font-size:var(--fs-body);font-weight:700;border:1px solid transparent}
.btn.filled{background:var(--primary);color:var(--surface);height:48px;width:100%;font-size:var(--fs-title);font-weight:var(--fw-title)}
.btn.filled:active{background:var(--primary-deep)}
.btn.outlined{background:var(--surface);border-color:var(--outline);color:var(--on-surface);height:48px;padding:0 16px}
.btn.danger{background:var(--surface);border-color:var(--error);color:var(--error);height:48px;padding:0 16px}
.btn.sm{height:28px;padding:0 10px;border-radius:var(--r-brick);font-size:var(--fs-cap);font-weight:700;
  width:auto;white-space:nowrap}   /* 小档必须 width:auto:否则继承 .btn.filled 的 width:100% 会吃掉整行 */
.btn.sm.outlined{background:var(--surface);border-color:var(--outline);color:var(--on-surface)}
.btn.sm.gray{background:var(--surface);border-color:var(--outline);color:var(--on-surface-variant)}
.btn.sm.filled{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.btn.sm:disabled{opacity:.45}

/* ============ chip 标签胶囊(双态) ============ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--outline);background:var(--surface);
  font-size:var(--fs-cap);color:var(--on-surface);display:inline-flex;align-items:center;gap:4px}
.chip.on{background:var(--on-surface);color:var(--surface);border-color:var(--on-surface)}
/* 比例方框示意件 v1.6:芯片内描线小矩形,先见形再选比例;长边恒 14px,短边随比例,
   宽高由数据(w×h)驱动内联写入,描边取 currentColor 自动跟随芯片双态配色 */
.rbox{display:inline-block;flex:none;box-sizing:border-box;border:1.5px solid currentColor;border-radius:2.5px}

/* ============ 模式选择卡(新增件) ============ */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--outline);
  border-radius:var(--r-comp);padding:12px;display:flex;flex-direction:column;gap:4px}
.mode-card .t{font-size:var(--fs-title);font-weight:var(--fw-title)}
.mode-card .time{font-size:var(--fs-cap);color:var(--primary);font-weight:700}
.mode-card .note{font-size:var(--fs-cap);color:var(--on-surface-variant);line-height:1.5}
.mode-card .avg{font-size:var(--fs-cap);color:var(--on-surface-variant);opacity:.85}
.mode-card.on{border:1.5px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.mode-card.on::after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.mode-card.disabled{opacity:.45;cursor:not-allowed}
.mode-warn{margin-top:8px;font-size:var(--fs-cap);color:var(--warning)}

/* ============ 高级折叠区(新增件) ============ */
.adv{margin-top:12px}
.adv summary{list-style:none;font-size:var(--fs-cap);font-weight:900;color:var(--on-surface-variant);cursor:pointer;display:flex;align-items:center;gap:6px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"▸";transition:transform .15s}
.adv[open] summary::before{transform:rotate(90deg)}
.adv-body{display:flex;flex-direction:column;gap:10px;padding:12px 0 2px}
.fld{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);padding:10px 12px}
.fld textarea{width:100%;min-height:56px;border:0;outline:0;resize:vertical;background:transparent;font-size:var(--fs-body);color:var(--on-surface);font-family:inherit;display:block}
.fld input{border:0;outline:0;background:transparent;font-size:var(--fs-body);color:var(--on-surface);font-family:inherit;width:100%}
.rowline{display:flex;align-items:center;gap:10px}
.rowline .fld{height:48px;display:flex;align-items:center}
.rowline .fld.grow{flex:1}
.hint{font-size:var(--fs-cap);color:var(--on-surface-variant)}

/* ============ 生成按钮 ============ */
.gen-wrap{margin:18px 0 6px}

/* ============ 任务条目(新增件) ============ */
.jobs{display:flex;flex-direction:column;gap:10px}
.job{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.job .l1{display:flex;align-items:center;gap:8px}
.badge{font-size:var(--fs-badge);font-weight:var(--fw-badge);color:var(--surface);border-radius:var(--r-brick);padding:2px 7px;flex:0 0 auto}
.badge.queued{background:var(--warning)}
.badge.running{background:var(--primary)}
.badge.done{background:var(--success)}
.badge.failed{background:var(--error)}
.job .meta{font-size:var(--fs-cap);color:var(--on-surface-variant)}
.job .when{margin-left:auto;font-size:var(--fs-cap);color:var(--on-surface-variant);font-variant-numeric:tabular-nums}
.job .p{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job .l3{display:flex;align-items:center;gap:10px}
.job .l3 .btn:first-child{margin-left:auto}   /* 多钮右对齐成一簇(首钮推右) */
/* 线性进度条(新增件) */
.pbar{flex:1;height:4px;border-radius:2px;background:var(--outline);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:2px;background:var(--primary)}
.job .pct{font-size:var(--fs-cap);color:var(--on-surface-variant);font-variant-numeric:tabular-nums}

/* ============ 任务入口条(v1.7 新增件):生图页只留一行入口,全量列表入任务页 ============ */
.task-entry{width:100%;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--outline);
  border-radius:var(--r-comp);padding:12px;cursor:pointer;text-align:left}
.task-entry:active{box-shadow:var(--sh-lift)}
.task-entry .te-row{display:flex;align-items:center;gap:8px;min-height:24px}
.task-entry .te-text{flex:1;min-width:0;font-size:var(--fs-body);color:var(--on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-entry .te-arrow{flex:none;color:var(--on-surface-variant);font-size:18px;line-height:1}
.task-entry .pbar{flex:none}
.task-entry.idle .badge{visibility:hidden}   /* 空闲态藏徽标但占位,行高不跳 */

/* ============ 任务页(v1.7 新增件):全屏推入视图,与详情同族 ============ */
.backrow .vtitle{flex:1;min-width:0;font-size:var(--fs-title);font-weight:var(--fw-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ 确认弹层(v1.7 新增件;形制=登录卡同族遮罩+白卡) ============ */
.modal-mask{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:color-mix(in srgb,var(--on-surface) 40%,transparent)}
.modal{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-card);box-shadow:var(--sh-lift);
  padding:20px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}
.modal .m-t{font-size:var(--fs-title);font-weight:var(--fw-title)}
.modal .m-s{font-size:var(--fs-cap);color:var(--on-surface-variant);line-height:1.6;margin-bottom:6px}

/* ============ 心形收藏钮(v1.7 新增件,承万事通 v1.51 HeartIcon 方案) ============
   Material「favorite」实心=已收藏(--error 红)/ Feather heart 描边=未收藏(次色);无边框,CSS 控色 */
.hicon{display:inline-block;vertical-align:-0.14em;width:1em;height:1em;fill:currentColor}
.hicon.stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.title-heart{flex:none;border:0;background:none;padding:4px;font-size:20px;line-height:1;color:var(--on-surface-variant);cursor:pointer}
.title-heart.on{color:var(--error)}

/* ============ 画廊 ============ */
.frow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.frow .flabel{font-size:var(--fs-cap);color:var(--on-surface-variant);flex:0 0 30px}
.search{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);height:48px;display:flex;align-items:center;padding:0 12px;margin:10px 0 14px}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:var(--fs-body);color:var(--on-surface);font-family:inherit}
.search input::placeholder{color:var(--on-surface-variant)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r-tile);border:1px solid var(--outline);overflow:hidden;cursor:pointer}
.thumb:active{box-shadow:var(--sh-lift)}
.thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);color:var(--on-surface-variant)}
.fav{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--outline);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--on-surface-variant);padding:0}
.fav .hicon{width:14px;height:14px}
.fav.on{color:var(--error)}

/* ============ 详情页 ============ */
.backrow{display:flex;align-items:center;height:40px;gap:8px}
.backrow .back{border:0;background:transparent;font-size:var(--fs-body);color:var(--on-surface);padding:0;font-weight:700}
.backrow .when{margin-left:auto;font-size:var(--fs-cap);color:var(--on-surface-variant)}
.hero{border-radius:var(--r-card);border:1px solid var(--outline);overflow:hidden;aspect-ratio:1/1;position:relative;box-shadow:var(--sh-rest)}
.hero .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);color:var(--on-surface-variant)}
.txtbox{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);padding:10px 12px;font-size:var(--fs-body);line-height:1.65}
.txtbox .copy{float:right;margin-left:8px}
.meta{font-size:var(--fs-cap);color:var(--on-surface-variant);line-height:1.8}
.d-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:16px 0 8px}
.d-actions .btn{font-size:var(--fs-cap);padding:0 4px}   /* 三钮一行,390 视口每钮约 112px */

/* ============ 生成按钮:吸底操作条(2026-10-08 用户裁定) ============ */
.view#view-make{padding-bottom:104px}          /* 底栏等高留白,末条任务不被遮挡 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);
  border-top:1px solid var(--outline)}
.dock .btn.filled{max-width:488px;width:100%}

/* ============ 自动推送更新横幅(新增件,v1.3) ============ */
.upd{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--surface);border-top:1px solid var(--outline);box-shadow:var(--sh-lift)}
.upd.above-dock{bottom:68px}                 /* 生图页吸底操作条之上叠放,防遮盖 */
.upd .txt{flex:1;min-width:0;font-size:var(--fs-cap);color:var(--on-surface);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upd .dot.breathe{background:var(--primary);animation:updBreath 1.6s ease-in-out infinite}
@keyframes updBreath{0%,100%{opacity:1}50%{opacity:.3}}
body.has-upd .view{padding-bottom:78px}      /* 横幅出现时内容不遮(生图页自身 104px 更宽,优先) */

/* ============ toast ============ */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);
  background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-comp);
  box-shadow:var(--sh-lift);padding:10px 16px;font-size:var(--fs-cap);color:var(--on-surface);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ 审核附区(非应用页面) ============ */
.spec{margin:40px 0 0;border-top:1px dashed var(--outline);padding-top:20px}
.spec h2{font-size:var(--fs-title);font-weight:var(--fw-title);margin:0 0 4px}
.spec .sub{font-size:var(--fs-cap);color:var(--on-surface-variant);margin-bottom:16px}
.spec-blk{margin-bottom:18px}
.spec-blk .blk-title{margin-top:0}
.states{display:flex;flex-direction:column;gap:8px}
.state-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--on-surface-variant)}
.empty{background:var(--surface);border:1px dashed var(--outline);border-radius:var(--r-comp);padding:22px;text-align:center;font-size:var(--fs-cap);color:var(--on-surface-variant)}

/* ============ 页脚 ============ */
footer{margin:32px 0 24px;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:var(--fs-cap);color:var(--on-surface-variant)}
footer a{color:var(--on-surface-variant)}

/* ---------- 家族账户模块 v1.0(2026-10-08 三应用统一,裁定源=万游屋设计规范_v1.9 增补;值自万游屋大厅实装直搬) ---------- */
.login-mask{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(42,33,24,.45)}
.login-mask.col{flex-direction:column}
.login-card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-card);box-shadow:var(--sh-lift);
  padding:20px 20px 18px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;
  max-height:88vh;overflow-y:auto}
/* 账户页签:三枚独立描边钮,选中=主色10%底+深主色字+主色50%描边+900(2026-10-08 用户裁定) */
.atabs{display:flex;gap:8px}
.atab{flex:1;text-align:center;font:inherit;font-size:13px;letter-spacing:2px;padding:9px 0;border-radius:var(--r-comp);
  border:1.5px solid var(--outline);background:transparent;color:var(--on-surface-variant)}
.atab.on{background:rgba(228,87,46,.10);color:var(--primary-deep);border-color:rgba(228,87,46,.5);font-weight:900}
/* 账户输入件:label 11px/700 + input 48px/1.5px边/focus光环;只读框=--bg底+次要字 */
.afld{margin-bottom:10px}
.afld label{display:block;font-size:11px;color:var(--on-surface-variant);letter-spacing:1px;margin-bottom:4px;font-weight:700}
.afld input{width:100%;background:var(--surface);border:1.5px solid var(--outline);border-radius:var(--r-comp);
  color:var(--on-surface);font:inherit;font-size:var(--fs-body);padding:11px 14px;outline:none;min-height:48px;
  user-select:text;-webkit-user-select:text}
.afld input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(228,87,46,.15)}
.afld input[readonly]{background:var(--bg);color:var(--on-surface-variant)}
/* 账户卡内主按钮:家族规格 14px/700/字距3px(app 全局 filled 档不在此改;:not(.sm) 防 sm.filled 被漏染) */
.login-card .btn.filled:not(.sm){font-size:var(--fs-body);font-weight:700;letter-spacing:3px}
.login-card .btn:disabled{opacity:.6}
/* 错误行占位防跳/提示行,两者分行 */
.aerr{font-size:12px;color:var(--error);margin:2px 0 8px;min-height:15px}
.ahint{font-size:11px;color:var(--on-surface-variant);line-height:1.7;margin:6px 0 0}
/* 恢复码展示件:等宽20px/深主色字/--bg底/虚线描边,一次性 */
.login-card .code{font-family:"SFMono-Regular",Consolas,monospace;font-size:20px;letter-spacing:1.5px;
  color:var(--primary-deep);background:var(--bg);border:1.5px dashed var(--outline);border-radius:10px;
  text-align:center;padding:14px 6px;user-select:text;-webkit-user-select:text}
.cwarn{font-size:11.5px;color:var(--error);line-height:1.7;margin:0}
.cb-row{display:flex;gap:10px;margin-top:12px}
.cb-row .btn{flex:1;height:36px;font-size:12.5px;letter-spacing:2px}
/* 账号管理弹层:标题=用户名/只读框/三分区/整宽退出钮/弹层正下方圆X关闭件 */
.acc-title{font-size:16px;font-weight:900;letter-spacing:1px;color:var(--on-surface);margin:0 0 14px}
.asec{border-top:1px solid var(--outline);padding-top:12px;margin-top:12px}
.asec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.asec-t{font-size:12px;color:var(--on-surface-variant);letter-spacing:2px;font-weight:700}
.login-card .btn.danger{background:rgba(192,57,43,.10);border-color:transparent;color:var(--error);
  height:36px;width:100%;font-weight:600;font-size:12.5px;letter-spacing:2px}
.axclose{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.65);background:transparent;
  margin-top:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.axclose:active{filter:brightness(.8)}
.axclose svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
/* 账户管理入口=设置弹层账户区(2026-10-08 二次裁定:统一万游屋方案,顶栏身份件退役;形制自万游屋设置面板直搬) */
.topgear{border:0;background:none;padding:0 0 0 4px;color:var(--on-surface-variant);font:inherit;font-size:17px;
  line-height:1;cursor:pointer}
.topgear:hover{color:var(--primary)}
.acc-row{display:flex;gap:8px;align-items:stretch}
.me-id{flex:1;min-width:0;display:flex;align-items:center;padding:9px 12px;font-size:12.5px;
  color:var(--on-surface-variant);background:var(--bg);border:1px solid var(--outline);
  border-radius:var(--r-comp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-card .btn.ghost{background:transparent;border:1.5px solid var(--outline);color:var(--on-surface);
  font-weight:600;height:36px;flex:none;padding:0 14px}
.hero img,.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hero img{object-fit:contain;background:var(--bg)}
.job .note{font-size:var(--fs-cap);color:var(--warning);line-height:1.5}
.job .acts{display:flex;gap:8px;margin-left:auto}
.btn.danger.armed{background:var(--error);color:var(--surface);border-color:var(--error)}