/* ============================================================
   znetyun 用户中心主题 · 设计系统 v3.0
   全新大厂级视觉语言 · 简洁 · 大气 · 细腻 · 撑满屏幕 · 多端自适应
   ============================================================ */

/* ---------- 设计 Token ---------- */
:root {
  /* 品牌主色（蚂蚁蓝，现代大厂感） */
  --zy-primary: #1677ff;
  --zy-primary-hover: #4096ff;
  --zy-primary-active: #0958d9;
  --zy-primary-soft: #e8f1ff;
  --zy-primary-softer: #f4f8ff;

  /* 品牌渐变 */
  --zy-gradient: linear-gradient(135deg, #0b4fd6 0%, #1677ff 52%, #4096ff 100%);

  /* 功能色 */
  --zy-success: #00b42a;
  --zy-success-soft: #e8ffea;
  --zy-warning: #ff7d00;
  --zy-warning-soft: #fff3e8;
  --zy-danger: #f53f3f;
  --zy-danger-soft: #ffece8;
  --zy-info: #86909c;

  /* 中性色 */
  --zy-text-1: #1f2329;
  --zy-text-2: #4e5969;
  --zy-text-3: #86909c;
  --zy-text-4: #c0c4cc;

  /* 边框 */
  --zy-border: #e6e9f0;
  --zy-border-light: #eef0f5;

  /* 背景 */
  --zy-bg-page: #f4f6fa;
  --zy-bg-card: #ffffff;
  --zy-bg-hover: #f7f9fc;
  --zy-bg-active: #eef2f8;

  /* 圆角 */
  --zy-radius-sm: 6px;
  --zy-radius: 10px;
  --zy-radius-lg: 14px;
  --zy-radius-xl: 18px;

  /* 阴影 */
  --zy-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --zy-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  --zy-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
  --zy-shadow-blue: 0 10px 28px rgba(22, 119, 255, 0.24);

  /* 字体 */
  --zy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
    "Helvetica Neue", Arial, sans-serif;
  --zy-font-num: "DIN Alternate", "Bebas Neue", "Roboto Mono", "SFMono-Regular",
    var(--zy-font);
}

/* ---------- 全局重置 ---------- */
html, body {
  font-family: var(--zy-font);
  font-size: 14px;
  color: var(--zy-text-1);
  background-color: var(--zy-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, li, td, th, input,
button, select, textarea, label {
  font-family: var(--zy-font);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--zy-text-1);
  font-weight: 600;
}

a {
  color: var(--zy-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--zy-primary-hover); }

.Powered { display: none; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: rgba(15, 23, 42, 0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 23, 42, 0.24); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   布局框架 —— 撑满屏幕
   ============================================================ */
.main-content {
  margin-left: 300px;
  width: calc(100% - 300px);
  min-width: 0;
  min-height: 100vh;
  background-color: var(--zy-bg-page);
  overflow: hidden;
}

.page-content {
  padding: 88px 24px 40px;
  width: 100%;
}

/* 撑满屏幕：取消固定最大宽度限制 */
.container-fluid {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   顶栏 Topbar
   ============================================================ */
#page-topbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--zy-border);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  height: 60px;
  z-index: 1002;
}

.navbar-header { height: 60px; display: flex; align-items: center; }

.navbar-brand-boxuser {
  background: #ffffff !important;
  border-bottom: none;
  border-right: none;
  width: 300px;
  height: 84px;
  padding: 0 24px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.logo-lg img { height: 64px; width: auto; object-fit: contain; }
.logo-sm img { height: 40px; width: auto; object-fit: contain; }

/* 顶部导航 */
.waves-ff {
  height: 60px;
  background: transparent;
  color: var(--zy-text-1);
  display: flex;
  align-items: center;
}
.waves-ff ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.waves-ff li {
  height: 60px;
  line-height: 60px;
  margin-left: 4px;
}
.waves-ff li a {
  color: var(--zy-text-2);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.waves-ff li a:hover {
  color: var(--zy-primary);
  background: var(--zy-primary-soft);
  border: none;
}
.waves-span { font-size: 14px; }

/* 顶栏右侧 */
.d-flex a { color: var(--zy-text-2); }
.d-inline-block {
  color: var(--zy-text-2) !important;
  height: 60px;
  line-height: 60px;
}
.d-inline-block i { color: var(--zy-text-2) !important; }
.sideafter {
  color: var(--zy-text-2) !important;
  font-size: 14px;
  font-weight: 500;
}
.text-dark-50 { color: var(--zy-text-2) !important; }
.d-inline-font { color: var(--zy-text-3) !important; }
.text-dark-50 img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 6px;
  border: 2px solid var(--zy-primary-soft);
}

.dropdown.d-inline-block > a:hover i,
.func-info-row > a:hover { color: var(--zy-primary) !important; }

.is-blue-dark {
  background-color: var(--zy-danger);
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  top: 14px;
  height: 18px;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
  padding: 0 5px;
}

/* 下拉面板 */
.func-info-box,
.func-info-box-zh,
.func-info-cost,
.func-info-support {
  top: 58px;
  border-radius: 12px;
  border: 1px solid var(--zy-border);
  box-shadow: var(--zy-shadow-lg);
  background: #fff;
  overflow: hidden;
  padding: 8px;
  min-width: 220px;
}
.func-info-box:before,
.func-info-box-zh:before { border-color: transparent transparent #ffffff transparent; }

a.dropdown-item {
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  color: var(--zy-text-2);
  border-bottom: none;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.15s ease;
}
a.dropdown-item:hover { background: var(--zy-bg-hover); color: var(--zy-primary); }
a.dropdown-item i { color: var(--zy-text-3); }
a.dropdown-item:hover i { color: var(--zy-primary); }

.menus-lis { list-style: none; margin: 0; padding: 0; }
.menus-lis .panel__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--zy-text-2);
  border-radius: 8px;
  font-size: 13px;
}
.menus-lis .panel__item a:hover { background: var(--zy-bg-hover); color: var(--zy-primary); }
.menus-lis .panel__item i { width: 18px; text-align: center; color: var(--zy-text-3); }
.fn-sdk-nav-dividing-line {
  display: block;
  height: 1px;
  background: var(--zy-border-light);
  margin: 6px 4px;
}

/* ============================================================
   侧边栏 Sidebar
   ============================================================ */
.vertical-menu,
.vertical-menuuser {
  width: 240px;
  top: 60px;
  background: #ffffff;
  border-right: 1px solid var(--zy-border);
  z-index: 1001;
}

.metismenu {
  padding: 14px 12px;
  margin-bottom: 60px;
}

.metismenu li {
  border-bottom: none;
  color: var(--zy-text-2);
  font-size: 14px;
  font-weight: 400;
  text-shadow: none;
  margin: 3px 0;
  border-radius: 10px;
  overflow: hidden;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
  font-size: 14px;
  color: var(--zy-text-2);
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: all 0.18s ease;
  position: relative;
  font-weight: 500;
}

body[data-sidebar="dark"] #sidebar-menu ul li a i {
  color: var(--zy-text-3);
  font-size: 16px;
  margin-right: 6px;
  transition: color 0.18s ease;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover {
  color: var(--zy-primary);
  background: var(--zy-primary-softer);
  border-left-color: var(--zy-primary);
}
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i { color: var(--zy-primary); }

body[data-sidebar="dark"] .mm-active > a {
  color: var(--zy-primary) !important;
  background: var(--zy-primary-soft);
  border-left-color: var(--zy-primary);
  font-weight: 600;
}
body[data-sidebar="dark"] .mm-active > a i { color: var(--zy-primary) !important; }

#sidebar-menu ul li ul.sub-menu li a {
  font-size: 13px;
  color: var(--zy-text-2);
  padding: 9px 14px 9px 46px;
  border-left: 3px solid transparent;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
  color: var(--zy-primary);
  background: var(--zy-primary-softer);
  border-left-color: var(--zy-primary);
}
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a {
  color: var(--zy-primary);
  background: var(--zy-primary-soft);
  border-left-color: var(--zy-primary);
}

.account-bottom {
  background: #fff;
  border-top: 1px solid var(--zy-border-light);
  padding: 8px;
}
.account-bottom .ng-binding img { border-radius: 8px; }

/* ============================================================
   通用卡片系统（重定义 Bootstrap .card）
   ============================================================ */
.card {
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden;
}
.card-body { padding: 22px 24px; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--zy-text-1);
}

/* 旧首页卡片类兼容 */
.ky-ml70, .ky-ml30, .cssTransforms50 {
  background: var(--zy-bg-card);
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ky-ml70:hover, .ky-ml30:hover, .cssTransforms50:hover { box-shadow: var(--zy-shadow); }

.app-overview-card__title h3,
.app-overview-card__title .app-overview-h3,
.app-overview-h3 {
  color: var(--zy-text-1);
  font-weight: 600;
  font-size: 15px;
}
.app-overview-card__body { padding: 22px 24px; }
.app-overview-card__body-new { padding: 22px 24px; }

/* ============================================================
   按钮系统
   ============================================================ */
.btn { border-radius: 8px; font-weight: 500; transition: all 0.2s ease; }

.btn-primary,
.app-overview-btn {
  height: 36px;
  padding: 0 20px;
  background-color: var(--zy-primary);
  border: 1px solid var(--zy-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 34px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2);
}
.btn-primary:hover,
.app-overview-btn:hover {
  background-color: var(--zy-primary-hover);
  border-color: var(--zy-primary-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.28);
  transform: translateY(-1px);
}
.btn-primary:active,
.app-overview-btn:active {
  background-color: var(--zy-primary-active);
  border-color: var(--zy-primary-active);
  transform: translateY(0);
}

.btn-outline-primary {
  color: var(--zy-primary);
  border-color: var(--zy-primary);
  background: transparent;
  border-radius: 8px;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--zy-primary);
  border-color: var(--zy-primary);
}

.btn-success { background-color: var(--zy-success); border-color: var(--zy-success); }
.btn-danger { background-color: var(--zy-danger); border-color: var(--zy-danger); }

.btn-sm { height: 30px; line-height: 28px; padding: 0 14px; font-size: 12px; }
.btn-lg { height: 44px; line-height: 42px; padding: 0 24px; font-size: 14px; }

.app-overview-btn--link { color: var(--zy-primary); border: none; background: transparent; }
.app-overview-btn--link:hover { color: var(--zy-primary-hover); }

._ov-user-account-item__btn,
.el-button--small {
  border: 1px solid var(--zy-primary);
  background: #fff;
  color: var(--zy-primary) !important;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  box-shadow: none;
  height: auto;
  line-height: 20px;
}
._ov-user-account-item__btn:hover,
.el-button--small:hover { background: var(--zy-primary-soft); }

/* ============================================================
   表单系统
   ============================================================ */
.form-control {
  border: 1px solid var(--zy-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--zy-text-1);
  height: 38px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
  border-color: var(--zy-primary);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

.form-group label,
.col-form-label { font-weight: 500; color: var(--zy-text-2); font-size: 13px; }

.overview-search-input {
  height: 40px;
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  font-size: 14px;
  padding-left: 14px;
  color: var(--zy-text-1);
}
.overview-search-input:focus {
  border-color: var(--zy-primary);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

/* ============================================================
   表格系统
   ============================================================ */
.table { color: var(--zy-text-1); font-size: 14px; margin-bottom: 0; }
.table thead th {
  background: #f7f9fc;
  color: var(--zy-text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--zy-border);
  padding: 13px 16px;
  font-size: 13px;
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--zy-border-light);
  vertical-align: middle;
}
.table tbody tr { transition: background 0.15s ease; }
.table tbody tr:hover { background: var(--zy-primary-softer); }
.table tbody tr:last-child td { border-bottom: none; }

.table-responsive {
  border-radius: var(--zy-radius);
  border: 1px solid var(--zy-border);
  background: #fff;
  box-shadow: var(--zy-shadow-sm);
  overflow: hidden;
  min-height: auto;
}

/* 表格容器头部工具条 */
.table-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.table-search .search-box .form-control { padding-right: 38px; }

/* 状态徽章 */
.badge { font-weight: 500; padding: 5px 12px; border-radius: 20px; font-size: 12px; }
.status { border-radius: 20px; }
.status:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  display: inline-block;
  background: currentColor;
}
.status-active, .status-paid, .status-success { background: var(--zy-success-soft); color: var(--zy-success); }
.status-active:before, .status-paid:before, .status-success:before { background: var(--zy-success); }
.status-pending, .status-unpaid { background: var(--zy-warning-soft); color: var(--zy-warning); }
.status-pending:before, .status-unpaid:before { background: var(--zy-warning); }
.status-suspended { background: var(--zy-danger-soft); color: var(--zy-danger); }
.status-suspended:before { background: var(--zy-danger); }
.status-cancelled, .status-deleted, .status-refunded { background: #f0f1f5; color: var(--zy-text-3); }
.status-cancelled:before, .status-deleted:before, .status-refunded:before { background: var(--zy-text-3); }

.badge-pill { border-radius: 20px; }

/* ============================================================
   Tab 导航
   ============================================================ */
.nav-tabs-custom { border-bottom: 1px solid var(--zy-border); margin-bottom: 20px; }
.nav-tabs-custom .nav-item .nav-link {
  border: none;
  color: var(--zy-text-2);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 18px;
  position: relative;
  background: transparent;
}
.nav-tabs-custom .nav-item .nav-link:hover { color: var(--zy-primary); }
.nav-tabs-custom .nav-item .nav-link.active {
  color: var(--zy-primary);
  background: transparent;
}
.tab-content { color: var(--zy-text-2); }

/* ============================================================
   分页
   ============================================================ */
.pagination .page-link {
  border: 1px solid var(--zy-border);
  color: var(--zy-text-2);
  border-radius: 6px;
  margin: 0 3px;
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
}
.pagination .page-item.active .page-link {
  background: var(--zy-primary);
  border-color: var(--zy-primary);
  color: #fff;
}
.pagination .page-link:hover { background: var(--zy-primary-soft); color: var(--zy-primary); border-color: var(--zy-primary-soft); }

/* ============================================================
   弹窗
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-lg);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--zy-border-light); padding: 18px 24px; background: #fff; }
.modal-header .modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--zy-border-light); padding: 16px 24px; }

/* ============================================================
   首页仪表盘 · 欢迎横幅
   ============================================================ */
.zy-welcome {
  position: relative;
  border-radius: var(--zy-radius-xl);
  background: linear-gradient(120deg, #eaf2ff 0%, #dbe9ff 38%, #eef6ff 70%, #e2edff 100%);
  color: var(--zy-text-1);
  padding: 34px 38px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(22, 119, 255, 0.10);
}
.zy-welcome::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, 0.12) 0%, rgba(22, 119, 255, 0) 70%);
  pointer-events: none;
}
.zy-welcome::after {
  content: "";
  position: absolute;
  right: 90px;
  bottom: -110px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 46, 209, 0.10) 0%, rgba(114, 46, 209, 0) 70%);
  pointer-events: none;
}
.zy-welcome__bg { display: none; }
.zy-welcome__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  z-index: 1;
}
.zy-welcome__hello {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--zy-text-1);
  letter-spacing: 0.4px;
}
.zy-welcome__desc { margin: 0 0 22px; font-size: 14px; color: var(--zy-text-2); }
.zy-welcome__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.zy-welcome__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--zy-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
}
.zy-welcome__btn:hover { background: var(--zy-primary-active); color: #fff; transform: translateY(-2px); }
.zy-welcome__btn--ghost {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(22, 119, 255, 0.35);
  color: var(--zy-primary);
  box-shadow: none;
}
.zy-welcome__btn--ghost:hover { background: #fff; color: var(--zy-primary-active); border-color: var(--zy-primary); }

/* 右侧数据卡片：单列 4 个 · 字体与「已实名」标签一致 */
.zy-welcome__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 0 1 260px;
  min-width: 200px;
  text-align: left;
}
.zy-welcome__stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.06);
  backdrop-filter: blur(4px);
}
.zy-welcome__stat-num {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  font-family: var(--zy-font);
  color: var(--zy-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zy-welcome__stat-label { font-size: 12px; color: var(--zy-text-3); white-space: nowrap; flex-shrink: 0; }

/* 首页布局 */
.ky-row { display: flex; gap: 20px; flex-wrap: wrap; }
.ky-left { flex: 1 1 640px; min-width: 0; }
.ky-right { flex: 0 1 380px; min-width: 300px; }
.ky-card-left, .ky-card-right { padding-right: 0; }
.ky-ml70, .ky-ml30 { margin-top: 16px; }

/* 产品分类块 */
._ov-block-item, ._ov-block-itemm {
  background: var(--zy-bg-hover);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--zy-text-2);
  transition: all 0.22s ease;
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 14px;
  display: flex;
  align-items: center;
}
._ov-block-item:hover, ._ov-block-itemm:hover {
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
  border-color: rgba(22, 119, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: var(--zy-shadow);
}
._ov-block-item__inner { color: inherit; font-size: 13px; display: flex; align-items: center; }
._ov-block-item__inner img { width: 20px; margin-right: 10px; }

/* 用户信息卡 */
._ov-user-info { margin-bottom: 20px; }
._ov-user-info__avatar {
  flex: 0 0 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid var(--zy-primary-soft);
  object-fit: cover;
}
._ov-user-info__name { font-size: 17px; font-weight: 600; color: var(--zy-text-1); }
._ov-user-info__name a { color: var(--zy-text-1); }

/* 账户统计 */
._ov-user-account-itemuser, ._ov-user-account-item {
  background: var(--zy-bg-hover);
  border-radius: 12px;
  padding: 16px;
  box-shadow: none;
  border: 1px solid transparent;
  transition: all 0.22s ease;
  height: 100%;
}
._ov-user-account-itemuser:hover, ._ov-user-account-item:hover {
  background: var(--zy-primary-softer);
  border-color: rgba(22, 119, 255, 0.18);
  cursor: pointer;
  transform: translateY(-2px);
}
._ov-user-account-item__title { color: var(--zy-text-3); font-size: 12px; }
._ov-user-account-item__num-main {
  font-size: 22px;
  font-weight: 700;
  color: var(--zy-text-1);
  font-style: normal;
  font-family: var(--zy-font-num);
}

/* 提示条 */
.app-overview-alert {
  background: var(--zy-primary-softer);
  border: 1px solid rgba(22, 119, 255, 0.15);
  border-radius: 10px;
  color: var(--zy-text-2);
  padding: 14px 16px;
}

/* 安全中心列表 */
._ov-key-issues ._ov-block-item {
  background: #fff;
  border: 1px solid var(--zy-border-light);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 13px 16px;
}
._ov-key-issues ._ov-block-item:hover { border-color: rgba(22, 119, 255, 0.3); }

/* 公告列表 */
.card-bodypx ul { border-top: 1px solid var(--zy-border-light); list-style: none; padding: 0; margin: 0; }
.card-bodypx li {
  border-bottom: 1px solid var(--zy-border-light);
  padding: 12px 4px;
  transition: background 0.15s ease;
}
.card-bodypx li:hover { background: var(--zy-primary-softer); border-radius: 6px; }
.card-bodypx li a { color: var(--zy-text-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-bodypx li:hover a { color: var(--zy-primary); }
.card-bodypx li span { color: var(--zy-text-3); font-size: 12px; flex-shrink: 0; }

/* 推广卡片 */
._ov-disk-snapshot {
  background-color: var(--zy-primary-softer);
  border-radius: 12px;
  padding: 20px;
}

.app-overview-bb { color: var(--zy-primary); }
.app-overview-anew { font-size: 12px; color: var(--zy-text-3); }
.app-overview-anew:hover { color: var(--zy-primary); }

/* ============================================================
   产品详情页（大厂感）
   ============================================================ */
.server_header_box {
  background-image: var(--zy-gradient) !important;
  border-radius: var(--zy-radius-xl) !important;
  padding: 28px 30px !important;
  box-shadow: var(--zy-shadow-blue) !important;
  position: relative;
  overflow: hidden;
}
.server_header_box::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.box_left_wrap {
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  min-height: 76px;
  padding-left: 26px !important;
}

.powerimg {
  background-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 58px !important;
  height: 58px !important;
  transition: all 0.2s ease;
}
.powerimg:hover { background-color: rgba(255, 255, 255, 0.28) !important; }

.left_wrap_btn, .custom-button {
  background-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 12px !important;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.left_wrap_btn:hover, .custom-button:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.server_header_box h4 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
}

.server_header_box .text-white-50 { color: rgba(255, 255, 255, 0.7) !important; }

/* 详情页主体 */
.servicedetail-tab, .tab-content, .card { border-radius: var(--zy-radius-lg); }

/* 详情页左侧信息块 */
.bg-gray { background-color: #f7f9fc !important; border-radius: 10px; }
.text-gray { color: var(--zy-text-3); }
.dc { color: var(--zy-primary); }

/* ============================================================
   安全中心
   ============================================================ */
.security-header {
  border-radius: var(--zy-radius-xl);
  background-image: var(--zy-gradient);
  background-repeat: no-repeat;
  background-position: 100%;
  border: none;
  box-shadow: var(--zy-shadow-blue);
  margin-bottom: 20px;
}
.security-header .card-body { padding: 28px 30px; }
.security-info {
  padding: 18px 22px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
}
.security-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.security-logo {
  width: 64px;
  height: 64px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.security-username { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #fff; }
.security-username .badge { font-size: 12px; }

.security-item {
  padding: 18px 6px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--zy-border-light);
  transition: all 0.2s ease;
  margin-bottom: 0;
}
.security-item:last-child { border-bottom: none; }
.security-item:hover { background: var(--zy-primary-softer); border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.security-item-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 16px;
  font-size: 20px;
  flex-shrink: 0;
}
.security-item-icon.bg-primary { background: var(--zy-primary-soft) !important; color: var(--zy-primary); }
.security-item-icon.bg-info { background: #e8f7ff !important; color: #0fc6c2; }
.security-item-title { color: var(--zy-text-1); font-size: 14px; font-weight: 600; }
.security-item-title small { margin-left: 12px; color: var(--zy-success); font-weight: 500; }
.security-item-desc { color: var(--zy-text-3); font-size: 12px; }

/* ============================================================
   个人信息页
   ============================================================ */
.Personal-row { display: flex; gap: 20px; flex-wrap: wrap; }
.Personal-left { flex: 0 1 320px; min-width: 260px; }
.Personal-right { flex: 1 1 560px; min-width: 0; }
.el-card {
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
  background: #fff;
  transition: box-shadow 0.25s ease;
}
.el-card:hover, .el-card.is-hover-shadow:hover { box-shadow: var(--zy-shadow); }
.el-card__body { padding: 24px; }

.personal-center-user-info { text-align: center; }
.personal-center-user-info .el-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--zy-primary-soft);
  overflow: hidden;
}
.personal-center-user-info .el-avatar img { width: 100%; height: 100%; object-fit: cover; }
.personal-center-user-info-full-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--zy-text-1);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.personal-center-user-info-description { color: var(--zy-text-3); font-size: 13px; margin-bottom: 16px; }
.personal-center-user-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.personal-center-user-info-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--zy-border-light);
  color: var(--zy-text-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.personal-center-user-info-list li i { width: 18px; text-align: center; color: var(--zy-text-3); }
.personal-center-user-info-list li:last-child { border-bottom: none; }

/* 向导步骤 */
.wizard-steps { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.wizard-step {
  flex: 1;
  min-width: 120px;
  background: var(--zy-bg-hover);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.wizard-step:hover { border-color: var(--zy-border); }
.wizard-step.stepactive {
  background: var(--zy-primary-soft);
  border-color: rgba(22, 119, 255, 0.3);
}
.wizard-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zy-bg-active);
  color: var(--zy-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wizard-step.stepactive .wizard-number { background: var(--zy-primary); color: #fff; }
.wizard-title { font-size: 13px; font-weight: 600; color: var(--zy-text-1); }
.wizard-step.stepactive .wizard-title { color: var(--zy-primary); }

/* ============================================================
   充值页
   ============================================================ */
.tr_recharge { padding: 4px 0; }
.tr_rechtext { background: var(--zy-primary-softer); border-radius: 10px; padding: 14px 18px; color: var(--zy-text-2); font-size: 13px; margin-bottom: 22px; }
.tr_rechtext p { margin-bottom: 6px; }
.tr_rechtext p:last-child { margin-bottom: 0; }

.money_box__Cm_Aa {
  background: var(--zy-gradient);
  border-radius: var(--zy-radius-lg);
  padding: 24px 28px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: var(--zy-shadow-blue);
}
.top_balance_money__1Zd_X { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.money_text__2RQM- { font-size: 15px; }
.money_text__2RQM- b { font-size: 26px; font-weight: 700; font-family: var(--zy-font-num); }
.money_top__1QHym { font-size: 12px; color: rgba(255, 255, 255, 0.75); margin-bottom: 8px; }
.payimg { width: 26px; height: 26px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 2px solid rgba(255, 255, 255, 0.4); }

.addfunds-payment {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s ease;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.addfunds-payment.active,
.addfunds-payment:hover {
  cursor: pointer;
  border-color: var(--zy-primary);
  background: var(--zy-primary-softer);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}
.addfunds-payment img { height: 30px; max-width: 100%; }

/* ============================================================
   登录页
   ============================================================ */
.auth-full-bg .bg-overlay {
  background-size: cover !important;
  opacity: 1 !important;
}
.auth-full-bg { background: var(--zy-bg-page) !important; }

/* 登录卡片 */
.my-auto {
  background: #fff;
  border-radius: var(--zy-radius-xl);
  box-shadow: var(--zy-shadow-lg);
  padding: 40px;
  max-width: 440px;
  width: 100%;
}
.affs-nav.nav-tabs-custom .nav-item .nav-link.active { color: var(--zy-primary); }
.thm_btn {
  height: 46px;
  border-radius: 10px;
  background: var(--zy-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  transition: all 0.2s ease;
}
.thm_btn:hover { background: var(--zy-primary-hover); color: #fff; }

/* ============================================================
   工具类
   ============================================================ */
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--zy-text-4);
  font-size: 14px;
}
.pointer { cursor: pointer; }
.text-primary { color: var(--zy-primary) !important; }
.text-success { color: var(--zy-success) !important; }
.text-danger { color: var(--zy-danger) !important; }
.text-warning { color: var(--zy-warning) !important; }
.bg-primary { background-color: var(--zy-primary) !important; }
.text-dark { color: var(--zy-text-1) !important; }
.text-muted { color: var(--zy-text-3) !important; }

.progress { border-radius: 10px; height: 8px; background: var(--zy-bg-active); }
.progress-bar { border-radius: 10px; }

/* 表单卡片标题小图标 */
.card-title.mb-3, .card-title.mb-4 { font-size: 15px; }

/* ============================================================
   响应式 —— 多端自适应
   ============================================================ */
@media (max-width: 1400px) {
  .ky-right { flex-basis: 340px; }
}

@media (max-width: 1199px) {
  .ky-row { flex-direction: column; }
  .ky-left, .ky-right { flex: 1 1 100%; width: 100%; }
  .ky-right { min-width: 0; }
}

@media (max-width: 991px) {
  .main-content { margin-left: 0; width: auto; }
  .vertical-menu { left: -300px; transition: left 0.3s ease; }
  .vertical-menu.show { left: 0; }
  .navbar-brand-boxuser { width: 200px; }
  .Personal-row { flex-direction: column; }
  .Personal-left, .Personal-right { flex: 1 1 100%; width: 100%; }
}

@media (max-width: 767px) {
  .page-content { padding: 72px 14px 24px; }
  .navbar-brand-boxuser,
  .waves-ff,
  .web_none,
  span.waves-span,
  font.d-inline-font { display: none !important; }
  .app-overview-grid__item-6,
  .app-overview-grid__item-8,
  .app-overview-grid__item-12 { width: 100%; }
  .d-inline-block { margin-left: 8px; }

  .zy-welcome { padding: 24px 20px; }
  .zy-welcome__hello { font-size: 22px; }
  .zy-welcome__stats { gap: 8px; width: 100%; grid-template-columns: 1fr; }
  .zy-welcome__stat-num { font-size: 12px; }

  .server_header_box { padding: 20px !important; }
  .box_left_wrap { border-left: none !important; padding-left: 0 !important; }

  .card-body { padding: 18px 16px; }
  .app-overview-card__body { padding: 18px 16px; }

  .table-header { flex-direction: column; align-items: stretch; }
  .table-search .search-box { width: 100%; }

  .security-item:hover { padding-left: 8px; padding-right: 8px; }
}

/* ============================================================
   列表页 · 卡片化表格（.tablelist）
   产品列表 / 账单 / 交易记录 / 工单 等统一升级为卡片式列表
   ============================================================ */
.table-responsive:has(.tablelist) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: auto !important;
}

.table.tablelist {
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table.tablelist thead,
.table.tablelist thead.bg-light,
.table.tablelist thead th {
  background: transparent !important;
  border: none !important;
  padding: 4px 16px;
  color: var(--zy-text-3);
  font-size: 13px;
  font-weight: 600;
}

.table.tablelist tbody tr {
  background: #fff;
  box-shadow: var(--zy-shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.table.tablelist tbody td {
  border-top: 1px solid var(--zy-border);
  border-bottom: 1px solid var(--zy-border);
  background: #fff;
  padding: 15px 16px;
  vertical-align: middle;
}

.table.tablelist tbody td:first-child {
  border-left: 1px solid var(--zy-border);
  border-radius: var(--zy-radius) 0 0 var(--zy-radius);
}

.table.tablelist tbody td:last-child {
  border-right: 1px solid var(--zy-border);
  border-radius: 0 var(--zy-radius) var(--zy-radius) 0;
}

.table.tablelist tbody tr:hover {
  box-shadow: var(--zy-shadow);
  transform: translateY(-1px);
}

.table.tablelist tbody tr:hover td {
  background: #fff !important;
}

/* 列表页工具条：筛选 + 搜索 */
.table-header {
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius);
  box-shadow: var(--zy-shadow-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.table-header .table-filter,
.table-header .table-search { margin: 0; }
.table-search .search-box .position-relative { position: relative; }
.search-box .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zy-text-3);
  cursor: pointer;
  font-size: 18px;
}
.search-box .form-control { padding-right: 40px; }

/* bootstrap-select 下拉框美化 */
.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--zy-border);
  border-radius: 8px;
  background: #fff;
  color: var(--zy-text-2);
  font-size: 14px;
  height: 38px;
  line-height: 36px;
  padding: 0 30px 0 12px;
}
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--zy-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}
.bootstrap-select .dropdown-menu {
  border: 1px solid var(--zy-border);
  border-radius: 10px;
  box-shadow: var(--zy-shadow-lg);
  padding: 6px;
}
.bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 6px;
  height: 34px;
  line-height: 34px;
  border-bottom: none;
}
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:hover {
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
}

/* 自定义复选框 */
.custom-control.custom-checkbox { padding-left: 0; margin: 0; min-height: auto; }
.custom-control.custom-checkbox > *:first-child { margin-right: 0; }
.custom-control-label::before {
  border: 1px solid var(--zy-border) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--zy-primary) !important;
  background-color: var(--zy-primary) !important;
}

/* 列表页卡片化后：表格上方不再需要内部横线 */
.table.tablelist tbody tr:hover .dots { border-color: #fff; }

/* ============================================================
   账单详情页（发票式账单）
   ============================================================ */
.box {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
  padding: 32px 36px;
  font-size: 14px;
}
.box header hr { border-color: var(--zy-border-light); margin: 20px 0; }
.box address { color: var(--zy-text-2); font-style: normal; line-height: 1.9; }
.box strong { color: var(--zy-text-1); }
.box .head-img { height: 56px; object-fit: contain; }

.text-style {
  text-align: center;
  display: inline-block;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 22px;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.text-style.text-success {
  background: var(--zy-success-soft);
  color: var(--zy-success) !important;
}
.text-style.text-danger {
  background: var(--zy-danger-soft);
  color: var(--zy-danger) !important;
}
.box .table thead td,
.box .table thead th {
  background: #f7f9fc;
  color: var(--zy-text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--zy-border) !important;
}
.box .table tbody td { padding: 14px 16px; border-color: var(--zy-border-light); }
.box .card { box-shadow: none; }
.box footer .btn-light {
  border: 1px solid var(--zy-border) !important;
  border-radius: 8px;
  color: var(--zy-text-2) !important;
  transition: all 0.2s ease;
}
.box footer .btn-light:hover {
  color: var(--zy-primary) !important;
  border-color: var(--zy-primary) !important;
  background: var(--zy-primary-softer) !important;
}

/* 账单号徽章 */
.badge.badge-light {
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

/* ============================================================
   v3.1 仪表盘强化
   ============================================================ */

/* ---------- 用户头像（QQ邮箱 / 普通邮箱 / 拼音首字母） ---------- */
.zy-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--zy-primary-soft);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--zy-font-num);
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  text-transform: uppercase;
  user-select: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zy-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zy-user-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}
.zy-user-avatar--xl {
  width: 88px;
  height: 88px;
  font-size: 32px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  border: 4px solid rgba(255, 255, 255, 0.55);
}
.zy-user-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

/* 头像渐变背景（无图时展示用户名首字母） */
.zy-user-avatar {
  background: var(--zy-gradient);
  color: #fff;
}
.zy-user-avatar--lg {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

/* 顶栏头像尺寸覆盖 */
.text-dark-50 .zy-user-avatar { width: 32px; height: 32px; font-size: 12px; }

/* ---------- 欢迎横幅（升级版） ---------- */
.zy-welcome__left {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 460px;
  min-width: 0;
}
.zy-welcome__avatar {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
}
.zy-welcome__halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, 0.22) 0%, rgba(22, 119, 255, 0) 70%);
  z-index: -1;
  animation: zy-halo 3.6s ease-in-out infinite;
}
@keyframes zy-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}
.zy-welcome__text { min-width: 0; flex: 1; }
.zy-welcome__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.zy-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--zy-text-2);
  border: 1px solid rgba(255, 255, 255, 0.95);
  transition: all 0.2s ease;
  text-decoration: none;
}
.zy-tag i { font-size: 12px; }
.zy-tag:hover {
  background: #fff;
  border-color: var(--zy-primary);
  color: var(--zy-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(22, 119, 255, 0.15);
  text-decoration: none;
}
.zy-tag--ok { background: rgba(0, 180, 42, 0.10); border-color: rgba(0, 180, 42, 0.28); color: var(--zy-success); }
.zy-tag--ok:hover { border-color: var(--zy-success); color: var(--zy-success); }
.zy-tag--warn { background: rgba(255, 125, 0, 0.10); border-color: rgba(255, 125, 0, 0.28); color: var(--zy-warning); }
.zy-tag--warn:hover { border-color: var(--zy-warning); color: var(--zy-warning); }

.zy-welcome__actions .zy-welcome__btn i { margin-right: 6px; }

/* 欢迎区在窄屏自适应 */
@media (max-width: 991px) {
  .zy-welcome__left { flex-direction: column; align-items: flex-start; }
  .zy-welcome__avatar { flex-basis: 72px; width: 72px; height: 72px; }
  .zy-welcome__avatar .zy-user-avatar--xl { width: 72px; height: 72px; font-size: 26px; }
}

/* ---------- 核心数据卡片 ---------- */
.zy-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.zy-metric {
  position: relative;
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow: hidden;
  box-shadow: var(--zy-shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.zy-metric:hover {
  transform: translateY(-3px);
  box-shadow: var(--zy-shadow);
}
.zy-metric__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: #fff;
  background: var(--zy-primary);
}
.zy-metric--primary .zy-metric__icon { background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); }
.zy-metric--warning .zy-metric__icon { background: linear-gradient(135deg, #ff7d00 0%, #ffb84d 100%); }
.zy-metric--purple  .zy-metric__icon { background: linear-gradient(135deg, #722ed1 0%, #a667ff 100%); }
.zy-metric--success .zy-metric__icon { background: linear-gradient(135deg, #00b42a 0%, #4cd964 100%); }

.zy-metric__body { min-width: 0; flex: 1; }
.zy-metric__label { color: var(--zy-text-3); font-size: 13px; margin-bottom: 6px; }
.zy-metric__num {
  font-family: var(--zy-font-num);
  font-size: 28px;
  font-weight: 700;
  color: var(--zy-text-1);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.zy-metric__num i { font-size: 16px; font-weight: 600; color: var(--zy-text-2); font-style: normal; }
.zy-metric__extra { margin-top: 10px; }
.zy-metric__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--zy-primary);
  background: var(--zy-primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.zy-metric__chip:hover {
  background: var(--zy-primary);
  color: #fff;
}
.zy-metric__deco {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--zy-primary-soft);
  opacity: 0.5;
  pointer-events: none;
  transition: transform 0.4s ease;
}
.zy-metric:hover .zy-metric__deco { transform: scale(1.15); }
.zy-metric--warning .zy-metric__deco { background: var(--zy-warning-soft); }
.zy-metric--purple  .zy-metric__deco { background: #f3e8ff; }
.zy-metric--success .zy-metric__deco { background: var(--zy-success-soft); }

@media (max-width: 1199px) { .zy-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px)  { .zy-metrics { grid-template-columns: 1fr; } }

/* ---------- 通用面板 ---------- */
.zy-panel {
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
  margin-top: 16px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.zy-panel:hover { box-shadow: var(--zy-shadow); }
.zy-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--zy-border-light);
  background: #fff;
  gap: 12px;
  flex-wrap: wrap;
}
.zy-panel__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.zy-panel__title h3 { font-size: 15px; font-weight: 600; color: var(--zy-text-1); margin: 0; }
.zy-panel__hint { color: var(--zy-text-3); font-size: 12px; }
.zy-panel__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zy-primary);
  background: var(--zy-primary-soft);
  font-size: 14px;
  flex-shrink: 0;
}
.zy-panel__icon--blue   { background: var(--zy-primary-soft);   color: var(--zy-primary); }
.zy-panel__icon--green  { background: var(--zy-success-soft);   color: var(--zy-success); }
.zy-panel__icon--orange { background: var(--zy-warning-soft);   color: var(--zy-warning); }
.zy-panel__icon--purple { background: #f3e8ff;                  color: #722ed1; }
.zy-panel__icon--gold   { background: #fff7e8;                  color: #d48806; }
.zy-panel__icon--cyan   { background: #e6fffb;                  color: #13c2c2; }

.zy-panel__more {
  font-size: 12px;
  color: var(--zy-text-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}
.zy-panel__more:hover { color: var(--zy-primary); }

.zy-panel__head-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 280px;
  min-width: 0;
}
.zy-panel__head-search .form-control { height: 34px; padding: 4px 12px; }
.zy-panel__search-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--zy-border);
  background: #fff;
  border-radius: 8px;
  color: var(--zy-text-2);
  transition: all 0.2s ease;
  cursor: pointer;
}
.zy-panel__search-btn:hover {
  color: var(--zy-primary);
  border-color: var(--zy-primary);
  background: var(--zy-primary-soft);
}

.zy-panel__body { padding: 18px 22px; }
.zy-panel__body--flush { padding: 0; }

/* ---------- 合作/佣金计划 ---------- */
.zy-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.zy-plan {
  position: relative;
  border-radius: var(--zy-radius-lg);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--zy-border);
  background: #fff;
  color: var(--zy-text-1);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.zy-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--zy-shadow-lg);
  text-decoration: none;
  color: var(--zy-text-1);
}
.zy-plan__top { display: flex; align-items: center; justify-content: space-between; }
.zy-plan__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(22, 119, 255, 0.12);
  color: var(--zy-primary);
}
.zy-plan__tag--gold { background: #fff3e0; color: #d48806; }
.zy-plan__tag--new  { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-plan__tag--gray { background: #f0f1f5; color: var(--zy-text-2); }
.zy-plan__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: var(--zy-primary);
}
.zy-plan--blue   .zy-plan__icon { background: linear-gradient(135deg, #1677ff, #4096ff); }
.zy-plan--purple .zy-plan__icon { background: linear-gradient(135deg, #722ed1, #a667ff); }
.zy-plan--orange .zy-plan__icon { background: linear-gradient(135deg, #ff7d00, #ffb84d); }
.zy-plan--ghost  .zy-plan__icon { background: linear-gradient(135deg, #86909c, #c0c4cc); }

.zy-plan__title { font-size: 15px; font-weight: 700; margin: 4px 0 0; }
.zy-plan__desc { font-size: 12px; color: var(--zy-text-3); margin: 0; line-height: 1.5; min-height: 36px; }
.zy-plan__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0 4px;
}
.zy-plan__stat-num {
  font-family: var(--zy-font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--zy-text-1);
}
.zy-plan__stat-label { font-size: 12px; color: var(--zy-text-3); }
.zy-plan__cta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--zy-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
}
.zy-plan:hover .zy-plan__cta { gap: 8px; }
.zy-plan--blue::before,
.zy-plan--purple::before,
.zy-plan--orange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22,119,255,0.06), rgba(22,119,255,0));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.zy-plan:hover::before { opacity: 1; }
.zy-plan--ghost {
  background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 12px, #f4f6fa 12px, #f4f6fa 24px);
  border-style: dashed;
}

@media (max-width: 1199px) { .zy-plans { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px)  { .zy-plans { grid-template-columns: 1fr; } }

/* ---------- 资源 / 快捷入口卡片 ---------- */
.zy-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.zy-resource {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--zy-radius);
  background: #fff;
  border: 1px solid var(--zy-border-light);
  color: var(--zy-text-1);
  transition: all 0.2s ease;
  text-decoration: none;
}
.zy-resource:hover {
  border-color: rgba(22, 119, 255, 0.35);
  background: var(--zy-primary-softer);
  transform: translateY(-2px);
  box-shadow: var(--zy-shadow);
  text-decoration: none;
  color: var(--zy-text-1);
}
.zy-resource__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  background: linear-gradient(135deg, #1677ff, #4096ff);
  flex-shrink: 0;
}
.zy-resource__icon--0 { background: linear-gradient(135deg, #1677ff, #4096ff); }
.zy-resource__icon--1 { background: linear-gradient(135deg, #00b42a, #4cd964); }
.zy-resource__icon--2 { background: linear-gradient(135deg, #ff7d00, #ffb84d); }
.zy-resource__icon--3 { background: linear-gradient(135deg, #722ed1, #a667ff); }
.zy-resource__icon--4 { background: linear-gradient(135deg, #f53f3f, #ff7875); }
.zy-resource__icon--5 { background: linear-gradient(135deg, #0fc6c2, #6dd9d6); }
.zy-resource__body { flex: 1; min-width: 0; }
.zy-resource__title { font-size: 14px; font-weight: 600; color: var(--zy-text-1); }
.zy-resource__count { font-size: 12px; color: var(--zy-text-3); }
.zy-resource__count span { font-size: 12px; }
.zy-resource__arrow { color: var(--zy-text-4); transition: transform 0.2s ease, color 0.2s ease; }
.zy-resource:hover .zy-resource__arrow { color: var(--zy-primary); transform: translateX(3px); }
.zy-resource--soft { background: #f7f9fc; }

@media (max-width: 991px)  { .zy-resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px)  { .zy-resource-grid { grid-template-columns: 1fr; } }

/* 空态 */
.zy-empty-soft {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px 0;
  color: var(--zy-text-3);
}
.zy-empty-soft i { font-size: 36px; color: var(--zy-text-4); }
.zy-empty-soft p { margin: 8px 0 14px; font-size: 13px; }
.zy-empty-soft__btn {
  display: inline-block;
  padding: 6px 18px;
  background: var(--zy-primary);
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
}
.zy-empty-soft__btn:hover { background: var(--zy-primary-hover); }
.zy-empty-soft__rec {
  font-size: 12px;
  color: var(--zy-text-3);
  text-align: left;
  margin-bottom: 8px;
}

/* ---------- 快捷服务 ---------- */
.zy-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.zy-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: var(--zy-radius);
  background: #fff;
  border: 1px solid var(--zy-border-light);
  color: var(--zy-text-2);
  font-size: 13px;
  transition: all 0.2s ease;
  text-decoration: none;
  min-width: 0;
}
.zy-quick i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.zy-quick__text { min-width: 0; }
.zy-quick span { font-size: 13px; font-weight: 600; color: var(--zy-text-1); display: block; }
.zy-quick small { display: block; font-size: 11px; color: var(--zy-text-3); margin-top: 2px; font-weight: 400; }
.zy-quick:hover {
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: var(--zy-shadow);
  border-color: transparent;
}
.zy-quick--blue i   { background: var(--zy-primary-soft); color: #1677ff; }
.zy-quick--purple i { background: #f3e8ff; color: #722ed1; }
.zy-quick--green i  { background: var(--zy-success-soft); color: #00b42a; }
.zy-quick--orange i { background: var(--zy-warning-soft); color: #ff7d00; }
.zy-quick--red i    { background: var(--zy-danger-soft); color: #f53f3f; }
.zy-quick--cyan i   { background: #e6fffb; color: #13c2c2; }

@media (max-width: 1199px) { .zy-quick-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 575px)  { .zy-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- 个人卡片（右侧） ---------- */
.zy-profile { position: relative; padding: 0; }
.zy-profile__bg {
  height: 88px;
  background: var(--zy-gradient);
  position: relative;
  overflow: hidden;
}
.zy-profile__bg::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.zy-profile__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  margin-top: -32px;
  position: relative;
}
.zy-profile__avatar { flex-shrink: 0; }
.zy-profile__basic { padding-top: 28px; min-width: 0; flex: 1; }
.zy-profile__name { font-size: 17px; font-weight: 700; color: var(--zy-text-1); margin: 0; }
.zy-profile__meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--zy-text-3);
}
.zy-profile__security {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  padding: 18px 22px 0;
}
.zy-profile__sec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  background: var(--zy-bg-hover);
  color: var(--zy-text-2);
  font-size: 12px;
  text-align: center;
  transition: all 0.2s ease;
  text-decoration: none;
}
.zy-profile__sec-item i { font-size: 20px; }
.zy-profile__sec-item:hover { background: var(--zy-primary-soft); color: var(--zy-primary); text-decoration: none; }
.zy-profile__quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--zy-border-light);
}
.zy-profile__quick-item {
  padding: 12px 4px;
  text-align: center;
  font-size: 12px;
  color: var(--zy-text-2);
  border-right: 1px solid var(--zy-border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.zy-profile__quick-item:last-child { border-right: none; }
.zy-profile__quick-item i { font-size: 14px; color: var(--zy-text-3); }
.zy-profile__quick-item:hover { color: var(--zy-primary); background: var(--zy-primary-softer); text-decoration: none; }
.zy-profile__quick-item:hover i { color: var(--zy-primary); }

/* ---------- 概览/安全/联系 列表行 ---------- */
.zy-overview-list { display: flex; flex-direction: column; gap: 0; }
.zy-overview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px dashed var(--zy-border-light);
  color: var(--zy-text-2);
  transition: all 0.2s ease;
  text-decoration: none;
}
.zy-overview-row:last-child { border-bottom: none; }
.zy-overview-row:hover { background: var(--zy-primary-softer); color: var(--zy-primary); text-decoration: none; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.zy-overview-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.zy-overview-row__icon--blue   { background: linear-gradient(135deg, #1677ff, #4096ff); }
.zy-overview-row__icon--orange { background: linear-gradient(135deg, #ff7d00, #ffb84d); }
.zy-overview-row__icon--purple { background: linear-gradient(135deg, #722ed1, #a667ff); }
.zy-overview-row__icon--green  { background: linear-gradient(135deg, #00b42a, #4cd964); }
.zy-overview-row__icon--gray   { background: linear-gradient(135deg, #86909c, #c0c4cc); }
.zy-overview-row__label { flex: 1; font-size: 13px; }
.zy-overview-row__num { font-family: var(--zy-font-num); font-weight: 700; color: var(--zy-text-1); font-size: 14px; }

/* ---------- 徽章 ---------- */
.zy-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
}
.zy-pill--ok   { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-pill--warn { background: var(--zy-warning-soft); color: var(--zy-warning); }
.zy-pill--gray { background: #f0f1f5; color: var(--zy-text-3); }

/* ---------- 公告 ---------- */
.zy-news { list-style: none; padding: 4px 0; margin: 0; }
.zy-news li { border-bottom: 1px dashed var(--zy-border-light); }
.zy-news li:last-child { border-bottom: none; }
.zy-news li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  color: var(--zy-text-2);
  font-size: 13px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.zy-news li a:hover { background: var(--zy-primary-softer); color: var(--zy-primary); text-decoration: none; }
.zy-news__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zy-primary);
  flex-shrink: 0;
}
.zy-news__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zy-news__date { color: var(--zy-text-3); font-size: 12px; flex-shrink: 0; }
.zy-news__empty { padding: 32px 22px; text-align: center; color: var(--zy-text-3); font-size: 13px; }

/* ---------- 联系卡片 ---------- */
.zy-contact__list { display: flex; flex-direction: column; gap: 8px; }
.zy-contact__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--zy-bg-hover);
  color: var(--zy-text-2);
  text-decoration: none;
  transition: all 0.2s ease;
}
.zy-contact__item:hover { background: var(--zy-primary-soft); color: var(--zy-primary); text-decoration: none; transform: translateX(2px); }
.zy-contact__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.zy-contact__title { font-size: 14px; font-weight: 600; color: var(--zy-text-1); }
.zy-contact__sub { font-size: 12px; color: var(--zy-text-3); }

/* ---------- 工具类 ---------- */
.zy-text-primary { color: var(--zy-primary) !important; }
.zy-text-muted   { color: var(--zy-text-3) !important; }
.zy-mt-2 { margin-top: 8px; } .zy-mt-3 { margin-top: 12px; } .zy-mt-4 { margin-top: 16px; }
.zy-mb-2 { margin-bottom: 8px; } .zy-mb-3 { margin-bottom: 12px; } .zy-mb-4 { margin-bottom: 16px; }

/* ============================================================
   第二行：安全中心 + 已开通产品（1:3 布局）
   ============================================================ */
.ky-row2 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ky-row2__left {
  flex: 1 1 280px;
  min-width: 260px;
}
.ky-row2__right {
  flex: 1 1 600px;
  min-width: 0;
}

@media (min-width: 1200px) {
  .ky-row2__left  { flex: 1 1 calc(25% - 15px); max-width: calc(25% - 15px); }
  .ky-row2__right { flex: 1 1 calc(75% - 5px); max-width: calc(75% - 5px); }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .ky-row2__left  { flex: 1 1 calc(35% - 12px); }
  .ky-row2__right { flex: 1 1 calc(65% - 8px); }
}
@media (max-width: 767px) {
  .ky-row2 { flex-direction: column; }
  .ky-row2__left, .ky-row2__right { flex: 1 1 100%; width: 100%; max-width: 100%; }
}

/* ---------- 安全中心仪表盘（半圆仪表） ---------- */
.zy-security-panel { overflow: hidden; }
.zy-security {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 6px;
}
.zy-security__info {
  flex: 1 1 auto;
  min-width: 0;
}
.zy-security__label {
  font-size: 13px;
  color: var(--zy-text-3);
  margin-bottom: 6px;
}
.zy-security__level {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.zy-security__level--high {
  background: rgba(0, 180, 42, 0.12);
  color: #00b42a;
  border: 1px solid rgba(0, 180, 42, 0.3);
}
.zy-security__level--mid {
  background: rgba(22, 119, 255, 0.12);
  color: var(--zy-primary);
  border: 1px solid rgba(22, 119, 255, 0.3);
}
.zy-security__level--low {
  background: rgba(255, 125, 0, 0.12);
  color: #ff7d00;
  border: 1px solid rgba(255, 125, 0, 0.3);
}
.zy-security__score-num {
  font-family: var(--zy-font-num);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--zy-success);
  margin: 4px 0 8px;
}
.zy-security__hint {
  font-size: 12px;
  color: var(--zy-text-3);
  line-height: 1.6;
}
.zy-security__link {
  color: var(--zy-primary);
  font-weight: 500;
}
.zy-security__link i { font-size: 11px; }
.zy-security__gauge {
  flex: 0 0 130px;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zy-security__gauge svg { width: 130px; height: 80px; display: block; }

@media (max-width: 575px) {
  .zy-security { flex-direction: column; align-items: stretch; gap: 12px; }
  .zy-security__gauge { width: 100%; }
  .zy-security__gauge svg { width: 100%; max-width: 260px; margin: 0 auto; }
}

/* ---------- 已开通产品空态 + 1x4 推荐 ---------- */
.zy-product-empty {
  text-align: center;
  padding: 18px 8px 4px;
}
.zy-product-empty__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 0 18px;
  border-bottom: 1px dashed var(--zy-border-light);
  margin-bottom: 18px;
}
.zy-product-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: relative;
}
.zy-product-empty__icon .zy-product-empty__num {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--zy-primary);
  color: #fff;
  font-size: 12px;
  font-family: var(--zy-font-num);
  font-weight: 700;
}
.zy-product-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--zy-text-2);
  margin-bottom: 10px;
}
.zy-product-empty__btn {
  height: 34px;
  line-height: 32px;
  padding: 0 22px;
  font-size: 13px;
  border-radius: 8px;
}
.zy-recommend-title {
  font-size: 13px;
  color: var(--zy-text-3);
  text-align: left;
  margin-bottom: 12px;
}
.zy-recommend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.zy-recommend {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px 14px;
  border-radius: var(--zy-radius);
  background: #f7f9fc;
  border: 1px solid var(--zy-border-light);
  color: var(--zy-text-1);
  text-decoration: none;
  transition: all 0.22s ease;
  overflow: hidden;
}
.zy-recommend:hover {
  transform: translateY(-3px);
  box-shadow: var(--zy-shadow);
  text-decoration: none;
  color: var(--zy-text-1);
}
.zy-recommend__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
}
.zy-recommend--orange .zy-recommend__icon { background: linear-gradient(135deg, #ff7d00, #ffb84d); }
.zy-recommend--blue   .zy-recommend__icon { background: linear-gradient(135deg, #1677ff, #4096ff); }
.zy-recommend--green  .zy-recommend__icon { background: linear-gradient(135deg, #00b42a, #4cd964); }
.zy-recommend--purple .zy-recommend__icon { background: linear-gradient(135deg, #722ed1, #a667ff); }

.zy-recommend__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--zy-text-1);
  text-align: center;
}
.zy-recommend__sub {
  font-size: 12px;
  color: var(--zy-text-3);
  text-align: center;
}
.zy-recommend:hover .zy-recommend__icon { transform: scale(1.06); }
.zy-recommend__icon { transition: transform 0.22s ease; }

@media (max-width: 1199px) and (min-width: 768px) {
  .zy-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px)  { .zy-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 420px)  { .zy-recommend-grid { grid-template-columns: 1fr; } }

.zy-product-empty__hero-info { text-align: left; }

/* ============================================================
   ULTIMATE SECTION ALIGNMENT —— 统一所有首页 section 居中宽度
   ============================================================ */
.zy-welcome,
.zy-metrics,
.ky-row,
.ky-row2,
.zy-welcome__inner,
.ky-left,
.ky-right,
.ky-row2__left,
.ky-row2__right { box-sizing: border-box; }

@media (min-width: 1200px) {
  .zy-welcome,
  .zy-metrics,
  .ky-row,
  .ky-row2 {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
  }
  .zy-welcome { padding-left: 38px; padding-right: 38px; }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .zy-welcome,
  .zy-metrics,
  .ky-row,
  .ky-row2 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .zy-welcome { padding-left: 34px; padding-right: 34px; }
}
@media (max-width: 767px) {
  .zy-welcome,
  .zy-metrics,
  .ky-row,
  .ky-row2 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .zy-welcome { padding-left: 22px; padding-right: 22px; }
}

/* 顶栏头像位置补正（顶栏中头像与其他图标等高对齐） */
.func-info-row .zy-user-avatar { margin-left: 6px; vertical-align: middle; }

/* ============================================================
   顶栏/侧栏宽度配套（logo 放大后的整体尺寸调整）
   ============================================================ */
.vertical-menu,
.vertical-menuuser { width: 300px !important; }
@media (max-width: 991px) {
  .vertical-menu,
  .vertical-menuuser { width: 280px !important; left: -280px; }
  .vertical-menu.show { left: 0; }
}

/* 汉堡按钮：桌面端隐藏，手机端显示 */
#vertical-menu-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0 4px 0 0;
  border: none;
  background: transparent;
  color: var(--zy-text-2);
  font-size: 18px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  /* iOS Safari 点击兼容：消除双击缩放延迟 + 明确可点击 + 去默认高亮 */
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}
#vertical-menu-btn:hover { background: var(--zy-primary-soft); color: var(--zy-primary); }

/* 侧边栏遮罩层 */
.zy-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
}

/* 顶栏下拉菜单在 logo 改宽后保持合适的留白 */
.d-flex { gap: 2px; }

/* logo 容器自适应放大后的高度 */
#page-topbar { height: 84px !important; }
.navbar-header { height: 84px !important; }
.navbar-brand-boxuser { height: 84px !important; padding: 0 28px !important; }
.navbar-brand-boxuser .logo { line-height: 84px !important; }
.navbar-brand-boxuser .logo-lg img { height: 64px !important; width: auto !important; max-height: none; object-fit: contain; }
.navbar-brand-boxuser .logo-sm img { height: 40px !important; width: auto !important; max-height: none; object-fit: contain; }
.vertical-menu,
.vertical-menuuser { top: 84px !important; }
.metismenu { margin-top: 6px; }
.page-content { padding-top: 100px !important; }

/* 顶栏中间 · 每日数据安全标语（随日期自动轮换） */
.zy-topbar-slogan {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--zy-text-2);
  letter-spacing: 0.3px;
  padding: 0 16px;
  min-width: 0;
}
.zy-topbar-slogan i { color: var(--zy-primary); font-style: normal; margin-right: 6px; }

/* ============================================================
   顶部导航"控制台"按钮（替代原"实例管理"图标按钮）
   胶囊形：白底 + 蓝紫渐变边框 + 蓝色文字
   ============================================================ */
.zy-console-wrap { display: inline-flex; align-items: center; margin-right: 6px; }
.zy-console-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) padding-box,
    linear-gradient(90deg, #1677ff 0%, #6e8cff 100%) border-box;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  color: #1677ff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.zy-console-btn i { font-size: 12px; color: #1677ff; }
.zy-console-btn:hover {
  background:
    linear-gradient(rgba(232, 241, 255, 0.6), rgba(238, 242, 255, 0.6)) padding-box,
    linear-gradient(90deg, #1677ff 0%, #6e8cff 100%) border-box;
  color: var(--zy-primary-hover);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.18);
  text-decoration: none;
  transform: translateY(-1px);
}
.zy-console-btn:hover i { color: var(--zy-primary-hover); }

@media (max-width: 991px) {
  #page-topbar, .navbar-header, .navbar-brand-boxuser { height: 64px !important; }
  .navbar-brand-boxuser .logo-lg img { height: 40px !important; }
  .navbar-brand-boxuser .logo-sm img { height: 30px !important; }
  .vertical-menu, .vertical-menuuser { top: 64px !important; }
  .page-content { padding-top: 76px !important; }

  /* 手机端显示汉堡按钮 */
  #vertical-menu-btn { display: inline-flex !important; }

  /* 侧边栏滑入 */
  body.sidebar-enable .vertical-menu,
  body.sidebar-enable .vertical-menuuser { left: 0 !important; }

  /* 遮罩显示 */
  body.sidebar-enable .zy-sidebar-overlay { display: block; }

  /* 顶部安全标语在手机端保持显示 */
  .zy-topbar-slogan { font-size: 12px; }
}

/* 手机端：取消安全标语、保证顶栏按钮正常间隔（语言按钮不再串行） */
@media (max-width: 767px) {
  /* 隐藏顶栏中间的每日安全标语，腾出空间给按钮 */
  .zy-topbar-slogan { display: none !important; }

  /* 控制台按钮：手机端无背景、无圆环、无渐变边框，仅保留图标+文字 */
  .zy-console-btn {
    background: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto;
    padding: 0 6px;
    box-shadow: none !important;
  }
  .zy-console-btn:hover {
    background: none !important;
    box-shadow: none !important;
    transform: none;
  }

  /* 顶栏右侧按钮：保证水平排列 + 合理间距 */
  #page-topbar > .navbar-header > .d-flex:last-child {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-left: auto !important;
  }
  #page-topbar > .navbar-header > .d-flex:last-child > .dropdown,
  #page-topbar > .navbar-header > .d-flex:last-child > .d-inline-block {
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  /* 缩小字体/图标，让按钮在窄屏内并排显示 */
  #page-topbar .d-inline-block,
  #page-topbar .d-inline-block a,
  #page-topbar .sideafter {
    font-size: 13px !important;
    height: 60px;
    line-height: 60px;
  }
  /* 语言按钮：去掉内部 padding 防止被挤换行 */
  .func-info-row-zh > a.sideafter {
    padding: 0 6px !important;
  }
  .func-info-row-zh > a.sideafter i { margin-right: 2px; }
  /* 用户头像：略小 */
  #page-topbar .text-dark-50 .zy-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    margin-left: 4px !important;
  }
  /* 隐藏问候语，仅保留头像/语言 */
  #page-topbar .d-inline-font { display: none !important; }
  #page-topbar .waves-span { display: none !important; }
  /* 消息/服务图标上的数字徽章不超出 */
  #page-topbar .is-blue-dark { top: 12px; }
  /* 顶栏品牌 logo 区域略窄，让位右侧 */
  .navbar-brand-boxuser { width: 160px !important; padding: 0 14px !important; }
}

/* ============================================================
   NEW 仪表盘（图片复刻）—— 顶部信息条 / 数据概览 / 常用功能 /
   双列（公告+消费趋势）/ 资源列表
   ============================================================ */

/* ---------- 顶部信息条 ---------- */
.zy-dash-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  background: linear-gradient(120deg, #0b3fb5 0%, #1677ff 55%, #3b8bff 100%);
  border-radius: var(--zy-radius-xl, 16px);
  padding: 28px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(22, 119, 255, 0.28);
}
.zy-dash-top::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.zy-dash-top::after {
  content: "";
  position: absolute;
  right: 140px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.zy-dash-top__info {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.zy-dash-top__avatar { flex-shrink: 0; }
.zy-dash-top__meta { min-width: 0; }
.zy-dash-top__hello {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
  line-height: 1.3;
}
.zy-dash-top__sub {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}
.zy-dash-top__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zy-dash-top__tags .zy-tag {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
}
.zy-dash-top__tags .zy-tag:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: #fff;
  color: #fff;
}
.zy-dash-top__tags .zy-tag i { color: inherit; }
.zy-dash-top__tags .zy-tag--ok { background: rgba(0, 220, 130, 0.18); border-color: rgba(0, 220, 130, 0.45); }
.zy-dash-top__tags .zy-tag--warn { background: rgba(255, 190, 60, 0.20); border-color: rgba(255, 190, 60, 0.5); }
.zy-dash-top__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.zy-dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.zy-dash-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; text-decoration: none; transform: translateY(-1px); }
.zy-dash-btn--primary { background: #fff; color: var(--zy-primary); border-color: #fff; font-weight: 600; }
.zy-dash-btn--primary:hover { background: #f0f6ff; color: var(--zy-primary-active); }

.zy-dash-top__balance {
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.zy-dash-top__balance-item {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.zy-dash-top__balance-item:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.zy-dash-top__balance-label { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.zy-dash-top__balance-num {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  font-family: var(--zy-font-num, inherit);
  line-height: 1.1;
}
.zy-dash-top__balance-num i { font-style: normal; font-size: 16px; margin-right: 2px; opacity: 0.9; }
.zy-dash-top__balance-action {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
  width: fit-content;
}
.zy-dash-top__balance-action:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1199px) {
  .zy-dash-top { grid-template-columns: 1fr; }
  .zy-dash-top__balance { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .zy-dash-top { padding: 22px 18px; }
  .zy-dash-top__info { flex-direction: column; align-items: flex-start; gap: 14px; }
  .zy-dash-top__hello { font-size: 20px; }
  .zy-dash-top__balance-item { min-width: 0; flex: 1 1 calc(50% - 7px); }
}

/* ---------- 数据概览（截图样式：标题+大数字+右侧圆形图标） ---------- */
.zy-overview-cards {
  display: flex;
  gap: 16px;
}
.zy-ocard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--zy-border);
  background: #fff;
  color: var(--zy-text-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.zy-ocard:hover {
  transform: translateY(-4px);
  box-shadow: var(--zy-shadow-lg);
  border-color: transparent;
  text-decoration: none;
  color: var(--zy-text-1);
}
.zy-ocard__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.zy-ocard__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.zy-ocard__title { font-size: 14px; font-weight: 500; color: var(--zy-text-2); margin: 0; }
.zy-ocard__stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.zy-ocard__stat { font-size: 12px; color: var(--zy-text-3); display: inline-flex; align-items: baseline; gap: 4px; }
.zy-ocard__stat b { font-size: 28px; color: var(--zy-text-1); font-family: var(--zy-font-num, inherit); line-height: 1; font-weight: 700; }
.zy-ocard__stat--muted b { color: var(--zy-text-3); font-size: 20px; font-weight: 600; }

.zy-ocard--blue   .zy-ocard__icon { background: var(--zy-primary-soft); color: var(--zy-primary); }
.zy-ocard--purple .zy-ocard__icon { background: #f3e8ff; color: #722ed1; }
.zy-ocard--cyan   .zy-ocard__icon { background: #e6fffb; color: #13c2c2; }
.zy-ocard--orange .zy-ocard__icon { background: var(--zy-warning-soft); color: var(--zy-warning); }
.zy-ocard--green  .zy-ocard__icon { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-ocard--red    .zy-ocard__icon { background: var(--zy-danger-soft); color: var(--zy-danger); }

/* AI模型 / 云电脑 预留卡片：敬请期待，无点击功能 */
.zy-ocard--ai,
.zy-ocard--coming-placeholder {
  cursor: default;
  background: linear-gradient(135deg, #fff 0%, #f7f9ff 100%);
}
.zy-ocard--ai:hover,
.zy-ocard--coming-placeholder:hover {
  transform: none;
  box-shadow: var(--zy-shadow-sm);
  border-color: var(--zy-border);
}
.zy-ocard--ai .zy-ocard__icon { background: linear-gradient(135deg, #722ed1, #a667ff); color: #fff; }
.zy-ocard--coming-placeholder .zy-ocard__icon { background: linear-gradient(135deg, #13c2c2, #6dd9d6); color: #fff; }
.zy-ocard--coming {
  margin-top: 8px;
  font-size: 12px;
  color: #722ed1;
  background: #f3e8ff;
  border: 1px dashed #c7a3ff;
  border-radius: 999px;
  padding: 2px 10px;
  width: fit-content;
}

@media (max-width: 1199px) { .zy-overview-cards { flex-wrap: wrap; } .zy-ocard { flex: 1 1 calc(33.333% - 11px); } }
@media (max-width: 767px)  { .zy-ocard { flex: 1 1 calc(50% - 8px); } }
@media (max-width: 575px)  { .zy-overview-cards { flex-direction: column; } .zy-ocard { flex: 1 1 auto; } }

/* ---------- 双列（公告 + 消费趋势） ---------- */
.zy-two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}
@media (max-width: 991px) { .zy-two-col { grid-template-columns: 1fr; } }

.zy-chart {
  width: 100%;
  height: 300px;
}

/* ---------- 资源列表 ---------- */
.zy-res-table-wrap { overflow-x: auto; }
.zy-res-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.zy-res-table thead th {
  padding: 12px 22px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--zy-text-3);
  background: var(--zy-bg-hover);
  border-bottom: 1px solid var(--zy-border);
  white-space: nowrap;
}
.zy-res-table tbody td {
  padding: 14px 22px;
  font-size: 13px;
  color: var(--zy-text-2);
  border-bottom: 1px solid var(--zy-border-light);
  vertical-align: middle;
}
.zy-res-table tbody tr { transition: background 0.2s ease; }
.zy-res-table tbody tr:hover { background: var(--zy-primary-softer); }
.zy-res-table tbody tr:last-child td { border-bottom: none; }

.zy-res-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--zy-text-3);
  background: #f0f1f5;
  padding: 3px 10px;
  border-radius: 999px;
}
.zy-res-state i { font-size: 8px; color: #c0c4cc; }
.zy-res-state--on { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-res-state--on i { color: var(--zy-success); }

.zy-res-name { display: flex; align-items: center; gap: 10px; }
.zy-res-name__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--zy-primary-soft);
  color: var(--zy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.zy-res-name__title { font-size: 13px; font-weight: 600; color: var(--zy-text-1); }
.zy-res-name__sub { font-size: 11px; color: var(--zy-text-3); margin-top: 1px; }
.zy-res-ip { font-family: var(--zy-font-num, monospace); color: var(--zy-text-2); }
.zy-res-cost { display: flex; flex-direction: column; line-height: 1.3; }
.zy-res-cost b { font-size: 14px; color: var(--zy-danger); font-weight: 700; font-family: var(--zy-font-num, inherit); }
.zy-res-cost span { font-size: 11px; color: var(--zy-text-3); }
.zy-res-btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid var(--zy-primary);
  color: var(--zy-primary);
  background: #fff;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.zy-res-btn:hover { background: var(--zy-primary); color: #fff; text-decoration: none; }

/* 资源列表空态 */
.zy-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 8px;
}
.zy-empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--zy-primary-softer);
  color: var(--zy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.zy-empty-state__title { font-size: 15px; color: var(--zy-text-1); font-weight: 600; }
.zy-empty-state__btn {
  margin-top: 10px;
  padding: 8px 22px;
  border-radius: 9px;
  background: var(--zy-primary);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.zy-empty-state__btn:hover { background: var(--zy-primary-active); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ============================================================
   顶部标题 + 顶部两卡（用户信息卡 + 账户余额卡）
   ============================================================ */

/* ---------- 页面标题：用户中心 / 概览 ---------- */
.zy-page-title { padding: 2px 2px 0; }
.zy-page-title h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--zy-text-1);
  margin: 0;
  line-height: 1.4;
}
.zy-page-title__sep { color: var(--zy-text-4); font-weight: 400; margin: 0 6px; }

/* ---------- 顶部两卡布局 ---------- */
.zy-top-cards {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 991px) { .zy-top-cards { grid-template-columns: 1fr; } }

/* ---------- 用户信息卡 ---------- */
.zy-user-card {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  padding: 22px 28px;
  box-shadow: var(--zy-shadow-sm);
  min-width: 0;
  transition: box-shadow 0.25s ease;
}
.zy-user-card:hover { box-shadow: var(--zy-shadow); }

/* 左：头像 */
.zy-user-card__avatar { flex-shrink: 0; display: flex; align-items: center; }

/* 中：信息 */
.zy-user-card__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zy-user-card__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zy-user-card__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--zy-text-1);
  margin: 0;
  line-height: 1.3;
}

/* 已实名徽章 */
.zy-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.zy-cert-badge:hover { opacity: 0.8; }
.zy-cert-badge i { font-size: 12px; }
.zy-cert-badge--ok    { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-cert-badge--muted { background: #f0f1f5; color: var(--zy-text-3); }

/* 手机 / 邮箱 绑定图标 */
.zy-bind {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.zy-bind--on  { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-bind--off { background: #f0f1f5; color: var(--zy-text-4); }
.zy-bind:hover { transform: scale(1.08); }

/* 账号ID / 注册时间 行 */
.zy-user-card__row--meta { gap: 6px; font-size: 13px; }
.zy-user-card__label { color: var(--zy-text-3); }
.zy-user-card__value { color: var(--zy-text-2); font-family: var(--zy-font-num, inherit); }
.zy-copy {
  color: var(--zy-text-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: color 0.2s, background 0.2s;
}
.zy-copy:hover { color: var(--zy-primary); background: var(--zy-primary-soft); }

/* 右：安全等级 + 安全设置 */
.zy-user-card__sec {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: start;
  gap: 10px;
}
.zy-user-card__sec-top {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.zy-user-card__sec-shield {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--zy-success-soft);
  color: var(--zy-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.zy-user-card__sec-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.zy-user-card__sec-label { font-size: 14px; color: var(--zy-text-3); }
.zy-user-card__sec-value { font-size: 16px; font-weight: 700; }
.zy-user-card__sec-value--high { color: var(--zy-success); }
.zy-user-card__sec-value--mid  { color: var(--zy-warning); }
.zy-user-card__sec-value--low  { color: var(--zy-danger); }
.zy-user-card__sec-link {
  font-size: 13px;
  color: var(--zy-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.zy-user-card__sec-link:hover { color: var(--zy-primary-hover); }

/* ---------- 账户余额卡（白底截图样式） ---------- */
.zy-balance-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  padding: 26px 28px;
  color: var(--zy-text-1);
  overflow: hidden;
  box-shadow: var(--zy-shadow-sm);
  min-width: 0;
}
.zy-balance-card__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zy-balance-card__label { font-size: 13px; color: var(--zy-text-3); display: flex; align-items: center; gap: 6px; }
.zy-balance-card__label i { color: var(--zy-primary); font-size: 14px; }
.zy-balance-card__num {
  font-size: 34px;
  font-weight: 700;
  font-family: var(--zy-font-num, inherit);
  line-height: 1.1;
  color: var(--zy-text-1);
}
.zy-balance-card__num i { font-style: normal; font-size: 20px; margin-right: 3px; color: var(--zy-text-1); opacity: 0.9; }
.zy-balance-card__actions { display: flex; gap: 10px; margin-top: 4px; }
.zy-balance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--zy-border);
  background: #fff;
  color: var(--zy-text-2);
  text-decoration: none;
  transition: all 0.2s ease;
}
.zy-balance-btn:hover { background: var(--zy-bg-hover); color: var(--zy-primary); border-color: var(--zy-primary); text-decoration: none; transform: translateY(-1px); }
.zy-balance-btn--solid { background: var(--zy-primary); color: #fff; border-color: var(--zy-primary); font-weight: 600; }
.zy-balance-btn--solid:hover { background: var(--zy-primary-hover); color: #fff; border-color: var(--zy-primary-hover); }

/* 右侧装饰圆（右上角） */
.zy-balance-card__deco {
  position: absolute;
  right: -26px;
  top: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,119,255,0.10) 0%, rgba(22,119,255,0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zy-balance-card__deco i {
  font-size: 68px;
  color: rgba(22,119,255,0.18);
  transform: translate(14px, -18px);
}

@media (max-width: 575px) {
  .zy-user-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
    padding: 18px;
  }
  .zy-user-card__avatar { grid-column: 1; grid-row: 1; }
  .zy-user-card__main  { grid-column: 2; grid-row: 1; }
  .zy-user-card__sec   { grid-column: 1 / -1; grid-row: 2; border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px dashed var(--zy-border); flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 0; }
  .zy-user-card__sec-link { margin-left: auto; }
  .zy-balance-card { padding: 22px 20px; }
  .zy-balance-card__num { font-size: 28px; }
}

/* ============================================================
   用户中心首页 · 设计图 1:1 复刻
   ============================================================ */

/* ---------- 首页行布局 ---------- */
.zy-home-top {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 2.3fr 1.7fr;
  gap: 16px;
  align-items: stretch;
}
.zy-home-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}
.zy-home-row--equal { grid-template-columns: 1fr 1fr; }
.zy-home-col { min-width: 0; }
.zy-home-col .zy-panel {
  margin-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.zy-home-col .zy-panel__body { flex: 1; }

@media (max-width: 1199px) {
  .zy-home-row,
  .zy-home-row--equal { grid-template-columns: 1fr; }
}

/* ---------- 顶部用户信息卡（设计图单卡） ---------- */
.zy-userinfo-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  padding: 24px 32px;
  box-shadow: var(--zy-shadow-sm);
  min-width: 0;
  transition: box-shadow 0.25s ease;
}
.zy-userinfo-card:hover { box-shadow: var(--zy-shadow); }

.zy-userinfo-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.zy-userinfo-avatar { flex-shrink: 0; }
.zy-userinfo-body { min-width: 0; }

.zy-userinfo-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.zy-userinfo-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--zy-text-1);
  margin: 0;
  line-height: 1.3;
}

.zy-userinfo-cert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.zy-userinfo-cert:hover { opacity: 0.8; text-decoration: none; }
.zy-userinfo-cert i { font-size: 12px; }
.zy-userinfo-cert--ok    { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-userinfo-cert--muted { background: #f0f1f5; color: var(--zy-text-3); }

.zy-userinfo-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zy-userinfo-meta__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.zy-userinfo-meta__label { color: var(--zy-text-3); }
.zy-userinfo-meta__value { color: var(--zy-text-2); font-family: var(--zy-font-num, inherit); }
.zy-userinfo-copy {
  color: var(--zy-text-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: color 0.2s, background 0.2s;
}
.zy-userinfo-copy:hover { color: var(--zy-primary); background: var(--zy-primary-soft); }

/* 安全等级：图标+等级块与用户名同一高度；"高"在"安全等级"下一行；文字与安全设置左对齐；链接与注册时间同一高度 */
.zy-userinfo-security {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 120px;
}
.zy-userinfo-security__main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0; /* 顶部与用户名顶部严格对齐 */
  text-decoration: none;
  color: inherit;
}
.zy-userinfo-security__main:hover { text-decoration: none; color: inherit; }
.zy-userinfo-security__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--zy-success-soft);
  color: var(--zy-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 0;
}
.zy-userinfo-security__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3; }
.zy-userinfo-security__label { font-size: 13px; color: var(--zy-text-3); }
.zy-userinfo-security__value { font-size: 22px; font-weight: 700; }
.zy-userinfo-security__value--high { color: var(--zy-success); }
.zy-userinfo-security__value--mid  { color: var(--zy-warning); }
.zy-userinfo-security__value--low  { color: var(--zy-danger); }
.zy-userinfo-security__link {
  font-size: 13px;
  color: var(--zy-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 50px; /* = 图标42px + gap8px，与"安全等级"文字左对齐（不含图标） */
  transition: color 0.2s;
}
.zy-userinfo-security__link:hover { color: var(--zy-primary-hover); }

/* 账户余额 */
.zy-userinfo-balance {
  position: relative;
  min-width: 220px;
  padding-left: 32px;
  border-left: 1px solid var(--zy-border-light);
}
.zy-userinfo-balance__label { font-size: 13px; color: var(--zy-text-3); }
.zy-userinfo-balance__num {
  font-size: 34px;
  font-weight: 700;
  font-family: var(--zy-font-num, inherit);
  line-height: 1.1;
  color: var(--zy-text-1);
  margin-top: 6px;
}
.zy-userinfo-balance__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.zy-userinfo-balance__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--zy-border);
  background: #fff;
  color: var(--zy-text-2);
  text-decoration: none;
  transition: all 0.2s ease;
}
.zy-userinfo-balance__btn:hover { background: var(--zy-bg-hover); color: var(--zy-primary); border-color: var(--zy-primary); text-decoration: none; transform: translateY(-1px); }
.zy-userinfo-balance__btn--primary { background: var(--zy-primary); color: #fff; border-color: var(--zy-primary); font-weight: 600; }
.zy-userinfo-balance__btn--primary:hover { background: var(--zy-primary-hover); color: #fff; border-color: var(--zy-primary-hover); }
.zy-userinfo-balance__deco {
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,119,255,0.10) 0%, rgba(22,119,255,0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zy-userinfo-balance__deco i {
  font-size: 56px;
  color: rgba(22,119,255,0.16);
  transform: translate(10px, 14px);
}

@media (max-width: 1199px) {
  .zy-userinfo-card { grid-template-columns: 1fr auto; gap: 24px; }
}
@media (max-width: 767px) {
  .zy-userinfo-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .zy-userinfo-main { flex-direction: column; align-items: flex-start; }
  .zy-userinfo-security { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
  .zy-userinfo-security__link { margin-left: 0; }
  .zy-userinfo-balance { min-width: 0; }
  .zy-userinfo-balance__num { font-size: 28px; }
}

/* ---------- 数据概览（5 卡片） ---------- */
.zy-overview-panel .zy-panel__head--plain { border-bottom: none; padding-bottom: 0; }
.zy-overview-grid {
  display: flex;
  gap: 16px;
}
.zy-overview-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--zy-border);
  background: #fff;
  color: var(--zy-text-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.zy-overview-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--zy-shadow-lg);
  border-color: transparent;
  text-decoration: none;
  color: var(--zy-text-1);
}
/* AI大模型占位卡：无跳转无功能 */
.zy-overview-item--disabled { cursor: default; }
.zy-overview-item--disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--zy-border);
}
.zy-overview-item--disabled .zy-overview-item__num { font-size: 26px; color: var(--zy-text-3); }
/* 标题后"敬请期待"小字 */
.zy-overview-item__soon {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--zy-text-3);
  background: var(--zy-bg-hover);
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: middle;
}
.zy-overview-item__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zy-overview-item__title { font-size: 14px; font-weight: 500; color: var(--zy-text-2); margin: 0; }
.zy-overview-item__num {
  font-size: 32px;
  font-weight: 700;
  color: var(--zy-text-1);
  font-family: var(--zy-font-num, inherit);
  line-height: 1;
}
.zy-overview-item__stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.zy-overview-item__stat {
  font-size: 12px;
  color: var(--zy-text-3);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.zy-overview-item__stat--muted { opacity: 0.8; }
.zy-overview-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.zy-overview-item--blue   .zy-overview-item__icon { background: var(--zy-primary-soft); color: var(--zy-primary); }
.zy-overview-item--purple .zy-overview-item__icon { background: #f3e8ff; color: #722ed1; }
.zy-overview-item--cyan   .zy-overview-item__icon { background: #e6fffb; color: #13c2c2; }
.zy-overview-item--orange .zy-overview-item__icon { background: var(--zy-warning-soft); color: var(--zy-warning); }
.zy-overview-item--green  .zy-overview-item__icon { background: var(--zy-success-soft); color: var(--zy-success); }

@media (max-width: 1199px) { .zy-overview-grid { flex-wrap: wrap; } .zy-overview-item { flex: 1 1 calc(33.333% - 11px); } }
@media (max-width: 767px)  { .zy-overview-item { flex: 1 1 calc(50% - 8px); } }
@media (max-width: 575px)  { .zy-overview-grid { flex-direction: column; } .zy-overview-item { flex: 1 1 auto; } }

/* ---------- 面板标题扩展 ---------- */
.zy-panel__head--plain { border-bottom: none; padding-bottom: 0; }
.zy-panel__title-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--zy-text-1);
  margin: 0;
}
.zy-panel__filter {
  font-size: 13px;
  color: var(--zy-text-3);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.zy-panel__filter i { font-size: 12px; }

/* ---------- 近期消费趋势 时间段切换 ---------- */
.zy-chart-range {
  background: #f4f6fa;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.zy-chart-range__btn {
  border: 0;
  background: transparent;
  color: var(--zy-text-3);
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  font-family: inherit;
}
.zy-chart-range__btn:hover { color: var(--zy-primary); }
.zy-chart-range__btn.is-active {
  background: #fff;
  color: var(--zy-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(22, 119, 255, 0.15);
}

/* ---------- 最新订单表格 ---------- */
.zy-order-table-wrap { overflow-x: auto; }
.zy-order-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.zy-order-table thead th {
  padding: 12px 22px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--zy-text-3);
  background: var(--zy-bg-hover);
  border-bottom: 1px solid var(--zy-border);
  white-space: nowrap;
}
.zy-order-table tbody td {
  padding: 14px 22px;
  font-size: 13px;
  color: var(--zy-text-2);
  border-bottom: 1px solid var(--zy-border-light);
  vertical-align: middle;
}
.zy-order-table tbody tr { transition: background 0.2s ease; }
.zy-order-table tbody tr:hover { background: var(--zy-primary-softer); }
.zy-order-table tbody tr:last-child td { border-bottom: none; }
.zy-order-table__no { font-family: var(--zy-font-num, monospace); color: var(--zy-text-1); }
.zy-order-table__time { color: var(--zy-text-3); font-size: 12px; }
.zy-order-table__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--zy-success-soft);
  color: var(--zy-success);
}
.zy-order-table__link {
  color: var(--zy-primary);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.zy-order-table__link:hover { color: var(--zy-primary-hover); text-decoration: none; }
.zy-order-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 6px;
}
.zy-order-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--zy-primary-softer);
  color: var(--zy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.zy-order-empty__text { font-size: 14px; color: var(--zy-text-1); font-weight: 600; }
.zy-order-empty__tip { font-size: 12px; color: var(--zy-text-3); }

/* 让系统公告面板在窄列中列表撑满 */
.zy-panel--full { height: 100%; }

/* ============================================================
   顶部双卡布局：个人信息卡(3/4) + 余额卡(1/4)
   ============================================================ */
@media (max-width: 1199px) {
  .zy-home-top { grid-template-columns: 1fr; }
}

/* ---------- 手机 / 邮箱 绑定图标容器（图标复用 .zy-bind--on/off） ---------- */
.zy-userinfo-binds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- 余额卡（1/4 纵向布局，覆盖旧横向样式） ---------- */
.zy-balance-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 20px;
}
.zy-balance-card__info { display: flex; flex-direction: column; gap: 6px; }
.zy-balance-card__num { font-size: 28px; }
.zy-balance-card__actions { display: flex; gap: 10px; }
.zy-balance-card__actions .zy-balance-btn { flex: 1; justify-content: center; }

/* 个人信息卡整体瘦身：头像缩小、行距压缩 */
.zy-userinfo-card .zy-user-avatar--xl {
  width: 64px;
  height: 64px;
  font-size: 24px;
  border-width: 3px;
}
.zy-userinfo-name-row { margin-bottom: 6px; }
.zy-userinfo-meta { gap: 4px; }
.zy-userinfo-security { gap: 14px; }
.zy-userinfo-security__main { gap: 8px; line-height: 1.3; margin-top: 0; }
.zy-userinfo-security__icon { width: 42px; height: 42px; font-size: 20px; margin-top: 0; }
.zy-userinfo-security__value { font-size: 22px; }

/* ---------- 余额卡内三项统计：未支付 / 本月消费 / 累计消费（一行三列，无背景） ---------- */
.zy-balance-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--zy-border-light);
}
.zy-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--zy-text-1);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.zy-stat:hover {
  background: transparent;
  color: var(--zy-primary);
  text-decoration: none;
}
.zy-stat__label { font-size: 11px; color: var(--zy-text-3); white-space: nowrap; }
.zy-stat__num {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--zy-font-num, inherit);
  color: var(--zy-text-1);
  white-space: nowrap;
}
a.zy-stat:hover .zy-stat__num { color: var(--zy-primary); }

@media (max-width: 575px) {
  .zy-balance-card { padding: 18px 16px; }
  .zy-balance-card__num { font-size: 24px; }
  .zy-stat__num { font-size: 12px; }
}

/* ============================================================
   安全区域微调（clientarea.tpl 的 zy-userinfo-security 系列）
   放在文件末尾覆盖前面的定义；只改这里即可
   ============================================================ */

/* ---------- PC 端（≥768px） ---------- */
@media (min-width: 768px) {
  /* 【整个板块】安全等级+盾牌+安全设置 整体左右：负值左移 / 正值右移 */
  /* 【整个板块下移】正值下移 / 负值上移 */
  /* 【间距】安全设置 与 安全等级 的垂直间距：改 gap，改小=靠得更近 */
  .zy-userinfo-security {
    margin-left: 0;
    transform: translateY(22px);  /* ← 整个板块下移，改这里：正值下移 / 负值上移（如 translateY(10px)） */
    justify-content: flex-start;  /* 关闭"两端撑开"，让下方 gap 精确控制间距 */
    gap: 30px;
  }

  /* 【安全等级块】盾牌+安全等级+高 整体左右：正值右移 / 负值左移 */
  .zy-userinfo-security__main { margin-left: -50px; }

  /* 【安全设置】单独左右：基准 50px = 图标42 + gap8；改大右移 / 改小左移 */
  .zy-userinfo-security__link { margin-left: 5px; }
}

/* ---------- 手机端（≤767px） ---------- */
@media (max-width: 767px) {
  .zy-userinfo-security {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;   /* 定位上下文，供 __link 绝对定位到最右 */
    width: 100%;
    min-height: 42px;
  }

  /* 安全等级+盾牌 靠左，对齐头像 */
  .zy-userinfo-security__main {
    margin-left: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 安全设置 绝对定位到最右（不依赖 flexbox，任何浏览器都生效） */
  .zy-userinfo-security__link {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }
}

/* MDI 线性盾牌图标：继承容器字号，保持大小可控 */
.zy-userinfo-security__icon .mdi {
  font-size: inherit;
  line-height: 1;
}

/* ============================================================
   信息卡微调 · 第三批
   ① 行间距 ② 头像加大 ③ 头像间距 ⑤ 盾牌加大+字号（仅 PC）
   ④ 盾牌等级颜色 + 图案（PC + 手机）
   ============================================================ */

/* ---------- ④ 盾牌颜色 + 等级（PC + 手机） ---------- */
.zy-userinfo-security__icon { color: #fff; }                  /* 线条白色 */
.zy-sec-icon--high { background: rgba(0, 180, 42, 0.25); }   /* 高：绿色半透明 */
.zy-sec-icon--mid  { background: rgba(255, 125, 0, 0.25); }  /* 中：橙色半透明 */
.zy-sec-icon--low  { background: rgba(245, 63, 63, 0.25); }  /* 低：红色半透明 */

/* ---------- PC 端（≥768px） ---------- */
@media (min-width: 768px) {
  /* ① 三行行间距各 +8px（5+3）：用户名→账号ID(margin-bottom 6→14)、账号ID→注册时间(gap 4→12) */
  .zy-userinfo-name-row { margin-bottom: 14px; }
  .zy-userinfo-meta { gap: 12px; }

  /* ② 头像加大（64→80px）；.zy-userinfo-main 的 align-items:center 已保证上下居中 */
  .zy-userinfo-card .zy-user-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: 30px;
  }

  /* ③ 头像上、左、下 10px 间距（对称上下 margin 不破坏垂直居中） */
  .zy-userinfo-avatar { margin: 10px 0 10px 10px; }

  /* ⑤ 盾牌（42→48px，比上一版60小一圈半）+ 安全等级/安全设置字号 16px */
  .zy-userinfo-security__icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }
  .zy-userinfo-security__label { font-size: 16px; }
  .zy-userinfo-security__link { font-size: 16px; }
}

/* ============================================================
   账户余额卡 · 背景图案
   放大3圈 + 逆时针旋转45° + 右上角 + 上/右间隔卡片边框17px
   ============================================================ */
.zy-balance-card__deco {
  right: 17px;      /* 右间隔卡片边框 17px */
  top: 17px;        /* 上间隔卡片边框 17px */
  width: 240px;     /* 160 → 240（放大3圈） */
  height: 240px;
}
.zy-balance-card__deco i {
  font-size: 100px;          /* 68 → 100（放大） */
  transform: rotate(-45deg); /* 逆时针旋转 45° */
}

/* ---------- PC 端（≥768px）：信用卡图标再大一圈 + 上/右 10px ---------- */
@media (min-width: 768px) {
  .zy-balance-card__deco {
    right: 10px;
    top: 10px;
  }
  .zy-balance-card__deco i {
    font-size: 115px;   /* 100 → 115，再大一圈 */
  }
}

/* ============================================================
   首页布局：资源列表 + 系统公告（占比 = 个人信息卡 : 余额卡 = 2.3 : 1.7）
   常用功能下移整行
   ============================================================ */
.zy-home-row--top { grid-template-columns: 2.3fr 1.7fr; }
.zy-home-col--full { grid-column: 1 / -1; }
/* 近期消费趋势 + 联系我们（二维码）：占比与顶部个人信息卡:余额卡一致 2.3 : 1.7 */
.zy-home-row--qr { grid-template-columns: 2.3fr 1.7fr; row-gap: 24px; }
@media (max-width: 1199px) { .zy-home-row--qr { grid-template-columns: 1fr; } }

/* ---------- 资源列表（表格） ---------- */
.zy-resource-table-wrap { overflow-x: auto; }
.zy-resource-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zy-resource-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--zy-text-2);
  background: #f7f8fa;
  border-bottom: 1px solid var(--zy-border);
  white-space: nowrap;
}
.zy-resource-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--zy-border-light);
  color: var(--zy-text-1);
  white-space: nowrap;
}
.zy-resource-table tbody tr:last-child td { border-bottom: none; }
.zy-resource-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--zy-success-soft);
  color: var(--zy-success);
}
.zy-resource-status--suspended,
.zy-resource-status--suspend { background: var(--zy-warning-soft); color: var(--zy-warning); }
.zy-resource-status--pending { background: var(--zy-primary-soft); color: var(--zy-primary); }
.zy-resource-status--terminated,
.zy-resource-status--cancelled,
.zy-resource-status--fraud { background: var(--zy-danger-soft); color: var(--zy-danger); }
.zy-resource-op { color: var(--zy-primary); text-decoration: none; font-size: 13px; }
.zy-resource-op:hover { color: var(--zy-primary-hover); }
.zy-resource-empty { padding: 40px 20px; text-align: center; color: var(--zy-text-3); font-size: 13px; }

@media (max-width: 1199px) {
  .zy-home-row--top { grid-template-columns: 1fr; }
  .zy-home-col--full { grid-column: auto; }
}

/* 资源列表标题间距修复（避免与表格表头重叠，上下左保持间距） */
.zy-home-row--top .zy-panel__head--plain {
  padding-bottom: 16px;
  padding-left: 22px;
  padding-top: 16px;
}

/* ============================================================
   移动端（≤767px）：资源列表表格 → 卡片式
   ============================================================ */
@media (max-width: 767px) {
  .zy-resource-table-wrap { margin: 0 -14px; }
  .zy-resource-table, .zy-resource-table tbody, .zy-resource-table tr, .zy-resource-table td {
    display: block;
    width: 100%;
  }
  /* 表头隐藏 */
  .zy-resource-table thead { display: none; }
  /* 每行变卡片 */
  .zy-resource-table tbody tr {
    background: #fff;
    border: 1px solid var(--zy-border-light);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 14px 12px 14px;
  }
  .zy-resource-table tbody tr:last-child { margin-bottom: 0; }
  /* 每个单元格独立成行，左标签 + 右值 */
  .zy-resource-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border: none;
    border-bottom: 1px dashed var(--zy-border-light);
    white-space: normal;
  }
  .zy-resource-table tbody tr td:last-child { border-bottom: none; padding-bottom: 0; }
  .zy-resource-table tbody tr td:first-child { padding-top: 0; }
  /* 标签：左侧灰色小字 */
  .zy-resource-table td::before {
    content: attr(data-label);
    color: var(--zy-text-3);
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 12px;
  }
}

/* ============================================================
   资源列表：PC / 移动端 显隐控制
   - PC 默认显示表格（zy-resource-table-wrap--pc）
   - 移动端（≤767px）显示图片卡片（zy-resource-card-list--mobile）
   表格本身在移动端不再重新排版，完全由卡片列表承载
   ============================================================ */
.zy-resource-table-wrap--pc { display: block; }
.zy-resource-card-list--mobile { display: none; }

/* ============================================================
   移动端：资源列表"图片化"卡片
   ============================================================ */
.zy-resource-card-list--mobile {
  padding: 12px 12px 16px;
  gap: 12px;
}
.zy-resource-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--zy-border-light);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.zy-resource-card:active { transform: scale(0.985); }
.zy-resource-card:hover {
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.12);
}
.zy-resource-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(120deg, #4a8ef5, #7db3ff, #9fc7ff, #7db3ff, #4a8ef5);
  background-size: 300% 100%;
  animation: zyResCardBg 6s ease-in-out infinite;
  overflow: hidden;
}
@keyframes zyResCardBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.zy-resource-card__cover::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.zy-resource-card__cover-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1;
}
.zy-resource-card__cover-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 1;
}
.zy-resource-card__cover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.zy-resource-card__status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--zy-success);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.zy-resource-card__status--suspended,
.zy-resource-card__status--suspend { color: var(--zy-warning); }
.zy-resource-card__status--pending { color: var(--zy-primary); }
.zy-resource-card__status--terminated,
.zy-resource-card__status--cancelled,
.zy-resource-card__status--fraud { color: var(--zy-danger); }
.zy-resource-card__body {
  padding: 12px 14px 12px;
}
.zy-resource-card__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.zy-resource-card__os {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  min-width: 0;
}
.zy-resource-card__os i { font-size: 13px; flex-shrink: 0; }
.zy-resource-card__os-img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.zy-resource-card__os span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zy-resource-card__meta {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 8px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 8px 10px;
}
.zy-resource-card__meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.zy-resource-card__meta-label {
  font-size: 11px;
  color: var(--zy-text-3);
}
.zy-resource-card__meta-value {
  font-size: 12px;
  color: var(--zy-text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zy-resource-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--zy-primary);
  border-top: 1px dashed var(--zy-border-light);
  padding-top: 8px;
}
.zy-resource-card__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--zy-text-3);
  font-size: 13px;
}

@media (max-width: 767px) {
  /* PC 表格在移动端隐藏，由卡片列表承载 */
  .zy-resource-table-wrap--pc { display: none; }
  .zy-resource-card-list--mobile { display: grid; }
  /* 资源列表 panel 在移动端去掉额外边距，让卡片贴边更紧凑 */
  .zy-home-row--top .zy-panel__head--plain {
    padding-left: 16px;
    padding-right: 16px;
  }
  .zy-resource-card-list--mobile { padding: 10px 10px 16px; }
}

/* ============================================================
   联系我们（二维码）卡片
   ============================================================ */
.zy-qrcode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
  align-items: center;
}
.zy-qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 100%;
}
.zy-qrcode-img {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--zy-border-light);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  overflow: hidden;
}
.zy-qrcode-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.zy-qrcode-name {
  font-size: 13px;
  color: var(--zy-text-1);
  font-weight: 500;
  white-space: nowrap;
}

/* 移动端：三个二维码一行横排 */
@media (max-width: 767px) {
  .zy-qrcode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zy-qrcode-item { gap: 6px; }
  .zy-qrcode-img { padding: 4px; max-width: none; }
  .zy-qrcode-name { font-size: 12px; }
}

/* ============================================================
   合作计划（首页最下方窄长卡片，位于"近期消费趋势+联系我们"容器内第三列）
   ============================================================ */
.zy-home-col--partner { grid-column: 1 / -1; } /* PC 端跨两列，排在下方 */
.zy-partner-panel {
  background: #fff;
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-lg);
  box-shadow: var(--zy-shadow-sm);
}
.zy-partner-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--zy-border-light);
}
.zy-partner-panel__head h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--zy-text-1);
  margin: 0;
}
.zy-partner-panel__body { padding: 18px 22px; }
.zy-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.zy-partner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--zy-border-light);
  border-radius: 10px;
  background: #fafbfc;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.zy-partner-item:hover {
  border-color: var(--zy-primary);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.10);
  transform: translateY(-2px);
}
.zy-partner-item__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.zy-partner-item__icon--blue   { background: var(--zy-primary-soft); color: var(--zy-primary); }
.zy-partner-item__icon--green  { background: var(--zy-success-soft); color: var(--zy-success); }
.zy-partner-item__icon--gold   { background: #fff7e8; color: #d48806; }
.zy-partner-item__icon--orange { background: var(--zy-warning-soft); color: var(--zy-warning); }
.zy-partner-item__name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--zy-text-1);
  white-space: nowrap;
}
.zy-partner-item__arrow {
  flex-shrink: 0;
  color: var(--zy-text-3);
  font-size: 13px;
}
.zy-partner-item--disabled { cursor: default; opacity: 0.7; }
.zy-partner-item--disabled:hover {
  border-color: var(--zy-border-light);
  box-shadow: none;
  transform: none;
}
.zy-partner-item__soon {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--zy-text-3);
  background: #f2f3f5;
  padding: 2px 8px;
  border-radius: 999px;
}

/* 版权（右下角） */
.zy-copyright {
  margin-top: 16px;
  text-align: right;
  font-size: 12px;
  color: var(--zy-text-3);
}

/* 手机端（≤1199px zy-home-row--qr 变单列）：合作计划排"联系我们"前面 */
@media (max-width: 1199px) {
  .zy-home-row--qr .zy-home-col--half { order: 0; }    /* 近期消费趋势 */
  .zy-home-row--qr .zy-home-col--partner { order: 1; } /* 合作计划 */
  .zy-home-row--qr .zy-home-col--qr { order: 2; }      /* 联系我们 */
}
/* 手机端（≤767px）：合作计划小卡片竖排 */
@media (max-width: 767px) {
  .zy-partner-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   账单列表（billing）移动端自适应：PC 表格保持原样，手机端卡片化
   ============================================================ */
.zy-billing-card-list--mobile { display: none; }

@media (max-width: 767px) {
  /* 隐藏 PC 表格，显示卡片列表 */
  .zy-billing-table-wrap--pc { display: none !important; }
  .zy-billing-card-list--mobile { display: block; }

  /* 状态筛选下拉占满宽度 */
  .table-header .table-search,
  .table-header .table-search select { width: 100% !important; }
  .table-header { flex-wrap: wrap; }

  /* 底部工具栏：合并支付 + 分页竖排 */
  .table-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .table-tools { width: 100%; justify-content: space-between; }
  .table-pagination { width: 100%; flex-wrap: wrap; justify-content: center; }

  /* ---------- 账单卡片 ---------- */
  .zy-billing-card-list--mobile .zy-billing-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  }
  .zy-billing-card-list--mobile .zy-billing-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .zy-billing-card-list--mobile .zy-billing-card__no {
    font-size: 15px;
    font-weight: 600;
    color: #1f2329;
    text-decoration: none;
  }
  .zy-billing-card-list--mobile .zy-billing-card__status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.4;
  }
  .zy-billing-card-list--mobile .zy-billing-card__amount-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 10px;
  }
  .zy-billing-card-list--mobile .zy-billing-card__amount {
    font-size: 22px;
    font-weight: 700;
    color: #1677ff;
  }
  .zy-billing-card-list--mobile .zy-billing-card__type {
    font-size: 13px;
    color: #86909c;
  }
  .zy-billing-card-list--mobile .zy-billing-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .zy-billing-card-list--mobile .zy-billing-card__meta li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    line-height: 1.9;
    color: #4e5969;
  }
  .zy-billing-card-list--mobile .zy-billing-card__meta-label {
    color: #86909c;
  }
  .zy-billing-card-list--mobile .zy-billing-card__meta-value {
    color: #1f2329;
    text-align: right;
  }
  .zy-billing-card-list--mobile .zy-billing-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }
  .zy-billing-card-list--mobile .zy-billing-card__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .zy-billing-card-list--mobile .zy-billing-card__btn--ghost {
    border-color: #e5e6eb;
    color: #4e5969;
    background: #fff;
  }
  .zy-billing-card-list--mobile .zy-billing-card__btn--primary {
    background: #1677ff;
    color: #fff;
  }
  .zy-billing-card-list--mobile .zy-billing-card__btn--danger {
    border-color: #ffccc7;
    color: #cf1322;
    background: #fff2f0;
  }
}

/* ============================================================
   账单详情页（viewbilling）移动端自适应：PC 保持原样，手机端优化
   ============================================================ */
@media (max-width: 767px) {
  /* 整体内边距收紧 */
  .zy-viewbilling { padding: 12px !important; }

  /* 头部 logo 缩小 */
  .zy-viewbilling .head-img { height: 3rem; }

  /* 状态徽章/支付按钮：宽度自适应、居中 */
  .zy-viewbilling .btnWidth { width: auto; min-width: 6rem; }

  /* 状态文字（未支付/已支付）与支付按钮并排一行 */
  .zy-viewbilling header .col-sm-5 > p {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
  }
  .zy-viewbilling header .col-sm-5 > p + p { margin-left: 8px; }
  .zy-viewbilling header .col-sm-5 h3,
  .zy-viewbilling header .col-sm-5 h5 {
    margin: 0;
  }

  /* 收款方/付款方信息堆叠，地址字号收紧 */
  .zy-viewbilling address {
    margin-bottom: 0.5rem;
    font-size: 13px;
    line-height: 1.7;
  }
  .zy-viewbilling header .row > div { margin-bottom: 0.5rem; }

  /* 信息区块之间加分隔，避免堆叠后粘连 */
  .zy-viewbilling main .row > div[class*="col-"] { margin-bottom: 0.75rem; }

  /* 表格字号收紧 */
  .zy-viewbilling .table { font-size: 13px; }
  .zy-viewbilling .table td,
  .zy-viewbilling .table th { white-space: nowrap; padding: 0.5rem 0.75rem; }

  /* 底部打印/下载按钮：两等分全宽 */
  .zy-viewbilling footer .btn-group { display: flex; width: 100%; }
  .zy-viewbilling footer .btn-group .btn { flex: 1 1 0; }

  /* 交易记录表格容器：允许横向滚动 */
  .zy-viewbilling .table-responsive { -webkit-overflow-scrolling: touch; }
}