*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e6e8ec; --ink:#22252c; --ink2:#6b7280;
  --accent:#f2643c; --accent-soft:#fff1ec; --accent-ink:#c94422;
  --blue:#3f6fd8; --shadow:0 1px 3px rgba(20,24,35,.06),0 8px 24px rgba(20,24,35,.04);
}
html,body{height:100%;overflow:hidden}
body{
  height:100vh;height:100dvh;
  display:grid;grid-template-rows:54px minmax(0,1fr) 52px;
  font:13px/1.5 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;transition:.15s}
button:hover{border-color:#c9cdd6;background:#fafbfc}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.flex{flex:1;min-width:0}

/* ── 顶栏（固定 54） ── */
.topbar{height:54px;display:flex;align-items:center;gap:24px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);min-width:0}
.brand{display:flex;align-items:center;gap:9px;min-width:196px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:19px}
.brand b{display:block;font-size:14px;letter-spacing:.3px}
.brand small{display:block;color:#a0a6b2;font-size:10px;letter-spacing:1px}
.steps{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.step{display:flex;align-items:center;gap:6px;color:#9aa1ad;font-size:12px;white-space:nowrap}
.step i{width:20px;height:20px;border-radius:50%;background:#eef0f4;color:#89909c;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700}
.step.on{color:var(--ink);font-weight:600}.step.on i{background:var(--accent);color:#fff}
.step.done i{background:#e8f2e9;color:#3f9a55}
.sep{color:#d3d7de}
.status{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink2);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#f0b429}
.dot.ok{background:#3fae67}.dot.bad{background:#d95a4e}

/* ── 三栏：固定网格，任何点击都不改变行列尺寸 ── */
.layout{
  display:grid;grid-template-columns:270px minmax(0,1fr) 254px;
  gap:10px;padding:10px;min-height:0;overflow:hidden;
}
/* 左栏：卡片区自己滚动，生成按钮恒固定在底部。
   卡片用自然高度，不再被固定行高裁切/压成一条（用户反馈的「侧栏重叠」）。 */
.side.left{display:flex;flex-direction:column;gap:0;min-height:0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow)}
/* 左栏是「一整块面板」，内部按步骤分节用细线隔开 —— 不再是一张张独立卡片
   之间露出灰色背景缝隙（用户说的「空出一块一块」）。 */
.leftscroll{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;padding:0}
.leftscroll>.card{flex:0 0 auto;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid #eef1f6;padding:11px 13px 12px}
.leftscroll>.card:last-child{border-bottom:0}
.leftscroll>.genbar{flex:0 0 auto;margin-top:0;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:11px 13px 12px;background:var(--panel)}
/* 中间编辑区就是一块大正方形拼豆板：边长由 JS 按可用宽高取 min 设定，
   格子铺满整个正方形，左右不再留大片白。 */
.stagefill{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage{display:grid;grid-template-rows:44px minmax(0,1fr) 28px;gap:8px;min-width:0;min-height:0}
.side.right{display:grid;grid-template-rows:38px minmax(0,1fr);min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow)}

.card,.genbar,.toolbar,.stagefoot,.exportbar{background:var(--panel)}
.card{border:1px solid var(--line);border-radius:11px;padding:10px;box-shadow:var(--shadow);min-height:0}
.card h2{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;height:20px;margin-bottom:6px;letter-spacing:.2px}
.card h2 em{width:19px;height:19px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font-style:normal;font-size:10px;display:grid;place-items:center}

/* 拼豆板预设：固定高度；多块选项常驻占位只切可见性 */
.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.preset{height:46px;border:1.5px solid var(--line);border-radius:9px;background:#fff;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;padding:2px}
.preset b{font-size:12px}.preset small{font-size:10px;color:#9aa1ad}
.preset .ico{font-size:14px;line-height:1;color:#aeb4bf}
.preset.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.preset.active .ico,.preset.active small{color:var(--accent-ink);opacity:.75}
.multibox{height:28px;margin-top:6px;display:flex;gap:6px;visibility:hidden;pointer-events:none}
.multibox.on{visibility:visible;pointer-events:auto}
.multibox label{flex:1;font-size:11px;color:var(--ink2);display:flex;align-items:center;gap:4px;background:#f7f8fa;border-radius:7px;padding:0 7px}
.multibox select{margin-left:auto;border:1px solid var(--line);border-radius:6px;padding:2px 4px;background:#fff;font-size:11px}
/* 板型信息 / 设置摘要用自然高度，不再固定 height + overflow:hidden 把内容裁掉 */
.boardsize{min-height:0;margin-top:6px;padding:6px 8px;border-radius:8px;background:#f7f8fa;font-size:10px;color:var(--ink2);line-height:1.35}
.boardsize b{color:var(--ink);font-size:12px}

/* 上传：固定 96px，缩略图绝对定位，不撑高容器 */
.drop{height:96px;position:relative;border:1.5px dashed #d6dae2;border-radius:9px;background:#fcfcfd;overflow:hidden;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;pointer-events:none}
.upicon{font-size:20px;color:var(--accent);line-height:1}
.drop-empty b{font-size:12px}.drop-empty span{font-size:10px;color:#9aa1ad}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fafbfc}
.filename{height:18px;margin-top:6px;font-size:11px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 右栏：本次用色快速区 + 全部色板 */
.usedrow{padding:6px 9px 7px;border-bottom:1px solid #eef1f6;background:#fbfcfe}
.usedrow b{display:block;font-size:10px;color:#8a929e;font-weight:600;margin-bottom:4px}
.usedrow b span{color:var(--accent-ink)}
.swatches.used{max-height:96px;overflow-y:auto;padding-right:2px}
.alllabel{margin:8px 9px 4px;font-size:10px;color:#9aa1ad}
.alllabel span{color:#b6bcc6}

/* 设置摘要卡：剩余空间填满，但内容高度恒定 */
.optcard{display:flex;flex-direction:column;gap:8px}
.optcard h2{flex:0 0 auto}
.fidpick{display:flex;gap:6px;margin-bottom:5px;flex:0 0 auto}
.fidbtn{flex:1;border:1px solid #e3e6ec;background:#f7f8fa;color:#5a6270;border-radius:8px;padding:5px 4px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.fidbtn:hover{border-color:#e0a77f}
.fidbtn.active{background:#fff1e7;border-color:var(--accent);color:var(--accent-ink)}
.optcard h2{margin-bottom:5px}
.optsum{min-height:0;flex:0 0 auto;border-radius:8px;background:#f7f8fa;padding:5px 9px;font-size:11px;color:var(--ink2);line-height:1.45}
.optsum b{color:var(--ink)}
.optnote{margin-top:auto;font-size:10px;color:#a4aab5;line-height:1.4}
.genbar{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;border:1px solid var(--line);border-radius:11px;padding:10px;box-shadow:var(--shadow)}
.primary{height:38px;flex:0 0 auto;background:var(--accent);color:#fff;border:0;border-radius:9px;font-weight:700;font-size:13px}
.primary:hover{background:#e2552f;border:0}
.primary.small{height:34px;width:96px;font-size:12px}
.genline{height:30px;flex:0 0 auto;display:flex;align-items:center;gap:6px;overflow:hidden}
.genline>span{flex:1;min-width:0;height:30px;font-size:11px;color:var(--ink2);line-height:1.35;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.genline>button{flex:0 0 auto;width:22px;height:22px;padding:0;border-radius:6px;font-size:12px;color:var(--ink2)}
.miniset{display:none}

/* ── 中栏 ── */
.toolbar{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 7px;display:flex;flex-wrap:nowrap;gap:6px;align-items:center;box-shadow:var(--shadow);min-width:0}
.tgroup{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.toolbtn,.iconbtn{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;font-size:12px;border-radius:7px;white-space:nowrap}
.toolbtn i{font-style:normal;font-size:13px}
.iconbtn{width:30px;padding:0}
.toolbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.toolbtn.active:hover{background:#e2552f}
.caret{font-size:9px;opacity:.6}
.tgroup.zoom span{font-size:11px;color:var(--ink2);min-width:34px;text-align:center}
.canvaswrap{flex:0 0 auto;min-height:0;border:1px solid var(--line);border-radius:11px;background:#fbfcfe;position:relative;overflow:hidden;box-shadow:var(--shadow);cursor:crosshair}
.canvaswrap canvas{display:block;width:100%;height:100%;position:relative;z-index:2}
/* 从下到上：板面白底 → 原图 / 生成的图纸（透明画布）→ 整张网格的格线。
   板面与格线**永远显示**，不随生成 / 换板收起：编辑区恒是一整张网格，
   图案只是半透明叠在它上面的一层，格线压在最上面，深浅色主体都看得清。
   格线层只画线（渐变其余部分透明），盖在图纸上不会挡颜色。 */
#boardFace{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;border-radius:0;
  z-index:1;background:#fbfcfe;pointer-events:none}
#srcPreview{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;opacity:.76}
#boardGrid{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;border-radius:0;
  pointer-events:none;z-index:4;background-repeat:repeat}

/* 板面与格线都不动；只有图案换板 / 出图时给一段短过渡，不是「啪」地跳一下。 */
#srcPreview{transition:width .18s ease,height .18s ease,left .18s ease,top .18s ease}
/* 浮层要压在格线之上，否则提示文字会被网格盖住 */
#empty,#cutEmpty{z-index:6}
/* 按住空格 / 中键拖动时变成抓手，提示当前是移动模式 */
.canvaswrap.panmode{cursor:grab}
.canvaswrap.panmode:active{cursor:grabbing}

/* 元素选择弹窗：浮在画布最上层，不占布局空间、不挤拼豆板。
   以前是贴右的全高侧栏，还要 JS 把白板宽度扣掉 266px —— 一开就晃。 */
#cutSide{position:absolute;top:12px;right:12px;bottom:12px;width:272px;z-index:6;
  display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.985);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(40,60,100,.18),0 2px 8px rgba(40,60,100,.10)}
.cutside-head{position:relative;padding:12px 34px 9px 14px;border-bottom:1px solid #eef1f6}
.cutx{position:absolute;right:9px;top:9px;width:24px;height:24px;line-height:22px;
  padding:0;border:0;border-radius:6px;background:transparent;color:#9aa1ad;
  font-size:13px;cursor:pointer}
.cutx:hover{background:#f2f4f8;color:#414651}
.cutside-head b{font-size:13px}
.cutside-head span{display:block;font-size:11px;color:#8a929e;margin-top:3px}
.cutside-list{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin}
.cutrow{display:flex;align-items:center;gap:9px;padding:7px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;margin-bottom:6px}
.cutrow:hover{background:#f7f9fc}
.cutrow.on{background:#fff8ee;border-color:#f0cfa4}
.cutrow img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:6px;
  border:1px solid #eef1f6;flex:0 0 auto}
.cutrow-t{flex:1;min-width:0}
.cutrow-t b{display:block;font-size:12px;font-weight:600}
.cutrow-t small{display:block;font-size:10px;color:#8a929e;margin-top:2px}
.cutrow-ck{width:18px;text-align:center;color:#e08a2e;font-weight:700;flex:0 0 auto}
.cutside-foot{padding:10px 12px;border-top:1px solid #eef1f6}
.cutside-foot small{display:block;font-size:11px;color:#8a929e;margin-bottom:8px}
.cutside-foot .row{display:flex;gap:8px}
.cutbtn{flex:1;padding:9px 0;border-radius:8px;font-size:12px;cursor:pointer}
.cutbtn.ghost{border:1px solid #d8dbe2;background:#fff;color:#4a5260}
.cutbtn.solid{border:0;background:#e08a2e;color:#fff;font-weight:600}
#cutEmpty{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  padding:13px 22px;border-radius:10px;background:rgba(255,255,255,.95);
  border:1px solid #f2d3c0;color:#a8342a;text-align:center;font-size:13px;
  line-height:1.75;pointer-events:none;z-index:2;box-shadow:0 6px 18px rgba(60,80,120,.10)}
#cutEmpty small{color:#8a929e;font-size:11px}

.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink2);pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.88) 0%,rgba(255,255,255,.52) 45%,rgba(255,255,255,0) 100%)}
.empty-icon{font-size:48px;color:#e2e5eb;margin-bottom:10px}
.empty h3{font-size:15px;color:#414651;margin-bottom:6px}
.empty p{font-size:12px;margin:2px 0}
.empty .muted{color:#a7aeb9;font-size:11px;margin-top:8px}
.demobtn{pointer-events:auto;margin-top:16px;border:1px solid #f5c6b6;color:var(--accent-ink);background:#fff;padding:7px 14px;font-size:12px}
.stagefoot{height:28px;border:1px solid var(--line);border-radius:8px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink2);overflow:hidden;white-space:nowrap}

/* ── 右栏：两块 pane 绝对重叠，切换 Tab 不改变任何尺寸 ── */
.tabs{height:38px;display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;border-radius:0;padding:0 4px;font-size:12px;color:var(--ink2);background:transparent}
.tabs button.active{color:var(--accent-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
.panes{position:relative;min-height:0}
.tabpane{position:absolute;inset:0;overflow-y:auto;padding:10px;scrollbar-width:thin}
.search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12px}
.current{margin:10px 0;padding:8px;border-radius:9px;background:#f7f8fa;display:flex;align-items:center;gap:9px;font-size:11px;min-height:46px}
.current .chip{width:28px;height:28px;border-radius:7px;border:1px solid rgba(0,0,0,.1);flex:0 0 auto}
.current b{display:block;font-size:12px}.current small{color:var(--ink2);font-size:10px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.sw{aspect-ratio:1;border-radius:6px;border:1px solid rgba(0,0,0,.09);position:relative;cursor:pointer;padding:0;min-width:0}
.sw:hover{transform:scale(1.1);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sw.sel{outline:2px solid var(--accent);outline-offset:1px}
.sw span{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;font-weight:700;letter-spacing:-.3px}
.swatches.big{grid-template-columns:repeat(16,1fr);gap:4px}
.swatches.big .sw{aspect-ratio:1.45}
.swatches.big .sw span{font-size:9px}
.matsum{padding:9px 10px;background:#f7f8fa;border-radius:9px;margin-bottom:9px;font-size:11px;line-height:1.7}
.matsum b{font-size:16px;color:var(--accent-ink)}
.matrow{display:flex;align-items:center;gap:7px;padding:6px 2px;border-bottom:1px solid #f1f2f5;font-size:11px;position:relative}
.matrow .chip{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.1);flex:0 0 auto}
.matrow .code{font-weight:700;min-width:34px}
.matrow .hex{color:#a2a8b3;font-size:10px}
.matrow .n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.matrow .bar{height:3px;background:var(--accent);border-radius:2px;position:absolute;bottom:0;left:0}

/* ── 底栏（固定 52） ── */
.exportbar{height:52px;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px;box-shadow:0 -2px 12px rgba(20,24,35,.03);min-width:0;overflow:hidden}
.exportlabel{font-size:11px;color:var(--ink2);white-space:nowrap;margin-right:3px}
.exportbar button{font-size:12px;white-space:nowrap;padding:7px 10px}
.exportbar #exChart{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.exportbar #exChart:hover{background:#e2552f}
.morebtn{display:none}

/* ── 浮层 / 弹窗：position:fixed，不占布局 ── */
.popover{position:fixed;z-index:80;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(20,24,35,.17);padding:7px;display:flex;flex-direction:column;gap:1px}
.popover label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-size:12px;cursor:pointer;white-space:nowrap}
.popover label:hover{background:#f6f7f9}
.popover label input{accent-color:var(--accent);width:14px;height:14px}
.popover>button{text-align:left;border:0;background:transparent;border-radius:7px;padding:8px 9px;font-size:12px}
.popover>button:hover{background:#f6f7f9}
.poptitle{font-size:10px;color:#9aa1ad;padding:3px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;letter-spacing:.4px}
.pophint{font-size:10px;color:#a4aab5;padding:6px 8px 2px;line-height:1.45;max-width:220px;white-space:normal}
.popcolor{min-width:230px}
.popcolor .current{margin:2px 0 8px}
.popall{border:1px solid #f3c9b9 !important;background:var(--accent-soft) !important;color:var(--accent-ink);font-weight:600;text-align:center !important}

.overlay{position:fixed;inset:0;background:rgba(24,28,36,.42);backdrop-filter:blur(2px);z-index:90;display:grid;place-items:center;padding:20px}
.modal{width:min(540px,94vw);max-height:min(80vh,760px);background:#fff;border-radius:14px;box-shadow:0 20px 70px rgba(16,20,30,.28);display:flex;flex-direction:column;overflow:hidden;transition:width .15s}
.modal.wide{width:min(780px,94vw)}
.modal-head{height:48px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);font-size:14px}
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:16px;scrollbar-width:thin}
.modal-foot{height:54px;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;padding:0 16px;border-top:1px solid var(--line)}
.row{display:block;margin-bottom:14px;font-size:12px;color:var(--ink2)}
.row>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--ink);font-weight:600}
.row>span small{font-weight:400;color:#a4aab5;font-size:10px}
.row select{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 9px;background:#fff}
.row.slider small{display:block;font-size:10px;color:#a4aab5;margin-top:6px;line-height:1.45;font-weight:400}
.row input[type=range]{width:100%;accent-color:var(--accent)}
.divider{height:1px;background:var(--line);margin:16px 0}
.chk{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;cursor:pointer;font-size:12px}
.chk input{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.chk b{font-weight:600;display:block}
.chk small{display:block;color:#9aa1ad;font-size:10px;line-height:1.45}
.chk.warn small{color:#c9853d}
.setnote{margin-top:14px;padding:10px 12px;border-radius:9px;background:#f7f8fa;font-size:11px;color:var(--ink2);line-height:1.6}
#infoText{font:12px/1.9 "Segoe UI","Microsoft YaHei",sans-serif;white-space:pre-wrap;color:var(--ink)}

/* ── 智能推荐 / 自定义网格 / 原图对照 ── */
.h2btn{margin-left:auto;height:20px;padding:0 8px;border-radius:6px;border:1px solid #f3c9b9;background:var(--accent-soft);color:var(--accent-ink);font-size:10px;font-weight:700;white-space:nowrap}
.h2btn:hover{background:#ffe7dc;border-color:#f0b49e}

/* 智能推荐主按钮：和「生成图纸」同一级别的大长条，放在选板卡片最上方。
   之前它是标题右侧的一颗小胶囊，用户根本注意不到这是主路径。 */
.advbar{width:100%;height:52px;flex:0 0 auto;display:flex;align-items:center;
  gap:9px;margin:0 0 9px;padding:0 12px;border:0;border-radius:10px;
  color:#fff;text-align:left;
  background:linear-gradient(100deg,#ff7f4d,#e8542c);
  box-shadow:0 6px 15px rgba(226,85,47,.26);
  transition:filter .15s ease,transform .08s ease}
.advbar:hover{filter:brightness(1.05)}
.advbar:active{transform:translateY(1px)}
.advbar .advico{font-size:17px;line-height:1}
.advbar .advtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.advbar .advtx b{font-size:13px;font-weight:700;letter-spacing:.2px}
.advbar .advtx i{font-style:normal;font-size:10px;line-height:1.2;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advbar .advchev{font-size:17px;opacity:.8;line-height:1}
.advbar[disabled]{opacity:.55;box-shadow:none;cursor:default}
.popact{margin-top:5px!important;border:1px solid #f3c9b9!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;font-weight:600!important;text-align:center!important}
.comfyline{margin:0 0 10px;font-size:10px;color:var(--ink2);background:#f7f8fa;border-radius:7px;padding:6px 9px}
.comfyline b{color:#3f9a55}.comfyline.off b{color:#c9853d}
.gridrow>b{font-size:12px;display:flex;align-items:baseline;gap:7px}
.gridrow>b small{font-weight:400;color:#a4aab5;font-size:10px}
.gridinputs{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.gridinputs label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2)}
.gridinputs input{width:68px;border:1px solid var(--line);border-radius:7px;padding:6px 7px;font-size:12px}
.miniapply{border:1px solid #f3c9b9;background:var(--accent-soft);color:var(--accent-ink);font-weight:600;font-size:11px;padding:6px 11px}
.gridhint{display:block;margin-top:7px;font-size:10px;color:#a4aab5;line-height:1.5}
.modal-foot{gap:8px}
.modal-foot .footnote{flex:1;font-size:11px;color:var(--ink2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.modal-foot #modalDone{background:#fff;border:1px solid var(--line);color:var(--ink)}
.modal-foot #modalDone:hover{background:#f7f8fa}

.advhero{display:flex;align-items:center;gap:16px;padding:13px 15px;border:1px solid #f3d9cd;border-radius:11px;background:linear-gradient(105deg,#fff6f2,#fff)}
.advhero .big{font-size:25px;font-weight:800;color:var(--accent-ink);line-height:1.15;white-space:nowrap}
.advhero .sub{font-size:10px;color:#a4aab5;margin-top:3px}
.advhero .desc{font-size:11px;color:var(--ink2);line-height:1.7}
.advkv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.advkv div{background:#f7f8fa;border-radius:9px;padding:8px 10px;min-width:0}
.advkv b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advkv small{font-size:10px;color:var(--ink2)}
.advsec{margin-top:16px;font-size:12px;font-weight:700}
.advsec small{font-weight:400;color:#a4aab5;font-size:10px;margin-left:6px}
.advchart{display:flex;align-items:flex-end;gap:3px;height:84px;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fafbfc}
.advcol{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0;cursor:help}
.advcol i{display:block;width:100%;background:#9db2dd;border-radius:3px 3px 0 0;min-height:3px}
.advcol.pick i{background:var(--accent)}
.advcol:hover i{background:#6b83b8}
.advaxis{display:flex;justify-content:space-between;font-size:10px;color:#a4aab5;margin-top:4px}
.advtable{width:100%;border-collapse:collapse;margin-top:8px;font-size:11px}
.advtable th,.advtable td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left;white-space:nowrap}
.advtable th{color:#9aa1ad;font-weight:600;font-size:10px;background:#fafbfc}
.advtable tr.pick td{background:#fff6f2;color:var(--accent-ink);font-weight:700}
.advpick{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 8px;font-size:10px}
.advpick:hover{border-color:var(--accent);color:var(--accent-ink)}
.advnote{margin-top:12px;padding:10px 12px;border-radius:9px;background:#f7f8fa;font-size:11px;color:var(--ink2);line-height:1.65}

.cmpbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink2);margin-bottom:10px}
.cmpbar label{display:flex;align-items:center;gap:7px}
.cmpbar input[type=range]{width:120px;accent-color:var(--accent)}
.cmpbar b{font-variant-numeric:tabular-nums;color:var(--ink)}
.minibtn{padding:5px 10px;font-size:11px}
.cmptip{margin-left:auto;font-size:10px;color:#a4aab5}
.cmpview{height:min(54vh,460px);border:1px solid var(--line);border-radius:10px;background:#fafbfc;position:relative;display:flex;overflow:hidden}
.cmppane{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:20px 10px 8px}
.cmppane>span{position:absolute;top:6px;left:8px;z-index:3;font-size:10px;color:#6b7280;background:rgba(255,255,255,.88);border-radius:5px;padding:2px 6px}
.cmppane canvas,.cmppane img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.cmpview.stack .cmppane{position:absolute;inset:0;flex:none}
.cmpview.stack .cmppane:nth-child(2){opacity:var(--alpha,.45);pointer-events:none}
.cmpview.stack .cmppane:nth-child(2)>span{opacity:0}
.cmpview.side .cmppane+.cmppane{border-left:1px solid var(--line)}
.cmpempty{padding:36px;text-align:center;color:#a4aab5;font-size:12px}

/* ── 反馈 ── */
.loading{position:fixed;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(3px);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.spin{width:36px;height:36px;border:3px solid #ffe0d5;border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loading b{font-size:13px;color:var(--accent-ink)}
.toast{position:fixed;bottom:66px;left:50%;transform:translateX(-50%) translateY(14px);background:#2b2f38;color:#fff;padding:9px 17px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:110;max-width:70vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 响应式：只压缩内容，永远不出现页面滚动 ── */
@media(max-width:1320px){
  .layout{grid-template-columns:250px minmax(0,1fr) 228px;gap:8px;padding:8px}
  .side.left{gap:8px}
  .steps{display:none}
}
@media(max-width:1200px){
  #tools .toolbtn .lbl{display:none}
  .exportbar .lbl{display:none}
}
@media(max-width:1080px){
  .layout{grid-template-columns:244px minmax(0,1fr)}
  .side.right{display:none}
}
@media(max-width:900px){
  .layout{grid-template-columns:220px minmax(0,1fr)}
  .exportbar .exsub,.exportbar .exsub2{display:none}
  .exportbar .exmain .lbl{display:inline}
  .morebtn{display:inline-block}
  .toolbar{gap:4px;padding:0 5px}
  .toolbtn,.iconbtn{padding:0 6px}
  #btnPalette .lbl{display:none}
  .tgroup.zoom #zoomTxt{display:none}
  .brand{min-width:auto}.brand small{display:none}
}
/* 矮窗口只适度压缩间距；卡片仍是自然高度，超出的部分在左栏内滚动，
   不再把「生成设置」压成一行、也不隐藏整张卡片（那正是文字挤成竖排的原因）。 */
@media(max-height:780px){
  .preset{height:44px}
  .drop{height:78px}
  .boardsize{min-height:40px;line-height:1.2;padding:3px 8px}
  .card{padding:8px}
  .card h2{margin-bottom:6px}
  .optnote{display:none}
  .fidbtn{padding:5px 6px;font-size:10px}
  .advbar{height:46px;margin-bottom:6px}
}
@media(max-height:700px){
  .miniset{display:inline-flex}
  .preset{height:42px}
  .drop{height:64px}
  .multibox{height:26px}
}

/* ── 设置弹窗分页：高度恒定，切页不跳动，选项再多也不撑长主画面 ── */
.settabbar{display:flex;gap:5px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:9px}
.settabbar button{flex:1;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 5px;font-size:11px;color:var(--ink2);white-space:nowrap}
.settabbar button:hover{background:#f7f8fa}
.settabbar button.active{background:var(--accent-soft);border-color:#f3c9b9;color:var(--accent-ink);font-weight:700}
.setpane{height:clamp(238px,40vh,342px);overflow-y:auto;scrollbar-width:thin;padding-right:3px}
.setpane .gridinputs select{border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:11px;background:#fff}
.setpane input[type=file]{width:100%;font-size:11px;color:var(--ink2);margin-top:4px}
.setnote.warnnote{background:#fff7f1;color:#a45a2a}
/* ── 智能调参结果 ── */
.tunehero{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid #f3d9cd;border-radius:11px;background:#fff8f4}
.tunehero .big{font-size:20px;font-weight:800;color:var(--accent-ink);line-height:1.2;white-space:nowrap}
.tunehero .desc{font-size:11px;color:var(--ink2);line-height:1.6}
.tunetable{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px}
.tunetable th,.tunetable td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;white-space:nowrap}
.tunetable th{color:#9aa1ad;font-size:10px;background:#fafbfc;position:sticky;top:0}
.tunetable tr.pick td{background:#fff6f2;color:var(--accent-ink);font-weight:700}
.tunetable tr:hover td{background:#f7f8fa}
.tunecmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tunecmp div{background:#f7f8fa;border-radius:9px;padding:9px 11px;font-size:11px;line-height:1.7}
.tunecmp b{font-size:13px;color:var(--ink)}

/* ── 智能推荐 · 一键出图结果条 ── */
#oneClickResult{margin-top:9px;padding:10px 12px;border:1px solid #cfe8d6;border-radius:10px;background:#f4fbf6;font-size:11px;line-height:1.7;color:var(--ink2)}
#oneClickResult[hidden]{display:none}
#oneClickResult b{display:block;font-size:13px;color:#1f7a45;margin-bottom:2px}
#oneClickResult span{display:block}
#oneClickResult small{display:block;margin-top:5px;color:#b46a18}
#oneClickResult .ocl{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
#oneClickResult .ocl a{padding:4px 8px;border:1px solid #cfe0d3;border-radius:7px;background:#fff;color:#1f7a45;text-decoration:none;font-size:11px;white-space:nowrap}
#oneClickResult .ocl a:hover{background:#e8f6ec}
/* 次要入口：各档对比 / 手动选板，避免和一键出图主按钮抢视觉 */
.advbar.advminor{height:40px;margin-top:7px;background:#f7f8fa;border:1px solid #e3e6eb;box-shadow:none;color:#5d6672}
.advbar.advminor:hover{filter:none;background:#eef1f5}
.advbar.advminor .advico{font-size:14px}
.advbar.advminor .advtx b{font-size:12px;font-weight:600}
.advbar.advminor .advchev{font-size:14px}

/* ═══════════════════════════════════════════════════════════════════
   UI 体验改造 2026-11-13：减少滚动查看
   目标：主操作（四档 / 生成 / 出图结果 / 找色）永远在首屏，
        低频设置可一键收起；不改画布尺寸、不改任何接口与既有 id。
   沿用项目既有 CSS 变量与卡片体系，不引入第二套样式体系。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 左栏：滚动区 + 固定操作台 ── */
.side.left>.dock{flex:0 0 auto;min-height:0;overflow:hidden;
  border-top:1px solid var(--line);background:var(--panel);
  box-shadow:0 -6px 18px rgba(20,24,35,.05)}
.side.left>.dock>.genbar{border:0;border-radius:0;box-shadow:none;
  padding:9px 13px 11px;background:var(--panel);gap:5px}
.side.left>.dock .primary{min-height:40px}
.genhint{font-size:10px;font-weight:400;opacity:.85;letter-spacing:0}
/* 结果条现在是固定操作台的一部分：默认只占两行，详情可展开 */
.side.left>.dock #oneClickResult{margin:0;padding:8px 12px 9px;
  border:0;border-bottom:1px solid #d8ebde;border-radius:0;
  background:#f4fbf6;font-size:11px;line-height:1.45;
  max-height:172px;overflow-y:auto;scrollbar-width:thin}
.side.left>.dock #oneClickResult b{display:inline;font-size:12px;margin:0}
.side.left>.dock #oneClickResult>span{display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.side.left>.dock #oneClickResult small{display:block;margin-top:3px;
  font-size:10px;line-height:1.35;color:#8a7b5a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side.left>.dock #oneClickResult .ocl{margin-top:5px;gap:5px}
.side.left>.dock #oneClickResult .ocl a{padding:5px 8px;font-size:11px;min-height:28px}
/* 折叠态：出图完成后仍保留完整 DOM（下载链接照常可查），只是视觉收起 */
#oneClickResult.fold>span,#oneClickResult.fold small{display:none}
#oneClickResult.fold .ocl a[data-act="detail"]{display:none}
.ocfold{float:right;border:0;background:transparent;color:#1f7a45;
  font-size:10px;padding:2px 5px;min-height:24px;border-radius:5px}
.ocfold:hover{background:#e2f3e8}

/* ── 2. 四档 2×2 网格 ── */
.card-tiers{padding-bottom:9px}
.h2hint{margin-left:auto;font-weight:400;color:#a4aab5;font-size:10px;letter-spacing:0}
.tiergrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tierbtn{min-height:62px;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  align-content:center;align-items:baseline;gap:0 6px;
  padding:7px 9px;text-align:left;border:1px solid var(--line);border-radius:9px;
  background:#fbfcfd;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease,scale .15s ease}
.tierbtn:hover{border-color:#f0b49e;background:#fff8f4}
.tierbtn:active{scale:.96;transform:none}
.tierbtn .tnum{grid-row:1/3;align-self:center;font-size:21px;font-weight:800;
  line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tierbtn .tname{grid-column:2;grid-row:1;font-size:11px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tierbtn i{grid-column:1/3;grid-row:3;font-style:normal;font-size:9px;line-height:1.3;
  color:#9aa1ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;min-width:0}
.tierbtn.tierhero{background:linear-gradient(105deg,#fff1ea,#fff8f4);
  border-color:#f3c9b9;box-shadow:0 0 0 1px rgba(242,100,60,.06)}
.tierbtn.tierhero .tnum{color:var(--accent-ink)}
.tierbtn.tierhero .tname{color:var(--accent-ink)}
/* 出图完成后给对应档位一个「当前档」标记，纯静态线索，不靠颜色单独传达 */
.tierbtn.current{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 1px rgba(242,100,60,.18)}
.tierbtn.current .tname::after{content:" · 当前";font-weight:400;color:var(--accent-ink)}

/* ── 3. 低频设置折叠区 ── */
.manual{margin-top:8px;border-top:1px solid #eef1f6;padding-top:5px}
.manual>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:6px;min-height:30px;padding:3px 2px;font-size:11px;font-weight:600;
  color:#6b7280;border-radius:6px;user-select:none}
.manual>summary::-webkit-details-marker{display:none}
.manual>summary::before{content:"⌄";font-size:13px;line-height:1;color:#9aa1ad;
  transition:transform .18s ease;display:inline-block}
.manual:not([open])>summary::before{transform:rotate(-90deg)}
.manual>summary:hover{color:var(--accent-ink);background:#fafbfc}
.sumhint{margin-left:auto;font-size:9px;font-weight:400;color:#b0b6c0}
.manual-body{padding-top:7px}
.manual:not([open]) .manual-body{display:none}
/* 折叠区里的板型按钮压紧，减少展开后的总高度 */
.manual-body .advbar.advminor{height:34px;margin-bottom:6px;margin-top:0}
.manual-body .presets{grid-template-columns:repeat(4,1fr);gap:5px}
.manual-body .preset{height:36px;border-radius:8px;padding:2px}
.manual-body .preset .ico{display:none}
.manual-body .preset b{font-size:10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.manual-body .preset small{font-size:9px}
/* 4 列只有 ~58px 宽，完整名放不下：紧凑布局改显示短名，
   完整 name / sub 仍在 DOM（title 也能看到），不影响历史脚本按文本找按钮。 */
.preset .pshort{display:none}
.manual-body .preset b,.manual-body .preset small{display:none}
.manual-body .preset .pshort{display:block;font-size:10px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.manual-body .multibox{height:26px;margin-top:5px}
.manual-body .boardsize{margin-top:5px}

/* ── 4. 右栏：粘性搜索 + 色系直达 + 紧凑色板 ── */
#tabPalette .palhead{position:sticky;top:0;z-index:3;
  background:var(--panel);padding-bottom:6px;margin-bottom:2px;
  box-shadow:0 4px 10px -8px rgba(20,24,35,.4)}
#tabPalette .current{margin:7px 0 6px;min-height:42px;padding:6px 8px}
.swjump{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.swjump button{flex:1 0 auto;min-width:0;min-height:26px;padding:2px 5px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  font-size:10px;color:#5d6672;white-space:nowrap}
.swjump button:hover{border-color:#f0b49e;background:#fff8f4;color:var(--accent-ink)}
.swjump button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.swjump button:active{scale:.96;transform:none}
.allhint{float:right;font-size:9px;color:#b6bcc6;font-weight:400}
/* 6 列 → 8 列：221 色从 37 行降到 28 行，找色少滚约 1/4 */
#tabPalette .swatches:not(.used){grid-template-columns:repeat(8,1fr);gap:4px}
#tabPalette .swatches .sw span{font-size:7px;letter-spacing:-.4px}
#tabPalette .swatches.used{grid-template-columns:repeat(8,1fr);gap:4px;max-height:70px}
/* 筛选命中时高亮，避免「点了没反应」的错觉 */
.swjump-filtered .alllabel{color:var(--accent-ink)}

/* ── 5. 质感打磨：排版 / 焦点 / 动效 / 点击区 ── */
.card h2,.empty h3,#oneClickResult b,.poptitle{text-wrap:balance}
/* 只给「真正的多行段落」用 pretty。
   ★ 别把带 white-space:nowrap + 省略号的元素列进来：text-wrap 是 white-space
   的 longhand，会把 nowrap 重置成 normal，单行省略静默失效、文字挤成多行。
   真浏览器量到过：whiteSpace=normal / textWrap=pretty（AGENTS §7 第 46 条）。 */
.optnote,.setnote,.gridhint,.cutside-head span,label.chk small{text-wrap:pretty}
#genInfo,#statInfo,#cursorInfo,.matsum,.matrow .n,.boardsize,
.advkv b,.tierbtn .tnum,.advbar .advtx i{font-variant-numeric:tabular-nums}
/* 焦点可见：键盘用户能看清自己在哪（不依赖 hover，也不靠颜色单独传达） */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tierbtn:focus-visible,.toolbtn:focus-visible,.iconbtn:focus-visible,
.exportbar button:focus-visible{outline-offset:2px}
/* 过渡只指定真正变化的属性，避免 transition:all 带来的意外动画；
   按压缩放统一 0.96，保证可中断（transition 而非 keyframes） */
button{transition:background-color .15s ease,border-color .15s ease,
  color .15s ease,scale .15s ease}
button:active{scale:.96;transform:none}
.advbar:active,.toolbtn:active,.iconbtn:active,.preset:active{scale:.96;transform:none}
#thumb{outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
#swatches .sw,#usedSwatches .sw{min-width:0}
/* 尊重系统「减少动效」偏好：保留所有静态状态线索，只去掉运动 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ── 6. 再压一轮低频留白（量测后追加，目标：常见窗口下左栏零滚动） ── */
.leftscroll>.card{padding:9px 12px 10px}
.card h2{margin-bottom:4px}
.drop{height:78px}
.optnote{display:none}          /* 说明已在按钮副标题里，不再重复占一行 */
.manual>summary{min-height:26px;font-size:10px}
.manual-body{padding-top:5px}
.manual-body .advbar.advminor{height:30px;margin-bottom:5px}
/* 30px 的矮条放不下「标题 + 副标题」两行：副标题收进 title，
   标题单行显示，避免字挤在一起（完整说明仍在 DOM 里）。 */
.manual-body .advbar.advminor .advtx i{display:none}
.manual-body .advbar.advminor .advtx b{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.manual-body .preset{height:32px}
.manual-body .preset small{display:none}
.manual-body .multibox{height:24px;margin-top:4px}
.manual-body .boardsize{margin-top:4px;padding:4px 7px;line-height:1.3}
/* 色系条单行横向滚动，不换行吃掉一整行高度 */
.swjump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.swjump::-webkit-scrollbar{display:none}
.swjump button{flex:0 0 auto;min-width:24px;padding:2px 4px}
/* 结果条默认折叠：只留「标题 + 下载」，出图后不会把左栏挤长。
   展开按钮是静态线索，详情内容仍在 DOM（下载链接照常可查）。
   选择器必须带上 .side.left>.dock，否则会被上面同元素的基础规则
   （特异性更高）覆盖，折叠会静默失效 —— 量测时踩过一次。 */
.side.left>.dock #oneClickResult.fold{padding:6px 12px 7px;max-height:none;overflow:visible}
.side.left>.dock #oneClickResult.fold>span,
.side.left>.dock #oneClickResult.fold small,
.side.left>.dock #oneClickResult.fold .ocl a[data-act="detail"]{display:none}
.side.left>.dock #oneClickResult.fold>b{display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-right:44px;font-size:12px}
.side.left>.dock #oneClickResult.fold>b::before{content:"✓ ";color:#1f7a45}
.side.left>.dock #oneClickResult.fold .ocl{margin-top:4px}
.side.left>.dock #oneClickResult.fold .ocl a{padding:3px 7px;min-height:24px;font-size:10px}
.side.left>.dock .genline{height:26px}
.side.left>.dock .genline>span{height:26px}
.side.left>.dock>.genbar{padding:7px 12px 9px;gap:4px}
/* 一键出图后结果条已经写明格数 / 颗数，底部那两行是重复信息。
   只收起文字、保留 ⓘ 按钮（回归脚本会点它），操作台净高基本不变。
   #genInfo 的 DOM 与文本都保留，完整生成信息弹窗照常可用。 */
.dock.has-result .genline{height:22px;justify-content:flex-end}
.dock.has-result .genline>span{display:none}
.dock.has-result>.genbar{padding-top:5px;padding-bottom:7px}

/* 矮窗口：主操作台优先，进一步压缩低频区，保证四档 + 生成按钮不滚 */
@media(max-height:780px){
  .tierbtn{min-height:52px;padding:4px 8px}
  .tierbtn .tnum{font-size:18px}
  .manual-body .preset{height:29px}
  .side.left>.dock #oneClickResult:not(.fold){max-height:120px}
}
@media(max-height:700px){
  .tierbtn{min-height:46px;padding:3px 7px}
  .tierbtn .tnum{font-size:16px}
  .tierbtn i{display:none}
  .side.left>.dock .genline{height:22px}
  .side.left>.dock .genline>span{height:22px;-webkit-line-clamp:1}
  .leftscroll>.card{padding:7px 11px 8px}
}