/* ==========================================================================
   犀牛支付 · 极光流体 AURA — 液态玻璃主题层
   2026-08-06 用户选定（可交互原型 v4 方案二）
   叠加原则：
   1. 仅覆盖颜色/材质，不触碰任何布局、尺寸、密度、交互规则
   2. 选择器全部对齐 rhino-design-system.css 的作用域与优先级
      （:root:has(body aside) / body:has(aside) / .rhino-login），加载在其后生效
   3. 极光背景 z-index:-1 位于最底层；玻璃面板半透明 + backdrop-filter 折射
   ========================================================================== */

/* ---------- 1. 主题 token 覆盖（极光夜空基底） ---------- */
:root:has(body aside),
:root:has(.rhino-login) {
  --background: 226 42% 6%;
  --foreground: 222 46% 96%;
  --card: 226 36% 12%;
  --card-foreground: 222 46% 96%;
  --popover: 227 34% 13%;
  --popover-foreground: 222 46% 96%;
  --primary: 192 90% 56%;            /* 极光青（延续 #32d9ec 家族，保持品牌连贯） */
  --primary-foreground: 226 45% 7%;
  --secondary: 228 26% 17%;
  --secondary-foreground: 222 32% 92%;
  --muted: 228 24% 15%;
  --muted-foreground: 224 16% 66%;
  --accent: 230 34% 20%;
  --accent-foreground: 222 46% 96%;
  --border: 228 28% 24%;
  --input: 228 28% 27%;
  --ring: 192 90% 56%;
  --success: 158 68% 48%;
  --warning: 42 94% 57%;
  --destructive: 0 78% 63%;
  --info: 217 85% 65%;
  --chart-1: 192 90% 56%;
  --chart-2: 262 78% 70%;            /* 极光紫（第二相位） */
  --chart-3: 42 94% 57%;
  --chart-4: 217 85% 65%;
  --chart-5: 158 68% 48%;
  --sidebar-background: 228 38% 8%;
  --sidebar-foreground: 224 22% 82%;
  --sidebar-primary: 192 90% 56%;
  --sidebar-accent: 230 36% 18%;
  --sidebar-border: 228 28% 19%;
  --rhino-canvas: #080c18;
  --rhino-surface: #0e1424;
  --rhino-surface-raised: #141b2e;
  --rhino-surface-hover: #1a2338;
  --rhino-line: #26314b;
  --rhino-line-strong: #33405f;
  --rhino-brand: #43e0f2;
  --rhino-brand-soft: rgb(67 224 242 / 0.1);
  --rhino-text: #eef2fa;
  --rhino-text-muted: #a3aeca;
  --rhino-text-faint: #76819f;
  background: var(--rhino-canvas);
  color: var(--rhino-text);
}

/* ---------- 2. 极光背景层：视口固定、缓慢流动、绝不拦截点击 ---------- */
body:has(aside),
body:has(.rhino-login) {
  background: var(--rhino-canvas);
}
body:has(aside)::before,
body:has(.rhino-login)::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 18% 14%, rgb(56 120 255 / 0.32), transparent 62%),
    radial-gradient(36% 46% at 84% 18%, rgb(168 85 247 / 0.27), transparent 62%),
    radial-gradient(46% 56% at 54% 90%, rgb(34 211 238 / 0.20), transparent 62%),
    var(--rhino-canvas);
  animation: xb-aura-drift 24s ease-in-out infinite alternate;
}
@keyframes xb-aura-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(2.2%, 1.8%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(aside)::before,
  body:has(.rhino-login)::before { animation: none; }
}

/* ---------- 2.5 布局修复：新 bundle 用 md:ml-56 但主 CSS 只编译了 ml-52/ml-11，
   展开态主区 margin-left:0 压在固定侧栏下（旧版被不透明侧栏掩盖，玻璃化后暴露）。
   补 210px = rhino 侧栏实际宽度，恢复与线上一致的内容起点；折叠态 ml-11 已存在不受影响 ---------- */
@media (min-width: 768px) {
  body:has(aside) .md\:ml-56 {
    margin-left: 210px;
  }
}

/* ---------- 2.6 极速切换：禁用页面/列表入场动画（page-in 上浮+模糊翻滚、stagger 逐条滚入），
   点击功能板块内容瞬间呈现，保留弹层开关的微动效 ---------- */
.page-enter,
.stagger-item {
  animation: none !important;
}

/* ---------- 2.7 概览统计卡片图标：浅色底残留修复（原暗色规则依赖 .dark 类未生效），
   全部改为极光色域半透明深底 + 亮色图标 ---------- */
.xb-stat-icon-balance,
.xb-stat-icon-rate-today,
.xb-stat-icon-compare { color: #34d399 !important; background: rgb(16 185 129 / 0.14) !important; }
.xb-stat-icon-fee,
.xb-stat-icon-orders { color: #60a5fa !important; background: rgb(37 99 235 / 0.15) !important; }
.xb-stat-icon-wallet { color: #fbbf24 !important; background: rgb(245 158 11 / 0.14) !important; }
.xb-stat-icon-today { color: #38bdf8 !important; background: rgb(2 132 199 / 0.16) !important; }
.xb-stat-icon-yesterday { color: #a78bfa !important; background: rgb(124 58 237 / 0.15) !important; }
.xb-stat-icon-rate-yesterday { color: #fb923c !important; background: rgb(234 88 12 / 0.15) !important; }
.xb-stat-icon-amount,
.xb-stat-icon-pending,
.xb-stat-icon-channel { background: hsl(var(--accent) / 0.5) !important; }

/* ---------- 3. 画布与主区：透明化，让极光从玻璃面板后透出 ---------- */
.rhino-app,
.rhino-app-main {
  background: transparent !important;
}
.rhino-login {
  background: transparent !important;
}

/* ---------- 4. 侧边栏：毛玻璃悬浮 ---------- */
.rhino-app-aside {
  background: hsl(var(--sidebar-background) / 0.55) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border-color: hsl(var(--sidebar-border) / 0.7) !important;
}
.rhino-app-aside > div,
.rhino-app-drawer > div {
  background: transparent !important;
}
.rhino-app-drawer {
  background: hsl(var(--sidebar-background) / 0.85) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
/* 品牌字：极光渐变 */
.rhino-brand-name {
  background: linear-gradient(92deg, #7deefb 8%, #a78bfa 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
/* 激活导航：极光高亮条 */
.rhino-app-aside a.bg-muted::before,
.rhino-app-drawer a.bg-muted::before {
  background: linear-gradient(180deg, var(--rhino-brand), #a78bfa);
  box-shadow: 0 0 10px rgb(67 224 242 / 0.6);
}

/* ---------- 5. 顶栏：更通透的玻璃 ---------- */
.rhino-app-header {
  background: hsl(var(--background) / 0.42) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-color: hsl(var(--border) / 0.55) !important;
}

/* ---------- 6. 面板/卡片：液态玻璃（保留 rhino 的圆角/边框宽度/内边距） ---------- */
.xb-stat-card,
.xb-trend-panel,
.xb-day-trends-card,
.xb-channel-board,
.xb-orders-summary,
.xb-v-toolbar,
.xb-v-filter-head,
.xb-v-surface,
.xb-v-manager-summary,
.xb-c-card,
.xb-c-panel,
.xb-profile-card,
.xb-profile-panel,
.xb-proxy-card {
  background: hsl(var(--card) / 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06) !important;
}
.xb-stat-card::before {
  background: linear-gradient(180deg, var(--rhino-brand), #a78bfa);
}

/* ---------- 7. 主按钮：极光渐变（不动尺寸/圆角） ---------- */
body:has(aside) :is(button.bg-primary, .xb-v-btn--primary, .xb-c-btn--primary),
.rhino-login button[type="submit"] {
  background: linear-gradient(120deg, hsl(192 90% 56%), hsl(258 80% 66%)) !important;
  box-shadow: 0 0 18px hsl(192 90% 56% / 0.28) !important;
}
body:has(aside) :is(button.bg-primary, .xb-v-btn--primary, .xb-c-btn--primary):hover:not(:disabled),
.rhino-login button[type="submit"]:hover:not(:disabled) {
  background: linear-gradient(120deg, hsl(192 90% 62%), hsl(258 80% 72%)) !important;
  box-shadow: 0 0 26px hsl(192 90% 56% / 0.45), 0 0 0 3px hsl(var(--primary) / 0.14) !important;
}

/* ---------- 8. 输入控件：玻璃底 ---------- */
body:has(aside) :is(input, select, textarea, .xb-select-button),
.rhino-login :is(input, select, textarea) {
  background: hsl(var(--background) / 0.5) !important;
}

/* ---------- 9. 弹层/下拉/对话框：深玻璃（保证可读性优先） ---------- */
body:has(aside) :is(.xb-select-menu, [role="listbox"], [role="menu"]),
.rhino-login :is(.xb-select-menu, [role="listbox"], [role="menu"]),
body:has(aside) [role="dialog"],
.xb-v-modal {
  background: hsl(var(--popover) / 0.88) !important;
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--rhino-shadow-overlay) !important;
}

/* ---------- 10. 表头/行悬停：玻璃微光（颜色级，不动高度/内边距） ---------- */
body:has(aside) thead th,
.responsive-table.xb-orders-table thead th {
  background: hsl(var(--muted) / 0.4) !important;
}
body:has(aside) tbody tr:hover > td {
  background: hsl(var(--accent) / 0.3);
}

/* ---------- 11. 核对行状态色：沿用明度，仅微调进极光色域 ---------- */
tr.xb-order-reviewed--received > td { background: hsl(160 70% 45% / 0.12) !important; }
tr.xb-order-reviewed--not-received > td { background: hsl(0 78% 63% / 0.12) !important; }
/* 11.1 核对行悬停：ui-fixes.css 残留浅色主题亮底（rgb 217 250 236 / 253 227 227）
   特异性更高会反盖暗色，这里用 !important 压回深色微光，消除刺眼亮白 ---------- */
tr.xb-order-reviewed--received:hover > td { background: hsl(160 70% 45% / 0.22) !important; }
tr.xb-order-reviewed--not-received:hover > td { background: hsl(0 78% 63% / 0.22) !important; }

/* ---------- 12. 登录页：极光工作台入口 ---------- */
.rhino-login-header {
  background: hsl(var(--background) / 0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.rhino-login-form h1 {
  background: linear-gradient(95deg, #eef2fa 30%, #7deefb 70%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rhino-login-preview > div:last-child > .grid-cols-3 > div,
.rhino-login-preview > div:last-child > .rounded-lg {
  background: hsl(var(--card) / 0.5) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- 13. 选区与滚动条 ---------- */
::selection {
  background: rgb(67 224 242 / 0.26);
  color: #fff;
}
*::-webkit-scrollbar-thumb {
  background: var(--rhino-line-strong);
}
*::-webkit-scrollbar-thumb:hover {
  background: hsl(192 90% 56% / 0.45);
}

/* ---------- 14. 通道统计看板：浅色主题残留修复 ----------
   排名徽标（奶黄/灰白底）、今日金额列（薄荷绿底+暗绿字）均为浅色主题样式，
   在暗色主题下刺眼，统一压回深色微光 ---------- */
/* 14.1 排名徽标 */
.xb-channel-rank.xb-rank-1 {
  background: rgb(245 158 11 / 0.16) !important;
  color: #fbbf24 !important;
}
.xb-channel-rank.xb-rank-2 {
  background: rgb(148 163 184 / 0.14) !important;
  color: #cbd5e1 !important;
}
.xb-channel-rank.xb-rank-3 {
  background: rgb(180 83 9 / 0.20) !important;
  color: #e0a35c !important;
}
/* 14.2 今日金额列：薄荷绿底 + 暗绿字 → 深色底翡翠绿字
   （表头为内联 !important 样式，需更高特异性压回） */
th.xb-channel-today-head,
.xb-channel-board th.xb-channel-today-head {
  color: #34d399 !important;
}
td.xb-channel-money-today {
  background: rgb(16 185 129 / 0.10) !important;
  color: #34d399 !important;
}
/* 14.3 昨日金额列提亮一档，避免发灰 */
.xb-channel-board th.xb-channel-yesterday-head {
  color: rgba(240, 243, 249, 0.62) !important;
}
td.xb-channel-money-yesterday {
  color: rgba(240, 243, 249, 0.62) !important;
}