/* ==========================================================================
   xc-pages.css · 用户中心内页统一视觉层
   语言：直角、1px #eff2f7 描边、主色 #0064ff、次级文字 #8a94a6、hover 蓝雾。
   仅提供组件类（xc-*），所有页面以「追加类名」的方式套用，不改动既有 JS 钩子。
   ========================================================================== */

/* 禁止移动端字体放大（Chrome font boosting 会把 fixed-height 控件文字顶偏） */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ---------- 页面骨架 ---------- */
.xc-page { color: #1d2129; }
.xc-page > *:last-child { margin-bottom: 0; }

/* 页头 */
.xc-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 16px; }
.xc-ph__main { min-width: 0; }
.xc-ph__eyebrow { margin-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #b9c0cc; }
.xc-ph__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; color: #1d2129; }
.xc-ph__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #8a94a6; }
.xc-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xc-ph__actions .btn { height: 36px; padding: 0 16px; font-size: 13px; }

/* 面包屑弱化 */
.xc-page .breadcrumb { margin-bottom: 14px; font-size: 12px; background: transparent; }
.xc-page .breadcrumb-item + .breadcrumb-item::before { color: #c3c9d4; }

/* ---------- 面板 ---------- */
.xc-panel { background: #fff; border: 1px solid #eff2f7; transition: box-shadow .2s ease; }
.xc-panel:hover { box-shadow: 0 4px 20px 2px rgba(6, 75, 179, .06); }
.xc-panel + .xc-panel { margin-top: 16px; }
.xc-panel__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #f3f5fa; }
.xc-panel__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: #1d2129; }
.xc-panel__title .bx { font-size: 16px; color: #0064ff; }
.xc-panel__desc { margin: 4px 0 0; font-size: 12px; color: #8a94a6; }
.xc-panel__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.xc-panel__bd { padding: 18px; }
.xc-panel__bd--flush { padding: 0; }
.xc-panel__ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid #f3f5fa; background: #fcfdff; }

/* 原生 card 在 .xc-page 内统一成面板外观 */
.xc-page .card { margin-bottom: 16px; border: 1px solid #eff2f7; border-radius: 0; background: #fff; transition: box-shadow .2s ease; }
.xc-page .card:hover { box-shadow: 0 4px 20px 2px rgba(6, 75, 179, .06); }
.xc-page .card-body { padding: 18px; }
.xc-page .card-header { padding: 15px 18px; background: #fff; border-bottom: 1px solid #f3f5fa; }
.xc-page .card-header h4, .xc-page .card-header h5, .xc-page .card-title { margin: 0; font-size: 14px; font-weight: 600; color: #1d2129; }

/* ---------- 表格 ---------- */
.xc-tbl__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xc-tbl { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.xc-tbl thead th { padding: 11px 14px; font-size: 12px; font-weight: 500; color: #8a94a6; background: #fbfcfe; border-bottom: 1px solid #eff2f7; white-space: nowrap; }
.xc-tbl tbody td { padding: 13px 14px; color: #333; border-bottom: 1px solid #f6f7fb; vertical-align: middle; }
.xc-tbl tbody tr:last-child td { border-bottom: 0; }
.xc-tbl tbody tr { transition: background-color .15s ease; }
.xc-tbl tbody tr:hover { background: #f8faff; }
.xc-tbl .xc-num { font-family: DINCondensed-Bold, Arial, sans-serif; font-size: 15px; color: #1d2129; }
.xc-tbl .xc-strong { font-weight: 600; color: #1d2129; }
.xc-tbl .xc-muted { color: #8a94a6; }
.xc-tbl__empty { padding: 48px 16px; text-align: center; color: #999; }

/* .xc-page 内原生表格一并美化（不改变结构） */
.xc-page .table { margin-bottom: 0; font-size: 13px; }
.xc-page .table thead th { padding: 11px 14px; font-size: 12px; font-weight: 500; color: #8a94a6; background: #fbfcfe; border-bottom: 1px solid #eff2f7; border-top: 0; }
.xc-page .table tbody td { padding: 13px 14px; color: #333; border-top: 1px solid #f6f7fb; vertical-align: middle; }
.xc-page .table tbody tr:hover { background: #f8faff; }
.xc-page .table-responsive { border: 1px solid #eff2f7; }

/* ---------- 空态 ---------- */
.xc-empty { padding: 56px 20px; text-align: center; color: #8a94a6; }
.xc-empty .bx, .xc-empty i { display: block; margin-bottom: 12px; font-size: 34px; color: #dfe4ee; }
.xc-empty__title { margin: 0; font-size: 14px; color: #4b5563; }
.xc-empty__tip { margin: 6px 0 0; font-size: 12px; color: #b9c0cc; }
.xc-empty .btn { margin-top: 14px; }

/* ---------- 标签 ---------- */
.xc-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; font-size: 12px; line-height: 1; white-space: nowrap; border: 1px solid #e6eaf2; color: #5b6474; background: #fafbfd; }
.xc-tag--ok { color: #2c9c5b; border-color: rgba(63, 191, 112, .35); background: rgba(63, 191, 112, .08); }
.xc-tag--warn { color: #b97a08; border-color: rgba(252, 164, 38, .35); background: rgba(252, 164, 38, .1); }
.xc-tag--danger { color: #c81014; border-color: rgba(227, 21, 25, .3); background: rgba(227, 21, 25, .06); }
.xc-tag--info { color: #0052d9; border-color: rgba(0, 100, 255, .25); background: rgba(0, 100, 255, .06); }
.xc-tag--muted { color: #8a94a6; border-color: #eef1f6; background: #f7f8fb; }

/* ---------- 键值网格 ---------- */
.xc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 22px; }
.xc-kv__k { margin-bottom: 5px; font-size: 12px; color: #8a94a6; }
.xc-kv__v { font-size: 13px; line-height: 1.5; color: #1d2129; word-break: break-all; }
.xc-kv__v--mono { font-family: Consolas, Monaco, monospace; }

/* ---------- 列表行 ---------- */
.xc-rows { border-top: 1px solid #f3f5fa; }
.xc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #f6f7fb; }
.xc-row:last-child { border-bottom: 0; }
.xc-row:hover { background: #f8faff; }
.xc-row__main { min-width: 0; flex: 1 1 240px; }
.xc-row__title { font-size: 13px; color: #1d2129; }
.xc-row__meta { margin-top: 4px; font-size: 12px; color: #8a94a6; }
.xc-row__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 分段控件 / 页签 ---------- */
.xc-seg { display: inline-flex; align-items: stretch; overflow: hidden; background: #fff; border: 1px solid #eff2f7; }
.xc-seg__btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; font-size: 13px; color: #666; background: #fff; border: 0; border-right: 1px solid #eff2f7; cursor: pointer; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.xc-seg__btn:last-child { border-right: 0; }
.xc-seg__btn:hover { color: #0064ff; background: #f7faff; text-decoration: none; }
.xc-seg__btn.is-active { color: #fff; background: #0064ff; }
.xc-seg__btn .bx { font-size: 15px; }

.xc-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid #eff2f7; }
.xc-tabs__item { position: relative; padding: 11px 16px; font-size: 13px; color: #666; text-decoration: none; }
.xc-tabs__item:hover { color: #0064ff; }
.xc-tabs__item.is-active { color: #0064ff; font-weight: 600; }
.xc-tabs__item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0064ff; }

/* ---------- 表单 ---------- */
.xc-page .form-control, .xc-page .custom-select, .xc-page select.form-control { height: auto; min-height: 38px; padding: 8px 12px; line-height: 20px; font-size: 13px; color: #1d2129; background-color: #fff; border: 1px solid #e6eaf2; border-radius: 0; box-shadow: none; }
.xc-page textarea.form-control { height: auto; padding: 10px 12px; line-height: 1.6; }
.xc-page .form-control:focus { border-color: #0064ff; box-shadow: 0 0 0 3px rgba(0, 100, 255, .08); }
.xc-page .form-control::placeholder { color: #b9c0cc; }
.xc-page .form-group label, .xc-page .control-label { margin-bottom: 6px; font-size: 12px; color: #5b6474; }
.xc-page .btn { border-radius: 0; font-size: 13px; }
.xc-page .btn-primary { background: #0064ff; border-color: #0064ff; }
.xc-page .btn-primary:hover { background: #0052d9; border-color: #0052d9; }
.xc-page .custom-control-label::before { border-color: #cfd6e4; }
.xc-page .custom-control-input:checked ~ .custom-control-label::before { background-color: #0064ff; border-color: #0064ff; }
.xc-field { margin-bottom: 16px; }
.xc-field__label { display: block; margin-bottom: 6px; font-size: 12px; color: #5b6474; }
.xc-field__hint { margin-top: 6px; font-size: 12px; color: #b9c0cc; }

/* ---------- 统计块 ---------- */
.xc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.xc-stat { padding: 12px 14px; background: #fff; border: 1px solid #eff2f7; border-left: 3px solid #dfe4ee; transition: box-shadow .2s ease; }
.xc-stat:hover { box-shadow: 0 4px 20px 2px rgba(6, 75, 179, .08); }
.xc-stat__label { font-size: 12px; color: #8a94a6; }
.xc-stat__num { margin-top: 6px; font-family: DINCondensed-Bold, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; color: #1d2129; }
.xc-stat__unit { margin-left: 2px; font-size: 12px; font-weight: 400; color: #8a94a6; }
.xc-stat--info { border-left-color: #0064ff; }
.xc-stat--ok { border-left-color: #3fbf70; }
.xc-stat--warn { border-left-color: #fca426; }
.xc-stat--danger { border-left-color: #e31519; }

/* ---------- 提示条 ---------- */
.xc-note { display: flex; gap: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.7; color: #5b6474; background: #f7faff; border: 1px solid #e8f0ff; }
.xc-note .bx { flex: 0 0 auto; margin-top: 1px; font-size: 15px; color: #0064ff; }
.xc-note--warn { background: #fffaf0; border-color: #fdefd5; }
.xc-note--warn .bx { color: #fca426; }

/* ---------- 原生工具条（table-header / 搜索） ---------- */
.xc-page .table-container { border: 0; }
.xc-page .table-header { padding: 0 0 14px; border: 0; background: transparent; }
.xc-page .table-search .form-control { height: 36px; font-size: 13px; }

/* ---------- 进度 / 时间线 ---------- */
.xc-timeline { position: relative; margin: 0; padding: 4px 0 4px 20px; list-style: none; }
.xc-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: #eff2f7; }
.xc-timeline__item { position: relative; padding: 0 0 18px; }
.xc-timeline__item:last-child { padding-bottom: 0; }
.xc-timeline__item::before { content: ""; position: absolute; left: -19px; top: 4px; width: 9px; height: 9px; border: 2px solid #0064ff; background: #fff; border-radius: 50%; }
.xc-timeline__time { font-size: 12px; color: #b9c0cc; }
.xc-timeline__text { margin-top: 3px; font-size: 13px; color: #4b5563; }

/* ---------- 响应式 ---------- */
@media (max-width: 767.98px) {
  .xc-ph { margin-bottom: 12px; }
  .xc-ph__title { font-size: 17px; }
  .xc-ph__desc { font-size: 12px; }
  .xc-page .card-body, .xc-panel__bd { padding: 14px; }
  .xc-panel__hd { padding: 12px 14px; }
  .xc-kv { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .xc-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .xc-stat__num { font-size: 18px; }
  .xc-row { padding: 12px 14px; }
}

/* 统一内页头部：标题由 .xc-ph 承担，隐藏框架重复的 h4，只保留面包屑 */
.page-content:has(.xc-page) .page-title-box { margin-bottom: 0; padding: 2px 0 0; }
.page-content:has(.xc-page) .page-title-box h4 { display: none; }
.page-content:has(.xc-page) .page-title-box .page-title-right { margin-left: auto; }
.page-content:has(.xc-page) .page-title-box .breadcrumb { font-size: 12px; letter-spacing: .2px; }
.page-content:has(.xc-page) .page-title-box .breadcrumb-item,
.page-content:has(.xc-page) .page-title-box .breadcrumb-item a { color: #8a94a6; }
.page-content:has(.xc-page) .page-title-box .breadcrumb-item.active { color: #4b5563; }
.page-content:has(.xc-page) .page-title-box .breadcrumb-item + .breadcrumb-item::before { color: #c9d0dc; }

/* 标题竖条：原生 .card-title 的 3px 蓝条会与文字重叠，统一改为无边框 + 由页面图标承担视觉锚点 */
.xc-page .card-title,
.xc-page .card-header h4,
.xc-page .card-header h5 { border-left: 0 !important; padding-left: 0 !important; }
.xc-page .card-title > .bx:first-child,
.xc-page .card-header h4 > .bx:first-child { color: #0064ff; }

/* 分页器统一：方形描边按钮，选中实心蓝 */
.xc-page .pagination { display: flex; align-items: center; gap: 4px; margin: 0; }
.xc-page .pagination .page-link,
.xc-page .pagination li > a,
.xc-page .pagination li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #e6eaf2; border-radius: 4px; background: #fff; color: #4b5563; font-size: 13px; line-height: 1; }
.xc-page .pagination .page-item.active .page-link,
.xc-page .pagination li.active > a,
.xc-page .pagination li.active > span { background: #0064ff; border-color: #0064ff; color: #fff; }
.xc-page .pagination .page-link:hover { border-color: #0064ff; color: #0064ff; }
.xc-page .pagination li.disabled > a, .xc-page .pagination li.disabled > span, .xc-page .pagination .page-item.disabled .page-link { color: #c9d0dc; background: #fafbfc; }