:root{
  --bg:#0a0a0b; --fg:#ededf0; --muted:#85858c; --faint:#5a5a61;
  --line:rgba(255,255,255,.08); --field:rgba(255,255,255,.035);
  --radius:9px; --dim:.62;
  --accent:#e8e8ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:13px/1.55 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
#bg{position:fixed;inset:0;z-index:-2;background:#0a0a0b;background-size:cover;background-position:center}
#scrim{position:fixed;inset:0;z-index:-1;background:rgba(10,10,11,var(--dim));backdrop-filter:blur(var(--blur,0px))}
button{font:inherit;color:inherit}

/* ---------- 顶栏 ---------- */
header{
  display:flex;align-items:center;gap:18px;padding:12px 22px;
  border-bottom:1px solid var(--line);height:60px;
}
.brand{display:flex;align-items:baseline;gap:8px;flex:none}
.brand b{font-size:14px;font-weight:600;letter-spacing:.4px}
.brand span{font-size:11px;color:var(--faint);letter-spacing:.3px}

.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:3px}
.tab{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);
  font-size:12.5px;padding:7px 13px;border-radius:7px;cursor:pointer;transition:.16s;white-space:nowrap}
.tab i{font-style:normal;font-size:10px;width:15px;height:15px;display:grid;place-items:center;
  border-radius:4px;background:rgba(255,255,255,.08);color:var(--faint);font-variant-numeric:tabular-nums}
.tab:hover{color:var(--fg)}
.tab.on{background:#f0f0f3;color:#0a0a0b;font-weight:600}
.tab.on i{background:rgba(0,0,0,.14);color:#333}

.status{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.dot{width:5px;height:5px;border-radius:50%;background:#8a8a8f;transition:.2s}
.dot.on{background:#43d19e;box-shadow:0 0 7px rgba(67,209,158,.6)}
.dot.err{background:#e05a5a}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  background:transparent;border-radius:8px;cursor:pointer;color:var(--muted);transition:.15s;flex:none}
.iconbtn:hover{color:var(--fg);border-color:rgba(255,255,255,.2)}
.link{color:var(--faint);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link:hover{color:var(--muted)}

/* ---------- 布局 ---------- */
main{display:grid;grid-template-columns:330px 1fr;gap:26px;padding:20px 22px;
  height:calc(100dvh - 60px);max-width:1560px;margin:0 auto}
main.mindmode{grid-template-columns:300px 1fr}

aside{overflow-y:auto;padding-right:6px}
aside::-webkit-scrollbar{width:5px}
aside::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:9px}

/* ---------- 表单 ---------- */
.pane{display:none}
.pane.on{display:block}
.f{margin-bottom:14px}
.f:last-child{margin-bottom:0}
label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;color:var(--muted);letter-spacing:.5px;margin-bottom:6px}
label i{font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
select,input[type=text],input[type=number],input[type=password],textarea{
  width:100%;background:var(--field);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--radius);padding:8px 10px;font:inherit;font-size:12.5px;outline:none;transition:.15s;
}
select:focus,input:focus,textarea:focus{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
select,input[type=text],input[type=number],input[type=password],textarea,button{min-width:0;max-width:100%}
.r2>*,.r3>*,.f{min-width:0}
main,aside,.view,.pane{min-width:0}
textarea{resize:vertical;min-height:96px;line-height:1.65}
.r2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;transition:.15s;background:transparent}
.chip:hover{color:var(--fg);border-color:rgba(255,255,255,.22)}
.chip.on{background:rgba(255,255,255,.1);color:var(--fg);border-color:rgba(255,255,255,.24)}
input[type=range]{width:100%;accent-color:#d8d8de;height:16px}
.hint{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.6}

.go{width:100%;padding:11px;border:0;border-radius:var(--radius);cursor:pointer;
  background:#f0f0f3;color:#0a0a0b;font:inherit;font-weight:600;font-size:13px;
  letter-spacing:1px;transition:.15s;margin-top:16px;
  position:sticky;bottom:-2px;box-shadow:0 -14px 18px -10px rgba(0,0,0,.85)}
aside .pane{padding-bottom:76px}
.go:hover{background:#fff}
.go:disabled{background:rgba(255,255,255,.1);color:var(--faint);cursor:not-allowed}

/* ---------- 模型选择器 ---------- */
.picker{width:100%;display:flex;align-items:center;gap:8px;background:var(--field);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--fg);
  font-size:12.5px;cursor:pointer;text-align:left;transition:.15s}
.picker:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.pkdot{width:8px;height:8px;border-radius:50%;flex:none;background:#6a6a72}
.pkname{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkchev{color:var(--faint);flex:none}

/* ---------- 参考图 ---------- */
.drop{position:relative;border:1px dashed rgba(255,255,255,.18);border-radius:10px;
  height:118px;display:grid;place-items:center;cursor:pointer;transition:.15s;
  color:var(--faint);font-size:11.5px;overflow:hidden;background:rgba(255,255,255,.02)}
.drop:hover{border-color:rgba(255,255,255,.34);color:var(--muted)}
.drop.has{border-style:solid;border-color:var(--line)}
.drop img{width:100%;height:100%;object-fit:cover;display:block}
.drop .x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:6px;
  background:rgba(0,0,0,.6);display:grid;place-items:center;color:#ddd;font-size:12px}
.drop .x:hover{background:rgba(0,0,0,.85)}
.drop .lbl{position:absolute;left:8px;bottom:6px;font-size:10.5px;color:#cfd2da;
  background:rgba(0,0,0,.55);padding:1px 6px;border-radius:4px}

/* ---------- 生成进度（可爱动画） ---------- */
.journey{
  display:none;align-items:center;gap:14px;padding:11px 16px 11px 12px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);
  backdrop-filter:blur(8px);position:relative;overflow:hidden;
}
.journey.on{display:flex;animation:jIn .3s cubic-bezier(.2,.9,.3,1)}
@keyframes jIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.journey::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 200% at 0% 50%,rgba(255,255,255,.05),transparent 60%)}

.buddy{position:relative;width:46px;height:46px;flex:none}
.buddy svg{width:46px;height:46px;display:block;animation:bob 2.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}
.buddy .ear{transform-origin:center bottom;animation:ear 2.6s ease-in-out infinite}
.buddy .ear.r{animation-delay:.4s}
@keyframes ear{0%,100%{transform:rotate(0)}45%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
.buddy .eye{transform-origin:center;animation:blink 3.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.buddy .ring{transform-origin:32px 32px;animation:spin 3.6s linear infinite;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.buddy .spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0}
.buddy .spark.a{top:2px;right:0;animation:sp 2.4s ease-out infinite}
.buddy .spark.b{bottom:4px;left:-2px;animation:sp 2.4s .8s ease-out infinite}
.buddy .spark.c{top:-2px;left:8px;animation:sp 2.4s 1.5s ease-out infinite}
@keyframes sp{0%{opacity:0;transform:scale(.4)}25%{opacity:.9}55%{opacity:0;transform:scale(1) translateY(-6px)}100%{opacity:0}}
.journey.done .buddy svg{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.85)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.journey.err .buddy svg{animation:shake .4s}

.jmain{flex:1;min-width:0}
.jrow{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.jtxt{min-width:0;font-size:12.5px;color:var(--fg);letter-spacing:.2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.jtxt b{font-weight:600;color:#fff}
.jsub{font-size:10.5px;color:var(--faint)}
.jpct{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.jbar{position:relative;height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.jbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#8f8ff0,#e8e8ee 55%,#8fe0c8);
  transition:width .35s cubic-bezier(.3,.9,.3,1)}
.jbar i::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:shine 1.5s linear infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.journey.done .jbar i{background:#43d19e}
.journey.err .jbar i{background:#e05a5a}
.jtime{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;
  letter-spacing:.4px;min-width:46px;text-align:right}

/* ---------- 画布 ---------- */
.view{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.stage{position:relative;flex:1;min-height:300px;border:1px solid var(--line);border-radius:12px;
  display:grid;place-items:center;padding:14px;overflow:hidden;background:rgba(255,255,255,.015)}
.stage img,.stage video{max-width:100%;max-height:calc(100dvh - 300px);border-radius:6px;display:block}
.placeholder{text-align:center;color:var(--faint);font-size:12px;line-height:2.1;letter-spacing:.3px}
.placeholder b{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:2px}
.skeleton{position:absolute;inset:0;border-radius:12px;overflow:hidden;pointer-events:none}
.skeleton::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.05) 45%,transparent 70%);
  animation:shine 1.7s linear infinite}
.meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--faint);padding:0 2px;min-height:16px}
.meta b{color:var(--muted);font-weight:500}
.stats{display:flex;gap:18px;font-size:11px;color:var(--faint);letter-spacing:.3px;padding:0 2px}
.stats b{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}

.hist{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;min-height:86px}
.hist::-webkit-scrollbar{height:5px}
.hist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
.hitem{position:relative;flex:0 0 auto;cursor:pointer;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);transition:.15s;background:#111}
.hitem img,.hitem video{width:78px;height:78px;object-fit:cover;display:block;opacity:.9}
.hitem:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.hitem:hover img,.hitem:hover video{opacity:1}
.hitem .s{position:absolute;right:3px;bottom:3px;font-size:9.5px;color:#dfe3ea;
  background:rgba(0,0,0,.62);padding:1px 4px;border-radius:4px;font-variant-numeric:tabular-nums}
.hitem .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:13px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.8);pointer-events:none}
.hitem .p{position:absolute;left:3px;top:3px;font-size:9px;color:#dfe3ea;
  background:rgba(0,0,0,.62);padding:1px 4px;border-radius:4px}
.emptyline{font-size:11px;color:var(--faint);padding:10px 2px}

/* ---------- 思维导图 ---------- */
.mindwrap{display:none;position:relative;flex:1;min-height:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.045),transparent 42%),
    rgba(255,255,255,.012)}
.mindwrap.on{display:block}
#tree{position:absolute;inset:0;cursor:grab;touch-action:none}
#tree.grabbing{cursor:grabbing}
#tree svg.wires{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#tree .world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mnode{position:absolute;width:186px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:rgba(18,18,22,.92);
  box-shadow:0 8px 26px rgba(0,0,0,.38);cursor:pointer;transition:border-color .16s,transform .16s;
  animation:nIn .26s cubic-bezier(.2,.9,.3,1)}
@keyframes nIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.mnode:hover{border-color:rgba(255,255,255,.34);transform:translateY(-2px)}
.mnode.sel{border-color:#e8e8ee;box-shadow:0 0 0 1px #e8e8ee,0 10px 30px rgba(0,0,0,.45)}
.mnode .thumb{height:118px;background:rgba(255,255,255,.04);display:grid;place-items:center;
  overflow:hidden;position:relative}
.mnode .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mnode .thumb .ph{font-size:10.5px;color:var(--faint)}
.mnode .thumb .spin{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,10,12,.6);font-size:10.5px;color:#cfd2da}
.mnode .thumb .spin::before{content:'';position:absolute;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:#e8e8ee;animation:spin .8s linear infinite}
.mnode .cap{padding:7px 9px 8px}
.mnode .cap .t{font-size:11.5px;line-height:1.45;color:#dcdce2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mnode .cap .b{display:flex;gap:6px;margin-top:5px;font-size:9.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.mnode .cap .b span{background:rgba(255,255,255,.06);padding:0 5px;border-radius:4px}
.mnode .plus{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:7px;
  background:rgba(10,10,12,.72);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  font-size:14px;color:#e8e8ee;opacity:0;transition:.15s;z-index:3}
.mnode:hover .plus{opacity:1}
.mnode .plus:hover{background:#e8e8ee;color:#0a0a0b}
.mindbar{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;z-index:5}
.mindbar button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:rgba(14,14,17,.9);color:var(--muted);cursor:pointer;display:grid;place-items:center}
.mindbar button:hover{color:var(--fg);border-color:rgba(255,255,255,.26)}
.mindhint{position:absolute;left:14px;bottom:14px;font-size:11px;color:var(--faint);z-index:5;
  background:rgba(12,12,15,.7);padding:5px 9px;border-radius:7px;backdrop-filter:blur(6px)}
.mempty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:var(--faint);font-size:12px;line-height:2;pointer-events:none}
.mempty b{display:block;color:var(--muted);font-size:13px;font-weight:500}
.mpreview{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:12px;
  background:rgba(255,255,255,.03)}
.mpreview img{width:100%;display:block;max-height:150px;object-fit:cover}

/* ---------- 设置抽屉 ---------- */
.sheet{position:fixed;top:0;right:0;height:100%;width:330px;background:rgba(14,14,16,.9);
  backdrop-filter:blur(22px);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:50;display:flex;flex-direction:column}
.sheet.on{transform:none}
.sheet header{border-bottom:1px solid var(--line);padding:15px 20px;display:flex;align-items:center;height:60px}
.sheet h3{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--muted)}
.sheet .body{flex:1;overflow-y:auto;padding:20px}
.sheet .body::-webkit-scrollbar{width:5px}
.sheet .body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:9px}
.sec{font-size:10.5px;letter-spacing:1.4px;color:var(--faint);margin:0 0 11px}
.sec:not(:first-child){margin-top:26px}
.swatch{width:100%;height:38px;border-radius:7px;border:1px solid var(--line);cursor:pointer;
  position:relative;transition:.15s;overflow:hidden}
.swatch:hover{transform:translateY(-1px)}
.swatch.sel{outline:1.5px solid #e8e8ee;outline-offset:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.upload{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;
  border:1px dashed rgba(255,255,255,.16);border-radius:7px;color:var(--muted);
  font-size:11.5px;cursor:pointer;transition:.15s}
.upload:hover{color:var(--fg);border-color:rgba(255,255,255,.3)}
.foot{font-size:10.5px;color:var(--faint);border-top:1px solid var(--line);padding:13px 20px;line-height:1.8}

/* ---------- 模型弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:24px}
.modal.on{display:flex}
.mbox{width:min(560px,100%);max-height:min(78vh,760px);display:flex;flex-direction:column;
  background:rgba(18,18,21,.97);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
.mhead{display:flex;align-items:center;gap:9px;padding:16px 18px 12px}
.mhead h3{font-size:13px;font-weight:600;letter-spacing:.3px}
.cnt{font-size:11px;color:var(--muted);background:rgba(255,255,255,.07);
  padding:1px 7px;border-radius:20px;font-variant-numeric:tabular-nums}
.mhead .sp{flex:1}
.sync{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;cursor:pointer;transition:.15s}
.sync:hover{color:var(--fg);border-color:rgba(255,255,255,.24)}
.sync:disabled{opacity:.6;cursor:default}
.sync.rot svg{animation:spin .9s linear infinite}
.msearch{margin:0 18px 10px;position:relative}
.msearch input{width:100%;padding:9px 12px 9px 32px;font-size:12.5px}
.msearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.mchips{display:flex;gap:6px;padding:0 18px 12px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.mchip{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;cursor:pointer;transition:.15s;background:transparent}
.mchip:hover{color:var(--fg)}
.mchip.sel{background:rgba(255,255,255,.1);color:var(--fg);border-color:rgba(255,255,255,.2)}
.mchip i{font-style:normal;color:var(--faint);margin-left:4px;font-size:10.5px}
.mlist{overflow-y:auto;padding:6px 10px 14px;flex:1}
.mlist::-webkit-scrollbar{width:6px}
.mlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
.mfam{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.6px;
  color:var(--faint);padding:13px 8px 6px}
.mfam b{font-weight:600;color:var(--muted);letter-spacing:0;font-size:11px}
.mfam i{font-style:normal;color:var(--faint)}
.mrow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  cursor:pointer;transition:.12s}
.mrow:hover{background:rgba(255,255,255,.05)}
.mrow.sel{background:rgba(255,255,255,.08)}
.mrow.off{opacity:.55}
.mrow .nm{flex:1 1 0;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .tag{font-size:10px;color:var(--faint);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;flex:none;font-variant-numeric:tabular-nums}
.mrow .tag.warn{color:#d8a24a;border-color:rgba(216,162,74,.35)}
.mrow .sz{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;min-width:34px;text-align:right}
.mrow .ck{width:13px;color:#43d19e;opacity:0;flex:none}
.mrow.sel .ck{opacity:1}
.mfoot{border-top:1px solid var(--line);padding:10px 18px;font-size:10.5px;color:var(--faint);
  display:flex;gap:14px;justify-content:space-between}
.empty-m{font-size:11.5px;color:var(--faint);padding:26px;text-align:center}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:90;
  background:rgba(24,24,28,.97);border:1px solid var(--line);color:var(--fg);
  font-size:12px;padding:9px 15px;border-radius:9px;opacity:0;transition:.25s;
  pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:80vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(224,90,90,.5);color:#f0a8a8}

/* ---------- 色盘 ---------- */
.wheelwrap{display:flex;justify-content:center;margin:4px 0 12px}
#wheel{width:196px;height:196px;cursor:crosshair;touch-action:none;border-radius:50%}
.colorrow{display:flex;gap:8px;align-items:center}
#cprev{width:34px;height:34px;border-radius:7px;border:1px solid var(--line);flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
#hex{flex:1;font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px;text-transform:uppercase}
.presets{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}
.pdot{height:22px;border-radius:5px;border:1px solid var(--line);cursor:pointer;transition:.15s}
.pdot:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.35)}
.pdot.sel{outline:1.5px solid #e8e8ee;outline-offset:1px}

/* ================= 窄屏：保持原有比例，单列 + 上下滑动 ================= */
@media (max-width:940px){
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:100%}

  header{flex-wrap:wrap;height:auto;padding:9px 12px 8px;gap:8px;position:sticky;top:0;z-index:40;
    background:rgba(10,10,11,.94);backdrop-filter:blur(16px)}
  .brand span{display:none}
  .status{margin-left:auto;font-size:10.5px;min-width:0}
  .status #health{max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #retry{display:none}
  .tabs{order:9;flex:1 1 100%;width:100%;overflow-x:auto;gap:3px;
    -ms-overflow-style:none;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1 1 0;min-width:0;justify-content:center;padding:7px 3px;font-size:11px;gap:4px;
    overflow:hidden;text-overflow:clip}
  .tab i{display:none}

  main{display:block;height:auto;max-width:none;padding:12px}
  main.mindmode{display:block}
  aside{overflow:visible;padding-right:0;margin-bottom:12px}
  aside .pane{padding-bottom:0}

  .go{position:sticky;bottom:8px;margin-top:12px;padding:12px;font-size:13.5px}
  .view{height:auto;gap:10px}
  .stage{height:46dvh;min-height:230px;padding:10px}
  .stage img,.stage video{max-height:calc(46dvh - 24px)}
  .journey{padding:9px 11px;gap:10px}
  .buddy,.buddy svg{width:36px;height:36px}
  .jsub{display:none}
  .hist{min-height:0}

  .mindwrap{flex:none;height:66dvh;min-height:380px}
  .mnode{width:152px}
  .mnode .thumb{height:94px}
  .mnode .plus{opacity:1}
  .mindhint{display:none}

  .sheet{width:100%;max-width:100%}
  .modal{padding:0;align-items:flex-end}
  .mbox{width:100%;max-height:88dvh;border-radius:14px 14px 0 0}
  .toast{bottom:18px;max-width:90vw}
}

@media (max-width:520px){
  header{padding:8px 10px 7px}
  .brand b{font-size:13px}
  main{padding:10px}
  .f{margin-bottom:12px}
  input,select,textarea{font-size:16px}   /* 防止 iOS 聚焦时整页放大 */
  textarea{min-height:84px}
  .stage{height:42dvh}
  .mindwrap{height:64dvh;min-height:340px}
  .mnode{width:144px}
  .mnode .thumb{height:88px}
}

/* ================= 节点内联提示词 ================= */
.mnode .cap .t{cursor:text}
.mnode.editing .cap .t{display:none}
.mnode .cap textarea{display:none;margin:0;padding:5px 6px;min-height:52px;height:52px;font-size:11px;
  line-height:1.45;border-radius:6px;resize:none;background:rgba(255,255,255,.07)}
.mnode.editing .cap textarea{display:block}
.mnode .cap .row{display:flex;gap:6px;margin-top:6px}
.mnode .cap .row b{flex:1;text-align:center;font-weight:500;font-size:10.5px;padding:3px 0;
  border-radius:5px;background:rgba(255,255,255,.08);color:#cfd2da;cursor:pointer}
.mnode .cap .row b:hover{background:rgba(255,255,255,.16);color:#fff}
.mnode .cap .row b.pri{background:#eee;color:#111}
.mnode .cap .row b.pri:hover{background:#fff}
.mnode .cap .row b.dis{opacity:.4;pointer-events:none}

/* ---------- 工作流（原样提交）信息条 ---------- */
.wfinfo{
  margin-top:8px;padding:10px 12px;border-radius:11px;
  background:rgba(224,180,90,.07);border:1px solid rgba(224,180,90,.26);
  font-size:12px;line-height:1.5;
}
.wfinfo .wfrow1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.wfinfo .wfrow1 b{font-size:12.5px;font-weight:600;letter-spacing:.2px}
.wflock{font-size:10.5px;padding:2px 8px;border-radius:99px;
  background:rgba(224,180,90,.15);color:#e0b45a;white-space:nowrap}
.wfinfo .wfrow2{display:flex;flex-wrap:wrap;gap:5px}
.wfinfo .wfrow2 i{font-style:normal;font-size:11px;padding:2px 8px;border-radius:7px;
  background:rgba(255,255,255,.05);color:var(--muted)}
.wfinfo .wfrow3{margin-top:7px;color:var(--faint);font-size:11px;word-break:break-all}
.wfinfo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9c3b2;font-size:11px}
.wfwarn{margin-top:7px;color:#e0a34a;font-size:11px;line-height:1.5}

.tag.wf{background:rgba(224,180,90,.15);color:#e0b45a;border-color:rgba(224,180,90,.32)}
.mrow.wfrow .nm{font-weight:500}
.chip.off{opacity:.3;pointer-events:none}
.pane input:disabled,.pane select:disabled{opacity:.5;cursor:not-allowed}

/* ================= AI 提示词：标签旁小按钮 ================= */
.aibtn{
  display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;
  padding:2px 8px;border-radius:99px;cursor:pointer;transition:.16s;
  border:1px solid rgba(150,130,240,.34);background:rgba(140,120,235,.12);color:#b9a9ff;
  letter-spacing:.2px;margin-left:auto;margin-right:6px;flex:none;line-height:1.6;
}
.aibtn svg{opacity:.9}
.aibtn:hover{background:rgba(140,120,235,.24);border-color:rgba(160,140,250,.6);color:#d6cbff}
.aibtn:active{transform:scale(.96)}
.aibtn[disabled]{opacity:.45;cursor:default}

/* ================= AI 弹窗 ================= */
#ai .aibox{width:min(486px,100%);height:min(86vh,720px);max-height:min(86vh,720px)}
.aiscroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.aiscroll::-webkit-scrollbar{width:6px}
.aiscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
.aibody{padding:4px 18px 16px;flex:1}
.aibody .f{margin-bottom:11px}
.aibody textarea{min-height:74px}
#aiIdea{min-height:66px}
#aiRes{min-height:132px;font-size:12px;line-height:1.7}
.aifoot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);flex:none}
.aigen{
  flex:1;padding:10px;border:0;border-radius:9px;cursor:pointer;font:inherit;font-weight:600;
  font-size:12.5px;letter-spacing:.6px;background:#f0f0f3;color:#0a0a0b;transition:.15s;
}
.aigen:hover{background:#fff}
.aigen:disabled{background:rgba(255,255,255,.1);color:var(--faint);cursor:not-allowed}
.aiapply{
  flex:none;padding:10px 16px;border:1px solid rgba(150,130,240,.4);border-radius:9px;
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  background:rgba(140,120,235,.18);color:#c6b8ff;transition:.15s;
}
.aiapply:hover{background:rgba(140,120,235,.3);color:#e2d9ff}
.mini{padding:7px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  font:inherit;font-size:11.5px;background:rgba(255,255,255,.05);color:var(--muted);transition:.15s}
.mini:hover{color:var(--fg);border-color:rgba(255,255,255,.24)}
.mini:disabled{opacity:.5;cursor:default}

/* ================= 第 5 页：AI 接口 ================= */
.keyrow{display:flex;gap:7px}
.keyrow input{flex:1}
.eye{flex:none;padding:0 11px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.05);color:var(--muted);font-size:11.5px;cursor:pointer;transition:.15s}
.eye:hover{color:var(--fg);border-color:rgba(255,255,255,.24)}
.mrow2{display:flex;gap:14px;margin-top:9px;font-size:11.5px}

.apilist{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.apitem{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:.15s;min-width:0}
.apitem:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.055)}
.apitem.on{border-color:rgba(150,130,240,.5);background:rgba(140,120,235,.1)}
.apitem .an{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.apitem .am{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;margin-top:1px}
.apitem .ai2{flex:1;min-width:0}
.apitem .del{flex:none;color:var(--faint);font-size:15px;line-height:1;padding:2px 4px;
  border-radius:5px;opacity:.35;transition:.15s}
.apitem:hover .del{opacity:.9}
.apitem .del:hover{color:#e06666;background:rgba(224,102,102,.12)}
.apitem .okdot{width:5px;height:5px;border-radius:50%;background:#43d19e;flex:none}

/* 右侧面板 */
.apiview{display:none;flex:1;min-width:0;overflow-y:auto;padding:6px 4px 30px}
.apiview.on{display:block}
.apihead{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.apihead h2{font-size:19px;font-weight:600;letter-spacing:.2px;margin-bottom:6px}
.apihead p{font-size:12px;color:var(--muted);line-height:1.7;max-width:520px}
.apibadge{display:flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;background:rgba(255,255,255,.04)}
.apibadge.on{color:#9fe8cb;border-color:rgba(67,209,158,.35);background:rgba(67,209,158,.09)}
.apibadge.on .dot{background:#43d19e;box-shadow:0 0 8px rgba(67,209,158,.7)}
.apibadge.err{color:#f0a3a3;border-color:rgba(224,90,90,.35);background:rgba(224,90,90,.09)}
.apibadge.err .dot{background:#e05a5a}

.apicards{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-bottom:22px}
.apicard{border:1px solid var(--line);border-radius:12px;padding:14px 15px;
  background:rgba(255,255,255,.022);transition:.16s}
.apicard b{display:block;font-size:12.5px;font-weight:600;margin-bottom:3px}
.apicard span{font-size:11px;color:var(--faint);line-height:1.6;word-break:break-all}
.apicard em{display:block;font-style:normal;font-size:10.5px;color:#b9a9ff;margin-top:7px;
  letter-spacing:.3px}

.apilog{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.28)}
.apiloghead{font-size:10.5px;letter-spacing:1px;color:var(--faint);padding:10px 15px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.apilog pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--muted);padding:14px 15px;line-height:1.8;white-space:pre-wrap;word-break:break-all;
  margin:0;max-height:300px;overflow-y:auto}

/* ---------- 窄屏：AI 接口页与写词弹窗 ---------- */
@media (max-width:940px){
  .apiview{display:none !important}          /* 手机上只看左侧表单，省得滚动过长 */
  #ai .aibox{width:100%;height:88vh;max-height:88vh}
  .aiscroll{max-height:none}
  .aibody{padding:2px 14px 12px}
  .aibtn{font-size:10px;padding:2px 7px}
  .mhead{padding:14px 14px 10px}
  .aifoot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .apicards{grid-template-columns:1fr}
  .mrow2{gap:12px}
}

/* ===== 云端模式：ComfyUI 专属参数不显示 ===== */
body.cloud .f:has([data-f="lora"]),
body.cloud .f:has([data-f="steps"]),
body.cloud .f:has([data-f="cfg"]),
body.cloud .f:has([data-f="seed"]),
body.cloud .f:has([data-f="strength"]) { display: none; }
body.cloud .wfinfo { display: none !important; }