/* ===== 基础 ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f3f4f5;
  --panel:#fff;
  --panel-strong:#fff;
  --panel-low:#f6f7f8;
  --border:#dfe3e6;
  --border-soft:#e9ecee;
  --highlight:#ffffff;
  --text:#23272a;
  --text-mid:#61686d;
  --text-dim:#969da2;
  --accent:#252a2e;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:9px;
  --shadow:none;
  --shadow-soft:none;
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;margin:0;appearance:none;-webkit-appearance:none;line-height:1}
input,textarea,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}

/* ===== 整体框架 ===== */
.app{display:flex;height:100vh;gap:24px;padding:24px}

/* ===== 左侧边栏（悬浮卡片） ===== */
.sidebar{
  width:148px;flex-shrink:0;
  display:flex;flex-direction:column;
  background:linear-gradient(155deg,#ffffff 0%,#f4f6f7 52%,#edf0f2 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition:margin-left .3s ease,opacity .2s;
  position:relative;z-index:20;
  overflow:hidden;
}
.sidebar::before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,#fff 24%,#fff 76%,transparent);
  pointer-events:none;
}
.sidebar.collapsed{margin-left:-172px;opacity:0;pointer-events:none}
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 8px 10px 14px;
  border-bottom:1px solid var(--border-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.92);
  gap:6px;
}
.sidebar-head b{font-size:12px;font-weight:550;letter-spacing:0;color:var(--text-mid);flex-shrink:0}
.sidebar-title{display:flex;align-items:center;gap:5px;min-width:0}
.history-info{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;color:var(--text-dim);
  cursor:help;outline:none;
}
.history-info svg{width:13px;height:13px}
.history-info::after{
  content:"图片保存仅72小时，请及时下载到本地";
  position:absolute;top:calc(100% + 8px);left:-60px;z-index:80;
  width:120px;padding:7px 9px;border-radius:8px;
  background:rgba(35,40,39,.92);color:#fff;
  font-size:11px;font-weight:400;line-height:1.45;
  box-shadow:0 6px 18px rgba(20,25,24,.18);
  opacity:0;visibility:hidden;transform:translateY(-3px);
  transition:opacity .15s,transform .15s,visibility .15s;
  pointer-events:none;
}
.history-info:hover::after,.history-info:focus-visible::after{
  opacity:1;visibility:visible;transform:translateY(0);
}
.sidebar-head .head-actions{
  display:flex;gap:2px;align-items:center;justify-content:flex-end;flex-shrink:0;
}
.head-btn{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:.15s;
}
.head-btn svg{width:13px;height:13px}
.head-btn:hover{background:linear-gradient(180deg,#fff,#e9edef);box-shadow:inset 0 0 0 1px var(--border-soft),0 2px 5px rgba(60,70,76,.08);color:var(--text)}
.sidebar-body{
  flex:1;overflow-y:auto;padding:12px 10px;min-height:0;
  display:flex;flex-direction:column;
  scrollbar-width:thin;
  scrollbar-color:rgba(82,92,98,.22) transparent;
}
.sidebar-body::-webkit-scrollbar{width:4px}
.sidebar-body::-webkit-scrollbar-track{background:transparent}
.sidebar-body::-webkit-scrollbar-thumb{
  min-height:28px;
  background:rgba(82,92,98,.22);
  border:1px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}
.sidebar-body::-webkit-scrollbar-thumb:hover{background:rgba(70,80,86,.34);background-clip:padding-box}
.sidebar-empty{
  text-align:center;color:var(--text-dim);font-size:11px;
  padding:30px 8px;line-height:1.7;
}

/* ===== 历史卡片 ===== */
.history-list{display:flex;flex-direction:column;gap:10px}
.history-item{
  position:relative;min-height:104px;padding:9px;
  border:1px solid #e4e7e9;border-radius:13px;
  background:#fff;overflow:hidden;
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;
  cursor:pointer;transition:background-color .14s,border-color .14s;
  flex-shrink:0;
}
.history-item:hover{border-color:#d5dadd;background:#fafbfb}
.history-item.active{border-color:#bfc7cc;background:#f8f9fa}
.history-item img{width:100%;height:100%;object-fit:cover}
.history-thumb{width:92px!important;height:86px!important;border-radius:9px;object-fit:cover;background:#edf0f1;align-self:start;cursor:zoom-in}
.history-thumb:focus-visible{outline:2px solid #59646b;outline-offset:2px}
.history-content{min-width:0;display:flex;flex-direction:column;gap:6px}
.history-card-head{display:flex;align-items:center;gap:6px;min-width:0}
.history-item .model-tag{
  position:static;top:5px;left:5px;display:inline-flex;max-width:76px;padding:3px 6px;
  border-radius:5px;background:#292f33;color:#fff;
  font-size:7.5px;font-weight:550;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
}
.history-meta{margin-left:auto;color:#92999e;font-size:8px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.history-prompt{font-size:10.5px;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.history-card-actions{margin-top:auto;display:flex;justify-content:flex-end;gap:4px}
.history-action{
  position:static;bottom:5px;width:23px;height:23px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  opacity:.56;background:#eef1f2;color:#5f686e;box-shadow:none;
  transition:opacity .15s,background .15s,transform .15s;
}
.history-action.success{opacity:1;background:#3ba67c;font-weight:700}
.history-action.failed{opacity:1;background:#c95858;font-weight:700}
.history-item:hover .history-action,.history-action:focus-visible{opacity:1}
.history-action:hover{background:#dfe4e6;color:#252a2e;transform:none}
.history-action svg{width:11px;height:11px}

/* 收起时的展开按钮 */
.sidebar-expand{
  position:fixed;top:30px;left:24px;z-index:30;
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(155deg,#fff,#edf0f2);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  display:none;align-items:center;justify-content:center;
  color:var(--text-mid);transition:.15s;
}
.sidebar-expand:hover{color:var(--text);background:linear-gradient(155deg,#fff,#e5eaed);box-shadow:var(--shadow)}
.sidebar.collapsed ~ .sidebar-expand{display:flex}
/* ===== 画布主区域 ===== */
.main{
  flex:1;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  padding:0;gap:20px;
  overflow:hidden;
}

.status{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--text-dim);
}

/* 结果面板 */
.result-panel{
  flex:1;min-height:0;
  background:linear-gradient(145deg,#fcfdfd 0%,#f5f7f8 56%,#edf0f2 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 #fff;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.result-panel::before{
  content:"";position:absolute;top:0;left:36px;right:36px;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);
  pointer-events:none;
}
.result-panel::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.76);
  border-radius:14px;pointer-events:none;z-index:0;
}
.status .dot{
  width:7px;height:7px;border-radius:50%;
  background:#c9cfcd;
  transition:background .2s,box-shadow .2s;
}
.status.generating .dot{background:#e89494;box-shadow:0 0 0 3px rgba(232,148,148,.14)}
.status.ready .dot{background:#3ba67c;box-shadow:0 0 0 3px rgba(59,166,124,.12)}
.result-body{
  flex:1;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--text-dim);text-align:center;
}
.empty .empty-icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(145deg,#fff,#e8ecee);
  border:1px solid var(--border-soft);
  box-shadow:0 8px 18px rgba(71,81,87,.08),inset 0 1px 0 #fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);
}
.empty .empty-icon svg{width:30px;height:30px}
.empty b{font-size:15px;color:var(--text-mid);font-weight:600}
.empty span{font-size:12.5px}
.loading{
  display:none;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  position:relative;width:100%;height:100%;
  justify-content:center;
  border-radius:var(--radius-lg);
  overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,#ffffff 0%,#f7f8fa 34%,#f2f6f8 65%,#fbfaf7 100%);
}
.loading::before{
  content:"";position:absolute;inset:-48%;z-index:0;
  background:conic-gradient(from 25deg,
    rgba(255,255,255,.95),rgba(210,218,226,.52),rgba(244,246,249,.96),
    rgba(194,216,229,.42),rgba(255,255,255,.98),rgba(218,207,232,.35),
    rgba(255,255,255,.95));
  filter:blur(68px) saturate(82%);
  opacity:.72;animation:auroraSpin 16s linear infinite;
}
.loading::after{
  content:"";position:absolute;inset:-22%;z-index:0;
  background:
    radial-gradient(ellipse at 18% 28%,rgba(255,255,255,.98) 0 12%,rgba(210,220,228,.42) 28%,transparent 55%),
    radial-gradient(ellipse at 80% 24%,rgba(255,255,255,.92) 0 10%,rgba(195,219,232,.36) 30%,transparent 58%),
    radial-gradient(ellipse at 58% 82%,rgba(255,255,255,.96) 0 12%,rgba(214,205,228,.30) 32%,transparent 58%),
    linear-gradient(118deg,transparent 20%,rgba(255,255,255,.82) 42%,rgba(188,200,209,.28) 50%,rgba(255,255,255,.88) 59%,transparent 78%);
  filter:blur(30px) saturate(78%);
  opacity:.88;animation:auroraFlow 9s ease-in-out infinite alternate;
}
@keyframes auroraSpin{to{transform:rotate(360deg) scale(1.08)}}
@keyframes auroraFlow{
  0%{transform:translate3d(-3%,-2%,0) scale(1.02) rotate(-2deg)}
  50%{transform:translate3d(4%,1%,0) scale(1.12) rotate(3deg)}
  100%{transform:translate3d(-1%,4%,0) scale(1.06) rotate(-1deg)}
}
/* 像素方块粒子 */
.pixel-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.px{position:absolute;border-radius:50%;opacity:0;box-shadow:0 0 10px rgba(255,255,255,.98),0 0 20px rgba(155,174,188,.20);animation:pixelDrift linear infinite}
.px1{width:5px;height:5px;background:#f8fafb;top:82%;left:10%;animation-duration:15s;animation-delay:0s}
.px2{width:3px;height:3px;background:#c8d0d5;top:75%;left:25%;animation-duration:18s;animation-delay:-2s}
.px3{width:6px;height:6px;background:#e6eaed;top:88%;left:42%;animation-duration:13s;animation-delay:-5s}
.px4{width:4px;height:4px;background:#b8c1c7;top:80%;left:58%;animation-duration:16s;animation-delay:-8s}
.px5{width:3px;height:3px;background:#ffffff;top:85%;left:72%;animation-duration:14s;animation-delay:-3s}
.px6{width:5px;height:5px;background:#d4dade;top:90%;left:88%;animation-duration:17s;animation-delay:-6s}
.px7{width:4px;height:4px;background:#aeb9c0;top:78%;left:35%;animation-duration:19s;animation-delay:-11s}
.px8{width:6px;height:6px;background:#f2f4f5;top:86%;left:52%;animation-duration:12s;animation-delay:-4s}
.px9{width:3px;height:3px;background:#c3ccd1;top:72%;left:68%;animation-duration:20s;animation-delay:-9s}
.px10{width:5px;height:5px;background:#e9edef;top:92%;left:15%;animation-duration:15s;animation-delay:-7s}
.px11{width:4px;height:4px;background:#b2bdc3;top:76%;left:80%;animation-duration:14s;animation-delay:-1s}
.px12{width:3px;height:3px;background:#fafbfc;top:70%;left:48%;animation-duration:22s;animation-delay:-10s}
.px13{width:6px;height:6px;background:#d0d7db;top:88%;left:28%;animation-duration:16s;animation-delay:-13s}
.px14{width:4px;height:4px;background:#a7b3ba;top:84%;left:62%;animation-duration:18s;animation-delay:-14s}
.px15{width:5px;height:5px;background:#f5f7f8;top:94%;left:78%;animation-duration:13s;animation-delay:-12s}
.px16{width:3px;height:3px;background:#c5cdd2;top:68%;left:8%;animation-duration:21s;animation-delay:-15s}
.px17{width:4px;height:4px;background:#dde2e5;top:80%;left:92%;animation-duration:17s;animation-delay:-3s}
.px18{width:5px;height:5px;background:#b9c3c9;top:90%;left:40%;animation-duration:19s;animation-delay:-8s}

@keyframes pixelDrift{
  0%{transform:translate3d(0,18px,0) rotate(0deg) scale(.55);opacity:0}
  8%{opacity:.55}
  28%{transform:translate3d(18px,-32px,0) rotate(55deg) scale(1.2);opacity:.72}
  52%{transform:translate3d(-14px,-82px,0) rotate(130deg) scale(.85);opacity:.60}
  76%{transform:translate3d(22px,-132px,0) rotate(220deg) scale(1.35);opacity:.34}
  100%{transform:translate3d(-8px,-190px,0) rotate(320deg) scale(.45);opacity:0}
}

.loading b,.loading .sub,.loading .drawing-loader,.loading .generation-progress{
  position:relative;z-index:3;
}
.loading b{font-size:14.5px;font-weight:650;color:var(--text);text-shadow:0 1px 12px rgba(255,255,255,.95)}
.loading .sub{font-size:12px;color:var(--text-mid);text-shadow:0 1px 10px rgba(255,255,255,.9)}
.loading .drawing-loader{filter:drop-shadow(0 8px 18px rgba(91,91,170,.15))}

.drawing-loader{width:88px;height:64px;stroke:#5c6463;stroke-width:1.6;fill:none}
.drawing-sheet{stroke:#c0c8c4}
.drawing-line{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 2.4s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
.drawing-pencil{animation:pencil 2.4s ease-in-out infinite;transform-origin:center}
@keyframes pencil{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(3px,-2px) rotate(-2deg)}}
.generation-progress{width:min(460px,72vw);display:flex;flex-direction:column;gap:8px}
.progress-track{
  position:relative;height:22px;
  background:rgba(70,82,80,.10);
  border:1px solid rgba(70,82,80,.10);
  border-radius:99px;overflow:hidden;
}
.progress-bar{
  height:100%;background:linear-gradient(90deg,#4d5654,#697370);
  width:0%;border-radius:99px;transition:width .4s;
}
.progress-label{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:650;color:#fff;
  text-shadow:0 1px 3px rgba(20,26,25,.88),0 0 2px rgba(20,26,25,.55);
  pointer-events:none;
}
.result-image{
  display:none;
  position:absolute;inset:16px;
  align-items:center;justify-content:center;
  overflow:hidden;
  background:#f4f6f5;
  border-radius:14px;
}
.result-image::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(255,255,255,.36);
  pointer-events:none;
}
.result-image .result-backdrop{
  position:absolute;inset:-5%;
  width:110%;height:110%;
  object-fit:cover;
  filter:blur(22px) saturate(.72);
  opacity:.42;
  transform:scale(1.08);
  pointer-events:none;
}
.result-image .result-foreground{
  position:relative;z-index:2;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  cursor:zoom-in;
  filter:drop-shadow(0 8px 22px rgba(35,45,43,.10));
}
.result-image .result-foreground:focus-visible{
  outline:2px solid rgba(52,58,57,.55);outline-offset:-3px;
}
.image-actions{
  position:absolute;bottom:32px;right:32px;z-index:4;
  display:none;gap:8px;
}
.image-actions .icon-btn{
  height:38px;padding:0 16px;border-radius:11px;
  background:rgba(30,35,35,.78);color:#fff;
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:550;
  transition:.15s;border:none;
}
.image-actions .icon-btn:hover{background:rgba(30,35,35,.92)}

/* ===== 输入卡片 ===== */
.composer{
  background:var(--panel-strong);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 #fff;
  padding:18px 20px 10px;
  display:flex;flex-direction:column;gap:10px;
  position:relative;
}
.composer::before{
  content:"";position:absolute;top:0;left:20px;right:20px;height:1px;
  background:rgba(255,255,255,.92);
  pointer-events:none;
}
.ref-row{display:none;flex-wrap:wrap;gap:8px;padding-bottom:4px}
.ref-row.has-refs{display:flex}
.ref-thumb{
  position:relative;width:52px;height:52px;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--border-soft);
}
.ref-thumb img{width:100%;height:100%;object-fit:cover}
.ref-thumb .ref-remove{
  position:absolute;top:2px;right:2px;
  width:18px;height:18px;border-radius:6px;
  background:rgba(20,25,25,.7);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
}
.ref-add{
  width:52px;height:52px;border-radius:10px;
  border:1.5px dashed rgba(40,50,48,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:.15s;
}
.ref-add:hover{border-color:rgba(40,50,48,.34);color:var(--text-mid)}
.composer-input{
  width:100%;min-height:64px;max-height:200px;
  border:none;outline:none;background:transparent;
  resize:none;font-size:14.5px;line-height:1.6;
  color:var(--text);
}
.composer-input::placeholder{color:var(--text-dim)}
.composer-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 0 4px;border-top:1px solid var(--border-soft);
  position:relative;top:0;
}
.bar-btn{
  height:34px;padding:0 11px;border-radius:9px;
  display:flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:550;color:var(--text-mid);
  transition:.15s;white-space:nowrap;
}
.bar-btn:hover{background:linear-gradient(180deg,#fff,#e8ecef);box-shadow:inset 0 0 0 1px var(--border-soft),0 2px 5px rgba(62,72,78,.07);color:var(--text)}
.bar-btn.active{background:linear-gradient(180deg,#e9edef,#dfe4e7);box-shadow:inset 0 1px 2px rgba(72,82,88,.10),inset 0 0 0 1px #d0d6da;color:var(--text)}
.bar-btn svg{width:14px;height:14px}
.ref-upload-btn{
  width:36px;padding:0;
  justify-content:center;
  color:#41494d;
  background:linear-gradient(180deg,#fff,#e8ecef);
  box-shadow:inset 0 0 0 1px #cfd6da,inset 0 1px 0 #fff;
}
.ref-upload-btn svg{width:19px;height:19px;stroke-width:1.9}
.ref-upload-btn .ref-plus{stroke-width:2.4}
.ref-upload-btn:hover{color:#1f2528;background:linear-gradient(180deg,#fff,#dfe5e8);box-shadow:inset 0 0 0 1px #b8c2c7,0 3px 8px rgba(62,72,78,.10)}
.clear-prompt-btn{width:34px;padding:0;justify-content:center;color:var(--text-dim)}
.clear-prompt-btn svg{width:16px;height:16px}
.clear-prompt-btn:hover{color:#a34848;background:rgba(185,79,79,.09);box-shadow:inset 0 0 0 1px rgba(185,79,79,.16)}
.bar-btn .btn-value{font-weight:650;color:var(--text)}
.bar-spacer{flex:1}
/* ===== 生成按钮 ===== */
.send-btn{
  width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;
  background:#252a2e;color:#fff;border:1px solid #252a2e;box-shadow:none;
  font-size:11px;font-weight:600;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;flex:0 0 34px;gap:0;
}
.send-btn svg{width:15px;height:15px}
.send-btn:hover{background:#111518;box-shadow:none;transform:none}
.send-btn.cancel{background:linear-gradient(180deg,#b95d5d,#8f3f3f);border:0;letter-spacing:.2px}
.send-btn.cancel:hover{background:linear-gradient(180deg,#c86b6b,#823737)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.char-counter{
  font-size:11px;color:var(--text-dim);
  margin-right:6px;
}

/* ===== 底部布局 ===== */
.bottom-area{
  display:flex;gap:20px;align-items:stretch;flex-shrink:0;
}
.bottom-area > .composer{
  flex:1;min-width:0;
}
/* ===== 弹层 ===== */
.composer-bar{position:relative}
.bar-btn-wrap{position:relative;display:flex}
.pop{
  position:absolute;bottom:calc(100% + 7px);left:0;
  min-width:220px;max-width:350px;padding:14px;
  display:none;z-index:50;
  background:#fff;border:1px solid var(--border);border-radius:13px;
  box-shadow:0 10px 28px rgba(33,39,43,.10);
}
.pop.open{display:block;animation:popIn .16s ease}
@keyframes popIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pop-title{
  font-size:10px;font-weight:600;color:var(--text-dim);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:10px;padding:0 4px;
}
.pop-list{display:flex;flex-direction:column;gap:2px}
.pop-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:9px;
  font-size:13px;color:var(--text-mid);
  cursor:pointer;text-align:left;
  transition:background-color .14s,border-color .14s,color .14s,opacity .14s;
}
.pop-item:hover{background:#f1f3f4;color:var(--text);box-shadow:none}
.pop-item.active{background:#eceff1;color:var(--text);box-shadow:none;font-weight:580}
.pop-item .check{
  margin-left:auto;opacity:0;color:var(--accent);
  font-size:13px;font-weight:700;
}
.pop-item.active .check{opacity:1}
.pop-item svg{width:16px;height:16px;flex-shrink:0}

/* 比例弹层 */
.ratio-pop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.model-ratio-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.model-ratio-grid .ratio-pop-item{min-height:56px;padding:7px 3px}
.ratio-pop-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 6px;border-radius:10px;
  font-size:11.5px;color:var(--text-mid);
  cursor:pointer;transition:background-color .14s,border-color .14s,color .14s,opacity .14s;
}
.ratio-pop-item:hover{background:#f1f3f4;color:var(--text);box-shadow:none}
.ratio-pop-item.active{background:#eceff1;color:var(--text);box-shadow:none;font-weight:600}
.ratio-pop-item .ratio-icon{
  background:currentColor;opacity:.55;border-radius:2px;
}

/* 更多参数弹层（MJ） */
.more-pop{
  min-width:320px;max-width:380px;
  max-height:70vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#d4d8db transparent;
}
.more-section{margin-bottom:14px}
.more-section:last-child{margin-bottom:0}
.more-label{
  font-size:11.5px;font-weight:600;color:var(--text-mid);
  margin-bottom:7px;display:flex;justify-content:space-between;align-items:baseline;
}
.more-label .val{color:var(--text-dim);font-weight:500}
.btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.btn-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.btn-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.opt-btn{
  height:32px;border-radius:9px;
  background:#f7f8f9;border:1px solid var(--border);box-shadow:none;
  font-size:12px;color:var(--text-mid);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:background-color .14s,border-color .14s,color .14s,opacity .14s;
}
.opt-btn small{font-size:10px;color:var(--text-dim);margin-top:1px}
.opt-btn:hover{background:#f7f8f9;border-color:var(--border)}
.opt-btn.active{background:#252a2e;color:#fff;border-color:#252a2e;box-shadow:none}
.opt-btn.active small{color:rgba(255,255,255,.7)}
.slider-row{display:flex;align-items:center;gap:10px}
.slider-row input[type=range]{flex:1;accent-color:var(--accent)}
.slider-val{
  min-width:36px;text-align:right;
  font-size:12px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.pop input[type=text],.pop input[type=number]{
  width:100%;height:32px;padding:0 10px;
  border-radius:9px;border:1px solid var(--border);
  background:#fff;box-shadow:none;
  font-size:12.5px;outline:none;
}
.pop input[type=text]:focus,.pop input[type=number]:focus{
  border-color:#9ea7ad;background:#fff;
  box-shadow:0 0 0 3px rgba(70,79,85,.08);
}

/* 错误提示 */
.error-msg{
  display:none;
  padding:9px 12px;border-radius:10px;
  background:rgba(220,80,80,.1);
  color:#c14a4a;font-size:12.5px;
  margin-bottom:8px;
}
.error-msg.show{display:block}

/* ===== 弹窗（接口设置）===== */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(42,49,53,.38);
  display:none;align-items:center;justify-content:center;
  z-index:100;padding:20px;
}
.modal-backdrop.open{display:flex}
.modal{
  width:min(480px,100%);padding:22px;position:relative;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(33,39,43,.16);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.modal-head h2{font-size:16px;font-weight:650}
.modal-head .close{
  width:30px;height:30px;border-radius:9px;
  font-size:20px;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
.modal-head .close:hover{background:rgba(0,0,0,.06);color:var(--text)}
.field{margin-bottom:14px}
.field label{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--text-mid);margin-bottom:7px;
}
.key-wrap{position:relative}
.key-wrap input{
  width:100%;height:40px;padding:0 90px 0 14px;
  border-radius:11px;border:1px solid var(--border);
  background:#fff;box-shadow:none;
  font-size:13.5px;outline:none;
}
.key-wrap input:focus{border-color:#9ea7ad;background:#fff;box-shadow:0 0 0 3px rgba(70,79,85,.08)}
.key-actions{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;gap:4px;
}
.key-actions .mini{
  height:28px;padding:0 10px;border-radius:8px;
  font-size:11.5px;color:var(--text-mid);
  background:rgba(0,0,0,.05);
}
.key-actions .mini:hover{background:rgba(0,0,0,.09);color:var(--text)}
.helper{font-size:11.5px;color:var(--text-dim);margin-top:7px;line-height:1.5}
.helper a{color:var(--text-mid);text-decoration:underline}
.notice{
  font-size:12px;color:#6f6756;
  padding:10px 12px;border-radius:10px;
  background:#f5f1e7;
  margin:14px 0;
}
.settings-recharge-link{
  min-height:42px;padding:0 13px;border:1px solid var(--border-soft);border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#f4f6f7;color:var(--text);font-size:12px;font-weight:580;text-decoration:none;
  transition:background-color .14s,border-color .14s,color .14s;
}
.settings-recharge-link > span{display:flex;align-items:center;gap:8px}
.settings-recharge-link svg{width:16px;height:16px;flex-shrink:0}
.settings-recharge-link .settings-recharge-arrow{width:15px;height:15px;color:var(--text-dim)}
.settings-recharge-link:hover{background:#eceff1;border-color:var(--border);color:var(--text);text-decoration:none}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.modal-footer button{
  height:36px;padding:0 18px;border-radius:10px;
  font-size:13px;font-weight:580;
  transition:background-color .14s,border-color .14s,color .14s,opacity .14s;
}
.modal-footer .secondary{background:#fff;border:1px solid var(--border);box-shadow:none;color:var(--text-mid)}
.modal-footer .secondary:hover{background:#f1f3f4;border-color:var(--border)}
.modal-footer .primary{background:#252a2e;border:1px solid #252a2e;box-shadow:none;color:#fff}
.modal-footer .primary:hover{background:#111518}

/* 价格参考弹窗 */
.price-modal{max-width:400px}
.price-list{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px}
.price-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:12px;
  background:#f8f9f9;border:1px solid var(--border-soft);box-shadow:none;
}
.price-name{display:flex;align-items:center;gap:10px;color:var(--text)}
.price-name svg{width:18px;height:18px;color:var(--text-mid);flex-shrink:0}
.price-name b{font-size:13.5px;font-weight:600;display:block;line-height:1.2}
.price-name span{font-size:11px;color:var(--text-dim);display:block;margin-top:2px}
.price-value{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap}
.price-value small{font-size:11px;font-weight:500;color:var(--text-dim);margin-left:2px}
.price-note{
  font-size:11.5px;color:var(--text-dim);line-height:1.6;
  padding-top:8px;border-top:1px solid var(--border-soft);
}
.price-rate{
  font-size:12px;color:var(--text-mid);margin-bottom:4px;
}
.price-rate b{color:var(--text);font-weight:650}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(30,35,35,.92);color:#fff;
  padding:11px 20px;border-radius:12px;
  font-size:13px;
  opacity:0;pointer-events:none;
  transition:.25s;
  z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 移动端 ===== */
@media(max-width:820px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    box-shadow:0 0 60px rgba(0,0,0,.15);
  }
  .main{padding:12px;gap:12px}
  .composer{padding:12px}
  .bar-btn{padding:0 8px;font-size:12px}
  .bar-btn .btn-label{display:none}
  .bottom-area{flex-direction:column;gap:12px}
  .result-image{inset:10px;border-radius:12px}
  .image-actions{bottom:22px;right:22px}
  .result-image .result-backdrop{filter:blur(14px) saturate(.68);opacity:.34}
}