/* ============================================================
 * AICloud 全局样式（现代简洁风）
 * 说明：美化统一在此维护；手机端适配见文末 @media
 * ============================================================ */

/* ================= 主题变量 ================= */
:root {
  --border-radius-small: 6px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius-xl: 16px;
  --aicloud-primary: #165dff;
  --aicloud-primary-light: #4c8dff;
  --aicloud-content-bg: #f5f7fa;
  --aicloud-shadow-card: 0 1px 2px rgba(20, 60, 140, 0.04), 0 4px 16px rgba(20, 60, 140, 0.06);
  --aicloud-shadow-hover: 0 6px 24px rgba(20, 60, 140, 0.10);
  --aicloud-shadow-pop: 0 12px 40px rgba(20, 60, 140, 0.16);
}

/* ================= 全局基础 ================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100%; }
a { text-decoration: none; }
.app-loading, .app-noscript {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #4e5969;
  background: #f5f7fa;
}
.app-loading-mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #165dff, #4ca7ff);
  box-shadow: 0 8px 22px rgba(22, 93, 255, 0.28);
}
.route-loading {
  position: fixed;
  z-index: 3000;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(22, 93, 255, 0.16);
  border-radius: 18px;
  color: #165dff;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--aicloud-shadow-pop);
  transform: translateX(-50%);
}
.route-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #165dff;
  animation: route-loading-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes route-loading-pulse {
  from { opacity: 0.35; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c6cdda; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a8b1c2; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= Arco 组件全局统一（现代简洁） ================= */

/* 卡片：统一圆角 + 细边框 + 柔和阴影 */
.arco-card {
  border-radius: var(--border-radius-large) !important;
  border: 1px solid var(--color-border-2) !important;
  box-shadow: var(--aicloud-shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.arco-card:hover { box-shadow: var(--aicloud-shadow-hover); }
.arco-card-bordered { border: 1px solid var(--color-border-2) !important; }

/* 表格：圆角容器 + 浅灰表头 */
.arco-table { border-radius: var(--border-radius-large); overflow: hidden; }
.arco-table-th {
  background: #f7f9fc !important;
  font-weight: 600;
}
.arco-table-th, .arco-table-td { white-space: nowrap; }
.arco-table-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arco-table-element { table-layout: auto; }

/* 弹窗 / 抽屉 / 气泡：统一圆角 */
.arco-modal { border-radius: var(--border-radius-xl) !important; overflow: hidden; }
.arco-modal-header { padding: 18px 20px 0; }
.arco-drawer { border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl); }

/* 输入控件 / 按钮：统一圆角 */
.arco-input-affix-wrapper, .arco-input, .arco-select, .arco-input-number, .arco-textarea, .arco-picker {
  border-radius: var(--border-radius-medium) !important;
}
.arco-btn { border-radius: var(--border-radius-medium); }
.arco-tag { border-radius: var(--border-radius-small); }
.arco-alert { border-radius: var(--border-radius-medium); }
.arco-pagination-item { border-radius: var(--border-radius-small); }
.arco-tabs-header-title { border-radius: var(--border-radius-medium); }

/* 主按钮渐变 */
.arco-btn-primary {
  background-image: linear-gradient(135deg, #165dff 0%, #4c8dff 100%);
  border-color: transparent;
}
.arco-btn-primary:not(.arco-btn-disabled):hover {
  background-image: linear-gradient(135deg, #0e4fe8 0%, #3f7dff 100%);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 93, 255, 0.28);
}
.arco-btn-primary:not(.arco-btn-disabled):active { transform: translateY(0); }

/* ================= 登录 / 注册页 ================= */
/* 整体外壳：头部导航 + 中部渐变表单区（flex 撑满）+ 页脚 */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.auth-page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 120px 20px 48px; /* 顶部留白补偿 fixed 悬浮导航 */
  background:
    radial-gradient(1100px 560px at 18% -8%, rgba(22, 93, 255, 0.10), transparent 60%),
    radial-gradient(900px 520px at 112% 112%, rgba(76, 167, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #f6f9ff 0%, #edf3ff 50%, #f8faff 100%);
}
.auth-bg { position: absolute; inset: 0; overflow: hidden; }
.auth-page .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.auth-page .blob-1 { width: 420px; height: 420px; top: -130px; left: -110px; background: #7aa5ff; }
.auth-page .blob-2 { width: 380px; height: 380px; bottom: -130px; right: -90px; background: #6fd3e8; }
.auth-page .blob-3 { width: 280px; height: 280px; top: 38%; right: 16%; background: #b7a7ff; }
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 30%, transparent 76%);
}

/* 登录/注册双栏容器：左营销栏 + 右表单卡，margin auto 居中且超高可滚动 */
.auth-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1020px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 72px;
}
.auth-inner::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  top: -140px;
  left: -110px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, transparent 65%);
}
.auth-aside, .auth-card-wrap { position: relative; z-index: 1; }

/* 左侧营销栏 */
.auth-aside { flex: 1 1 440px; min-width: 0; }
.auth-aside-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
}
.auth-aside-title {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}
.auth-aside-desc {
  margin: 16px 0 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.8;
  color: #64748b;
}
.auth-aside-features { list-style: none; margin: 28px 0 0; padding: 0; }
.auth-aside-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: #334155;
}
.auth-aside-feature-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #2563eb;
  background: #e8f0fe;
}
.auth-aside-stats { display: flex; gap: 36px; margin-top: 32px; }
.auth-aside-stats b { display: block; font-size: 24px; color: #2563eb; }
.auth-aside-stats span { font-size: 12px; color: #64748b; }

.auth-card-wrap { flex: 0 0 400px; }
.auth-card {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 42px 38px 32px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 60, 140, 0.16);
  animation: auth-card-in 0.4s ease both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-logo {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #165dff 0%, #4ca7ff 100%);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 24px rgba(22, 93, 255, 0.40);
}
.auth-title { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text-1); }
.auth-desc { margin-top: 6px; font-size: 13px; color: var(--color-text-3); }

.auth-form .arco-form-item { margin-bottom: 18px; }
.auth-form .arco-input-affix-wrapper { height: 46px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); }
.auth-form .arco-input-affix-wrapper .arco-input { font-size: 14px; }
.auth-form .arco-tabs-header { justify-content: center; }
/* 验证码输入行：输入框与「获取验证码」按钮留出间距；按钮与输入框同高同圆角，固定最小宽度防倒计时文字换行时宽度跳动 */
.auth-form .auth-code-row { display: flex; gap: 10px; width: 100%; }
.auth-form .auth-code-row .arco-input-affix-wrapper,
.auth-form .auth-code-row .arco-input-wrapper { flex: 1 1 auto; min-width: 0; }
.auth-form .auth-code-row .arco-btn { flex: 0 0 auto; height: 46px; min-width: 108px; border-radius: 10px; font-size: 14px; padding: 0 14px; }
.auth-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.auth-submit {
  height: 46px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  background-image: linear-gradient(135deg, #165dff 0%, #4c8dff 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(22, 93, 255, 0.30);
}
.auth-submit:hover { background-image: linear-gradient(135deg, #0e4fe8 0%, #3f7dff 100%); transform: translateY(-1px); }
.auth-switch { margin-top: 20px; text-align: center; font-size: 13px; color: var(--color-text-3); }
.auth-switch a { color: rgb(var(--primary-6)); font-weight: 500; }
.auth-back { margin-left: 8px; color: var(--color-text-4); }

/* ================= 主布局 ================= */
.layout-wrapper { height: 100vh; }
.layout-sider {
  background: #fff !important;
  border-right: 1px solid var(--color-border-2);
}
.layout-logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-border-2);
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
/* 品牌 logo 图片（透明底横版，高度定档宽度自适应，防超宽溢出） */
.layout-logo-img {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.arco-layout-sider-collapsed .layout-logo { justify-content: center; }
.arco-layout-sider-collapsed .layout-logo-img { max-width: 100%; height: auto; }

/* 侧边菜单：内缩 + 胶囊高亮 + 左侧指示条 */
.layout-menu { padding: 10px 8px; }
.layout-menu .arco-menu-item {
  border-radius: 8px;
  margin: 3px 0;
  font-weight: 500;
}
.layout-menu .arco-menu-item:hover { background: var(--color-fill-2); }
.layout-menu .arco-menu-item.arco-menu-selected {
  background: linear-gradient(90deg, rgba(22, 93, 255, 0.13), rgba(22, 93, 255, 0.03));
  color: rgb(var(--primary-6));
  font-weight: 600;
  box-shadow: inset 3px 0 0 rgb(var(--primary-6));
}
.layout-menu .arco-menu-inline-header { border-radius: 8px; margin: 3px 0; }
.layout-menu .arco-menu-inline-header.arco-menu-selected {
  color: rgb(var(--primary-6));
  font-weight: 600;
}

.layout-header {
  height: 56px;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-2);
  box-shadow: 0 1px 4px rgba(20, 60, 140, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 5;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.header-right { display: flex; align-items: center; gap: 6px; }

/* 顶栏全局搜索：输入框 + 即时结果下拉 */
.header-search { position: relative; }
.header-search .arco-input { width: 240px; }
.header-search-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-height: 380px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
  box-shadow: var(--aicloud-shadow-pop);
  padding: 6px;
  z-index: 2000;
}
.header-search-group-title {
  padding: 6px 10px 4px;
  font-size: 12px;
  color: var(--color-text-3);
}
.header-search-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.header-search-item:hover { background: var(--color-fill-2); }
.header-search-item-label { font-size: 14px; }
.header-search-sub { font-size: 12px; color: var(--color-text-3); }
.header-search-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-3);
}

/* 用户详情页：字段网格（桌面 4 列，窄屏 2 列，任何宽度都保持横向排列） */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
  overflow: hidden;
}
.detail-item {
  padding: 12px 16px;
  border-right: 1px solid var(--color-border-2);
  border-bottom: 1px solid var(--color-border-2);
  min-width: 0;
}
.detail-item:nth-child(4n) { border-right: none; }
.detail-label { font-size: 12px; color: var(--color-text-3); margin-bottom: 4px; }
.detail-value { font-size: 14px; word-break: break-all; }

/* 云主机详情页：实例概览卡（云厂商风格） */
.inst-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 55%);
}
.inst-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #165dff, #3c7bff);
}
.inst-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(22, 93, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.inst-hero-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inst-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.inst-hero-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inst-hero-name { font-size: 22px; font-weight: 600; color: var(--color-text-1); }
.inst-hero-name-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 暂停原因（状态标签右侧小字） */
.inst-suspend-reason-inline { font-size: 12px; color: #ff7d00; margin-left: 4px; }
.inst-hero-meta {
  font-size: 13px;
  color: var(--color-text-3);
  display: flex;
  gap: 24px;
  row-gap: 6px;
  flex-wrap: wrap;
}
.inst-hero-meta > span { white-space: nowrap; }
.inst-hero-actions { display: flex; align-items: center; flex-shrink: 0; }
@media (max-width: 768px) {
  .inst-hero-meta { gap: 8px 16px; }
}

.main-content {
  padding: 20px;
  background: var(--aicloud-content-bg);
  overflow: auto;
}

/* 全局底部标签 */
.app-footer {
  padding: 14px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-3);
  background: var(--aicloud-header-bg, #fff);
  border-top: 1px solid var(--color-border-2);
  line-height: 1.8;
}
.app-footer .app-footer-icp { margin-top: 2px; }
.page-title {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}
.page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, #165dff, #4c8dff);
}
.page-desc { font-size: 13px; color: var(--color-text-3); margin: 0 0 18px; }

/* 页面切换动画 */
.fade-slide-enter-active, .fade-slide-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
.fade-slide-enter-from { opacity: 0; transform: translateY(8px); }
.fade-slide-leave-to { opacity: 0; transform: translateY(-4px); }

.product-group-card .arco-card-body { padding: 8px 12px 12px; }
.product-group-item {
  min-height: 58px;
  padding: 10px 8px !important;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.product-group-item:hover { background: var(--color-fill-2); }
.product-group-item-active { background: rgb(var(--primary-1)); }
.product-group-item-active:hover { background: rgb(var(--primary-2)); }
.product-group-item-active .arco-list-item-meta-title {
  color: rgb(var(--primary-6));
  font-weight: 600;
}

/* 商品管理：一级分组 → 二级分组 → 商品列表层级展示 */
.product-manage-card .arco-card-body { padding-top: 4px; }
.product-primary-section {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  margin-bottom: 14px;
  overflow: hidden;
}
.product-primary-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-fill-1);
  border-bottom: 1px solid var(--color-border-2);
}
.product-primary-title { font-size: 15px; font-weight: 600; color: var(--color-text-1); }
.product-meta { font-size: 12px; color: var(--color-text-3); }
.product-section-actions { margin-left: auto; }
.product-secondary-section {
  margin: 0 14px 0 18px;
  padding: 0 0 4px 14px;
  border-left: 2px solid var(--color-fill-3);
  border-bottom: 1px dashed var(--color-border-2);
}
.product-secondary-section:last-child { border-bottom: none; }
/* 商品表格再右缩进一级，形成 一级分组 → 二级分组 → 商品 的渐进层级 */
.product-secondary-body { margin-left: 18px; }
@media (max-width: 768px) {
  .product-secondary-section { margin-left: 8px; padding-left: 8px; }
  .product-secondary-body { margin-left: 8px; }
}
.product-secondary-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 8px;
}
.product-secondary-title { font-size: 14px; font-weight: 500; color: var(--color-text-1); }
/* 分组折叠：头部整体可点击，按钮用 @click.stop 不触发折叠 */
.product-toggle-header { cursor: pointer; user-select: none; }
.product-toggle-header:hover .product-primary-title,
.product-toggle-header:hover .product-secondary-title { color: rgb(var(--primary-6)); }
.product-toggle-arrow {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
  color: var(--color-text-3);
  font-size: 12px;
  text-align: center;
}

/* ================= 统计卡片 ================= */
.stat-card {
  border-radius: var(--border-radius-large) !important;
  padding: 4px 6px;
  height: 100%; /* 同行统计卡等高对齐（手机端两列布局不再高低不齐） */
}
.stat-card .arco-card-body { height: 100%; display: flex; align-items: center; min-width: 0; }
.stat-card .arco-space { min-width: 0; }
.stat-card .arco-space > .arco-space-item:last-child { min-width: 0; }
.stat-card .stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.stat-card .stat-label { font-size: 13px; color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .stat-extra { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.stat-card .stat-extra .up { color: var(--color-danger); }
.stat-card .stat-extra .down { color: var(--color-success); }

/* 看板待办事项 */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.todo-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border-radius: 6px; background: var(--color-fill-2);
  cursor: pointer; transition: background 0.15s; border: 1px solid transparent;
}
.todo-item:hover { background: var(--color-fill-3); border-color: var(--color-primary-light-4, #94bfff); }
.todo-item .todo-count { font-size: 22px; font-weight: 700; color: var(--color-text-1); line-height: 1.2; }
.todo-item .todo-count.alert { color: #f53f3f; }
.todo-item .todo-label { font-size: 13px; color: var(--color-text-2); }

/* 快捷入口 */
.dash-quick-grid { display: flex; flex-direction: column; gap: 8px; }
.dash-quick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.dash-quick-item:hover {
  border-color: rgb(var(--primary-6));
  background: rgb(var(--primary-1));
  box-shadow: 0 4px 14px rgba(22, 93, 255, 0.10);
  transform: translateY(-1px);
}
.dash-quick-item:hover .dash-quick-arrow { color: rgb(var(--primary-6)); transform: translateX(3px); }
.dash-quick-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 19px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dash-quick-body { flex: 1; min-width: 0; }
.dash-quick-title { font-size: 13px; font-weight: 600; color: var(--color-text-1); }
.dash-quick-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-quick-arrow {
  color: var(--color-text-4);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ================= 用户端首页概览 ================= */
/* 顶部概览横幅：渐变底 + 装饰圆 + 问候/余额/待办统计 */
.dash-hero {
  position: relative; overflow: hidden;
  border-radius: var(--border-radius-large);
  padding: 22px 24px 0;
  margin-bottom: 16px; /* 与下方卡片间隔 */
  background: linear-gradient(118deg, #165dff 0%, #2e7bff 52%, #5b9bff 100%);
  color: #fff;
}
.dash-hero::before {
  content: ''; position: absolute; right: -70px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.dash-hero::after {
  content: ''; position: absolute; right: 160px; bottom: -130px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.dash-hero-top {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.dash-hero-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-hero-avatar {
  background: rgba(255, 255, 255, 0.22); color: #fff;
  font-size: 20px; font-weight: 600; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.dash-hero-greet {
  font-size: 20px; font-weight: 600; line-height: 1.3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dash-hero-level {
  font-size: 12px; font-weight: 500; padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dash-hero-meta { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
.dash-hero-balance { text-align: right; }
.dash-hero-balance-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.dash-hero-balance-value {
  margin: 4px 0 10px; font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-hero-btns { display: flex; gap: 10px; justify-content: flex-end; }
.dash-hero-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 16px; border-radius: 6px;
  font-size: 13.5px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent; color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.dash-hero-btn:hover { background: rgba(255, 255, 255, 0.14); }
.dash-hero-btn.is-solid { background: #fff; border-color: #fff; color: rgb(var(--primary-6)); font-weight: 600; }
.dash-hero-btn.is-solid:hover { background: rgba(255, 255, 255, 0.88); }
.dash-hero-stats {
  position: relative; z-index: 1;
  margin-top: 18px; padding-top: 2px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.dash-hero-stat {
  padding: 12px 14px 16px; border-radius: 8px 8px 0 0;
  cursor: pointer; transition: background 0.18s;
}
.dash-hero-stat:hover { background: rgba(255, 255, 255, 0.12); }
.dash-hero-stat-value {
  font-size: 24px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dash-hero-stat-unit { font-size: 12px; font-weight: 400; margin-left: 2px; color: rgba(255, 255, 255, 0.8); }
.dash-hero-stat-label {
  margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, 0.78);
  display: flex; align-items: center; gap: 4px;
}
.dash-hero-stat-arrow { font-size: 11px; opacity: 0; transition: opacity 0.18s; }
.dash-hero-stat:hover .dash-hero-stat-arrow { opacity: 0.9; }
.dash-hero-stat-sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.65); }

/* 左栏用户信息卡 */
.dash-user-card .arco-card-body { padding: 16px; }
.dash-user-head { display: flex; gap: 12px; align-items: center; }
.dash-user-info { flex: 1; min-width: 0; }
.dash-user-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-user-meta { margin-top: 4px; font-size: 12px; color: var(--color-text-3); }
.dash-user-bindings { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dash-binding {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; background: var(--color-fill-2);
  font-size: 12px; color: var(--color-text-3);
}
.dash-binding.is-link { cursor: pointer; }
.dash-binding.is-link:hover { background: var(--color-fill-3); }
.dash-user-real { display: flex; align-items: center; gap: 8px; }
.dash-user-real-label { font-size: 13px; color: var(--color-text-2); margin-right: 2px; }

/* 我的资源磁贴 + 消费概览行 */
.dash-res-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-res-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--color-border-2); border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.dash-res-tile:hover {
  border-color: rgb(var(--primary-6));
  box-shadow: 0 4px 14px rgba(22, 93, 255, 0.10);
  transform: translateY(-1px);
}
.dash-res-tile-icon {
  width: 38px; height: 38px; border-radius: 9px; font-size: 18px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.dash-res-tile-info { flex: 1; min-width: 0; }
.dash-res-tile-value { font-size: 19px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-res-tile-unit { font-size: 12px; font-weight: 400; color: var(--color-text-3); margin-left: 1px; }
.dash-res-tile-label { margin-top: 1px; font-size: 12px; color: var(--color-text-3); }
.dash-res-tile-arrow {
  color: var(--color-text-4); font-size: 12px; flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.dash-res-tile:hover .dash-res-tile-arrow { color: rgb(var(--primary-6)); transform: translateX(2px); }
.dash-card-subtitle { margin: 14px 0 2px; font-size: 12.5px; font-weight: 500; color: var(--color-text-3); }
.dash-fin-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 2px; border-bottom: 1px dashed var(--color-border-2);
  cursor: pointer;
}
.dash-fin-row:last-child { border-bottom: none; }
.dash-fin-label { font-size: 13px; color: var(--color-text-2); }
.dash-fin-value {
  font-size: 14px; font-weight: 600; color: var(--color-text-1);
  display: flex; align-items: center; gap: 2px;
  font-variant-numeric: tabular-nums; transition: color 0.18s;
}
.dash-fin-row:hover .dash-fin-value { color: rgb(var(--primary-6)); }
.dash-fin-value svg { font-size: 11px; color: var(--color-text-4); }
.dash-fin-value.is-alert { color: #ff7d00; }
.dash-res-sub { font-size: 12px; color: var(--color-text-3); font-weight: 400; }
.dash-res-count { font-size: 12px; color: var(--color-text-3); }
.dash-expiring { color: #ff7d00; }
.dash-empty { padding: 28px 0; text-align: center; }
.dash-empty-text { margin-top: 10px; font-size: 15px; color: var(--color-text-2); }
.dash-empty-desc { margin: 4px 0 14px; font-size: 13px; color: var(--color-text-3); }

/* Hero 移动端适配：统计 2 列、余额左对齐 */
@media (max-width: 768px) {
  .dash-hero { padding: 18px 16px 0; }
  .dash-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-hero-balance { text-align: left; }
  .dash-hero-btns { justify-content: flex-start; }
  .dash-res-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ================= 公告中心 / 帮助中心 ================= */
.content-empty { text-align: center; padding: 28px 0; }
.content-empty p { margin: 8px 0 0; font-size: 14px; color: var(--color-text-3); }
.content-item {
  padding: 14px 16px;
  margin-bottom: 12px; /* 文章间隔 */
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.content-item:last-child { margin-bottom: 0; }
.content-item:hover { background: var(--color-fill-2); box-shadow: inset 0 0 0 1px var(--color-border-2); }
.content-item-top { background: rgb(var(--primary-1)); }
.content-item-top:hover { background: rgb(var(--primary-2)); }
.content-item-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content-item-title { font-size: 15px; font-weight: 600; color: var(--color-text-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 摘要固定两行高度：超长省略（-webkit-line-clamp），无摘要也占位保持卡片等高 */
.content-item-summary { margin-top: 6px; font-size: 13px; color: var(--color-text-3); line-height: 1.6; min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-item-meta { margin-top: 8px; display: flex; gap: 18px; font-size: 12px; color: var(--color-text-4); white-space: nowrap; overflow: hidden; }
.content-item-meta svg { vertical-align: -2px; margin-right: 3px; }

/* 帮助中心分类侧栏 */
.help-cat-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  color: var(--color-text-2); font-size: 14px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.help-cat-item:hover { background: var(--color-fill-2); }
.help-cat-item.is-active { background: rgb(var(--primary-1)); color: rgb(var(--primary-6)); font-weight: 600; }
.help-cat-count { font-size: 12px; color: var(--color-text-4); }

/* 消息中心（站内信） */
.notice-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 12px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--color-border-1);
  transition: background-color 0.18s ease;
}
.notice-item:last-child { border-bottom: none; }
.notice-item:hover { background: var(--color-fill-2); }
.notice-item.is-unread { background: rgb(var(--primary-1)); }
.notice-item.is-unread:hover { background: rgb(var(--primary-2)); }
.notice-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0;
  background: rgb(var(--primary-6));
}
.notice-dot.is-read { background: transparent; }
.notice-main { flex: 1; min-width: 0; }
.notice-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice-title-text { font-size: 14px; font-weight: 600; color: var(--color-text-1); }
.notice-content { margin-top: 6px; font-size: 13px; color: var(--color-text-3); line-height: 1.6; }
.notice-meta { margin-top: 8px; font-size: 12px; color: var(--color-text-4); }
.notice-meta svg { vertical-align: -2px; margin-right: 3px; }

/* 文章详情排版 */
.article-title { font-size: 22px; font-weight: 600; color: var(--color-text-1); margin: 0 0 10px; }
.article-meta { display: flex; gap: 18px; font-size: 13px; color: var(--color-text-4); }
.article-meta svg { vertical-align: -2px; margin-right: 3px; }
.article-category { margin-bottom: 10px; }
.article-content { font-size: 14px; line-height: 1.8; color: var(--color-text-1); word-break: break-word; }
.article-content p { margin: 0 0 12px; }
.article-content h1, .article-content h2, .article-content h3 { margin: 18px 0 10px; }
.article-content ul, .article-content ol { padding-left: 22px; margin: 0 0 12px; }
.article-content img { max-width: 100%; border-radius: 6px; }
.article-content a { color: rgb(var(--primary-6)); }
.article-content table { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.article-content th, .article-content td { border: 1px solid var(--color-border-2); padding: 8px 12px; }
.article-content-preview {
  border: 1px dashed var(--color-border-3);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 120px;
  background: var(--color-bg-2);
}

/* 首页概览「最新公告」卡片 */
.dash-news-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--color-border-1);
  transition: background-color 0.18s ease;
}
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item:hover { background: var(--color-fill-2); }
.dash-news-main { flex: 1; min-width: 0; }
.dash-news-title {
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--color-text-1);
}
.dash-news-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-news-summary {
  margin-top: 4px; font-size: 12px; color: var(--color-text-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-news-meta { margin-top: 6px; display: flex; gap: 14px; font-size: 12px; color: var(--color-text-4); }
.dash-news-meta svg { vertical-align: -2px; margin-right: 3px; }


/* ================= 欢迎横幅 ================= */
.welcome-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #eef4ff 0%, #f7faff 55%, #ffffff 100%) !important;
  border: 1px solid rgba(22, 93, 255, 0.10) !important;
  border-radius: var(--border-radius-large) !important;
}
.welcome-card::before,
.welcome-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.welcome-card::before {
  width: 260px;
  height: 260px;
  right: 150px;
  top: -130px;
  background: radial-gradient(circle, rgba(22, 93, 255, 0.10), transparent 70%);
}
.welcome-card::after {
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: -110px;
  background: radial-gradient(circle, rgba(76, 167, 255, 0.14), transparent 70%);
}
.welcome-card > * { position: relative; z-index: 1; }
.welcome-title { font-size: 22px; font-weight: 600; color: var(--color-text-1); }
.welcome-desc { margin-top: 8px; font-size: 13px; color: var(--color-text-3); }

/* ================= 产品订购（购物车） ================= */
/* 套餐卡片 */
.pkg-card {
  position: relative;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pkg-card:hover { border-color: rgba(22, 93, 255, 0.4); transform: translateY(-2px); box-shadow: var(--aicloud-shadow-hover); }
.pkg-card.selected {
  border-color: rgb(var(--primary-6));
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
}
.pkg-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 2px 10px;
  border-radius: 0 var(--border-radius-large) 0 var(--border-radius-medium);
  background: linear-gradient(135deg, #165dff, #4c8dff);
  color: #fff;
  font-size: 12px;
}
.pkg-name { font-size: 15px; font-weight: 600; }
.pkg-spec { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--color-text-3); min-height: 38px; }
.pkg-price { margin-top: 8px; font-size: 20px; font-weight: 700; color: #f53f3f; }
.pkg-price span { font-size: 12px; font-weight: 400; color: var(--color-text-3); }


/* 套餐表格：选中行高亮 */
.plan-row-selected td { background: rgba(22, 93, 255, 0.06) !important; }

/* 购买须知（选购配置下方公告） */
.purchase-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 63, 63, 0.25);
  border-radius: var(--border-radius-medium);
  background: rgba(245, 63, 63, 0.04);
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-2);
}
.purchase-notice .notice-title {
  font-size: 13px;
  font-weight: 600;
  color: #f53f3f;
  margin-bottom: 4px;
}
.purchase-notice p { margin: 0 0 6px; }
.purchase-notice p:last-child { margin-bottom: 0; }

/* ================= 订购页（简约企业化） ================= */
.purchase-page .arco-card {
  border-radius: var(--border-radius-medium);
  box-shadow: none;
  border-color: var(--color-border-2);
}
.purchase-page .arco-card-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border-2);
}
.purchase-page .arco-card-header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-1);
}
.purchase-page .arco-card-body { padding: 16px 18px; }
/* 套餐表格：表头与行距企业化 */
.purchase-page .arco-table-th {
  background: #f7f8fa;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-2);
}
.purchase-page .arco-table-tr { height: 52px; }
.purchase-page .arco-table-td { font-size: 13px; color: var(--color-text-1); }
.purchase-page .arco-table-tr:hover .arco-table-td { background: #fafbfc; }
/* 角标去渐变，纯色企业化 */
.purchase-page .pkg-badge {
  background: rgb(var(--primary-6));
  font-size: 12px;
  letter-spacing: 0.5px;
}
/* 右栏操作项间距统一；周期按钮文字单行显示，窄屏时按钮组横向滚动而非换行/竖排 */
.purchase-page .arco-radio-group-type-button {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
}
.purchase-page .arco-radio-group-type-button .arco-radio-button {
  padding: 0 14px;
  line-height: 32px;
  white-space: nowrap;
}
.purchase-page .arco-radio-group-type-button .arco-radio-button-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 价格红色统一字体 */
.purchase-page .pkg-price,
.purchase-page .cfg-total span:last-child {
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* 须知框中性化（企业风，弱化红底） */
.purchase-page .purchase-notice {
  border-color: var(--color-border-2);
  background: var(--color-fill-1);
  color: var(--color-text-3);
  line-height: 1.6;
}

/* ================= 统一订购界面（顶部 Tab） ================= */
/* 顶部 Tab：大号下划线式（本 Arco 版本 tab 项 class 为 .arco-tabs-tab） */
.purchase-tabs-card .arco-card-body { padding: 8px 18px 0; }
.purchase-tabs .arco-tabs-tab {
  margin-right: 36px;
  padding: 8px 2px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-2);
}
.purchase-tabs .arco-tabs-tab:hover { color: rgb(var(--primary-6)); }
.purchase-tabs .arco-tabs-tab.arco-tabs-tab-active { color: rgb(var(--primary-6)); font-weight: 600; }
.purchase-tabs .arco-tabs-nav-ink-bar { height: 3px; border-radius: 2px; background: rgb(var(--primary-6)); }

/* 套餐卡选中：右下角 ✓ 角标 */
.pkg-card.selected::after {
  content: '✓';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(var(--primary-6));
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* 价格预算总额行高亮（企业化蓝底） */
.purchase-page .cfg-total {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--border-radius-medium);
  background: rgba(22, 93, 255, 0.05);
}

/* 镜像选择卡片 */
.os-card {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  padding: 12px 8px 10px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.os-card:hover { border-color: rgba(22, 93, 255, 0.4); transform: translateY(-2px); box-shadow: var(--aicloud-shadow-hover); }
.os-card.selected {
  border-color: rgb(var(--primary-6));
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
}
.os-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.os-name { font-size: 14px; font-weight: 600; color: var(--color-text-1); }
.os-current {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.os-card.selected .os-current { color: rgb(var(--primary-6)); }

/* 弹性云选配 */
.cfg-label { margin-bottom: 8px; font-size: 13px; color: var(--color-text-2); }

/* 价格预算 / 购物车 */
.cfg-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--color-text-2);
}
.cfg-line span:last-child { color: var(--color-text-1); text-align: right; }
.cfg-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--color-text-2);
}
.cart-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border-2);
}
.cart-item:last-of-type { border-bottom: none; }
.cart-config { font-size: 12px; color: var(--color-text-3); margin-top: 2px; word-break: break-word; }
.cart-price { font-size: 15px; font-weight: 600; color: #f53f3f; }

/* 单号类长文本：等宽字体 + 任意位置断行（white-space:normal 覆盖 Arco 表格单元格的 nowrap），杜绝长单号溢出遮盖相邻单元格 */
.num-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; word-break: break-all; white-space: normal; }
.num-mono-click { cursor: pointer; transition: color .15s; }
.num-mono-click:hover { color: var(--color-primary-6); }

/* 余额卡片 */
.balance-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #165dff 0%, #4ca7ff 100%);
  border-radius: var(--border-radius-large);
  color: #fff;
  padding: 24px;
}
.balance-card::before, .balance-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.balance-card::before { right: -50px; top: -50px; width: 180px; height: 180px; }
.balance-card::after { right: 30px; bottom: -70px; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.10); }
.balance-card > * { position: relative; z-index: 1; }
.balance-card .balance-label { font-size: 13px; opacity: 0.85; }
.balance-card .balance-value { font-size: 32px; font-weight: 700; margin: 8px 0 16px; }
.balance-card .balance-value.balance-negative { color: #ffd666; }

.payment-amount { color: #f53f3f; font-size: 22px; font-weight: 700; }
.payment-channel-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
.payment-channel-group .arco-radio { min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--color-border-2); border-radius: var(--border-radius-medium); }
.payment-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.bank-transfer-account { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid rgba(22, 93, 255, 0.22); border-radius: var(--border-radius-medium); background: rgba(22, 93, 255, 0.04); }
.bank-transfer-account div { min-width: 0; }
.bank-transfer-account span { display: block; margin-bottom: 5px; color: var(--color-text-3); font-size: 12px; }
.bank-transfer-account strong { display: block; overflow-wrap: anywhere; color: var(--color-text-1); font-size: 14px; font-weight: 500; }
.bank-transfer-account p { grid-column: 1 / -1; margin: 0; color: var(--color-text-2); font-size: 13px; line-height: 1.6; }
.recharge-notices { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border-2); }
.recharge-notice { padding: 14px 16px; border: 1px solid var(--color-border-2); border-radius: var(--border-radius-medium); background: var(--color-fill-1); }
.recharge-notice--tips { border-color: rgba(22, 93, 255, 0.22); background: rgba(22, 93, 255, 0.04); }
.recharge-notice--security { border-color: rgba(245, 63, 63, 0.22); background: rgba(245, 63, 63, 0.04); }
.recharge-notice-title { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--color-text-1); font-size: 14px; font-weight: 600; }
.recharge-notice-title .arco-icon { flex-shrink: 0; color: rgb(var(--primary-6)); font-size: 16px; }
.recharge-notice--security .recharge-notice-title, .recharge-notice--security .recharge-notice-title .arco-icon { color: #f53f3f; }
.recharge-notice ul { margin: 0; padding-left: 20px; color: var(--color-text-2); font-size: 13px; line-height: 1.7; }
.recharge-notice li + li { margin-top: 4px; }
.recharge-notice strong { color: var(--color-text-1); font-weight: 500; }
.payment-pending { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.payment-qrcode { width: 236px; height: 236px; padding: 8px; border: 1px solid var(--color-border-2); border-radius: var(--border-radius-medium); background: #fff; }
.payment-qrcode img, .payment-qrcode canvas { display: block; width: 220px; height: 220px; }
.identity-qr-content { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.identity-card { margin-bottom: 16px; overflow: hidden; border: 1px solid var(--color-border-2) !important; border-radius: var(--border-radius-large) !important; }
.identity-card--verified { border-color: rgba(0, 180, 42, 0.24) !important; }
.identity-card--failed { border-color: rgba(245, 63, 63, 0.24) !important; }
.identity-card--verifying { border-color: rgba(255, 125, 0, 0.24) !important; }
.identity-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border-2); }
.identity-card-title { color: var(--color-text-1); font-size: 18px; font-weight: 600; line-height: 1.5; }
.identity-card-subtitle { margin-top: 4px; color: var(--color-text-3); font-size: 13px; line-height: 1.5; }
.identity-status-tag { flex-shrink: 0; }
.identity-status-panel { display: flex; align-items: center; gap: 14px; padding: 22px 0; }
.identity-status-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--color-fill-2); color: rgb(var(--primary-6)); font-size: 23px; }
.identity-card--verified .identity-status-icon { background: rgba(0, 180, 42, 0.10); color: rgb(var(--success-6)); }
.identity-card--failed .identity-status-icon { background: rgba(245, 63, 63, 0.10); color: #f53f3f; }
.identity-card--verifying .identity-status-icon { background: rgba(255, 125, 0, 0.10); color: #ff7d00; }
.identity-status-title { color: var(--color-text-1); font-size: 16px; font-weight: 600; line-height: 1.5; }
.identity-status-desc { margin-top: 4px; color: var(--color-text-3); font-size: 13px; line-height: 1.5; }
.identity-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: var(--border-radius-medium); background: var(--color-fill-1); }
.identity-detail-item { min-width: 0; }
.identity-detail-item span { display: block; margin-bottom: 6px; color: var(--color-text-3); font-size: 12px; }
.identity-detail-item strong { display: block; overflow: hidden; color: var(--color-text-1); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.identity-reject-alert { margin-top: 16px; word-break: break-word; }
.identity-quota-alert { margin-top: 16px; word-break: break-word; }
.identity-form { width: 100%; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border-2); }
.identity-form-heading { margin-bottom: 16px; color: var(--color-text-1); font-size: 15px; font-weight: 600; }
.identity-notice { width: 100%; margin: 2px 0 16px; word-break: break-word; }
.identity-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.identity-refresh { margin-top: 18px; }
.identity-qr-title { color: var(--color-text-1); font-size: 16px; font-weight: 600; }
.identity-qr-code { flex-shrink: 0; }
.identity-qr-tip { max-width: 260px; color: var(--color-text-3); font-size: 13px; line-height: 1.6; }
.identity-qr-actions { width: 100%; }
.identity-qr-actions .arco-btn { width: 100%; }
.payment-loading-icon, .payment-success-icon { font-size: 64px; }
.payment-waiting-icon { color: #ff7d00; font-size: 64px; }
.payment-pending-tip { max-width: 420px; color: var(--color-text-3); font-size: 13px; line-height: 1.6; }
.payment-loading-icon { color: rgb(var(--primary-6)); animation: payment-spin 1s linear infinite; }
.payment-success-icon { color: rgb(var(--success-6)); }
.payment-pending-title { font-size: 15px; font-weight: 600; }
.money-income { color: rgb(var(--success-6)); font-weight: 600; }
.money-expense { color: #f53f3f; font-weight: 600; }
@keyframes payment-spin { to { transform: rotate(360deg); } }

/* ================= 工单详情 ================= */
.ticket-instance-ip { font-size: 12px; color: var(--color-text-3); }
.ticket-detail-head {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border-2);
}
.ticket-detail-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.5;
  word-break: break-all;
}
.ticket-reply-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-2);
  margin-bottom: 12px;
}
.ticket-reply-list {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}
.ticket-reply {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: var(--border-radius-large);
  background: var(--color-fill-1);
}
.ticket-reply.is-admin {
  background: rgba(22, 93, 255, 0.06);
}
.ticket-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ticket-reply-user { font-size: 13px; font-weight: 600; }
.ticket-reply-time { font-size: 12px; color: var(--color-text-3); }
.ticket-reply-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-1);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================================
 * 响应式适配（手机端）
 * 约定：后续新增页面请复用以下能力 ——
 *  1. 网格布局使用 a-col 响应式断点（:xs :sm :md :lg），不写死 span
 *  2. 表格无需额外处理，.arco-table 自动横向滚动
 *  3. 顶栏/卡片间距由本文件统一收窄
 * ================================================================ */
@media (max-width: 768px) {
  /* 登录 / 注册卡片 */
  .auth-card { width: 92vw; padding: 30px 24px 22px; }
  .auth-card-wrap { flex: 0 1 auto; width: 92vw; max-width: 400px; }
  .auth-page .blob-3 { display: none; }
  .auth-page { padding: 92px 16px 36px; }

/* 较窄屏幕：隐藏登录页左侧营销栏，表单卡居中 */
@media (max-width: 900px) {
  .auth-aside { display: none !important; }
  .auth-inner { justify-content: center; gap: 0; }
}

/* 桌面侧边栏隐藏，改为抽屉（见 layout.js） */
.layout-sider { display: none; }
  .main-content { padding: 12px; }

  /* 顶栏：收窄内边距、隐藏次要元素 */
  .layout-header { padding: 0 8px; }
  .header-left .arco-breadcrumb { display: none; }
  .hide-on-mobile { display: none !important; }

  /* 顶栏搜索：移动端收窄输入框，下拉右对齐自适应视口 */
  .header-search .arco-input { width: 170px; }
  .header-search-pop {
    left: auto;
    right: 0;
    width: min(300px, calc(100vw - 24px));
    max-height: 60vh;
  }

  /* 用户详情字段：窄屏 2 列保持横向 */
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-item:nth-child(4n) { border-right: 1px solid var(--color-border-2); }
  .detail-item:nth-child(2n) { border-right: none; }

  /* 表格：窄屏保持最小宽度、禁止压缩，数据单行横向滚动 */
  .arco-table-content > .arco-table-element {
    min-width: 640px !important;
    flex-shrink: 0;
  }

  /* 统计卡片收窄：收紧内边距与图标间距，保证 7 字标签单行放下（卡片等高对齐） */
  .stat-card .stat-value { font-size: 18px; }
  .stat-card .stat-icon { width: 38px; height: 38px; font-size: 18px; }
  .stat-card .arco-card-body { padding: 12px 10px; }
  .stat-card .arco-space { gap: 10px !important; }

  /* 欢迎横幅按钮换行 */
  .welcome-banner { flex-wrap: wrap; gap: 12px; }
  .mt-on-mobile { margin-top: 16px; }

  /* 首页概览收窄 */
  .dash-finance-value { font-size: 22px; }
  .dash-finance-balance { border-right: none; padding-right: 0; }
  .dash-finance-card .arco-card-body { padding: 16px; }
  .dash-user-name { font-size: 16px; }

  /* 公告/帮助内容收窄 */
  .content-item { padding: 12px 10px; }
  .content-item-title { font-size: 14px; }
  .article-title { font-size: 18px; }
  .article-content { font-size: 13px; }
  .help-cat-item { font-size: 13px; }
  .notice-item { padding: 12px 8px; }
  .notice-title-text { font-size: 13px; }
  .payment-channel-group { grid-template-columns: 1fr; }
  .bank-transfer-account { grid-template-columns: 1fr; }
  .recharge-notices { margin-top: 16px; padding-top: 16px; }
  .recharge-notice { padding: 12px; }
  .recharge-notice ul { padding-left: 18px; font-size: 12px; }
  .identity-card .arco-card-body { padding: 16px; }
  .identity-card-header { align-items: flex-start; }
  .identity-card-subtitle { max-width: 230px; }
  .identity-status-panel { padding: 18px 0; }
  .identity-details { grid-template-columns: 1fr; gap: 14px; }
  .identity-actions .arco-btn { width: 100%; }
  .identity-qr-content { gap: 14px; }
  .identity-qr-code { width: min(236px, 100%); height: auto; }
  .identity-qr-code img, .identity-qr-code canvas { width: 100%; height: auto; }
}

/* 抽屉内菜单与侧边栏一致 */
.mobile-menu .layout-logo { border-bottom: none; height: 48px; }

/* ================= 前台首页 ================= */
.home-page {
  min-height: 100vh;
  background: #fff;
  overflow-x: hidden;
}

/* 顶部导航 */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(22, 93, 255, 0.08);
}
.home-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-logo { display: flex; align-items: center; cursor: pointer; }
/* 品牌 logo 图片（自带文字的横版 logo：高度定档、宽度自适应、按比例缩放不裁切） */
.home-logo-img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.home-nav-links { display: flex; gap: 28px; }
.home-nav-links a {
  font-size: 14px;
  color: var(--color-text-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
.home-nav-links a:hover { color: rgb(var(--primary-6)); }
.home-nav-actions { display: flex; align-items: center; gap: 8px; }

/* Hero 区 */
.home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 18% -8%, rgba(22, 93, 255, 0.10), transparent 60%),
    radial-gradient(900px 520px at 112% 112%, rgba(76, 167, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #f6f9ff 0%, #edf3ff 55%, #f8faff 100%);
}
.home-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.home-hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.home-hero .blob-1 { width: 420px; height: 420px; top: -130px; left: -110px; background: #7aa5ff; }
.home-hero .blob-2 { width: 380px; height: 380px; bottom: -130px; right: -90px; background: #6fd3e8; }
.home-hero .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 30%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 30%, transparent 76%);
}
.home-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 20px;
}
.home-section-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-1);
}
.home-section-desc {
  margin: 0 0 40px;
  font-size: 15px;
  color: var(--color-text-3);
  text-align: center;
}


/* 页脚 */
.home-footer {
  background: #101a2e;
  color: #b8c2d4;
  padding: 48px 20px 0;
}
.home-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.home-footer-brand { max-width: 340px; }
.home-footer .home-logo-img { height: 36px; }
.home-footer-desc { margin-top: 14px; font-size: 13px; line-height: 1.8; color: #8b96ab; }
.home-footer-copy {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #6b7690;
  text-align: center;
}

/* 前台首页手机端 */
@media (max-width: 768px) {
  .home-nav-inner { padding: 0 14px; }
  /* 三类选择器加权压过后面的 .tc-nav .home-logo-img（36px） */
  .tc-nav .home-logo .home-logo-img { height: 30px; }
  .home-stat-value { font-size: 22px; }
  .home-section { padding: 48px 14px; }
  .home-section-title { font-size: 24px; }
}

/* ================= 前台首页·玖云/IDCMax 风格（tc- 前缀，仅作用于前台页面，不影响控制台主题） ================= */
.tc-home {
  --tc-primary: #2563eb;          /* 激活蓝（IDCMax Tab 同款 #2563eb） */
  --tc-primary-hover: #1d4ed8;
  --tc-primary-light: #3b82f6;
  --tc-text-1: #0f172a;
  --tc-text-2: #334155;
  --tc-text-3: #64748b;
  --tc-border: #e5e7eb;
  --tc-bg: #f4f7f9;               /* 页面浅灰底 */
  background: var(--tc-bg);
}

/* 顶部导航（同 IDCMax）：fixed 悬浮透明毛玻璃，滚动后白底阴影 */
.tc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tc-nav-scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #e5e6eb;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tc-nav .home-nav-inner {
  height: 63px;
  justify-content: flex-start; /* logo + 菜单靠左紧凑，按钮由 margin-left:auto 推右 */
}
.tc-nav .home-nav-links { margin-left: 24px; }
.tc-nav .home-nav-actions { margin-left: auto; }
.tc-nav .home-logo-img { height: 36px; }
.tc-nav .home-nav-links a {
  padding: 6px 10px;
  font-size: 14px;
  color: var(--tc-text-1);
  transition: color 0.2s ease;
}
.tc-nav .home-nav-links a:hover { color: var(--tc-primary); }
.tc-nav-text-link {
  font-size: 14px;
  color: var(--tc-text-1);
  cursor: pointer;
  padding: 8px 10px;
  transition: color 0.2s ease;
}
.tc-nav-text-link:hover { color: var(--tc-primary); }
/* 前台主按钮统一 IDCMax 蓝（#0052d9 实心、圆角 2px） */
.tc-home .arco-btn-primary {
  background: #0052d9;
  border-color: #0052d9;
  border-radius: 2px;
}
.tc-home .arco-btn-primary:hover { background: #0045b8; border-color: #0045b8; }
.tc-home .arco-btn-outline { border-radius: 2px; }
.tc-home .arco-btn-secondary, .tc-home .arco-btn { border-radius: 2px; }

/* Hero：左对齐 + 标题轮播 */
.tc-hero {
  height: 600px; /* 固定 Hero 高度：视频容器恒定，轮播切换零抖动 */
  background:
    radial-gradient(1100px 560px at 12% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
    radial-gradient(900px 520px at 108% 108%, rgba(59, 130, 246, 0.10), transparent 60%),
    linear-gradient(180deg, #f7faff 0%, #edf4ff 55%, #f4f7f9 100%);
}
/* 背景视频：加载完成后淡入；失败/未加载时保持渐变底 */
.tc-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tc-hero-video.is-ready { opacity: 1; }
/* 浅色遮罩（同 IDCMax）：标题导航在左、内容在右，右侧浓保证文字可读，左侧渐淡露出视频，底部融入页面底色；按轮播色调区分 */
.tc-hero-mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(240, 245, 255, 0.05) 0%, rgba(240, 245, 255, 0.40) 38%, rgba(240, 245, 255, 0.78) 62%, rgba(240, 245, 255, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
  transition: opacity 0.5s ease;
}
.tc-hero-mask--blue {
  background:
    linear-gradient(270deg, rgba(147, 197, 253, 0.05) 0%, rgba(191, 219, 254, 0.38) 38%, rgba(240, 245, 255, 0.78) 62%, rgba(240, 245, 255, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
}
.tc-hero-mask--cyan {
  background:
    linear-gradient(270deg, rgba(103, 232, 249, 0.05) 0%, rgba(165, 243, 252, 0.36) 38%, rgba(240, 250, 252, 0.78) 62%, rgba(240, 250, 252, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
}
.tc-hero-mask--violet {
  background:
    linear-gradient(270deg, rgba(196, 181, 253, 0.05) 0%, rgba(221, 214, 254, 0.38) 38%, rgba(248, 245, 255, 0.78) 62%, rgba(248, 245, 255, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
}
.tc-hero-mask--green {
  background:
    linear-gradient(270deg, rgba(110, 231, 183, 0.05) 0%, rgba(167, 243, 208, 0.36) 38%, rgba(240, 252, 248, 0.78) 62%, rgba(240, 252, 248, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
}
.tc-hero-mask--orange {
  background:
    linear-gradient(270deg, rgba(253, 186, 116, 0.05) 0%, rgba(254, 215, 170, 0.36) 38%, rgba(255, 250, 245, 0.78) 62%, rgba(255, 250, 245, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%, rgba(244, 247, 249, 0.55));
}
.tc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 20px 64px; /* 顶部留白补偿 fixed 悬浮导航 */
  display: flex;
  align-items: center;
  gap: 40px;
}
.tc-hero-copy { flex: 1 1 auto; min-width: 0; padding-left: 48px; } /* 内容靠右并与左侧标题导航留出间隔 */
/* 左侧竖排标题导航（rail，同 IDCMax：标题在左、内容在右） */
.tc-hero-rail {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid rgba(37, 99, 235, 0.18);
  padding-right: 26px;
}
.tc-hero-rail-item {
  padding: 10px 12px;
  font-size: 15px;
  text-align: right;
  color: var(--tc-text-3);
  cursor: pointer;
  border-right: 2px solid transparent;
  margin-right: -27px;
  padding-right: 25px;
  transition: color 0.2s ease;
}
.tc-hero-rail-item:hover { color: var(--tc-primary); }
.tc-hero-rail-item.active {
  color: var(--tc-primary);
  font-weight: 600;
  border-right-color: var(--tc-primary);
}
.tc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--tc-text-2);
  margin-bottom: 18px;
}
.tc-hero-hot {
  padding: 2px 10px;
  border-radius: 2px;
  background: #f97316;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.tc-hero-title {
  margin: 0;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.5px;
  color: var(--tc-text-1);
}
.tc-hero-sub {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--tc-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 副标题统一最多两行，保证各轮播内容高度一致 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em; /* 固定两行高度：部分副标题只有一行，避免切换时按钮/统计区上下跳动 */
}
.tc-hero-btns { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.tc-hero-btns .arco-btn-primary {
  background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-primary-light) 100%);
  border-color: transparent;
}
.tc-hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.home-stat { text-align: center; }
.home-stat-value { font-size: 28px; font-weight: 700; color: rgb(var(--primary-6)); }
.home-stat-label { margin-top: 4px; font-size: 13px; color: var(--color-text-3); }
.tc-hero .home-stat-value { font-size: 30px; color: var(--tc-primary); white-space: nowrap; }
.tc-hero .home-stat-label { color: var(--tc-text-3); }
/* 标题轮播切换动画 */
.tc-fade-enter-active, .tc-fade-leave-active { transition: opacity 0.35s ease, transform 0.35s ease; }
.tc-fade-enter-from { opacity: 0; transform: translateY(12px); }
.tc-fade-leave-to { opacity: 0; transform: translateY(-12px); }

/* 为什么选择（卡片等宽平铺） */
.tc-strip {
  background: #fff;
  border-top: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;
}
.tc-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.tc-strip-item {
  flex: 1 1 0; /* 五张卡片等宽平铺 */
  min-width: 200px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 42px 34px 24px;
  border-radius: 4px;
  background: var(--tc-bg);
}
.tc-strip-item-blue {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  cursor: pointer;
}
.tc-strip-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--tc-primary);
  background: #e8f0fe;
}
.tc-strip-item-blue .tc-strip-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tc-strip-item-title { font-size: 16px; font-weight: 500; color: var(--tc-text-1); }
.tc-strip-item-blue .tc-strip-item-title { color: #fff; }
.tc-strip-item-desc { margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--tc-text-3); }
.tc-strip-item-blue .tc-strip-item-desc { color: rgba(255, 255, 255, 0.85); }
.tc-strip-hot {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 2px;
  background: #f97316;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

/* 区块头：左标题 + 右「查看全部」 */
.tc-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tc-sec-head .home-section-title { margin: 0 0 8px; text-align: left; font-size: 28px; }
.tc-sec-head .home-section-desc { margin: 0; text-align: left; font-size: 14px; }
.tc-sec-more {
  font-size: 13px;
  color: var(--tc-primary);
  cursor: pointer;
  white-space: nowrap;
  padding-bottom: 4px;
}
.tc-sec-more:hover { color: var(--tc-primary-hover); }

/* 产品分类 Tab（下划线式；分组多时自动换行全部可见） */
.tc-prod-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-prod-tab {
  position: relative;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--tc-text-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
.tc-prod-tab:hover { color: var(--tc-primary); }
.tc-prod-tab.active { color: var(--tc-primary); font-weight: 600; }
.tc-prod-tab.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: var(--tc-primary);
}

/* 产品卡片（白卡 4px 圆角轻阴影） */
.tc-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tc-prod-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-prod-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); }
.tc-prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tc-prod-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--tc-text-1); }
.tc-prod-price-badge {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 2px;
  border: 1px solid rgba(37, 99, 235, 0.30);
  color: var(--tc-primary);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
}
.tc-prod-desc {
  margin: 0 0 12px;
  min-height: 40px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tc-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-prod-empty { padding: 32px 0; text-align: center; font-size: 13px; color: var(--tc-text-3); }

/* 解决方案（左 Tab + 右详情面板） */
.tc-sol-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.tc-sol-tabs {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-sol-tab {
  padding: 14px 18px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  font-size: 15px;
  color: var(--tc-text-2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tc-sol-tab:hover { color: var(--tc-primary); }
.tc-sol-tab.active {
  color: var(--tc-primary);
  font-weight: 600;
  border-left: 3px solid var(--tc-primary);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}
.tc-sol-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 28px;
  align-items: stretch;
  padding: 32px 36px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
/* 解决方案配图（本地化图片，640×360） */
.tc-sol-img {
  flex: 0 0 300px;
  width: 300px;
  height: 168px;
  border-radius: 4px;
  object-fit: cover;
  align-self: center;
}
.tc-sol-body { flex: 1 1 auto; min-width: 0; }
.tc-sol-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin-bottom: 18px;
}
.tc-sol-name { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--tc-text-1); }
.tc-sol-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.8; color: var(--tc-text-3); }
.tc-sol-features { list-style: none; margin: 0 0 24px; padding: 0; }
.tc-sol-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--tc-text-2);
}

/* 官方动态：头条大卡 + 列表 */
.tc-news-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.tc-news-featured {
  flex: 1 1 55%;
  min-height: 180px;
  padding: 28px 30px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.82) 0%, rgba(29, 78, 216, 0.55) 60%, rgba(59, 130, 246, 0.35) 100%),
    linear-gradient(120deg, #1d4ed8 0%, #2563eb 45%, #3b82f6 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-news-featured:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14); }
.tc-news-featured-tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 2px;
  background: #f97316;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}
.tc-news-featured-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
.tc-news-featured-date { font-size: 12px; opacity: 0.8; }
.tc-news-featured-more { margin-top: 18px; font-size: 13px; color: #fff; }
.tc-news-list {
  flex: 1 1 45%;
  min-width: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  padding: 6px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tc-news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.tc-news-item:last-child { border-bottom: none; }
.tc-news-item:hover .tc-news-title { color: var(--tc-primary); }
.tc-news-title {
  font-size: 14px;
  color: var(--tc-text-1);
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-news-date { flex-shrink: 0; font-size: 12px; color: var(--tc-text-3); }

/* CTA 全宽横条（视频背景 + 深色遮罩） */
.tc-cta { padding: 0 20px 72px; }
.tc-cta-inner {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 40px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  background: linear-gradient(120deg, #1d4ed8 0%, #2563eb 45%, #3b82f6 100%);
}
.tc-cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-cta-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.78) 0%, rgba(29, 78, 216, 0.50) 55%, rgba(59, 130, 246, 0.32) 100%);
}
.tc-cta-title { position: relative; z-index: 1; font-size: 26px; font-weight: 700; }
.tc-cta-desc { position: relative; z-index: 1; margin-top: 10px; font-size: 14px; opacity: 0.9; }
.tc-cta-btns { position: relative; z-index: 1; margin-top: 24px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tc-cta-btns .arco-btn-primary { background: #fff; color: var(--tc-primary); border-color: transparent; }
.tc-cta-btns .arco-btn-primary:hover { background: #f1f5f9; }
.tc-cta-btns .arco-btn-outline { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* 页脚：浅色 + 服务承诺条 + 链接列 */
.tc-footer { background: #f5f6f8; color: var(--tc-text-3); padding: 0; }
.tc-footer-promise { background: #fff; border-bottom: 1px solid #eef0f3; }
.tc-footer-promise-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tc-footer-promise-item { display: flex; align-items: center; gap: 10px; }
.tc-footer-promise-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--tc-primary);
  background: #e8f0fe;
}
.tc-footer-promise-title { font-size: 14px; font-weight: 600; color: var(--tc-text-1); }
.tc-footer-promise-desc { font-size: 12px; color: var(--tc-text-3); }
.tc-footer-inner { padding-top: 40px; }
.tc-footer-col-title { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--tc-text-1); }
.tc-footer-col a {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--tc-text-3);
  cursor: pointer;
  transition: color 0.2s ease;
}
.tc-footer-col a:hover { color: var(--tc-primary); }
.tc-footer .home-footer-desc { color: var(--tc-text-3); }
.tc-footer-phone { margin-top: 16px; font-size: 13px; color: var(--tc-text-3); }
.tc-footer-phone .arco-icon { vertical-align: -2px; margin-right: 4px; }
.tc-footer-icp { margin-left: 12px; }
.tc-footer .home-footer-copy {
  border-top: 1px solid #e5e7eb;
  color: #94a3b8;
  margin-top: 36px;
}

/* 右下角浮动客服 */
.tc-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.tc-dock-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s ease;
}
.tc-dock-btn:hover { transform: translateY(-2px); }
.tc-dock-panel {
  width: 180px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.tc-dock-panel-title { font-size: 14px; font-weight: 600; color: var(--tc-text-1); margin-bottom: 10px; }
.tc-dock-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--tc-text-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
.tc-dock-link:hover { color: var(--tc-primary); }

/* 超宽屏（≥1600px）：内容限宽 1680 居中（全宽易松散），两侧仅留边距；产品网格加列 */
@media (min-width: 1600px) {
  .tc-nav .home-nav-inner,
  .tc-hero-inner,
  .tc-strip-inner,
  .home-section,
  .tc-footer-promise-inner,
  .tc-footer-inner,
  .home-footer-copy {
    max-width: min(1680px, calc(100% - 96px)); /* 大屏内容限宽，视觉聚焦不松散 */
  }
  .tc-cta { padding-left: 48px; padding-right: 48px; }
  .tc-cta-inner { max-width: min(1680px, calc(100% - 96px)); }
  .tc-prod-grid { grid-template-columns: repeat(6, 1fr); }
  .tc-hero-title { font-size: 52px; }
  .tc-hero-copy { max-width: 780px; }
  .tc-hero-rail { flex-basis: 220px; }
  .tc-sol-desc { max-width: 760px; }
  .tc-sol-panel { max-width: none; }
}
/* 平台数据条：大数字横向排开 */
.tc-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tc-data-item {
  padding: 32px 24px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  text-align: center;
}
.tc-data-item b {
  display: block;
  font-size: 38px;
  font-weight: 700;
  color: var(--tc-primary);
  line-height: 1.2;
}
.tc-data-item span { font-size: 14px; color: var(--tc-text-3); }
@media (max-width: 768px) {
  .tc-data-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tc-data-item { padding: 22px 14px; }
  .tc-data-item b { font-size: 30px; }
}

/* 前台页面手机端 */
/* 中屏：内容区变窄，网格降列、标题过渡 */
@media (max-width: 1100px) {
  .tc-prod-grid { grid-template-columns: repeat(3, 1fr); }
  .tc-hero-title { font-size: 40px; }
  .tc-hero-rail { flex-basis: 170px; }
}
@media (max-width: 900px) {
  .tc-prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tc-nav .home-nav-inner { height: 56px; }
  .tc-hero { height: auto; min-height: 0; }
  .tc-hero-inner { padding: 96px 18px 48px; }
  .tc-hero-title { font-size: 30px; }
  /* 移动端内容全宽：遮罩统一浅色底保证可读 */
  .tc-hero-mask,
  .tc-hero-mask--blue, .tc-hero-mask--cyan, .tc-hero-mask--violet, .tc-hero-mask--green, .tc-hero-mask--orange {
    background: linear-gradient(180deg, rgba(240, 245, 255, 0.94), rgba(244, 247, 249, 0.88));
  }
  .tc-hero-stats { gap: 24px; margin-top: 32px; }
  .tc-hero-copy { padding-left: 0; } /* 移动端导航隐藏，内容全宽不需左侧间隔 */
  .tc-hero .home-stat-value { font-size: 22px; }
  .tc-strip-inner { padding: 18px 14px; }
  .tc-strip-item { flex: 1 1 100%; }
  .tc-sec-head { flex-direction: column; align-items: flex-start; }
  .tc-sec-head .home-section-title { font-size: 24px; }
  .tc-prod-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tc-prod-tab { padding: 10px 14px; white-space: nowrap; }
  /* 移动端只显示「全部 + 前 3 组」，减少横向滚动 */
  .tc-prod-tab:nth-child(n+5) { display: none; }
  .tc-prod-grid { gap: 12px; }
  /* 解决方案：Tab 横排可滚动，面板整行 */
  .tc-sol-layout { flex-direction: column; }
  .tc-sol-tabs { flex: none; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tc-sol-tab { flex: 0 0 auto; padding: 10px 16px; white-space: nowrap; }
  .tc-sol-tab.active { border-left: none; border-bottom: 3px solid var(--tc-primary); }
  .tc-sol-panel { padding: 24px 20px; flex-direction: column; }
  .tc-sol-img { flex: none; width: 100%; height: auto; max-height: 200px; }
  /* 官方动态：头条卡与列表纵向堆叠 */
  .tc-news-layout { flex-direction: column; }
  .tc-news-featured { min-height: 150px; }
  .tc-dock { right: 14px; bottom: 14px; }
  .tc-cta { padding: 0 14px 48px; }
  .tc-cta-inner { padding: 40px 22px; }
  .tc-footer-promise-inner { gap: 16px; justify-content: flex-start; }
}
@media (max-width: 520px) {
  .tc-prod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* 小屏按钮均分撑满，换行整齐 */
  .tc-hero-btns .arco-btn { flex: 1 1 auto; }
}

:focus-visible {
  outline: 2px solid var(--aicloud-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 看板资源统计卡（点击进入对应控制台） */
.dash-res-stat { cursor: pointer; transition: transform .15s ease; }
.dash-res-stat:hover { transform: translateY(-2px); }

/* ================= CDN 站点详情（对齐梦帆盾主控「网站编辑」布局：分区标题 + 左标签右内容 + 逐项帮助文案） ================= */
.cdn-sec { margin-bottom: 32px; }
.cdn-sec:last-child { margin-bottom: 8px; }
.cdn-sec-title { font-size: 14px; font-weight: 600; color: var(--color-text-1); margin-bottom: 18px; }
.cdn-line { display: flex; align-items: flex-start; margin-bottom: 18px; }
.cdn-line:last-child { margin-bottom: 0; }
.cdn-label { flex: 0 0 120px; color: var(--color-text-3); font-size: 14px; line-height: 32px; }
.cdn-item { flex: 1 1 auto; min-width: 0; color: var(--color-text-1); font-size: 14px; }
.cdn-item .arco-input, .cdn-item .arco-select, .cdn-item .arco-input-number { max-width: 400px; }
.cdn-help { margin-top: 8px; color: var(--color-text-4); font-size: 12px; line-height: 20px; max-width: 760px; }
.cdn-tab-save { display: flex; justify-content: flex-end; border-top: 1px solid var(--color-border-2); padding-top: 16px; margin-top: 8px; }
@media (max-width: 768px) {
  .cdn-line { flex-direction: column; }
  .cdn-label { flex: none; line-height: 24px; margin-bottom: 4px; }
  .cdn-item { width: 100%; }
  .cdn-item .arco-input, .cdn-item .arco-select { max-width: none; }
}

/* ================= CDN 控制台布局（面包屑 + 内容卡；列表用顶部 Tab，详情用分区行式布局） ================= */
.cdn-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #999; margin-bottom: 14px; }
.cdn-crumb-link { color: #999; cursor: pointer; }
.cdn-crumb-link:hover { color: #2d8cf0; }
.cdn-crumb-sep { color: #d8d8d8; }
.cdn-list-card .arco-card-body { padding: 20px; }
.cdn-card-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }

/* ================= 会员等级页（用户端）：主卡 + 升级进度 + 等级阶梯 + 升级规则 ================= */
.level-hero { background: linear-gradient(135deg, #165dff, #4ca7ff); color: #fff; border-radius: 8px; padding: 24px 24px 20px; min-height: 210px; display: flex; flex-direction: column; justify-content: center; }
.level-hero-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: .85; }
.level-hero-name { font-size: 34px; font-weight: 600; line-height: 1.3; margin: 10px 0 14px; letter-spacing: 1px; }
.level-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.level-hero-tag { font-size: 13px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; padding: 3px 12px; }
.level-hero-next { margin-top: 14px; font-size: 13px; opacity: .92; }
.level-progress-panel { background: var(--color-bg-2); border: 1px solid var(--color-border-2); border-radius: 8px; padding: 20px 20px 16px; min-height: 210px; display: flex; flex-direction: column; justify-content: center; }
.level-progress-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-text-2); margin-bottom: 14px; }
.level-progress-pct { font-size: 20px; font-weight: 600; color: #165dff; }
.level-progress-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.level-progress-cell { flex: 1 1 140px; background: var(--color-fill-2); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.level-progress-cell span { font-size: 12px; color: var(--color-text-3); }
.level-progress-cell strong { font-size: 16px; color: var(--color-text-1); }
.level-progress-tip { margin-top: 14px; font-size: 13px; color: var(--color-text-3); display: inline-flex; align-items: center; gap: 6px; }
.level-ladder { display: flex; flex-direction: column; gap: 12px; }
.level-rung { display: flex; align-items: center; gap: 14px; border: 1px solid var(--color-border-2); border-radius: 8px; padding: 14px 18px; background: var(--color-bg-2); }
.level-rung.is-current { border-color: #165dff; background: linear-gradient(90deg, rgba(22, 93, 255, .06), rgba(76, 167, 255, .03)); box-shadow: 0 2px 8px rgba(22, 93, 255, .10); }
.level-rung-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-fill-3); color: var(--color-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.level-rung-badge.is-reached { background: #e8ffea; color: #00b42a; }
.level-rung.is-current .level-rung-badge { background: #165dff; color: #fff; }
.level-rung-main { flex: 1 1 auto; min-width: 0; }
.level-rung-name { font-size: 15px; font-weight: 600; color: var(--color-text-1); display: flex; align-items: center; gap: 8px; }
.level-rung-desc { font-size: 13px; color: var(--color-text-3); margin-top: 4px; }
.level-rung-side { flex: none; text-align: right; }
.level-rung-spend { font-size: 14px; color: var(--color-text-2); }
.level-rung-discount { font-size: 15px; font-weight: 600; color: #ff7d00; margin-top: 2px; }
.level-rule { display: flex; gap: 12px; padding: 4px 0; }
.level-rule-icon { flex: none; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.level-rule-text { font-size: 13px; color: var(--color-text-3); line-height: 1.7; }
.level-rule-title { font-size: 14px; font-weight: 600; color: var(--color-text-1); margin-bottom: 2px; }
@media (max-width: 768px) {
  .level-hero, .level-progress-panel { min-height: auto; }
  .level-rung-side { text-align: left; margin-left: 44px; }
  .level-rung { align-items: flex-start; }
}

/* ================= 宝贝回家公益悬浮卡（首页左侧，可关闭，localStorage 记忆） ================= */
.babygome-float { position: fixed; left: 14px; bottom: 14px; width: 230px; z-index: 900; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); border: 1px solid rgba(0, 0, 0, .06); }
.babygome-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: linear-gradient(90deg, #f43f5e, #fb7185); color: #fff; }
.babygome-title { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.babygome-close { cursor: pointer; width: 20px; height: 20px; line-height: 19px; text-align: center; border-radius: 50%; font-size: 15px; font-weight: 600; user-select: none; }
.babygome-close:hover { background: rgba(255, 255, 255, .25); }
.babygome-body { display: block; line-height: 0; cursor: zoom-in; }
.babygome-body img { width: 100%; display: block; }
.babygome-foot { padding: 6px 10px; font-size: 12px; color: #f43f5e; text-align: center; background: #fff7f8; letter-spacing: 1px; }
@media (max-width: 768px) {
  .babygome-float { width: 150px; left: 8px; bottom: 8px; }
}

/* ================= VNC 远程连接页（桌面 + 手机端适配） ================= */
.vnc-page .vnc-card .arco-card-body { padding: 16px 18px; }
.vnc-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 12px; }
.vnc-name { font-weight: 600; font-size: 15px; }
.vnc-hint { flex-basis: 100%; font-size: 12px; color: var(--color-text-3); background: var(--color-fill-2); border-radius: 4px; padding: 6px 10px; line-height: 1.6; }
.vnc-screen { height: calc(100vh - 300px); min-height: 480px; display: flex; align-items: center; justify-content: center; background: #0b0e13; border: 1px solid #262b33; border-radius: 8px; overflow: hidden; }
.vnc-canvas { width: 100%; height: 100%; }
.vnc-connecting { color: #9aa3b2; padding: 40px; }
.vnc-sendbar { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vnc-send-input { flex: 1; min-width: 220px; }
.vnc-bottombar { margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
.vnc-tip { font-size: 12px; color: var(--color-text-3); margin-right: auto; }
@media (max-width: 768px) {
  .vnc-page .vnc-card .arco-card-body { padding: 10px 8px; }
  .vnc-back-label { display: none; }
  .vnc-header { gap: 8px; }
  .vnc-actions { width: 100%; }
  .vnc-actions .arco-space-item { flex: 1 1 0; }
  .vnc-actions .arco-btn { width: 100%; }
  .vnc-hint { font-size: 11px; padding: 6px 8px; }
  .vnc-screen { height: calc(100vh - 360px); height: calc(100dvh - 360px); min-height: 300px; border-radius: 6px; }
  .vnc-send-input { flex-basis: 100%; min-width: 100%; }
  .vnc-send-check { margin-left: auto; }
  .vnc-tip { display: none; }
}

/* 工单附件（2026-08-16） */
.ticket-attachment-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--color-border-2);border-radius:4px;background:var(--color-fill-1);font-size:12px;color:var(--color-text-2);text-decoration:none;cursor:pointer;}
.ticket-attachment-chip:hover{border-color:rgb(var(--primary-6));color:rgb(var(--primary-6));}

/* 工单附件图片缩略图（详情页内联展示，点击放大预览；2026-08-18） */
.ticket-attachment-thumbs{display:flex;flex-wrap:wrap;gap:8px;}
.ticket-attachment-thumb{width:96px;}
.ticket-attachment-thumb .arco-image{width:96px;height:96px;border-radius:6px;overflow:hidden;border:1px solid var(--color-border-2);background:var(--color-fill-1);}
.ticket-attachment-thumb .arco-image-img{object-fit:cover;cursor:zoom-in;}
.ticket-attachment-name{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--color-text-3);text-align:center;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ticket-attachment-name:hover{color:rgb(var(--primary-6));}

/* 通知发送管理（场景卡布局，2026-08-16） */
.nc-group-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--color-text-1);margin:20px 0 10px;}
.nc-group-title::after{content:'';flex:1;height:1px;background:var(--color-border-2);}
.nc-group-count{font-size:12px;font-weight:400;color:var(--color-text-3);}
.nc-row{border:1px solid var(--color-border-2);border-radius:8px;padding:14px 16px;margin-bottom:10px;background:var(--color-bg-2);transition:box-shadow .2s;}
.nc-row:hover{box-shadow:0 2px 10px rgba(0,0,0,.04);}
.nc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.nc-head-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nc-name{font-size:14px;font-weight:600;}
.nc-inline-tag{font-size:11px;padding:1px 8px;border-radius:10px;font-weight:400;}
.nc-tag-account{color:rgb(var(--arcoblue-6));background:rgb(var(--arcoblue-1));}
.nc-tag-business{color:rgb(var(--green-6));background:rgb(var(--green-1));}
.nc-tag-support{color:rgb(var(--orange-6));background:rgb(var(--orange-1));}
.nc-meta{font-size:12px;color:var(--color-text-4);}
.nc-channels{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:768px){.nc-channels{grid-template-columns:1fr;}}
.nc-channel{background:var(--color-fill-1);border-radius:6px;padding:10px 14px;min-height:108px;display:flex;flex-direction:column;gap:7px;}
.nc-channel.nc-off{align-items:center;justify-content:center;color:var(--color-text-4);font-size:12px;border:1px dashed var(--color-border-2);background:transparent;}
.nc-channel-head{display:flex;align-items:center;justify-content:space-between;}
.nc-channel-name{font-size:13px;font-weight:600;color:var(--color-text-2);display:inline-flex;align-items:center;gap:5px;}
.nc-must{font-size:11px;color:rgb(var(--blue-6));background:rgb(var(--blue-1));padding:1px 8px;border-radius:10px;}
.nc-status{font-size:12px;color:var(--color-text-2);display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.nc-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-text-4);margin-right:6px;flex:none;}
.nc-dot.ok{background:rgb(var(--green-6));}
.nc-dot.warn{background:rgb(var(--orange-6));}
.nc-params{font-size:11px;color:var(--color-text-4);line-height:1.5;}
.nc-reply{font-size:11px;color:rgb(var(--red-6));line-height:1.5;}
.nc-actions{margin-top:auto;display:flex;gap:8px;padding-top:2px;}
.nc-masters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:992px){.nc-masters{grid-template-columns:1fr;}}
.nc-master{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-fill-1);border-radius:6px;padding:10px 14px;}

/* ================= 工单详情手机端适配（2026-08-17） ================= */
/* 桌面端回复操作行 */
.ticket-reply-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
/* 管理端操作行（状态操作左、回复右） */
.ticket-detail-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 768px) {
  /* 固定宽抽屉（工单详情等）手机端全屏铺满，等同独立页面 */
  .arco-drawer { width: 100vw !important; border-radius: 0 !important; }
  /* 全屏后由抽屉体统一滚动，取消沟通记录区内层限高，避免嵌套滚动 */
  .ticket-reply-list { max-height: none; }
  .ticket-reply-actions { flex-wrap: wrap; }
  .ticket-reply-actions .arco-btn { flex: 1; min-width: 96px; }
  .ticket-detail-actions .arco-btn { flex: 1; }
  .ticket-detail-actions .arco-space { flex: 1; }
  .ticket-detail-actions .arco-space-item { margin-right: 0 !important; }
  .ticket-detail-actions .arco-space-item .arco-btn { width: 100%; }
}

/* ================= 支付/充值弹窗手机端适配（2026-08-17） ================= */
@media (max-width: 768px) {
  /* 固定宽弹窗（充值 720 / 支付 520 等）手机端收窄到可用宽度，全站生效 */
  .arco-modal { width: calc(100vw - 24px) !important; margin: 12px auto; }
  /* 长内容弹窗（充值温馨提示/安全提醒）内部滚动，不再撑出屏幕 */
  .arco-modal-body { max-height: calc(100dvh - 160px); overflow-y: auto; }
  /* 银行转账收款信息三列改单列堆叠 */
  .bank-transfer-account { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  /* 支付渠道三列保持但收紧内边距 */
  .payment-channel-group .arco-radio { padding: 10px 8px; }
  /* 操作按钮铺满更易点 */
  .payment-actions { gap: 8px; }
  .payment-actions .arco-btn { flex: 1; }
  /* 待支付态二维码随屏缩放 */
  .payment-pending { min-height: 280px; gap: 12px; }
}

/* ================= 实例详情手机端适配（2026-08-17） ================= */
@media (max-width: 768px) {
  /* hero：机器名与状态换行堆叠、元信息两列排布 */
  .inst-hero-name { font-size: 18px; }
  .inst-hero-title { gap: 8px; }
  .inst-hero-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .inst-hero-actions .arco-btn { flex: 1; min-width: 72px; }
  .inst-hero-actions .arco-space { width: 100%; }
  .inst-hero-actions .arco-space-item { flex: 1; margin-right: 0 !important; }
  .inst-hero-actions .arco-space-item .arco-btn { width: 100%; }
  .inst-hero-meta { gap: 4px 12px; font-size: 12px; }

  /* 卡中卡扁平化：概要等 Tab 内的子卡去掉自身内边距与圆角边框，由外层卡统一留白 */
  .arco-tabs-content .arco-card .arco-card-body { padding: 12px; }
  .arco-tabs-content .arco-card .arco-card-header { padding: 12px 12px 0; height: auto; min-height: 32px; }
  .arco-tabs-content .arco-card > .arco-card-header + .arco-card-body { padding-top: 4px; }

  /* 描述表：标签列收窄、值可换行不吃标签 */
  .arco-descriptions-item-label { padding: 6px 8px 6px 0; width: 1%; white-space: nowrap; }
  .arco-descriptions-item-value { padding: 6px 0; word-break: break-all; }

  /* 子卡标题行：标题与右上角按钮换行不再互相挤压 */
  .arco-tabs-content .arco-card-header-title { font-size: 14px; white-space: nowrap; }

  /* Tab 头：横向滚动紧凑 */
  .arco-tabs-nav-tab { margin: 4px 0; }

  /* 概要两列弹性布局：手机强制单列堆叠（flex 容器窄屏换行阈值高） */
  .inst-overview-cols { flex-direction: column !important; }
  .inst-overview-cols > div { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* ================= 弹窗分区标题（重装系统等三段式弹窗） ================= */
.modal-section-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text-1); margin: 18px 0 10px; }
.modal-section-title .arco-icon { color: #165dff; font-size: 15px; flex-shrink: 0; }
.modal-section-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border-2); margin-left: 10px; }

/* ================= 实例列表 IP 角标（多 IP 数量，悬浮展开全部） ================= */
.ip-cell-wrap { position: relative; display: inline-flex; align-items: center; }
.ip-count-badge { position: absolute; top: -8px; right: -20px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #165dff; color: #fff; font-size: 11px; font-style: normal; line-height: 16px; text-align: center; box-shadow: 0 0 0 1px #fff; }
.ip-pop-title { font-weight: 600; margin-bottom: 2px; }
.ip-pop-ip { font-family: monospace; line-height: 1.8; }

/* ================= IP 芯片（网络信息 Tab / 全部 IP 展示统一样式：点击复制） ================= */
.ip-chip { display: inline-block; padding: 2px 8px; background: var(--color-fill-2); border: 1px solid var(--color-border-2); border-radius: 4px; font-family: monospace; font-size: 12px; cursor: pointer; transition: background .2s, color .2s; word-break: break-all; }
.ip-chip:hover { background: var(--color-fill-3); color: #165dff; }
.ip-chip .ip-chip-del { margin-left: 6px; font-size: 12px; color: var(--color-text-3); cursor: pointer; }
.ip-chip .ip-chip-del:hover { color: #f53f3f; }