* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- 主题变量（右上角「🎨 配色」按钮切换） ---------- */
body {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #16244d 0%, #0b1020 55%, #080b16 100%);
  --panel-bg: rgba(22, 30, 56, .72);
  --panel-border: rgba(120, 140, 255, .18);
  --accent: #7cc4ff; --accent2: #8b5cf6; --accent3: #d946ef;
}
body.t-purple {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #2a1660 0%, #170c38 55%, #0d0722 100%);
  --panel-bg: linear-gradient(150deg, rgba(66, 40, 120, .85) 0%, rgba(38, 22, 72, .82) 55%, rgba(26, 14, 52, .88) 100%);
  --panel-border: rgba(170, 140, 255, .26);
  --accent: #d8c7ff; --accent2: #6d28d9; --accent3: #a21caf;
}
body.t-teal {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #0b3a44 0%, #062229 55%, #031317 100%);
  --panel-bg: linear-gradient(150deg, rgba(20, 74, 84, .85) 0%, rgba(10, 52, 62, .82) 55%, rgba(6, 36, 44, .88) 100%);
  --panel-border: rgba(100, 230, 220, .26);
  --accent: #8ef5e2; --accent2: #0f766e; --accent3: #0369a1;
}
body.t-warm {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #46200c 0%, #291206 55%, #170a03 100%);
  --panel-bg: linear-gradient(150deg, rgba(88, 44, 18, .85) 0%, rgba(62, 30, 12, .82) 55%, rgba(44, 20, 8, .88) 100%);
  --panel-border: rgba(255, 170, 110, .28);
  --accent: #ffc896; --accent2: #c2410c; --accent3: #be123c;
}
body.t-dark {
  --page-bg: linear-gradient(180deg, #0e1015 0%, #090a0e 100%);
  --panel-bg: linear-gradient(150deg, rgba(34, 38, 48, .85) 0%, rgba(22, 25, 32, .85) 55%, rgba(14, 16, 21, .9) 100%);
  --panel-border: rgba(150, 160, 190, .2);
  --accent: #b6c6e4; --accent2: #445782; --accent3: #7e5bc2;
}
body.t-rose {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #4a0e1e 0%, #260712 55%, #16040b 100%);
  --panel-bg: linear-gradient(150deg, rgba(92, 22, 46, .85) 0%, rgba(60, 14, 32, .82) 55%, rgba(42, 9, 22, .88) 100%);
  --panel-border: rgba(255, 140, 170, .28);
  --accent: #ffc2cb; --accent2: #be123c; --accent3: #db2777;
}
body.t-green {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #0d3a1e 0%, #072415 55%, #04150c 100%);
  --panel-bg: linear-gradient(150deg, rgba(20, 72, 40, .85) 0%, rgba(11, 48, 27, .82) 55%, rgba(7, 33, 19, .88) 100%);
  --panel-border: rgba(110, 230, 160, .26);
  --accent: #a7f3bf; --accent2: #166534; --accent3: #4d7c0f;
}
body.t-gold {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #3a2c08 0%, #20180a 55%, #140e05 100%);
  --panel-bg: linear-gradient(150deg, rgba(80, 62, 18, .85) 0%, rgba(52, 40, 11, .82) 55%, rgba(36, 27, 7, .88) 100%);
  --panel-border: rgba(230, 200, 110, .28);
  --accent: #ffe57a; --accent2: #92400e; --accent3: #c2410c;
}
body.t-indigo {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #1e1b5e 0%, #12102f 55%, #0a091c 100%);
  --panel-bg: linear-gradient(150deg, rgba(52, 48, 120, .85) 0%, rgba(34, 30, 84, .82) 55%, rgba(24, 21, 62, .88) 100%);
  --panel-border: rgba(150, 140, 255, .28);
  --accent: #c3ccff; --accent2: #4f46e5; --accent3: #7c3aed;
}
body.t-sakura {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #4a1030 0%, #2a0819 55%, #180410 100%);
  --panel-bg: linear-gradient(150deg, rgba(88, 24, 60, .85) 0%, rgba(56, 16, 40, .82) 55%, rgba(40, 10, 29, .88) 100%);
  --panel-border: rgba(255, 150, 200, .28);
  --accent: #ffc4e0; --accent2: #be185d; --accent3: #c026d3;
}
body.t-coffee {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #33200f 0%, #1d1209 55%, #110a05 100%);
  --panel-bg: linear-gradient(150deg, rgba(66, 42, 22, .85) 0%, rgba(44, 28, 15, .82) 55%, rgba(31, 19, 10, .88) 100%);
  --panel-border: rgba(210, 160, 110, .26);
  --accent: #f0cf9f; --accent2: #8a4b16; --accent3: #a16207;
}
body.t-sky {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #0a2a4a 0%, #061a30 55%, #030f1c 100%);
  --panel-bg: linear-gradient(150deg, rgba(18, 54, 92, .85) 0%, rgba(10, 40, 70, .82) 55%, rgba(6, 28, 50, .88) 100%);
  --panel-border: rgba(130, 190, 255, .28);
  --accent: #a5ddfc; --accent2: #0369a1; --accent3: #0e7490;
}
body.t-coral {
  --page-bg: radial-gradient(1200px 600px at 20% -10%, #3d0f14 0%, #23080c 55%, #140406 100%);
  --panel-bg: linear-gradient(150deg, rgba(92, 26, 32, .85) 0%, rgba(60, 17, 22, .82) 55%, rgba(43, 11, 15, .88) 100%);
  --panel-border: rgba(255, 150, 140, .28);
  --accent: #ffc0b8; --accent2: #dc2626; --accent3: #c2410c;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--page-bg);
  color: #e8ecf7; min-height: 100vh; padding-bottom: 12px;
}
header { padding: 12px 24px 2px; }
h1 {
  font-size: 22px; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.sub { color: #8b93ad; margin-top: 2px; font-size: 12px; }
.sub .jump { color: var(--accent); text-decoration: none; margin-left: 10px; }
.sub .jump:hover { text-decoration: underline; }

/* 顶部用户信息条（卡密版本/剩余次数/总次数/购卡日期/有效期） */
.userbar {
  display: none; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  margin: 8px 24px 0; padding: 10px 18px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; backdrop-filter: blur(8px); font-size: 13px;
}
.userbar .ub-k { color: #8b93ad; margin-right: 7px; }
.userbar .ub-v { color: #fff; font-weight: bold; }

.wrap { display: flex; gap: 14px; padding: 10px 24px 12px; align-items: flex-start; }
.panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 14px 16px; backdrop-filter: blur(8px);
}
/* 左侧生图参数大框（约占 2/3 宽），右侧出图区约占 1/3 */
.left {
  flex: 2 1 0; min-width: 0; position: sticky; top: 10px;
  max-height: calc(100vh - 22px); overflow-y: auto;
  background: var(--ctrl-bg, var(--panel-bg)); border-color: var(--ctrl-border, var(--panel-border));
}
.main { flex: 1 1 0; min-width: 0; }
.main .panel {
  background: var(--list-bg, var(--panel-bg)); border-color: var(--list-border, var(--panel-border));
}

/* 大板块标题（生图参数） */
.panel-title {
  font-size: 18px; font-weight: bold; color: #fff;
  display: flex; align-items: center; gap: 8px; margin: 2px 0 12px;
}

/* 参数小板块：一个个蓝色小方框，两列排 */
.params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subpanel {
  background: rgba(8, 12, 26, .5); border: 1px solid rgba(120, 140, 255, .26);
  border-radius: 10px; padding: 12px 14px;
}

/* 小板块标题（出图方式 / 画面描述…） */
.label {
  font-size: 15px; font-weight: bold; color: #e6ebff;
  margin: 14px 0 8px; display: flex; align-items: center; gap: 7px;
}
.subpanel .label { margin: 0 0 8px; }

/* 功能页签（全能版） */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tab {
  padding: 8px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
  background: rgba(10, 15, 32, .6); border: 1px solid rgba(120, 140, 255, .22);
  color: #aab2d0; user-select: none; transition: all .15s;
}
.tab:hover { border-color: var(--accent); color: #fff; }
.tab.on {
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  color: #fff; border-color: transparent; font-weight: bold;
}

/* 工作流切换小按钮 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border-radius: 999px; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(120, 140, 255, .3); color: #aab2d0; user-select: none;
  transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: #fff; }
.chip.on { background: linear-gradient(90deg, var(--accent2), var(--accent3)); color: #fff; border-color: transparent; }
.chip .tag {
  font-size: 11px; margin-left: 5px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

/* 图片上传槽 */
.slots { display: flex; gap: 10px; flex-wrap: wrap; }
.slot {
  width: 148px; border: 1px dashed rgba(120, 140, 255, .4); border-radius: 10px;
  padding: 8px; background: rgba(10, 15, 32, .55);
}
.slot-head { font-size: 13px; font-weight: bold; margin-bottom: 3px; }
.slot-head .hint { display: block; font-size: 11px; font-weight: normal; color: #8b93ad; margin-top: 2px; line-height: 1.4; }
.slot-body {
  height: 84px; border-radius: 8px; background: rgba(120, 140, 255, .08);
  display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
}
.slot-body:hover { background: rgba(120, 140, 255, .18); }
.slot-body.dragging { background: rgba(255, 213, 74, .15); box-shadow: inset 0 0 0 2px rgba(255, 213, 74, .55); }
.slot-body.dragging .plus { color: #ffd54a; }
.slot-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot-body .plus { font-size: 26px; color: #6d7695; }
.slot-state { font-size: 11px; color: #8b93ad; margin-top: 4px; text-align: center; line-height: 1.4; }
.slot-state.good { color: #86efac; }
.slot-state.bad { color: #fda4a4; }
.slot-toggle {
  font-size: 12px; font-weight: normal; color: #aab2d0;
  margin-left: 8px; cursor: pointer; user-select: none;
}
.slot-toggle input { accent-color: var(--accent2); cursor: pointer; vertical-align: -2px; }
.slot.off .slot-body { opacity: .35; }
.slot.off .slot-state { color: #6d7695; }

textarea {
  width: 100%; height: 88px; min-height: 88px; resize: vertical; border-radius: 8px;
  border: 1px solid rgba(120, 140, 255, .25); background: rgba(10, 15, 32, .8);
  color: #e8ecf7; padding: 10px 12px; font-size: 14px; line-height: 1.6; outline: none;
}
textarea:focus { border-color: var(--accent); }

.count-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 第一行（出图方式|出图数量|出图清晰度）：选项必须挤在同一行不换行，宽度不够就平均压缩 */
body[data-page]:not(.m-view) .params-grid > .prow:first-child .tabs { flex-wrap: nowrap; }
body[data-page]:not(.m-view) .params-grid > .prow:first-child .tab {
  flex: 1 1 0; min-width: 0; padding: 8px 6px; text-align: center; white-space: nowrap;
}
body[data-page]:not(.m-view) .params-grid > .prow:first-child .count-row { flex-wrap: nowrap; }
body[data-page]:not(.m-view) .params-grid > .prow:first-child .count-row .chip {
  flex: 1 1 0; min-width: 0; padding: 6px 8px; text-align: center; white-space: nowrap;
}
.res-desc { font-size: 12px; color: #8b93ad; margin-top: 6px; line-height: 1.6; }
#resDesc:empty { display: none; }
#countInput {
  width: 64px; padding: 6px 8px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(120, 140, 255, .3); background: rgba(10, 15, 32, .8); color: #fff; outline: none;
}
.btn-start {
  width: 100%; margin-top: 14px; padding: 12px; font-size: 16px; font-weight: bold;
  color: #fff; border: none; border-radius: 10px; cursor: pointer; letter-spacing: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  box-shadow: 0 6px 24px rgba(90, 90, 255, .35); transition: transform .12s, opacity .2s;
}
.btn-start:hover { transform: translateY(-1px); }
.btn-start:disabled { opacity: .5; cursor: not-allowed; }
.note { font-size: 12px; color: #6d7695; margin-top: 10px; line-height: 1.8; }

.section-title { font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card {
  background: rgba(15, 21, 44, .8); border: 1px solid rgba(120, 140, 255, .15);
  border-radius: 10px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.card .imgbox { position: relative; height: 118px; background: rgba(8, 11, 24, .6); cursor: zoom-in; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .meta {
  padding: 6px 8px; font-size: 11px; color: #aab2d0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
/* 缩略图下方的两个下载按钮：高清图 + ZIP包，一行放两个 */
.dl-row { display: flex; gap: 5px; padding: 0 8px 8px; }
.dl-btn {
  flex: 1; text-align: center; font-size: 11px; padding: 4px 2px; border-radius: 999px;
  color: #ffd479; background: rgba(255, 212, 121, .12);
  border: 1px solid rgba(255, 212, 121, .4); text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-btn:hover { background: rgba(255, 212, 121, .25); }
.dl-btn.zip { color: #8fb0ff; background: rgba(122, 162, 255, .12); border-color: rgba(122, 162, 255, .4); }
.dl-btn.zip:hover { background: rgba(122, 162, 255, .25); }
.b-pending     { background: #3a4266; color: #cdd4ee; }
.b-queued      { background: #33507a; color: #9cc6ff; }
.b-running     { background: #1d5c46; color: #7df0c0; }
.b-downloading { background: #1d4c5c; color: #7dd9f0; }
.b-success     { background: #14532d; color: #86efac; }
.b-failed      { background: #5c1d1d; color: #fda4a4; }
.b-canceled    { background: #3a3a3a; color: #bbb; }
.spinner {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: #8b93ad; font-size: 11px;
}
.spinner::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(124, 196, 255, .2); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card .err { padding: 8px; font-size: 11px; color: #fda4a4; line-height: 1.5; word-break: break-all; }
.cancel-x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; border: none; cursor: pointer; font-size: 12px;
  display: none; align-items: center; justify-content: center; z-index: 3;
}
.card.working:hover .cancel-x { display: flex; }
.cancel-btn {
  display: block; width: calc(100% - 16px); margin: 6px 8px 2px; padding: 7px 0;
  border-radius: 8px; border: 1px solid rgba(255, 120, 120, .45); cursor: pointer;
  background: rgba(255, 90, 90, .12); color: #ff9a9a; font-size: 13px; font-weight: 600;
}
.cancel-btn:hover { background: rgba(255, 90, 90, .25); }
.empty { color: #566084; font-size: 13px; padding: 12px 0; text-align: center; }

/* 本次任务单卡通栏（完整平铺展示，不用框内滚动）；历史记录在弹窗里随整页滚动 */
#taskGrid { max-height: none; overflow: visible; grid-template-columns: 1fr; }
#taskGrid, .left { scrollbar-width: thin; scrollbar-color: rgba(124, 196, 255, .35) transparent; }
#taskGrid::-webkit-scrollbar, .left::-webkit-scrollbar { width: 6px; }
#taskGrid::-webkit-scrollbar-thumb, .left::-webkit-scrollbar-thumb {
  background: rgba(124, 196, 255, .3); border-radius: 3px;
}

#lightbox {
  position: fixed; inset: 0; background: rgba(5, 7, 15, .92); display: none;
  align-items: center; justify-content: center; z-index: 50; flex-direction: column; gap: 14px;
}
#lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 10px 60px rgba(0, 0, 0, .8); }
#lightbox .acts { display: flex; gap: 12px; }
#lightbox a, #lightbox button {
  padding: 8px 18px; border-radius: 8px; font-size: 14px; text-decoration: none;
  color: #fff; background: rgba(124, 196, 255, .15); border: 1px solid rgba(124, 196, 255, .4); cursor: pointer;
}
#lightbox a:hover, #lightbox button:hover { background: rgba(124, 196, 255, .3); }
.toolbar { display: flex; gap: 10px; margin-left: auto; }
.mini-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  color: #cdd4ee; background: rgba(124, 196, 255, .12); border: 1px solid rgba(124, 196, 255, .3);
}
.mini-btn:hover { background: rgba(124, 196, 255, .25); color: #fff; }

/* 配色按钮 + 配色弹窗 */
.theme-btn { position: fixed; top: 14px; right: 24px; z-index: 45; }
#themeMask {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; background: rgba(5, 7, 15, .8);
}
#themeMask .modal {
  width: 430px; max-width: 92vw; padding: 24px; border-radius: 16px;
  background: rgba(22, 30, 56, .96); border: 1px solid rgba(120, 140, 255, .3);
}
#themeMask .modal-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
#themeMask .modal-msg { font-size: 13px; color: #aab2d0; margin-bottom: 12px; line-height: 1.7; }
.theme-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.theme-swatch {
  flex: 1 1 62px; text-align: center; padding: 9px 6px 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(120, 140, 255, .25); background: rgba(10, 15, 32, .6);
  font-size: 12px; color: #aab2d0; user-select: none;
}
.theme-swatch span { display: block; height: 26px; border-radius: 6px; margin-bottom: 6px; }
.theme-swatch:hover { border-color: var(--accent); color: #fff; }
.theme-swatch.on { border-color: var(--accent); color: #fff; }
.theme-swatch.sw-default   span { background: linear-gradient(90deg, #16244d, #7cc4ff); }
.theme-swatch.sw-t-purple  span { background: linear-gradient(90deg, #2c1650, #c4a5ff); }
.theme-swatch.sw-t-teal    span { background: linear-gradient(90deg, #0a3a44, #5eead4); }
.theme-swatch.sw-t-warm    span { background: linear-gradient(90deg, #4a2410, #fdba74); }
.theme-swatch.sw-t-dark    span { background: linear-gradient(90deg, #0e1015, #9db2d6); }
.theme-swatch.sw-t-rose    span { background: linear-gradient(90deg, #4a0e1e, #ffc2cb); }
.theme-swatch.sw-t-green   span { background: linear-gradient(90deg, #0d3a1e, #a7f3bf); }
.theme-swatch.sw-t-gold    span { background: linear-gradient(90deg, #3a2c08, #ffe57a); }
.theme-swatch.sw-t-indigo  span { background: linear-gradient(90deg, #1e1b5e, #c3ccff); }
.theme-swatch.sw-t-sakura  span { background: linear-gradient(90deg, #4a1030, #ffc4e0); }
.theme-swatch.sw-t-coffee  span { background: linear-gradient(90deg, #33200f, #f0cf9f); }
.theme-swatch.sw-t-sky     span { background: linear-gradient(90deg, #0a2a4a, #a5ddfc); }
.theme-swatch.sw-t-coral   span { background: linear-gradient(90deg, #3d0f14, #ffc0b8); }
.theme-zone-row { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: #aab2d0; }
.theme-zone-row label { display: flex; align-items: center; gap: 8px; }
.theme-zone-row input[type="color"] {
  width: 46px; height: 30px; padding: 2px; cursor: pointer;
  border: 1px solid rgba(120, 140, 255, .3); border-radius: 6px; background: rgba(10, 15, 32, .8);
}
.theme-reset { color: var(--accent); cursor: pointer; font-size: 12px; }
#themeMask .modal-btns { margin-top: 16px; text-align: right; }
#themeMask .btn-main {
  padding: 9px 26px; border: none; border-radius: 10px; font-size: 15px; font-weight: bold; color: #fff;
  cursor: pointer; background: linear-gradient(90deg, var(--accent2), var(--accent3));
}

/* ---------- 画面比例选项：每个比例下面带一个同形状的小矩形 ---------- */
.asp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.asp-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 10px 7px; border-radius: 10px; cursor: pointer; user-select: none;
  border: 1px solid rgba(120, 140, 255, .3); background: rgba(10, 15, 32, .5);
  transition: all .15s;
}
.asp-opt:hover { border-color: var(--accent); }
.asp-opt.on { background: linear-gradient(135deg, var(--accent2), var(--accent3)); border-color: transparent; }
.asp-shape {
  border: 1.5px solid rgba(232, 236, 247, .8); border-radius: 3px; flex-shrink: 0;
  background: rgba(124, 196, 255, .16);
}
.asp-shape.dash { border-style: dashed; border-color: rgba(170, 178, 208, .55); background: transparent; }
.asp-opt.on .asp-shape { border-color: #fff; background: rgba(255, 255, 255, .28); }
.asp-opt.on .asp-shape.dash { border-color: rgba(255, 255, 255, .75); }
.asp-name { font-size: 12px; color: #aab2d0; line-height: 1; }
.asp-opt.on .asp-name { color: #fff; font-weight: bold; }

/* ---------- 比例自定义 / 自定义清晰度小输入行 ---------- */
.asp-custom {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: #aab2d0; margin-top: 6px;
}
.asp-custom input {
  width: 64px; padding: 5px 8px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(120, 140, 255, .3); background: rgba(10, 15, 32, .8); color: #fff; outline: none;
}
.asp-custom input:focus { border-color: var(--accent); }
.asp-custom span { font-size: 12px; color: #6d7695; }

/* ---------- 图生图参考程度滑条 ---------- */
.slider {
  width: 100%; margin: 6px 0 2px; accent-color: var(--accent2); cursor: pointer; height: 20px;
}
.ref-val { color: #ffd479; font-weight: bold; }
.slider-ends {
  display: flex; justify-content: space-between; font-size: 11px; opacity: .75; margin-top: -2px;
}

/* ---------- 卡密：右上角剩余次数 + 弹窗 ---------- */
#quotaBadge {
  position: fixed; top: 14px; right: 126px; z-index: 40;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #86efac;
  background: rgba(15, 30, 22, .85); border: 1px solid rgba(134, 239, 172, .35);
  backdrop-filter: blur(6px);
}
#quotaBadge a { color: var(--accent); margin-left: 8px; cursor: pointer; text-decoration: none; }
#quotaBadge a:hover { text-decoration: underline; }

#cardMask {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; background: rgba(5, 7, 15, .8);
}
#cardMask .modal {
  width: 360px; max-width: 92vw; padding: 26px; border-radius: 16px;
  background: rgba(22, 30, 56, .95); border: 1px solid rgba(120, 140, 255, .3);
}
#cardMask .modal-title { font-size: 19px; font-weight: bold; margin-bottom: 10px; }
#cardMask .modal-msg { font-size: 13px; color: #aab2d0; margin-bottom: 14px; line-height: 1.7; }
#cardMask input {
  width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 15px; letter-spacing: 1px;
  border: 1px solid rgba(120, 140, 255, .35); background: rgba(10, 15, 32, .85); color: #fff; outline: none;
}
#cardMask input:focus { border-color: var(--accent); }
#cardMask .modal-btns { margin-top: 16px; text-align: right; }
#cardMask .btn-main {
  padding: 9px 26px; border: none; border-radius: 10px; font-size: 15px; font-weight: bold; color: #fff;
  cursor: pointer; background: linear-gradient(90deg, var(--accent2), var(--accent3));
}

/* ---------- 手机版排版（默认按屏幕宽度自动生效；右上角按钮可手动切换电脑版/手机版） ---------- */
body.m-view header { padding: 12px 14px 2px; }
body.m-view .userbar { margin: 8px 14px 0; gap: 6px 16px; padding: 9px 12px; font-size: 12px; }
body.m-view .wrap { flex-direction: column; padding: 10px 14px 12px; }
/* 电脑上预览手机版时，页面收窄成手机宽度居中，效果和真机一致 */
body.m-view header, body.m-view .userbar { max-width: 580px; margin-left: auto; margin-right: auto; }
body.m-view .wrap { max-width: 600px; margin-left: auto; margin-right: auto; width: 100%; }
/* 参数大框不再吸附顶部、不限高，页面自然往下滚 */
body.m-view .left { position: static; max-height: none; overflow: visible; }
/* 任务列表不再限高，避免手机上出现里外两层滚动 */
body.m-view #taskGrid { max-height: none; overflow: visible; }
/* 输入字号≥16px，避免手机上点输入框时页面自动放大 */
body.m-view textarea, body.m-view #countInput, body.m-view .asp-custom input, body.m-view #cardMask input { font-size: 16px; }
body.m-view textarea { height: 80px; min-height: 80px; }
/* 触控目标加大 */
body.m-view .tab, body.m-view .chip { padding: 9px 14px; }
body.m-view .mini-btn { padding: 7px 12px; font-size: 13px; }
body.m-view #countInput { width: 70px; padding: 9px 10px; }
body.m-view .btn-start { padding: 14px; font-size: 17px; }
/* 上传槽：三槽一行放不下时自动换行 */
body.m-view .slot { width: calc(33% - 7px); min-width: 104px; }
body.m-view .slot-body { height: 72px; }
body.m-view .grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
body.m-view #quotaBadge { top: 10px; right: 92px; padding: 6px 10px; font-size: 12px; }
body.m-view .theme-btn { top: 10px; right: 14px; }
body.m-view #lightbox img { max-width: 96vw; max-height: 78vh; }
body.m-view #themeMask .modal { padding: 18px; }
/* 窄屏（或手机版预览）：参数小框改一列，标题略缩 */
body.m-view.narrow .params-grid { grid-template-columns: 1fr; }
body.m-view.narrow .panel-title { font-size: 16px; }
body.m-view.narrow .section-title { font-size: 15px; }
body.m-view.narrow .label { font-size: 14px; }

/* 版本切换按钮（配色按钮下方） */
.view-btn { position: fixed; top: 56px; right: 24px; z-index: 45; }
body.m-view .view-btn { top: 52px; right: 14px; }

/* ---------- 预设一键出图模板小方块（带缩略图位，图以后补） ---------- */
.preset-grid { gap: 10px; }
.preset-tile {
  flex-direction: column; display: flex; align-items: stretch; gap: 5px;
  flex: 1 1 150px; min-width: 138px; max-width: 200px;
  padding: 8px 8px 9px; border-radius: 12px; border: 1px solid rgba(120, 140, 255, .3);
  background: rgba(10, 15, 32, .5);
}
.preset-tile .pt-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  border: 1px dashed rgba(120, 140, 255, .3); background: rgba(8, 12, 26, .55);
  display: flex; align-items: center; justify-content: center;
}
.preset-tile .pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset-tile .pt-ico { font-size: 22px; line-height: 1.1; }
.preset-tile .pt-name { font-size: 13px; color: #cdd4ee; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.preset-tile:hover { border-color: var(--accent); background: rgba(120, 140, 255, .12); }
.preset-tile:hover .pt-name { color: #fff; }
.preset-tile.on {
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  border-color: transparent; box-shadow: 0 4px 18px rgba(120, 90, 255, .35);
}
.preset-tile.on .pt-name { color: #fff; font-weight: bold; }

/* 预设模板搜索框（输入名字关键字即时过滤） */
.preset-search {
  width: 100%; margin-bottom: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid rgba(120, 140, 255, .3); background: rgba(10, 15, 32, .8); color: #fff; outline: none;
}
.preset-search:focus { border-color: var(--accent); }
body.m-view .preset-search { font-size: 16px; padding: 9px 12px; }

/* ---------- 本次任务：每张图（缩略图+高清图按钮）竖排 + 参数明细框 ---------- */
.shot { display: flex; flex-direction: column; gap: 6px; }
.shot .dl-btn { display: block; text-align: center; flex: none; }

/* 缩略图下方按钮行：左边zip下载、右边高清图（多张图时高清图依次排开），文字完整可见 */
.dl-row { display: flex; gap: 8px; margin-top: 8px; }
.dl-row .dl-btn {
  display: block; flex: 1 1 0; min-width: 0; text-align: center;
  font-size: 12px; padding: 7px 6px; white-space: normal; line-height: 1.35;
}

/* 历史记录卡片右上角的删除按钮（只对用户自己隐藏，管理员后台不受影响） */
.card { position: relative; }
.hist-del {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 4px 12px; border-radius: 8px; font-size: 12px; cursor: pointer;
  color: #ffb3b3; background: rgba(30, 10, 14, .72); border: 1px solid rgba(255, 120, 120, .4);
}
.hist-del:hover { background: rgba(120, 30, 40, .85); color: #fff; }
.hist-del:disabled { opacity: .5; cursor: default; }

/* 原图下载格式选择弹窗（jpg/png/tiff，均不改像素尺寸） */
#fmtMask { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .66); z-index: 96;
  align-items: center; justify-content: center; }
#fmtMask .fmt-box { background: #141b31; border: 1px solid rgba(124, 196, 255, .35); border-radius: 14px;
  padding: 18px 20px; width: min(430px, 92vw); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
#fmtMask .fmt-t { font-size: 15px; color: #fff; margin-bottom: 14px; text-align: center; }
#fmtMask .fmt-row { display: flex; gap: 10px; }
#fmtMask .fmt-btn { flex: 1; padding: 12px 6px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: bold;
  color: #fff; background: linear-gradient(135deg, #2b6cff, #8b5cf6); border: none; line-height: 1.4; }
#fmtMask .fmt-btn:hover { filter: brightness(1.15); }
#fmtMask .fmt-btn i { display: block; font-style: normal; font-size: 11px; font-weight: normal; color: #dbe6ff; margin-top: 4px; }
#fmtMask .fmt-tip { font-size: 12px; color: #8b93ad; text-align: center; margin-top: 12px; }
#fmtMask .fmt-cancel { display: block; margin: 12px auto 0; padding: 7px 26px; border-radius: 8px; font-size: 13px;
  cursor: pointer; color: #aab2d0; background: rgba(124, 196, 255, .12); border: 1px solid rgba(124, 196, 255, .3); }
#fmtMask .fmt-cancel:hover { color: #fff; }

/* 本次任务/历史记录：图片完整展示不裁剪（两张并排、一张通栏），不用点开就能看全图 */
.task-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.task-imgs .shot:only-child { grid-column: 1 / -1; }
.task-imgs .imgbox { height: auto; }
.task-imgs .imgbox img { width: 100%; height: auto; object-fit: contain; }
body.m-view .task-imgs { grid-template-columns: 1fr; }
/* 电脑版本次任务：整张卡压进框里——图片区自动等比缩放（不裁剪），zip/高清图按钮和完整参数始终可见，框内不出滚动条 */
body[data-page]:not(.m-view) #taskGrid { display: flex; flex-direction: column; }
body[data-page]:not(.m-view) #taskGrid > .card { flex: 1 1 auto; min-height: 0; }
body[data-page]:not(.m-view) #taskGrid > .card > :not(.task-imgs) { flex-shrink: 0; }
body[data-page]:not(.m-view) #taskGrid .task-imgs { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
body[data-page]:not(.m-view) #taskGrid .task-imgs .imgbox { flex: 1 1 auto; min-height: 0; }
body[data-page]:not(.m-view) #taskGrid .task-imgs .imgbox img { height: 100%; object-fit: contain; }
.param-box {
  margin: 2px 8px 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(10, 15, 32, .5); border: 1px solid rgba(120, 140, 255, .22);
  font-size: 12px;
}
.param-title { font-weight: bold; color: #cdd4ee; margin-bottom: 5px; font-size: 12px; }
.param-row { display: flex; gap: 8px; line-height: 1.7; }
.param-row .pk { color: #8b93ad; flex-shrink: 0; }
.param-row .pv { color: #e8ecf7; word-break: break-all; }

/* ---------- 历史出图记录弹窗（点按钮才出现） ---------- */
#histMask {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: flex-start; background: rgba(5, 7, 15, .72);
  overflow: auto; padding: 24px 12px;
}
.hist-modal {
  background: rgba(22, 30, 56, .97); border: 1px solid rgba(120, 140, 255, .3);
  border-radius: 14px; max-width: 1280px; width: 100%; margin: 0 auto; padding: 16px;
}
.hist-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: bold; font-size: 16px; margin-bottom: 12px; color: #fff;
}
/* 历史任务按"每行N条记录"排（右上角自己填数字，默认3条，记住选择）；每条里的图完整显示，过高自动等比缩小 */
.hist-modal { --hist-cols: 3; }
.hist-cols-pick { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #8b93ad; font-weight: normal; margin-left: auto; margin-right: 10px; white-space: nowrap; }
.hist-cols-pick input {
  width: 52px; padding: 4px 6px; border-radius: 8px; font-size: 12px; text-align: center;
  border: 1px solid rgba(120, 140, 255, .3); background: rgba(10, 15, 32, .8); color: #fff; outline: none;
}
.hist-list {
  display: grid; grid-template-columns: repeat(var(--hist-cols, 3), 1fr); gap: 14px;
}
.hist-list .card { min-width: 0; }
.hist-list .task-imgs .imgbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: 42vh; margin: 0 auto; }
body.m-view .hist-list { grid-template-columns: 1fr; }

/* ---------- 次数用完：底部小提示条，不挡屏幕 ---------- */
#quotaWarn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  display: none; gap: 10px; align-items: center;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); max-width: 92vw; z-index: 55;
}
#quotaWarn .mini-btn {
  color: #7c2d12; background: rgba(249, 115, 22, .18);
  border: 1px solid rgba(249, 115, 22, .45); white-space: nowrap;
}

/* ---------- 参数区布局：第一行 出图方式|出图数量|清晰度；第二行 画面比例|预设模板；第三行 描述|反推 ---------- */
.params-grid > .prow { grid-column: 1 / -1; display: grid; gap: 12px; align-items: stretch; }
.prow-mid { grid-template-columns: 1.3fr 1fr; }
.cell-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 出图方式独占左格时（文生图，没带上传框）撑满整行高度，和数量/清晰度底边对齐；图生图（方式+上传两块）不受影响 */
.cell-stack > .subpanel:only-child { flex: 1 1 auto; }
/* 本次任务面板底部：注意事项在左、开始生成按钮在右下角 */
.task-foot { flex-shrink: 0; display: flex; gap: 18px; align-items: flex-end; margin-top: 10px; }
.task-foot .note { margin: 0 0 2px; margin-right: auto; line-height: 1.7; }
.task-foot .btn-start { margin: 0; width: auto; padding: 12px 34px; letter-spacing: 3px; white-space: nowrap; }
/* 预设模板列表：点入口后全屏宽度展开 */
#presetDrawer {
  grid-column: 1 / -1; background: rgba(8, 12, 26, .5);
  border: 1px solid rgba(120, 140, 255, .26); border-radius: 10px; padding: 12px 14px;
}
.preset-block { width: 100%; }
.preset-entry { cursor: pointer; }
.preset-entry:hover { border-color: var(--accent); }
.preset-toggle {
  padding: 9px 16px; font-size: 14px; font-weight: bold; color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
}
.preset-toggle:hover { filter: brightness(1.12); }
.preset-selchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #e6ebff;
  background: rgba(120, 140, 255, .16); border: 1px solid rgba(120, 140, 255, .4);
  border-radius: 999px; padding: 5px 12px;
}
.preset-clear { cursor: pointer; color: #aab2d0; font-size: 12px; margin-left: 2px; }
.preset-clear:hover { color: #ff9a9a; }
.preset-confirm { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; font-size: 13px; color: #ffd479; }
.pc-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(120, 140, 255, .35); background: rgba(10, 15, 32, .7); color: #e8ecf7;
}
.pc-btn:hover { filter: brightness(1.15); }
.pc-btn.pc-ok { background: linear-gradient(90deg, var(--accent2), var(--accent3)); color: #fff; font-weight: bold; border-color: transparent; }
.preset-tile.used { border-color: rgba(134, 239, 172, .65); background: rgba(134, 239, 172, .08); }
.preset-tile.used .pt-name { color: #bbf7d0; }
/* 选中的模板小方块：确认/取消按钮出现在这个小方块的正下方 */
.pt-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-wrap .preset-tile { width: 100%; }
.pt-confirm { display: flex; gap: 6px; }
.pt-confirm .pc-btn { flex: 1; padding: 5px 4px; font-size: 12px; white-space: nowrap; }
body.m-view.narrow .params-grid > .prow { grid-template-columns: 1fr !important; }

/* ---------- AI优化提示词 ---------- */
.opt-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.opt-btn {
  padding: 7px 16px; border: none; border-radius: 999px; font-size: 13px; font-weight: bold;
  color: #fff; cursor: pointer; background: linear-gradient(90deg, var(--accent2), var(--accent3));
}
.opt-btn:hover { filter: brightness(1.12); }
.opt-btn:disabled { opacity: .55; cursor: not-allowed; }
.opt-tip { font-size: 12px; color: #6d7695; }
.opt-box {
  margin-top: 10px; border: 1px solid rgba(134, 239, 172, .35);
  background: rgba(18, 44, 31, .45); border-radius: 10px; padding: 10px 12px;
}
.opt-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: bold; color: #86efac; margin-bottom: 6px;
}
.opt-text { font-size: 13px; line-height: 1.7; color: #e8ecf7; word-break: break-all; user-select: all; }
.opt-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- 图片反推提示词 ---------- */
.ig-wrap { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.ig-drop {
  flex: 0 0 190px; height: 140px; border: 2px dashed rgba(120, 140, 255, .45);
  border-radius: 10px; background: rgba(10, 15, 32, .55); cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.ig-drop:hover, .ig-drop.drag { border-color: var(--accent); background: rgba(120, 140, 255, .12); }
.ig-drop img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-empty { text-align: center; font-size: 13px; color: #aab2d0; line-height: 1.9; padding: 0 8px; }
.ig-empty .ig-plus { font-size: 26px; color: #6d7695; display: block; line-height: 1.2; }
.ig-empty .ig-sub { font-size: 11px; color: #6d7695; }
.ig-side { flex: 1 1 220px; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.ig-btn {
  align-self: flex-start; padding: 9px 18px; border: none; border-radius: 999px;
  font-size: 14px; font-weight: bold; color: #fff; cursor: pointer;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
}
.ig-btn:hover { filter: brightness(1.12); }
.ig-btn:disabled { opacity: .55; cursor: not-allowed; }
.ig-zh { font-size: 12px; color: #ffd479; line-height: 1.7; margin-top: 6px; }
.ig-en { font-size: 12px; color: #8b93ad; line-height: 1.7; margin-top: 6px; word-break: break-all; }
.ig-side .ig-btn + .ig-btn { margin-top: 6px; }
body.m-view.narrow .ig-drop { flex: 1 1 100%; }

/* ---------- 在线反推密钥配置（管理员页） ---------- */
.zkey-row {
  margin-top: 12px; border: 1px solid rgba(120, 140, 255, .3);
  background: rgba(10, 15, 32, .45); border-radius: 10px; padding: 10px 12px;
}
.zkey-row.zkey-mine { border-color: rgba(134, 239, 172, .3); }
.zkey-title { font-size: 13px; font-weight: bold; color: #aab2d0; margin-bottom: 8px; }
.zkey-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.zkey-name { flex: 0 0 auto; font-size: 13px; color: #e8ecf7; min-width: 82px; }
.zkey-input {
  flex: 1 1 260px; min-width: 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(120, 140, 255, .35); background: rgba(6, 10, 24, .8);
  color: #e8ecf7; font-size: 13px; outline: none;
}
.zkey-input:focus { border-color: var(--accent); }
.zkey-input::placeholder { color: #5b6480; }
.zkey-pwd { flex: 0 1 200px; }
.zkey-save { align-self: auto; }
.zkey-state { font-size: 12px; color: #ffd479; line-height: 1.7; }
.zkey-tip { font-size: 12px; color: #8b93ad; line-height: 1.7; margin-top: 4px; }

/* ---------- 电脑版单屏布局：整页不出浏览器滚动条，内容多的板块在自己框里滚 ---------- */
body[data-page]:not(.m-view) {
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
body[data-page]:not(.m-view) header,
body[data-page]:not(.m-view) .userbar { flex-shrink: 0; }
body[data-page]:not(.m-view) .wrap {
  flex: 1; min-height: 0; overflow: hidden; align-items: stretch;
}
body[data-page]:not(.m-view) .left { position: static; max-height: none; overflow-y: auto; }
body[data-page]:not(.m-view) .main { min-height: 0; display: flex; flex-direction: column; }
body[data-page]:not(.m-view) .main > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body[data-page]:not(.m-view) .main > .panel > .section-title,
body[data-page]:not(.m-view) .main > .panel > .empty { flex-shrink: 0; }
body[data-page]:not(.m-view) #taskGrid { flex: 1; min-height: 0; overflow-y: auto; }

/* ---------- 画面描述输入框自动撑满所在板块 ---------- */
.subpanel.grow { display: flex; flex-direction: column; flex: 1 1 auto; }
.subpanel.grow textarea { flex: 1 1 auto; height: auto; min-height: 150px; }
.subpanel.grow .opt-box { flex-shrink: 0; }