/* ============================================================================
 * Nimbus 色板 + 按钮体系（由 IDC 移植，PAY 浅色单主题）
 * 来源：
 *   idc/client/src/styles/palette.ts            色板（全站唯一配色源）
 *   idc/client/src/styles/main.css              玻璃按钮节 + .light-grad-btn
 *   idc/client/tailwind.config.js               圆角 scale
 *   idc/client/src/utils/randomLightGradient.ts 随机浅色算法（见 palette.js）
 * 只做换肤，不碰任何 JS 逻辑与接口字段。PAY 无深色模式，仅收录亮色分支。
 * ========================================================================== */

:root {
  /* ---- 中性灰阶 ---- */
  --neutral-50: #fafafa; --neutral-100: #f2f2f4; --neutral-200: #e6e6e9;
  --neutral-300: #d7d7dc; --neutral-400: #a3a3a8; --neutral-500: #737378;
  --neutral-600: #52525a; --neutral-700: #3a3a40; --neutral-800: #262629;
  --neutral-900: #151518; --neutral-950: #0a0a0a;
  /* ---- 靛蓝（主色） ---- */
  --indigo-50: #f0f1fb; --indigo-100: #e2e4f7; --indigo-200: #c9ccf0;
  --indigo-300: #a9ade6; --indigo-400: #868cdc; --indigo-500: #5e6ad2;
  --indigo-600: #4f5bc9; --indigo-700: #4149a8; --indigo-800: #373d85;
  --indigo-900: #31376b; --indigo-950: #1f2140;
  /* ---- 危险红（保留真红语义） ---- */
  --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca;
  --danger-300: #fca5a5; --danger-400: #f87171; --danger-500: #ef4444;
  --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b;
  --danger-900: #7f1d1d; --danger-950: #450a0a;
  /* ---- 灰阶 ---- */
  --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5;
  --gray-300: #d4d4d4; --gray-400: #a3a3a3; --gray-500: #737373;
  --gray-600: #525252; --gray-700: #404040; --gray-800: #262626;
  --gray-900: #171717; --gray-950: #0a0a0a;
  /* ---- 收敛中性（sakura/sky2 已灰化，保留别名兼容） ---- */
  --sakura-50: #fafafa; --sakura-100: #f2f2f4; --sakura-200: #e6e6e9;
  --sakura-300: #d7d7dc; --sakura-400: #a3a3a8; --sakura-500: #737378;
  --sakura-600: #52525a; --sakura-700: #3a3a40; --sakura-800: #262629;
  --sakura-900: #151518;
  --sky2-50: #fafafa; --sky2-100: #f2f2f4; --sky2-200: #e6e6e9;
  --sky2-300: #d7d7dc; --sky2-400: #a3a3a8; --sky2-500: #737378;
  --sky2-600: #52525a; --sky2-700: #3a3a40; --sky2-800: #262629;
  --sky2-900: #151518;
  /* ---- 冷 slate 点缀 ---- */
  --lavender-50: #f8fafc; --lavender-100: #f1f5f9; --lavender-200: #e2e8f0;
  --lavender-300: #cbd5e1; --lavender-400: #94a3b8; --lavender-500: #64748b;
  --lavender-600: #475569; --lavender-700: #334155; --lavender-800: #1e293b;
  --lavender-900: #0f172a;
  /* ---- 暖阳金 / 薄荷绿（点缀与成功语义） ---- */
  --sunny-50: #fff9eb; --sunny-100: #fff0c2; --sunny-200: #ffe08a;
  --sunny-300: #ffcd4d; --sunny-400: #ffb81f; --sunny-500: #f79f05;
  --sunny-600: #d67f02; --sunny-700: #a95f05; --sunny-800: #894b0d;
  --sunny-900: #723e10;
  --mint-50: #eafff6; --mint-100: #cbffe8; --mint-200: #99ffd4;
  --mint-300: #5cf5ba; --mint-400: #2be29e; --mint-500: #12c584;
  --mint-600: #08a06c; --mint-700: #0a7e58; --mint-800: #0c6448;
  --mint-900: #0d523c;
  /* ---- 状态色 ---- */
  --success: #16a34a; --warning: #d97706; --error: #dc2626;
  /* ---- 圆角 scale（对标 IDC tailwind.config.js） ---- */
  --radius: 6px; --radius-lg: 8px; --radius-xl: 10px;
  --radius-2xl: 12px; --radius-3xl: 16px;
}

/* ==========================================================================
 * 圆角 scale（覆盖 Tailwind CDN 默认值：rounded 4px→6px / xl 12px→10px /
 * 2xl 16px→12px / 3xl 24px→16px；lg 8px 本就一致，不动）
 * ========================================================================== */
.rounded { border-radius: 6px !important; }
.rounded-xl { border-radius: 10px !important; }
.rounded-2xl { border-radius: 12px !important; }
.rounded-3xl { border-radius: 16px !important; }

/* ==========================================================================
 * 按钮体系已收敛至 /static/css/pay-ui.css（.btn* 为兼容别名），此处不再重复定义
 * ========================================================================== */

/* ==========================================================================
 * 文字按钮随机淡色渐变（移植 IDC .light-grad-btn；
 * 背景由 palette.js 按按钮注入 --light-grad，淡底配深字）
 * ========================================================================== */
.light-grad-btn {
  background: var(--light-grad, linear-gradient(135deg, #c9dcff, #e4d4ff)) !important;
  border-color: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.light-grad-btn:hover {
  filter: brightness(0.95);
}
.light-grad-btn:active {
  filter: brightness(0.88);
}
.light-grad-btn:disabled,
.light-grad-btn.disabled {
  opacity: 0.5;
}
/* 商户端 Tailwind 工具类特异度高于单类，用 #app 提权（后加载，覆盖 idc-theme） */
#app .light-grad-btn {
  background: var(--light-grad, linear-gradient(135deg, #c9dcff, #e4d4ff)) !important;
  border-color: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
}
#app .light-grad-btn:hover {
  filter: brightness(0.95) !important;
}

/* ---------- 危险兜底：即使被加上 .light-grad-btn 也强制回红色 ---------- */
.btn-danger.light-grad-btn,
#app .btn-danger.light-grad-btn,
#app .bg-red-500.light-grad-btn {
  background: linear-gradient(145deg, rgba(229, 72, 77, 0.16), rgba(229, 72, 77, 0.05)) !important;
  border-color: rgba(229, 72, 77, 0.34) !important;
  color: #c63b40 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -10px 20px rgba(229, 72, 77, 0.10) !important;
}

/* ==========================================================================
 * 侧栏菜单图标彩色渐变（对标 IDC SideNav 图标渐变；PAY 为 RemixIcon 字体，
 * 用文字渐变实现；每项配色由 palette.js 写入 --pay-nav-c1/c2）
 * ========================================================================== */
.sidebar .menu-item .menu-icon i,
#app div.fixed nav a i {
  display: inline-block !important;
  background-image: linear-gradient(135deg, var(--pay-nav-c1, #5e6ad2), var(--pay-nav-c2, #8b5cf6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  opacity: 1 !important;
}

/* 菜单文字与图标同组渐变（对标 IDC .nimbus-nav-label；每项配色同取 --pay-nav-c1/c2） */
.sidebar .menu-item > span[data-i18n],
#app div.fixed nav a > span[data-i18n] {
  background-image: linear-gradient(135deg, var(--pay-nav-c1, #5e6ad2), var(--pay-nav-c2, #8b5cf6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* ==========================================================================
 * 侧栏图标与文字纵向对齐（RemixIcon 字形默认行高会撑高盒子导致错位：
 * 图标行高锁 1，管理端图标 wrapper 用 inline-flex 居中）
 * ========================================================================== */
.sidebar .menu-item .menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.sidebar .menu-item .menu-icon i,
#app div.fixed nav a i {
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ==========================================================================
 * 顶栏刷新按钮（对标 IDC kawaii-topbar-refresh：32px 图标钮 + 转圈中状态）
 * ========================================================================== */
.topbar-refresh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #525a68 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.topbar-refresh-btn:hover {
  color: #0b0e14 !important;
  background: rgba(94, 106, 210, 0.10) !important;
}
.topbar-refresh-btn.topbar-refreshing {
  pointer-events: none !important;
  opacity: 0.7 !important;
}
.topbar-refresh-btn.topbar-refreshing i,
.topbar-refresh-btn.topbar-refreshing svg {
  display: inline-block;
  animation: topbar-refresh-spin 0.9s linear infinite;
}
@keyframes topbar-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .topbar-refresh-btn.topbar-refreshing i,
  .topbar-refresh-btn.topbar-refreshing svg { animation: none !important; }
}

/* ==========================================================================
 * 顶栏全局搜索（对标 IDC GlobalSearch：输入框 + 分组下拉）
 * ========================================================================== */
.topbar-search { position: relative; }
.topbar-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa1ad; font-size: 16px; pointer-events: none; }
.topbar-search input { height: 32px; width: 128px; padding: 6px 16px 6px 36px; border-radius: 12px; border: 1px solid #e9ebf0; background: #f7f8fa; font-size: 14px; color: #0b0e14; outline: none; }
@media (min-width: 640px) { .topbar-search input { width: 192px; } }
@media (min-width: 1024px) { .topbar-search input { width: 288px; } }
.topbar-search input:focus { border-color: #667eea; background: #fff; box-shadow: 0 0 0 3px rgba(94,106,210,0.18); }
.topbar-search input::placeholder { color: #9ca3af; }
.topbar-search-results { position: absolute; top: 38px; left: 0; width: 320px; max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid #e9ebf0; border-radius: 10px; box-shadow: 0 8px 30px rgba(16,24,40,0.14); z-index: 100; padding: 6px; }
.topbar-search-group { font-size: 11px; color: #9aa1ad; padding: 6px 10px 2px; }
.topbar-search-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.topbar-search-item:hover, .topbar-search-item.is-active { background: rgba(94,106,210,0.09); }
.topbar-search-item small { color: #9aa1ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search-empty { padding: 12px; text-align: center; font-size: 13px; color: #9aa1ad; }
html.dark .topbar-search input { background: #131417; border-color: #1e222b; color: #e6e8ec; }
html.dark .topbar-search-results { background: #131417; border-color: #1e222b; }
html.dark .topbar-search-item:hover { background: rgba(94,106,210,0.18); }

/* ==========================================================================
 * 品牌标识（对标 IDC BrandLogo：32px 圆角方块 + 白色服务栈图标；
 * 底色每次随机，palette.js paintBrandMarks 写入）
 * ========================================================================== */
.pay-brand-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #5e6ad2, #8b5cf6) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 10px -2px rgba(94, 106, 210, 0.34) !important;
}
.pay-brand-mark svg {
  width: 20px !important;
  height: 20px !important;
}
/* 自定义图标：图片盖满圆角方块 */
.pay-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}
/* 品牌栏横排：标识 + 名称（覆盖旧纵排） */
.sidebar-header {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
#app div.msidebar > div:first-child {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ==========================================================================
 * 拨动开关（对标 IDC AppSwitch.vue：44×22 胶囊 + 18px 白钮）
 * ========================================================================== */
.pay-switch {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 44px !important;
  height: 22px !important;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: 100px !important;
  border: none !important;
  outline: none;
  padding: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: rgba(0, 0, 0, 0.2) !important;
}
html.dark .pay-switch--off {
  background-color: rgba(255, 255, 255, 0.25) !important;
}
.pay-switch--on {
  background-color: #5e6ad2 !important;
}
html.dark .pay-switch--on {
  background-color: #8b8ff5 !important;
}
.pay-switch:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5e6ad2 !important;
}
.pay-switch__handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgb(0 35 11 / 0.2);
  transition: left 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  display: block !important;
}
.pay-switch--on .pay-switch__handle {
  left: 24px;
}
@media (prefers-reduced-motion: reduce) {
  .pay-switch__handle {
    transition: none;
  }
}

/* ==========================================================================
 * 标题信息钮（对标 IDC InfoButton：标题旁 ? 图标，悬停弹规则说明）
 * ========================================================================== */
.pay-info-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  color: #868e9c !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: help;
}
.pay-info-btn:hover,
.pay-info-btn:focus-within {
  color: #5e6ad2 !important;
}
/* RemixIcon 字形框内偏下，整体上提 1px 与标题光学对齐 */
.pay-info-btn > i {
  transform: translateY(-1px);
}
.pay-info-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 300px;
  padding: 10px 12px;
  background: #ffffff !important;
  border: 1px solid #e9ebf0 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 46px rgb(17 17 26 / 0.18) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #0b0e14 !important;
  text-align: left !important;
  white-space: normal !important;
  z-index: 1300 !important;
}
.pay-info-btn:hover .pay-info-tip,
.pay-info-btn:focus-within .pay-info-tip,
.pay-info-btn.open .pay-info-tip {
  display: block;
}
/* 隐形桥：图标与面板之间的 8px 缝，鼠标移入面板不断开 */
.pay-info-tip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.pay-info-tip ul {
  margin: 0 !important;
  padding-left: 16px !important;
  list-style: disc !important;
}
.pay-info-tip li {
  margin: 2px 0 !important;
}
html.dark .pay-info-btn {
  color: #6b7280 !important;
}
html.dark .pay-info-btn:hover,
html.dark .pay-info-btn:focus-within {
  color: #8b8ff5 !important;
}
html.dark .pay-info-tip {
  background: #131417 !important;
  border-color: #1e222b !important;
  color: #eef1f6 !important;
}

/* ==========================================================================
 * 按钮内容居中（图标与文字纵向对齐，+w-full 按钮文字水平居中）
 * ========================================================================== */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
#app div.mcontent button {
  align-items: center !important;
}
#app div.mcontent button:not(.pay-topbar-btn) {
  display: inline-flex !important;
  justify-content: center !important;
  gap: 4px !important;
}
#app div.mcontent button i {
  line-height: 1 !important;
}

/* ==========================================================================
 * 弹窗 IDC 化（对标 IDC modal：轻遮罩 .2 / 8px 面板 / 发丝边 / 大阴影 /
 * 标题头底边 / 标题 -0.02em / 关闭钮悬停底；内容区定位保留）
 * ========================================================================== */
body .modal {
  background: rgba(0, 0, 0, 0.2) !important;
}
#app div.fixed.inset-0 {
  background: rgba(0, 0, 0, 0.2) !important;
}
.modal-content,
#app div.fixed.inset-0 > div.bg-white {
  border-radius: 8px !important;
  border: 1px solid #e9ebf0 !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}
html.dark .modal-content,
html.dark #app div.fixed.inset-0 > div.bg-white {
  border-color: #1e222b !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
}
.modal-header {
  border-bottom: 1px solid #e9ebf0 !important;
  padding-bottom: 12px !important;
}
html.dark .modal-header {
  border-bottom-color: #1e222b !important;
}
#modalTitle,
#app div.fixed.inset-0 h3 {
  letter-spacing: -0.02em !important;
}
.modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
}
.modal-close:hover {
  background: rgba(94, 106, 210, 0.1) !important;
  color: #0b0e14 !important;
}
html.dark .modal-close:hover {
  background: rgba(139, 143, 245, 0.14) !important;
  color: #eef1f6 !important;
}

/* 双列时间格：本地左 + UTC 右并排 */
.pay-time-cell {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
/* 双行时间格里的 UTC 小字 */
.utc-sub {
  font-size: 11px !important;
  color: #868e9c !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
html.dark .utc-sub {
  color: #6b7280 !important;
}

/* 顶栏语言按钮只留图标：32px 方钮（与刷新/齿轮钮同高，名称悬停提示） */
.header .lang-btn,
#app div.mcontent .lang-btn {
  padding: 6px 8px !important;
  gap: 0 !important;
  height: 32px !important;
  min-width: 32px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
 * 深色主题（对标 IDC kawaii-cloud.css .dark token；PAY 仅黑白两档）
 * ========================================================================== */
html.dark {
  color-scheme: dark;
  --nimbus-bg: #08090a;
  --nimbus-surface: #131417;
  --nimbus-soft: #17181b;
  --nimbus-line: #1e222b;
  --nimbus-text: #eef1f6;
  --nimbus-muted: #98a1b0;
  --nimbus-primary: #8b8ff5;
  --nimbus-primary-strong: #a3a6f8;
}
html.dark body,
html.dark body.bg-gray-100 {
  background: #08090a !important;
  background-image: none !important;
  color: #eef1f6 !important;
}
/* 侧栏 */
html.dark .sidebar,
html.dark #app div.msidebar {
  background: #131417 !important;
  background-image: none !important;
  border-right-color: #1e222b !important;
}
html.dark .sidebar-header,
html.dark #app div.msidebar > div:first-child {
  background: #131417 !important;
  border-bottom-color: #1e222b !important;
}
html.dark .sidebar-header h2,
html.dark #app div.msidebar h1 {
  color: #eef1f6 !important;
}
html.dark .menu-item,
html.dark #app div.msidebar nav a {
  color: #98a1b0 !important;
}
html.dark .menu-item:hover,
html.dark #app div.msidebar nav a:hover {
  background: rgba(139, 143, 245, 0.12) !important;
  color: #eef1f6 !important;
}
html.dark .menu-item.active,
html.dark #app div.msidebar nav a.mnav-active {
  background: rgba(139, 143, 245, 0.18) !important;
  color: #eef1f6 !important;
}
/* 顶栏 */
html.dark .header,
html.dark #app div.mcontent > div.mtopbar {
  background: rgba(19, 20, 23, 0.72) !important;
  border-bottom-color: #1e222b !important;
}
html.dark .header h1,
html.dark #merchantPageTitle {
  color: #eef1f6 !important;
}
html.dark .logout-btn,
html.dark #app div.mcontent > div.mtopbar .pay-topbar-btn {
  background: #17181b !important;
  border-color: #2a303b !important;
  color: #eef1f6 !important;
}
html.dark .topbar-refresh-btn {
  color: #98a1b0 !important;
}
html.dark .topbar-refresh-btn:hover {
  color: #eef1f6 !important;
  background: rgba(139, 143, 245, 0.14) !important;
}
html.dark .lang-btn {
  background: #17181b !important;
  border-color: #2a303b !important;
  color: #eef1f6 !important;
}
html.dark .lang-menu {
  background: #131417 !important;
  border: 1px solid #1e222b !important;
}
html.dark .lang-option {
  color: #eef1f6 !important;
}
html.dark .lang-option:hover {
  background: #1e222b !important;
}
/* 卡片 */
html.dark .card,
html.dark .stat-card,
html.dark #app .bg-white.rounded-lg.shadow,
html.dark #app .bg-white.rounded-lg.shadow-lg,
html.dark #app .bg-white.p-6.rounded-lg.shadow {
  background: #131417 !important;
  border-color: #1e222b !important;
}
html.dark .card-header {
  border-bottom-color: #1e222b !important;
}
html.dark .card-header h2,
html.dark .stat-card .value,
html.dark #app .text-3xl {
  color: #eef1f6 !important;
}
html.dark .stat-card h3,
html.dark .stat-card .sub {
  color: #98a1b0 !important;
}
/* 表格 */
html.dark th {
  background: #17181b !important;
  color: #98a1b0 !important;
}
html.dark td,
html.dark .card-body td,
html.dark #app td {
  color: #eef1f6 !important;
}
html.dark th,
html.dark td {
  border-bottom-color: #1e222b !important;
}
/* 表单 */
html.dark .form-group input,
html.dark .form-group select,
html.dark .filter-bar input,
html.dark .filter-bar select,
html.dark #app input,
html.dark #app select,
html.dark #app textarea {
  background: #17181b !important;
  border-color: #2a303b !important;
  color: #eef1f6 !important;
}
/* 弹窗 */
html.dark .modal-content {
  background: #131417 !important;
  border-color: #1e222b !important;
}
html.dark .modal-close {
  color: #98a1b0 !important;
}
/* 登录卡 */
html.dark .login-box,
html.dark #merchantLoginBox {
  background: rgba(19, 20, 23, 0.92) !important;
  border-color: #2a303b !important;
}
/* 商户端 Tailwind 通用面 */
html.dark #app .bg-white {
  background-color: #131417 !important;
}
html.dark #app .bg-gray-50 {
  background-color: #17181b !important;
}
html.dark #app .bg-gray-100 {
  background-color: #17181b !important;
}
html.dark #app .text-gray-900,
html.dark #app .text-gray-800,
html.dark #app .text-gray-700,
html.dark #app .text-gray-800.font-mono {
  color: #eef1f6 !important;
}
html.dark #app .text-gray-600,
html.dark #app .text-gray-500,
html.dark #app .text-gray-400 {
  color: #98a1b0 !important;
}
html.dark #app .border,
html.dark #app .border-gray-200,
html.dark #app thead.bg-gray-50 {
  border-color: #1e222b !important;
}
html.dark #app .divide-gray-200 > * {
  border-color: #1e222b !important;
}

/* ==========================================================================
 * 顶栏按钮：上彩 + em 制尺寸（随字体缩放，14px 基准约 32px 高）
 * ========================================================================== */
.header .topbar-refresh-btn,
.header .logout-btn,
.header .lang-btn,
#app div.mcontent > div.mtopbar .topbar-refresh-btn,
#app div.mcontent > div.mtopbar .pay-topbar-btn,
.header .logout-btn,
#app div.mcontent > div.mtopbar .pay-topbar-btn,
html.dark .header .logout-btn,
html.dark #app div.mcontent > div.mtopbar .pay-topbar-btn,
#app div.mcontent > div.mtopbar .lang-btn {
  font-size: 14px !important;
  height: 2.3em !important;
  min-width: 2.3em !important;
  padding: 0 0.6em !important;
  gap: 0.35em !important;
  border-radius: 0.6em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.header .topbar-refresh-btn i,
.header .logout-btn i,
.header .lang-btn i,
#app div.mcontent > div.mtopbar .topbar-refresh-btn i,
#app div.mcontent > div.mtopbar .pay-topbar-btn i,
#app div.mcontent > div.mtopbar .lang-btn i {
  font-size: 1.4em !important;
  line-height: 1 !important;
}
/* 顶栏图标钮去底：透明无边，悬停只提图标亮度（无底） */
.header .topbar-refresh-btn,
.header .lang-btn,
#app div.mcontent > div.mtopbar .topbar-refresh-btn,
.header .logout-btn,
#app div.mcontent > div.mtopbar .pay-topbar-btn,
html.dark .header .logout-btn,
html.dark #app div.mcontent > div.mtopbar .pay-topbar-btn,
#app div.mcontent > div.mtopbar .lang-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.header .topbar-refresh-btn:hover,
.header .lang-btn:hover,
#app div.mcontent > div.mtopbar .topbar-refresh-btn:hover,
.header .logout-btn:hover,
#app div.mcontent > div.mtopbar .pay-topbar-btn:hover,
html.dark .header .logout-btn:hover,
html.dark #app div.mcontent > div.mtopbar .pay-topbar-btn:hover,
#app div.mcontent > div.mtopbar .lang-btn:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.header .topbar-refresh-btn:hover i,
.header .lang-btn:hover i,
#app div.mcontent > div.mtopbar .topbar-refresh-btn:hover i,
.header .logout-btn:hover i,
#app div.mcontent > div.mtopbar .pay-topbar-btn:hover i,
#app div.mcontent > div.mtopbar .lang-btn:hover i {
  filter: brightness(1.2) !important;
}
/* 顶栏图标彩色（每钮配色见 --tb-c1/c2，palette.js 分配） */
.header .topbar-refresh-btn i,
.header .logout-btn i,
.header .lang-btn i,
.header .lang-btn .lang-icon,
#app div.mcontent > div.mtopbar .topbar-refresh-btn i,
#app div.mcontent > div.mtopbar .pay-topbar-btn i,
#app div.mcontent > div.mtopbar .lang-btn i,
#app div.mcontent > div.mtopbar .lang-btn .lang-icon {
  background-image: linear-gradient(135deg, var(--tb-c1, #5e6ad2), var(--tb-c2, #8b5cf6)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}