:root{
  --ink:#070b14; --card:rgba(255,255,255,.055); --line:rgba(255,255,255,.12);
  --txt:#fff; --dim:rgba(255,255,255,.62); --blue:#2e92ff; --blue2:#0f62d6;
  --orange:#ff7a2f; --red:#ff6b5e; --amber:#ffc46b; --green:#7ee0a1;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--txt); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 60% at 50% 0%,rgba(46,146,255,.14),transparent 70%);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
.hidden{display:none !important}
a{color:var(--blue)}

.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:rgba(7,11,20,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top-logo{width:28px;height:28px;border-radius:8px}
.top-t{font-size:16px;font-weight:650;letter-spacing:.3px}
.top-sp{flex:1}
.top-btn{
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:9px; padding:7px 13px; font-size:13px; min-height:40px; min-width:60px; cursor:pointer;
}
main{max-width:640px;margin:0 auto;padding:14px 14px 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; margin-bottom:12px; min-width:0;
}
.card-t{font-size:14px;font-weight:650;margin:0 0 10px;display:block}
.sub{font-size:11px;color:var(--dim);font-weight:400;margin-left:4px}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.row-head .card-t{margin:0}
.row-head label{font-size:12px;color:var(--dim);margin:0}
.mini{
  background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:8px;padding:5px 11px;font-size:12px;min-height:36px;cursor:pointer;white-space:nowrap;
}
.mini:active{background:rgba(255,255,255,.1)}

.inp,.ta{
  width:100%; background:rgba(0,0,0,.32); color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-size:16px; font-family:inherit; outline:none; min-height:44px;
}
.inp:focus,.ta:focus{border-color:var(--blue)}
.ta{resize:vertical;min-height:100px;line-height:1.6}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9aa 50%),linear-gradient(135deg,#9aa 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
input[type=number].inp{appearance:textfield}
.field{margin-bottom:12px;min-width:0}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.grid2 .field{margin:0}
.hint{font-size:11.5px;color:var(--dim);margin-top:5px;line-height:1.5;word-break:break-word}
.hint.dim{color:rgba(255,255,255,.45)}
/* 生成读秒 */
.tick{font-variant-numeric:tabular-nums;color:#cfe4ff}
/* 图片加载失败时给可操作提示，避免一片空白 */
.img-fail{display:block;padding:18px 10px;text-align:center;font-size:12px;color:#ffc48a;line-height:1.6}
.small-label{display:block;font-size:12px;color:var(--dim);margin:12px 0 5px}
.char-line{text-align:right;font-size:11px;color:rgba(255,255,255,.4);margin-top:4px}

.hist{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.hist-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hist-item:last-child{border-bottom:0}
.hist-txt{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;min-width:0}
.hist-x{background:none;border:0;color:var(--dim);font-size:17px;width:40px;height:40px;cursor:pointer;flex:none}
.hist-empty{font-size:12px;color:var(--dim);padding:6px 0}

.refbtn{
  width:100%;min-height:44px;cursor:pointer;
  background:rgba(46,146,255,.10); border:1px solid rgba(46,146,255,.35);
  color:#cfe4ff; border-radius:10px; font-size:14px; padding:8px 10px;
}
.refbtn span{font-size:11px;color:var(--dim);margin-left:4px}
.refbtn:active{background:rgba(46,146,255,.24)}
.thumbs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.thumb{position:relative;width:66px;height:66px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:#000}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb b{position:absolute;top:0;right:0;width:24px;height:24px;line-height:23px;text-align:center;
  background:rgba(0,0,0,.7);color:#fff;font-size:15px;cursor:pointer;border-radius:0 0 0 8px}

.go{
  width:100%;min-height:52px;border:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(135deg,#ff9a4d,var(--orange));color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.5px;margin:2px 0 10px;
}
.go:active{filter:brightness(.9)}
.go:disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed}
.msg{font-size:12.5px;min-height:18px;margin-bottom:10px;color:var(--dim)}
.msg.ok{color:var(--green)}.msg.err{color:var(--red)}

.task{border:1px solid var(--line);border-radius:11px;padding:10px;margin-bottom:9px;background:rgba(0,0,0,.18)}
.task:last-child{margin-bottom:0}
.task-h{display:flex;align-items:center;gap:8px}
.task-p{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.b-running{background:rgba(46,146,255,.2);color:#9ccbff}
.b-ok{background:rgba(126,224,161,.18);color:var(--green)}
.b-fail{background:rgba(255,107,94,.18);color:var(--red)}
.task-meta{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.6;word-break:break-all}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:9px}
.shots.one{grid-template-columns:1fr}
.shots a{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#000;min-height:44px}
.shots img{width:100%;height:auto;display:block}
.task-acts{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.task-acts a,.task-acts button{
  font-size:12px;padding:8px 12px;min-height:40px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--txt);text-decoration:none;
}
.empty{font-size:12.5px;color:var(--dim);text-align:center;padding:14px 0}

.tip{border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.55;margin-bottom:12px}
.tip.amber{background:rgba(255,196,107,.10);border:1px solid rgba(255,196,107,.38);color:#ffdca6}
.foot{font-size:11px;color:rgba(255,255,255,.38);text-align:center;line-height:1.7;padding:14px 8px 4px}

/* 设置面板 */
.btn-primary{
  flex:1;min-height:46px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:15px;font-weight:650;
}
.btn-ghost{
  width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:transparent;color:var(--dim);font-size:14px;margin-top:10px;
}
.btn-row{display:flex;gap:9px;margin-top:12px}
.btn-row .btn-ghost{flex:0 0 90px;margin-top:0}
.key-row{display:flex;gap:8px;align-items:stretch}
.key-row .inp{flex:1;min-width:0}
.eye{flex:none;min-width:56px;min-height:44px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--dim);font-size:12px;cursor:pointer}
.key-get{
  display:block;margin-top:10px;min-height:44px;padding:10px 12px;line-height:24px;
  border:1px solid rgba(46,146,255,.42);border-radius:10px;
  background:rgba(46,146,255,.10);color:#cfe4ff;
  font-size:14px;text-align:center;text-decoration:none;
}
.key-get:active{background:rgba(46,146,255,.24)}
.link-row{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.link-row a{flex:1;min-width:88px;min-height:40px;line-height:40px;text-align:center;
  border:1px solid var(--line);border-radius:9px;text-decoration:none;font-size:12.5px}
.mask{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:#111826;
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));
  max-width:640px;margin:0 auto;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:650;margin-bottom:16px}
.sheet-body .btn-ghost{margin-top:10px}
.sep{height:1px;background:var(--line);margin:18px 0 12px}

.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:80;background:rgba(20,26,38,.96);border:1px solid var(--line);
  padding:10px 16px;border-radius:10px;font-size:13px;max-width:86%;text-align:center;
}

/* 窄屏兜底：<=360px 时宽高输入改单列，避免数字被挤断 */
@media (max-width:360px){
  .grid2{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  main{padding-left:10px;padding-right:10px}
}

/* 生成结果大图预览：手机端保持原单列体验，只有宽屏两栏布局才出现 */
.preview-card,.foot-desktop{display:none}
.pv-box{min-height:88px}
.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pv-grid.one{grid-template-columns:minmax(0,1fr);max-width:760px}
.pv-item{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:rgba(0,0,0,.22)}
.pv-item > a{display:block;background:#000;text-decoration:none}
.pv-item img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.pv-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;font-size:12px;color:var(--dim)}
.pv-cap a{color:#cfe4ff;text-decoration:none;min-height:32px;line-height:32px;
  padding:0 10px;border:1px solid var(--line);border-radius:8px}

/* ===== 电脑横屏：左侧参数 / 右侧生成图 + 记录（>=1000px） =====
   手机与平板的规则一律不改，DOM 顺序与手机端完全一致。 */
@media (min-width:1000px){
  .top{padding:11px 24px}
  main{max-width:1560px;padding:18px 24px 0}
  .cols{
    display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);
    gap:20px;align-items:start;
  }
  .col-left,.col-right{min-width:0}
  /* 参考图加满时左栏自己滚动，生成按钮固定成底部操作条，始终够得着 */
  .col-left{
    position:sticky;top:70px;
    max-height:calc(100vh - 150px);overflow-y:auto;padding-right:3px;
  }
  .card{padding:8px;margin-bottom:8px}
  .card-t{margin-bottom:7px}
  .row-head{margin-bottom:5px}
  .inp,.ta{font-size:14px;min-height:40px;padding:8px 10px}
  .ta{height:64px;min-height:64px}
  select.inp{padding-right:28px}
  .field{margin-bottom:5px}
  .grid2{margin-bottom:5px}
  .hint{margin-top:3px;font-size:11px}
  .go{min-height:44px;margin:0 0 6px}
  .msg{margin-bottom:0}
  .col-actions{
    position:sticky;bottom:-1px;z-index:4;
    background:var(--ink);border-top:1px solid var(--line);
    padding:8px 0 2px;margin-top:2px;
    box-shadow:0 -10px 16px rgba(7,11,20,.94);
  }
  .col-actions .btn-ghost{margin-top:0}
  .col-right .card{margin-bottom:14px}
  .pv-box{min-height:220px}

  .preview-card{display:block}
  .foot-mobile{display:none}
  .foot-desktop{display:inline}
  .foot{text-align:left;padding:16px 2px 8px}

  /* 图统一在右侧预览区，列表只留参数与下载，避免同一张图重复出现 */
  .task{cursor:pointer}
  .task:hover{border-color:rgba(255,255,255,.28)}
  .task.is-active{border-color:rgba(46,146,255,.65);background:rgba(46,146,255,.08)}
  .task .shots{display:none}
  .task-acts{margin-top:7px}

  /* 设置改为居中弹窗，不再从屏幕底部升起 */
  .sheet{
    left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:460px;max-width:92vw;max-height:86vh;margin:0;
    border:1px solid var(--line);border-radius:16px;
    padding:18px 20px;
  }
}

/* 矮屏电脑（高度 <=820px）：左栏不吸顶，整页自然滚动，保证底部按钮可达 */
@media (min-width:1000px) and (max-height:820px){
  .col-left{position:static}
}

/* ===== 参考图：10 张 / 拖拽＋按钮排序 / 单图编辑 ===== */
.refs-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
  margin-top:10px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;
}
.ref-item{min-width:0;padding:4px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.18)}
.ref-item.drag-over{border-color:var(--blue);background:rgba(46,146,255,.18)}
.ref-pic{position:relative;width:100%;aspect-ratio:1;border-radius:7px;overflow:hidden;background:#000;cursor:pointer}
.ref-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ref-num{position:absolute;left:0;top:0;padding:1px 6px;border-radius:0 0 6px 0;
  background:rgba(0,0,0,.72);color:#fff;font-size:11px}
.ref-del{position:absolute;right:0;top:0;width:26px;height:26px;line-height:25px;text-align:center;
  background:rgba(0,0,0,.72);color:#fff;font-size:16px;cursor:pointer;border-radius:0 0 0 7px}
.ref-item.is-src{border-color:rgba(46,146,255,.8);box-shadow:0 0 0 1px rgba(46,146,255,.35)}
.ref-ops{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.ref-ops button{
  flex:1;min-width:0;min-height:44px;padding:0;border:1px solid var(--line);border-radius:7px;
  background:transparent;color:var(--dim);font-size:14px;cursor:pointer;
}
.ref-ops .ref-src{
  flex:1 1 100%;font-size:11px;letter-spacing:0;
  color:#cfe4ff;border-color:rgba(46,146,255,.4);background:rgba(46,146,255,.08);
}
.ref-item.is-src .ref-src{color:#fff;border-color:var(--blue);background:rgba(46,146,255,.3)}
.ref-ops button:active{background:rgba(255,255,255,.1)}
.ref-ops button:disabled{opacity:.35;cursor:default}

/* 单图编辑弹层（复用 .sheet：手机底部抽屉 / 宽屏居中卡片）
   三层：img 底图 + #ref-canvas 标注层 + #ref-overlay 拖拽预览层 */
.ref-edit-pv{position:relative;display:flex;align-items:center;justify-content:center;
  max-height:300px;min-height:80px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#000}
#ref-edit-img{display:block;max-width:100%;max-height:300px;object-fit:contain}
#ref-canvas,#ref-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;max-width:100%}
#ref-canvas{pointer-events:auto;touch-action:none;cursor:crosshair}
#ref-overlay{pointer-events:none}
.ref-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.ref-tools button{min-height:44px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--txt);font-size:12px;cursor:pointer}
.ref-tools button.on{border-color:var(--blue);background:rgba(46,146,255,.28);color:#fff}
.ref-tool-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ref-tool-opts label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
#ref-color{width:44px;height:44px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:transparent;cursor:pointer}
#ref-size{width:auto;min-width:78px;min-height:44px;font-size:12px;padding:6px 8px}
#btn-ref-undo{min-height:44px;margin-top:0;padding:0 12px;font-size:12px}
.ref-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ref-edit-grid button{min-height:44px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--txt);font-size:13px;cursor:pointer}
.ref-edit-grid button:active{background:rgba(255,255,255,.16)}
#btn-apply-crop{width:100%;margin-top:10px}

@media (min-width:1000px){
  /* 加满 10 张时缩略图区自己滚动，左栏高度不失控，生成按钮仍在首屏 */
  /* 每张图两行操作按钮（排序 + 设为尺寸），高度放到能完整显示一整行卡片 */
  .refs-grid{max-height:205px}
  #ref-editor{width:520px}
}