/* ================= 模块切换 + 图片面板 + 并入提示词栏的参数 ================= */
  .modbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .modhint{font-size:11.5px;color:var(--dim);min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
  .pane{display:flex;flex-direction:column;gap:12px;min-width:0}
  .pane[hidden]{display:none}

  /* 参考素材卡压一压高度，把位置让给提示词 */
  .pane .vbox .vthumb{width:min(230px,100%)}
  .pane .grid-imgs{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}

  /* 提示词 + 参数：一栏做完 */
  .composer{padding:13px 14px 12px}
  .composer .editor{min-height:186px;max-height:44vh}
  /* 渐变只留在提示词框上；参数条不叠底板、也不加渐变，直接落在平板卡片上 */
  .composer .ctools{background:transparent;border-color:transparent;box-shadow:none}

  /* 参数工具条：小号 chip，一行放不下自然换行（参考即梦底部那排）。 */
  .ctools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;
      padding:9px 10px;background:var(--field2);border:1px solid var(--line);border-radius:var(--radius-control)}
  .ctools .prow{margin:0;gap:6px;flex:0 0 auto}
  .ctools .prow>label{width:auto;flex:none;font-size:11px;color:var(--dim)}
  .ctools .picker{padding:4px 9px;font-size:12px;border-radius:var(--radius-control);flex:0 0 auto;max-width:236px}
  /* 里面的 .pv 原本是 flex:1（基准 0），会让按钮按「只有一个图标」的宽度算出来，
     gpt-image-2.5 这类长名字就被截成 gpt-image-2… 了。这里改成按内容撑开，超长才省略 */
  .ctools .picker .pv{flex:0 1 auto;min-width:0;max-width:178px}
  .ctools .picker .tico{width:18px;height:18px;font-size:10px;border-radius:var(--radius-tag)}
  .ctools .picker .pcar{font-size:9px}
  .ctools .pgrid{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
  .ctools .pcell{gap:6px;flex:0 0 auto;min-width:0}
  .ctools .pcell>label{flex:none;width:auto;font-size:11px}
  .ctools select,.ctools input[type=number]{height:28px;padding:0 8px;font-size:12px;
      border-radius:var(--radius-control);flex:0 0 auto;min-width:64px}
  .ctools .ttnote,.ctools .fhint{flex-basis:100%;margin:0;font-size:10.5px;line-height:1.5;
      min-height:0;color:var(--dim)}
  .ctools .ttnote{margin-top:-2px}
  .ctools .durrow #duration{width:54px;text-align:center;min-width:0}
  .ctools #durRange{width:104px;min-width:84px}
  .ctools .spacer{flex:1}
  .ctools .primary{height:30px;padding:0 16px;border-radius:var(--radius-control);font-size:12.5px;flex:none}

  /* ---------- 参数栏：原生 select 换成自绘下拉（和设置里的服务商下拉同一套材质） ---------- */
  select.native-hidden{display:none!important}
  .fselbtn{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;height:30px;
      padding:0 9px;border-radius:var(--radius-control);border:1px solid var(--line2);background:var(--field);
      color:var(--text);font:12.5px var(--mono);text-align:left;cursor:pointer;
      transition:background .15s,border-color .15s,box-shadow .15s}
  .fselbtn:hover{background:var(--hover)}
  .fselbtn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg2)}
  .fselbtn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg2)}
  .fselbtn .fselv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 比例的象形图：按 16:9 这种比例画一个小矩形，一眼看出长宽 */
  .fselg{display:none;flex:none;align-items:center;color:var(--dim)}
  .fselg.on{display:inline-flex}
  .fselbtn[aria-expanded="true"] .fselg{color:var(--accent)}
  .rglyph{flex:none;width:18px;height:18px;display:inline-flex;align-items:center;
      justify-content:center;color:currentColor}
  .rglyph i{display:block;border:1.3px solid currentColor;border-radius:2.5px;opacity:.9}
  .rglyph.ad i{width:13px;height:13px;border-style:dashed;opacity:.55}
  .ddopt .rglyph{opacity:.85}
  .ddopt.sel .rglyph{opacity:1}
  .fselbtn .fselc{flex:none;width:11px;height:11px;color:var(--dim);
      transition:transform .18s cubic-bezier(.16,1,.3,1)}
  .fselbtn[aria-expanded="true"] .fselc{transform:rotate(180deg)}
  .fselbtn:disabled{opacity:.45;cursor:not-allowed}
  .ctools .fselbtn{flex:0 0 auto;min-width:64px;height:28px;padding:0 8px;
      border-radius:var(--radius-control);font-size:12px}
  /* 弹出面板：固定定位（不受父容器 overflow 裁剪），材质/圆角/阴影与设置页一致。
     参数下拉不要外描边：只靠阴影和圆角把浮层托起来（选中项自己的内描边保留）。 */
  .ddmenu.pop{position:fixed;left:0;top:0;right:auto;padding:5px;
      max-width:min(320px,calc(100vw - 16px));z-index:130;
      border:0;box-shadow:var(--dd-shadow);
      /* 比例有 8 项（8×40 + 10 内边距 = 330），320 会把最后一项裁掉并逼出滚动条；
         提到 360 后 8 项能完整铺开，当前内容不再滚动（选项再多时仍可滚）。 */
      max-height:min(360px,calc(100vh - 24px))}
  .ddmenu.pop .ddopt{height:40px;font-size:13.5px}

  /* 图片面板：分辨率分段 + 数量 */
  .seg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--radius-pill);background:var(--field);
      border:1px solid var(--line)}
  .seg button{height:24px;min-width:42px;padding:0 9px;border:0;border-radius:var(--radius-pill);
      background:transparent;color:var(--dim);font-size:12px;cursor:pointer;transition:.14s}
  .seg button:hover{color:var(--text)}
  .seg button.on{background:var(--accent);color:#fff;font-weight:600}
  #imgCount{width:48px;text-align:center;min-width:0}
  #imgCountRange{width:104px;min-width:84px}
  .qtyrow{flex:0 0 auto}
  /* 单路模式一次只出 1 张，数量这一整组直接收起来（留着只会占一行还把按钮挤下去） */
  .qtyrow.gone{display:none!important}

  /* 图片大图预览 */
  #modal img{max-width:92vw;max-height:88vh;border-radius:var(--radius-control);display:block}
  #modal.show.img #mvideo{display:none}
  #modal img[hidden]{display:none}

  /* 图片条目：缩略图直接铺满，占位用一层很淡的微光 */
  .oitem .ov img{width:100%;height:100%;object-fit:cover;display:block;
      border-radius:inherit;background:var(--panel2)}
  .oph{position:absolute;inset:0;border-radius:inherit;
      background:linear-gradient(100deg,var(--panel2) 28%,var(--hover) 50%,var(--panel2) 72%);
      background-size:220% 100%;animation:shimmer 1.5s linear infinite}
  @keyframes shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}

  /* 图片数量滑块：与时长滑块同一套观感 */
  #imgCountRange{-webkit-appearance:none;appearance:none;height:20px;margin:0;
      background:transparent;cursor:pointer}
  #imgCountRange::-webkit-slider-runnable-track{height:4px;border-radius:2px;
      background:linear-gradient(to right,var(--accent) 0 var(--p,0%),var(--line2) var(--p,0%) 100%)}
  #imgCountRange::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;
      border-radius:50%;background:var(--accent);border:2px solid var(--panel);
      box-shadow:0 0 0 1px var(--accent-line)}
  #imgCountRange::-moz-range-track{height:4px;border-radius:2px;background:var(--line2)}
  #imgCountRange::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
  #imgCountRange::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);
      border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent-line)}

  .setnote{margin:-6px 0 0 88px;font-size:11px;color:var(--d-text3);line-height:1.6}

  .modbar{padding:0 2px}

  #btnUsagePop[hidden]{display:none!important}
  /* 按下时轻微缩放。.picker 和下拉框不加：缩放会让 1px 描边发虚，见 main-params.css */
  button.primary,button.mini,.hbtn,.hentry,.hwork{
      transition:background .15s,border-color .15s,color .15s,transform var(--dur-spring) var(--ease-spring)}
  button.primary:active:not(:disabled),button.mini:active:not(:disabled),
  .hbtn:active,.hentry:active,.hwork:active{transform:scale(var(--press-scale))}
  /* 设置页签：只有模型服务页才有测试、保存这些按钮 */
  #setTabSeg{align-self:flex-start}
  .setpane{display:flex;flex-direction:column;gap:inherit}
  .setpane[hidden]{display:none}
  .setw[data-tab="general"] .setf #setTest,.setw[data-tab="general"] .setf #setLoad,
  .setw[data-tab="general"] .setf #setClear,.setw[data-tab="general"] .setf #setSave{display:none}
  #setManaged{display:none;margin:0}
  :root[data-role="user"]:not([data-keys="managed"]) .setw:not([data-tab="general"]) #setManaged{display:block}
  .setrow .outdir{flex:1;min-width:0;height:34px;margin:0;padding:0 10px;background:var(--d-input);border-color:var(--d-line)}
  /* 弹出层圆角：弹窗 > 浮层 > 小提示，内层控件再往下收一档 */
  .setw,.fbw{border-radius:var(--radius-modal)}
  .upop,.histpop,.pmenu,.ddmenu,.ddmenu.pop,.durpop,#logPop,#atmenu{border-radius:var(--radius-card)}
  .toast{border-radius:var(--radius-control)}
  /* 报错的 toast 要一眼看到，不走玻璃 */
  #toast.bad{background:var(--err-bg);color:var(--err);box-shadow:0 0 0 1px var(--err-line),var(--glass-shadow)}
  /* 内容区标题栏：玻璃层只留细描边，内容滚上来时靠 .glass-strong 补底色 */
  header.glass{--glass-shadow:0 0 0 transparent;border-bottom:0;transition:background .2s}
  /* AI 助手视图：只换右侧区域，侧边栏不动 */
  /* 没打开时放在屏幕外而不是 display:none：对话提前排好版，切过来直接显示 */
  #chatView{position:fixed;top:0;left:100vw;width:100vw;height:100vh;visibility:hidden}
  body[data-view] .ark-shell-main > header,
  body[data-view] .ark-shell-main > main,
  body[data-view] #logFab,
  body[data-view] #logPop,
  body[data-view] #appver{display:none}
  body[data-view="chat"] #chatView{position:static;width:auto;height:100vh;height:100dvh;visibility:visible}
  #chatFrame{display:block;width:100%;height:100%;border:0}
  /* 窄屏：内容区标题让开顶部那一行；放不下左右分栏时改成上下排 */
  @media (max-width:899.98px){
    header{top:52px}
    body[data-view="chat"] #chatView{height:calc(100vh - 52px);height:calc(100dvh - 52px)}
  }
  @media (max-width:760px){
    main{grid-template-columns:minmax(0,1fr)}
    #splitter{display:none}
  }
  /* 图片面板的提交按钮贴右，不跟工具条换行 */
  .ctools #btnSubmitImg{margin-left:auto}
  /* 参数提示与任务说明重复，收起，保持工具条紧凑 */
  .ctools #paramHint{display:none}


  /* 有侧边栏的宽度下，生成页撑满窗口：参考内容高度不变，提示词框吃掉剩余高度，
     参数和提交按钮落在底部；输出列表在卡片里滚动。屏幕矮时提示词框保持最小高度，整页滚动 */
  @media (min-width:900px){
    /* 只作用于生成页：素材库、案例库也加载这份样式，它们的内容区靠 margin:auto 居中，变成 flex 项会缩窄 */
    body:not([data-view]) .ark-shell-main:has(#composerV){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
    body:not([data-view]) .ark-shell-main:has(#composerV)>main{flex:1}
    main>section>.pane{flex:1}
    .composer{flex:1;display:flex;flex-direction:column}
    .composer .editor{flex:1 1 186px;max-height:none}
    #outCard{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
    .outlist{flex:1 1 0;min-height:0;max-height:none}
  }