/* 批量调整尺寸 — 容器详情视图（顶部 tab：1 原生工具「批量调整尺寸」+ 3 外链直跳）
   外链不再内嵌 iframe（外部站点样式与框架冲突、显丑），点击 tab 直接新标签页跳外链。
   令牌复用 resize-tool.css / tools.css：--text --text-2 --text-3 --border --surface --icon-bg --bg
   视觉对齐 HELIX：零圆角感、发丝线分层、无投影、无渐变（与弹窗层规范一致） */

#view-imgadjust {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* 顶部 tab 条：宽度与下方内容同口径（--tool-maxw），左边缘与 .rsz 内容框对齐。
   外层只负责对齐与上下留白，真正的「分段控件」容器是 .ia-tabseg。 */
.view-imgadjust .ia-tabs {
  display: flex;
  align-items: center;
  max-width: var(--tool-maxw, 1280px);
  margin: 0 auto;
  width: 100%;
  padding: 12px 20px 4px;
  flex-wrap: wrap;
}
/* 分段控件外壳：与「PDF 调整」页的功能条同款 —— 1px 发丝线 + 极浅投影 + 实心选中。
   原来做成浏览器标签页（8px 上部圆角 + 选中项白底 + 顶边线 + top:1px），
   与本站零圆角感、只靠发丝线分层的皮肤 DNA 不符。 */
.view-imgadjust .ia-tabseg {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-btn) + 4px);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.view-imgadjust .ia-tab {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--hx-t14);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.view-imgadjust .ia-tab:hover {
  background: var(--icon-bg);
  border-color: transparent;
  color: var(--text);
}
.view-imgadjust .ia-tab.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.view-imgadjust .ia-tab.is-on:hover {
  background: var(--btn-p-hover);
  border-color: var(--btn-p-hover);
  color: #fff;
}
.view-imgadjust .ia-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 面板容器：绝对填充，tab 间互斥显示 */
.view-imgadjust .ia-body {
  flex: 1;
  min-height: 0;
  position: relative;
}
.view-imgadjust .ia-panel {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.view-imgadjust .ia-panel.is-on {
  display: flex;
}

/* 原生工具 tab（批量调整尺寸）：整块可滚动 */
.view-imgadjust .ia-panel[data-panel="resize"] {
  overflow: auto;
}
/* #view-resize 必须是 flex 容器：面板高度靠它继续往 .rsz 传，
   否则 .rsz 的 min-height:100% 参照 auto 高度退化成内容高，主区吃不满剩余空间 */
.view-imgadjust .ia-panel[data-panel="resize"] #view-resize {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
/* 脚本会切 #view-resize.hidden（拖放监听读这个属性），display:flex 会盖掉 [hidden] 的默认样式 */
.view-imgadjust .ia-panel[data-panel="resize"] #view-resize[hidden] { display: none; }