/* ============================================================
   ROFilter dialogs.css — 对话框 / 膜选型表格 / 选项
   ============================================================ */

.dlg-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 35, 60, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  /* 弹窗与视口之间留出安全边距：弹窗高度改用「遮罩内容区」计算（见 .dlg max-height），
     不再单靠 vh —— 移动端地址栏/工具栏会动态改变可视高度，只用 vh 会把底部按钮挤出屏幕 */
  padding: 14px;
  box-sizing: border-box;
}
.dlg {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  min-width: 380px;
  max-width: 86vw;
  box-shadow: 0 12px 40px rgba(0, 40, 80, .3);
  max-height: 88vh;              /* 旧浏览器兜底 */
  max-height: min(88vh, 100%);   /* 最终值：不超过遮罩内容区，随可视高度实时收敛 */
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dlg-sm { min-width: 320px; }
.dlg-xl { width: 1080px; }
.dlg-lg { width: 760px; }

.dlg-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #002f5d;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 8px 14px;
  font-weight: 700; color: #fff;
  font-size: 13px;
}
/* 关闭按钮：所有对话框统一放在右上角的图标按钮（与 MCP 服务对话框一致） */
.dlg-x, .ui-x {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  font-size: 15px; line-height: 1; cursor: pointer;
  color: rgba(255, 255, 255, .82);
  transition: background .15s ease, color .15s ease;
}
.dlg-x:hover, .ui-x:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.dlg-x:active, .ui-x:active { background: rgba(255, 255, 255, .3); }
.dlg-x:focus-visible, .ui-x:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 1px; }

/* 弹窗结构：头部/底部常驻，正文自适应剩余高度并内部滚动。
   正文不再写死 max-height —— 写死会在矮视口（笔记本分屏、浏览器缩放、手机地址栏展开）
   把「保存/取消」按钮挤出弹窗可视区。 */
.dlg-body { padding: 12px 14px; overflow: auto; flex: 1 1 auto; min-height: 0; }

/* ============ 统一 UI 弹窗（ui.js：confirm/prompt，毛玻璃风格，与主界面一致） ============ */
.ui-mask {
  position: fixed; inset: 0;
  background: rgba(20, 45, 75, .38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 4000;
  animation: ui-fade .18s ease;
}
.ui-mask.hidden { display: none; }
.ui-dialog {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(185, 206, 228, .9);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 40, 80, .28);
  width: 400px; max-width: 92vw;
  overflow: hidden;
  animation: ui-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.ui-dialog-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #002f5d;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 10px 8px 16px;
}
.ui-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dialog-body { padding: 16px; font-size: 13px; color: #2c3e50; line-height: 1.5; text-align: left; }
/* 多行提示逐行渲染：行内零额外间距（仅 1.5 行高），段落之间一个小间距 */
.ui-dialog-body .ui-msg-para { text-align: left; }
.ui-dialog-body .ui-msg-para + .ui-msg-para { margin-top: 8px; }
.ui-dialog-body .ui-msg-line { padding: 0; line-height: 1.5; word-break: break-word; }
/* 多项提示自动编号：段落内多于一行时显示 1. 2. 3. 序号；仅一行时不加任何前缀 */
.ui-dialog-body .ui-msg-para { counter-reset: uimsg; }
.ui-dialog-body .ui-msg-line:not(:only-child)::before {
  counter-increment: uimsg;
  content: counter(uimsg) ". ";
}
.ui-dialog-body .l-msg { margin: 0 0 8px; text-align: left; white-space: pre-line; }
.ui-input {
  width: 100%; box-sizing: border-box;
  height: 30px; padding: 0 8px;
  border: 1px solid #b9cee4; border-radius: 5px;
  font-size: 13px;
}
.ui-input:focus { outline: 1px solid #2f7fc1; }
.ui-dialog-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #e3eef7;
}
.ui-ok.danger { background: linear-gradient(#e75a3a, #d14222); border-color: #b5381d; color: #fff; }
/* choose 动态插入的取消按钮：与默认「取消」同宽同风格（margin-left:auto 让它靠右单独成组） */
.ui-dialog-footer .ui-choice-cancel { min-width: 76px; }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- 系统选项对话框 Tab（显示选项 | 单位） ---------- */
.opt-tabs { display: flex; gap: 6px; border-bottom: 2px solid #dfeeff; margin-bottom: 10px; }
.opt-tab {
  border: 1px solid #b9cee4; border-bottom: none; background: #eef5fb; color: #2c4a66;
  border-radius: 6px 6px 0 0; padding: 6px 18px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.opt-tab.active { background: #002f5d; color: #fff; border-color: #002f5d; }
/* 系统选项对话框：Tab 切换时对话框整体尺寸固定（高度固定，内部滚动）
   ——需求 2026-10-14：切到单位页时宽度曾被单位网格撑爆（380→1216px），现固定为显示选项页的尺寸 */
#optionsDialog .dlg { width: 380px; }
/* 系统选项：固定尺寸，切换「显示选项 / 单位 / 其他」时对话框不再忽高忽低；
   各页签内容高度不一，不足时在内容区垂直居中（对齐不了就居中）。 */
#optionsDialog .dlg { height: 434px; }
#optionsDialog .dlg-body { display: flex; flex-direction: column; overflow: hidden; }
#optionsDialog .opt-tabs { flex: 0 0 auto; }
#optionsDialog #optPaneDisplay,
#optionsDialog #optPaneUnits,
#optionsDialog #optPaneOther {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 膜元件编辑对话框：固定宽度，展开/收起「高级选项」仅改变高度、不改变宽度（任务11）
   宽度足够时高级系数两列排布（见 admin.css .elem-adv .adv-grid），窄屏由 max-width:86vw 收敛为一列 */
#elemEditDialog .dlg { width: 720px; }
.dlg-fixed-h { max-height: 78vh; min-height: 0; height: auto; box-sizing: border-box; overflow-y: auto; }
/* 单位页：名称在左 + 下拉在右（需求：名称+选项，无滚动条；高度随内容自适应） */
#optPaneUnits { overflow: visible; min-width: 0; }
#optPaneUnits .units-grid { grid-template-columns: minmax(0, 1fr); }
#optPaneUnits .unit-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
#optPaneUnits .unit-item label { flex: 0 0 auto; white-space: nowrap; }
#optPaneUnits .unit-item select { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.units-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* 单位选择纵向排列（需求：一列一单位，标签左/下拉右） */
.units-grid.units-v { grid-template-columns: 1fr; gap: 9px; }
.unit-item { display: flex; flex-direction: column; gap: 5px; }
.unit-item label { color: #2c4a66; font-size: 12.5px; font-weight: 600; }
.unit-item select { height: 30px; border: 1px solid #b9cee4; border-radius: 2px; background: #fff; padding: 0 6px; width: 100%; max-width: 260px; }
.units-tip { color: #5a6b7b; font-size: 11.5px; margin-top: 12px; line-height: 1.6; border-top: 1px dashed #d5e2ee; padding-top: 8px; }
.dlg-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--c-border-light);
  background: #f6f9fc;
}

/* ---------- 表单网格（对话框内） ---------- */
.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
}
.form-grid label { text-align: right; color: #2c4a66; white-space: nowrap; min-width: 56px; }
/* 表单输入框统一高度与最大宽度：邮箱框此前只有浏览器默认样式（20px 高、系统边框），
   和同列其它 24px 蓝边输入框放一起显得「格格不入」；同时收一个最大宽度，
   避免 320px 弹窗里输入框被拉满、与标签宽度比例失衡 */
.form-grid input:not([type="checkbox"]):not([type="radio"]) { height: 24px; max-width: 208px; box-sizing: border-box; }

/* ---------- 智能推荐弹窗 ---------- */
.rec-body { font-size: 12.5px; color: #23384c; }
/* 智能推荐·品牌 Tab（多品牌推荐：每个品牌一个页签，内容为该品牌最优元件方案） */
.rec-brand-tabs { margin: 6px 0 8px; flex-wrap: wrap; }
.rec-brand-tabs .rec-brand-tab { font-size: 12px; padding: 6px 12px; }
.rec-brand-panes { max-height: 46vh; overflow: auto; padding-right: 2px; }
.rec-brand-pane.hidden { display: none; }
.rec-struct { margin: 4px 0 6px; color: #123c5e; font-size: 12.5px; }
.rec-inputs { color: #5a6b7b; font-size: 12px; margin-bottom: 8px; }
.rec-inputs b { color: #123c5e; }
.rec-main {
  border: 1px solid #bcd8ef; background: linear-gradient(#f2f9ff, #e6f2fc);
  border-radius: 5px; padding: 10px 12px; margin-bottom: 10px;
}
.rec-main.rec-has-warn { border-color: #eccf8e; background: linear-gradient(#fdf9f0, #faf3e0); }
.rec-main-title { font-size: 15px; font-weight: 700; color: #0e4d86; }
.rec-main-elem { font-size: 14px; font-weight: 700; color: #123c5e; margin-top: 2px; }
.rec-main-sub { font-size: 11px; font-weight: 400; color: #5a6b7b; }
.rec-main-ves { margin-top: 4px; color: #23384c; }
.rec-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.rec-table th, .rec-table td { border: 1px solid #d5e3ef; padding: 4px 8px; font-size: 12px; text-align: left; }
.rec-table th { background: linear-gradient(#0a4d8c, #002f5d); color: #fff; }
.rec-metrics { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #5a6b7b; font-size: 12px; margin-bottom: 8px; }
.rec-metrics b { color: #0e7a46; }
.rec-alts { margin-bottom: 8px; color: #5a6b7b; font-size: 12px; }
.rec-alt { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border: 1px solid #bcd8ef;
  border-radius: 10px; color: var(--c-link); cursor: pointer; background: #f6fafe; }
.rec-alt:hover { background: #e6f2fc; }
.rec-sub-title { font-weight: 700; color: #123c5e; margin: 6px 0 3px; font-size: 12.5px; }
.rec-reason { color: #3d5771; font-size: 12px; margin: 2px 0; padding-left: 2px; }
.rec-warns { margin-top: 6px; }
.rec-warn { color: #a05a00; font-size: 12px; margin: 2px 0; }
.rec-error { color: var(--c-warn); padding: 16px 8px; text-align: center; }
.form-grid input, .form-grid select { width: 100%; }

/* ---------- 膜选型对话框 ---------- */
.elem-filter {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  margin-bottom: 8px;
}
.elem-brand-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--c-border-light);
}
/* 推荐页签（⭐ 推荐置顶，橙色强调） */
.brand-tab.rec-tab {
  color: #b06e04;
  border-bottom-color: transparent;
}
.brand-tab.rec-tab:hover { color: #f39c12; }
.brand-tab.rec-tab.active {
  color: #fff;
  border-bottom-color: #f39c12;
  background: #f39c12;
  border-radius: 6px 6px 0 0;
}
/* 推荐依据提示条 */
tr.rec-banner td {
  background: #fff8e8;
  color: #8a6410;
  font-size: 11.5px;
  padding: 6px 10px;
  border: 1px solid #f0d79a;
  border-radius: 6px;
  line-height: 1.6;
}
.brand-tab {
  border: none; background: none; cursor: pointer;
  padding: 6px 16px; font-size: 12px; color: var(--c-text-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.brand-tab:hover { color: var(--c-accent, #f39c12); }
.brand-tab.active {
  color: var(--c-accent, #f39c12); font-weight: 600;
  border-bottom-color: var(--c-accent, #f39c12);
}
.elem-quick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
}
.elem-quick .qsep { color: var(--c-border); }
.elem-quick .link-btn { font-size: 12px; }
.elem-filter .txt { width: 200px; }
.elem-grid-wrap {
  max-height: 420px; overflow: auto;
  border: 1px solid var(--c-border-light);
}
.elem-grid th { position: sticky; top: 0; z-index: 5; text-align: center; }
.elem-grid td { white-space: normal; }
.elem-grid tr.brand-head td {
  background: #f2f7fb; font-weight: 600; color: #1d4e79;
  text-align: left; letter-spacing: .5px; font-size: 12px;
  padding: 4px 10px;
}
.elem-grid tr.brand-head { cursor: pointer; user-select: none; }
.elem-grid tr.brand-head:hover td { background: #e4eef7; }
.brand-caret { display: inline-block; width: 14px; color: #005596; transition: transform .15s; }
.elem-grid tr.sel-row td { background: #cfe6fb !important; }
.elem-grid tr:hover td { background: #eef5fd; cursor: pointer; }
.elem-grid .rad { cursor: pointer; }
.elem-count { margin-top: 6px; color: var(--c-text-sub); font-size: 11px; }

/* ---------- rofilter.cn 选项 ---------- */
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 400px;
  overflow: auto;
}
.opt-item {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed var(--c-border-light);
  padding: 5px 2px;
}
.opt-item .opt-name { color: #2c4a66; }
.opt-item .opt-state {
  font-size: 11px; padding: 1px 8px; border-radius: 8px;
  background: #eef2f6; color: #667; cursor: pointer; border: 1px solid #ccd;
}
.opt-item .opt-state.on { background: #d3f1dd; color: #14582a; border-color: #7dc794; }

/* ---------- 导出格式选择对话框 ---------- */
.export-tip { color: var(--c-text-sub); font-size: 11.5px; margin: 0 0 10px; line-height: 1.5; }
.export-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.export-opt {
  border: 1px solid var(--c-border-light); border-radius: 5px;
  padding: 14px 8px; text-align: center; cursor: pointer;
  background: linear-gradient(#fdfeff, #f2f7fc);
  transition: all .15s;
}
.export-opt:hover {
  border-color: var(--c-primary);
  background: linear-gradient(#e8f3fe, #d5e9fb);
  box-shadow: 0 2px 8px rgba(0,80,160,.15);
  transform: translateY(-1px);
}
.export-opt .eo-ico { font-size: 26px; }
.export-opt .eo-name { font-weight: 700; color: #123c5e; margin: 6px 0 2px; font-size: 13px; }
.export-opt .eo-desc { color: var(--c-text-sub); font-size: 10.5px; }

/* ---------- 通用方案（Generic Schemes）对话框 ---------- */
.sch-body { font-size: 12.5px; color: #23384c; }
.sch-intro { color: #5a6b7b; font-size: 12px; margin-bottom: 10px; line-height: 1.6; }
/* 行业左 / 方案右 两栏布局 */
.sch-layout { display: flex; gap: 12px; align-items: flex-start; }
.sch-nav {
  flex: 0 0 172px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid #c5dbef; border-radius: 5px;
  background: #f4f9fd; padding: 6px;
  position: sticky; top: 0;
}
.sch-nav-item {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 7px 8px; cursor: pointer;
  text-align: left; font-size: 12px; color: #2c4a66;
  transition: all .12s;
  white-space: nowrap; min-width: 0;
}
.sch-nav-item:hover { background: #e6f2fc; }
.sch-nav-item.active {
  background: #f39c12;
  color: #fff; border-color: #e08a06; font-weight: 700;
  box-shadow: 0 1px 3px rgba(243,156,18,.35);
}
.sch-nav-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-nav-en { font-size: 10px; opacity: .75; }
.sch-nav-count {
  font-size: 10px; min-width: 18px; text-align: center;
  border-radius: 9px; padding: 1px 5px;
  background: #dcedf9; color: #1a5d9e;
}
.sch-nav-item.active .sch-nav-count { background: rgba(255,255,255,.28); color: #fff; }
.sch-main { flex: 1; min-width: 0; }
.sch-group { margin-bottom: 14px; }
.sch-group-hd {
  font-weight: 700; color: #123c5e; font-size: 13px;
  border-bottom: 1px solid #bcd8ef; padding-bottom: 4px; margin-bottom: 8px;
}
.sch-group-en { font-weight: 400; color: #7a8b9b; font-size: 11px; margin-left: 4px; }
.sch-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sch-card {
  border: 1px solid #c5dbef; border-radius: 5px; padding: 10px 12px;
  background: linear-gradient(#f8fcff, #eef6fd);
  display: flex; flex-direction: column; gap: 6px;
  transition: all .15s;
}
.sch-card:hover { border-color: var(--c-primary); box-shadow: 0 2px 10px rgba(0,80,160,.12); }
.sch-card-title { font-size: 14px; font-weight: 700; color: #0e4d86; }
.sch-card-desc { font-size: 11.5px; color: #5a6b7b; }
.sch-tbl { width: 100%; border-collapse: collapse; }
.sch-tbl th, .sch-tbl td {
  border: 1px solid #d5e3ef; padding: 3px 7px; font-size: 11.5px; text-align: left;
}
.sch-tbl th { background: linear-gradient(#0a4d8c, #002f5d); color: #fff; font-weight: 600; }
.sch-tbl td:first-child { color: #5a6b7b; font-weight: 600; white-space: nowrap; }
.sch-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sch-badge {
  display: inline-block; padding: 1px 9px; border-radius: 9px;
  background: #dcedf9; color: #1a5d9e; border: 1px solid #a9cdf0; font-size: 11px;
}
.sch-notes { color: #a05a00; font-size: 11.5px; line-height: 1.5; }
.sch-card-actions { display: flex; gap: 6px; align-items: flex-end; margin-top: auto; }
.sch-apply-btn { align-self: flex-end; margin-top: 2px; }
.sch-apply-only {
  align-self: flex-end; margin-top: 2px;
  border: 1px solid var(--c-primary); color: #0e4d86; background: #fff;
}
.sch-apply-only:hover { background: #e6f2fc; }

/* 通用方案对话框：固定尺寸（不随内容伸缩）、水平垂直居中（overlay 已 flex 居中，锁定高度即可） */
#schDialog .dlg {
  width: 1080px;
  height: 640px;
  max-width: 92vw;
  max-height: 88vh;              /* 旧浏览器兜底 */
  max-height: min(88vh, 100%);   /* 同 .dlg：随可视高度收敛，保证底部按钮常驻可见 */
}
#schDialog .dlg-body { flex: 1; }

/* 多选一（导出格式选择）：竖排大按钮 */
.ui-choices { display: flex; flex-direction: column; gap: 8px; }
.ui-choice {
  height: 40px; font-size: 13.5px;
  background: linear-gradient(#ffffff, #e8f1fb);
  border: 1px solid #b9cee4; border-radius: 8px;
}
.ui-choice:hover { background: linear-gradient(#ffffff, #d8e9fa); border-color: #2f7fc1; }
.ui-choice.primary { background: linear-gradient(#f5a623, #e8920c); border-color: #d9850a; color: #fff; font-weight: 700; }
/* 横排形态：确认/取消、是/否这类二元或三元选择，按传统做法左右排列 */
.ui-choices.inline {
  flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.ui-choices.inline .ui-choice {
  height: 32px; padding: 0 14px; font-size: 12.5px; flex: 0 0 auto;
  background: linear-gradient(#ffffff, #eef4fb);
}
/* 横排形态里的主操作按钮必须保留橙色实底：
   .ui-choices.inline .ui-choice 与 .ui-choice.primary 特异性相同且写在后面，
   会把 primary 的橙色背景改成浅色渐变，只剩白字压在浅底上 —— 按钮文字看不见。 */
.ui-choices.inline .ui-choice.primary {
  background: linear-gradient(#f5a623, #e8920c);
  border-color: #d9850a;
  color: #fff;
  font-weight: 700;
}
.ui-choices.inline .ui-choice.primary:hover {
  background: linear-gradient(#f7b130, #e8920c);
  border-color: #c97c07;
  color: #fff;
}
.ui-choices.inline .ui-choice.primary:active {
  background: linear-gradient(#e8920c, #d9850a);
  color: #fff;
}

/* ---------- 导出格式图标（24×24 线性文件图标，替代原先的 emoji） ---------- */
.exp-ico {
  width: 19px; height: 19px; flex: 0 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.exp-ico-xlsx { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgMS42aDkuMkwyMC40IDcuOFYyMWExLjYgMS42IDAgMCAxLTEuNiAxLjZINUExLjYgMS42IDAgMCAxIDMuNCAyMVYzLjJBMS42IDEuNiAwIDAgMSA1IDEuNnoiIGZpbGw9IiMxZDcwNDQiLz48cGF0aCBkPSJNMTQuMiAxLjZsNi4yIDYuMmgtNi4yeiIgZmlsbD0iIzEyNTEyZiIvPjxyZWN0IHg9IjciIHk9IjEwLjQiIHdpZHRoPSIxMCIgaGVpZ2h0PSI4LjYiIHJ4PSIwLjgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC45NSIvPjxwYXRoIGQ9Ik03IDE0LjNoMTBNNyAxNy40aDEwTTEwLjMgMTAuNHY4LjZNMTMuNyAxMC40djguNiIgc3Ryb2tlPSIjMWQ3MDQ0IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="); }
.exp-ico-docx { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgMS42aDkuMkwyMC40IDcuOFYyMWExLjYgMS42IDAgMCAxLTEuNiAxLjZINUExLjYgMS42IDAgMCAxIDMuNCAyMVYzLjJBMS42IDEuNiAwIDAgMSA1IDEuNnoiIGZpbGw9IiMyYjU3OWEiLz48cGF0aCBkPSJNMTQuMiAxLjZsNi4yIDYuMmgtNi4yeiIgZmlsbD0iIzFjM2Y3NSIvPjxwYXRoIGQ9Ik03LjQgMTEuNGg5LjJNNy40IDE0LjJoOS4yTTcuNCAxN2g2LjIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=="); }
.exp-ico-pdf { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgMS42aDkuMkwyMC40IDcuOFYyMWExLjYgMS42IDAgMCAxLTEuNiAxLjZINUExLjYgMS42IDAgMCAxIDMuNCAyMVYzLjJBMS42IDEuNiAwIDAgMSA1IDEuNnoiIGZpbGw9IiNiMzI2MWUiLz48cGF0aCBkPSJNMTQuMiAxLjZsNi4yIDYuMmgtNi4yeiIgZmlsbD0iIzdmMWExNCIvPjxwYXRoIGQ9Ik03LjIgMTEuMmg0LjZhMi4zIDIuMyAwIDAgMSAwIDQuNkg4LjZ2Mi42SDcuMnoiIGZpbGw9IiNmZmZmZmYiLz48cGF0aCBkPSJNOC42IDEyLjVoMy4xYTEgMSAwIDAgMSAwIDJIOC42eiIgZmlsbD0iI2IzMjYxZSIvPjwvc3ZnPg=="); }
.ui-choice { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-left: 20px; text-align: left; }
.ui-choice:hover .exp-ico { transform: scale(1.08); }
.exp-ico { transition: transform .12s ease; }

/* ---------- MCP 服务对话框（顶栏按钮打开，独立于系统选项） ---------- */
#mcpDialog .dlg { width: 620px; }
#optPaneMcp { min-width: 0; }
.mcp-wrap { display: flex; flex-direction: column; gap: 10px; }
.mcp-state {
  font-size: 12.5px; color: #2c4a66; line-height: 1.7;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.mcp-badge { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; border: 1px solid; }
.mcp-badge.on { color: #1f8a5b; background: #e8f7ef; border-color: #cfe9da; }
.mcp-badge.off { color: #8b99a8; background: #f2f5fa; border-color: #e3e8ef; }
.mcp-meta {
  font-size: 11.5px; color: #6b7c93; background: #f7f9fc;
  border: 1px solid #eef2f8; border-radius: 4px; padding: 1px 7px;
}
.mcp-row { display: flex; gap: 8px; align-items: center; }
.mcp-row input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid #b9cee4; border-radius: 4px; font-size: 12.5px; color: #1f2d3d;
}
.mcp-row .btn { flex: 0 0 auto; }
.mcp-token { border: 1px solid #f3ddc2; background: #fdf8ef; border-radius: 6px; padding: 8px 10px; }
.mcp-token-label { font-size: 11.5px; color: #a35b12; margin-bottom: 6px; }
.mcp-token-val { display: flex; gap: 8px; align-items: center; }
.mcp-token-val code {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: #1f2d3d; word-break: break-all;
  background: #fff; border: 1px solid #e3e8ef; border-radius: 4px; padding: 5px 8px;
}
.mcp-cfg { border: 1px solid #e3e8ef; border-radius: 6px; overflow: hidden; }
.mcp-cfg-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; background: #f7f9fc; border-bottom: 1px solid #eef2f8;
}
.mcp-cfg-tabs { display: flex; gap: 4px; }
.mcp-cfg-tab {
  border: 1px solid transparent; background: transparent; color: #5a6b7b;
  font-size: 12px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
}
.mcp-cfg-tab.active { background: #fff; border-color: #d5e2ee; color: #002f5d; font-weight: 600; }
#mcpCfgPre {
  margin: 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.55; color: #1f2d3d;
  background: #fbfcfe; max-height: 220px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
  font-family: Consolas, Menlo, Monaco, monospace;
}

/* 用户编辑对话框：MCP 每日上限（次数 + 不限） */
.mcp-limit-row { display: flex; align-items: center; gap: 10px; }
.mcp-limit-row input[type=number] {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px;
  border: 1px solid #b9cee4; border-radius: 2px; font-size: 12.5px; color: #1f2d3d;
}
.mcp-limit-row input[type=number]:disabled { background: #f4f7fa; }
.mcp-limit-unlimited {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: #2c4a66; white-space: nowrap; cursor: pointer;
}
.mcp-limit-unlimited input { margin: 0; cursor: pointer; }

/* 计算选项（系统选项 › 显示选项 内的独立分组） */
.opt-sub-title {
  margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: #3a5a78;
  border-top: 1px solid #e3e9ef; padding-top: 10px;
}
.opt-item .opt-select {
  font-size: 12px; padding: 2px 6px; border-radius: 6px;
  border: 1px solid #ccd; background: #fff; color: #2c4a66; max-width: 62%;
}
.opt-hint {
  margin-top: 8px; font-size: 11px; line-height: 1.5; color: #7b8a99;
}

/* ============================================================
   公开页面表单类对话框：固定宽度
   .dlg 未设 width 时宽度取决于内容 max-content，中文长段落不换行按整段计算，
   在宽屏上会把「注册账号」这类小表单撑到近千像素。这里给固定宽度，
   窄屏由下方 @media 的 width:auto + max-width:100% 接管。
   ============================================================ */
#brandRegDialog .dlg,
#userRegDialog .dlg,
#forgotPwdDialog .dlg { width: 380px; }

/* ============================================================
   窄屏对话框宽度收敛
   .dlg 的 min-width:380px 与 max-width:86vw 在 320~440px 视口上冲突：
   min-width 胜出，弹窗宽 380px 被视口两侧裁切（关闭按钮、右侧输入框不可见）。
   小屏统一改为「不超过遮罩内容区」，各类宽弹窗同步收敛，由 .dlg-body 内部滚动承担溢出。
   ============================================================ */
@media (max-width: 480px) {
  .dlg,
  .dlg-sm, .dlg-lg, .dlg-xl,
  #optionsDialog .dlg,
  #elemEditDialog .dlg,
  #schDialog .dlg,
  #mcpDialog .dlg {
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  .dlg-body { padding: 10px 11px; }
  .dlg-header { padding: 7px 11px; font-size: 12.5px; }
  .dlg-footer { padding: 8px 11px; }
}