/* ==========================================================================
   三汇能环 官网后台 · CMS 组件层（v2 · 2026-10-29）
   --------------------------------------------------------------------------
   在 admin.css 之上补充「现代化 CMS」所需组件：
     页面工具条 / 分段切换 / 素材卡 / 图位卡 / 媒体选择器 / 拖拽上传 /
   抽屉增强 / 确认弹窗 / 空状态 / 字段提示 / 上传进度
   命名前缀统一 cms- 与 m-，避免与既有页面样式打架。
   ========================================================================== */

/* ---------- 1. 页面工具条 ---------------------------------------------- */
.cms-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh);margin-bottom:16px;
}
.cms-bar .grow{flex:1}
.cms-bar .cms-search{
  display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:340px;
  background:#F7F9FC;border:1px solid var(--line);border-radius:9px;padding:0 11px;height:36px;
}
.cms-bar .cms-search svg{width:15px;height:15px;stroke:#8B9AAC;fill:none;stroke-width:1.8;flex:none}
.cms-bar .cms-search input{border:0;background:transparent;outline:none;width:100%;font-size:13.6px}
.cms-bar select{
  height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.4px;
  padding:0 9px;color:var(--ink-2);cursor:pointer;
}
.cms-bar .count{font-size:12.6px;color:var(--muted);white-space:nowrap}

/* 分段控件（视图切换） */
.cms-seg{display:inline-flex;background:#EEF2F7;border-radius:9px;padding:3px;gap:2px}
.cms-seg button{
  border:0;background:transparent;color:#5A6B82;font-size:13px;font-weight:600;
  padding:6px 13px;border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.cms-seg button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.cms-seg button:hover{color:var(--blue)}
.cms-seg button.on{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(16,32,56,.12)}

/* 筛选芯片 */
.cms-chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--line);background:#fff;color:#5A6B82;border-radius:20px;
  padding:5px 13px;font-size:12.8px;font-weight:600;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip i{font-style:normal;opacity:.72;font-weight:500;font-size:11.6px}

/* ---------- 2. 素材卡 --------------------------------------------------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px}
.mcard{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.16s;position:relative;
}
.mcard:hover{box-shadow:var(--sh-h);border-color:#CBD9E8;transform:translateY(-1px)}
.mcard .thumb{
  position:relative;aspect-ratio:4/3;background:#EEF2F7 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.mcard .thumb .ext{font-size:12.5px;color:#8B9AAC;font-weight:600;letter-spacing:.04em}
.mcard .thumb .bdg{position:absolute;left:8px;top:8px;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.mcard .thumb .refs{
  position:absolute;right:8px;bottom:8px;background:rgba(10,42,74,.80);color:#fff;
  font-size:11.4px;font-weight:700;padding:2px 8px;border-radius:20px;backdrop-filter:blur(3px);
}
.mcard .thumb .hover{
  position:absolute;inset:0;background:rgba(10,42,74,.55);opacity:0;transition:.16s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.mcard:hover .thumb .hover{opacity:1}
.mcard .thumb .hover button{
  border:0;border-radius:8px;background:#fff;color:#0F2740;font-size:12.6px;font-weight:700;
  padding:7px 12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.mcard .thumb .hover button.pri{background:var(--blue);color:#fff}
.mcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.mcard .nm{
  font-size:13.4px;font-weight:600;color:#0F2740;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.mcard .meta{font-size:11.8px;color:#93A3B5;font-family:"Montserrat",system-ui,sans-serif;letter-spacing:.01em}
.mcard .acts{display:flex;gap:6px;margin-top:8px;padding-top:9px;border-top:1px solid #F0F4F9}
.mcard .acts .btn{flex:1;justify-content:center}
.mcard.replaced{border-color:#B7E0C9;background:linear-gradient(180deg,#FBFEFC,#fff)}

/* 列表视图 */
.mlist{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mlist table{width:100%;border-collapse:collapse;font-size:13.4px}
.mlist th{
  text-align:left;padding:10px 14px;background:#F7F9FC;color:var(--ink-2);
  font-size:12.4px;font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;
}
.mlist td{padding:9px 14px;border-bottom:1px solid #F0F4F9;vertical-align:middle}
.mlist tr:last-child td{border-bottom:0}
.mlist tr:hover td{background:#FAFCFF}
.mlist .mini{
  width:52px;height:38px;border-radius:6px;background:#EEF2F7 center/cover no-repeat;flex:none;
  border:1px solid var(--line);
}
.mlist .fn{display:flex;align-items:center;gap:10px}

/* ---------- 3. 图位（引用位置）卡 -------------------------------------- */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.slot{
  border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.16s;
}
.slot:hover{box-shadow:var(--sh-h);border-color:#CBD9E8}
.slot .top{display:flex;gap:12px;padding:12px}
.slot .pic{
  width:96px;height:72px;border-radius:8px;flex:none;background:#EEF2F7 center/cover no-repeat;
  border:1px solid var(--line);position:relative;
}
.slot .pic .tag{
  position:absolute;left:5px;top:5px;background:rgba(255,255,255,.94);color:#5B3FA8;
  font-size:10.4px;font-weight:700;padding:1px 6px;border-radius:20px;
}
.slot .pic .tag.ok{color:#14713F}
.slot .info{flex:1;min-width:0}
.slot .info h4{font-size:13.8px;font-weight:700;color:#0F2740;margin:0 0 3px;line-height:1.4}
.slot .info .use{font-size:12.3px;color:var(--muted);line-height:1.6;margin-bottom:5px}
.slot .info .req{font-size:11.8px;color:#93A3B5;font-family:"Montserrat",system-ui,sans-serif}
.slot .where{
  border-top:1px dashed var(--line);padding:9px 12px 10px;background:#FCFDFE;
  font-size:12.2px;color:#5A6B82;line-height:1.75;
}
.slot .where b{color:#0F2740;font-weight:600}
.slot .where .pgs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.slot .where .pg{
  background:#EEF2F7;border-radius:5px;padding:1px 7px;font-size:11.4px;color:#41506A;
}
.slot .where .pg i{font-style:normal;color:#93A3B5;margin-left:3px}
.slot .ops{display:flex;gap:7px;padding:0 12px 12px}
.slot .ops .btn{flex:1;justify-content:center}

/* 图位抽屉里的引用明细 */
.reflist{display:grid;gap:6px}
.reflist .ri{
  display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;background:#FCFDFE;font-size:12.8px;
}
.reflist .ri .pg{font-weight:600;color:#0F2740;flex:none}
.reflist .ri .loc{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reflist .ri .n{font-size:11.6px;color:#93A3B5;font-family:"Montserrat",system-ui,sans-serif}
.reflist .ri a{color:var(--blue-ink);font-size:12.2px;white-space:nowrap}

/* ---------- 4. 拖拽上传 ------------------------------------------------ */
.dropzone{
  border:2px dashed #C3D3E4;border-radius:14px;background:linear-gradient(180deg,#FBFDFF,#F6F9FD);
  padding:26px 20px;text-align:center;transition:.18s;cursor:pointer;
}
.dropzone:hover,.dropzone.hot{border-color:var(--blue);background:#F2F8FE}
.dropzone svg{width:34px;height:34px;stroke:#9FB4CB;fill:none;stroke-width:1.5;margin-bottom:8px}
.dropzone.hot svg{stroke:var(--blue)}
.dropzone b{display:block;font-size:14.2px;color:#0F2740;margin-bottom:4px}
.dropzone span{font-size:12.6px;color:var(--muted);line-height:1.7}
.dropzone em{font-style:normal;color:var(--blue);font-weight:600}

/* 全屏拖拽覆盖层 */
.cms-drop-mask{
  position:fixed;inset:0;z-index:300;background:rgba(11,49,83,.62);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
}
.cms-drop-mask.on{display:flex}
.cms-drop-mask .box{
  border:3px dashed rgba(255,255,255,.75);border-radius:20px;padding:44px 62px;text-align:center;color:#fff;
}
.cms-drop-mask svg{width:46px;height:46px;stroke:#fff;fill:none;stroke-width:1.4;margin-bottom:12px}
.cms-drop-mask b{font-size:19px;display:block}
.cms-drop-mask span{font-size:13.4px;color:#C9DFF5;margin-top:6px;display:block}

/* 上传进度 */
.upl{display:grid;gap:7px;margin-top:12px}
.upl .u{display:flex;align-items:center;gap:9px;font-size:12.6px;color:#41506A}
.upl .u .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl .u .bar{width:110px;height:6px;background:#EEF2F7;border-radius:20px;overflow:hidden;flex:none}
.upl .u .bar i{display:block;height:100%;background:var(--blue);width:0;transition:.2s}
.upl .u.ok .bar i{background:var(--green)}
.upl .u.bad .bar i{background:#C0392B}

/* ---------- 5. 媒体选择器（模态） -------------------------------------- */
.cms-modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
}
.cms-modal.on{display:flex}
.cms-modal .mask2{position:absolute;inset:0;background:rgba(10,26,44,.46)}
.cms-modal .panel{
  position:relative;background:#fff;border-radius:16px;width:100%;max-width:960px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(6,22,40,.36);
}
.cms-modal .ph{
  padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
}
.cms-modal .ph h3{font-size:16px;font-weight:700}
.cms-modal .ph .x{
  margin-left:auto;border:0;background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;
}
.cms-modal .pb{display:grid;grid-template-columns:236px 1fr;flex:1;min-height:0}
.cms-modal .pb .side{
  border-right:1px solid var(--line);padding:16px;background:#FBFCFE;overflow-y:auto;
}
.cms-modal .pb .side h5{
  font-size:11.4px;letter-spacing:.1em;color:#8B9AAC;font-weight:700;margin:0 0 8px;text-transform:uppercase;
}
.cms-modal .pb .main{padding:14px 18px;overflow-y:auto;min-height:0}
.cms-modal .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,124px));gap:9px;justify-content:flex-start}
.cms-modal .picks .pk{
  border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;background:#EEF2F7;
  aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;
}
.cms-modal .picks .pk:hover{border-color:var(--blue)}
.cms-modal .picks .pk.sel{border-color:var(--blue);box-shadow:0 0 0 3px rgba(19,108,183,.18)}
.cms-modal .picks .pk .lb{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,42,74,.82));
  color:#fff;font-size:10.8px;padding:12px 6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cms-modal .pf{
  padding:12px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;background:#FBFCFE;
}
.cms-modal .pf .grow{flex:1}
.cms-modal .pf .cur{font-size:12.4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-modal .pf .cur b{color:#0F2740;font-family:"Montserrat",system-ui,sans-serif}
@media(max-width:780px){
  .cms-modal .pb{grid-template-columns:1fr}
  .cms-modal .pb .side{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- 6. 抽屉增强 ------------------------------------------------ */
.drawer--wide{width:520px}
.dsec{margin-bottom:20px}
.dsec > h4{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8B9AAC;font-weight:700;
  margin:0 0 9px;display:flex;align-items:center;gap:8px;
}
.dsec > h4::after{content:"";flex:1;height:1px;background:var(--line)}
.dprev{
  border-radius:10px;background:#F4F7FA center/cover no-repeat;border:1px solid var(--line);
  aspect-ratio:16/10;margin-bottom:12px;
}
.dkv{display:grid;grid-template-columns:88px 1fr;gap:7px 12px;font-size:13.2px}
.dkv dt{color:var(--muted);font-size:12.6px}
.dkv dd{margin:0;color:#0F2740;word-break:break-all}

/* ---------- 7. 提示 / 空状态 / 危险区 ---------------------------------- */
.note{
  display:flex;gap:9px;padding:11px 13px;border-radius:9px;font-size:12.8px;line-height:1.75;
  background:var(--tint-blue);color:var(--blue-ink);border-left:3px solid var(--blue);
}
.note svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none;margin-top:3px}
.note.warn{background:var(--tint-orange);color:#8A5A0B;border-color:var(--orange)}
.note.ok{background:var(--tint-green);color:var(--green-ink);border-color:var(--green)}
.note.bad{background:#FDECEA;color:#B42318;border-color:#E0574A}

.empty2{
  padding:52px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:#FCFDFE;
}
.empty2 .ic{
  width:52px;height:52px;border-radius:14px;background:var(--tint-blue);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 12px;
}
.empty2 .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.empty2 b{display:block;font-size:14.6px;color:#0F2740;margin-bottom:5px}
.empty2 p{font-size:12.9px;color:var(--muted);line-height:1.8;max-width:400px;margin:0 auto 14px}

/* 危险操作按钮 */
.btn--danger{color:#B42318;border-color:#F0C6C1}
.btn--danger:hover{background:#FDECEA;border-color:#E0574A;color:#B42318}

/* 小标签（字段提示） */
.lbl-tip{display:inline-flex;align-items:center;gap:4px}
.lbl-tip .q{
  width:14px;height:14px;border-radius:50%;background:#DCE6F1;color:#5A6B82;font-size:10px;
  display:inline-grid;place-items:center;cursor:help;font-weight:700;font-style:normal;
}

/* 概览页：待办清单 */
.todo-list{display:grid;gap:9px}
.todo-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;transition:.15s;
}
.todo-item:hover{border-color:#CBD9E8;box-shadow:var(--sh)}
.todo-item .ic{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--ac-l,var(--tint-blue));color:var(--ac,var(--blue));
}
.todo-item .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.todo-item .tx{flex:1;min-width:0}
.todo-item .tx b{display:block;font-size:13.8px;color:#0F2740;line-height:1.45}
.todo-item .tx span{font-size:12.4px;color:var(--muted)}
.todo-item .go{font-size:12.8px;font-weight:600;color:var(--blue);white-space:nowrap}

/* 快捷入口砖 */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.tile{
  border:1px solid var(--line);border-radius:12px;padding:15px;background:#fff;transition:.16s;
  display:flex;flex-direction:column;gap:7px;
}
.tile:hover{box-shadow:var(--sh-h);transform:translateY(-2px);border-color:#CBD9E8}
.tile .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--ac-l,var(--tint-blue));color:var(--ac,var(--blue));
}
.tile .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.tile b{font-size:14px;color:#0F2740}
.tile span{font-size:12.3px;color:var(--muted);line-height:1.6}

/* 替换前后小对照 */
.diff2{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.diff2 .im{aspect-ratio:4/3;border-radius:8px;border:1px solid var(--line);background:#EEF2F7 center/cover no-repeat}
.diff2 .ar{color:#93A3B5;font-size:15px}

/* 无障碍与动效收敛 */
@media (prefers-reduced-motion:reduce){
  .mcard,.tile,.slot,.todo-item{transition:none}
  .mcard:hover,.tile:hover{transform:none}
}