/* ==========================================================================
   XBOSS 运营概览 · 深色金融风卡片增强（v2，配套 dashboard-overview-enhance.js）
   2026-08-07
   仅作用于被注入 JS 标记了 .xb-dash-card 的概览页卡片，不影响其他页面
   ========================================================================== */

.xb-dash-card { position: relative; overflow: hidden; }

/* 左侧渐变色条 */
.xb-dash-card::before {
  content: "";
  position: absolute;
  top: 12px; left: 0; bottom: 12px;
  width: 3px; border-radius: 3px;
}
.xb-dash-card.tone-success::before { background: linear-gradient(180deg,#34d399,#0fa86f); }
.xb-dash-card.tone-primary::before { background: linear-gradient(180deg,#38bdf8,#1e7bd1); }
.xb-dash-card.tone-info::before    { background: linear-gradient(180deg,#60a5fa,#3b82f6); }
.xb-dash-card.tone-warning::before { background: linear-gradient(180deg,#fbbf24,#d97706); }

/* 涨跌颜色 */
.delta-up   { color: #34d399; font-weight: 700; }
.delta-down { color: #f87171; font-weight: 700; }
.delta-flat { color: #9aa6b8; font-weight: 700; }
.delta-ongoing { color: #60a5fa; font-weight: 700; }

/* 主卡：今日交易额（发光边框 + 渐变数字 + 微渐变底 · 加强版） */
.xb-dash-card.xb-dash-featured {
  border-color: #2f4a78 !important;
  background:
    linear-gradient(180deg, rgba(56,189,248,.10) 0%, rgba(56,189,248,.03) 40%, transparent 70%) !important;
  box-shadow:
    0 0 0 1px rgba(96,165,250,.30),
    0 6px 28px rgba(56,189,248,.20),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.xb-dash-card.xb-dash-featured::before {
  width: 4px !important;
  background: linear-gradient(180deg,#818cf8 0%,#38bdf8 50%,#34d399 100%) !important;
  box-shadow: 0 0 12px rgba(56,189,248,.55);
}
.xb-dash-card.xb-dash-featured .money {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg,#a5b4fc 0%,#7dd3fc 45%,#38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 28px rgba(125,211,252,.35);
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .xb-dash-card.xb-dash-featured .money { font-size: 26px !important; }
}

/* 原生图表 portal（成交金额走势/订单数量走势/通道分析）已被 XN 区块替代：
   用 CSS 按 ID 彻底隐藏（JS 加 class 会被 React 10 秒轮询重绘冲掉，造成闪烁） */
#xb-day-trends-portal,
#xb-trends-portal,
#xb-channel-portal {
  display: none !important;
}
#xb-stats-portal {
  z-index: 1 !important;
}

/* 原生统计卡网格 + 原生图表行：按打包类名直接用 CSS 隐藏，React 重绘也冲不掉 */
.xb-overview-route .page-enter > div[class*="sm:grid-cols-2"][class*="xl:grid-cols-3"],
.xb-overview-route .page-enter > div[class*="xl:grid-cols-[1.45fr_1fr]"] {
  display: none !important;
}

.rhino-app-header {
  z-index: 100 !important;
}

/* ==========================================================================
   XN 风格区块（v4，2026-08-08）
   六卡行（今/昨成功金额·笔数·成功率）+ 30日交易趋势 + 通道分布环形图
   ========================================================================== */

/* ---- 隐藏被替代的原生区块 ---- */
.xb-xn-orig-hide{display:none!important}

/* ---- 六卡行 ---- */
.xb-xn-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px}
@media(min-width:768px){.xb-xn-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.xb-xn-cards{grid-template-columns:repeat(6,1fr)}}
.xb-xn-card{background:#111418;border:1px solid #292F38;border-radius:8px;
  padding:20px 14px 18px;text-align:center;transition:border-color 150ms ease,background-color 150ms ease}
.xb-xn-card:hover{background:#15191E;border-color:#3A424D}
.xb-xn-card-label{font-size:13px;color:#8B96A8;margin-bottom:10px}
.xb-xn-card-value{font-size:27px;font-weight:800;letter-spacing:0;color:#EDF2F9;font-variant-numeric:tabular-nums}
.xb-xn-card-value.unit-sm{font-size:25px}
/* 成功率健康色：≥60% 绿 · 30~60% 黄 · <30% 红 */
.xb-xn-card-value.rate-good{color:#34D399}
.xb-xn-card-value.rate-mid{color:#FBBF24}
.xb-xn-card-value.rate-bad{color:#F87171}

/* ---- 图表面板区 ---- */
.xb-xn-panels{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px;align-items:start}
@media(min-width:1100px){
  .xb-xn-row-chart{grid-template-columns:5fr 3fr}
  .xb-xn-row-table{grid-template-columns:1fr 1fr}
}
.xb-xn-panel{background:#111418;border:1px solid #292F38;border-radius:8px;
  padding:16px 18px 14px;min-width:0}
.xb-xn-panel-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.xb-xn-panel-title{font-size:15px;font-weight:700;color:#DDE6F2;display:flex;align-items:center;gap:8px}
.xb-xn-panel-title::before{content:"";width:4px;height:14px;border-radius:2px;background:#35B6C9}
.xb-xn-panel-sub{font-size:12px;color:#5F6B7E}
.xb-xn-panel-note{margin-left:auto;font-size:11px;color:#5F6B7E;background:#151C28;
  border:1px solid #223047;border-radius:6px;padding:2px 8px}

/* ---- 趋势图 ---- */
.xb-xn-trend-svg{width:100%;height:auto;display:block;max-height:280px}
.xb-xn-trend-legend{display:flex;gap:10px;align-items:center;font-size:11px;color:#B9C4D4}
.xb-xn-trend-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px}

/* ---- 环形图 ---- */
.xb-xn-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;padding:10px 0}
.xb-xn-donut-svg{width:190px;height:190px;flex:none;margin:0 auto}
.xb-xn-donut-legend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:10px}
.xb-xn-panel.donut-panel{display:flex;flex-direction:column}
.xb-xn-panel.donut-panel .xb-xn-donut-wrap{flex:1;align-content:center}
.xb-xn-donut-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#B9C4D4}
.xb-xn-donut-item i{width:9px;height:9px;border-radius:50%;flex:none}
.xb-xn-donut-item b{margin-left:auto;font-weight:700;color:#EDF2F9;font-variant-numeric:tabular-nums}
.xb-xn-donut-item span{color:#5F6B7E;font-variant-numeric:tabular-nums}
.xb-xn-empty{color:#5F6B7E;font-size:13px;text-align:center;padding:44px 0;width:100%}

/* ---- 通道今日表现表 ---- */
.xb-xn-table{width:100%;border-collapse:collapse;font-size:13px}
.xb-xn-table th{font-size:11px;font-weight:500;color:#5F6B7E;text-align:left;padding:6px 8px;border-bottom:1px solid #1D2635}
.xb-xn-table td{padding:10px 8px;border-bottom:1px solid #161D29;color:#DDE6F2}
.xb-xn-table tr:last-child td{border-bottom:none}
.xb-xn-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.xb-xn-table td.sub{color:#5F6B7E}
.xb-xn-table th:nth-child(n+2){text-align:right}
.xb-xn-rate{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.xb-xn-rate-bar{width:64px;height:6px;border-radius:3px;background:#1A2230;overflow:hidden}
.xb-xn-rate-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#22D3EE,#34D399)}

/* ---- 通道统计看板（深色主题，融入运营概览） ---- */
.xb-xn-panel.board-panel{background:#111418;border-color:#292F38;color:#DDE6F2;overflow-x:auto}
.xb-xn-panel.board-panel .xb-xn-panel-title{color:#DDE6F2}
.xb-xn-panel.board-panel .xb-xn-panel-title::before{background:#34D399}
.xb-xn-board{padding:0}
.xb-xn-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin-bottom:6px;min-width:0}
.xb-xn-board-title{display:flex;align-items:center;gap:8px;min-width:0}
.xb-xn-board-title i{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,#34D399,#22D3EE);display:inline-block;position:relative;flex:none}
.xb-xn-board-title i::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:8px;background:#0C1119;border-radius:1px;box-shadow:7px 0 0 #0C1119}
.xb-xn-board-title > div{min-width:0}
.xb-xn-board-title strong{display:block;font-size:14px;font-weight:700;color:#EDF2F9;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xb-xn-board-title span{display:block;font-size:10px;color:#5F6B7E;white-space:nowrap}
.xb-xn-board-sort{display:flex;align-items:center;gap:4px;font-size:11px;color:#8B96A8;flex:none}
.xb-xn-board-sort button{appearance:none;border:1px solid #303741;background:#171B20;border-radius:5px;padding:3px 7px;font-size:11px;color:#B9C4D4;cursor:pointer;transition:border-color 150ms ease,color 150ms ease,background-color 150ms ease;white-space:nowrap}
.xb-xn-board-sort button:hover{border-color:#34D399;color:#34D399}
.xb-xn-board-sort button.active{background:#34D399;border-color:#34D399;color:#0C1119;font-weight:700}
.xb-xn-board-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.xb-xn-board-table thead th{background:#151C28;color:#8B96A8;font-weight:600;font-size:12px;padding:8px 10px;border-bottom:1px solid #1D2635;text-align:left}
.xb-xn-board-table thead th.rank{width:38px;text-align:center}
.xb-xn-board-table thead th.num{text-align:right}
.xb-xn-board-table tbody td{padding:9px 10px;border-bottom:1px solid #161D29;color:#B9C4D4}
.xb-xn-board-table tbody tr:last-child td{border-bottom:none}
.xb-xn-board-table tbody td.rank{text-align:center}
.xb-xn-board-table tbody td.rank span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;color:#8B96A8;background:#1A2230}
.xb-xn-board-table tbody td.rank span.rank-1{background:rgba(250,204,21,.18);color:#FACC15}
.xb-xn-board-table tbody td.rank span.rank-2{background:rgba(148,163,184,.18);color:#CBD5E1}
.xb-xn-board-table tbody td.rank span.rank-3{background:rgba(251,146,60,.18);color:#FB923C}
.xb-xn-board-table tbody td.name{font-weight:500;color:#EDF2F9;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xb-xn-board-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#34D399}
.xb-xn-board-table tbody td.num.yesterday{color:#8B96A8;font-weight:500}
.xb-xn-board-table tbody td.rate{color:#8B96A8;font-weight:500}
.xb-xn-board-table tbody td.rate.rate-good{color:#34D399}
.xb-xn-board-table tbody td.rate.rate-mid{color:#FBBF24}
.xb-xn-board-table tbody td.rate.rate-bad{color:#F87171}

/* ---- 概览页头部（日期·实时数据）提亮 ---- */
.xb-xn-dash-header{padding:4px 0 6px}
.xb-xn-dash-header p{display:flex;align-items:center;gap:8px;font-size:14px!important;color:#DDE6F2!important;font-weight:600;letter-spacing:0}
.xb-xn-dash-header p::before{content:"";width:8px;height:8px;border-radius:50%;background:#34D399;flex:none}
.xb-xn-live-dot{pointer-events:none}
.xb-xn-loading{display:grid;min-height:240px;place-items:center;color:#8B96A8;font-size:13px}

/* ==========================================================================
   响应式细化（2026-08-08）
   ========================================================================== */

/* 环比/金额等数字列禁止断行（修复 "↓ 88.2%" 上下断行问题） */
.xb-xn-table td.num{white-space:nowrap}
.xb-xn-table th{white-space:nowrap}
/* 通道名列允许换行但保持基线对齐 */
.xb-xn-table td{vertical-align:middle}
.xb-xn-table td:first-child{min-width:110px}

/* 平板（768~1099）：卡片值略缩，防止 6 位数金额溢出 */
@media (min-width:768px) and (max-width:1099px){
  .xb-xn-card-value{font-size:22px}
  .xb-xn-card-value.unit-sm{font-size:20px}
}

/* 手机（<768） */
@media (max-width:767px){
  .xb-xn-cards{gap:10px;margin-bottom:12px}
  .xb-xn-card{padding:14px 8px 12px;border-radius:8px}
  .xb-xn-card-label{font-size:11px;margin-bottom:7px}
  .xb-xn-card-value{font-size:19px}
  .xb-xn-card-value.unit-sm{font-size:17px}
  .xb-xn-panels{gap:10px;margin-bottom:12px}
  .xb-xn-panel{padding:12px 12px 10px;border-radius:8px}
  .xb-xn-panel-title{font-size:13px}
  .xb-xn-panel-note{font-size:10px;padding:2px 6px}
  /* 轮盘纵向堆叠：图在上、图例在下 */
  .xb-xn-donut-wrap{flex-direction:column;gap:14px;padding:6px 0}
  .xb-xn-donut-svg{width:170px;height:170px}
  .xb-xn-donut-legend{min-width:0;width:100%;flex:none}
  /* 表格窄屏允许横向滚动，不挤压变形 */
  .xb-xn-panel{overflow-x:auto}
  .xb-xn-table{min-width:480px}
  /* 头部日期行允许换行 */
  .xb-xn-dash-header p{font-size:12px!important}
}

/* XN 区块固定深色金融面板（无论明暗主题都保持深色，与参考风格一致） */