/* ============================================================
 * 欧云定制首页主题 ouyun_1(2026-10-03, 由旧版更名而来)
 * 设计语言: 国际控制台大厂风格 —— 浅灰底(#f5f7fa)/白卡/1px 边框+
 *   轻阴影/8px 圆角/克制的品牌蓝(#0058ff)点缀/系统字体栈/tabular 数字。
 * 布局: 欢迎条 → 4×KPI 卡 → 8+4 主区(资源表+侧栏卡组) → 服务信息条。
 * 响应式: ≥1180px 四卡一排; 750-1180 两卡一排+主区单列; ≤750 全堆叠。
 * ⚠ 不使用持续性 opacity/transform 动画类(ouyun250 层叠上下文教训),
 *   卡片 hover 仅 box-shadow/border 变化, 不创建层叠上下文。
 * ============================================================ */

.oyh-main {
  /* 不覆盖 padding: 跟随壳 el-main 默认内边距(与其他页面的大气泡边距逐像素一致, 壳自带响应式); 旧版 24px 覆盖是外层大气泡遗留已移除 */
  background: transparent !important;
  border-radius: 0 !important;
}
.oyh-page {
  /* max-width 1440 是旧版外层大气泡限宽居中的遗留; 多小气泡布局应拉满与其他页大气泡同边距(2026-10-04 移除) */
  max-width: none;
  margin: 0 auto;
  color: #1f2329;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 通用卡 ---------- */
.oyh-card {
  background: #fff;
  border: 1px solid #e8ebf1;
  border-radius: 0;
  box-shadow: none;
}


/* ---------- 按钮 / 徽标 ---------- */
.oyh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  border: 1px solid #d6dce8;
  background: #fff;
  color: #3b4252;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.oyh-btn svg { width: 15px; height: 15px; }
.oyh-btn:hover { border-color: #0058ff; color: #0058ff; }
.oyh-btn-primary {
  background: #0058ff;
  border-color: #0058ff;
  color: #fff;
}
.oyh-btn-primary:hover { background: #2e74ff; border-color: #2e74ff; color: #fff; }
.oyh-btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 6px; }
.oyh-btn.is-disabled, .oyh-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.oyh-chip {
  border: none;
  background: #f2f4f9;
  color: #5c6474;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.oyh-chip:hover { background: #e6eaf3; }
.oyh-chip.on { background: #e8f1ff; color: #0058ff; }
.oyh-chip-plain:hover { color: #0058ff; }
.oyh-chip-warn { background: #fff4e8; color: #d97a00; }
.oyh-chip-warn:hover { background: #ffe9d2; color: #c26a00; }
.oyh-copy {
  border: none;
  background: transparent;
  color: #8a92a6;
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
}
.oyh-copy:hover { color: #0058ff; }

/* ---------- 欢迎条 ---------- */
.oyh-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 4px 18px;
}
.oyh-hero-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oyh-level {
  font-size: 12px;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 8px;
  line-height: 18px;
}
.oyh-hero-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #7b8395;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oyh-hero-id { color: #5c6474; font-variant-numeric: tabular-nums; }
.oyh-hero-dot { color: #c3c9d6; }
.oyh-hero-actions { display: flex; gap: 10px; }

/* ---------- KPI 区 ---------- */
.oyh-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* v4: 行1=账户横幅(span 全行) + 行2 三卡 */
.oyh-kpis-v4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oyh-kpis-v4 .oyh-banner { grid-column: 1 / -1; }

/* v7: 左=财务数据卡(span 2 列) 右=身份+快捷融合卡(跨 2 行) 下排=群卡+资源概览 */
.oyh-kpis-v5 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
.oyh-fin { grid-column: 1 / 3; grid-row: 1; padding: 20px 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.oyh-idquick { grid-column: 3; grid-row: 1 / 3; align-self: start; padding: 20px 18px 16px; display: flex; flex-direction: column; } /* align-self:start: 不再强制等于左侧两行气泡总高, 高度随内容自适应 */
.oyh-kpis-v5 .oyh-group { grid-column: 1; grid-row: 2; }
.oyh-kpis-v5 .oyh-rescard { grid-column: 2; grid-row: 2; }
.oyh-fin-nums { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.oyh-fin-sep { width: 1px; align-self: stretch; min-height: 44px; background: #eef0f5; flex-shrink: 0; }
.oyh-idq-user { display: flex; align-items: center; gap: 14px; }
.oyh-idquick .oyh-banner-name { max-width: 190px; font-size: 15px; }
.oyh-idquick .oyh-banner-tags { flex-wrap: wrap; }
.oyh-idq-div { height: 1px; background: #f2f4f8; margin: 14px 0 12px; }
.oyh-idquick .oyh-quick-grid { margin-top: 0; }

/* ---------- 账户信息横幅(UI 规格取自腾讯云控制台总览账户卡) ---------- */
.oyh-banner { padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.oyh-banner-main { display: flex; align-items: center; gap: 28px; }
.oyh-banner-user { display: flex; align-items: center; gap: 16px; min-width: 0; flex-shrink: 0; }
.oyh-banner-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0058ff;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oyh-banner-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oyh-banner-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 描边徽标(腾讯云同款: 1px 边框/2px 圆角/26px 高/12px 字) */
.oyh-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #e2e5eb;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}
.oyh-banner-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.oyh-banner-tags .oyh-tag.ok { color: #18a058; border-color: #bfe5cf; }
.oyh-banner-tags .oyh-tag.warn { color: #d97a00; border-color: #efd9b3; cursor: pointer; }
.oyh-banner-tags .oyh-tag.warn:hover { background: #fff7ef; }
.oyh-tag-level { background: transparent; }
.oyh-banner-id {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.oyh-banner-sep { width: 1px; align-self: stretch; background: #eef0f5; flex-shrink: 0; }
.oyh-banner-nums { flex: 1; display: flex; align-items: center; gap: 32px; min-width: 0; flex-wrap: wrap; }
/* oyh29: 数值移上标签移下(用户需求)——column-reverse 视觉对调, DOM/语义顺序保持 标签→数值 */
.oyh-bn { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.oyh-bn-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.oyh-bn-label.coin-label { cursor: pointer; }
.oyh-bn-label.coin-label:hover { color: #0058ff; }
.oyh-bn-links { display: inline-flex; gap: 10px; }
.oyh-bn-links a { color: rgba(0, 0, 0, 0.55); text-decoration: none; cursor: pointer; }
.oyh-bn-links a:hover { color: #0058ff; }
.oyh-bn-time { font-size: 11px; color: rgba(0, 0, 0, 0.35); }
.oyh-bn-val {
  font-size: 27px;
  font-weight: 650;
  color: #000;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.oyh-bn-val.coin { color: #0058ff; }
.oyh-bn-val i { font-style: normal; font-size: 12px; }
.oyh-bn-val i.up { color: #e0533d; }
.oyh-bn-val i.down { color: #18a058; }
/* 充值/签到按钮(腾讯云: 蓝底白字 34px 高 小圆角) */
.oyh-bn-btn {
  border: none;
  height: 30px;
  padding: 0 16px;
  border-radius: 3px;
  background: #0058ff;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.oyh-bn-btn:hover { background: #2e74ff; }
.oyh-bn-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.oyh-bn-btn-signin { background: #fff; color: #0058ff; border: 1px solid #c9dcff; }
.oyh-bn-btn-signin:hover { background: #eef5ff; }
.oyh-bn-mini { cursor: pointer; }
.oyh-bn-mini .oyh-bn-label { cursor: inherit; }
.oyh-bn-snum {
  font-size: 22px;
  font-weight: 650;
  color: #000;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.oyh-bn-snum.warn { color: #e0533d; }
/* 浅灰提示条(腾讯云 rgb(247,248,251)/2px 圆角/40px 高) */
.oyh-banner-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 2px;
  background: #f7f8fb;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.oyh-banner-tip:hover .oyh-banner-tip-go { text-decoration: underline; }
.oyh-banner-tip-ico { font-size: 13px; }
.oyh-banner-tip-go { color: #0058ff; white-space: nowrap; }

/* ---------- 快捷服务卡 ---------- */
.oyh-quick-grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oyh-quick {
  border-radius: 8px;
  background: #f7f9fc;
  padding: 13px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.oyh-quick:hover { background: #eef2f9; }
.oyh-quick span { font-size: 13px; color: #3b4252; }
.oyh-quick-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  background: #fff no-repeat center/16px;
  border: 1px solid #e8ebf1;
}
.q-recharge { background-color: #e8f1ff; }
.q-recharge::after { content: "￥"; display: flex; align-items: center; justify-content: center; height: 100%; color: #0058ff; font-size: 14px; font-weight: 700; }
.q-ticket { background-color: #fff4e8; }
.q-ticket::after { content: "✎"; display: flex; align-items: center; justify-content: center; height: 100%; color: #d97a00; font-size: 14px; font-weight: 700; }
.q-invoice { background-color: #e8f7ef; }
.q-invoice::after { content: "▤"; display: flex; align-items: center; justify-content: center; height: 100%; color: #18a058; font-size: 13px; font-weight: 700; }
.q-security { background-color: #f0edff; }
.q-security::after { content: "🛡"; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 13px; }

.oyh-kpi { padding: 18px 20px 16px; display: flex; flex-direction: column; min-height: 168px; }
.oyh-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.oyh-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #5c6474;
}
.oyh-kpi-label svg { width: 16px; height: 16px; color: #8a92a6; }
.oyh-kpi-num {
  font-size: 30px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: 0.3px;
}
.oyh-kpi-unit { font-size: 13px; font-weight: 400; color: #8a92a6; margin-left: 6px; }
.oyh-kpi-sub { font-size: 12px; color: #8a92a6; margin-top: 4px; }
.oyh-kpi-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.oyh-kpi-divider { width: 1px; height: 26px; background: #edf0f5; }
.oyh-kpi-mini { display: flex; flex-direction: column; gap: 2px; }
.oyh-kpi-mini-label { font-size: 12px; color: #8a92a6; }
.oyh-kpi-mini-val {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 5px;
}
.oyh-kpi-mini-val i { font-style: normal; font-size: 12px; }
.oyh-kpi-mini-val i.up { color: #e0533d; }
.oyh-kpi-mini-val i.down { color: #18a058; }

/* 平台币融合行(余额卡内, 插件启用时显示) */
.oyh-coin-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 12px 0 2px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f6f9ff;
  border: 1px solid #e2ecff;
}
.oyh-coin-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #5c6474;
}
.oyh-coin-name svg { width: 14px; height: 14px; color: #0058ff; }
.oyh-coin-val {
  font-size: 17px;
  font-weight: 650;
  color: #0058ff;
  font-variant-numeric: tabular-nums;
}
.oyh-coin-frozen { font-size: 11.5px; color: #8a92a6; }
.oyh-coin-signin { border-color: #c9dcff; color: #0058ff; background: #fff; }
.oyh-coin-signin:hover { background: #eef5ff; border-color: #0058ff; }
.oyh-coin-more { margin-left: auto; }

/* 用户群引导卡(主题控制器配置) */
.oyh-group { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 65%); border-color: #d9e6ff; }
.oyh-group-body {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
}
.oyh-group-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.oyh-group-qr {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #c9d2df;
  background: #fafbfd;
  padding: 5px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.oyh-group-qr img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block; }
.oyh-group-desc {
  margin: 0;
  font-size: 12.5px;
  color: #8a92a6;
  line-height: 1.6;
  text-align: left;
}
.oyh-group-btn { min-width: 108px; }

/* 资源概览 2×2 */
.oyh-res-grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oyh-res {
  border-radius: 8px;
  background: #f7f9fc;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.oyh-res:hover { background: #eef2f9; }
.oyh-res-num {
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.oyh-res-num.ok { color: #18a058; }
.oyh-res.warn .oyh-res-num { color: #d97a00; }
.oyh-res-label { font-size: 12px; color: #8a92a6; margin-top: 2px; }
.oyh-res.warn .oyh-res-label { color: #d97a00; }

/* oyh30: 资源概览动态图标——彩底圆角 chip + 小幅循环动画。
   ⚠ 动画只挂在内联 svg 的小形状上(无限循环, 无 fill-mode/will-change),
   绝不挂到卡片/页面容器(ouyun250 层叠上下文红线)。 */
.oyh-res-top { display: flex; align-items: center; gap: 8px; }
.oyh-res-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oyh-res-ico svg { width: 16px; height: 16px; display: block; transition: transform 0.18s; }
.oyh-res:hover .oyh-res-ico svg { transform: scale(1.12); }
.ico-total { background: #e8f1ff; color: #0058ff; }
.ico-run { background: #e8f7ef; color: #18a058; }
.ico-exp { background: #fff4e8; color: #d97a00; }
.ico-pay { background: #fdeeed; color: #e0533d; }
/* 产品总数: 数据库顶盘周期上浮 */
@keyframes oyh-ico-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.ico-total .oyh-db-top { animation: oyh-ico-lift 2.6s ease-in-out infinite; }
/* 运行中: 心电图虚线游走(路径总长≈36, 周期 9/27, offset 每轮走 72=2 周期无缝) */
@keyframes oyh-ico-ekg { from { stroke-dashoffset: 72; } to { stroke-dashoffset: 0; } }
.ico-run .oyh-ekg { stroke-dasharray: 9 27; animation: oyh-ico-ekg 2.2s linear infinite; }
/* 即将到期: 分针匀速旋转 */
@keyframes oyh-ico-spin { to { transform: rotate(360deg); } }
.ico-exp .oyh-hand {
  transform-box: view-box;
  transform-origin: 12px 12.5px;
  animation: oyh-ico-spin 8s linear infinite;
}
/* 待付订单: 感叹号呼吸闪烁 */
@keyframes oyh-ico-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.ico-pay .oyh-blink { animation: oyh-ico-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .oyh-res-ico svg, .oyh-res-ico svg * { animation: none !important; }
}

/* 账户信息卡(形态参考腾讯云控制台: 身份+认证+ID+推荐提示+关键数据+快捷入口) */
.oyh-acct-master {
  font-size: 11px;
  color: #8a92a6;
  border: 1px solid #d6dce8;
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}
.oyh-acct-name {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oyh-acct-cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.oyh-acct-cert-item {
  font-size: 12.5px;
  color: #d97a00;
  background: #fff7ef;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  transition: background 0.15s;
}
.oyh-acct-cert-item:hover { background: #ffefd9; }
.oyh-acct-cert-item.done {
  color: #18a058;
  background: #e8f7ef;
  cursor: default;
}
.oyh-acct-id {
  font-size: 12.5px;
  color: #5c6474;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 2px;
}
.oyh-acct-tip {
  margin-top: 7px;
  font-size: 12px;
  color: #8a92a6;
  cursor: pointer;
  line-height: 1.5;
}
.oyh-acct-tip:hover { color: #5c6474; }
.oyh-acct-go { color: #0058ff; white-space: nowrap; }
.oyh-acct-nums {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oyh-acct-num {
  border-radius: 8px;
  background: #f7f9fc;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
}
.oyh-acct-num:hover { background: #eef2f9; }
.oyh-acct-num b {
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.oyh-acct-num b.warn { color: #e0533d; }
.oyh-acct-num span { font-size: 12px; color: #8a92a6; margin-top: 2px; }
.oyh-acct-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f2f4f8;
  display: flex;
  gap: 18px;
}
.oyh-acct-links a { font-size: 12.5px; color: #0058ff; text-decoration: none; }
.oyh-acct-links a:hover { text-decoration: underline; }

/* 群二维码放大角标 */
.oyh-group-qr { position: relative; }
.oyh-group-zoom {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(31, 35, 41, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oyh-group-zoom svg { width: 13px; height: 13px; }

/* 二维码放大预览弹窗 */
.oyh-qr-big { text-align: center; }
.oyh-qr-big img {
  max-width: 340px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e8ebf1;
}
.oyh-qr-big p { margin: 12px 0 0; font-size: 13px; color: #8a92a6; line-height: 1.6; }

/* ---------- 主区 8 + 4 ---------- */
/* 主区与 KPI 区同构三列: 我的资源(span2)左缘对齐财务卡/右缘对齐群卡右缘, 侧栏与用户卡同列 */
.oyh-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.oyh-grid > .oyh-panel { grid-column: 1 / 3; }
.oyh-grid > .oyh-side { grid-column: 3; grid-row: 1 / 3; }
/* oyh32: 公告与动态置顶但与我的资源同宽(占左两列, 直接继承上面 .oyh-panel 的 1/3 列);
   右侧栏跨"公告行+资源行"两行, 保持全页三列视觉贯通 */
.oyh-side { display: flex; flex-direction: column; gap: 16px; }

.oyh-panel { padding: 16px 20px 18px; }
.oyh-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.oyh-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.oyh-panel-tools { display: flex; gap: 8px; }

/* 资源表 */
.oyh-table-wrap { overflow-x: auto; }
.oyh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.oyh-table th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #8a92a6;
  padding: 8px 10px;
  border-bottom: 1px solid #edf0f5;
  white-space: nowrap;
}
.oyh-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #f2f4f8;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oyh-table tbody tr { cursor: pointer; transition: background 0.12s; }
.oyh-table tbody tr:hover { background: #f8fafd; }
.oyh-table tbody tr:last-child td { border-bottom: none; }
.oyh-td-product { font-weight: 500; color: #26303f; }
.oyh-td-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #5c6474;
}
.oyh-td-notes { color: #8a92a6; }
.oyh-td-host { color: #5c6474; }
.oyh-td-ip { color: #9aa2b5; font-size: 12px; margin-top: 2px; }
.oyh-td-warn { color: #e0533d; font-weight: 600; }

.oyh-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #5c6474;
}
.oyh-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cdd3df;
}
.oyh-status.st-active { color: #18a058; }
.oyh-status.st-active i { background: #18a058; }
.oyh-status.st-pending, .oyh-status.st-creating { color: #d97a00; }
.oyh-status.st-pending i, .oyh-status.st-creating i { background: #d97a00; }
.oyh-status.st-suspended, .oyh-status.st-failed { color: #e0533d; }
.oyh-status.st-suspended i, .oyh-status.st-failed i { background: #e0533d; }

/* 空态 */
.oyh-empty {
  padding: 46px 20px 50px;
  text-align: center;
}
.oyh-empty-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.oyh-empty-sub { margin: 0 0 16px; font-size: 13px; color: #8a92a6; }
.oyh-side-empty { padding: 22px 0 26px; text-align: center; font-size: 13px; color: #9aa2b5; }

/* 侧栏: 公告 */
.oyh-news { list-style: none; margin: 0; padding: 0; }
.oyh-news li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid #f2f4f8;
  cursor: pointer;
}
.oyh-news li:last-child { border-bottom: none; }
.oyh-news-date {
  font-size: 12px;
  color: #9aa2b5;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.oyh-news-title {
  font-size: 13px;
  color: #3b4252;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oyh-news li:hover .oyh-news-title { color: #0058ff; }

/* 侧栏: 工单 */
.oyh-tickets { list-style: none; margin: 0; padding: 0; }
.oyh-tickets li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f2f4f8;
  cursor: pointer;
}
.oyh-tickets li:last-child { border-bottom: none; }
.oyh-ticket-status {
  flex-shrink: 0;
  font-size: 11px;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 16px;
}
.oyh-ticket-title {
  font-size: 13px;
  color: #3b4252;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oyh-tickets li:hover .oyh-ticket-title { color: #0058ff; }

/* 侧栏: 推广返利 */
.oyh-refer { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 65%); border-color: #d9e6ff; }
.oyh-refer-nums { display: flex; gap: 24px; margin-bottom: 12px; }
.oyh-refer-nums > div { display: flex; flex-direction: column; }
.oyh-refer-nums b {
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.oyh-refer-nums span { font-size: 12px; color: #8a92a6; margin-top: 2px; }
.oyh-refer-url {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #c9d8f5;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.oyh-refer-url:hover { border-color: #0058ff; }
.oyh-refer-link {
  flex: 1;
  font-size: 12px;
  color: #5c6474;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oyh-refer-intro { margin: 0 0 12px; font-size: 13px; color: #5c6474; line-height: 1.7; }

/* ---------- 服务信息条 ---------- */
.oyh-meta {
  margin-top: 20px;
  padding: 14px 4px 6px;
  border-top: 1px solid #e8ebf1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 12.5px;
  color: #8a92a6;
}
.oyh-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.oyh-meta-item svg { width: 14px; height: 14px; }
.oyh-meta-item a { color: #5c6474; }
.oyh-meta-item a:hover { color: #0058ff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .oyh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oyh-kpis-v4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oyh-kpis-v4 .oyh-banner { grid-column: 1 / -1; }
  .oyh-banner-main { flex-wrap: wrap; gap: 18px 24px; }
  .oyh-kpis-v5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oyh-fin { grid-column: 1 / -1; grid-row: auto; }
  .oyh-idquick { grid-column: 1 / -1; grid-row: auto; }
  .oyh-kpis-v5 .oyh-group { grid-column: auto; grid-row: auto; }
  .oyh-kpis-v5 .oyh-rescard { grid-column: auto; grid-row: auto; }
  .oyh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oyh-grid > .oyh-panel { grid-column: 1 / -1; }
  .oyh-grid > .oyh-side { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  /* oyh31: 公告卡已前移为 grid 首子, 手机/平板档用 order 把"我的资源"顶回第一位, 保持原移动端顺序 */
  .oyh-grid > .oyh-panel:not(.oyh-newspanel) { order: -1; }
  .oyh-banner-sep { display: none; }
  .oyh-banner-nums { gap: 22px; }
  .oyh-grid { grid-template-columns: minmax(0, 1fr); }
  .oyh-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 750px) {
  .oyh-main { padding: 12px 12px 20px !important; }
  .oyh-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .oyh-kpis-v4 { grid-template-columns: minmax(0, 1fr); }
  .oyh-kpis-v5 { grid-template-columns: minmax(0, 1fr); }
  .oyh-kpis-v5 .oyh-fin, .oyh-kpis-v5 .oyh-idquick, .oyh-kpis-v5 .oyh-group, .oyh-kpis-v5 .oyh-rescard { grid-column: auto; grid-row: auto; }
  .oyh-kpis-v5 .oyh-fin, .oyh-kpis-v5 .oyh-idquick { grid-column: auto; }
  /* 手机端: 用户信息卡排到财务数据卡上方 */
  .oyh-kpis-v5 .oyh-idquick { order: -1; }
  /* 手机端: 资源概览挪到财务数据卡(余额)前面(同 order:-1, DOM 序居用户卡之后) */
  .oyh-kpis-v5 .oyh-rescard { order: -1; }

  /* 手机端: 财务卡数据组双列对齐——余额组通栏, 平台币/本月消费/待支付/待续费 2x2 */
  .oyh-fin-nums {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .oyh-fin-nums > .oyh-bn:first-child { grid-column: 1 / -1; }
  .oyh-fin-sep { display: none; }
  .oyh-fin-nums { gap: 14px; }
  .oyh-kpi { min-height: 0; }
  .oyh-banner { padding: 16px 16px 14px; gap: 10px; }
  .oyh-banner-main { flex-direction: column; align-items: stretch; gap: 14px; }
  .oyh-banner-nums { gap: 16px; }
  .oyh-bn-val { font-size: 20px; }
  .oyh-hero { padding-bottom: 12px; }
  .oyh-hero-title { font-size: 19px; }
  .oyh-hero-actions { width: 100%; }
  .oyh-hero-actions .oyh-btn { flex: 1; justify-content: center; }
  .oyh-side { grid-template-columns: minmax(0, 1fr); }
  .oyh-grid { grid-template-columns: minmax(0, 1fr); }
  .oyh-grid > .oyh-panel, .oyh-grid > .oyh-side { grid-column: auto; }
  .oyh-table th:nth-child(5), .oyh-table td:nth-child(5) { display: none; }
}

/* 到期时间人性化徽标(今天到期=红底醒目, 明/后天/剩N天=橙, 长期/日期=灰) */
.oyh-due {
  font-variant-numeric: tabular-nums;
  color: #5c6474;
}
.oyh-due.warn { color: #d97a00; font-weight: 600; }
.oyh-due.today {
  display: inline-block;
  background: #fdeeed;
  color: #e03e2d;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 8px;
}

/* ==== v8: 下排换位(资源概览左/群卡右) + 认证徽标✓✕ + 联系绑定区 ==== */
.oyh-kpis-v5 .oyh-group { grid-column: 2; }
.oyh-kpis-v5 .oyh-rescard { grid-column: 1; }

/* 认证徽标对号/错号 */
.oyh-tag.ok::before { content: "✓ "; color: #18a058; }
.oyh-tag.warn::before { content: "✕ "; color: #e03e2d; }
.oyh-banner-tags .oyh-tag:first-child::before { content: none; } /* 主账号徽标不加符号 */

/* 联系与绑定区(用户信息卡内) */
.oyh-idq-contacts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oyh-ct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 20px;
}
.oyh-ct-k {
  color: rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 64px;
}
.oyh-ct-ico { width: 15px; height: 15px; border-radius: 2px; }
.oyh-ct-v {
  color: #3b4252;
  font-variant-numeric: tabular-nums;
}
.oyh-ct-v.unset { color: #d97a00; }
.oyh-ct-v a { color: #0058ff; text-decoration: none; white-space: nowrap; }
.oyh-ct-v a:hover { text-decoration: underline; }

/* 本月消费数字: 取消加粗回落常规字重(余额保持醒目) */
.oyh-bn-val.oyh-bn-plain { font-size: 24px; font-weight: 400; }