/* ============ 基础 ============ */
/* 安卓 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)}

/* ============ 模式选择卡(新增件) ============ */
.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{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}

/* ============ 画廊 ============ */
.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:12px;color:var(--on-surface-variant);padding:0}
.fav.on{background:var(--primary);border-color:var(--primary);color:var(--surface)}

/* ============ 详情页 ============ */
.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;gap:10px;margin:16px 0 8px}

/* ============ 生成按钮:吸底操作条(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)}

/* ---------- 实装补充(2026-10-08;形制均已入设计规范 §3.2) ---------- */
.login-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)}
.login-card{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}
.login-card .t{font-size:var(--fs-hero);font-weight:var(--fw-hero)}
.login-card .s{font-size:var(--fs-cap);color:var(--on-surface-variant);margin-bottom:6px;line-height:1.6}
.login-card .fld{height:48px;display:flex;align-items:center}
.login-card .hint{font-size:var(--fs-cap);color:var(--on-surface-variant);line-height:1.6}
.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)}
.acct.armed{color:var(--error)}