/* ============================================================
   画室 · 前台样式
   纸感底色 + 墨黑字 + 一点朱红。没有卡片阴影、没有渐变按钮。
   ============================================================ */

:root{
  --paper:#f7f3ec;
  --paper-2:#efe9de;
  --ink:#17130f;
  --ink-2:#40382f;
  --muted:#8a8074;
  --line:#ded4c5;
  --line-2:#cabfa9;
  --accent:#b23f24;
  --accent-2:#8d2f19;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","Songti TC",STSong,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
/* 键盘走到哪里都看得见，但鼠标点击不留框 */
:focus-visible{outline:2px solid rgba(178,63,36,.55);outline-offset:2px}

.wrap{max-width:840px;margin:0 auto;padding:0 22px}
.kicker{
  font:10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}

/* ============================================================
   顶栏（v2.7.0 重构）
   结构对齐参考图：左边品牌块（字标 + 英文小字），
   右边身份胶囊 + 实心头像 + 汉堡菜单；窄屏导航收进抽屉。
   视觉仍是纸感：细线、无阴影、朱红只做点睛。
   ============================================================ */
.top{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
@supports (backdrop-filter:blur(10px)){
  .top{background:rgba(247,243,236,.88);backdrop-filter:saturate(1.15) blur(10px)}
}
.top-in{
  max-width:840px;margin:0 auto;min-height:58px;
  display:flex;align-items:center;gap:12px;
  padding:9px 22px;
}

/* 品牌：中文名 + 朱红方点 + 英文小字 */
.brand{display:inline-flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 auto}
.brand-row{display:inline-flex;align-items:flex-end;gap:6px}
.brand-name{
  font-family:var(--serif);font-size:22px;line-height:1.1;font-weight:600;
  letter-spacing:.06em;white-space:nowrap;
}
.brand-dot{width:6px;height:6px;background:var(--accent);margin-bottom:4px;flex:0 0 auto}
.brand-sub{
  font:8.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  padding-left:1px;
}
.brand:hover .brand-sub{color:var(--ink-2)}

/* 右侧动作区 */
.top-act{display:flex;align-items:center;gap:9px;margin-left:auto;flex:0 0 auto}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  height:31px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;
  font:11.5px/1 var(--mono);color:var(--ink-2);white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .12s ease;
}
.pill b{font-family:var(--serif);font-size:14.5px;line-height:1;font-weight:600;color:var(--ink)}
.pill:hover{border-color:var(--ink);background:#fffdf8}
.pill:active{transform:scale(.965)}
.pill.credit-chip:hover b{color:var(--accent)}

/* 汉堡 */
.burger{
  width:34px;height:34px;padding:0 6px;border-radius:9px;
  display:inline-flex;flex-direction:column;justify-content:center;align-items:stretch;gap:4.5px;
  transition:background .16s ease;
}
.burger i{display:block;height:1.6px;border-radius:2px;background:var(--ink);transition:background .16s ease}
.burger:hover{background:rgba(23,19,15,.055)}
.burger:active{background:rgba(23,19,15,.09)}
.burger:active i{background:var(--accent)}

/* 宽屏直接把导航铺开，汉堡收起来 */
.topnav{display:none}
@media (min-width:900px){
  .topnav{display:flex;align-items:center;gap:2px;margin-left:14px}
  .topnav a{
    font-size:13px;color:var(--ink-2);padding:7px 11px;border-radius:999px;
    transition:background .16s ease,color .16s ease;
  }
  .topnav a:hover{background:rgba(23,19,15,.05);color:var(--ink)}
  .topnav a:active{background:rgba(23,19,15,.09)}
  .topnav a.on{color:var(--accent);background:rgba(178,63,36,.085)}
  .topnav a.on:hover{background:rgba(178,63,36,.12)}
  .burger{display:none}
}

/* ============================================================
   抽屉菜单
   ============================================================ */
.dmask{
  position:fixed;inset:0;z-index:110;
  background:rgba(23,19,15,.34);
  opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
@supports (backdrop-filter:blur(3px)){
  .dmask{backdrop-filter:blur(3px)}
}
.dmask.show{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;bottom:0;right:0;z-index:120;
  width:min(300px,82vw);
  display:flex;flex-direction:column;
  background:#fdfaf4;
  border-left:1px solid var(--line);
  transform:translateX(102%);
  /* 关着的时候 visibility:hidden，抽屉里的链接不会被 Tab 摸到 */
  visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s;
  padding-top:env(safe-area-inset-top);
  overflow:hidden;
  outline:none;
}
.drawer.show{
  transform:none;visibility:visible;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility 0s;
  box-shadow:-14px 0 44px rgba(23,19,15,.10);
}

.dhead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 14px 13px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.dclose{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .16s ease,color .16s ease,transform .12s ease;
}
.dclose svg{display:block}
.dclose:hover{background:rgba(23,19,15,.055);color:var(--accent)}
.dclose:active{transform:scale(.92);background:rgba(23,19,15,.09)}

.dbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 10px 14px}
.dgroup{
  font:9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:16px 12px 7px;
}
.dnav{display:flex;flex-direction:column;gap:1px}
.ditem{
  display:flex;align-items:center;gap:9px;
  padding:11px 12px;border-radius:10px;
  font-size:14.5px;color:var(--ink);
  transition:background .15s ease,color .15s ease,transform .12s ease;
}
.ditem .dmk{font:9px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.ditem .dlab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbadge{
  margin-left:auto;flex:0 0 auto;
  font:8.5px/1 var(--mono);letter-spacing:.1em;color:var(--accent);
  border:1px solid rgba(178,63,36,.3);padding:3px 5px;border-radius:3px;
}
.ditem:hover{background:rgba(23,19,15,.045)}
.ditem:active{background:rgba(23,19,15,.085);transform:scale(.985)}
.ditem.on{background:rgba(178,63,36,.085);color:var(--accent);font-weight:600}
.ditem.on .dmk{color:rgba(178,63,36,.62)}
.ditem.on:hover{background:rgba(178,63,36,.12)}
.ditem.tap{background:rgba(178,63,36,.16)}

.dlegal{display:flex;flex-wrap:wrap;gap:4px 14px;padding:18px 12px 6px;margin-top:6px;border-top:1px solid var(--line)}
.dlegal a{font:10.5px/1.9 var(--mono);color:var(--muted);transition:color .15s ease}
.dlegal a:hover{color:var(--accent)}

.dfoot{
  flex:0 0 auto;border-top:1px solid var(--line);
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:#f9f4ea;
}
.duser{display:flex;align-items:center;gap:10px;min-width:0}
.duser .who{min-width:0;flex:1}
.dname{font-family:var(--serif);font-size:16px;line-height:1.25;letter-spacing:.02em}
.dsub{font:10.5px/1.5 var(--mono);color:var(--muted);margin-top:2px}
.dplan{font:10.5px/1.6 var(--mono);color:var(--muted);margin-top:9px}
.dplan b{color:var(--ink-2);font-weight:500}
.dacts{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.dbtn{
  display:block;text-align:center;padding:9px 12px;border-radius:8px;
  border:1px solid var(--line-2);background:transparent;
  font-size:13px;color:var(--ink);
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .12s ease;
}
.dbtn:hover{border-color:var(--ink);background:#fffdf8}
.dbtn:active{transform:scale(.985);background:var(--paper)}
.dbtn.danger{color:var(--accent);border-color:rgba(178,63,36,.3)}
.dbtn.danger:hover{background:rgba(178,63,36,.07);border-color:var(--accent)}
.dbtn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dbtn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}

html.no-scroll,html.no-scroll body{overflow:hidden}

/* ---------- 主视觉 ---------- */
.hero{padding:36px 0 28px}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.24;
  letter-spacing:.01em;margin:16px 0 18px;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:14px;color:var(--muted);max-width:44ch;margin:0}

/* ---------- 写作区 ---------- */
.compose{margin-top:26px}
.compose .kicker{display:block;margin-bottom:10px}
.compose textarea{
  width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  padding:6px 0 12px;font-size:18px;line-height:1.6;resize:vertical;min-height:74px;outline:none;
  font-family:var(--serif);
}
.compose textarea::placeholder{color:#b3a898;font-family:var(--serif)}
.compose textarea:focus{border-color:var(--ink)}

.bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding-bottom:2px;
}
.bar .grow{flex:1}
.sel{position:relative;display:inline-flex;align-items:center}
.sel select{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-size:13px;color:var(--ink);padding:5px 18px 5px 0;outline:none;cursor:pointer;
  border-bottom:1px solid var(--line-2);
}
.sel::after{
  content:"";position:absolute;right:3px;top:50%;width:6px;height:6px;margin-top:-4px;
  border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);transform:rotate(45deg);
  pointer-events:none;
}
.tabs{display:inline-flex;gap:14px}
.tabs button{
  font-size:13px;color:var(--muted);padding:5px 0 4px;border-bottom:1px solid transparent;
}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
/* 画幅下拉：和模型下拉同一套样式，窄屏也不挤 */
.sel + .sel{margin-left:-4px}
.sel select{max-width:44vw}

.send{
  background:var(--ink);color:var(--paper);padding:13px 30px;font-size:13.5px;
  letter-spacing:.12em;border-radius:2px;
}
.send:hover{background:var(--accent)}
.send:disabled{background:#b6ac9e;cursor:default}

/* 输出尺寸提示：画幅 + 分辨率档算出来的实际像素 */
.sizehint{
  margin-top:12px;font:11px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em;
}
.sizehint[hidden]{display:none}
.sizehint b{color:var(--ink-2);font-weight:500}
.sizehint i{color:var(--accent);font-style:normal}

.meta-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;font:11px/1.5 var(--mono);color:var(--muted);
}
.meta-line .err{color:var(--accent)}

/* ---------- 出图中 ---------- */
.busy{display:none;margin-top:26px;padding:22px 0;border-top:1px solid var(--line)}
.busy.show{display:block}
.busy .line{
  height:1px;background:var(--line);position:relative;overflow:hidden;
}
.busy .line i{
  position:absolute;top:0;left:0;height:1px;background:var(--accent);display:block;width:12%;
  animation:sweep 1.6s ease-in-out infinite;
}
@keyframes sweep{0%{margin-left:-12%}100%{margin-left:100%}}
.busy .txt{margin-top:12px;font:11px/1.6 var(--mono);color:var(--muted)}

/* ---------- 结果 ---------- */
.stage{margin-top:26px}
.shot{margin:0;border:1px solid var(--line)}
.shot img{width:100%;display:block}
.shot figcaption{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 12px;border-top:1px solid var(--line);
  font:11px/1.5 var(--mono);color:var(--muted);
}
.shot figcaption b{color:var(--ink-2);font-weight:500}
.shot figcaption .acts{display:flex;gap:14px}
.shot figcaption .acts button:hover,.shot figcaption .acts a:hover{color:var(--accent)}

/* ---------- 作品区 ---------- */
.section{margin:52px 0 0;scroll-margin-top:84px}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:0;
}
.sec-head h2{
  font-family:var(--serif);font-size:21px;font-weight:600;margin:0;letter-spacing:.02em;
  flex:0 0 auto;white-space:nowrap;
}
.sec-head .n{font:10.5px/1.6 var(--mono);color:var(--muted);letter-spacing:.04em;text-align:right}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line);
}
.cell{background:var(--paper);min-width:0;cursor:pointer}
.cell img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.cell .cap{padding:8px 9px 10px;font:11px/1.45 var(--mono);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell:hover img{opacity:.94}

.empty{
  padding:64px 20px;text-align:center;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.empty p{margin:6px 0 0;font-size:13px}
.empty .k{font-family:var(--serif);font-size:17px;color:var(--ink-2)}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:64px;border-top:1px solid var(--line);
  font:11px/1.8 var(--mono);color:var(--muted);
}
.foot-in{
  max-width:840px;margin:0 auto;padding:22px 22px 40px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;
}
.foot-links{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.foot-links .dot{color:var(--line-2)}
.foot a{border-bottom:1px solid transparent;padding-bottom:1px}
.foot a:hover{color:var(--accent);border-color:rgba(178,63,36,.35)}
.foot-copy{color:var(--muted)}
.foot .icp{margin-left:8px}

/* ---------- 协议页 ---------- */
.legal{padding-bottom:20px}
.legal h1{font-family:var(--serif);font-size:34px;font-weight:500;margin:14px 0 8px;letter-spacing:.01em}
.legal .lede{margin-bottom:30px}
.legal-body{max-width:44em;border-top:1px solid var(--line-2);padding-top:24px}
.legal-body h2{
  font-family:var(--serif);font-size:17px;font-weight:600;margin:30px 0 10px;letter-spacing:.01em;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:14px;line-height:1.95;color:var(--ink-2);margin:0 0 12px}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body li{font-size:14px;line-height:1.95;color:var(--ink-2);margin-bottom:6px}
.legal-body li::marker{color:var(--line-2)}

@media (max-width:620px){
  .foot-in{padding:18px 18px 34px;flex-direction:column;align-items:flex-start;gap:10px}
  .legal h1{font-size:27px}
  .legal-body p,.legal-body li{font-size:13.5px}
}

/* ---------- 登录页 ---------- */
.auth{max-width:400px;margin:0 auto;padding:40px 22px 70px}
.auth h1{font-family:var(--serif);font-size:34px;font-weight:600;margin:14px 0 8px;letter-spacing:-.01em}
.auth .sub{font-size:13.5px;color:var(--muted);margin:0 0 30px}
.field{margin-bottom:20px}
.field label{display:block;font:10.5px/1 var(--mono);letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.field input{
  width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  padding:8px 0;font-size:17px;outline:none;
}
.field input:focus{border-color:var(--ink)}
.field .row-in{display:flex;align-items:center;gap:12px}
.field .row-in input{flex:1}
.codebtn{
  flex:0 0 auto;font:11.5px/1 var(--mono);color:var(--accent);border-bottom:1px solid rgba(178,63,36,.35);
  padding:6px 0;white-space:nowrap;
}
.codebtn:disabled{color:#b6ac9e;border-color:transparent}
.msg{font-size:12.5px;min-height:20px;margin:2px 0 12px}
.msg.ok{color:#2f6b4f}
.msg.bad{color:var(--accent)}
.devcode{
  font:12px/1.6 var(--mono);background:var(--paper-2);border-left:2px solid var(--accent);
  padding:10px 12px;margin-bottom:18px;color:var(--ink-2);
}
.tip{font-size:12px;color:var(--muted);line-height:1.7;margin-top:22px}

/* ---------- 灯箱 ---------- */
.lb{position:fixed;inset:0;background:rgba(12,10,8,.97);display:none;flex-direction:column;z-index:80}
.lb.show{display:flex}
.lb .lbtop{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;
  font:11px/1 var(--mono);letter-spacing:.12em;color:#b9b0a3}
.lb .lbtop button{color:#f7f3ec;font-size:20px;line-height:1}
.lb .lbwrap{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:0 14px}
.lb img{max-width:100%;display:block}
.lb .lbcap{padding:12px 20px env(safe-area-inset-bottom);font:11px/1.6 var(--mono);color:#b9b0a3}
.lb .lbcap .acts{display:flex;gap:18px;margin-top:10px}
.lb .lbcap .acts a,.lb .lbcap .acts button{color:#e8e1d5;font:11px/1 var(--mono)}
.lb .lbcap .acts a:hover,.lb .lbcap .acts button:hover{color:#e5836a}
.lb .lbcap .del{color:#e5836a}

.hidden{display:none!important}

/* ---------- 窄屏 ---------- */
@media (max-width:620px){
  .wrap,.top-in{padding-left:18px;padding-right:18px}
  .top-in{min-height:54px;padding-top:8px;padding-bottom:8px}
  .brand-name{font-size:20px}
  .brand-sub{font-size:8px;letter-spacing:.22em}
  .hero{padding:24px 0 20px}
  .hero h1{font-size:33px;line-height:1.28}
  .compose textarea{font-size:16.5px}
  .bar{gap:14px}
  .bar .grow{flex-basis:100%;height:0}
  .send{width:100%;padding:15px}
  .grid{grid-template-columns:1fr 1fr}
  .section{margin-top:40px}
  .foot{flex-direction:column;gap:8px}
}

/* ---------- 头像 ---------- */
.ava-link{display:inline-flex;border-radius:50%;flex:0 0 auto}
.ava{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fdfaf4;
  font-family:var(--serif);font-size:15px;line-height:1;letter-spacing:0;
  transition:box-shadow .16s ease,transform .12s ease,background .16s ease;
}
.ava-link:hover .ava,.ava:hover{box-shadow:0 0 0 3px rgba(178,63,36,.14)}
.ava-link:active .ava{transform:scale(.94)}
.ava.guest{background:transparent;border:1px dashed #b3a693;color:#7d7264}
.ava-link:hover .ava.guest{box-shadow:none;border-color:var(--ink-2);color:var(--ink-2)}

/* ---------- 个人主页 ---------- */
.acct{
  display:flex;align-items:center;gap:16px;padding:20px 0 22px;border-bottom:1px solid var(--line-2);
}
.acct .who{flex:1;min-width:0}
.acct .name{font-family:var(--serif);font-size:21px;line-height:1.3}
.acct .sub{font:11px/1.6 var(--mono);color:var(--muted);margin-top:4px}
.acct .bal{text-align:right;line-height:1}
.acct .bal b{font-family:var(--serif);font-size:30px;font-weight:500}
.acct .bal span{display:block;font:10px/1.6 var(--mono);letter-spacing:.14em;color:var(--muted);margin-top:6px}
.acct-acts{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.btn-ink{background:var(--ink);color:var(--paper);padding:11px 22px;font-size:13px;letter-spacing:.08em;border-radius:2px;display:inline-block}
.btn-ink:hover{background:var(--accent)}
.btn-line{border:1px solid var(--line-2);color:var(--ink);padding:10px 20px;font-size:13px;border-radius:2px;display:inline-block}
.btn-line:hover{border-color:var(--ink)}

.ledger{border-top:1px solid var(--line)}
.ledger .row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.ledger .row .t{color:var(--muted);font:11px/1.6 var(--mono);white-space:nowrap}
.ledger .row .d{font:12px/1.6 var(--mono);white-space:nowrap}
.ledger .plus{color:#2f6b4f}
.ledger .minus{color:var(--accent)}
.ledger .note{color:var(--ink-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 充值 ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
.tier{background:var(--paper);padding:18px 16px 16px;display:flex;flex-direction:column;gap:6px;position:relative}
.tier.hot{background:var(--paper-2)}
.tier .cr{font-family:var(--serif);font-size:26px;line-height:1.2}
.tier .cr small{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:3px}
.tier .gift{font:10.5px/1 var(--mono);color:var(--accent);letter-spacing:.04em}
.tier .flashline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.tier .flashline .left{font:10.5px/1 var(--mono);color:var(--accent);letter-spacing:.04em}
.tier .flashline .once{font:10.5px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.tier .price{font:13px/1.6 var(--mono);color:var(--ink-2);margin-top:2px}
.tier .go{
  margin-top:10px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  padding:8px 18px;font-size:12.5px;border-radius:2px;letter-spacing:.06em;align-self:flex-start;
}
.tier .go:hover{background:var(--ink);color:var(--paper)}
.tier .go[disabled]{opacity:.4;cursor:not-allowed;border-color:var(--line-2);color:var(--muted)}
.tier .go[disabled]:hover{background:transparent;color:var(--muted)}
.tier .tags{position:absolute;top:0;right:0;display:flex}
.tier .badge-flash,.tier .badge-hot{
  color:#fff;font:9.5px/1 var(--mono);letter-spacing:.12em;padding:4px 7px;
}
.tier .badge-flash{background:var(--accent)}
.tier .badge-hot{background:var(--ink)}
.order-list{margin-top:12px}
.order-list .row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.st{font:10.5px/1 var(--mono);padding:4px 7px;border:1px solid var(--line-2);color:var(--ink-2)}
.st.paid{color:#2f6b4f;border-color:rgba(47,107,79,.4)}
.st.pending{color:var(--accent);border-color:rgba(178,63,36,.35)}

@media (max-width:620px){
  .tier{padding:14px 14px 12px;gap:4px}
  .tier .cr{font-size:22px}
  .tiers{grid-template-columns:1fr 1fr}
  .acct{align-items:flex-start}
  .acct .bal b{font-size:26px}
}

/* ---------- 人机验证弹窗 ---------- */
.capmask{
  position:fixed;inset:0;z-index:90;background:rgba(20,16,12,.45);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.capmask.show{display:flex}
.capcard{
  width:100%;max-width:340px;background:var(--paper);border:1px solid var(--line-2);
  padding:20px 20px 20px;
}
.caphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.caphead span{font-family:var(--serif);font-size:19px}
.capx{border:0;background:none;font-size:16px;color:var(--muted);line-height:1;padding:4px}
.capx:hover{color:var(--ink)}
.captip{font-size:12px;color:var(--muted);line-height:1.7;margin:8px 0 14px}
.capimgbox{display:flex;align-items:center;gap:12px}
.capimgbox img{width:208px;height:84px;display:block;border:1px solid var(--line)}
.caplink{font:11.5px/1 var(--mono);color:var(--accent);border-bottom:1px solid rgba(178,63,36,.35);padding:4px 0;background:none;white-space:nowrap}
.capinput{
  width:100%;margin-top:14px;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  padding:8px 0;font:20px/1.4 var(--mono);letter-spacing:.28em;text-transform:uppercase;outline:none;
}
.capinput:focus{border-color:var(--ink)}
.caperr{min-height:18px;font-size:12px;color:var(--accent);margin-top:8px}
.capacts{margin-top:6px}
.capacts .btn-ink{width:100%;text-align:center}

/* ---------- 个人主页：登录密码 ---------- */
.pwbox{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.pwbox .full{grid-column:1 / -1}
.pwbox .field{margin:0}
.pwbox input{
  width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  padding:7px 0;font-size:15px;outline:none;
}
.pwbox input:focus{border-color:var(--ink)}
.pwmsg{font-size:12.5px;min-height:20px;margin-top:12px}
.pwmsg.ok{color:#2f6b4f}
.pwmsg.bad{color:var(--accent)}
@media (max-width:620px){ .pwbox{grid-template-columns:1fr} }

/* ---------- 协议勾选 ---------- */
.agree{
  display:flex;gap:9px;align-items:flex-start;margin:2px 0 14px;
  font-size:12.5px;line-height:1.7;color:var(--ink-2);cursor:pointer;
}
.agree input{
  width:16px;height:16px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent);
}
.agree a{color:var(--accent);border-bottom:1px solid rgba(178,63,36,.3)}
.agree a:hover{border-color:var(--accent)}

/* ============================================================
   参考图 / 改图 / 涂抹（v2.3.0）
   保持同一套纸感：细线、无阴影、无渐变。
   ============================================================ */
.refzone{margin-top:16px}
.refzone.drop .refadd{border-color:var(--accent);color:var(--accent)}
.refs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}

.refadd{
  width:86px;height:86px;border:1px dashed var(--line-2);background:transparent;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);
}
.refadd .plus{font-size:19px;line-height:1;color:var(--ink-2)}
.refadd .t{font:9.5px/1 var(--mono);letter-spacing:.14em}
.refadd:hover{border-color:var(--ink);color:var(--ink)}
.refadd:hover .plus{color:var(--accent)}

.refthumb{position:relative;width:86px;height:86px;border:1px solid var(--line);background:var(--paper-2)}
.refthumb img{width:100%;height:100%;object-fit:cover;display:block}
.refthumb.masked{border-color:var(--accent)}
.refthumb .refx{
  position:absolute;top:0;right:0;width:22px;height:22px;padding:0;line-height:22px;
  background:rgba(23,19,15,.72);color:var(--paper);font-size:11px;text-align:center;
}
.refthumb .refx:hover{background:var(--accent)}
.refthumb .refpaint{
  position:absolute;left:0;right:0;bottom:0;padding:5px 0;text-align:center;
  background:rgba(23,19,15,.72);color:var(--paper);font:9.5px/1 var(--mono);letter-spacing:.06em;
}
.refthumb .refpaint:hover{background:var(--ink)}
.refthumb.masked .refpaint{background:var(--accent)}

.refnote{margin-top:9px;font:11px/1.6 var(--mono);color:var(--muted)}
.refnote[hidden]{display:none}
.refnote b{color:var(--ink-2);font-weight:500}

.cell{position:relative}
.celltag{
  position:absolute;top:0;left:0;background:var(--accent);color:#fff;
  font:9.5px/1 var(--mono);letter-spacing:.1em;padding:4px 6px;
}

/* ---------- 涂抹弹窗 ---------- */
.maskdlg{
  position:fixed;inset:0;z-index:95;background:rgba(20,16,12,.55);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.maskdlg.show{display:flex}
.maskcard{
  width:100%;max-width:560px;max-height:92vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line-2);padding:16px 16px 14px;
}
.maskhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.maskhead span{font-family:var(--serif);font-size:19px}
.maskx{color:var(--muted);font-size:16px;line-height:1;padding:4px 6px}
.maskx:hover{color:var(--ink)}
.masktip{font-size:12px;color:var(--muted);line-height:1.75;margin:8px 0 12px}
.maskstage{background:var(--paper-2);border:1px solid var(--line);line-height:0;overflow:hidden}
#maskcanvas{width:100%;display:block;touch-action:none;cursor:crosshair}
.masktools{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;
  font:11.5px/1 var(--mono);color:var(--ink-2);
}
.masktools .brush{display:flex;align-items:center;gap:8px}
.masktools input[type=range]{width:88px;accent-color:var(--accent)}
.masktools .grow{flex:1}
.masktools button{
  border:1px solid var(--line-2);padding:8px 14px;border-radius:2px;font-size:12px;color:var(--ink);
}
.masktools button:hover{border-color:var(--ink)}
.masktools button.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.masktools button.solid:hover{background:var(--accent);border-color:var(--accent)}

@media (max-width:620px){
  .refadd,.refthumb{width:74px;height:74px}
  .maskcard{padding:14px 13px 12px;max-height:88vh}
  .masktools{gap:10px}
  .masktools .grow{flex-basis:100%;height:0}
}

/* ============================================================
   电商详情图（v2.4.0）
   首页的工作台切换 + 详情图页面。同一套纸感：细线、无阴影、无渐变。
   ============================================================ */

/* ---------- 首页：两个工作台 ---------- */
.modes{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 34px;
}
.mode{
  position:relative;background:var(--paper);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:5px;
}
.mode:hover{background:var(--paper-2)}
.mode.on{background:var(--paper-2)}
.mode.on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);
}
.mode .mk{font:10px/1 var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.mode b{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.01em;line-height:1.35}
.mode small{font-size:11.5px;color:var(--muted);line-height:1.55}
.mode .tag{
  position:absolute;top:10px;right:10px;
  font:9px/1 var(--mono);letter-spacing:.12em;color:var(--accent);
  border:1px solid rgba(178,63,36,.35);padding:3px 5px;
}

/* ---------- 详情图页面 ---------- */
.ecom-back{
  display:block;width:max-content;margin-bottom:16px;
  font:11px/1.6 var(--mono);color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.ecom-back:hover{color:var(--accent);border-color:rgba(178,63,36,.35)}
.ecom-hero{padding-bottom:22px}
.ecom-facts{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;
  font:10.5px/1.6 var(--mono);color:var(--muted);letter-spacing:.02em;
}
.ecom-facts b{
  font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);margin-right:4px;
}

.ecom-form{border-top:1px solid var(--line-2)}
.ecom-step{padding:24px 0 22px;border-bottom:1px solid var(--line)}
.ecom-step-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ecom-num{font:10.5px/1 var(--mono);color:var(--accent);letter-spacing:.14em}
.ecom-step-h h2{
  font-family:var(--serif);font-size:19px;font-weight:600;margin:0;letter-spacing:.02em;
}
.ecom-req,.ecom-opt{
  font:9.5px/1 var(--mono);letter-spacing:.08em;padding:4px 6px;
  border:1px solid var(--line-2);color:var(--muted);
}
.ecom-req{color:var(--accent);border-color:rgba(178,63,36,.35)}
.ecom-hint{font-size:12px;color:var(--muted);line-height:1.75;margin:8px 0 14px;max-width:56ch}
.ecom-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.ecom-grid2 .field{margin-bottom:15px}
.ecom-form textarea{
  width:100%;border:1px solid var(--line-2);background:transparent;
  padding:12px 13px;font-size:15px;line-height:1.75;resize:vertical;min-height:92px;outline:none;
  font-family:var(--serif);border-radius:2px;
}
.ecom-form textarea::placeholder{color:#b3a898}
.ecom-form textarea:focus{border-color:var(--ink)}
.ecom-refzone{margin-top:4px}

.sel-full{display:block;width:100%}
.sel-full select{
  width:100%;max-width:none;font-size:14px;padding:9px 22px 9px 0;
  border-bottom:1px solid var(--line-2);
}
.sel-full::after{right:6px;margin-top:-3px}

.ecom-total{font:10.5px/1.6 var(--mono);color:var(--ink-2);margin-left:auto;white-space:nowrap}
.ecom-mods{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:14px;
}
.ecmod{background:var(--paper);padding:12px 12px 11px;display:flex;flex-direction:column;gap:7px;min-width:0}
.ecmod.star{background:var(--paper-2)}
.ecmod-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ecmod-name{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.01em}
.ecmod-badge{
  font:8.5px/1 var(--mono);letter-spacing:.08em;color:var(--accent);
  border:1px solid rgba(178,63,36,.3);padding:3px 4px;
}
.ecmod-badge.gray{color:var(--muted);border-color:var(--line-2)}
.ecmod-pts{font:9.5px/1 var(--mono);color:var(--muted);margin-left:auto;white-space:nowrap}
.ecmod-ctl{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);
  width:max-content;background:var(--paper);
}
.ecbtn{
  width:27px;height:27px;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;color:var(--ink-2);
}
.ecbtn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.ecbtn:disabled{color:#c8bfb1;cursor:default}
.ecnum{width:32px;text-align:center;font:12.5px/1 var(--mono)}
.ecmod-note{font-size:10.5px;line-height:1.55;color:var(--muted);margin:0}
.ecmod-cost{font:10.5px/1.8 var(--mono);color:var(--muted);margin-top:12px}

.ecom-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.ecom-sum{font:12px/1.6 var(--mono);color:var(--ink-2)}
.ecom-sum .over{color:var(--accent);font-weight:400}
.ecom-cap{font:10px/1.6 var(--mono);color:var(--muted);margin-left:10px}
.ecom-go .send{margin-left:auto}
.ecom-err{
  flex-basis:100%;min-height:0;font:11.5px/1.7 var(--mono);color:var(--accent);
}
.ecom-err a{color:var(--accent);border-bottom:1px solid rgba(178,63,36,.35)}
.ecom-err a:hover{border-color:var(--accent)}

.ecom-prog{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ecom-prog-h{display:flex;justify-content:space-between;gap:12px;font:11px/1.6 var(--mono);color:var(--ink-2)}
.ecom-bar{height:2px;background:var(--line);margin-top:10px;overflow:hidden}
.ecom-bar i{display:block;height:2px;width:0;background:var(--accent);transition:width .45s ease}
.ecom-prog-sub{margin-top:10px;font:10.5px/1.6 var(--mono);color:var(--muted)}

.ecom-result{margin-top:46px}
.ecom-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 14px}
.ecom-tip{font:10.5px/1.6 var(--mono);color:var(--muted)}
.ecom-result .cell img,#ecomRecent .cell img{
  aspect-ratio:4/5;object-fit:contain;background:var(--paper-2);
}

@media (max-width:620px){
  .modes{grid-template-columns:1fr;margin-bottom:26px}
  .mode{padding:13px 14px 12px}
  .mode b{font-size:16px}
  .ecom-grid2{grid-template-columns:1fr;gap:0}
  .ecom-step{padding:20px 0 18px}
  .ecom-step-h h2{font-size:17.5px}
  .ecom-form textarea{font-size:14.5px}
  .ecmod-note{font-size:10px}
  .ecom-go .send{width:100%;margin-left:0}
  .ecom-sum{width:100%}
  .ecom-cap{margin-left:0}
}
@media (max-width:380px){
  .ecom-mods{grid-template-columns:1fr}
}

/* ============================================================
   视频生成（/video.php）
   沿用纸感基调：进度用一条朱红细线，播放器不加圆角阴影。
   ============================================================ */

.vnote{
  margin:14px 0 0;font:10.5px/1.8 var(--mono);color:var(--muted);
}
.vnote b{color:var(--ink-2);font-weight:500}

/* 进度条：比生图那根再具体一点，因为它要跑好几分钟 */
.vprog{height:2px;background:var(--line);overflow:hidden}
.vprog i{
  display:block;height:2px;width:2%;background:var(--accent);
  transition:width .6s ease;
}
#vbusy .txt{margin-top:12px;font:11px/1.6 var(--mono);color:var(--muted)}

/* 结果播放器 */
.vshot video{
  width:100%;display:block;background:#0f0d0b;aspect-ratio:16/9;object-fit:contain;
}

/* 作品网格：视频卡片统一 16:9，竖屏的也不把格子撑歪 */
.vgrid .vcell video{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper-2);
}
.vcell{position:relative}
.vcell .celltag{
  position:absolute;left:8px;bottom:34px;
  font:9.5px/1 var(--mono);letter-spacing:.1em;color:var(--paper);
  background:rgba(23,19,15,.72);padding:4px 6px;
}

/* 播放弹层 */
.vdlg{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(23,19,15,.86);padding:0 16px;
  align-items:center;justify-content:center;
}
.vdlg.show{display:flex}
.vcard{
  width:min(880px,100%);background:var(--paper);border:1px solid var(--line-2);
  display:flex;flex-direction:column;max-height:92vh;
}
.vhead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font:10.5px/1.6 var(--mono);color:var(--muted);letter-spacing:.06em;
}
.vhead button{font-size:13px;color:var(--muted);padding:2px 4px}
.vhead button:hover{color:var(--accent)}
.vcard video{width:100%;display:block;background:#000;max-height:70vh;object-fit:contain}
.vfoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-top:1px solid var(--line);
  font:11px/1.6 var(--mono);color:var(--ink-2);
}
.vfoot #vdprompt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.vfoot .acts{display:flex;gap:14px;flex:0 0 auto}
.vfoot .acts a,.vfoot .acts button{font:11px/1.6 var(--mono);color:var(--ink-2)}
.vfoot .acts a:hover,.vfoot .acts button:hover{color:var(--accent)}
.vfoot .acts .del:hover{color:var(--accent-2)}

@media (max-width:620px){
  .vcard{max-height:96vh}
  .vfoot{flex-wrap:wrap}
  .vfoot #vdprompt{width:100%;flex-basis:100%}
  .vcell .celltag{bottom:32px}
}

/* 个人主页里的视频卡片：结构照抄 .cell，但不挂 .cell 类，
   免得 app.js 的灯箱把它当图片打开（灯箱只认 <img>） */
.vitem{
  display:block;background:var(--paper);min-width:0;position:relative;
}
.vitem video{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper-2);
}
.vitem .cap{
  padding:8px 9px 10px;font:11px/1.45 var(--mono);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vitem .celltag{position:absolute;left:8px;bottom:32px}

/* ============================================================
   提示词反推（/reverse.php）
   选图区是一块虚线纸面，出结果后变成一块可编辑的「纸」。
   ============================================================ */
.rv-hero{padding-bottom:22px}
.rvcompose .kicker{display:block;margin-bottom:10px}

.rvpick{
  position:relative;border:1px dashed var(--line-2);background:transparent;
  min-height:172px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:18px;overflow:hidden;
  transition:border-color .16s ease,background .16s ease;
}
.rvpick:hover{border-color:var(--ink);background:#fffdf8}
.rvpick.drop{border-color:var(--accent);background:rgba(178,63,36,.045)}
.rvpick.has{
  border-style:solid;border-color:var(--line);background:var(--paper-2);
  padding:0;cursor:default;min-height:132px;
}
.rvpick img{display:block;width:100%;max-height:360px;object-fit:contain}
/* hidden 属性会被上面的 display:flex / display:block 盖掉，这里显式关掉 */
.rvpick img[hidden],.rvempty[hidden],.rvpickacts[hidden]{display:none!important}
.rvpick .rvempty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none}
.rvempty .plus{font-size:22px;line-height:1;color:var(--ink-2)}
.rvempty b{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.01em}
.rvempty small{font:10.5px/1.6 var(--mono);color:var(--muted)}
.rvpickacts{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
.rvpickacts button{
  background:rgba(23,19,15,.76);color:var(--paper);
  font:10.5px/1 var(--mono);letter-spacing:.08em;padding:7px 10px;border-radius:2px;
}
.rvpickacts button:hover{background:var(--accent)}

.rvhintfield{margin-top:18px}
.rvhintfield label{display:block;font:10px/1 var(--mono);letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.rvhintfield input{
  width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;
  padding:8px 0;font-size:15px;outline:none;
}
.rvhintfield input::placeholder{color:#b3a898}
.rvhintfield input:focus{border-color:var(--ink)}

.rvresult{margin-top:34px;border-top:1px solid var(--line-2);padding-top:20px}
.rvres-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rvres-h h2{font-family:var(--serif);font-size:20px;font-weight:600;margin:0;letter-spacing:.01em}
.rvres-h span{font:10.5px/1.6 var(--mono);color:var(--muted)}
#rvout{
  width:100%;margin-top:14px;border:1px solid var(--line-2);background:transparent;
  padding:14px 15px;font:16px/1.85 var(--serif);color:var(--ink);resize:vertical;
  min-height:132px;outline:none;border-radius:2px;
}
#rvout:focus{border-color:var(--ink)}
.rvacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.rvacts .btn-ink{padding:10px 20px;font-size:13px}
.rvacts .btn-line{padding:9px 18px;font-size:13px}
.rvacts #rvagain{
  font:11.5px/1.6 var(--mono);color:var(--muted);
  border-bottom:1px solid var(--line-2);padding:6px 0;
}
.rvacts #rvagain:hover{color:var(--accent);border-color:rgba(178,63,36,.35)}
.rvnote{margin:12px 0 0;font:10.5px/1.8 var(--mono);color:var(--muted)}

@media (max-width:620px){
  .rvpick{min-height:140px;padding:14px}
  .rvpick img{max-height:280px}
  #rvout{font-size:15.5px;min-height:120px}
  .rvacts .btn-ink,.rvacts .btn-line{width:100%;text-align:center}
}

/* ============================================================
   白蓝 UI 重构（正式版）
   只覆盖视觉层；只覆盖视觉层；页面结构、控件 ID 与全部 JavaScript 保持原样。
   错误红、成功绿、涂抹遮罩、视频与灯箱深色背景作为特殊语义保留。
   ============================================================ */
:root{
  --paper:#f4f7fc;
  --paper-2:#eaf1fb;
  --surface:#ffffff;
  --ink:#10213d;
  --ink-2:#334a6b;
  --muted:#5f738d;
  --line:#dce6f3;
  --line-2:#c4d4e8;
  --accent:#1769e0;
  --accent-2:#0d4fb3;
  --danger:#d13b32;
  --success:#237a57;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","Songti TC",STSong,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-1:0 2px 8px rgba(34,78,135,.06);
  --shadow-2:0 10px 34px rgba(34,78,135,.09);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-size:15px;line-height:1.7;letter-spacing:.01em}
::selection{background:#cfe2ff;color:#0d376f}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1080px;padding-left:28px;padding-right:28px}
.kicker{color:var(--accent);font-size:10px;letter-spacing:.18em;font-weight:600}

/* 顶栏：白色悬浮工作区，蓝色只标记当前位置 */
.top{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(23,105,224,.02)}
@supports (backdrop-filter:blur(12px)){.top{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.2) blur(14px)}}
.top-in{max-width:1180px;min-height:70px;padding:12px 28px;gap:18px}
.brand{gap:3px}
.brand-row{align-items:center;gap:8px}
.brand-name{font-size:23px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.brand-dot{width:7px;height:7px;border-radius:2px;background:var(--accent);margin-bottom:0}
.brand-sub{font-size:8px;letter-spacing:.28em;color:#5f738d}
.brand:hover .brand-sub{color:var(--accent)}
.top-act{gap:10px}
.pill{height:36px;padding:0 14px;background:var(--surface);border-color:var(--line);color:var(--ink-2);font-size:11px;box-shadow:var(--shadow-1)}
.pill b{color:var(--accent);font-family:var(--sans);font-size:13px;font-weight:700}
.pill:hover{border-color:#9fbfeb;background:#f7faff;color:var(--accent)}
.burger{width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.burger i{height:1.5px;background:var(--ink-2)}
.burger:hover{background:#eef5ff;border-color:#bfd5f2}
.burger:active{background:#e2eeff}
.burger:active i{background:var(--accent)}
.topnav a{font-size:13px;padding:8px 12px;color:#516784;border-radius:9px}
.topnav a:hover{background:#f0f5fc;color:var(--ink)}
.topnav a.on{color:var(--accent);background:#eaf2ff;font-weight:600}
.topnav a.on:hover{background:#dfecff}
@media (min-width:1100px){
  .topnav{display:flex;align-items:center;gap:3px;margin-left:24px}
  .burger{display:none}
}
@media (min-width:900px) and (max-width:1099px){.topnav{display:none}.burger{display:inline-flex}}

/* 抽屉导航 */
.dmask{background:rgba(15,35,63,.36)}
.drawer{background:var(--surface);border-left:1px solid var(--line);width:min(330px,86vw)}
.drawer.show{box-shadow:-18px 0 54px rgba(21,55,96,.14)}
.dhead{padding:17px 16px 15px 22px}
.dclose{width:38px;height:38px;color:var(--ink-2)}
.dclose:hover{background:#edf4fd;color:var(--accent)}
.dgroup{color:#5f738d;padding:18px 12px 8px}
.ditem{min-height:46px;color:var(--ink-2);border-radius:10px}
.ditem:hover{background:#f1f6fc}
.ditem.on{background:#eaf2ff;color:var(--accent)}
.ditem.on .dmk{color:#6b9de3}
.dbadge{color:var(--accent);border-color:#b9d2f3;border-radius:5px}
.dfoot{background:#f6f9fe}
.dbtn{min-height:42px;padding:10px 12px;border-color:var(--line-2);border-radius:9px}
.dbtn:hover{border-color:#9fbfeb;background:#f5f9ff}
.dbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dbtn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.dbtn.danger{color:var(--danger);border-color:#efc5c1}
.dbtn.danger:hover{background:#fff4f3;border-color:var(--danger)}
.ava{background:var(--accent);color:#fff;box-shadow:0 0 0 3px #e8f1ff}
.ava-link:hover .ava,.ava:hover{box-shadow:0 0 0 4px #d9e9ff}
.ava.guest{background:#f7faff;border:1px dashed #9db8d9;color:#587493;box-shadow:none}

/* 主视觉：标题与说明左右错位，信息层级更直接 */
.hero{padding:58px 0 36px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);column-gap:64px;align-items:end}
.hero .kicker{grid-column:1/-1;margin-bottom:20px}
.hero h1{margin:0;font-size:64px;line-height:1.13;font-weight:600;letter-spacing:-.035em}
.hero h1 em{color:var(--accent)}
.hero .lede{max-width:34ch;margin:0 0 7px;color:#5b708a;font-size:14px;line-height:1.9}

/* 三个工作台 */
.modes{grid-template-columns:repeat(3,1fr);gap:12px;background:transparent;border:0;margin:0 0 24px}
.mode{min-height:128px;padding:19px 20px 18px;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.mode:hover{background:#fbfdff;border-color:#a9c6eb;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.mode.on{background:#f5f9ff;border-color:#90b8ed;box-shadow:inset 0 0 0 1px rgba(23,105,224,.06),var(--shadow-1)}
.mode.on::after{left:18px;right:auto;bottom:-1px;width:42px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.mode .mk{color:#5f738d;font-size:9.5px}
.mode.on .mk{color:var(--accent)}
.mode b{font-family:var(--sans);font-size:15px;line-height:1.5;font-weight:650;letter-spacing:0;color:var(--ink)}
.mode small{font-size:11px;color:#5f738d}
.mode .tag{top:14px;right:14px;color:var(--accent);border-color:#c1d7f4;border-radius:4px;background:#f7fbff}

/* 提示词工作区 */
.compose{margin-top:0;padding:26px 28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
.compose .kicker{margin-bottom:12px}
.compose textarea{min-height:116px;padding:16px 18px;border:1px solid #d7e3f2;border-radius:12px;background:#f8faff;font-family:var(--sans);font-size:17px;line-height:1.8;resize:vertical;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.compose textarea::placeholder{color:#617592;font-family:var(--sans)}
.compose textarea:hover{border-color:#b7cde8}
.compose textarea:focus{border-color:#79a8e7;background:#fff;box-shadow:0 0 0 4px rgba(23,105,224,.08)}
.refzone{margin-top:16px}
.refadd{width:84px;height:84px;border-radius:10px;background:#f8faff;border-color:#b8cde6;color:#5f738d;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.refadd:hover{border-color:var(--accent);background:#eef5ff;color:var(--accent);transform:translateY(-1px)}
.refadd .plus{color:var(--accent)}
.refthumb{border-radius:10px;overflow:hidden;background:#eaf1fb}
.refthumb.masked{border-color:var(--accent)}
.refthumb .refx{background:rgba(16,33,61,.76);color:#fff}
.refthumb .refx:hover{background:var(--danger)}
.refthumb .refpaint{background:rgba(16,33,61,.78);color:#fff}
.refthumb .refpaint:hover{background:var(--accent)}
.refthumb.masked .refpaint{background:var(--accent)}
.refzone.drop .refadd{border-color:var(--accent);color:var(--accent);background:#eaf2ff}
.bar{gap:12px;margin-top:20px;padding:0}
.sel select{height:42px;max-width:210px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);font-size:12.5px;transition:border-color .16s ease,box-shadow .16s ease}
.sel select:hover{border-color:#a7c3e6}
.sel select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,105,224,.08)}
.sel::after{right:14px;border-color:#68809e}
.sel + .sel{margin-left:0}
.tabs{gap:3px;padding:3px;background:#edf3fb;border:1px solid #e0e9f5;border-radius:11px}
.tabs button{min-width:47px;height:34px;padding:0 11px;border:0;border-radius:8px;color:#5f738d;font-size:12px;transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.tabs button:hover{color:var(--accent)}
.tabs button.on{background:#fff;color:var(--accent);border:0;box-shadow:0 2px 6px rgba(34,78,135,.10);font-weight:700}
.send{min-height:46px;padding:0 27px;border:1px solid var(--accent);border-radius:11px;background:var(--accent);color:#fff;font-size:13px;font-weight:650;letter-spacing:.06em;box-shadow:0 6px 16px rgba(23,105,224,.20);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.send:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:0 8px 20px rgba(23,105,224,.24);transform:translateY(-1px)}
.send:active{transform:translateY(0);box-shadow:0 3px 10px rgba(23,105,224,.18)}
.send:disabled{background:#9eb2c9;border-color:#9eb2c9;box-shadow:none;transform:none}
.sizehint{margin-top:13px;color:#5f738d;font-size:10.5px}
.sizehint b{color:#425c7d;font-weight:600}
.sizehint i{color:#4774ae}
.meta-line{margin-top:12px;padding:0 2px;color:#5f738d;font-size:10.5px}
.meta-line .err,.msg.bad,.ecom-err,.ecom-sum .over,.caperr,.pwmsg.bad{color:var(--danger)}
.msg.ok,.pwmsg.ok,.ledger .plus{color:var(--success)}
.meta-line .err a{color:var(--danger)}

/* 生成状态与结果 */
.busy{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff}
.busy .line{height:3px;border-radius:3px;background:#e7eff9}
.busy .line i{height:3px;border-radius:3px;background:var(--accent)}
.stage{margin-top:24px}
.shot{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-1)}
.shot figcaption{padding:12px 16px;background:#fff}
.shot figcaption .acts button:hover,.shot figcaption .acts a:hover{color:var(--accent)}

/* 作品区与空状态 */
.section{margin-top:48px}
.sec-head{padding:0 2px 15px;border-bottom:1px solid var(--line)}
.sec-head h2{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:0}
.sec-head .n{color:#5f738d;font-size:10px}
.grid{gap:12px;background:transparent;border:0}
.cell{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-1)}
.cell .cap{padding:10px 12px;color:#5f738d}
.cell:hover{border-color:#aac6e8}
.celltag{background:var(--accent);border-radius:0 0 6px 0}
.empty{position:relative;padding:54px 24px 50px;border:1px dashed #bfd1e7;border-radius:16px;background:rgba(255,255,255,.68);color:#5f738d}
.empty::before{content:"＋";display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 auto 14px;border:1px solid #c3d7ef;border-radius:12px;background:#f1f6fd;color:var(--accent);font:300 25px/1 var(--sans)}
.empty .k{font-family:var(--sans);font-size:15px;font-weight:650;color:#3e5878}
.empty p{margin-top:5px;font-size:12px}

/* 页脚 */
.foot{margin-top:58px;border-top:1px solid var(--line);background:#f8fbff}
.foot-in{max-width:1080px;padding:24px 28px 38px}
.foot a:hover{color:var(--accent);border-color:#a9c6e9}

/* 弹窗：功能结构不变，仅统一白蓝表面 */
.capcard,.maskcard,.vcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(16,33,61,.20)}
.capmask,.maskdlg{background:rgba(16,33,61,.48)}
.maskstage{background:#edf3fb;border-radius:9px}
.masktools button{border-radius:8px}
.masktools button.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.masktools button.solid:hover{background:var(--accent-2);border-color:var(--accent-2)}
.capinput:focus,.field input:focus,.pwbox input:focus,.rvhintfield input:focus,#rvout:focus{border-color:var(--accent)}

/* 一次克制的入场编排，关闭动效偏好下自动降级 */
@media (prefers-reduced-motion:no-preference){
  .hero .kicker,.hero h1,.hero .lede,.modes,.compose{animation:ui-in .58s var(--ease-out) both}
  .hero h1{animation-delay:70ms}
  .hero .lede{animation-delay:120ms}
  .modes{animation-delay:170ms}
  .compose{animation-delay:220ms}
}
@keyframes ui-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:900px){
  .hero{column-gap:32px;grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr)}
  .hero h1{font-size:52px}
  .modes{gap:9px}
  .mode{padding:17px 16px}
}
@media (max-width:720px){
  .hero{display:block;padding:40px 0 28px}
  .hero .kicker{margin-bottom:16px}
  .hero h1{font-size:46px}
  .hero .lede{margin-top:20px;max-width:46ch}
  .modes{grid-template-columns:1fr;gap:9px}
  .mode{min-height:0;padding:15px 17px}
  .mode small{font-size:11px}
  .compose{padding:22px}
  .bar{gap:10px}
  .tabs{order:3}
  .bar .grow{display:none}
  .send{margin-left:auto}
}
@media (max-width:620px){
  .wrap,.top-in{padding-left:18px;padding-right:18px}
  .top-in{min-height:64px;padding-top:10px;padding-bottom:10px;gap:10px}
  .brand-name{font-size:21px}
  .brand-sub{font-size:7.5px}
  .top-act{gap:7px}
  .pill{height:34px;padding:0 11px}
  .burger{width:40px;height:40px}
  .hero{padding:32px 0 24px}
  .hero h1{font-size:40px;line-height:1.18;letter-spacing:-.025em}
  .hero .lede{font-size:13px;line-height:1.85}
  .modes{margin-bottom:18px}
  .compose{padding:18px;border-radius:16px}
  .compose textarea{min-height:112px;padding:14px;font-size:16px}
  .bar{margin-top:16px}
  .sel{width:calc(50% - 5px)}
  .sel select{width:100%;max-width:none}
  .tabs{order:initial;width:100%;margin-top:2px}
  .tabs button{flex:1;height:36px}
  .send{order:initial;width:100%;margin:2px 0 0;min-height:48px}
  .meta-line{align-items:flex-start;flex-direction:column;gap:5px}
  .section{margin-top:38px}
  .sec-head{align-items:flex-start;flex-direction:column;gap:5px}
  .sec-head .n{text-align:left}
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .empty{padding:42px 20px 38px}
  .foot-in{padding:20px 18px 32px}
}
@media (max-width:380px){
  .hero h1{font-size:35px}
  .brand-sub{display:none}
  .pill{padding:0 9px}
  .compose{padding:15px}
}