/* ============================================================================
 * IDC 风格主题，给 pay 管理端/商户端共用。
 * 上方为历史 kawaii 渐变皮肤（粉靛渐变/玻璃拟态），已由下方"Nimbus 对齐"段
 * 整体覆盖并锁定为 IDC 现行扁平样式（底 #fbfbfc / 面 #fff / 线 #e9ebf0 /
 * 主 #5e6ad2 / 侧栏150px / 顶栏h-14）。
 * 只做“换肤”，不碰任何 JS 逻辑与接口字段；覆盖全部用更高特异度 + 少量
 * !important（merchant 用 Tailwind CDN，工具类必须压住）。
 * ========================================================================== */

:root {
  --idc-indigo: #5e6ad2;
  --idc-indigo-strong: #4f5bc9;
  --idc-violet: #8b5cf6;
  --idc-pink: #ec4899;
  --idc-cyan: #06b6d4;
  --idc-ink: #23233a;
  --idc-muted: #6b7194;
  --idc-card: rgba(255, 255, 255, 0.86);
  --idc-line: rgba(94, 106, 210, 0.14);
  --idc-grad-brand: linear-gradient(135deg, #5e6ad2 0%, #8b5cf6 52%, #ec4899 100%);
  --idc-grad-soft: linear-gradient(135deg, rgba(94, 106, 210, 0.16), rgba(236, 72, 153, 0.12));
  --idc-shadow-card: 0 10px 30px rgba(35, 35, 90, 0.08);
}

/* ---------- 页面底（两端通用） ---------- */
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(139, 92, 246, 0.16), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(236, 72, 153, 0.14), transparent 28%),
    radial-gradient(circle at 50% 110%, rgba(6, 182, 212, 0.12), transparent 34%),
    linear-gradient(180deg, #f6f7fc 0%, #eef0f9 100%) !important;
  background-attachment: fixed;
  color: var(--idc-ink);
}
body.bg-gray-100 { background-color: transparent !important; }

/* ---------- 全站文字色统一（两端通用） ----------
 * 管理端写死 #333/#666，商户端用灰阶工具类，全部收敛到墨色/雾灰。
 * 彩色语义类（红蓝绿黄紫徽章/按钮）不在此列，保持原样。 */
.header h1,
.card-header h2,
.card-body td,
.stat-card .value,
#app .text-gray-900,
#app .text-gray-800,
#app .text-gray-700 {
  color: var(--idc-ink) !important;
}
.stat-card h3,
.stat-card .sub,
th,
.form-group label,
#app .text-gray-600,
#app .text-gray-500,
#app .text-gray-400 {
  color: var(--nimbus-text) !important;
}
#app input,
#app select,
#app textarea,
.form-group input,
.form-group select {
  color: var(--idc-ink);
}

/* ==========================================================================
 * 管理端（手写类：.sidebar / .menu-item / .header / .card / .stat-card）
 * ========================================================================== */

.sidebar {
  background: linear-gradient(180deg, #4c1d95 0%, #5e6ad2 46%, #8b5cf6 74%, #ec4899 130%) !important;
  box-shadow: 12px 0 34px rgba(35, 35, 90, 0.22);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important; }
.sidebar-header h2 {
  background: linear-gradient(90deg, #fff, #fbcfe8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.menu-item {
  margin: 2px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78) !important;
}
.menu-item:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.menu-item.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 207, 232, 0.9)) !important;
  color: var(--idc-indigo-strong) !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.main-content { background: transparent; }

/* 顶栏：粘性玻璃条 */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--idc-line);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: var(--idc-shadow-card);
}
.header h1 {
  background: var(--idc-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800;
}

/* 卡片：玻璃 + 渐变顶线 */
.card, .stat-card {
  background: var(--idc-card) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--idc-line);
  box-shadow: var(--idc-shadow-card);
}
.stats-grid .stat-card { position: relative; overflow: hidden; }
.stats-grid .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--idc-grad-brand);
}
.stats-grid .stat-card:nth-child(2)::before { background: linear-gradient(135deg, #06b6d4, #5e6ad2); }
.stats-grid .stat-card:nth-child(3)::before { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.stats-grid .stat-card:nth-child(4)::before { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.stat-card .value {
  background: var(--idc-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* 登录页 */
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(139, 92, 246, 0.28), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(236, 72, 153, 0.24), transparent 30%),
    linear-gradient(135deg, #312e81 0%, #5e6ad2 55%, #a855f7 100%) !important;
}
.login-box {
  width: 480px;
  max-width: calc(100vw - 2rem);
  padding: 32px;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(20, 10, 60, 0.35) !important;
}
.login-box h1 { text-align: center; }
.form-group { margin-bottom: 20px; }
.form-group input { width: 100%; }
/* 表单字体继承正文（管理端无 Tailwind preflight，不声明则回落浏览器默认字体，与商户端不一致） */
.login-box input, .login-box button { font-family: inherit; }
.login-btn { width: 100%; color: #fff; cursor: pointer; }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
 * 商户端（Tailwind 工具类：作用域覆盖）
 * ========================================================================== */

/* 右侧内容区透明，露出渐变底 */
#app div.mcontent { background: transparent; }

/* 顶部菜单：玻璃条 */
#app div.mcontent div.mtopbar {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--idc-line);
  box-shadow: 0 10px 30px rgba(35, 35, 90, 0.06);
}

/* 内容卡片换肤 */
#app .bg-white.shadow.rounded-lg,
#app .bg-white.rounded-lg.shadow {
  background: var(--idc-card) !important;
  border: 1px solid var(--idc-line);
}

/* 商户登录卡（与 .login-box 同构：玻璃卡 + 圆角 + 阴影完全一致） */
#merchantLoginBox {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(20, 10, 60, 0.35) !important;
}
#app div.min-h-screen.flex.items-center.justify-center {
  background:
    radial-gradient(circle at 18% 20%, rgba(139, 92, 246, 0.28), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(236, 72, 153, 0.24), transparent 30%),
    linear-gradient(135deg, #312e81 0%, #5e6ad2 55%, #a855f7 100%);
}

/* ==========================================================================
 * 登录窗对齐 IDC（两端通用：渐变底 + 玻璃卡 + 品牌锁头 + 胶囊输入 + 渐变按钮）
 * 只做换肤，不碰模板与 JS。
 * ========================================================================== */

/* 全站字体对齐 V2Board 用户端（Inter 优先，无中文声明，中文走 sans-serif 系统默认） */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
  font-size: 14px;
}

/* 品牌锁头：渐变磁贴 + 首字母（管理端 h1 / 商户端 h1 通吃） */
.login-box h1,
#merchantLoginBox h1 {
  background: linear-gradient(90deg, #4f5bc9, #8b5cf6 55%, #ec4899) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-size: 24px !important;
  margin-bottom: 24px !important;
}
/* 品牌磁贴：支付卡 SVG（模板内联 .pay-brand-tile，渐变底 + 白色描边卡） */
.pay-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 2px auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5e6ad2 0%, #8b5cf6 52%, #ec4899 100%);
  box-shadow: 0 12px 28px rgba(94, 106, 210, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pay-brand-tile svg {
  width: 46px;
  height: 46px;
}

/* 输入框：胶囊灰底 + 聚焦白底紫环 */
.login-box .form-group label,
#merchantLoginBox label {
  color: var(--idc-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.login-box .form-group input,
#merchantLoginBox input {
  display: block;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: #eef0f8 !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  height: 46px !important;
  line-height: 20px !important;
  width: 100%;
  box-sizing: border-box !important;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.login-box .form-group input:focus,
#merchantLoginBox input:focus {
  background: #fff !important;
  border-color: var(--idc-indigo) !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18) !important;
}
/* 框内提示字统一雾灰（两端 placeholder 基准不同：商户被 Tailwind 预置） */
.login-box .form-group input::placeholder,
#merchantLoginBox input::placeholder {
  color: var(--idc-muted) !important;
  opacity: 1 !important;
}

/* 登录按钮：品牌渐变 + 阴影 + 悬浮上浮 */
.login-box .login-btn,
#merchantLoginBox button[type='submit'] {
  background: linear-gradient(135deg, #5e6ad2 0%, #8b5cf6 52%, #ec4899 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px rgba(94, 106, 210, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.login-box .login-btn:hover,
#merchantLoginBox button[type='submit']:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(94, 106, 210, 0.46) !important;
}
.login-box .login-btn:active,
#merchantLoginBox button[type='submit']:active {
  transform: translateY(0);
}

/* 登录卡保持纯净玻璃卡：四边统一 1px 半透明描边，无顶部 accent 线 */

/* 登录两端同构：行高归一（压掉 Tailwind preflight 的 1.5），表单行距与管理端一致 */
.login-box,
#merchantLoginBox {
  line-height: normal;
}
#merchantLoginBox h1 {
  line-height: normal;
}
#merchantLoginBox form > div {
  margin-bottom: 20px !important;
}
/* 登录卡语言选择只留图标（名称隐藏，下拉菜单保留） */.login-box .lang-current,
#merchantLoginBox .lang-current {
  display: none !important;
}
/* 名称藏后按钮收成图标方钮（原 8px 12px 是按图文留的；锁死 30px 高，两端一致） */
.login-box .lang-btn,
#merchantLoginBox .lang-btn {
  padding: 6px 8px !important;
  gap: 0 !important;
  height: 30px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
 * 顶栏对标 IDC（通栏齐边）：56px 高粘顶、左右 16px（≥768px 为 24px）、
 * 标题 14px/600、36px 图标触击区、底部发丝线 + 毛玻璃。无圆角无悬浮。
 * ========================================================================== */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: none !important;
  border-bottom: 1px solid var(--idc-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(17, 17, 26, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
/* 管理端顶栏破框通栏（.main-content 自带 20px 内边距） */
.header {
  margin: -20px -20px 20px !important;
}
@media (min-width: 768px) {
  .header,
  #app div.mcontent > div.mtopbar {
    padding: 0 24px !important;
  }
}
.header h1,
#merchantPageTitle {
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  color: var(--idc-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 商户顶栏 fixed 锁死（祖先 overflow-auto 吃 sticky，改 fixed + 内容区垫 56px） */
#app div.mcontent > div.mtopbar {
  position: fixed !important;
  top: 0 !important;
  left: 150px !important;
  right: 0 !important;
  width: auto !important;
  z-index: 30 !important;
}
#app div.mcontent {
  padding-top: 56px !important;
}
/* 顶栏右侧动作区：图标触击 36px（p-1.5 + 20px 图标），悬停浅灰 */
.header > div:last-child,
#app div.mcontent > div.mtopbar > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* 顶栏退出统一深色胶囊钮 */
.logout-btn,
#app div.mcontent > div.mtopbar .pay-topbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #17171c !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.logout-btn:hover,
#app div.mcontent > div.mtopbar .pay-topbar-btn:hover {
  filter: brightness(1.25);
}

/* ==========================================================================
 * 侧栏统一 150px 对标 IDC（两端一致）
 * ========================================================================== */
#app div.msidebar {
  width: 150px !important;
}
#app div.mcontent {
  margin-left: 150px !important;
}
#app div.mcontent > div.mtopbar {
  left: 150px !important;
}

/* ==========================================================================
 * 字阶统一（两端一致）：页标题 20 / 卡头 16 / 正文 14 / 小字 12 / 统计数 28
 * （登录 h1 保持 24，图标类 text-2xl 不动）
 * ========================================================================== */
#app div.mcontent h2.text-2xl {
  font-size: 20px !important;
  line-height: 1.4 !important;
}
#app div.mcontent h3.text-lg {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
#app .text-3xl {
  font-size: 24px !important;
  line-height: 1.25 !important;
}

/* ==========================================================================
 * 两端细节统一：侧栏品牌/图标、卡片圆角、按钮圆角、筛选框圆角
 * ========================================================================== */
/* 商户品牌字与管理端一致：20px/800 渐变字 */
#app div.msidebar h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #fff, #fbcfe8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
/* 商户菜单图标 16px（管理端 .menu-icon 同尺寸） */
#app div.msidebar nav a i {
  font-size: 16px !important;
}
/* 卡片圆角统一 12px（管理端 .card 同值） */
#app .bg-white.rounded-lg.shadow,
#app .bg-white.rounded-lg.shadow-lg {
  border-radius: 12px !important;
}
/* 按钮圆角由 pay-ui.css 统一，此处不再重复定义 */
/* 筛选框圆角统一 8px */
.filter-bar input,
.filter-bar select {
  border-radius: 8px !important;
}
/* 筛选行按钮统一胶囊 */
.filter-bar button {
  border-radius: 999px !important;
}
.filter-bar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
/* 筛选行统一：输入/下拉/按钮/页签同高 36px、垂直居中（顶栏对齐） */
.filter-bar .pay-input {
  height: 36px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}
.filter-bar .pay-btn,
.filter-bar button[type="button"],
.card-header .pay-btn,
.card-header button[type="button"] {
  height: 36px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 商户菜单内边距与管理端 .menu-item 对齐（12px 20px） */
#app div.msidebar nav a {
  padding: 12px 20px !important;
}
/* 管理顶栏破框通栏（.main-content 自带 20px 内边距，顶栏要齐边） */
.main-content > .header {
  margin: -20px -20px 20px !important;
}

/* ==========================================================================
 * 字阶对标 IDC：正文 14 / 次级 12 / 页标题 18→20 / 弹窗标题 14→16 /
 * 表头 12 / 表格 14 / 统计数 24 / 顶栏标题 14
 * ========================================================================== */
#app th {
  font-size: 12px !important;
}
#modalTitle,
#app h3.text-xl {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
 * Nimbus 对齐（对标 IDC 现行扁平单色，两端一致；本节置末，覆盖上方旧渐变）
 * 标记：bg #fbfbfc / 面 #fff / 线 #e9ebf0 / 墨 #0b0e14 / 雾 #525a68 /
 * 主 #5e6ad2 / 主深 #4f5bc9；侧栏 150px 平底 / 品牌 h-14 / 菜单 38px /
 * 顶栏 h-14 / 工作区 px-4 md:px-6 py-5 md:py-6 / 卡片扁平 / 主钮扁平。
 * ========================================================================== */
:root {
  --nimbus-bg: #fbfbfc;
  --nimbus-surface: #ffffff;
  --nimbus-soft: #f4f5f7;
  --nimbus-line: #e9ebf0;
  --nimbus-text: #0b0e14;
  --nimbus-muted: #525a68;
  --nimbus-primary: #5e6ad2;
  --nimbus-primary-strong: #4f5bc9;
  --nimbus-shadow: 0 0 0 1px rgb(17 17 26 / 0.04), 0 1px 2px rgb(17 17 26 / 0.04), 0 8px 24px -14px rgb(17 17 26 / 0.12);
}

/* 页面底：扁平（去渐变径向） */
body,
body.bg-gray-100 {
  background: var(--nimbus-bg) !important;
  background-image: none !important;
  color: var(--nimbus-text) !important;
}

/* ---------- 侧栏：150px 扁平面 + 发丝线（两端） ---------- */
.sidebar,
#app div.msidebar,
#app div.msidebar {
  background: var(--nimbus-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-right: 1px solid var(--nimbus-line) !important;
  width: 150px !important;
}
/* 品牌栏：h-14 / 14px-600 墨色（去渐变字） */
.sidebar-header,
#app div.msidebar > div:first-child {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-bottom: 1px solid var(--nimbus-line) !important;
  background: var(--nimbus-surface) !important;
}
.sidebar-header h2,
#app div.msidebar h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--nimbus-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#app div.msidebar p {
  display: none !important;
}
/* 菜单容器 */
.sidebar-menu,
#app div.msidebar nav {
  padding: 10px 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
/* 菜单项：38px / 8px 10px / 8px 圆角 / 14px-700 雾灰（两端） */
.menu-item,
#app div.msidebar nav a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--nimbus-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.menu-item:hover,
#app div.msidebar nav a:hover {
  background: rgba(94, 106, 210, 0.09) !important;
  color: var(--nimbus-text) !important;
}
.menu-item.active,
#app div.msidebar nav a.mnav-active {
  background: rgba(94, 106, 210, 0.15) !important;
  color: var(--nimbus-text) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
/* 激活指示条：左 3px 主色 */
.menu-item.active::before,
#app div.msidebar nav a.mnav-active::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 50% !important;
  width: 3px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  border-radius: 3px !important;
  background: var(--nimbus-primary) !important;
}
.menu-icon,
#app div.msidebar nav a i {
  width: 17px !important;
  height: 17px !important;
  margin-right: 0 !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
}
.menu-item.active .menu-icon,
#app div.msidebar nav a.mnav-active i {
  color: var(--nimbus-primary) !important;
  opacity: 1 !important;
}

/* ---------- 顶栏：h-14 扁平（去圆角/渐变字/黑胶囊） ---------- */
.header,
#app div.mcontent > div.mtopbar {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  border: none !important;
  border-bottom: 1px solid var(--nimbus-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .header,
  #app div.mcontent > div.mtopbar {
    padding: 0 24px !important;
  }
}
.header h1,
#merchantPageTitle {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--nimbus-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* 顶栏图标钮 32px；退出改为中性描边钮（两端） */
.header .kawaii-header-icon,
#app div.mcontent > div.mtopbar .kawaii-header-icon {
  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;
  color: var(--nimbus-muted) !important;
}
.logout-btn,
#app div.mcontent > div.mtopbar .pay-topbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: var(--nimbus-surface) !important;
  color: var(--nimbus-text) !important;
  border: 1px solid var(--nimbus-line) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.logout-btn:hover,
#app div.mcontent > div.mtopbar .pay-topbar-btn:hover {
  filter: none !important;
  background: var(--nimbus-soft) !important;
}
/* 商户顶栏 fixed 清理：只保留 150px 一处 */
#app div.mcontent > div.mtopbar {
  position: fixed !important;
  top: 0 !important;
  left: 150px !important;
  right: 0 !important;
}

/* ---------- 工作区：px-4 md:px-6 py-5 md:py-6 ---------- */
.main-content {
  background: transparent !important;
  margin-left: 150px !important;
  padding: 20px 16px !important;
}
@media (min-width: 768px) {
  .main-content {
    padding: 24px 24px !important;
  }
}
#app div.mcontent {
  background: transparent !important;
  margin-left: 150px !important;
}

/* ---------- 卡片/统计：扁平（去玻璃/渐变顶线/渐变数字） ---------- */
.card,
.stat-card,
#app .bg-white.rounded-lg.shadow,
#app .bg-white.rounded-lg.shadow-lg,
#app .bg-white.p-6.rounded-lg.shadow {
  background: var(--nimbus-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--nimbus-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--nimbus-shadow) !important;
}
.stats-grid .stat-card::before {
  display: none !important;
}
.stat-card .value,
#app .text-3xl {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--nimbus-text) !important;
}
.card-header {
  border-bottom: 1px solid var(--nimbus-line) !important;
}
.card-header h2 {
  color: var(--nimbus-text) !important;
}

/* ---------- 表格：表头 12 雾灰 / 正文 14 墨 ---------- */
th {
  background: var(--nimbus-soft) !important;
  color: var(--nimbus-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
td,
.card-body td,
#app td {
  color: var(--nimbus-text) !important;
  font-size: 14px !important;
}
th,
td {
  border-bottom: 1px solid var(--nimbus-line) !important;
}

/* ---------- 数据表：内容自适应列宽 + 单行省略（宽列不换行、窄列不留白，超长320px截断，横向滚动兜底，移动端转卡片） ---------- */
.pay-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
}
.pay-table-responsive {
  overflow-x: auto !important;
}
.merchant-badge { display: inline-block !important; padding: 4px 0 !important; overflow: hidden !important; vertical-align: middle !important; user-select: all !important; white-space: nowrap !important; }
.merchant-badge-seg { padding: 4px 0 !important; }
.merchant-badge-seg:first-child { padding-left: 10px !important; }
.merchant-badge-seg:last-child { padding-right: 10px !important; }
.modal-content.modal-sm { width: 440px !important; max-width: calc(100% - 2rem) !important; height: auto !important; max-height: calc(100dvh - 3rem) !important; }
/* 钱包表格行高钉死 30px：两端像素级相等，不再靠基线巧合对齐（弹窗尺寸保持全站 1280*800 标准不动） */
.pay-table.wallet-table td { height: 30px; }
/* 管理端 inline 全局 th,td{padding:12px} 为准：钱包弹窗两端统一宽松行高 */
.pay-table.wallet-table th,
.pay-table.wallet-table td {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  border-bottom: 1px solid #e9ebf0;
}
/* 全站正文统一主题色（浅色近黑、深色自适应）：弱化灰阶收敛为正文色；徽标/按钮等显式配色不受影响 */
.text-gray-400,
.text-gray-500,
.text-gray-600 {
  color: var(--nimbus-text) !important;
}
.pay-table th,
.pay-table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  max-width: 320px !important;
  vertical-align: middle !important;
}
/* ---------- 移动卡（<768px 表格转卡片，两端通用） ---------- */
.pay-cards { display: none; }
.pay-card {
  background: #fff;
  border: 1px solid var(--nimbus-line);
  border-radius: 12px;
  padding: 12px 14px;
}
.pay-card + .pay-card { margin-top: 12px; }
.pay-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.pay-card-label { color: var(--nimbus-muted); flex-shrink: 0; }
.pay-card-value { text-align: right; overflow-wrap: break-word; min-width: 0; }
html.dark .pay-card { background: #131417; border-color: #1e222b; }
@media (max-width: 767px) {
  .pay-table-responsive > .pay-table { display: none; }
  .pay-cards { display: block; }
}
/* ---------- 分页条：右对齐翻页（对标 IDC 卡底分页） ---------- */
.pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 4px !important;
  font-size: 13px !important;
  color: var(--nimbus-muted) !important;
}
.pagination button {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border: 1px solid var(--nimbus-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--nimbus-text) !important;
  cursor: pointer !important;
}
.pagination button:hover { background: rgba(94, 106, 210, 0.09) !important; }
/* 商户端徽标/小按钮/二维码圆角已收敛至 pay-ui.css，此处不再重复定义 */
/* ---------- 商户端输入聚焦紫环（对标管理端 focus） ---------- */
#app input:focus,
#app select:focus,
#app textarea:focus {
  border-color: #5e6ad2 !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18) !important;
  outline: none !important;
}

/* ---------- 遗留动态 pills 兼容（周期切换等仍用 bg-blue-500，主按钮已收敛 pay-ui） ---------- */
#app .bg-blue-500 {
  background: var(--nimbus-primary) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1) !important;
}
#app .hover\:bg-blue-600:hover {
  background: var(--nimbus-primary-strong) !important;
  filter: none !important;
  transform: none !important;
}
.trend-period.active {
  background: var(--nimbus-primary) !important;
}

/* ==========================================================================
 * 弹窗统一（对标 IDC 弹窗规范）：遮罩 rgba(0,0,0,.2) /
 * 管理端 .modal 与商户端 .idc-modal 均为带侧栏+顶栏的面板页，
 * 遮罩只覆盖内容区（顶栏 56px 之下、侧边栏 150px 之右；
 * <768px 移动端侧栏离屏、遮罩全宽） / 内容宽 min(1280px)、高固定
 * min(800px) / 页头 48px + X 关闭钮 32×32 / 正文内滚 / 页脚右对齐 /
 * scale-in 0.2s / 遮罩点击关闭（内容区暗区）/ 拖头移动。
 * ========================================================================== */
/* 遮罩：两端统一（面板内覆盖内容区，居中相对内容区；对齐 IDC app-shell） */
body .modal {
  display: none;
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
body .modal.show {
  display: flex;
}
.idc-modal {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
@media (min-width: 768px) {
  body .modal,
  .idc-modal {
    left: 150px !important;
  }
}
/* 内容：宽 min(1280px, calc(100% - 2rem))（相对遮罩内容区）/ 高固定
 * min(800px, calc(100dvh - 3rem))（对标 IDC modal-fixed：页头/页脚固定、正文
 * 内滚）/ flex 纵向 / 圆角8 / shadow-2xl / 缩放入场；
 * body 加 min-height:0 保证超高时正文收缩滚动、页脚不截断 */
.modal-content,
.idc-modal-content {
  display: flex !important;
  flex-direction: column !important;
  width: min(1280px, calc(100% - 2rem)) !important;
  max-width: 100% !important;
  height: min(800px, calc(100dvh - 3rem)) !important;
  max-height: min(800px, calc(100dvh - 3rem)) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: var(--nimbus-surface) !important;
  border: 1px solid var(--nimbus-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  animation: idc-modal-in 0.2s ease-out;
}
/* 页头：min-h 48px / 发丝下边线 / 标题16 墨 / 关闭钮 32×32 圆角8 */
.modal-header,
.idc-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-shrink: 0;
  min-height: 48px !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--nimbus-line) !important;
}
.modal-title,
.idc-modal-title,
#modalTitle {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--nimbus-text) !important;
}
.modal-close,
.idc-modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--nimbus-muted) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover,
.idc-modal-close:hover {
  background: var(--nimbus-soft) !important;
  color: var(--nimbus-text) !important;
}
.modal-close svg,
.idc-modal-close svg {
  width: 20px;
  height: 20px;
}
/* 正文：flex-1 滚动 / p-4~p-5；min-height:0 允许超高内容收缩到窗口内 */
.modal-body,
.idc-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px !important;
}
/* 页脚：发丝上边线 / 右对齐 */
.modal-footer,
.idc-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0;
  padding: 12px 20px !important;
  border-top: 1px solid var(--nimbus-line) !important;
}
/* 缩放入场动画 */
@keyframes idc-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- 深色模式（html.dark）：底 #131417 / 边 #1e222b / 正文浅字 ---------- */
html.dark .modal-content,
html.dark .idc-modal-content {
  background: #131417 !important;
  border-color: #1e222b !important;
}
html.dark .modal-header,
html.dark .idc-modal-header,
html.dark .modal-footer,
html.dark .idc-modal-footer {
  border-color: #1e222b !important;
}
html.dark .modal-title,
html.dark .idc-modal-title,
html.dark #modalTitle {
  color: #e5e7eb !important;
}
html.dark .modal-close,
html.dark .idc-modal-close {
  color: #8b93a7 !important;
}
html.dark .modal-close:hover,
html.dark .idc-modal-close:hover {
  background: #1e222b !important;
  color: #f3f4f6 !important;
}
html.dark .modal-body,
html.dark .idc-modal-body,
html.dark .modal-body td,
html.dark .idc-modal-body td,
html.dark .modal-body .form-group label,
html.dark .idc-modal-body .text-gray-900,
html.dark .idc-modal-body .text-gray-800,
html.dark .idc-modal-body .text-gray-700,
html.dark .idc-modal-body .text-gray-600,
html.dark .idc-modal-body .text-gray-500,
html.dark .idc-modal-body label {
  color: #cbd5e1 !important;
}
html.dark .modal-body input,
html.dark .modal-body select,
html.dark .modal-body textarea,
html.dark .idc-modal-body input,
html.dark .idc-modal-body select,
html.dark .idc-modal-body textarea {
  background: #131417 !important;
  border-color: #1e222b !important;
  color: #e5e7eb !important;
}
html.dark .modal-body input[disabled],
html.dark .modal-body select[disabled],
html.dark .idc-modal-body input[disabled],
html.dark .idc-modal-body select[disabled] {
  opacity: 0.55;
}
html.dark .modal-footer .btn,
html.dark .modal-footer .btn-sm {
  color: #e5e7eb !important;
}
html.dark .idc-modal-footer button.border {
  border-color: #1e222b !important;
  background: transparent !important;
  color: #e5e7eb !important;
}
html.dark .idc-modal-footer button.border:hover {
  background: #1e222b !important;
}

/* ==========================================================================
 * 管理端顶栏 fixed 锁死（与商户端一致；sticky 在该文档流下不可靠）
 * ========================================================================== */
.main-content > .header {
  position: fixed !important;
  top: 0 !important;
  left: 150px !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 30 !important;
}
/* 内容区顶部垫出 56px 顶栏 + 间距（移动 20 / 桌面 24，对齐工作区节奏） */
.main-content {
  padding-top: 76px !important;
}
@media (min-width: 768px) {
  .main-content {
    padding-top: 80px !important;
  }
}

