/* 内容库「编辑 · 信息与收费设置」弹层（Vue 岛 frontend/ops-vue/src/ContentMetaModal.vue）
   为什么单开一个文件：Vue 岛的 <style scoped> **不随构建落地** —— vite 只把它编进
   ops-vue/dist/ops-activity-vue.css，既不拷进 frontend/，index.html 也没链它（仓内既有约定＝
   岛屿样式一律走手写 frontend/ops-*.css，见 frontend/ops-activity.css 等）。缺这份样式时岛内
   .meta-modal-* / .form-* / .group-title / .calc-strip 全是无样式：打开只剩一层黑遮罩、看不到面板
   （用户标注 #123，2026-09-24）。
   取值照原型快照（docs/reference/prototype/内容库-原型快照-2026-09-16.html 第 150-161 行）与
   styles.css 的 .modal / .m-* 同源：面板 580px / 16px 圆角 / 26px 内边距 / 88vh 上限；分组标题青色虚线；
   字段 8px 圆角 + 青色聚焦；按钮沿用 .m-foot 的 ghost/primary 取值。
   .multi-check-group / .mchk / .auth-apps-tip 已在 styles.css 全局定义（同一套取值），此处不重复。 */

/* 外壳：遮罩与居中由 .mask.show（styles.css，z-index 9000，标注层仍在它之上）提供。
   岛内的 .meta-modal-mask 不再重复画一层黑底 —— 否则两层 rgba(15,23,42,.45) 叠加会把页面压暗近 0.7，
   比站内其它弹窗黑一档；也不设 fixed，避免与外壳抢层级。 */
.meta-modal-mask { position: static; padding: 0; background: none; }
.meta-modal-box { background: #fff; border-radius: 16px; width: 580px; max-width: 92vw; max-height: 88vh; overflow: auto; padding: 26px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  /* 弹层挂 body 下（.lib 之外）：字体字号显式写，否则继承浏览器默认 16px */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; color: #1f2937; }
.meta-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.meta-modal-title { font-size: 16px; font-weight: 800; color: #111827; }
.meta-modal-close { background: none; border: none; padding: 0; font-family: inherit; font-size: 18px; line-height: 1; color: #9ca3af; cursor: pointer; }
.meta-modal-close:hover { color: #6b7280; }

/* 分组标题：同 .m-group（原型 .m-group，styles.css:1343） */
.group-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0891b2; letter-spacing: .5px; margin: 16px 0 11px; padding-bottom: 7px; border-bottom: 1px dashed #e5e7eb; }
.form-group:first-of-type .group-title { margin-top: 0; }
/* 字段级角标：黄标＝中台自持扩展字段（同 .off-tag 取值）；灰标＝业务主表列待具名动作授权 */
.chip-ext { font-size: 11px; font-weight: 500; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 1px 6px; }
.chip-pending { font-size: 11px; font-weight: 500; color: #6b7280; background: #f4f4f5; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1px 6px; }

/* 栅格与字段：同 .m-grid-2 / .m-grid-4 / .m-row（styles.css:1345-1352） */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.form-row-full { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.form-field label, .form-row-full label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #4b5563; }
/* 4 列网格（卡点与收费）标签窄：角标小一号且不折行，否则「全本价格 C」会把角标挤到第二行（同 styles.css:1412 的 .m-grid-4 处置） */
.form-row-4 .form-field label { flex-wrap: nowrap; }
.form-row-4 .chip-ext, .form-row-4 .chip-pending { flex: 0 0 auto; font-size: 10px; padding: 0 4px; white-space: nowrap; }
.form-field input, .form-field select, .form-row-full textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; color: #1f2937; background: #fff; outline: none; transition: .15s; }
.form-field input, .form-field select { height: 38px; padding: 0 12px; }
.form-row-full textarea { min-height: 68px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-row-full textarea:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8, 145, 178, .08); }
/* 只读/不可改（业务主表列未获具名写授权）：灰底如实表示不可编辑，悬停有说明位（title），不当成可保存 |
   select:disabled 的指针不改成 help —— 禁用态不给 pointer-events:none，点一下仍能出说明 */
.form-field input[readonly], .form-row-full textarea[readonly] { background: #f8fafc; color: #6b7280; cursor: help; }
.form-field select:disabled { background: #f8fafc; color: #6b7280; cursor: not-allowed; }

/* 换算行：同 .m-conv-row（原型第 393 行、styles.css:1360-1364） */
.calc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 12px; color: #6b7280; margin: -2px 0 8px; }
.calc-strip .conv { margin-left: auto; font-size: 10.5px; font-weight: 500; color: #b6bcc6; }
.text-amber { color: #d97706; }
.text-blue { color: #2563eb; }
.text-red { color: #dc2626; }

/* 保存失败 / 版本冲突提示（岛内自有的两条；配色沿用仓内黄标与红色提示口径） */
.alert-box { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.7; margin-bottom: 14px; }
.alert-box.error { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }
.alert-box.conflict { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.conflict-diff { margin-top: 4px; font-size: 11.5px; color: #9ca3af; }

/* 页脚按钮：同 .m-foot（styles.css:1365-1368） */
.meta-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-cancel, .btn-save { font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: .15s; }
.btn-cancel { padding: 7px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #4b5563; }
.btn-cancel:hover { border-color: #0891b2; color: #0891b2; background: #f0fdfd; }
.btn-save { padding: 8px 16px; border: none; border-radius: 8px; background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; box-shadow: 0 2px 6px rgba(8, 145, 178, .25); }
.btn-save:hover { filter: brightness(1.05); }
.btn-save:disabled, .btn-cancel:disabled { opacity: .6; cursor: not-allowed; }