/* assets/css/crm.css — split from index.html */

#page-groups.active,
#page-customers.active {
  display:flex; flex-direction:column; height:calc(100vh - var(--header-h) - 32px);
}

#page-groups .card,
#page-customers .card {
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:16px; min-height:unset;
}

#page-groups .groups-head,
#page-customers .groups-head { flex-shrink:0; }

#page-groups .groups-body,
#page-customers .groups-body {
  flex:1; min-height:0; display:flex; flex-direction:column;
}

#page-groups .groups-table-scroll,
#page-customers .groups-table-scroll {
  flex:1; min-height:0;
}

#page-groups .groups-table-scroll table,
#page-customers .groups-table-scroll table {
  border-collapse:separate; border-spacing:0;
  table-layout:fixed; width:100%;
}

#page-groups .groups-table-scroll col.col-idx,
#page-customers .groups-table-scroll col.col-idx { width:56px; }

#page-groups .groups-table-scroll col.col-idx { width:4%; }

#page-groups .groups-table-scroll th.col-idx,
#page-groups .groups-table-scroll td.col-idx,
#page-customers .groups-table-scroll th.col-idx,
#page-customers .groups-table-scroll td.col-idx {
  text-align:center !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

/* 客户群：人数/进退群/创建时间等宽观感，从群ID匀出 */
#page-groups .groups-table-scroll col.col-name { width:20%; }

#page-customers .groups-table-scroll col.col-name { width:16%; }

#page-customers .groups-table-scroll col.col-remark { width:14%; }

#page-groups .groups-table-scroll col.col-members { width:9%; }

#page-groups .groups-table-scroll col.col-join,
#page-groups .groups-table-scroll col.col-leave { width:8%; }

#page-groups .groups-table-scroll col.col-ctime { width:12%; }

#page-groups .groups-table-scroll th.col-members,
#page-groups .groups-table-scroll td.col-members,
#page-groups .groups-table-scroll th.col-join,
#page-groups .groups-table-scroll td.col-join,
#page-groups .groups-table-scroll th.col-leave,
#page-groups .groups-table-scroll td.col-leave {
  text-align:center !important;
  font-variant-numeric: tabular-nums;
  padding-left:8px !important;
  padding-right:8px !important;
  white-space:nowrap;
}

#page-groups .groups-table-scroll th.col-ctime,
#page-groups .groups-table-scroll td.col-ctime {
  text-align:left !important;
  font-variant-numeric: tabular-nums;
  padding-left:8px !important;
  padding-right:8px !important;
  white-space:nowrap;
}

#page-groups .groups-table-scroll td.col-join.is-up { color:#00B42A; font-weight:600; }

#page-groups .groups-table-scroll td.col-leave.is-down { color:#F53F3F; font-weight:600; }

#page-groups .groups-table-scroll col.col-owner { width:15%; }

#page-customers .groups-table-scroll col.col-owner { width:18%; }

#page-customers .groups-table-scroll col.col-time { width:168px; }

#page-groups .groups-table-scroll col.col-id { width:20%; }

#page-customers .groups-table-scroll col.col-id { width:240px; }

#page-customers .groups-table-scroll th.col-remark,
#page-customers .groups-table-scroll td.col-remark {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#page-groups .groups-table-scroll th.col-owner,
#page-groups .groups-table-scroll td.col-owner {
  padding-right:10px !important;
}

#page-groups .groups-table-scroll th.col-members,
#page-groups .groups-table-scroll td.col-members {
  padding-left:10px !important;
}

#page-groups .groups-table-scroll th,
#page-groups .groups-table-scroll td {
  text-align:left;
  vertical-align:middle;
  padding:10px 12px !important;
  box-sizing:border-box;
}

#page-customers .groups-table-scroll th,
#page-customers .groups-table-scroll td {
  text-align: left;
  vertical-align: middle;
  padding: 10px 12px !important;
  box-sizing: border-box;
}

#page-customers .groups-table-scroll th.col-idx,
#page-customers .groups-table-scroll td.col-idx {
  text-align:center !important;
  padding-left:8px !important;
  padding-right:8px !important;
}

#page-customers .groups-table-scroll th.col-time,
#page-customers .groups-table-scroll td.col-time {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#page-customers .groups-table-scroll td.col-time.is-today {
  color: #00B42A;
}

#page-customers .groups-table-scroll th.col-id,
#page-customers .groups-table-scroll td.col-id {
  font-family: inherit !important;
  font-size: 14px !important;
  letter-spacing: normal;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#page-customers .groups-table-scroll th.col-id {
  font-weight: 600 !important;
  color: #1D2129;
}

#page-customers .groups-table-scroll td.col-id {
  font-weight: 400 !important;
}

#page-groups .groups-table-scroll thead th,
#page-customers .groups-table-scroll thead th {
  position:sticky; top:0; z-index:2;
  background:#F5F5F5; box-shadow:inset 0 -1px 0 var(--border);
}

#page-groups .groups-table-scroll th,
#page-groups .groups-table-scroll td,
#page-customers .groups-table-scroll th,
#page-customers .groups-table-scroll td {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#page-groups .groups-table-scroll td.mono-id {
  white-space:nowrap;
}

#page-groups .pager,
#page-customers .pager {
  flex-shrink:0; margin-top:0; border-top:none; padding:12px 0 0;
}

#page-members .table-wrap table {
  width:100%; table-layout:fixed;
}

#page-members .table-wrap th.col-idx,
#page-members .table-wrap td.col-idx {
  width:56px; box-sizing:border-box;
  text-align:center; white-space:nowrap;
  padding-left:12px; padding-right:12px;
}

#page-members .table-wrap th.col-name,
#page-members .table-wrap td.col-name {
  width:25%; padding-left:12px; padding-right:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#page-members .table-wrap th.col-userid,
#page-members .table-wrap td.col-userid {
  width:25%; padding-left:12px; padding-right:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#page-members .table-wrap th.col-group,
#page-members .table-wrap td.col-group {
  width:25%; padding-left:12px; padding-right:12px; vertical-align:middle; white-space:nowrap;
}

#page-members .table-wrap th.col-sort,
#page-members .table-wrap td.col-sort {
  width:25%; box-sizing:border-box;
  text-align:center; white-space:nowrap; vertical-align:middle;
  padding-left:12px; padding-right:12px;
}

#page-members .table-wrap th.col-follow,
#page-members .table-wrap td.col-follow {
  width:88px;
  text-align:right;
  white-space:nowrap;
  padding-left:12px;
  padding-right:12px;
  box-sizing:border-box;
}

#page-members .follow-inner {
  display:inline-block;
  text-align:left;
  width:4em;
}

#page-members .col-group .form-select { width:100px; min-width:100px; max-width:100px; }

#page-members .col-group .form-select-btn {
  height:36px; font-size:14px; padding:0 28px 0 10px;
}

#page-members .col-group .form-select-caret { right:8px; }

#page-members .members-layout {
  display:flex; gap:16px; align-items:stretch;
  min-height:calc(100vh - var(--header-h) - 32px);
  border:none; border-radius:0; overflow:visible; background:transparent;
}

#page-members .members-dept.card,
#page-members .members-main.card {
  min-height:0; height:auto; box-sizing:border-box;
}

#page-members .members-dept {
  width:240px; flex-shrink:0; border-right:none; background:#fff;
  display:flex; flex-direction:column; padding:0; overflow:hidden;
}

#page-members .members-dept-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; border-bottom:1px solid #F2F3F5; flex-shrink:0;
}

#page-members .members-dept-hd h4 {
  margin:0; font-size:15px; font-weight:600; color:#1D2129;
}

#page-members .members-dept-add {
  width:24px; height:24px; border:none; border-radius:4px; background:#F2F3F5;
  color:#4E5969; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; padding:0;
}

#page-members .members-dept-add:hover { background:#E5E6EB; color:#1D2129; }

#page-members .members-dept-list {
  flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin; scrollbar-color:#B0B4BC transparent;
}
#page-members .members-dept-list::-webkit-scrollbar { width:6px; }
#page-members .members-dept-list::-webkit-scrollbar-thumb {
  background:#B0B4BC; border-radius:6px;
}
#page-members .members-dept-list::-webkit-scrollbar-thumb:hover { background:#86909C; }

#page-members .members-dept-item {
  display:flex; align-items:center; justify-content:flex-start; gap:6px;
  width:100%; border:none; background:transparent; text-align:left;
  padding:8px 10px; border-radius:6px; cursor:pointer; color:#1D2129;
  font-size:14px; font-weight:500; font-family:inherit; line-height:20px;
  box-sizing:border-box; user-select:none; -webkit-user-select:none;
}

#page-members .members-dept-item.is-draggable { cursor:grab; }

#page-members .members-dept-item.is-dragging {
  opacity:.55; background:#E8F3FF; cursor:grabbing;
}

#page-members .members-dept-item.drag-over {
  box-shadow: inset 0 -2px 0 #165DFF;
}

#page-members .members-dept-item:hover { background:transparent; }

#page-members .members-dept-item.on { background:#F2F3F5; color:#165DFF; }

#page-members .members-dept-item.on:hover { background:#F2F3F5; }

#page-members .members-dept-item.is-editing {
  padding:4px 6px; cursor:default; background:transparent; color:#1D2129;
}

#page-members .members-dept-item .g-name {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#page-members .members-dept-item .g-more-wrap {
  position:relative; flex-shrink:0; margin-left:auto;
}

#page-members .members-dept-item .g-more {
  width:22px; height:22px; border:none; border-radius:4px; background:transparent;
  color:#C9CDD4; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;
}

#page-members .members-dept-item:hover .g-more,
#page-members .members-dept-item.menu-open .g-more {
  visibility:visible; opacity:1;
}

#page-members .members-dept-item .g-more:hover,
#page-members .members-dept-item.menu-open .g-more {
  color:#4E5969; background:#E5E6EB;
}

#page-members .members-dept-item .g-more-ico {
  display:flex; gap:2px; align-items:center;
}

#page-members .members-dept-item .g-more-ico i {
  width:3px; height:3px; border-radius:1px; background:currentColor; display:block;
}

#page-members .g-more-menu {
  position:absolute; right:0; top:calc(100% + 4px); z-index:50;
  min-width:96px; padding:4px; background:#fff; border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.1);
}

#page-members .g-more-menu button {
  display:block; width:100%; border:none; background:transparent;
  padding:8px 12px; border-radius:6px; text-align:left; cursor:pointer;
  color:#1D2129; font-size:14px; font-family:inherit; line-height:20px;
}

#page-members .g-more-menu button:hover { background:#F7F8FA; }

#page-members .g-edit-input {
  flex:1; min-width:0; height:28px; border:1px solid var(--border); border-radius:6px;
  padding:0 8px; font-size:13px; color:#1D2129; background:#F7F8FA; font-family:inherit;
}

#page-members .g-edit-input:focus { outline:none; border-color:var(--primary); background:#fff; }

#page-members .g-edit-ok,
#page-members .g-edit-cancel {
  flex-shrink:0; width:28px; height:28px; border:none; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}

#page-members .g-edit-ok { background:var(--primary); color:#fff; }

#page-members .g-edit-ok:hover { background:var(--primary-hover); }

#page-members .g-edit-cancel { background:#F2F3F5; color:#86909C; }

#page-members .g-edit-cancel:hover { background:#E5E6EB; color:#1D2129; }

#page-members .members-main {
  flex:1; min-width:0; display:flex; flex-direction:column; padding:16px;
}

#page-members .members-main .card-toolbar { margin-bottom:12px; }

#page-members .members-main .table-wrap { flex:1; border:none; }

#page-members .members-main .empty { padding:48px 16px; }

#page-members .mem-sort-btns {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; height:28px; margin:0 auto; box-sizing:border-box;
}
#page-members .mem-sort-btn {
  width:18px; height:13px; padding:0; border:1px solid #E5E6EB; border-radius:3px;
  background:#fff; color:#4E5969; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; box-sizing:border-box; flex-shrink:0;
}
#page-members .mem-sort-btn:hover:not(:disabled) {
  border-color:#165DFF; color:#165DFF; background:#E8F3FF;
}
#page-members .mem-sort-btn:disabled { opacity:.35; cursor:not-allowed; }

#page-company .table-wrap th.col-idx,
#page-company .table-wrap td.col-idx {
  width:52px; min-width:52px; max-width:52px; box-sizing:border-box;
  text-align:center; white-space:nowrap;
  padding-left:8px; padding-right:8px;
}

#page-company .table-wrap th.col-action,
#page-company .table-wrap td.col-action {
  text-align:left; white-space:nowrap;
  width:1%; padding-right:16px;
}

.table-wrap,
.groups-table-scroll {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}

.table-wrap table,
.groups-table-scroll table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.table-wrap thead th:first-child,
.groups-table-scroll thead th:first-child { border-top-left-radius:8px; }

.table-wrap thead th:last-child,
.groups-table-scroll thead th:last-child { border-top-right-radius:8px; }

.table-wrap tbody tr:last-child td,
.groups-table-scroll tbody tr:last-child td { border-bottom:none; }

.table-wrap tbody tr:last-child td:first-child,
.groups-table-scroll tbody tr:last-child td:first-child { border-bottom-left-radius:8px; }

.table-wrap tbody tr:last-child td:last-child,
.groups-table-scroll tbody tr:last-child td:last-child { border-bottom-right-radius:8px; }

.mat-upload-box img, .mat-upload-box .upload-preview {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px;
}

/* 选择客户双栏弹窗 */
.modal.modal-transfer {
  width: 760px; max-width: 94vw; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

.modal.modal-transfer .modal-header {
  padding: 14px 20px; border-bottom: 1px solid #E5E6EB;
}

.modal.modal-transfer .modal-header h3 {
  font-size: 16px; font-weight: 600; color: #1D2129; margin: 0;
}

.modal.modal-transfer .modal-footer {
  padding: 12px 20px; border-top: 1px solid #E5E6EB; background: #fff;
}

.modal.modal-transfer .modal-body {
  overflow: hidden;
  padding: 0 !important;
}

/* 选群弹窗：适中高度，空态垂直居中不贴顶 */
.modal.modal-transfer.modal-group-pick > .modal-body.transfer-body {
  height:500px !important;
  max-height:min(500px, calc(100vh - 120px)) !important;
  min-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.modal-group-pick .transfer-pane {
  padding:12px 14px;
  min-height:0 !important;
  overflow:hidden;
}

.modal-group-pick .transfer-list {
  min-height:0 !important;
  display:flex;
  flex-direction:column;
}

.modal-group-pick .transfer-empty {
  flex:1 1 auto !important;
  min-height:180px !important;
  height:auto !important;
  width:100%;
  box-sizing:border-box;
  padding:32px 16px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.transfer-staff {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}

.transfer-staff label {
  flex-shrink:0; font-size:13px; color:#86909C; line-height:22px;
}

.transfer-staff select {
  flex:1; min-width:0; height:32px; box-sizing:border-box;
  border:1px solid #E5E6EB !important;
  border-radius:6px !important;
  padding:0 28px 0 10px;
  font-size:13px; color:#1D2129; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386909C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  box-shadow:none;
}

.transfer-staff select:focus {
  border-color:#165DFF !important;
}

.transfer-staff .form-select {
  flex:1; min-width:0; width:100%;
}

.modal-group-pick .transfer-staff .form-select-btn {
  height:32px; font-size:13px; padding:0 28px 0 10px; border-radius:6px;
}

.modal-group-pick .transfer-staff .form-select-caret { right:8px; }

.modal-group-pick .transfer-staff .form-select-menu {
  top:calc(100% + 4px); bottom:auto; max-height:220px; overflow:auto; z-index:50;
}

.modal-group-pick .transfer-staff .form-select-menu button {
  font-size:13px; padding:7px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 素材库 */
.mat-head { margin-bottom:16px; }

.mat-head .mat-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }

.mat-head h3 { margin:0 0 6px; font-size:20px; font-weight:600; color:#1D2129; }

.mat-desc { color:#86909C; font-size:13px; line-height:20px; max-width:640px; }

.mat-tabs {
  display:inline-flex; align-items:center; gap:0; margin:16px 0 0;
  padding:4px; background:#F2F3F5; border-radius:8px; border-bottom:none;
}

.mat-tab {
  height:32px; padding:0 16px; border:none; background:transparent; cursor:pointer;
  font-size:14px; color:#4E5969; position:relative; border-radius:6px;
  font-family:inherit; line-height:32px; white-space:nowrap; z-index:1;
}

.mat-tab:not(:first-child)::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:#E5E6EB; z-index:0;
}

.mat-tab:hover { color:#165DFF; }

.mat-tab.on {
  color:#165DFF; font-weight:500; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06); z-index:2;
}

.mat-tab.on::before,
.mat-tab.on + .mat-tab::before { opacity:0; }

.mat-tab.on::after { display:none; }

.mat-empty {
  padding:80px 20px; text-align:center; color:#C9CDD4; font-size:15px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}

.mat-empty .empty-ico { width:64px; height:64px; }

.mat-ops {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap;
}

.mat-ops .mat-op-btn {
  height:32px; min-width:0; width:auto; padding:0 16px; border-radius:4px;
  font-size:14px; font-weight:500; line-height:1; box-sizing:border-box;
  white-space:nowrap; flex:0 0 auto;
}

#page-material .table-wrap td {
  font-size:14px; line-height:22px; color:#1D2129;
}

#page-material .mat-content-cell,
#page-material .mat-content-cell.plain {
  font-size:14px; line-height:22px; color:#1D2129;
}

.mat-content-cell {
  max-width:460px; color:#1D2129; font-size:14px; line-height:22px;
}

.mat-content-cell.plain {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#1D2129; font-size:14px; line-height:22px;
}

.mat-card-link {
  max-width:260px; background:#fff; border:1px solid #E5E6EB; border-radius:6px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.mat-card-link .title {
  padding:8px 10px 4px; font-size:14px; font-weight:500; color:#1D2129; line-height:20px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mat-card-link .body {
  display:flex; gap:8px; align-items:flex-start; padding:0 10px 8px;
}

.mat-card-link .desc {
  flex:1; min-width:0; font-size:13px; color:#86909C; line-height:18px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mat-card-link .thumb {
  width:42px; height:42px; flex-shrink:0; border-radius:4px; background:#F2F3F5;
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:#C9CDD4; font-size:11px;
}

.mat-card-link .thumb img { width:100%; height:100%; object-fit:cover; }

.mat-card-link .ft {
  display:flex; align-items:center; gap:4px; padding:5px 10px;
  border-top:1px solid #F0F0F0; font-size:12px; color:#86909C;
}

.mat-card-mp {
  max-width:200px; background:#fff; border:1px solid #E5E6EB; border-radius:6px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.mat-card-mp .hd {
  display:flex; align-items:center; gap:4px; padding:8px 10px 0;
  font-size:12px; color:#86909C; line-height:16px;
}

.mat-card-mp .hd .mp-ico {
  width:14px; height:14px; flex-shrink:0; display:block;
}

.mat-card-mp .title {
  padding:2px 10px 8px; font-size:14px; color:#1D2129; line-height:20px; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mat-card-mp .cover {
  margin:0 10px 10px; min-height:88px; height:auto; border-radius:4px; background:#07C160;
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff;
}

.mat-card-mp .cover:has(img) {
  min-height:0; background:#F2F3F5; display:block;
}

.mat-card-mp .cover img { width:100%; height:auto; display:block; object-fit:contain; }

.mat-card-mp .cover svg { width:36px; height:36px; }

.mat-card-mp .ft {
  display:flex; align-items:center; gap:4px; padding:4px 8px;
  border-top:1px solid #F0F0F0; font-size:10px; color:#86909C;
}

.mat-card-mp .ft .mp-ico {
  width:12px; height:12px; flex-shrink:0; display:block;
}

.mat-card-img {
  display:inline-flex; align-items:center; gap:8px; max-width:240px;
}

.mat-card-img .thumb {
  width:40px; height:40px; border-radius:4px; background:#F2F3F5; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#C9CDD4; font-size:11px; flex-shrink:0;
  border:1px solid #E5E6EB;
}

.mat-card-img .thumb.clickable { cursor:zoom-in; }

.mat-card-img .thumb.clickable:hover { border-color:#165DFF; }

.mat-card-img .thumb img { width:100%; height:100%; object-fit:cover; }

.mat-card-img .fn {
  font-size:12px; color:#1D2129; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.mat-card-mp .cover.clickable { cursor:zoom-in; }

.mat-modal { width:560px; border-radius:12px; }

.mat-modal .modal-header { border-bottom:none; padding-bottom:8px; }

.mat-modal .modal-body { padding-top:8px; }

.mat-modal .modal-footer { background:#fff; border-top:1px solid var(--border); }

/* 素材弹窗：从中心偏右上一点滑入正中 */
.mat-modal-pop-enter-active,
.mat-modal-pop-leave-active {
  transition: opacity .2s ease;
}

.mat-modal-pop-enter-active .mat-modal,
.mat-modal-pop-leave-active .mat-modal {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}

.mat-modal-pop-enter,
.mat-modal-pop-leave-to {
  opacity: 0;
}

.mat-modal-pop-enter .mat-modal,
.mat-modal-pop-leave-to .mat-modal {
  opacity: 0;
  transform: translate(56px, -44px) scale(.98);
}

.mat-modal-pop-enter-to .mat-modal,
.mat-modal-pop-leave .mat-modal {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.mat-name-input {
  width:100%; height:40px; border:1px solid var(--border); border-radius:8px;
  padding:0 14px; font-size:14px; line-height:22px; background:#F7F8FA; color:#1D2129; margin-bottom:14px;
  font-family: var(--font) !important; box-sizing:border-box;
}

.mat-name-input:focus { outline:none; border-color:#165DFF; background:#fff; }

.mat-name-input::placeholder { color:#C9CDD4; font-family: inherit; }

.mat-type-bar {
  display:flex; gap:4px; padding:4px; background:#F2F3F5; border-radius:10px; margin-bottom:14px;
}

.mat-type-bar button {
  flex:1; height:32px; border:none; border-radius:8px; background:transparent;
  color:#4E5969; font-size:14px; cursor:pointer;
}

.mat-type-bar button.on { background:#fff; color:#165DFF; font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.06); }

.mat-textarea {
  width:100%; min-height:180px; max-height:min(420px, calc(100vh - 340px));
  border:1px solid var(--border); border-radius:10px;
  padding:12px 10px 12px 14px; font-size:14px; line-height:22px;
  resize:vertical; overflow:auto; color:#1D2129;
  font-family: var(--font) !important; box-sizing:border-box;
  scrollbar-width:thin; scrollbar-color:#C9CDD4 transparent;
}

.mat-textarea::-webkit-scrollbar {
  width:8px;
}

.mat-textarea::-webkit-scrollbar-track {
  margin:8px 3px; background:transparent;
}

.mat-textarea::-webkit-scrollbar-thumb {
  background:#C9CDD4; border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;
}

.mat-textarea::-webkit-scrollbar-thumb:hover {
  background:#86909C; border:2px solid transparent; background-clip:padding-box;
}

.mat-textarea:focus { outline:none; border-color:#165DFF; }

.mat-textarea::placeholder { color:#C9CDD4; font-family: inherit; }

.mat-file-row {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
}

.mat-file-row .mat-file-thumb {
  width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0;
  background:#F2F3F5; border:1px solid var(--border);
}

.mat-file-row .mat-file-thumb.clickable { cursor:zoom-in; }

.mat-file-row .fn { flex:1; font-size:14px; color:#1D2129; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mat-file-row .ok { color:#00B42A; font-size:16px; margin-right:10px; flex-shrink:0; }

.mat-upload-box,
.mat-field .mat-upload-box {
  width:120px; height:120px; border:1px dashed #C9CDD4; border-radius:10px;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  color:#86909C; cursor:pointer; background:#FAFBFC; font-size:13px; gap:6px;
  margin-bottom:0; position:relative; overflow:hidden; box-sizing:border-box;
  padding:0; text-align:center; font-family: var(--font);
}

.mat-upload-box:hover { border-color:#165DFF; color:#165DFF; }

.mat-upload-box .mat-upload-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; line-height:1.2;
}

.mat-upload-box .mat-upload-plus { font-size:22px; line-height:1; font-weight:400; }

.mat-upload-box img,
.mat-upload-box .upload-preview {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px;
}

.mat-mp-grid { display:grid; grid-template-columns:1fr 120px; gap:16px; align-items:stretch; }

.mat-mp-grid > div > .mat-field:last-child { margin-bottom:0; }

.mat-mp-grid > .mat-field {
  display:flex; flex-direction:column; margin-bottom:0; min-height:100%;
}

.mat-mp-grid > .mat-field > .mat-upload-box {
  flex:1; width:100%; height:auto; min-height:0; align-self:stretch;
}

.mat-mp-grid .mat-field { margin-bottom:12px; }

/* 图文：封面正方形，高度对齐「标题+描述」，宽度不够时压缩左侧 */
.mat-link-row {
  display:grid; grid-template-columns:minmax(0, 1fr) 162px; gap:16px; align-items:start;
  margin-bottom:12px;
}

.mat-link-row .mat-link-left .mat-field { margin-bottom:12px; }

.mat-link-row .mat-link-left .mat-field:last-child { margin-bottom:0; }

.mat-link-row .mat-link-cover {
  display:flex; flex-direction:column; margin-bottom:0; width:162px;
}

.mat-link-row .mat-link-cover > .mat-upload-box {
  width:162px; height:162px; flex:none;
}

.mat-field { margin-bottom:12px; }

.mat-field > label { display:block; margin-bottom:6px; font-size:13px; color:#4E5969; line-height:20px; }

.mat-field input, .mat-field textarea {
  width:100%; height:36px; border:1px solid var(--border); border-radius:8px;
  padding:0 12px; font-size:14px; line-height:22px; background:#F7F8FA; color:#1D2129;
  font-family: var(--font) !important; box-sizing:border-box;
}

.mat-field textarea { height:88px; padding:8px 12px; resize:vertical; }

.mat-field input:focus, .mat-field textarea:focus { outline:none; border-color:#165DFF; background:#fff; }

.mat-field input::placeholder, .mat-field textarea::placeholder { color:#C9CDD4; font-family: inherit; }

.mat-input-with-btn {
  position:relative; display:flex; align-items:center;
}

.mat-input-with-btn input {
  width:100%; height:36px; border:1px solid var(--border); border-radius:8px;
  padding:0 118px 0 12px; font-size:14px; line-height:22px; background:#F7F8FA; color:#1D2129;
  font-family: var(--font) !important; box-sizing:border-box;
}

.mat-input-with-btn input:focus { outline:none; border-color:#165DFF; background:#fff; }

.mat-input-with-btn input::placeholder { color:#C9CDD4; font-family: inherit; }

.mat-copy-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  height:26px; padding:0 10px; border:none; border-radius:6px;
  background:transparent; color:#165DFF; font-size:13px; line-height:26px;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}

.mat-copy-btn:hover { color:#4080FF; }

.mat-copy-btn:disabled { color:#C9CDD4; cursor:not-allowed; }

.mat-dash { border:none; border-top:1px dashed var(--border); margin:12px 0; }

.mat-picker-list { max-height:360px; overflow:auto; }

.mat-picker-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:#fff; margin-bottom:8px;
}

.mat-picker-item:last-child { margin-bottom:0; }

.mat-picker-item:hover { background:#F7F8FA; border-color:#C9CDD4; }

.mat-picker-thumb {
  width:56px; height:56px; flex-shrink:0; border-radius:6px; overflow:hidden;
  background:#F2F3F5; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}

.mat-picker-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.mat-picker-thumb .ph {
  font-size:11px; color:#86909C; line-height:1.2; text-align:center; padding:4px;
}

.mat-picker-item .t { flex:1; min-width:0; }

.mat-picker-item .n { font-size:14px; color:#1D2129; }

.mat-picker-item .c { font-size:12px; color:#86909C; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mat-picker-item .mat-picker-url { margin-top:0; line-height:18px; height:18px; }